/* ==========================================================================
   Life OS — веб-интерфейс
   Изящный минимализм, симметрия, системные шрифты, умная адаптация.

   Cascade: reset → tokens → layout → components → routes → overrides.
   Container queries (`adaptive-surface`) и fluid tokens — основной responsive-слой;
   viewport media queries остаются только для shell/safe-area и coarse-pointer.
   ========================================================================== */

@layer lifeos.reset, lifeos.tokens, lifeos.layout, lifeos.components, lifeos.routes, lifeos.overrides;

:root {
  color-scheme: dark;

  --page: #000;
  --surface-canvas: var(--page);
  --mask-ink: #000;
  --viewport-small-height: 100vh;
  --viewport-large-height: 100vh;
  --viewport-dynamic-height: 100vh;
  --viewport-fill-height: 100vh;
  --viewport-height: 100vh;
  --viewport-stable-height: 100vh;
  --home-viewport-height: var(--viewport-stable-height);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --fluid-inline: 1vw;
  --fluid-block: 1svh;
  --fluid-min: 1vmin;
  --fluid-max: 1vmax;
  --fluid-container-inline: var(--fluid-inline);
  --fluid-container-block: var(--fluid-block);
  --fluid-container-min: var(--fluid-min);
  --fluid-container-max: var(--fluid-max);
  --container-cqw: 100%;
  --container-cqi: 100%;
  --container-cqb: 100%;
  --container-cqmin: min(var(--container-cqi), var(--container-cqb));
  --container-cqmax: max(var(--container-cqi), var(--container-cqb));
  --container-cqi-compact: 32%;
  --container-cqi-control: 38%;
  --container-cqi-popover: 52%;
  --container-cqi-media-wide: 54%;
  --container-cqi-readable-compact: 68%;
  --container-cqi-readable-narrow: 68.8%;
  --container-cqi-media: 72%;
  --container-cqi-action-wide: 78%;
  --container-cqi-media-compact: 82%;
  --container-cqi-visual-small: 24%;
  --container-safe-inline: calc(var(--container-cqw) - var(--shell-gutter) * 2);
  --container-stage-safe-inline: calc(var(--container-cqw) - var(--stage-inline-gutter) * 2);
  --container-space-safe-inline: calc(var(--container-cqw) - var(--space-4) * 2);
  --container-query-safe-inline: calc(var(--container-cqi) - var(--shell-gutter) * 2);
  --container-query-space-safe-inline: calc(var(--container-cqi) - var(--space-4) * 2);
  --container-safe-block: max(
    0px,
    calc(var(--container-cqb) - var(--safe-area-top) - var(--safe-area-bottom))
  );
  --adaptive-fluid-inline: calc(var(--fluid-container-inline) * 0.78);
  --adaptive-fluid-block: calc(var(--fluid-container-block) * 1.05);
  --adaptive-fluid-min: min(var(--adaptive-fluid-inline), var(--adaptive-fluid-block));

  --text: rgba(255, 255, 255, 0.96);
  --text-strong: rgba(255, 255, 255, 1);
  --text-soft: rgba(255, 255, 255, 0.78);
  --text-muted: rgba(255, 255, 255, 0.52);
  --text-faint: rgba(255, 255, 255, 0.34);

  --accent: rgb(245, 229, 204);
  --accent-ink: rgba(0, 0, 0, 0.84);
  --goal-accent: #bd4d76;
  --feedback-error-color: #e46c5d;
  --status-error-text-size: calc(var(--form-card-meta-size) * 0.8);
  --surface-soft: rgba(255, 255, 255, 0.035);

  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.26);

  --line-width-hair: 1px;
  --line-width-thin: 0.5px;
  --divider-width: var(--line-width-hair);
  --divider-width-double: calc(var(--divider-width) * 2);
  --divider-offset: calc(var(--divider-width) * -0.5);
  --decoration-line-width: var(--line-width-hair);
  --text-decoration-line-width: var(--line-width-hair);
  --visually-hidden-size: var(--line-width-hair);
  --visually-hidden-offset: calc(var(--visually-hidden-size) * -1);
  --radius-none: 0;
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;
  --focus-ring-offset-loose: 4px;
  --press-shift: 1px;
  --dialog-safe-gap: var(--space-3);
  --overlay-full-inset: 0;
  --overlay-full-inline: 100%;
  --overlay-full-block: var(--viewport-fill-height);
  --overlay-panel-radius: var(--radius-md);
  --overlay-fullscreen-radius: var(--radius-none);
  --overlay-scrollbar-size: 0;
  --overlay-border-width: var(--divider-width);
  --overlay-border: var(--overlay-border-width) solid var(--hairline);
  --overlay-header-padding-block-start: max(var(--safe-area-top), var(--space-4));
  --overlay-content-padding-block-end: calc(var(--space-5) + var(--safe-area-bottom));
  --sheet-full-inset: var(--overlay-full-inset);
  --sheet-full-inline: var(--overlay-full-inline);
  --sheet-block-size: var(--plus-route-height);
  --sheet-safe-area-bottom: var(--safe-area-bottom);
  --sheet-scroll-padding-bottom: calc(var(--sheet-safe-area-bottom) + var(--back-control-size));
  --shadow-dialog: 0 1rem 3rem rgba(0, 0, 0, 0.32);

  --layout-base-gap: clamp(
    0.36rem,
    min(calc(var(--fluid-inline) * 1.18), calc(var(--fluid-block) * 1.05)),
    0.58rem
  );
  --layout-stack-gap: clamp(1.35rem, calc(var(--adaptive-base-gap) * 3.2), 2.05rem);
  --layout-stack-gap-tight: clamp(0.72rem, calc(var(--adaptive-base-gap) * 1.8), 1.15rem);
  --layout-control-gap: clamp(0.24rem, calc(var(--adaptive-base-gap) * 0.76), 0.5rem);
  --layout-micro-gap: calc(var(--adaptive-base-gap) * 0.32);
  --layout-chip-gap: clamp(0.42rem, calc(var(--adaptive-base-gap) * 1.22), 0.62rem);
  --layout-section-gap: clamp(1.15rem, calc(var(--adaptive-base-gap) * 3.1), 1.8rem);
  --layout-hero-gap: clamp(2.6rem, calc(var(--adaptive-base-gap) * 8), 4.8rem);
  --layout-route-row-start: clamp(1.25rem, calc(var(--fluid-block) * 4), 2rem);
  --layout-route-row-end: clamp(3.75rem, calc(var(--fluid-block) * 9), 5rem);
  --layout-route-row-end-compact: clamp(0.9rem, calc(var(--fluid-block) * 2.5), 1.35rem);
  --layout-route-panel-gap: clamp(1.1rem, calc(var(--fluid-min) * 3), 1.6rem);
  --layout-route-panel-padding-block: clamp(1rem, calc(var(--fluid-min) * 2.8), 1.5rem);
  --layout-panel-padding-block: clamp(2rem, calc(var(--fluid-min) * 5), 3rem);
  --layout-surface-padding-block: clamp(2rem, calc(var(--fluid-min) * 6), 3rem);
  --layout-copy-gap: clamp(0.78rem, calc(var(--fluid-min) * 2.1), 1.05rem);
  --layout-copy-section-gap: clamp(0.22rem, calc(var(--fluid-min) * 0.8), 0.38rem);
  --layout-form-gap: clamp(0.34rem, calc(var(--fluid-min) * 1), 0.52rem);
  --layout-form-offset: clamp(0.72rem, calc(var(--fluid-min) * 2.1), 1.15rem);
  --layout-action-gap: clamp(0.55rem, calc(var(--fluid-min) * 1.6), 0.85rem);
  --layout-login-panel-offset: clamp(0rem, calc(var(--fluid-block) * 1.8), 1.2rem);
  --legacy-course-tab-min-height-compact: clamp(1.7rem, calc(var(--fluid-block) * 4), 2.05rem);
  --legacy-course-tab-padding-inline-compact: clamp(
    0.16rem,
    calc(var(--fluid-inline) * 1.2),
    0.32rem
  );
  --layout-profile-split-column-gap: clamp(2rem, calc(var(--fluid-inline) * 5), 4.5rem);
  --layout-block-stage-min: 50svh;
  --layout-block-split-stage-compact: 44svh;
  --layout-block-watch-panel-compact: 56svh;
  --layout-block-stage-tablet: 52svh;
  --layout-block-payment-overlay-offset: 62svh;
  --layout-block-profile-split-divider: 26svh;
  --layout-block-choice-panel-gap-landscape: 2.6svh;
  --layout-block-choice-card-padding-landscape: 2.28svh;
  --layout-block-choice-card-min-landscape: 18svh;
  --layout-block-stage-rotator-compact: 12svh;
  --layout-block-centered-actions: 48svh;
  --layout-block-centered-actions-compact: 46svh;
  --layout-block-status-error-slot: 7.2svh;
  --layout-block-status-error-offset: 1.1svh;
  --layout-block-back-zone: 15svh;
  --layout-block-profile-footer-compact: 7svh;
  --layout-block-plus-sheet-copy-landscape: 52svh;
  --layout-block-plus-sheet-gap-compact: 1.9svh;
  --layout-profile-split-divider-min-block: clamp(
    10rem,
    var(--layout-block-profile-split-divider),
    17rem
  );
  --layout-choice-panel-gap-landscape: clamp(
    0.55rem,
    var(--layout-block-choice-panel-gap-landscape),
    0.85rem
  );
  --layout-choice-card-padding-block-landscape: clamp(
    0.504rem,
    var(--layout-block-choice-card-padding-landscape),
    0.792rem
  );
  --choice-card-min-height-landscape: clamp(
    3.6rem,
    var(--layout-block-choice-card-min-landscape),
    4.38rem
  );
  --stage-rotator-min-height-compact: clamp(
    2.5rem,
    var(--layout-block-stage-rotator-compact),
    3.4rem
  );
  --layout-offer-status-gap: clamp(0.32rem, calc(var(--fluid-min) * 0.9), 0.5rem);
  --layout-offer-faq-gap: clamp(1.15rem, calc(var(--fluid-min) * 2.8), 1.7rem);
  --layout-offer-faq-current-gap: clamp(0.72rem, calc(var(--fluid-min) * 1.9), 1rem);
  --layout-offer-faq-tag-gap: clamp(0.46rem, calc(var(--fluid-min) * 1.08), 0.82rem);
  --layout-offer-hint-offset-gap: clamp(0.38rem, calc(var(--fluid-min) * 1.1), 0.58rem);
  --layout-offer-faq-heading-gap: clamp(0.75rem, calc(var(--fluid-min) * 2), 1.2rem);
  --layout-offer-faq-heading-gap-compact: clamp(0.36rem, calc(var(--fluid-min) * 0.84), 0.42rem);
  --layout-accordion-max-inline: min(28rem, 100%);
  --accordion-inline: min(
    var(--layout-accordion-max-inline),
    calc(100vw - var(--shell-gutter) * 2)
  );
  --accordion-body-inline: var(--container-form-local);
  --accordion-copy-measure: 38ch;
  --accordion-title-size: var(--type-body-large);
  --accordion-title-size-compact: max(1.125rem, var(--accordion-title-size));
  --accordion-title-weight: 700;
  --accordion-title-line-height: var(--leading-caption);
  --accordion-body-size: var(--type-body);
  --accordion-body-size-compact: max(1rem, var(--accordion-body-size));
  --accordion-body-line-height: var(--leading-comfort);
  --accordion-paragraph-gap: var(--layout-copy-gap);
  --accordion-row-padding-block: clamp(0.72rem, calc(var(--adaptive-base-gap) * 2.05), 1.08rem);
  --accordion-row-padding-factor: 1.1;
  --accordion-row-padding-inline: var(--space-2);
  --accordion-body-gap: clamp(0.9rem, calc(var(--adaptive-base-gap) * 2.4), 1.25rem);
  --accordion-body-padding-block-end: clamp(1.05rem, calc(var(--adaptive-base-gap) * 2.7), 1.45rem);
  --accordion-stack-gap: var(--split-content-actions-gap, var(--accordion-body-gap));
  --accordion-border-color: var(--hairline);
  --accordion-border-color-open: rgba(255, 255, 255, 0.2);
  --accordion-indicator-color: var(--text-muted);
  --accordion-indicator-size: var(--type-body);
  --layout-offer-panel-scroll-padding-block: clamp(1.25rem, calc(var(--fluid-min) * 4), 2.5rem);
  --layout-offer-panel-scroll-padding-block-compact: clamp(
      1.55rem,
      calc(var(--fluid-min) * 4.8),
      2rem
    )
    clamp(0.85rem, calc(var(--fluid-min) * 2.8), 1.15rem);
  --layout-offer-summary-offset: clamp(0.95rem, calc(var(--fluid-min) * 2.3), 1.35rem);
  --layout-gift-greeting-zone-min-height: clamp(5.5rem, calc(var(--fluid-block) * 10), 6rem);
  --layout-gift-greeting-shell-inline: min(100%, 34rem);
  --layout-gift-offer-form-gap: clamp(0.56rem, calc(var(--fluid-min) * 1.45), 0.82rem);
  --layout-gift-template-rail-reserve-side: 4.35rem;
  --layout-gift-template-selector-gap: clamp(0.18rem, calc(var(--fluid-min) * 0.48), 0.32rem);
  --layout-gift-template-dot-gap: clamp(0.42rem, calc(var(--fluid-min) * 1), 0.58rem);
  --layout-gift-template-side-dot-gap: clamp(0.18rem, calc(var(--fluid-min) * 0.52), 0.34rem);
  --layout-tariff-summary-gap: clamp(0.45rem, calc(var(--fluid-min) * 1.1), 0.55rem);
  --layout-watch-video-max-block: min(calc(var(--fluid-block) * 72), 34rem);
  --layout-profile-inline-form-gap: calc(var(--adaptive-base-gap) * 0.7);
  --layout-profile-inline-form-padding-block: calc(var(--adaptive-base-gap) * 0.4);
  --layout-profile-inline-form-padding-inline: clamp(0.9rem, calc(var(--fluid-min) * 2), 1.2rem);
  --layout-profile-schedule-padding-block: clamp(0.62rem, calc(var(--fluid-block) * 1.6), 0.85rem);
  --layout-profile-schedule-padding-inline: clamp(0.9rem, calc(var(--fluid-inline) * 2.2), 1.15rem);
  --group-offer-copy-size-base: clamp(
    0.855rem,
    min(calc(var(--fluid-inline) * 3.42), calc(var(--fluid-block) * 1.89)),
    1.206rem
  );
  --group-offer-heading-size-base: clamp(
    0.9rem,
    min(calc(var(--fluid-inline) * 3.69), calc(var(--fluid-block) * 2.025)),
    1.35rem
  );
  --group-offer-copy-size-compact: clamp(
    0.9rem,
    min(calc(var(--fluid-inline) * 3.96), calc(var(--fluid-block) * 1.845)),
    1.17rem
  );
  --group-offer-heading-size-compact: clamp(
    0.918rem,
    min(calc(var(--fluid-inline) * 4.32), calc(var(--fluid-block) * 1.98)),
    1.35rem
  );
  --layout-modal-loading-padding: clamp(1.25rem, calc(var(--fluid-min) * 3), 1.5rem);
  --layout-list-gap: clamp(0.32rem, calc(var(--fluid-block) * 0.8), 0.4rem);
  --layout-chip-padding-block: clamp(0.43rem, calc(var(--fluid-min) * 0.95), 0.58rem);
  --layout-chip-padding-inline: clamp(0.76rem, calc(var(--fluid-min) * 1.45), 1rem);
  --layout-chip-padding-block-sm: clamp(0.34rem, calc(var(--adaptive-base-gap) * 0.78), 0.42rem);
  --layout-chip-padding-inline-sm: clamp(0.68rem, calc(var(--adaptive-base-gap) * 1.72), 0.92rem);
  --layout-chip-padding-block-compact: clamp(
    0.3rem,
    calc(var(--adaptive-base-gap) * 0.72),
    0.36rem
  );
  --layout-chip-padding-inline-compact: clamp(0.58rem, calc(var(--fluid-inline) * 2.3), 0.78rem);
  --layout-chip-padding-inline-dense: clamp(0.52rem, calc(var(--fluid-inline) * 2.2), 0.72rem);
  --layout-profile-main-gap-compact: clamp(2.4rem, calc(var(--fluid-block) * 7.2), 4.2rem);
  --layout-profile-main-gap-phone: clamp(2.9rem, calc(var(--fluid-block) * 8), 4.5rem);
  --layout-profile-main-gap-wide: clamp(2.6rem, calc(var(--adaptive-base-gap) * 8), 4.8rem);
  --layout-profile-section-gap-compact: clamp(
    0.9rem,
    calc(var(--adaptive-base-gap) * 2.5),
    1.35rem
  );
  --layout-profile-section-gap-phone: clamp(0.9rem, calc(var(--fluid-block) * 2.2), 1.2rem);
  --layout-profile-section-gap-wide: clamp(1.15rem, calc(var(--adaptive-base-gap) * 3.1), 1.8rem);
  --layout-profile-cluster-gap-compact: clamp(
    0.32rem,
    calc(var(--adaptive-base-gap) * 1.1),
    0.5rem
  );
  --layout-profile-cluster-gap-phone: clamp(0.32rem, calc(var(--fluid-inline) * 1.35), 0.5rem);
  --profile-loading-tag-inline-base: clamp(4.8rem, calc(var(--fluid-min) * 12), 6.8rem);
  --profile-confirm-action-inline-base: clamp(5.25rem, calc(var(--fluid-inline) * 14), 6.5rem);
  --layout-goal-gap: clamp(0.46rem, calc(var(--fluid-min) * 1.08), 0.82rem);
  --layout-goal-gap-compact: clamp(0.22rem, calc(var(--fluid-inline) * 1.1), 0.38rem);
  --layout-goal-cloud-inset-block-compact: clamp(0.5rem, calc(var(--fluid-block) * 1.2), 0.82rem);
  --layout-goal-cloud-inset-inline-compact: clamp(
    0.38rem,
    calc(var(--fluid-inline) * 1.05),
    0.72rem
  );
  --layout-choice-panel-gap: clamp(1.35rem, calc(var(--fluid-block) * 4.5), 2.75rem);
  --layout-choice-panel-gap-wide: clamp(1.65rem, calc(var(--fluid-block) * 4.2), 2.7rem);
  --layout-choice-options-gap: clamp(0.78rem, calc(var(--fluid-block) * 1.92), 1.152rem);
  --layout-choice-options-gap-narrow: clamp(1.35rem, calc(var(--fluid-block) * 2.8), 1.85rem);
  --layout-choice-options-gap-wide: clamp(0.84rem, calc(var(--fluid-inline) * 1.68), 1.38rem);
  --layout-choice-card-padding-block: clamp(1.2rem, calc(var(--fluid-min) * 3.12), 1.74rem);
  --layout-choice-card-padding-inline: clamp(0.96rem, calc(var(--fluid-min) * 2.4), 1.38rem);
  --layout-choice-card-padding-inline-wide: clamp(
    0.84rem,
    calc(var(--fluid-inline) * 1.44),
    1.44rem
  );
  --layout-choice-card-gap: clamp(0.384rem, calc(var(--fluid-min) * 1.08), 0.66rem);
  --choice-title-fluid-size: var(--type-title-small);
  --choice-title-narrow-fluid-size: calc(var(--choice-title-fluid-size) * 1.1);
  --choice-title-wide-fluid-size: var(--type-title-medium);
  --choice-title-landscape-fluid-size: var(--type-title-small);
  --choice-title-max-size: var(--type-title-medium);
  --choice-subtitle-narrow-size: calc(var(--type-caption) * 1.1);
  --choice-separator-inline-narrow: min(8rem, 34%);
  --choice-separator-color-narrow: rgba(255, 255, 255, 0.12);
  --layout-registration-control-gap: clamp(1.05rem, calc(var(--fluid-min) * 2.5), 1.45rem);
  --layout-registration-control-gap-compact: clamp(0.8rem, calc(var(--fluid-min) * 2), 1.05rem);
  --layout-rules-consent-gap: clamp(0.32rem, calc(var(--fluid-min) * 1.1), 0.62rem);
  --layout-readiness-gap: clamp(1rem, calc(var(--fluid-min) * 2.2), 1.35rem);
  --layout-readiness-actions-offset: clamp(0.35rem, calc(var(--fluid-min) * 1.2), 0.7rem);
  --layout-watch-series-nav-gap: clamp(0.1rem, calc(var(--fluid-min) * 0.6), 0.2rem);
  --layout-watch-series-button-padding-block: clamp(0.08rem, calc(var(--fluid-min) * 0.22), 0.1rem);
  --layout-watch-series-button-padding-inline: clamp(
    0.16rem,
    calc(var(--fluid-min) * 0.42),
    0.2rem
  );
  --layout-messages-header-gap: clamp(0.7rem, calc(var(--fluid-inline) * 2), 1rem);
  --layout-messages-header-gap-compact: clamp(0.55rem, calc(var(--fluid-inline) * 2.1), 0.82rem);
  --layout-messages-header-padding-block: clamp(0.75rem, calc(var(--fluid-block) * 1.8), 1rem);
  --layout-messages-feed-padding-block: clamp(0.9rem, calc(var(--fluid-block) * 2.2), 1.35rem);
  --layout-messages-feed-padding-block-compact: clamp(
    0.72rem,
    calc(var(--fluid-block) * 1.85),
    1.05rem
  );
  --layout-messages-feed-gap: clamp(0.28rem, calc(var(--fluid-block) * 0.9), 0.56rem);
  --layout-messages-feed-gap-compact: clamp(0.22rem, calc(var(--fluid-block) * 0.72), 0.44rem);
  --layout-messages-item-gap: clamp(0.84rem, calc(var(--fluid-block) * 2.3), 1.24rem);
  --layout-messages-item-gap-compact: clamp(0.68rem, calc(var(--fluid-block) * 1.9), 1rem);
  --layout-sheet-dock-offset: clamp(0.75rem, calc(var(--fluid-block) * 2.2), 1.4rem);
  --layout-sheet-dock-gap: clamp(0.7rem, calc(var(--fluid-block) * 2), 1.1rem);
  --layout-sheet-padding-block-start: clamp(0.5rem, calc(var(--fluid-block) * 1.8), 1.1rem);
  --layout-sheet-padding-inline: clamp(1.15rem, calc(var(--fluid-inline) * 7), 4.5rem);
  --layout-sheet-switch-gap: clamp(0.35rem, calc(var(--fluid-block) * 1.1), 0.7rem);
  --layout-sheet-section-gap: clamp(0.9rem, calc(var(--fluid-block) * 2.45), 1.55rem);
  --layout-sheet-frame-padding-block: clamp(0.18rem, calc(var(--fluid-block) * 0.8), 0.5rem);
  --layout-sheet-copy-gap: clamp(0.45rem, calc(var(--fluid-block) * 1.2), 0.78rem);
  --layout-sheet-format-gap: clamp(0.65rem, calc(var(--fluid-block) * 2.1), 1.2rem);
  --layout-sheet-control-padding-block: clamp(0.58rem, calc(var(--fluid-block) * 1.5), 0.86rem);
  --layout-sheet-tab-padding-block: clamp(0.34rem, calc(var(--fluid-block) * 0.95), 0.42rem);
  --layout-sheet-tab-padding-inline: clamp(0.12rem, calc(var(--fluid-inline) * 1.15), 0.85rem);
  --layout-notice-offset: max(var(--safe-area-top), var(--space-2));
  --layout-bottom-offset: max(var(--safe-area-bottom), var(--space-1));
  --safe-shell-gutter-start: max(var(--shell-gutter), var(--safe-area-left));
  --safe-shell-gutter-end: max(var(--shell-gutter), var(--safe-area-right));
  --safe-stage-gutter-start: max(var(--stage-gutter), var(--safe-area-left));
  --safe-stage-gutter-end: max(var(--stage-gutter), var(--safe-area-right));
  --layout-shell-gutter-base: clamp(1.25rem, calc(var(--fluid-inline) * 4), 2.75rem);
  --layout-shell-gutter-compact: clamp(0.92rem, calc(var(--fluid-inline) * 3.2), 1rem);
  --layout-shell-gutter-min: clamp(0.5rem, calc(var(--fluid-inline) * 2.5), 0.7rem);
  --layout-stage-gutter-base: clamp(1.25rem, calc(var(--fluid-min) * 4.5), 2.25rem);
  --layout-stage-gutter-compact: clamp(0.82rem, calc(var(--fluid-inline) * 3.2), 0.95rem);
  --layout-stage-gutter-min: clamp(0.5rem, calc(var(--fluid-inline) * 2.5), 0.7rem);
  --layout-panel-gutter-max-ratio: 6%;
  --layout-stage-gutter-max-ratio: 5%;
  --layout-back-zone-compact: clamp(3.6rem, calc(var(--fluid-block) * 13), 5.25rem);
  --layout-back-zone-min: clamp(3rem, calc(var(--fluid-block) * 12), 4.25rem);
  --layout-back-zone-landscape: clamp(3rem, calc(var(--fluid-block) * 14), 4.5rem);
  --layout-back-control-min: clamp(1.55rem, calc(var(--fluid-inline) * 7), 1.9rem);
  --layout-back-control-landscape: clamp(1.55rem, calc(var(--fluid-block) * 6), 1.95rem);
  --layout-back-arrow-min: clamp(0.5rem, calc(var(--fluid-inline) * 3.2), 0.72rem);
  --layout-back-arrow-landscape: clamp(0.5rem, calc(var(--fluid-block) * 3), 0.78rem);
  --panel-inline-gutter: min(var(--shell-gutter), var(--layout-panel-gutter-max-ratio));
  --panel-safe-gutter-start: max(var(--panel-inline-gutter), var(--safe-area-left));
  --panel-safe-gutter-end: max(var(--panel-inline-gutter), var(--safe-area-right));
  --stage-inline-gutter: min(var(--stage-gutter), var(--layout-stage-gutter-max-ratio));
  --stage-safe-gutter-start: max(var(--stage-inline-gutter), var(--safe-area-left));
  --stage-safe-gutter-end: max(var(--stage-inline-gutter), var(--safe-area-right));

  /* типографика — единый центр: шкала, роли, leading и tracking */
  --type-min: 0.374rem; /* 5.984px = прежний минимум 5.44px + 10% */
  --type-micro: clamp(
    var(--type-min),
    min(calc(var(--fluid-inline) * 1.5), calc(var(--fluid-block) * 1.9)),
    0.72rem
  );
  --type-tiny: clamp(
    0.62rem,
    min(calc(var(--fluid-inline) * 1.9), calc(var(--fluid-block) * 2.4)),
    0.82rem
  );
  --type-fine: clamp(
    0.78rem,
    min(calc(var(--fluid-inline) * 2.2), calc(var(--fluid-block) * 2.8)),
    0.95rem
  );
  --type-caption: clamp(
    0.85rem,
    min(calc(var(--fluid-inline) * 2.4), calc(var(--fluid-block) * 3)),
    1rem
  );
  --type-small: clamp(
    0.95rem,
    min(calc(var(--fluid-inline) * 2.6), calc(var(--fluid-block) * 3.2)),
    1.12rem
  );
  --type-body: clamp(
    1.05rem,
    min(calc(var(--fluid-inline) * 3), calc(var(--fluid-block) * 3.7)),
    1.32rem
  );
  --type-body-large: clamp(
    1.2rem,
    min(calc(var(--fluid-inline) * 3.4), calc(var(--fluid-block) * 4.2)),
    1.55rem
  );
  --type-title-small: clamp(
    1.35rem,
    min(calc(var(--fluid-inline) * 4), calc(var(--fluid-block) * 4.6)),
    2.05rem
  );
  --type-title-medium: clamp(
    1.55rem,
    min(calc(var(--fluid-inline) * 5), calc(var(--fluid-block) * 5.2)),
    2.4rem
  );
  --type-title-large: clamp(
    2rem,
    min(calc(var(--fluid-inline) * 6.5), calc(var(--fluid-block) * 6.8)),
    3.5rem
  );
  --type-display: clamp(
    2.6rem,
    min(calc(var(--fluid-inline) * 9), calc(var(--fluid-block) * 12)),
    4.8rem
  );
  --type-display-large: clamp(
    3rem,
    min(calc(var(--fluid-inline) * 9), calc(var(--fluid-block) * 12)),
    5.4rem
  );

  --type-legal: var(--type-tiny);
  --type-code-size: 0.92em;
  --type-meta: var(--type-caption);
  --type-overline: var(--type-fine);
  --type-control: clamp(0.78rem, calc(0.62rem + var(--adaptive-fluid) * 0.55), 1rem);
  --type-control-compact: var(--type-fine);
  --type-control-container: clamp(0.78rem, calc(0.62rem + var(--adaptive-fluid) * 0.56), 1.02rem);
  --type-control-narrow: clamp(0.78rem, calc(0.62rem + var(--adaptive-fluid) * 0.56), 0.9rem);
  --type-control-phone: clamp(0.72rem, calc(0.58rem + var(--adaptive-fluid) * 0.52), 0.82rem);
  --type-control-landscape: clamp(0.66rem, calc(0.5rem + var(--adaptive-fluid) * 0.88), 0.78rem);
  --type-panel-heading: clamp(1.2rem, calc(0.92rem + var(--adaptive-fluid) * 1.1), 2.1rem);
  --type-panel-copy: clamp(1.02rem, calc(0.78rem + var(--adaptive-fluid) * 0.82), 1.42rem);
  --type-panel-copy-container: clamp(
    1.02rem,
    calc(0.78rem + var(--adaptive-fluid) * 0.84),
    1.46rem
  );
  --type-panel-copy-narrow: clamp(1.02rem, calc(0.78rem + var(--adaptive-fluid) * 0.84), 1.12rem);
  --type-panel-copy-phone: clamp(0.94rem, calc(0.72rem + var(--adaptive-fluid) * 0.78), 1.02rem);
  --type-panel-copy-landscape: clamp(0.78rem, calc(0.58rem + var(--adaptive-fluid) * 1.2), 0.98rem);
  --type-panel-copy-compact: clamp(
    1.05rem,
    min(calc(var(--fluid-inline) * 4.35), calc(var(--fluid-block) * 2.65)),
    1.12rem
  );
  --type-panel-detail: clamp(0.86rem, calc(0.68rem + var(--adaptive-fluid) * 0.58), 1.1rem);
  --type-panel-detail-container: clamp(
    0.86rem,
    calc(0.68rem + var(--adaptive-fluid) * 0.6),
    1.12rem
  );
  --type-panel-detail-narrow: clamp(0.86rem, calc(0.68rem + var(--adaptive-fluid) * 0.6), 0.98rem);
  --type-panel-detail-phone: clamp(0.78rem, calc(0.62rem + var(--adaptive-fluid) * 0.58), 0.9rem);
  --type-panel-detail-landscape: clamp(
    0.72rem,
    calc(0.52rem + var(--adaptive-fluid) * 1.05),
    0.88rem
  );
  --type-panel-meta: calc(var(--adaptive-detail-size) * 0.86);
  --type-panel-count: calc(var(--adaptive-detail-size) * 0.82);
  --type-panel-control-small: calc(var(--adaptive-detail-size) * 0.9);
  --type-panel-relative-emphasis: 1.05em;
  --type-login-small: clamp(0.82rem, calc(var(--type-body) * 0.78), 1rem);
  --type-login-control: clamp(0.9rem, calc(var(--type-body) * 0.9), 1.08rem);
  --type-stage-phrase: clamp(
    0.95rem,
    min(calc(var(--fluid-block) * 4), calc(var(--fluid-inline) * 5.2)),
    2.1rem
  );
  --type-stage-anchor: calc(var(--type-stage-phrase) / 2);
  --stage-edge-caption-size-mobile-min: 12px;
  --stage-edge-caption-size-narrow: max(
    var(--stage-edge-caption-size-mobile-min),
    calc(var(--type-stage-anchor) * 0.78)
  );
  --type-stage-phrase-emphasis: calc(var(--type-stage-phrase) * 1.2);
  --type-stage-phrase-split: clamp(
    1.05rem,
    min(calc(var(--fluid-block) * 3.8), calc(var(--fluid-inline) * 5.2)),
    2.1rem
  );
  --type-stage-phrase-container: clamp(
    1.05rem,
    min(calc(var(--fluid-inline) * 5.2), calc(var(--fluid-block) * 6.4)),
    2.3rem
  );
  --type-gift-caption: var(--type-micro);
  --type-gift-message-min: 1.28rem;
  --type-gift-message-fluid-block: calc(var(--fluid-block) * 5.75);
  --type-gift-message-fluid-inline: calc(var(--fluid-inline) * 7.2);
  --type-gift-message-max: 3.25rem;
  --type-gift-message: clamp(
    var(--type-gift-message-min),
    min(var(--type-gift-message-fluid-block), var(--type-gift-message-fluid-inline)),
    var(--type-gift-message-max)
  );
  --type-gift-certificate-caption-base: calc(var(--type-gift-caption) * 1.1);
  --type-gift-certificate-caption-compact: calc(var(--type-gift-caption) * 1.21);
  --type-gift-certificate-caption-mobile-min: var(--stage-edge-caption-size-mobile-min);
  --type-gift-certificate-message: clamp(
    calc(var(--type-gift-message-min) * var(--gift-certificate-message-scale)),
    min(
      calc(var(--type-gift-message-fluid-block) * var(--gift-certificate-message-scale)),
      calc(var(--type-gift-message-fluid-inline) * var(--gift-certificate-message-scale))
    ),
    calc(var(--type-gift-message-max) * var(--gift-certificate-message-scale))
  );
  --type-gift-greeting-message: clamp(
    calc(
      var(--type-gift-message-min) * var(--gift-greeting-fit-scale) *
        var(--gift-greeting-mobile-scale)
    ),
    min(
      calc(
        var(--type-gift-message-fluid-block) * var(--gift-greeting-fit-scale) *
          var(--gift-greeting-mobile-scale)
      ),
      calc(
        var(--type-gift-message-fluid-inline) * var(--gift-greeting-fit-scale) *
          var(--gift-greeting-mobile-scale)
      )
    ),
    calc(
      var(--type-gift-message-max) * var(--gift-greeting-fit-scale) *
        var(--gift-greeting-mobile-scale)
    )
  );
  --type-gift-greeting-message-container: clamp(
    calc(0.96rem * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale)),
    min(
      calc(5.8cqi * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale)),
      calc(6cqh * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale))
    ),
    calc(2.6rem * var(--gift-greeting-fit-scale) * var(--gift-greeting-mobile-scale))
  );
  --type-gift-greeting-landscape: clamp(1.08rem, calc(var(--fluid-block) * 8.4), 1.72rem);
  --type-course-tab: var(--type-tiny);
  --type-course-tab-compact: var(--type-micro);
  --type-solo-offer-copy: clamp(0.875rem, calc(var(--fluid-inline) * 1.6), 1rem);
  --type-solo-offer-copy-compact: clamp(0.68rem, calc(var(--fluid-inline) * 1.45), 0.86rem);
  --type-solo-offer-top-copy: calc(var(--type-small) * 0.9);
  --type-solo-offer-title: clamp(
    2.6rem,
    min(calc(var(--fluid-block) * 9), calc(var(--fluid-inline) * 12)),
    4.85rem
  );
  --type-offer-landscape-copy: clamp(0.78rem, calc(var(--fluid-block) * 4.8), 0.94rem);
  --type-solo-offer-landscape-copy: clamp(0.68rem, calc(var(--fluid-block) * 3.7), 0.78rem);
  --type-solo-offer-landscape-title: clamp(1.45rem, calc(var(--fluid-block) * 10.5), 2rem);

  /* legacy aliases: components consume semantic tokens while older selectors keep stable names */
  --fs-xxs: var(--type-fine);
  --fs-xs: var(--type-caption);
  --fs-sm: var(--type-small);
  --fs-md: var(--type-body);
  --fs-lg: var(--type-body-large);
  --fs-xl: var(--type-title-medium);
  --fs-2xl: var(--type-title-large);
  --fs-3xl: var(--type-display);

  --leading-display-tight: 0.9;
  --leading-display: 0.94;
  --leading-display-snug: 0.98;
  --leading-solid: 1;
  --leading-tight: 1.05;
  --leading-control: 1.15;
  --leading-snug: 1.2;
  --leading-caption: 1.25;
  --leading-comfort: 1.35;
  --leading-readable: 1.48;
  --leading-base: 1.5;
  --leading-relaxed: 1.62;

  --lh-tight: var(--leading-tight);
  --lh-snug: var(--leading-snug);
  --lh-base: var(--leading-base);
  --lh-relaxed: var(--leading-relaxed);

  --tracking-none: 0;
  --tracking-body: 0;
  --tracking-soft-tight: 0;
  --tracking-ui-tight: 0;
  --tracking-tight: 0;
  --tracking-display: 0;
  --tracking-wide-soft: 0.01em;
  --tracking-label: 0.1em;
  --tracking-label-wide: 0.12em;

  --tr-tight: var(--tracking-tight);
  --tr-display: var(--tracking-display);

  /* отступы — одна шкала на весь интерфейс */
  --space-1: clamp(0.25rem, calc(var(--fluid-min) * 0.5), 0.4rem);
  --space-2: clamp(0.4rem, calc(var(--fluid-min) * 1), 0.65rem);
  --space-3: clamp(0.65rem, calc(var(--fluid-min) * 1.5), 0.95rem);
  --space-4: clamp(1rem, calc(var(--fluid-min) * 2), 1.35rem);
  --space-5: clamp(1.4rem, calc(var(--fluid-min) * 3), 2rem);
  --space-6: clamp(2rem, calc(var(--fluid-min) * 4.5), 3rem);

  /* адаптивная система — один источник размеров для текста, действий и controls */
  --adaptive-fluid: var(--adaptive-fluid-min);
  --adaptive-base-gap: clamp(0.36rem, var(--adaptive-fluid), 0.86rem);
  --adaptive-action-gap: calc(var(--adaptive-base-gap) * 4);
  --adaptive-content-width: min(42ch, calc(100% - var(--panel-inline-gutter) * 2));
  --adaptive-heading-size: var(--type-panel-heading);
  --adaptive-copy-size: var(--type-panel-copy);
  --adaptive-detail-size: var(--type-panel-detail);
  --adaptive-surface-fluid: var(--adaptive-fluid);
  --adaptive-surface-base-gap: clamp(0.36rem, var(--adaptive-surface-fluid), 0.92rem);
  --adaptive-surface-content-width: min(44ch, var(--container-safe-inline));
  --adaptive-surface-content-width-wide: min(46ch, var(--container-safe-inline));
  --adaptive-surface-copy-size: var(--type-panel-copy-container);
  --adaptive-surface-detail-size: var(--type-panel-detail-container);
  --adaptive-surface-control-size: var(--type-control-container);
  --adaptive-surface-button-padding-block: clamp(
    0.36rem,
    calc(var(--adaptive-base-gap) * 0.85),
    0.64rem
  );
  --adaptive-surface-button-padding-inline: clamp(
    0.72rem,
    calc(var(--adaptive-base-gap) * 2.45),
    1.4rem
  );
  --adaptive-surface-button-max-block-size: 2.75rem;
  --adaptive-surface-control-max-size: 2.9rem;
  --adaptive-compact-base-gap: clamp(0.32rem, var(--adaptive-fluid), 0.58rem);
  --adaptive-compact-copy-size: var(--type-panel-copy-phone);
  --adaptive-compact-detail-size: var(--type-panel-detail-phone);
  --adaptive-compact-control-size: var(--type-control-phone);
  --adaptive-compact-button-padding-block: clamp(
    0.32rem,
    calc(var(--adaptive-base-gap) * 0.85),
    0.48rem
  );
  --adaptive-compact-button-padding-inline: clamp(
    0.62rem,
    calc(var(--adaptive-base-gap) * 2.35),
    0.92rem
  );
  --adaptive-compact-button-min-block-size: 1.78rem;
  --adaptive-compact-button-max-block-size: 2.24rem;
  --adaptive-compact-control-max-size: 2.34rem;
  --adaptive-compact-icon-min-size: 0.68rem;
  --adaptive-compact-icon-max-size: 0.92rem;
  --adaptive-phone-fluid: min(calc(var(--fluid-inline) * 1.12), calc(var(--fluid-block) * 0.95));
  --adaptive-phone-base-gap: clamp(0.32rem, var(--adaptive-fluid), 0.54rem);
  --adaptive-phone-button-padding-block: clamp(
    0.32rem,
    calc(var(--adaptive-base-gap) * 0.85),
    0.46rem
  );
  --adaptive-phone-button-padding-inline: clamp(
    0.62rem,
    calc(var(--adaptive-base-gap) * 2.35),
    0.84rem
  );
  --adaptive-phone-button-max-block-size: 2.18rem;
  --adaptive-phone-control-max-size: 2.3rem;
  --adaptive-phone-icon-max-size: 0.9rem;
  --adaptive-landscape-base-gap: clamp(0.24rem, var(--adaptive-fluid), 0.42rem);
  --adaptive-landscape-copy-size: var(--type-panel-copy-landscape);
  --adaptive-landscape-detail-size: var(--type-panel-detail-landscape);
  --adaptive-landscape-control-size: var(--type-control-landscape);
  --adaptive-landscape-button-padding-block: clamp(
    0.3rem,
    calc(var(--adaptive-base-gap) * 0.85),
    0.4rem
  );
  --adaptive-landscape-button-padding-inline: clamp(
    0.5rem,
    calc(var(--adaptive-base-gap) * 2.45),
    0.8rem
  );
  --adaptive-landscape-button-min-block-size: 1.55rem;
  --adaptive-landscape-button-max-block-size: 2rem;
  --adaptive-landscape-control-max-size: 2rem;
  --adaptive-narrow-fluid: min(calc(var(--fluid-inline) * 1.18), calc(var(--fluid-block) * 1.05));
  --adaptive-short-base-gap: var(--adaptive-landscape-base-gap);
  --adaptive-short-copy-size: var(--adaptive-landscape-copy-size);
  --adaptive-short-detail-size: var(--adaptive-landscape-detail-size);
  --adaptive-short-control-size: var(--adaptive-landscape-control-size);
  --adaptive-short-button-padding-block: var(--adaptive-landscape-button-padding-block);
  --adaptive-short-button-padding-inline: var(--adaptive-landscape-button-padding-inline);
  --adaptive-short-button-min-block-size: var(--adaptive-landscape-button-min-block-size);
  --adaptive-short-button-max-block-size: var(--adaptive-landscape-button-max-block-size);
  --adaptive-short-control-max-size: var(--adaptive-landscape-control-max-size);
  --adaptive-short-icon-max-size: var(--adaptive-phone-icon-max-size);
  --adaptive-button-font-size: var(--type-control);
  --adaptive-button-min-block-size: 1.9rem;
  --adaptive-button-max-block-size: 2.7rem;
  --adaptive-button-font-multiplier: 1.12;
  --adaptive-button-padding-block: clamp(0.36rem, calc(var(--adaptive-base-gap) * 0.85), 0.62rem);
  --adaptive-button-padding-inline: clamp(0.72rem, calc(var(--adaptive-base-gap) * 2.45), 1.35rem);
  --adaptive-button-min-height: clamp(
    var(--adaptive-button-min-block-size),
    calc(
      var(--adaptive-button-font-size) * var(--adaptive-button-font-multiplier) +
        var(--adaptive-button-padding-block) * 2
    ),
    var(--adaptive-button-max-block-size)
  );
  --adaptive-button-radius: calc(var(--adaptive-button-min-height) / 2);
  --adaptive-control-min-size: var(--interactive-min-size);
  --adaptive-control-max-size: 2.85rem;
  --adaptive-control-size: clamp(
    var(--adaptive-control-min-size),
    calc(var(--adaptive-button-min-height) + var(--adaptive-base-gap) * 1.35),
    var(--adaptive-control-max-size)
  );
  --adaptive-icon-min-size: 0.72rem;
  --adaptive-icon-max-size: 1.1rem;
  --adaptive-icon-size: clamp(
    var(--adaptive-icon-min-size),
    calc(var(--adaptive-button-font-size) * 1.05),
    var(--adaptive-icon-max-size)
  );
  --chip-min-height: max(
    var(--button-min-height),
    clamp(1.9rem, calc(var(--fluid-min) * 3.8), 2.35rem)
  );
  --chip-min-height-compact: max(
    var(--button-min-height),
    clamp(1.72rem, calc(var(--fluid-block) * 4.7), 2rem)
  );
  --chip-padding-block: var(--layout-chip-padding-block-sm);
  --chip-padding-inline: var(--layout-chip-padding-inline-sm);
  --chip-padding-block-compact: var(--layout-chip-padding-block-compact);
  --chip-padding-inline-compact: var(--layout-chip-padding-inline-compact);
  --chip-padding-inline-dense: var(--layout-chip-padding-inline-dense);
  --chip-font-size: var(--type-fine);
  --chip-icon-size: var(--control-icon-size-sm);
  --goal-chip-min-height-base: max(
    var(--button-min-height),
    clamp(2rem, calc(var(--fluid-min) * 4.05), 2.58rem)
  );
  --goal-chip-min-height-compact: max(
    var(--button-min-height),
    clamp(1.95rem, calc(var(--fluid-block) * 4.35), 2.28rem)
  );
  --goal-chip-padding-block-base: var(--layout-chip-padding-block);
  --goal-chip-padding-inline-base: var(--layout-chip-padding-inline);
  --goal-chip-padding-block-compact: var(--layout-chip-padding-block-compact);
  --goal-chip-padding-inline-compact: clamp(0.5rem, calc(var(--fluid-inline) * 1.9), 0.68rem);
  --goal-chip-font-size-base: var(--type-fine);
  --goal-chip-mobile-scale: 1.3;
  --choice-card-min-height-base: max(
    var(--button-min-height),
    clamp(5.34rem, calc(var(--fluid-block) * 11.4), 7.02rem)
  );
  --choice-card-min-height-wide: max(
    var(--button-min-height),
    clamp(6.96rem, calc(var(--fluid-block) * 15.6), 8.88rem)
  );
  --icon-xs: clamp(0.68rem, calc(var(--adaptive-icon-size) * 0.78), 0.86rem);
  --icon-sm: clamp(0.9rem, calc(var(--adaptive-icon-size) * 1.02), 1.1rem);
  --icon-md: clamp(1.16rem, calc(var(--adaptive-icon-size) * 1.4), 1.54rem);
  --icon-lg: clamp(2.25rem, calc(var(--adaptive-icon-size) * 3.1), 2.75rem);
  --icon-watch-chat-size: clamp(1.2rem, calc(var(--fluid-min) * 2.4), 1.3rem);
  --control-icon-size: var(--adaptive-icon-size);
  --control-icon-size-sm: var(--icon-xs);
  --control-icon-size-md: var(--icon-sm);
  --control-gift-template-hit-size: max(var(--control-visual-size-lg), var(--button-min-height));
  --control-gift-template-dot-size: clamp(0.5rem, calc(var(--fluid-min) * 1.25), 0.68rem);
  --control-gift-template-arrow-inline: clamp(0.54rem, calc(var(--fluid-min) * 1.08), 0.68rem);
  --control-gift-template-arrow-block: clamp(0.45rem, calc(var(--fluid-min) * 0.92), 0.56rem);
  --readiness-action-inline: clamp(4.5rem, calc(var(--fluid-inline) * 12), 6rem);
  --readiness-action-padding-block: clamp(0.4rem, calc(var(--fluid-min) * 0.9), 0.45rem);
  --interactive-min-size-fine: 2.25rem;
  --interactive-min-size-coarse: 2.75rem;
  --touch-target-min-size: var(--interactive-min-size-coarse);
  --interactive-target-size: var(--interactive-min-size);
  --interactive-target-size-compact: max(
    var(--button-compact-min-height),
    var(--interactive-min-size)
  );
  --interactive-icon-hit-size: max(var(--control-sm), var(--interactive-target-size));
  --interactive-icon-hit-size-compact: max(
    var(--button-compact-min-height),
    var(--interactive-target-size)
  );
  --interactive-inline-hit-outset-block: max(
    var(--space-2),
    calc((var(--interactive-target-size) - 1em * var(--leading-caption)) / 2)
  );
  --interactive-inline-hit-outset-inline: max(var(--space-1), calc(var(--space-2) * 0.8));
  --control-hit-size: var(--interactive-target-size);
  --control-visual-size-sm: clamp(1.16rem, calc(var(--adaptive-control-size) * 0.56), 1.35rem);
  --control-visual-size-md: clamp(1.35rem, calc(var(--adaptive-control-size) * 0.72), 1.72rem);
  --control-visual-size-lg: var(--adaptive-control-size);
  --field-min-height: max(var(--button-min-height), var(--touch-target-min-size));
  --field-padding-block: var(--space-3);
  --field-control-min-height: max(
    var(--button-min-height),
    clamp(var(--touch-target-min-size), calc(var(--fluid-min) * 5), 3.15rem)
  );
  --field-control-padding-block: clamp(0.62rem, calc(var(--fluid-min) * 1.45), 0.82rem);
  --field-registration-control-min-height: max(
    var(--button-min-height),
    clamp(3.25rem, calc(var(--fluid-min) * 6), 4rem)
  );
  --field-registration-control-padding-block: clamp(0.82rem, calc(var(--fluid-min) * 1.8), 1.08rem);
  --field-rules-input-min-height: max(
    var(--button-min-height),
    clamp(2.45rem, calc(var(--fluid-min) * 5), 3rem)
  );
  --field-rules-input-padding-block-start: clamp(0.42rem, calc(var(--fluid-min) * 0.96), 0.48rem);
  --field-rules-input-padding-block-end: clamp(0.38rem, calc(var(--fluid-min) * 0.84), 0.42rem);
  --form-field-font-weight: 320;
  --form-field-text-color: rgba(255, 255, 255, 0.7);
  --form-field-border-color: rgba(255, 255, 255, 0.7);
  --form-field-border-color-focus: rgba(255, 255, 255, 0.85);
  --form-field-border-width: var(--line-width-thin);
  --form-placeholder-color: var(--form-field-text-color);
  --form-placeholder-muted-color: rgba(255, 255, 255, 0.42);
  --form-action-border: rgba(255, 255, 255, 0.72);
  --form-action-border-hover: rgba(255, 255, 255, 1);
  --form-action-bg-hover: rgba(255, 255, 255, 0.94);
  --form-action-color: rgba(255, 255, 255, 0.92);
  --form-quiet-link-color: rgba(255, 255, 255, 0.5);
  --form-quiet-link-hover-color: rgba(255, 255, 255, 0.64);
  --segmented-inset: 0.25rem;
  --segmented-inset-compact: 0.125rem;

  --auth-top-link-padding-scale: 1.3225;
  --auth-top-link-padding-scale-compact: 0.991875;
  --auth-top-link-icon-scale: 0.6;
  --auth-top-link-icon-scale-compact: 0.45;
  --auth-top-link-gap-scale-compact: 0.75;

  --panel-notice-size: var(--adaptive-detail-size);
  --panel-notice-emphasis-size: var(--adaptive-detail-size);

  --goal-option-label-size: var(--adaptive-copy-size);
  --goal-custom-label-size: calc(var(--adaptive-detail-size) * 0.82);

  --form-legend-size: calc(var(--adaptive-detail-size) * 0.82);
  --form-label-size: var(--adaptive-detail-size);
  --form-field-size: var(--type-body);
  --form-hint-size: var(--adaptive-detail-size);
  --form-section-heading-size: var(--type-body-large);
  --form-card-copy-size: var(--adaptive-copy-size);
  --form-card-heading-size: var(--type-body);
  --form-card-detail-size: var(--adaptive-detail-size);
  --form-card-meta-size: var(--type-caption);
  --form-list-copy-size: var(--adaptive-copy-size);
  --form-status-heading-size: var(--type-body);
  --offer-access-summary-size: calc(var(--adaptive-detail-size) * 0.82);
  --login-form-text-size: var(--type-login-control);
  --login-contact-title-size: var(--type-login-small);
  --login-subtitle-size: var(--type-body);
  --payment-inline-copy-size: var(--adaptive-copy-size);
  --payment-waiting-label-size: var(--adaptive-copy-size);
  --payment-success-heading-size: var(--type-display);
  --payment-success-copy-size: var(--type-body);
  --registration-identity-title-size: var(--type-body);

  /* button engine — one sizing system, two visual modes: quiet and shimmer */
  --interactive-min-size: var(--interactive-min-size-fine);
  --button-font-size: var(--adaptive-button-font-size);
  --button-line-height: var(--leading-control);
  --button-min-height: max(var(--adaptive-button-min-height), var(--interactive-min-size));
  --button-width: max-content;
  --button-min-width: max-content;
  --button-max-width: 100%;
  --button-white-space: nowrap;
  --button-text-wrap: nowrap;
  --button-overflow-wrap: normal;
  --display-word-break: normal;
  --display-overflow-wrap: normal;
  --display-hyphens: none;
  --button-padding-block: var(--adaptive-button-padding-block);
  --button-padding-inline: var(--adaptive-button-padding-inline);
  --button-gap: var(--layout-control-gap);
  --button-group-gap: var(--layout-base-gap);
  --button-radius: var(--adaptive-button-radius);
  --button-icon-size: var(--adaptive-icon-size);
  --button-border: var(--line-width-thin) solid rgba(255, 255, 255, 0.22);
  --button-border-hover: var(--line-width-thin) solid rgba(255, 255, 255, 0.34);
  --button-bg: transparent;
  --button-bg-hover: rgba(255, 255, 255, 0.08);
  --button-bg-active: rgba(255, 255, 255, 0.13);
  --button-color: rgba(255, 255, 255, 0.72);
  --button-color-hover: var(--text);
  --button-compact-min-height: max(
    calc(var(--adaptive-button-min-height) * 0.82),
    var(--interactive-min-size)
  );
  --button-compact-padding-inline: calc(var(--adaptive-button-padding-inline) * 0.82);
  --button-compact-font-size: var(--type-panel-control-small);
  --rules-action-padding-block-base: clamp(0.44rem, calc(var(--fluid-min) * 0.9), 0.5rem);
  --rules-action-padding-inline-base: clamp(0.96rem, calc(var(--fluid-min) * 2.4), 1.2rem);
  --rules-action-min-height-base: max(
    var(--button-min-height),
    clamp(2.7rem, calc(var(--fluid-min) * 5), 3.05rem)
  );
  --rules-start-padding-block-base: clamp(0.3rem, calc(var(--fluid-min) * 0.72), 0.34rem);
  --rules-start-padding-inline-base: clamp(0.78rem, calc(var(--fluid-min) * 1.84), 0.92rem);
  --rules-start-min-height-base: max(
    var(--button-min-height),
    clamp(2.1rem, calc(var(--fluid-min) * 4.05), 2.38rem)
  );
  --button-transition:
    opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);

  --shell-gutter: var(--layout-shell-gutter-base);
  --stage-gutter: var(--layout-stage-gutter-base);

  --container-readable: min(34rem, var(--container-cqw));
  --container-readable-wide: min(44rem, var(--container-cqw));
  --container-panel: min(48rem, var(--container-cqw));
  --container-stage: min(58rem, var(--container-safe-inline));
  --container-stage-wide: min(82rem, var(--container-safe-inline));
  --container-form: min(42rem, var(--container-cqw));
  --container-form-narrow: min(30rem, var(--container-cqw));
  --container-dialog: min(42rem, var(--container-query-space-safe-inline));
  --container-review-controls: min(30rem, var(--container-cqw));
  --container-review-video: min(58rem, var(--container-cqw));
  --container-dialog-list: min(48rem, var(--container-safe-inline));
  --container-feed-post: min(38rem, var(--container-space-safe-inline));
  --container-feed-post-compact: min(100%, var(--container-query-safe-inline));
  --container-feed-edit: min(28rem, var(--container-cqw));
  --container-choice-options: min(31rem, var(--container-cqi));
  --container-choice-options-wide: min(82rem, var(--container-cqi));
  --container-registration-rules: var(--accordion-inline);
  --container-readiness-panel: min(30rem, var(--container-safe-inline));
  --container-offer-scroll: min(34rem, var(--container-safe-inline));
  --container-stage-status: min(28rem, var(--container-stage-safe-inline));
  --container-notice: min(28rem, var(--container-space-safe-inline));
  --container-legal: min(31rem, var(--container-space-safe-inline));
  --container-stage-local: min(58rem, 100%);
  --container-form-local: min(42rem, 100%);
  --container-form-medium-local: min(36rem, 100%);
  --container-form-narrow-local: min(30rem, 100%);
  --container-result-local: min(27rem, 100%);
  --container-form-compact-local: min(24rem, 100%);
  --container-feedback-local: min(22rem, 100%);
  --container-nav-compact-local: min(20rem, 100%);
  --container-profile-fallback: min(32rem, 100%);
  --container-profile-settings: min(36rem, 100%);
  --container-profile-actions: min(31rem, 100%);
  --container-profile-actions-centered: min(27rem, 100%);
  --container-profile-tags-many: min(48rem, 100%);
  --container-profile-tags-phone: min(18rem, 100%);
  --container-profile-tags-split: min(25rem, 100%);
  --container-profile-tags-split-many: min(28rem, 100%);
  --container-profile-inline-form: min(20rem, 100%);
  --container-profile-loading-email: min(15rem, var(--container-cqi-action-wide));
  --container-profile-loading-access: min(11rem, var(--container-cqi-readable-compact));
  --container-profile-split-inset: clamp(3rem, calc(var(--fluid-inline) * 10), 10rem);
  --container-profile-split-safe-inline: calc(
    var(--container-cqw) - var(--container-profile-split-inset)
  );
  --container-profile-split: min(62rem, var(--container-profile-split-safe-inline));
  --container-profile-split-centered: min(36rem, var(--container-profile-split-safe-inline));
  --container-stage-browse: 60rem;
  --container-stage-copy: 44rem;
  --container-panel-summary: 42rem;
  --container-stage-row: min(42rem, 100%);
  --container-watch: min(36rem, var(--container-cqi-media-compact));
  --container-watch-video: min(58rem, 100%);
  --container-deadline-pill: min(15rem, var(--container-cqi-control));
  --container-deadline-pill-compact: min(100%, var(--container-cqi-compact));
  --container-messages-system: min(34rem, 92%);
  --container-messages-media: min(22rem, var(--container-cqi-media));
  --container-messages-media-single: min(23rem, var(--container-cqi-media));
  --container-messages-media-compact: min(19rem, var(--container-cqi-media-compact));
  --container-messages-media-single-compact: min(20rem, var(--container-cqi-media-compact));
  --container-messages-media-wide: min(24rem, var(--container-cqi-media-wide));
  --container-messages-media-single-wide: min(25rem, var(--container-cqi-media-wide));
  --container-messages-delete-panel: min(8rem, var(--container-cqi-popover));
  --container-messages-edit: min(24rem, var(--container-cqi-media));
  --messages-media-max-block-base: min(30rem, calc(var(--fluid-block) * 62));
  --messages-composer-textarea-max-block-base: clamp(7rem, calc(var(--fluid-block) * 22), 11rem);
  --measure-prose: min(38ch, 100%);
  --measure-summary: min(36ch, 100%);
  --measure-hint: min(30ch, 100%);
  --copy-width: min(34rem, 100%);
  --copy-wide: min(44rem, 100%);
  --centered-actions-min-block: min(22rem, var(--layout-block-centered-actions));
  --centered-actions-min-block-compact: min(18rem, var(--layout-block-centered-actions-compact));
  --system-notice-width: min(21rem, 100%);
  --system-notice-padding-block: clamp(0.6rem, calc(var(--fluid-min) * 1.25), 0.82rem);
  --system-notice-padding-inline: clamp(0.78rem, calc(var(--fluid-inline) * 2), 1.05rem);
  --system-notice-gap: clamp(0.2rem, calc(var(--fluid-min) * 0.65), 0.38rem);
  --status-error-slot-min-height: clamp(3.1rem, var(--layout-block-status-error-slot), 4.35rem);
  --status-error-slot-offset: clamp(0.45rem, var(--layout-block-status-error-offset), 0.7rem);
  --status-error-gap: clamp(0.14rem, calc(var(--fluid-min) * 0.36), 0.18rem);

  --anchor-offset: clamp(2rem, calc(var(--fluid-block) * 11), 4.5rem);

  --radius-xs: 0.48rem;
  --radius-sm: 0.65rem;
  --radius-md: 0.9rem;
  --radius-field: 1.05rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.4rem;
  --radius-offer-control: clamp(0.42rem, calc(var(--fluid-inline) * 1), 0.62rem);
  --radius-profile-schedule: clamp(1rem, calc(var(--fluid-min) * 2.2), 1.35rem);
  --radius-pill: 999px;
  --list-indent: clamp(1rem, calc(var(--fluid-inline) * 2.3), 1.15rem);

  /* hairlines — единая шкала непрозрачности линий */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.12);
  --line-3: rgba(255, 255, 255, 0.18);
  --line-4: rgba(255, 255, 255, 0.28);

  /* системные размеры круглых control-кнопок */
  --control-sm: max(
    var(--interactive-min-size),
    clamp(2.25rem, calc(var(--adaptive-control-size) * 0.92), 2.4rem)
  );
  --control-md: max(
    var(--interactive-min-size),
    clamp(2.4rem, calc(var(--adaptive-control-size) * 1.02), 2.6rem)
  );
  --control-lg: max(
    var(--interactive-min-size),
    clamp(2.55rem, calc(var(--adaptive-control-size) * 1.12), 2.75rem)
  );
  --back-control-size: clamp(
    1.8rem,
    min(calc(var(--fluid-inline) * 6), calc(var(--fluid-block) * 4.5)),
    2.35rem
  );
  --back-arrow-size: clamp(
    0.64rem,
    min(calc(var(--fluid-inline) * 2.5), calc(var(--fluid-block) * 1.9)),
    1rem
  );
  --back-control-opacity: 0.45;
  --back-control-hover-opacity: 0.75;
  --back-zone-height: clamp(4.5rem, var(--layout-block-back-zone), 8rem);
  --stage-row-gap: clamp(0.45rem, calc(var(--fluid-min) * 2), 1rem);
  --stage-control-size: max(
    var(--interactive-min-size),
    clamp(2.3rem, calc(var(--fluid-min) * 5), 3rem)
  );
  --stage-play-size: max(
    var(--interactive-min-size),
    clamp(4.4rem, calc(var(--fluid-min) * 11), 5.8rem)
  );
  --stage-rotator-min-height: clamp(5.5rem, calc(var(--fluid-min) * 16), 8rem);
  --stage-rotator-min-height-compact: clamp(3.2rem, calc(var(--fluid-block) * 8), 4rem);
  --spinner-page-size: clamp(3rem, calc(var(--fluid-min) * 8), 4.4rem);
  --spinner-block-min-height: clamp(5.5rem, calc(var(--fluid-min) * 16), 8rem);

  /* z-index — одна шкала, без литералов */
  --z-base: 0;
  --z-overlay: 1;
  --z-fixed: 3;
  --z-sticky: 4;
  --z-float: 12;
  --z-legal: 24;
  --z-modal: 40;
  --z-payment-provider-frame: 6000;

  --focus-backdrop-blur: 6px;
  --focus-backdrop-scrim: rgba(4, 10, 16, 0.44);
  --focus-backdrop-scrim-fallback: rgba(4, 10, 16, 0.58);
  --focus-backdrop-duration: 400ms;
  --focus-backdrop-ease: var(--ease);
  --focus-backdrop-blur-delay: 72ms;

  --split-panel-duration: 400ms;
  --split-panel-ease: var(--ease-out);
  --split-panel-travel: 100%;
  --split-panel-surface: var(--page);

  --backdrop-blur-sm: 10px;

  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;
  --dur-slow: 360ms;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--page);
  color: var(--text-soft);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
  font-stretch: normal;
  font-synthesis: none;
  font-feature-settings: "kern" 1;
  -webkit-tap-highlight-color: transparent;
}

body {
  min-height: var(--viewport-stable-height);
  min-height: var(--viewport-height);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  letter-spacing: var(--tracking-body);
}

#root {
  min-height: var(--viewport-height);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: var(--page);
}

@keyframes lazy-suspense-reveal-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.lazy-suspense-reveal {
  animation: lazy-suspense-reveal-in var(--dur) var(--ease-out) both;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .lazy-suspense-reveal {
    animation: none;
  }
}

body.page-home {
  height: var(--home-viewport-height);
  min-height: var(--home-viewport-height);
  overflow: hidden;
  overscroll-behavior: none;
}

body.page-home #root {
  height: var(--home-viewport-height);
  min-height: var(--home-viewport-height);
  overflow: hidden;
}

body.page-messages {
  height: var(--viewport-height);
  min-height: var(--viewport-height);
  overflow: hidden;
  overscroll-behavior: none;
}

body.page-messages #root {
  height: var(--viewport-height);
  min-height: var(--viewport-height);
  overflow: hidden;
}

@supports selector(html:has(body.page-home)) {
  html:has(body.page-home) {
    height: var(--home-viewport-height);
    min-height: var(--home-viewport-height);
    overflow: hidden;
    overscroll-behavior: none;
  }
}

@supports selector(html:has(body.page-messages)) {
  html:has(body.page-messages) {
    height: var(--viewport-height);
    min-height: var(--viewport-height);
    overflow: hidden;
    overscroll-behavior: none;
  }
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

code {
  font-family: var(--font-mono);
  font-size: var(--type-code-size, 0.92em);
  font-variant-numeric: tabular-nums;
}

input,
textarea,
button,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--text);
  outline-offset: var(--focus-ring-offset);
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}
@supports (height: 100svh) {
  :root {
    --viewport-small-height: 100svh;
    --viewport-fill-height: 100svh;
    --viewport-stable-height: 100svh;
  }
}

@supports (height: 100lvh) {
  :root {
    --viewport-large-height: 100lvh;
    --viewport-height: 100lvh;
  }
}

@supports (height: 100dvh) {
  :root {
    --viewport-dynamic-height: 100dvh;
    --viewport-fill-height: 100dvh;
  }
}

@supports (width: 1cqw) {
  :root {
    --fluid-container-inline: 1cqw;
    --container-cqw: 100cqw;
  }
}

@supports (width: 1cqi) {
  :root {
    --fluid-inline: 1cqi;
    --fluid-container-inline: 1cqi;
    --container-cqi: 100cqi;
    --container-cqi-compact: 32cqi;
    --container-cqi-control: 38cqi;
    --container-cqi-popover: 52cqi;
    --container-cqi-media-wide: 54cqi;
    --container-cqi-readable-compact: 68cqi;
    --container-cqi-readable-narrow: 68.8cqi;
    --container-cqi-media: 72cqi;
    --container-cqi-action-wide: 78cqi;
    --container-cqi-media-compact: 82cqi;
    --container-cqi-visual-small: 24cqi;
  }
}

@supports (height: 1cqb) {
  :root {
    --fluid-container-block: 1cqb;
    --container-cqb: 100cqb;
    --layout-block-stage-min: 50cqb;
    --layout-block-split-stage-compact: 44cqb;
    --layout-block-watch-panel-compact: 56cqb;
    --layout-block-stage-tablet: 52cqb;
    --layout-block-payment-overlay-offset: 62cqb;
    --layout-block-profile-split-divider: 26cqb;
    --layout-block-choice-panel-gap-landscape: 2.6cqb;
    --layout-block-choice-card-padding-landscape: 2.28cqb;
    --layout-block-choice-card-min-landscape: 18cqb;
    --layout-block-stage-rotator-compact: 12cqb;
    --layout-block-centered-actions: 48cqb;
    --layout-block-centered-actions-compact: 46cqb;
    --layout-block-status-error-slot: 7.2cqb;
    --layout-block-status-error-offset: 1.1cqb;
    --layout-block-back-zone: 15cqb;
    --layout-block-profile-footer-compact: 7cqb;
    --layout-block-plus-sheet-copy-landscape: 52cqb;
    --layout-block-plus-sheet-gap-compact: 1.9cqb;
  }
}

@supports (width: 1cqmin) and (width: 1cqmax) {
  :root {
    --fluid-min: 1cqmin;
    --fluid-max: 1cqmax;
    --fluid-container-min: 1cqmin;
    --fluid-container-max: 1cqmax;
    --container-cqmin: 100cqmin;
    --container-cqmax: 100cqmax;
  }
}

@supports (height: 1cqh) {
  .home-stage,
  .split-stage,
  .lesson-stage,
  .simple-stage,
  .panel,
  .form-panel,
  .watch-panel,
  .plus-sheet,
  .profile-panel,
  .messages-shell,
  .feed-shell,
  .feed-comments-dialog,
  .choice-panel,
  .legacy-course-archive,
  .registration-section,
  .legal-modal,
  .payment-card {
    --fluid-block: 1cqh;
    --fluid-container-block: 1cqh;
  }
}

@media (hover: none), (pointer: coarse) {
  :root {
    --interactive-min-size: var(--interactive-min-size-coarse);
  }
}

/* ==========================================================================
   Shells
   ========================================================================== */

.home-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: var(--home-viewport-height);
  min-height: var(--home-viewport-height);
  max-height: var(--home-viewport-height);
  overflow-x: hidden;
  overflow-x: clip;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  scrollbar-gutter: stable both-edges;
  background: var(--surface-canvas);
}

.home-shell--telegram-prompt {
  overflow: hidden;
  scroll-snap-type: none;
}

.home-shell--telegram-prompt .home-top-links,
.home-shell--telegram-prompt .home-overlay {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.auth-top-links {
  --auth-top-link-edge-offset: var(--space-2);
  --auth-top-link-gap: var(--layout-control-gap);
  --auth-top-link-padding-block: calc(var(--space-1) * var(--auth-top-link-padding-scale));
  --auth-top-link-padding-inline: calc(var(--space-2) * var(--auth-top-link-padding-scale));
  --auth-top-link-icon-size: calc(var(--icon-lg) * var(--auth-top-link-icon-scale));

  position: fixed;
  top: max(var(--safe-area-top), var(--auth-top-link-edge-offset));
  right: max(var(--safe-area-right), var(--auth-top-link-edge-offset));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--auth-top-link-gap);
  padding: var(--auth-top-link-padding-block) var(--auth-top-link-padding-inline);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: var(--divider-width) solid var(--line-2);
  backdrop-filter: blur(var(--backdrop-blur-sm));
  -webkit-backdrop-filter: blur(var(--backdrop-blur-sm));
  z-index: var(--z-float);
}

@media (width <= 30rem) {
  .auth-top-links {
    --auth-top-link-gap: calc(var(--layout-control-gap) * var(--auth-top-link-gap-scale-compact));
    --auth-top-link-padding-block: calc(
      var(--space-1) * var(--auth-top-link-padding-scale-compact)
    );
    --auth-top-link-padding-inline: calc(
      var(--space-2) * var(--auth-top-link-padding-scale-compact)
    );
    --auth-top-link-icon-size: calc(var(--icon-lg) * var(--auth-top-link-icon-scale-compact));
  }
}

.home-stage,
.split-stage,
.lesson-stage,
.simple-stage {
  position: relative;
  container-type: inline-size;
  container-name: adaptive-surface;
  overflow: hidden;
  background: var(--surface-canvas);
  isolation: isolate;
}

.home-stage {
  height: var(--home-viewport-height);
  min-height: var(--home-viewport-height);
  max-height: var(--home-viewport-height);
  inline-size: 100%;
  max-inline-size: 100%;
  scroll-snap-align: start;
}

.home-stage[aria-hidden="true"] {
  content-visibility: auto;
  contain-intrinsic-size: auto var(--home-viewport-height);
}

.home-stage::before,
.split-stage::before {
  content: none;
  background: none;
  background-color: rgba(0, 0, 0, 0);
  background-image: none;
}

.split-stage,
.lesson-stage {
  min-height: var(--layout-block-stage-min);
}

.simple-stage {
  padding: var(--layout-surface-padding-block) var(--shell-gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  text-align: center;
}

.simple-stage > * {
  width: 100%;
  max-width: var(--copy-width);
}

.simple-stage h1 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

.simple-stage p {
  font-size: var(--fs-md);
  color: var(--text-soft);
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

/* ==========================================================================
   Legal notice
   ========================================================================== */

.top-route-notice {
  position: fixed;
  top: calc(var(--safe-area-top) + var(--space-2));
  left: 50%;
  z-index: var(--z-modal);
  max-width: var(--container-notice);
  padding: var(--system-notice-padding-block) var(--system-notice-padding-inline);
  color: var(--text);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--leading-comfort);
  letter-spacing: var(--tracking-none);
  text-align: center;
  background: rgba(10, 10, 10, 0.88);
  border: var(--divider-width) solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  transform: translateX(-50%);
  pointer-events: none;
}

.legal-notice {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-area-bottom) + var(--space-1));
  z-index: var(--z-legal);
  display: grid;
  justify-items: center;
  gap: var(--system-notice-gap);
  max-width: var(--container-legal);
  color: rgba(255, 255, 255, 0.46);
  font-size: var(--type-legal);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-none);
  text-align: center;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  transform: translateX(-50%);
  pointer-events: none;
}

.legal-notice-signature {
  margin: 0;
}

.legal-notice--offer-only {
  bottom: calc(var(--safe-area-bottom) + var(--space-1));
}

.legal-notice-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.36em;
}

.legal-notice-link {
  position: relative;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.1);
  text-decoration-thickness: var(--text-decoration-line-width);
  text-underline-offset: 0.4em;
  pointer-events: auto;
}

.legal-notice-link::before {
  content: "";
  position: absolute;
  inset: calc(var(--interactive-inline-hit-outset-block) * -1)
    calc(var(--interactive-inline-hit-outset-inline) * -1);
  border-radius: var(--radius-xs);
}

.legal-notice-link:hover,
.legal-notice-link:focus-visible {
  color: rgba(255, 255, 255, 0.86);
  text-decoration-color: rgba(255, 255, 255, 0.1);
}

.home-stage .legal-notice {
  position: absolute;
}

.home-shell--telegram-prompt .legal-notice {
  display: none;
}

.page-join-group:not(:has(.participant-shell--registration)) .legal-notice {
  display: none;
}

#root:has(.participant-shell--offer) .legal-notice {
  display: none;
}

#root:has(.participant-shell--goal-composition) .legal-notice {
  display: none;
}

#root:has(.registration-rules-section) .legal-notice {
  display: none;
}

.legal-modal-backdrop {
  position: fixed;
  inset: var(--overlay-full-inset);
  z-index: var(--z-modal);
  display: block;
  padding: 0;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}

.legal-modal {
  --legal-modal-grid: min(50rem, var(--container-safe-inline));
  --legal-modal-block: var(--overlay-full-block);
  --legal-modal-radius: var(--overlay-fullscreen-radius);
  --legal-modal-header-padding-block-start: var(--overlay-header-padding-block-start);
  --legal-modal-content-padding-block-end: var(--overlay-content-padding-block-end);
  --legal-modal-loading-padding: var(--layout-modal-loading-padding);

  display: grid;
  container-type: inline-size;
  container-name: adaptive-surface;
  grid-template-rows: auto minmax(0, 1fr);
  width: var(--overlay-full-inline);
  height: var(--legal-modal-block);
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: var(--legal-modal-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 13rem), rgba(7, 6, 5, 0.96);
  color: var(--text-soft);
  box-shadow: none;
}

.legal-modal--loading {
  grid-template-rows: 1fr;
  place-items: center;
  padding: var(--legal-modal-loading-padding);
  text-align: center;
}

.legal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: var(--legal-modal-grid);
  margin: 0 auto;
  padding: var(--legal-modal-header-padding-block-start) 0 var(--space-4);
  border-bottom: var(--overlay-border-width) solid var(--hairline);
}

.legal-modal-header h2 {
  margin: 0;
  color: var(--text);
  font-size: var(--type-title-medium);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--tracking-none);
  text-wrap: pretty;
}

.legal-modal-close {
  flex: 0 0 auto;
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: var(--divider-width) solid var(--hairline);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  font: inherit;
  font-size: var(--type-caption);
  cursor: pointer;
}

.legal-modal-close:hover,
.legal-modal-close:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
}

.legal-modal-content {
  min-height: 0;
  width: var(--legal-modal-grid);
  max-width: var(--legal-modal-grid);
  margin: 0 auto;
  overflow: auto;
  padding: var(--space-3) 0 var(--legal-modal-content-padding-block-end);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  text-align: left;
  scrollbar-width: none;
}

.legal-modal-content > .lesson-accordion {
  width: min(var(--accordion-inline), 100%);
  max-width: var(--accordion-inline);
  margin-inline: auto;
}

.legal-modal-content::-webkit-scrollbar {
  width: var(--overlay-scrollbar-size);
  height: var(--overlay-scrollbar-size);
}

.legal-modal-inline-link {
  position: relative;
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-decoration-thickness: var(--text-decoration-line-width);
  text-underline-offset: 0.22em;
}

.legal-modal-inline-link::before {
  content: "";
  position: absolute;
  inset: calc(var(--interactive-inline-hit-outset-block) * -1)
    calc(var(--interactive-inline-hit-outset-inline) * -1);
  border-radius: var(--radius-xs);
}

.legal-modal-inline-link:hover,
.legal-modal-inline-link:focus-visible {
  color: var(--text);
  text-decoration-color: var(--text-soft);
}

@media (min-width: 48rem) {
  .legal-notice {
    font-size: var(--type-legal);
  }
}

/* ==========================================================================
   Stage media
   ========================================================================== */

.stage-media-shell {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
  background: #040404;
}

.stage-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: none;
}

.stage-media--outgoing {
  opacity: 1;
  z-index: -2;
}

.stage-media-shell[data-ready="true"] .stage-media[data-ready="true"],
.stage-media-shell[data-ready="true"] .stage-media--outgoing {
  opacity: 1;
}

.stage-media-prewarm-shell {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -4;
  width: var(--line-width-hair);
  height: var(--line-width-hair);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.stage-video-parking-root {
  position: fixed;
  inset: 0;
  z-index: -1;
  width: var(--line-width-hair);
  height: var(--line-width-hair);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.stage-video-parking-root[data-route-handoff="true"] {
  z-index: -5;
  width: 100%;
  height: 100%;
  opacity: 1;
}

.stage-video-parking-root[data-route-handoff="true"] .stage-media {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  opacity: 1;
}

.stage-video-play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z-float);
  display: none;
  min-width: var(--stage-play-size);
  min-height: var(--stage-play-size);
  padding: 0 var(--space-4);
  transform: translate(-50%, -50%);
  border: var(--divider-width) solid rgba(255, 255, 255, 0.34);
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.62);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-none);
  pointer-events: auto;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.stage-video-play-icon {
  display: block;
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.stage-media-shell[data-video-play-blocked="true"] + .stage-video-play-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.home-stage .stage-media-shell[data-video-play-blocked="true"] + .stage-video-play-button {
  top: auto;
  bottom: 12%;
  width: calc(100% - var(--stage-inline-gutter) * 2);
  min-width: 0;
  min-height: var(--control-md);
  padding: 0;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-stage
  .stage-media-shell[data-video-play-blocked="true"]
  ~ .home-overlay
  .stage-browse-bottom {
  display: none;
}

/* ==========================================================================
   Overlay and anchors on stage
   ========================================================================== */

.home-overlay,
.stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding-inline: var(--stage-safe-gutter-start) var(--stage-safe-gutter-end);
  --stage-phrase-size: var(--type-stage-phrase);
}

.home-overlay {
  min-height: 100%;
}

/* ==========================================================================
   Focus backdrop — unified blur + dim for stage and modal overlays
   ========================================================================== */

.focus-backdrop {
  isolation: isolate;
}

.focus-backdrop__scrim,
.focus-backdrop__blur {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition-property: opacity;
  transition-duration: var(--focus-backdrop-duration);
  transition-timing-function: var(--focus-backdrop-ease);
  transition-delay: 0ms;
}

.focus-backdrop__scrim {
  background: var(--focus-backdrop-scrim);
}

.focus-backdrop__blur {
  background: transparent;
  -webkit-backdrop-filter: blur(var(--focus-backdrop-blur));
  backdrop-filter: blur(var(--focus-backdrop-blur));
}

.focus-backdrop[data-focus-backdrop-phase="showing"] .focus-backdrop__scrim,
.focus-backdrop[data-focus-backdrop-phase="shown"] .focus-backdrop__scrim {
  opacity: 1;
}

.focus-backdrop[data-focus-backdrop-phase="showing"] .focus-backdrop__blur,
.focus-backdrop[data-focus-backdrop-phase="shown"] .focus-backdrop__blur {
  opacity: 1;
  transition-delay: var(--focus-backdrop-blur-delay);
}

.focus-backdrop[data-focus-backdrop-phase="hidden"] .focus-backdrop__scrim,
.focus-backdrop[data-focus-backdrop-phase="hidden"] .focus-backdrop__blur {
  opacity: 0;
  transition-delay: 0ms;
}

.focus-backdrop[data-focus-backdrop-phase="hidden"] .focus-backdrop__blur {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.focus-backdrop__content {
  position: relative;
  z-index: 1;
}

.focus-backdrop--join-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.stage-overlay--group-offer .group-offer-center {
  z-index: 1;
}

.stage-profile-link,
.brand-link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-body);
  transition: opacity var(--dur) var(--ease);
}

.stage-profile-link:hover,
.brand-link:hover {
  opacity: 0.7;
}

.stage-profile-link {
  position: absolute;
  top: max(var(--safe-area-top), clamp(0.5rem, calc(var(--fluid-min) * 2), 1.25rem));
  right: max(var(--safe-area-right), clamp(0.25rem, calc(var(--fluid-min) * 2), 1rem));
}

.stage-profile-link--icon {
  width: var(--control-lg);
  height: var(--control-lg);
  padding: 0;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: var(--divider-width) solid var(--line-2);
  backdrop-filter: blur(var(--backdrop-blur-sm));
  -webkit-backdrop-filter: blur(var(--backdrop-blur-sm));
}

.auth-top-links .stage-profile-link--icon {
  position: static;
  width: var(--auth-top-link-icon-size);
  height: var(--auth-top-link-icon-size);
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.auth-top-links .stage-profile-icon {
  flex: 0 0 auto;
  width: var(--auth-top-link-icon-size);
  height: var(--auth-top-link-icon-size);
  object-fit: contain;
}

.auth-top-links .auth-chat-link .stage-profile-icon {
  width: var(--auth-top-link-icon-size);
  height: var(--auth-top-link-icon-size);
}

.auth-top-links .auth-profile-link {
  margin-left: 0;
}

.home-top-links .auth-profile-link .stage-profile-icon {
  width: calc(var(--auth-top-link-icon-size) * 1.1);
  height: calc(var(--auth-top-link-icon-size) * 1.1);
}

.stage-profile-icon {
  width: var(--icon-sm);
  height: var(--icon-sm);
  display: block;
}

.stage-number,
.stage-top-anchor,
.stage-browse-top,
.stage-bottom-anchor,
.stage-browse-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - var(--stage-inline-gutter) * 2);
  text-align: center;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-body);
  font-variant-numeric: tabular-nums;
}

.stage-number,
.stage-top-anchor {
  top: var(--anchor-offset);
}
.stage-browse-top {
  top: 12%;
  font-weight: 900;
}
.stage-bottom-anchor {
  bottom: var(--anchor-offset);
}
.stage-browse-bottom {
  bottom: 12%;
  color: rgba(255, 255, 255, 0.88);
}

.stage-browse-bottom {
  width: auto;
  min-height: max(var(--button-min-height), var(--control-md));
  padding: var(--button-padding-block) var(--button-padding-inline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
  border: var(--divider-width) solid rgba(255, 255, 255, 0.16);
  background: transparent;
}

.stage-number,
.stage-bottom-anchor {
  font-size: var(--stage-edge-caption-size, var(--type-stage-anchor));
  font-weight: 400;
}

.stage-number {
  top: 12%;
}

.participant-shell--window .stage-number {
  font-weight: 900;
  -webkit-text-stroke: 0.045em currentColor;
  paint-order: stroke fill;
}

.participant-shell--window .stage-bottom-anchor {
  font-weight: 520;
}

.stage-bottom-anchor {
  bottom: 12%;
}

.stage-browse-bottom--locked {
  width: auto;
  min-width: min(17rem, calc(100% - var(--stage-inline-gutter) * 2));
  min-height: max(var(--button-min-height), var(--control-md));
  padding: var(--button-padding-block) var(--button-padding-inline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  border: var(--divider-width) solid var(--line-3);
  background: rgba(0, 0, 0, 0.28);
}

.stage-browse-center {
  --stage-fit-min-font-size: 0.625rem;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--stage-inline-gutter) * 2);
  max-width: var(--container-stage-browse);
  text-align: center;
  display: grid;
  gap: var(--space-3);
}

.stage-rotator,
.stage-static-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - var(--stage-inline-gutter) * 2);
  text-align: center;
}

.stage-title,
.stage-static-title {
  --stage-fit-base-font-size: var(--fs-3xl);

  font-size: var(--stage-fit-font-size, var(--stage-fit-base-font-size));
  line-height: var(--leading-display-tight);
  letter-spacing: var(--tr-display);
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

.home-overlay .stage-title,
.home-overlay .stage-subtitle {
  max-width: 100%;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  text-wrap: nowrap;
}

.stage-title--compact {
  font-size: var(--type-title-medium);
  line-height: var(--leading-tight);
}

.stage-stage-row .stage-static-title {
  max-width: none;
  min-width: 0;
  margin-inline: auto;
}

.stage-subtitle {
  --stage-fit-base-font-size: var(--fs-md);

  max-width: var(--container-stage-copy);
  margin-inline: auto;
  font-size: var(--stage-fit-font-size, var(--stage-fit-base-font-size));
  line-height: var(--lh-base);
  color: rgba(255, 255, 255, 0.88);
  text-wrap: balance;
}

.stage-rotator {
  min-height: var(--stage-rotator-min-height);
  display: grid;
  place-items: center;
}

.stage-phrase,
.stage-phrase-title {
  font-size: var(--stage-phrase-size);
  line-height: var(--leading-control);
  letter-spacing: var(--tracking-display);
  font-weight: 700;
  color: var(--text);
  text-align: center;
  text-wrap: balance;
}

.stage-phrase {
  opacity: 0;
  transition: opacity 400ms var(--ease);
}

.stage-phrase[data-visible="true"] {
  opacity: 1;
}

.participant-shell--window .stage-phrase {
  font-size: var(--type-stage-phrase-emphasis);
  font-weight: 1000;
}

.stage-stage-row {
  width: var(--container-stage-row);
  margin-inline: auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--stage-row-gap);
}

.stage-nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--stage-control-size);
  height: var(--stage-control-size);
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: var(--fs-md);
  transition:
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.stage-nav-button:hover {
  color: var(--text);
}
.stage-nav-button:active {
  transform: scale(0.96);
}
.stage-nav-button[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* ==========================================================================
   Participant / stack shells
   ========================================================================== */

.participant-shell,
.stack-shell {
  min-height: var(--viewport-height);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  display: grid;
  background: transparent;
}

.participant-shell--plus {
  --plus-route-height: var(--viewport-height);
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: var(--plus-route-height);
  min-height: var(--plus-route-height);
  max-height: var(--plus-route-height);
  display: block;
  overflow: hidden;
  overscroll-behavior: none;
  isolation: isolate;
  background: var(--surface-canvas);
}

.participant-shell--plus .split-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: var(--plus-route-height);
  min-height: var(--plus-route-height);
  max-height: var(--plus-route-height);
}

.participant-shell--plus.participant-shell--window-details .stage-media-shell::after {
  content: none;
}

.panel,
.form-panel,
.watch-panel {
  background: transparent;
  container-type: inline-size;
  container-name: adaptive-surface;
  display: flex;
  flex-direction: column;
  min-height: var(--layout-block-stage-min);
  padding-block: var(--space-5);
  padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
}

.panel-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding-block: var(--space-3);
}

.panel-copy {
  flex: 1;
  width: 100%;
  max-width: var(--copy-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--adaptive-base-gap) * 1.75);
  text-align: center;
}

.panel-scroll .panel-copy {
  flex: 0 0 auto;
}

.panel-number {
  font-size: var(--adaptive-heading-size);
  font-weight: 600;
  color: var(--text);
  letter-spacing: var(--tracking-none);
  line-height: var(--leading-snug);
  text-wrap: balance;
}

.panel-summary {
  max-width: var(--container-panel-summary);
  font-size: var(--adaptive-copy-size);
  line-height: calc(1em + var(--adaptive-base-gap));
  font-weight: 400;
  color: var(--text-strong);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.panel-summary-stack {
  display: grid;
  justify-items: center;
  gap: var(--adaptive-base-gap);
}

.panel-more-link {
  --panel-more-padding-inline: max(calc(var(--adaptive-base-gap) * 0.25), 0.8em);
  --panel-more-underline-offset: -0.18em;
  --panel-more-underline-color-edge: rgba(91, 138, 255, 0);
  --panel-more-underline-color-soft: rgba(91, 138, 255, 0.62);
  --panel-more-underline-color-strong: rgba(91, 138, 255, 0.72);
  --panel-more-hit-target-inset: calc(var(--interactive-inline-hit-outset-block) * -1)
    calc(var(--interactive-inline-hit-outset-inline) * -1);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--interactive-min-size);
  padding: 0 var(--panel-more-padding-inline);
  font-size: var(--adaptive-detail-size);
  line-height: var(--leading-control);
  font-weight: 550;
  color: var(--text-soft);
  opacity: 1;
  text-decoration: none;
  letter-spacing: var(--tracking-none);
}

.panel-more-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--panel-more-underline-offset);
  height: var(--decoration-line-width);
  background: linear-gradient(
    90deg,
    var(--panel-more-underline-color-edge),
    var(--panel-more-underline-color-soft) 18%,
    var(--panel-more-underline-color-strong) 50%,
    var(--panel-more-underline-color-soft) 82%,
    var(--panel-more-underline-color-edge)
  );
  opacity: 0.86;
  transform: scaleX(0.84);
  transform-origin: center;
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out);
}

.panel-more-hit-target {
  position: absolute;
  inset: var(--panel-more-hit-target-inset);
  z-index: 1;
}

.panel-more-link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.participant-shell--window-details .panel-more-link {
  --panel-more-underline-color-edge: rgba(255, 255, 255, 0);
  --panel-more-underline-color-soft: rgba(255, 255, 255, 0.95);
  --panel-more-underline-color-strong: rgba(255, 255, 255, 1);

  color: rgba(255, 255, 255, 1);
}

.participant-shell--window-details .panel-more-link::after {
  opacity: 1;
  background: linear-gradient(
    90deg,
    var(--panel-more-underline-color-edge),
    var(--panel-more-underline-color-soft) 18%,
    var(--panel-more-underline-color-strong) 50%,
    var(--panel-more-underline-color-soft) 82%,
    var(--panel-more-underline-color-edge)
  );
}

.eyebrow {
  font-size: var(--fs-xxs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 500;
}

.meta-line,
.deadline-state,
.message-card time {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  letter-spacing: var(--tracking-none);
}

.panel-footnote {
  font-size: var(--adaptive-detail-size);
  line-height: var(--leading-snug);
  color: var(--text-muted);
  letter-spacing: var(--tracking-none);
}

/* footer симметричная сетка 1fr auto 1fr */
.panel-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--layout-control-gap);
  width: 100%;
  max-width: var(--copy-wide);
  min-height: var(--back-zone-height);
  margin: 0 auto;
  padding-top: 0;
}

/* добавляем виртуальный правый spacer, когда внутри только back + actions */
.panel-footer:not(:has(> :nth-child(3)))::after {
  content: "";
  display: block;
  width: max(var(--back-control-size), var(--touch-target-min-size));
  height: max(var(--back-control-size), var(--touch-target-min-size));
  justify-self: end;
}

.panel,
.form-panel,
.watch-panel {
  position: relative;
}

/* ==========================================================================
   Split panel layout — mobile bottom sheet structure
   ========================================================================== */

@media (max-width: 63.99rem) {
  :is(
      .participant-shell--window,
      .participant-shell--plus,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel:has(> .split-panel__motion) {
    display: block;
    overflow: hidden;
    padding-block: 0;
    padding-inline: 0;
    height: auto;
    min-height: 0;
    max-height: none;
    grid-template-rows: unset;
    grid-template-columns: unset;
    container-type: inline-size;
    container-name: adaptive-surface;
  }

  :is(
      .participant-shell--window,
      .participant-shell--plus,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel:has(> .split-panel__motion)
    > .split-panel__motion {
    box-sizing: border-box;
    padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  }

  .split-panel__motion {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--split-media-gap) auto calc(var(--split-detail-actions-gap) * 2);
    width: 100%;
    background: var(--split-panel-surface);
    transform: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: flat;
  }

  .participant-shell--plus > .plus-sheet > .split-panel__motion {
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    background: transparent;
  }
}

@media (min-width: 64rem) {
  .split-panel__motion {
    display: contents;
  }

  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel:has(> .split-panel__motion) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    justify-items: center;
    gap: 0;
    padding-block: 0;
    overflow: hidden;
  }
}

/* Shared split content engine for regular two-pane screens with a real panel. */
:is(
    .participant-shell--window,
    .participant-shell--registration:not(.participant-shell--goal-composition),
    .participant-shell--gift-activation:not(.participant-shell--goal-composition),
    .participant-shell--info
  )
  > .split-screen-panel,
.participant-shell--watch > .watch-panel {
  --split-base-gap: var(--adaptive-base-gap);
  --split-media-gap: calc(var(--split-base-gap) * 4);
  --split-content-actions-gap: calc(var(--split-base-gap) * 4);
  --split-detail-actions-gap: var(--split-content-actions-gap);
  --split-back-zone: calc(var(--adaptive-control-size) + var(--split-base-gap) * 4);
  container-type: size;
  container-name: adaptive-surface;
}

:is(
    .participant-shell--window,
    .participant-shell--registration:not(.participant-shell--goal-composition),
    .participant-shell--gift-activation:not(.participant-shell--goal-composition),
    .participant-shell--info
  )
  > .split-screen-panel:not(:has(> .split-panel__motion)),
.participant-shell--watch > .watch-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  justify-items: center;
  gap: 0;
  padding-block: 0;
  overflow: hidden;
}

:is(
    .participant-shell--window,
    .participant-shell--registration:not(.participant-shell--goal-composition),
    .participant-shell--gift-activation:not(.participant-shell--goal-composition),
    .participant-shell--info
  )
  > .split-screen-panel
  .split-content-stack,
.participant-shell--watch .watch-panel .split-content-stack {
  grid-row: 2;
  align-self: center;
  justify-self: center;
  width: var(--adaptive-content-width);
  min-width: 0;
  min-height: 0;
}

.split-screen-shell > .split-screen-stage {
  container-type: size;
  container-name: adaptive-surface;
}

.split-screen-shell > .split-screen-stage .stage-overlay,
.window-browse-stage.participant-shell--window > .split-stage .stage-overlay {
  --stage-phrase-size: var(--type-stage-phrase-split);
  --stage-edge-caption-size: var(--type-stage-anchor);
}

@media (max-width: 63.99rem) {
  .split-screen-shell > .split-screen-stage .stage-overlay,
  .window-browse-stage.participant-shell--window > .split-stage .stage-overlay {
    --stage-edge-caption-size: var(--stage-edge-caption-size-narrow);
  }
}

.split-screen-shell:not(.participant-shell--offer) .gift-certificate-caption {
  --gift-certificate-caption-size: var(--stage-edge-caption-size, var(--type-stage-anchor));
}

.split-screen-shell:not(.participant-shell--offer) .gift-certificate-message {
  --gift-certificate-message-size: var(--stage-phrase-size);
}

@supports (width: 1cqw) and (height: 1cqh) {
  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    .split-content-stack,
  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    > .panel-footer,
  .participant-shell--watch .watch-panel .panel-scroll,
  .participant-shell--watch .watch-panel .panel-footer,
  .plus-sheet .plus-sheet-copy,
  .plus-sheet .plus-sheet-footer {
    --adaptive-surface-fluid: min(1.18cqw, 1.42cqh);
    --adaptive-fluid: var(--adaptive-surface-fluid);
    --adaptive-base-gap: var(--adaptive-surface-base-gap);
    --adaptive-action-gap: calc(var(--adaptive-base-gap) * 4);
    --adaptive-content-width: var(--adaptive-surface-content-width);
    --adaptive-copy-size: var(--adaptive-surface-copy-size);
    --adaptive-detail-size: var(--adaptive-surface-detail-size);
    --adaptive-button-font-size: var(--adaptive-surface-control-size);
    --adaptive-button-padding-block: var(--adaptive-surface-button-padding-block);
    --adaptive-button-padding-inline: var(--adaptive-surface-button-padding-inline);
    --adaptive-button-max-block-size: var(--adaptive-surface-button-max-block-size);
    --adaptive-control-max-size: var(--adaptive-surface-control-max-size);
  }

  .split-screen-shell > .split-screen-stage .stage-overlay {
    --stage-phrase-size: var(--type-stage-phrase-container);
  }
}

@container adaptive-surface (max-width: 30rem) {
  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    .split-content-stack,
  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    > .panel-footer,
  .participant-shell--watch .watch-panel .panel-scroll,
  .participant-shell--watch .watch-panel .panel-footer,
  .plus-sheet .plus-sheet-copy,
  .plus-sheet .plus-sheet-footer {
    --adaptive-base-gap: var(--adaptive-compact-base-gap);
    --adaptive-copy-size: var(--adaptive-compact-copy-size);
    --adaptive-detail-size: var(--adaptive-compact-detail-size);
    --adaptive-button-font-size: var(--adaptive-compact-control-size);
    --adaptive-button-padding-block: var(--adaptive-compact-button-padding-block);
    --adaptive-button-padding-inline: var(--adaptive-compact-button-padding-inline);
    --adaptive-button-min-block-size: var(--adaptive-compact-button-min-block-size);
    --adaptive-button-max-block-size: var(--adaptive-compact-button-max-block-size);
    --adaptive-control-min-size: var(--interactive-min-size);
    --adaptive-control-max-size: var(--adaptive-compact-control-max-size);
    --adaptive-icon-min-size: var(--adaptive-compact-icon-min-size);
    --adaptive-icon-max-size: var(--adaptive-compact-icon-max-size);
  }
}

@container adaptive-surface (min-width: 48rem) {
  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    .split-content-stack,
  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    > .panel-footer,
  .participant-shell--watch .watch-panel .panel-scroll,
  .participant-shell--watch .watch-panel .panel-footer,
  .plus-sheet .plus-sheet-copy,
  .plus-sheet .plus-sheet-footer {
    --adaptive-content-width: var(--adaptive-surface-content-width-wide);
    --adaptive-copy-size: var(--adaptive-surface-copy-size);
    --adaptive-detail-size: var(--adaptive-surface-detail-size);
    --adaptive-button-max-block-size: 2.85rem;
    --adaptive-control-max-size: 3rem;
  }

  .plus-sheet .plus-sheet-copy,
  .plus-sheet .plus-sheet-footer.panel-footer {
    --plus-sheet-copy-width: min(36ch, var(--container-safe-inline));
  }

  .plus-sheet .plus-sheet-copy {
    --adaptive-content-width: min(36ch, var(--container-safe-inline));
  }

  .plus-sheet .plus-sheet-footer.panel-footer {
    --plus-footer-copy-edge: calc((100% + min(36ch, var(--container-safe-inline))) / 2);
  }
}

@container adaptive-surface (max-width: 26rem) {
  .panel-scroll,
  .panel-copy,
  .panel-footer,
  .form-section,
  .registration-section,
  .rules-consent-section,
  .choice-panel,
  .lesson-tabs,
  .lesson-accordion,
  .profile-panel,
  .profile-screen-main,
  .profile-screen-stack,
  .profile-actions-area,
  .plus-sheet-copy,
  .plus-sheet-footer,
  .messages-header,
  .messages-feed,
  .messages-composer-shell,
  .feed-post-stack,
  .feed-post-actions,
  .feed-comments-dialog {
    --adaptive-base-gap: var(--adaptive-compact-base-gap);
    --adaptive-copy-size: var(--adaptive-compact-copy-size);
    --adaptive-detail-size: var(--adaptive-compact-detail-size);
    --adaptive-button-font-size: var(--adaptive-compact-control-size);
    --adaptive-button-padding-block: var(--adaptive-compact-button-padding-block);
    --adaptive-button-padding-inline: var(--adaptive-compact-button-padding-inline);
    --adaptive-button-min-block-size: var(--adaptive-compact-button-min-block-size);
    --adaptive-button-max-block-size: var(--adaptive-compact-button-max-block-size);
    --adaptive-control-min-size: var(--interactive-min-size);
    --adaptive-control-max-size: var(--adaptive-compact-control-max-size);
    --adaptive-icon-min-size: var(--adaptive-compact-icon-min-size);
    --adaptive-icon-max-size: var(--adaptive-compact-icon-max-size);
    --button-group-gap: var(--layout-control-gap);
  }
}

@container adaptive-surface (max-height: 28rem) {
  .panel-scroll,
  .panel-copy,
  .panel-footer,
  .form-section,
  .choice-panel,
  .profile-screen-main,
  .profile-screen-stack,
  .plus-sheet-copy,
  .plus-sheet-footer,
  .messages-header,
  .messages-feed,
  .messages-composer-shell {
    --adaptive-base-gap: var(--adaptive-short-base-gap);
    --adaptive-copy-size: var(--adaptive-short-copy-size);
    --adaptive-detail-size: var(--adaptive-short-detail-size);
    --adaptive-button-font-size: var(--adaptive-short-control-size);
    --adaptive-button-padding-block: var(--adaptive-short-button-padding-block);
    --adaptive-button-padding-inline: var(--adaptive-short-button-padding-inline);
    --adaptive-button-min-block-size: var(--adaptive-short-button-min-block-size);
    --adaptive-button-max-block-size: var(--adaptive-short-button-max-block-size);
    --adaptive-control-max-size: var(--adaptive-short-control-max-size);
    --adaptive-icon-max-size: var(--adaptive-short-icon-max-size);
    --button-group-gap: var(--layout-control-gap);
  }
}

@container adaptive-surface (max-height: 30rem) {
  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    .split-content-stack,
  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    > .panel-footer,
  .participant-shell--watch .watch-panel .panel-scroll,
  .participant-shell--watch .watch-panel .panel-footer,
  .plus-sheet .plus-sheet-copy,
  .plus-sheet .plus-sheet-footer {
    --adaptive-base-gap: var(--adaptive-short-base-gap);
    --adaptive-copy-size: var(--adaptive-short-copy-size);
    --adaptive-detail-size: var(--adaptive-short-detail-size);
    --adaptive-button-font-size: var(--adaptive-short-control-size);
    --adaptive-button-padding-block: var(--adaptive-short-button-padding-block);
    --adaptive-button-padding-inline: var(--adaptive-short-button-padding-inline);
    --adaptive-button-min-block-size: var(--adaptive-short-button-min-block-size);
    --adaptive-button-max-block-size: var(--adaptive-short-button-max-block-size);
    --adaptive-control-max-size: var(--adaptive-short-control-max-size);
    --adaptive-icon-max-size: var(--adaptive-short-icon-max-size);
  }
}

.participant-shell--window > .panel .panel-main-stack {
  display: grid;
  grid-template-rows: auto var(--split-detail-actions-gap) auto;
  justify-items: center;
}

.participant-shell--window > .panel .panel-copy {
  grid-row: 1;
  flex: 0 0 auto;
  width: 100%;
  gap: var(--split-base-gap);
}

.participant-shell--window > .panel .panel-summary {
  width: 100%;
  margin-inline: auto;
  font-size: var(--adaptive-copy-size);
  line-height: calc(1em + var(--adaptive-base-gap));
  text-align: center;
  text-wrap: pretty;
}

.participant-shell--window > .panel .panel-summary-stack {
  gap: calc(var(--adaptive-base-gap) * 0.55);
}

.participant-shell--window > .panel .panel-more-link {
  padding-inline: var(--panel-more-padding-inline);
  min-height: auto;
  font-size: var(--adaptive-detail-size);
  letter-spacing: var(--tracking-none);
}

.participant-shell--window > .panel-footer {
  display: contents;
}

.participant-shell--window > .panel-footer::after {
  content: none;
  display: none;
}

.participant-shell--registration:not(.participant-shell--goal-composition) > .panel-footer,
.participant-shell--gift-activation:not(.participant-shell--goal-composition) > .panel-footer {
  display: contents;
}

.participant-shell--registration:not(.participant-shell--goal-composition) > .panel-footer::after,
.participant-shell--gift-activation:not(.participant-shell--goal-composition)
  > .panel-footer::after {
  content: none;
  display: none;
}

.participant-shell--registration:not(.participant-shell--goal-composition)
  > .panel-footer
  > .panel-spacer,
.participant-shell--gift-activation:not(.participant-shell--goal-composition)
  > .panel-footer
  > .panel-spacer {
  display: none;
}

.panel-footer > :nth-child(1) {
  justify-self: start;
}
.panel-footer > :nth-child(2) {
  justify-self: center;
}
.panel-footer > :nth-child(3) {
  justify-self: end;
}

.panel-footer > .panel-back {
  grid-column: 2;
  justify-self: center;
}

.participant-shell--login > .panel-footer--login .panel-back,
.participant-shell--registration > .panel-footer--registration .panel-back,
.participant-shell--window > .panel-footer .panel-back,
.participant-shell--offer > .panel-footer .panel-back,
.participant-shell--watch > .panel-footer .panel-back,
.participant-shell--plus > .plus-sheet-footer.panel-footer .panel-back {
  grid-column: auto;
}

.participant-shell--offer .form-panel .panel-spacer {
  display: none;
}

.participant-shell--offer .form-panel .panel-scroll {
  justify-content: center;
  padding-block: var(--offer-panel-scroll-padding-block);
}

.participant-shell--registration .split-stage,
.participant-shell--gift-activation .stage-overlay {
  pointer-events: none;
}

.participant-shell--registration .panel-footer--registration .panel-spacer {
  display: none;
}

.participant-shell--registration:has(.registration-rules-section) .registration-rules-section,
.participant-shell--gift-activation-rules .registration-rules-section {
  width: min(var(--container-registration-rules), 100%);
  max-width: 100%;
  pointer-events: auto;
}

.participant-shell--registration:has(.registration-rules-section)
  > .split-screen-panel
  .split-content-stack,
.participant-shell--gift-activation-rules > .split-screen-panel .split-content-stack {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.participant-shell--registration:has(.registration-rules-section)
  > .split-screen-panel
  .split-content-stack::-webkit-scrollbar,
.participant-shell--gift-activation-rules
  > .split-screen-panel
  .split-content-stack::-webkit-scrollbar {
  display: none;
}

.participant-shell--goal-composition {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: var(--viewport-fill-height);
  min-height: var(--viewport-fill-height);
  max-height: var(--viewport-fill-height);
  overflow: hidden;
  overscroll-behavior: none;
}

.participant-shell--goal-composition .split-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: var(--viewport-fill-height);
}

.participant-shell--goal-composition .form-panel--goal-composition {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  min-height: var(--viewport-fill-height);
  padding: 0;
  pointer-events: none;
}

.participant-shell--goal-composition .panel-scroll {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  padding: 0;
  pointer-events: none;
}

.participant-shell--goal-composition .registration-goal-section {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  pointer-events: none;
}

.form-panel:not(:has(.panel-scroll)) {
  justify-content: center;
  gap: var(--space-5);
}

.panel-footer-actions,
.panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--button-group-gap);
  justify-content: center;
  align-items: center;
}

.panel-back,
.panel-spacer {
  width: max(var(--back-control-size), var(--touch-target-min-size));
  height: max(var(--back-control-size), var(--touch-target-min-size));
  border-radius: var(--radius-pill);
}

.panel-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--back-arrow-size);
  font-weight: 800;
  line-height: var(--leading-solid);
  text-decoration: none;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.52);
  opacity: var(--back-control-opacity);
  transition:
    color var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.panel-back:hover {
  color: rgba(255, 255, 255, 1);
  opacity: var(--back-control-hover-opacity);
}
.panel-back:focus-visible {
  outline: none;
  box-shadow: none;
  color: rgba(255, 255, 255, 1);
  opacity: var(--back-control-hover-opacity);
}
.panel-back:active {
  transform: scale(0.96);
}

/* Viewport-standard back: fixed top-left (participant routes + profile messages/feed). */
:is(.participant-shell, .messages-shell) .panel-back,
.feed-comments-backdrop .panel-back {
  position: fixed;
  top: max(var(--safe-area-top), clamp(0.5rem, calc(var(--fluid-min) * 2), 1.25rem));
  left: max(var(--safe-area-left), clamp(0.25rem, calc(var(--fluid-min) * 2), 1rem));
  right: auto;
  bottom: auto;
  z-index: var(--z-float);
  grid-row: auto;
  grid-column: auto;
  justify-self: auto;
  align-self: auto;
  margin: 0;
  width: max(calc(var(--touch-target-min-size) * 2), calc(var(--back-control-size) * 2));
  min-width: max(calc(var(--touch-target-min-size) * 2), calc(var(--back-control-size) * 2));
  height: max(calc(var(--touch-target-min-size) * 2), calc(var(--back-control-size) * 2));
  min-height: max(calc(var(--touch-target-min-size) * 2), calc(var(--back-control-size) * 2));
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: clamp(0.55rem, calc(var(--fluid-min) * 2.1), 0.9rem);
  padding-left: clamp(0.65rem, calc(var(--fluid-min) * 2.45), 1.05rem);
  box-sizing: border-box;
  transform: none;
  pointer-events: auto;
}

.feed-comments-backdrop .panel-back {
  z-index: calc(var(--z-modal) + 5);
}

:is(.participant-shell, .messages-shell) .panel-back:active,
.feed-comments-backdrop .panel-back:active {
  transform: scale(0.96);
}

:is(.participant-shell, .messages-shell) .panel-back svg,
:is(.participant-shell, .messages-shell) .panel-back svg.google-icon,
.feed-comments-backdrop .panel-back svg,
.feed-comments-backdrop .panel-back svg.google-icon {
  width: clamp(1rem, calc(var(--back-arrow-size) * 1.45), 1.2rem);
  height: clamp(1rem, calc(var(--back-arrow-size) * 1.45), 1.2rem);
}

.participant-shell .panel-footer,
.participant-shell .plus-sheet-footer.panel-footer,
.messages-shell > .panel-footer,
.feed-comments-backdrop > .panel-footer {
  display: contents;
  min-height: 0;
  margin: 0;
}

.participant-shell--window > .panel .panel-footer-actions {
  grid-row: 3;
  justify-self: center;
  width: 100%;
  max-width: 100%;
  gap: var(--button-group-gap);
}

.panel-spacer {
  visibility: hidden;
  pointer-events: none;
}

.plus-sheet {
  --plus-sheet-copy-width: min(var(--adaptive-content-width), 100%);
  position: absolute;
  inset: var(--sheet-full-inset);
  z-index: 2;
  isolation: isolate;
  container-type: size;
  container-name: adaptive-surface;
  height: var(--sheet-block-size);
  min-height: var(--sheet-block-size);
  max-height: var(--sheet-block-size);
  width: var(--sheet-full-inline);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  align-items: stretch;
  padding-block: 0 var(--sheet-safe-area-bottom);
  padding-inline: var(--panel-safe-gutter-start) var(--panel-safe-gutter-end);
  text-align: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding-bottom: var(--sheet-scroll-padding-bottom);
  -webkit-overflow-scrolling: touch;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .focus-backdrop__scrim {
    background: var(--focus-backdrop-scrim-fallback);
  }

  .focus-backdrop__blur {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .focus-backdrop__scrim,
  .focus-backdrop__blur {
    transition: none;
  }

  .focus-backdrop[data-focus-backdrop-phase="showing"] .focus-backdrop__scrim,
  .focus-backdrop[data-focus-backdrop-phase="shown"] .focus-backdrop__scrim,
  .focus-backdrop[data-focus-backdrop-phase="showing"] .focus-backdrop__blur,
  .focus-backdrop[data-focus-backdrop-phase="shown"] .focus-backdrop__blur {
    opacity: 1;
  }

  .focus-backdrop[data-focus-backdrop-phase="hidden"] .focus-backdrop__scrim,
  .focus-backdrop[data-focus-backdrop-phase="hidden"] .focus-backdrop__blur {
    opacity: 0;
  }
}

.plus-sheet-copy {
  anchor-name: --plus-sheet-copy;
  position: relative;
  z-index: 1;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  width: var(--plus-sheet-copy-width);
  max-width: 100%;
  display: grid;
  justify-items: stretch;
  gap: calc(var(--adaptive-base-gap) * 2.1);
  text-align: left;
}

.plus-sheet-number {
  position: relative;
  z-index: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  width: calc(100% - var(--stage-inline-gutter) * 2);
  margin: 0;
  color: var(--text);
  font-size: calc(var(--type-stage-anchor) * 1.4);
  font-weight: 900;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-body);
  text-align: center;
  font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 0.045em currentColor;
  paint-order: stroke fill;
}

.plus-sheet-copy .panel-summary {
  width: 100%;
  max-width: none;
  font-size: var(--adaptive-copy-size);
  line-height: calc(1em + var(--adaptive-base-gap));
  color: rgba(255, 255, 255, 1);
  font-weight: 500;
  text-align: left;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.36);
}

.plus-sheet-footer.panel-footer:not(:has(> :nth-child(3)))::after {
  content: none;
  display: none;
}

.plus-sheet-footer .panel-back svg {
  display: block;
}

.plus-sheet-footer .panel-back svg path {
  fill: currentColor;
}

.participant-shell--plus.participant-shell--legacy-course {
  background: transparent;
}

.participant-shell--plus.participant-shell--legacy-course .split-stage {
  display: none;
}

.participant-shell--plus.participant-shell--legacy-course .plus-sheet {
  grid-template-rows:
    var(--layout-route-row-start) minmax(0, 1fr)
    var(--layout-route-row-end-compact);
}

.participant-shell--plus.participant-shell--legacy-course .plus-sheet--legacy-course::before {
  content: none;
}

.participant-shell--plus.participant-shell--legacy-course .plus-sheet--legacy-course-direct {
  grid-template-rows:
    var(--layout-route-row-start) minmax(0, 1fr)
    var(--layout-route-row-end-compact);
}

.participant-shell--plus.participant-shell--legacy-course .legacy-course-sheet-copy {
  align-self: stretch;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  overscroll-behavior: contain;
  padding-block: 0;
  gap: 0;
  justify-items: stretch;
  scrollbar-width: none;
}

.participant-shell--plus.participant-shell--legacy-course
  .legacy-course-sheet-copy::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.participant-shell--plus.participant-shell--legacy-course .plus-sheet-footer.panel-footer {
  pointer-events: none;
}

.legacy-course-archive {
  --legacy-course-switch-height: max(
    var(--interactive-min-size),
    clamp(1.85rem, calc(var(--fluid-block) * 4.2), 2.35rem)
  );
  --legacy-course-back-bottom: var(--layout-sheet-dock-offset);
  --legacy-course-back-gap: var(--layout-sheet-dock-gap);
  --legacy-course-padding-block-start: var(--layout-sheet-padding-block-start);
  --legacy-course-padding-inline: var(--layout-sheet-padding-inline);
  --legacy-course-padding-switch-gap: var(--layout-sheet-switch-gap);
  --legacy-course-section-gap: var(--layout-sheet-section-gap);
  --legacy-course-frame-padding-block: var(--layout-sheet-frame-padding-block);
  --legacy-course-format-gap: var(--layout-sheet-format-gap);
  --legacy-course-tab-padding-block: var(--layout-sheet-tab-padding-block);
  --legacy-course-tab-padding-inline: var(--layout-sheet-tab-padding-inline);
  --legacy-course-video-choice-min-height: calc(var(--button-min-height) * 0.62);
  --legacy-course-video-choice-padding-block: 0;
  --legacy-course-video-choice-padding-inline: clamp(
    0.34rem,
    calc(var(--adaptive-base-gap) * 1.1),
    0.52rem
  );
  --legacy-course-video-choice-radius: var(--radius-xs);
  --legacy-course-video-choice-font-size: var(--type-control-compact);
  --legacy-course-heading-color: var(--text-strong);
  --legacy-course-format-copy-color: rgba(255, 255, 255, 0.86);
  --legacy-course-control-border: rgba(255, 255, 255, 0.22);
  --legacy-course-control-border-hover: rgba(255, 255, 255, 0.42);
  --legacy-course-control-border-selected: rgba(255, 255, 255, 0.54);
  --legacy-course-control-border-strong: rgba(255, 255, 255, 0.52);
  --legacy-course-control-color: var(--button-color);
  --legacy-course-control-color-hover: rgba(255, 255, 255, 0.9);
  --legacy-course-control-color-selected: var(--text);
  --legacy-course-link-color: rgba(255, 255, 255, 0.9);
  --legacy-course-link-decoration-color: rgba(255, 255, 255, 0.42);
  --legacy-course-link-hover-color: var(--text-strong);
  --legacy-course-link-hover-decoration-color: var(--text-soft);
  --legacy-course-segments-border: rgba(255, 255, 255, 0.24);
  --legacy-course-thumb-border: rgba(255, 255, 255, 0.5);
  --legacy-course-thumb-bg: rgba(255, 255, 255, 0.1);
  --legacy-course-tab-color: rgba(255, 255, 255, 0.62);
  container-type: size;
  container-name: adaptive-surface;

  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.legacy-course-archive::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.legacy-course-section {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  min-height: 0;
  margin: 0;
  padding: var(--legacy-course-padding-block-start) var(--legacy-course-padding-inline);
}

.legacy-course-section-frame {
  display: grid;
  align-content: safe center;
  gap: var(--legacy-course-section-gap);
  width: var(--container-stage-local);
  height: auto;
  max-height: 100%;
  padding-block: var(--legacy-course-frame-padding-block);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.legacy-course-section-frame::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.legacy-course-format-frame {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  align-content: stretch;
  place-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
  max-height: 100%;
  gap: 0;
  overflow: visible;
}

.legacy-course-format-copy {
  grid-row: 2;
  align-self: center;
  display: grid;
  justify-items: center;
  gap: var(--legacy-course-format-gap);
  width: min(var(--container-form-local), 100%);
  max-width: 100%;
  text-align: center;
}

.legacy-course-format-footer {
  grid-row: 3;
  display: grid;
  place-items: center;
  align-self: center;
  width: 100%;
  min-height: max(var(--back-control-size), var(--touch-target-min-size));
}

.legacy-course-format-copy h2 {
  margin: 0;
  color: var(--legacy-course-heading-color);
  font-size: var(--type-title-small);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-none);
  text-wrap: balance;
}

.legacy-course-format-copy .panel-summary {
  margin: 0;
  max-width: none;
  color: var(--legacy-course-format-copy-color);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: var(--leading-readable);
  text-align: center;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.32);
}

.legacy-course-format-copy .legacy-course-format-link {
  justify-self: center;
}

.legacy-course-video-switcher {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--layout-micro-gap);
  width: 100%;
}

.legacy-course-video-choice {
  min-height: var(--legacy-course-video-choice-min-height);
  min-width: 0;
  width: 100%;
  padding: var(--legacy-course-video-choice-padding-block)
    var(--legacy-course-video-choice-padding-inline);
  border: var(--divider-width) solid var(--legacy-course-control-border);
  border-radius: var(--legacy-course-video-choice-radius);
  background: transparent;
  color: var(--legacy-course-control-color);
  font-size: var(--legacy-course-video-choice-font-size);
  font-weight: 500;
  line-height: var(--leading-solid);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: none;
  transition: none;
}

.legacy-course-video-choice[data-selected="true"] {
  border-color: var(--legacy-course-control-border-selected);
  background: transparent;
  color: var(--legacy-course-control-color-selected);
}

.legacy-course-video-choice:hover:not(:disabled) {
  border-color: var(--legacy-course-control-border-hover);
  background: transparent;
  color: var(--legacy-course-control-color-hover);
  opacity: 1;
  transform: none;
}

.legacy-course-video-choice:active:not(:disabled) {
  transform: none;
}

.legacy-course-after {
  display: grid;
  gap: calc(var(--layout-list-gap) * var(--accordion-scale, 1));
  width: 100%;
}

.legacy-course-after p,
.legacy-course-after li {
  margin: 0;
  color: var(--text-soft);
  font-size: calc(var(--accordion-body-size, var(--type-small)) * var(--accordion-scale, 1));
  line-height: var(--accordion-body-line-height, var(--leading-readable));
  text-wrap: pretty;
}

.legacy-course-after ul {
  margin: 0;
  padding-left: var(--list-indent);
}

.lesson-accordion-body .legacy-course-after li + li {
  margin-top: 0;
}

.legacy-course-after-title {
  color: var(--legacy-course-link-color) !important;
  font-weight: 500;
}

.legacy-course-after a {
  color: var(--legacy-course-link-color);
  text-decoration-line: underline;
  text-decoration-thickness: var(--text-decoration-line-width);
  text-decoration-color: var(--legacy-course-link-decoration-color);
  text-underline-offset: 0.24em;
  transition:
    color var(--dur) var(--ease-out),
    text-decoration-color var(--dur) var(--ease-out);
}

.legacy-course-after a:hover {
  color: var(--legacy-course-link-hover-color);
  text-decoration-color: var(--legacy-course-link-hover-decoration-color);
}

.legacy-course-after .legacy-course-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--legacy-course-video-choice-min-height);
  padding: var(--legacy-course-video-choice-padding-block)
    var(--legacy-course-video-choice-padding-inline);
  border: var(--divider-width) solid var(--legacy-course-control-border);
  border-radius: var(--legacy-course-video-choice-radius);
  background: transparent;
  color: var(--legacy-course-control-color);
  font-size: var(--legacy-course-video-choice-font-size);
  font-weight: 500;
  line-height: var(--leading-solid);
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}

.legacy-course-after .legacy-course-download-button:hover {
  border-color: var(--legacy-course-control-border-strong);
  background: transparent;
  color: var(--legacy-course-link-hover-color);
  text-decoration: none;
}

.legacy-course-course-switch {
  position: static;
  z-index: auto;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: var(--accordion-inline);
  justify-self: center;
  padding-inline: 0;
  pointer-events: auto;
}

.legacy-course-course-segments {
  --segments: 3;
  --segment-index: 0;
  width: 100%;
  padding: var(--segmented-inset);
  border-color: var(--legacy-course-segments-border);
  background: transparent;
}

.legacy-course-course-thumb {
  top: var(--segmented-inset);
  left: var(--segmented-inset);
  bottom: var(--segmented-inset);
  width: calc((100% - var(--segmented-inset) * 2) / var(--segments));
  border-color: var(--legacy-course-thumb-border);
  background: var(--legacy-course-thumb-bg);
  transform: translateX(calc(var(--segment-index) * 100%));
}

.legacy-course-course-tab {
  min-height: var(--legacy-course-switch-height);
  min-width: 0;
  padding: var(--legacy-course-tab-padding-block) var(--legacy-course-tab-padding-inline);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--legacy-course-tab-color);
  font-size: var(--type-control);
  font-weight: 650;
  line-height: var(--lh-snug);
  text-align: center;
  text-decoration: none;
  box-shadow: none;
  transition: none;
  overflow: hidden;
  white-space: nowrap;
}

.legacy-course-course-tab[data-active="true"] {
  color: var(--legacy-course-control-color-selected);
}

.legacy-course-course-tab--format {
  color: var(--legacy-course-control-color);
}

.legacy-course-course-tab:hover:not(:disabled),
.legacy-course-course-tab--format:hover {
  background: transparent;
  color: var(--legacy-course-control-color-hover);
  opacity: 1;
  transform: none;
}

@container adaptive-surface (max-width: 24rem) {
  .legacy-course-course-switch {
    padding-inline: 0;
  }

  .legacy-course-course-segments {
    --segmented-inset: var(--segmented-inset-compact);
  }

  .legacy-course-course-thumb {
    top: var(--segmented-inset);
    left: var(--segmented-inset);
    bottom: var(--segmented-inset);
    width: calc((100% - var(--segmented-inset) * 2) / var(--segments));
  }

  .legacy-course-course-tab {
    min-height: var(--legacy-course-tab-min-height-compact);
    padding-inline: var(--legacy-course-tab-padding-inline-compact);
    font-size: var(--type-control);
  }
}

/* ==========================================================================
   Shared button engine
   ========================================================================== */

.action,
button,
.choice-card,
.lesson-tab,
.segment,
.offer-details-button,
.offer-pay-button,
.offer-switch-tab,
.ghost-button {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  width: var(--button-width);
  min-width: var(--button-min-width);
  max-width: var(--button-max-width);
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: var(--button-border);
  border-radius: var(--button-radius);
  background: var(--button-bg);
  color: var(--button-color);
  font-size: var(--button-font-size);
  font-weight: 500;
  letter-spacing: var(--tracking-none);
  line-height: var(--button-line-height);
  text-align: center;
  white-space: var(--button-white-space);
  text-wrap: var(--button-text-wrap);
  overflow-wrap: var(--button-overflow-wrap);
  text-decoration: none;
  flex-shrink: 0;
  touch-action: manipulation;
  transition: var(--button-transition);
}

.action:focus-visible,
button:focus-visible,
.choice-card:focus-visible,
.lesson-tab:focus-visible,
.segment:focus-visible,
.offer-details-button:focus-visible,
.offer-pay-button:focus-visible,
.offer-switch-tab:focus-visible,
.ghost-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--page),
    0 0 0 4px var(--accent);
}

.action:hover:not([aria-disabled="true"]),
button:hover:not(:disabled),
.choice-card:hover,
.lesson-tab:hover,
.segment:hover:not(:has(input:checked)),
.offer-details-button:hover:not(:disabled),
.offer-pay-button:hover:not(:disabled),
.offer-switch-tab:hover:not(:has(input:checked)),
.ghost-button:hover {
  border-color: var(--button-border-hover);
  background: var(--button-bg-hover);
  color: var(--button-color-hover);
  opacity: 1;
}

.action:active:not([aria-disabled="true"]),
button:active:not(:disabled),
.choice-card:active,
.lesson-tab:active,
.segment:active:not(:has(input:disabled)),
.offer-details-button:active:not(:disabled),
.offer-pay-button:active:not(:disabled),
.offer-switch-tab:active:not(:has(input:disabled)),
.ghost-button:active {
  transform: scale(0.985);
  background: var(--button-bg-active);
}

.action[data-tone="primary"],
button {
  background: var(--accent);
  color: var(--accent-ink);
}

.action[data-effect="text-shimmer"],
.offer-pay-button[data-effect="text-shimmer"],
button[data-effect="text-shimmer"] {
  position: relative;
  overflow: hidden;
  background: transparent;
  color: var(--button-color);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

.action[data-effect="text-shimmer"]:hover:not([aria-disabled="true"]),
.offer-pay-button[data-effect="text-shimmer"]:hover:not(:disabled),
button[data-effect="text-shimmer"]:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.34);
  opacity: 1;
}

.legacy-course-format-link {
  min-height: var(--button-min-height);
  min-width: 0;
  width: auto;
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: var(--button-border);
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--button-color);
  font-size: var(--button-font-size);
  font-weight: 600;
  line-height: var(--button-line-height);
  text-decoration: none;
  text-shadow: none;
  box-shadow: none;
}

.legacy-course-format-link[data-effect="text-shimmer"] {
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}

.participant-shell--window .panel-footer-actions .action {
  min-width: var(--button-min-width);
  max-width: 100%;
  min-height: var(--button-min-height);
  padding-block: var(--button-padding-block);
  padding-inline: var(--button-padding-inline);
  border-radius: var(--button-radius);
  border: var(--line-width-thin) solid rgba(255, 255, 255, 0.264);
  background: transparent;
  color: var(--button-color);
  font-size: var(--button-font-size);
  letter-spacing: var(--tracking-none);
  line-height: var(--leading-solid);
  white-space: nowrap;
  text-wrap: nowrap;
  overflow-wrap: normal;
  box-shadow: none;
}

.participant-shell--window .panel-footer-actions .action[data-tone="secondary"] {
  color: rgba(255, 255, 255, 0.576);
}

.participant-shell--window-details .panel-footer-actions .action {
  border-color: rgba(255, 255, 255, 0.9);
  color: rgba(255, 255, 255, 1);
}

.participant-shell--window .panel-footer-actions .action:hover:not([aria-disabled="true"]) {
  border-color: var(--button-border-hover);
  background: transparent;
  color: var(--button-color-hover);
  opacity: 1;
}

.text-shimmer {
  --text-shimmer-spread: 4;
  --text-shimmer-soft-edge: 18%;
  --text-shimmer-hot-edge: 6%;
  --text-shimmer-base: rgba(255, 255, 255, 0.54);
  --text-shimmer-glow: rgba(232, 240, 255, 0.82);
  --text-shimmer-bright: rgba(255, 255, 255, 0.92);

  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--text-shimmer-base) 0%,
    var(--text-shimmer-base) calc(50% - var(--text-shimmer-soft-edge)),
    var(--text-shimmer-glow) calc(50% - var(--text-shimmer-hot-edge)),
    var(--text-shimmer-bright) 50%,
    var(--text-shimmer-glow) calc(50% + var(--text-shimmer-hot-edge)),
    var(--text-shimmer-base) calc(50% + var(--text-shimmer-soft-edge)),
    var(--text-shimmer-base) 100%
  );
  background-size: 200% 100%;
  background-repeat: repeat;
  background-position: 0% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: text-shimmer-sweep 3s linear infinite;
}

.participant-shell--window .panel-footer-actions .text-shimmer {
  display: inline-flex;
  align-items: center;
  font-weight: 650;
  line-height: inherit;
}

@keyframes text-shimmer-sweep {
  from {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}

.text-shimmer-wave {
  --text-shimmer-wave-base: currentColor;
  --text-shimmer-wave-shimmer: currentColor;
  --text-shimmer-wave-duration: 2200ms;
  --text-shimmer-wave-stagger: 72ms;

  display: inline-flex;
  align-items: baseline;
  color: var(--text-shimmer-wave-base);
  white-space: nowrap;
}

.text-shimmer-wave-char {
  display: inline-block;
  color: var(--text-shimmer-wave-base);
  animation: text-shimmer-wave var(--text-shimmer-wave-duration) ease-in-out infinite;
  animation-delay: calc(var(--text-shimmer-wave-index) * var(--text-shimmer-wave-stagger));
}

@keyframes text-shimmer-wave {
  0%,
  100% {
    color: var(--text-shimmer-wave-base);
    opacity: 0.86;
    transform: translateY(0) rotate(0deg);
  }
  38% {
    color: var(--text-shimmer-wave-shimmer);
    opacity: 1;
    transform: translateY(-0.08em) rotate(-1.4deg);
  }
  58% {
    color: var(--text-shimmer-wave-shimmer);
    opacity: 0.94;
    transform: translateY(0.02em) rotate(0.8deg);
  }
}

.spokes {
  --spokes-size: 1.35rem;
  --spokes-ring: 34%;

  display: inline-block;
  flex: 0 0 auto;
  width: var(--spokes-size);
  height: var(--spokes-size);
  border-radius: 50%;
  color: currentColor;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 255, 255, 0.16) 150deg,
    currentColor 360deg
  );
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--spokes-ring)),
    var(--mask-ink) calc(100% - var(--spokes-ring) + 1px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - var(--spokes-ring)),
    var(--mask-ink) calc(100% - var(--spokes-ring) + 1px)
  );
  animation: spokes-spin 0.8s steps(12, end) infinite;
}

.spokes--page {
  --spokes-size: var(--spinner-page-size);
  --spokes-ring: 24%;
}

.spokes--button {
  --spokes-size: 1.12em;
  --spokes-ring: 30%;
}

.loading-spokes {
  display: grid;
  place-items: center;
  min-height: var(--spinner-block-min-height);
  color: var(--text);
}

.loading-spokes--control {
  min-height: var(--control-lg);
  width: 100%;
  color: var(--text);
}

.loading-spokes--control .spokes {
  --spokes-size: 1.35rem;
}

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

.action[data-tone="primary"]:hover:not([aria-disabled="true"]),
button:hover:not(:disabled) {
  opacity: 0.9;
}

.action[data-tone="primary"]:active:not([aria-disabled="true"]),
button:active:not(:disabled) {
  transform: scale(0.985);
}

.action[data-tone="secondary"],
.ghost-button {
  background: transparent;
  color: var(--text-soft);
}

.action[data-tone="secondary"]:hover,
.ghost-button:hover {
  color: var(--text);
}

.participant-shell .panel-back[type="button"] {
  padding-top: clamp(0.55rem, calc(var(--fluid-min) * 2.1), 0.9rem);
  padding-left: clamp(0.65rem, calc(var(--fluid-min) * 2.45), 1.05rem);
  padding-right: 0;
  padding-bottom: 0;
}

.panel-back[type="button"] {
  min-height: max(var(--back-control-size), var(--touch-target-min-size));
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.panel-back:hover,
.panel-back:focus-visible,
.panel-back:active,
.panel-back[type="button"]:hover:not(:disabled),
.panel-back[type="button"]:active:not(:disabled) {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.panel-back:active,
.panel-back[type="button"]:active:not(:disabled) {
  transform: scale(0.96);
}

.ghost-button {
  font-weight: 500;
}

button:disabled,
.action[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* ==========================================================================
   Cards (status / message / note / profile / activation / form-section)
   Тонкая группировка без рамок и различимых плашек.
   ========================================================================== */

.status-card,
.activation-card,
.message-card,
.note-card,
.form-section,
.profile-card,
.watch-card {
  width: 100%;
  max-width: var(--copy-width);
  margin-inline: auto;
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.form-section {
  display: grid;
  gap: var(--space-3);
  text-align: center;
}

.form-section > form,
.form-section > label,
.form-section > fieldset,
.form-section > .check-row,
.form-section > .rules-list,
.form-section > .message-list {
  text-align: start;
}

.otp-only-section > form,
.rules-consent-section > form {
  text-align: start;
}

.registration-otp-section.otp-only-section > form,
.registration-otp-section.otp-only-section > label {
  text-align: center;
}

.status-card,
.activation-card,
.message-card,
.note-card,
.profile-card {
  display: grid;
  gap: var(--space-2);
}

.message-list {
  display: grid;
  gap: var(--space-3);
  width: 100%;
}

.message-card h3 {
  color: var(--text);
  font-size: var(--form-card-heading-size);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-soft-tight);
}

.status-card,
.activation-card {
  padding: var(--space-4);
  background: var(--surface-soft);
  border: var(--divider-width) solid var(--hairline);
  border-radius: var(--radius-md);
  text-align: start;
}

.system-notice,
.panel-notice,
.messages-notice {
  width: 100%;
  max-width: var(--system-notice-width);
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: var(--system-notice-gap);
  padding: var(--system-notice-padding-block) var(--system-notice-padding-inline);
  background: transparent;
  border: var(--divider-width) solid var(--hairline);
  border-radius: var(--radius-md);
  text-align: center;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.system-notice h2,
.system-notice p,
.panel-notice strong,
.panel-notice span,
.messages-notice strong,
.messages-notice span {
  max-width: 100%;
  text-align: center;
}

.status-card.system-notice h2 {
  font-size: var(--form-status-heading-size);
  letter-spacing: var(--tracking-none);
}

.form-section > h2,
.status-card h2 {
  font-size: var(--form-section-heading-size);
  font-weight: 500;
  color: var(--text);
  letter-spacing: var(--tracking-ui-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.registration-section {
  --registration-section-gap: var(--layout-stack-gap-tight);
  --registration-control-gap: var(--layout-registration-control-gap);
  --registration-control-min-height: var(--field-registration-control-min-height);
  --registration-control-padding-block: var(--field-registration-control-padding-block);
  --registration-action-min-height: var(--field-control-min-height);
  --registration-action-padding-block: var(--button-padding-block);
  --registration-action-padding-inline: var(--button-padding-inline);
  --registration-note-color: rgba(255, 255, 255, 0.31);
  container-type: inline-size;
  container-name: adaptive-surface;
  max-width: var(--container-form-local);
}

.registration-identity-section > form,
.registration-otp-section > form {
  gap: var(--registration-control-gap);
}

.registration-identity-section input:not([type="checkbox"]):not([type="radio"]),
.registration-otp-section input:not([type="checkbox"]):not([type="radio"]) {
  min-height: var(--registration-control-min-height);
  padding-block: var(--registration-control-padding-block);
  font-size: var(--type-body-large);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-none);
  text-align: center;
}

.registration-section input::placeholder,
.registration-section textarea::placeholder {
  color: var(--form-placeholder-color);
  opacity: 1;
  text-align: center;
}

.registration-otp-section input::placeholder {
  color: var(--form-placeholder-muted-color);
  opacity: 1;
}

.participant-shell--registration .registration-section {
  --registration-control-gap: var(--layout-registration-control-gap-compact);
  --registration-control-min-height: var(--field-control-min-height);
  --registration-control-padding-block: var(--field-control-padding-block);
  width: 100%;
  max-width: var(--container-form-narrow-local);
  margin-inline: auto;
}

.participant-shell--registration:not(.participant-shell--auth-layout)
  > .form-panel
  > .panel-scroll
  > .panel-copy,
.participant-shell--registration:not(.participant-shell--auth-layout)
  > .form-panel
  > .panel-scroll
  > .registration-identity-section,
.participant-shell--registration:not(.participant-shell--auth-layout)
  > .form-panel
  > .panel-scroll
  > .registration-otp-section {
  width: 100%;
  max-width: 100%;
}

.participant-shell--registration .registration-identity-title {
  width: 100%;
  max-width: var(--container-form-narrow-local);
  margin: 0;
  color: var(--form-field-text-color);
  font-size: var(--registration-identity-title-size);
  font-weight: calc(var(--form-field-font-weight) * 3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-none);
  text-align: center;
  text-wrap: balance;
}

.participant-shell--registration .gift-registration-note {
  width: min(21rem, var(--container-stage-safe-inline));
  max-width: var(--container-panel-summary);
  margin-inline: auto;
  font-size: var(--adaptive-copy-size);
  line-height: calc(1em + var(--adaptive-base-gap));
  font-weight: 400;
  text-align: center;
  text-wrap: pretty;
}

.participant-shell--registration .registration-identity-note,
.participant-shell--registration .gift-donor-registration-note {
  font-size: var(--adaptive-copy-size);
  font-weight: 400;
  line-height: calc(1em + var(--adaptive-base-gap));
  color: var(--text-strong);
  text-align: center;
  text-wrap: pretty;
}

.participant-shell--join-gift.participant-shell--registration .gift-donor-registration-note {
  font-size: calc(var(--adaptive-copy-size) * 0.8);
}

.participant-shell--gift-activation.participant-shell--registration .gift-activation-registration-note {
  font-size: calc(var(--adaptive-copy-size) * 0.8);
  max-width: min(100%, 17.5rem);
  margin-inline: auto;
  margin-top: calc(var(--registration-identity-stack-gap, var(--space-5)) * -0.35);
}

.participant-shell--registration .registration-identity-note .text-shimmer,
.participant-shell--registration .gift-donor-registration-note .text-shimmer {
  --text-shimmer-base: rgba(255, 255, 255, 0.78);
  --text-shimmer-glow: rgba(232, 240, 255, 0.98);
  --text-shimmer-bright: rgba(255, 255, 255, 1);

  display: inline-block;
  max-width: 100%;
  font-weight: inherit;
  text-align: center;
}

.participant-shell--registration .registration-identity-note .text-shimmer > span {
  display: block;
}

.participant-shell--registration .gift-registration-note > span {
  display: block;
}

.participant-shell--registration .registration-identity-section > form,
.participant-shell--registration .registration-otp-section > form {
  gap: var(--registration-control-gap);
}

.participant-shell--registration .registration-identity-section,
.participant-shell--registration .registration-otp-section {
  --login-input-border: var(--form-field-border-color);
  --login-input-border-focus: var(--form-field-border-color-focus);
}

.participant-shell--registration .registration-identity-section > form,
.participant-shell--registration .registration-otp-section > form {
  width: 100%;
  justify-items: center;
  text-align: center;
}

.participant-shell--registration .registration-identity-section label,
.participant-shell--registration .registration-otp-section label {
  width: 100%;
  text-align: center;
}

.participant-shell--registration
  .registration-identity-section
  input:not([type="checkbox"]):not([type="radio"]),
.participant-shell--registration
  .registration-otp-section
  input:not([type="checkbox"]):not([type="radio"]) {
  -webkit-appearance: none;
  appearance: none;
  --login-email-control-height: var(--control-lg);
  --login-email-line-height: calc(var(--login-email-control-height) - var(--divider-width) * 2);
  box-sizing: border-box;
  height: var(--login-email-control-height);
  min-height: var(--login-email-control-height);
  min-width: 0;
  width: 100%;
  field-sizing: fixed;
  padding: 0 var(--button-padding-inline);
  border: var(--form-field-border-width) solid var(--login-input-border);
  border-radius: var(--radius-field);
  background: transparent !important;
  box-shadow: none;
  color: var(--form-field-text-color);
  caret-color: var(--form-field-text-color);
  font-size: var(--fs-md);
  font-weight: var(--form-field-font-weight);
  line-height: var(--login-email-line-height);
  -webkit-text-fill-color: var(--form-field-text-color);
}

.participant-shell--registration
  .registration-identity-section
  input:not([type="checkbox"]):not([type="radio"]):focus,
.participant-shell--registration
  .registration-identity-section
  input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.participant-shell--registration
  .registration-otp-section
  input:not([type="checkbox"]):not([type="radio"]):focus,
.participant-shell--registration
  .registration-otp-section
  input:not([type="checkbox"]):not([type="radio"]):focus-visible {
  border-color: var(--login-input-border-focus);
}

.participant-shell--registration
  .registration-identity-section
  input:not([type="checkbox"]):not([type="radio"])::placeholder,
.participant-shell--registration
  .registration-otp-section
  input:not([type="checkbox"]):not([type="radio"])::placeholder {
  color: var(--form-field-text-color);
  font-weight: var(--form-field-font-weight);
  text-align: center;
}

.participant-shell--registration .registration-identity-section button[type="submit"],
.participant-shell--registration .registration-otp-section button[type="submit"],
.participant-shell--registration .registration-otp-section .otp-resend-confirm {
  justify-self: center;
  width: auto;
  min-height: max(var(--button-min-height), 2.35rem);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border: var(--divider-width) solid var(--login-submit-compact-border);
  background: transparent;
  color: var(--login-submit-compact-color);
  font-size: var(--type-login-small);
  font-weight: 300;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.participant-shell--registration
  .registration-section:not(.registration-identity-section):not(.registration-otp-section):not(
    .rules-consent-section
  ):not(.registration-goal-section)
  button[type="submit"],
.participant-shell--registration
  .registration-section:not(.registration-identity-section):not(.registration-otp-section):not(
    .rules-consent-section
  ):not(.registration-goal-section)
  .otp-resend-confirm {
  justify-self: center;
  width: auto;
  min-height: var(--registration-action-min-height);
  padding: var(--registration-action-padding-block) var(--registration-action-padding-inline);
  border: var(--divider-width) solid var(--form-action-border);
  background: transparent;
  color: var(--form-action-color);
  font-size: var(--type-small);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.participant-shell--registration
  .registration-section:not(.registration-identity-section):not(.registration-otp-section):not(
    .rules-consent-section
  ):not(.registration-goal-section)
  button[type="submit"]:hover:not(:disabled),
.participant-shell--registration
  .registration-section:not(.registration-identity-section):not(.registration-otp-section):not(
    .rules-consent-section
  )
  .otp-resend-confirm:hover:not(:disabled) {
  border-color: var(--form-action-border-hover);
  background: var(--form-action-bg-hover);
  color: var(--accent-ink);
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration
  .registration-section {
  justify-self: center;
  width: var(--join-auth-control-inline);
  max-width: min(26rem, calc(100vw - var(--shell-gutter) * 2));
  min-width: 0;
}

.participant-shell.participant-shell--auth-layout.participant-shell--registration:not(
    .participant-shell--join-gift,
    .participant-shell--gift-activation
  )
  .registration-identity-section {
  width: 100%;
  max-width: 100%;
}

.otp-resend-hint {
  justify-self: center;
  margin: 0;
  min-height: auto;
  width: auto;
  text-align: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--type-login-small);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-none);
}

.otp-resend-countdown {
  color: var(--form-placeholder-muted-color);
}

.otp-resend-link {
  color: var(--form-quiet-link-color);
}

.otp-resend-link:hover:not(:disabled) {
  background: transparent;
  color: var(--form-quiet-link-hover-color);
  opacity: 1;
}

.group-readiness-section {
  --group-readiness-gap: var(--layout-readiness-gap);
  --group-readiness-actions-offset: var(--layout-readiness-actions-offset);
  --group-readiness-action-inline: var(--readiness-action-inline);
  --group-readiness-action-padding-block: var(--readiness-action-padding-block);
  gap: var(--group-readiness-gap);
  max-width: var(--container-form-narrow-local);
}

.group-readiness-section p {
  color: var(--text);
  font-size: var(--type-body);
  line-height: var(--lh-relaxed);
  text-wrap: balance;
}

.group-readiness-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--group-readiness-actions-offset);
}

.group-readiness-actions button {
  min-width: var(--group-readiness-action-inline);
  min-height: var(--control-sm);
  padding: var(--group-readiness-action-padding-block) var(--space-4);
  border-radius: var(--radius-pill);
  background: transparent;
  border: var(--divider-width) solid var(--hairline);
  color: var(--text-soft);
  font-size: var(--button-font-size);
}

.group-readiness-actions button:hover,
.group-readiness-actions button[data-tone="secondary"]:hover {
  color: var(--text);
  opacity: 1;
}

.status-card p,
.message-card p,
.note-card p {
  color: var(--text-soft);
  font-size: var(--form-card-copy-size);
  line-height: var(--leading-relaxed);
}

.status-card.system-notice p {
  font-size: var(--form-card-meta-size);
  line-height: var(--leading-base);
}

.status-error {
  width: 100%;
  max-width: var(--system-notice-width);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--feedback-error-color);
  font-size: var(--status-error-text-size);
  font-weight: 400;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-none);
  text-align: center;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.status-error-dev-code {
  margin-top: var(--space-1);
  color: var(--feedback-error-color);
  font-size: var(--status-error-text-size);
}

.system-notice[data-tone="error"],
.status-card.system-notice[data-tone="error"],
.status-card[data-tone="error"] {
  padding: 0;
  border: 0;
  background: transparent;
  gap: var(--space-1);
}

.login-code-feedback.status-error {
  color: var(--feedback-error-color);
  font-size: var(--status-error-text-size);
  font-weight: 400;
}

.activation-card p {
  font-size: var(--form-card-copy-size);
  color: var(--text-soft);
  line-height: var(--leading-relaxed);
}
.activation-card strong,
.message-card strong {
  color: var(--text);
  font-weight: 500;
}

.dev-code {
  color: var(--accent);
  font-size: var(--form-card-meta-size);
}

.form-hint {
  color: var(--text-muted);
  font-size: var(--form-hint-size);
  line-height: var(--leading-snug);
  text-align: start;
}

.form-hint code {
  color: var(--text);
  font-family: inherit;
}

/* В одной form-panel секции идут единым потоком — тонкая линия делит шаги */
.form-panel .form-section + .form-section {
  margin-top: var(--space-2);
  padding-top: var(--space-5);
  border-top: var(--divider-width) solid var(--hairline);
}

/* ==========================================================================
   Forms — hairline поля, без обводок и плашек
   ========================================================================== */

form {
  display: grid;
  gap: var(--space-4);
  width: 100%;
}

label,
fieldset {
  display: grid;
  gap: var(--space-1);
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  color: var(--text-muted);
  font-size: var(--form-legend-size);
  letter-spacing: var(--tracking-label-wide);
  text-transform: uppercase;
  font-weight: 500;
  padding: 0;
  margin-bottom: var(--space-1);
}

label > span:first-child {
  color: var(--text-muted);
  font-size: var(--form-label-size);
  letter-spacing: var(--tracking-body);
  padding: 0;
}

input:not([type="checkbox"]):not([type="radio"]),
textarea {
  width: 100%;
  padding: var(--field-padding-block) 0;
  min-height: var(--field-min-height);
  background: transparent;
  border: 0;
  border-bottom: var(--divider-width) solid var(--hairline);
  border-radius: 0;
  color: var(--text);
  font-size: var(--form-field-size);
  transition: border-color var(--dur) var(--ease);
}

input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill,
input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:hover,
input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:focus,
input:not([type="checkbox"]):not([type="radio"]):-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
input:not([type="checkbox"]):not([type="radio"]):autofill,
textarea:autofill {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text);
  filter: none;
  transition:
    background-color 999999s ease-out,
    border-color var(--dur) var(--ease);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus {
  outline: none;
  border-bottom-color: var(--hairline-strong);
}

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

textarea {
  min-height: var(--field-textarea-min-height, clamp(6rem, calc(var(--fluid-block) * 12), 6.5rem));
  resize: vertical;
  line-height: var(--lh-base);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-faint);
}

/* option grid — невидимый radio, текст с акцентом на выбранном */
.option-grid,
.profile-grid {
  display: grid;
  gap: var(--space-3);
  width: 100%;
  justify-items: center;
  text-align: center;
}

.option-card {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.option-card input {
  position: absolute;
  width: var(--visually-hidden-size);
  height: var(--visually-hidden-size);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.option-title {
  font-weight: 700;
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-ui-tight);
  line-height: var(--lh-tight);
  color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}

.option-meta {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--text-faint);
  transition: color var(--dur) var(--ease);
}

.option-card:hover .option-title {
  color: var(--text-muted);
}
.option-card:hover .option-meta {
  color: var(--text-muted);
}

.option-card:has(input:focus-visible) .option-title {
  color: var(--text);
}
.option-card:has(input:focus-visible) .option-meta {
  color: var(--text-soft);
}

.option-card:has(input:checked) .option-title {
  color: var(--text);
}
.option-card:has(input:checked) .option-meta {
  color: var(--text-soft);
}

.form-section.offer-section {
  max-width: min(46rem, 100%);
  gap: 0;
  container-type: inline-size;
  container-name: adaptive-surface;
}

.renewal-payment-error-slot {
  display: grid;
  align-items: end;
  justify-items: center;
  min-height: var(--status-error-slot-min-height);
  margin-bottom: var(--status-error-slot-offset);
}

.renewal-payment-error-slot[data-visible="false"] {
  display: none;
}

.offer-form {
  gap: 0;
  --offer-actions-margin-top: 0;
  --offer-control-panel-border-color: rgba(255, 255, 255, 0.34);
  --offer-control-panel-divider-color: rgba(255, 255, 255, 0.26);
  --offer-control-panel-selected-bg: rgb(255, 247, 231);
  --offer-control-panel-selected-text: rgba(0, 0, 0, 0.86);
  --offer-control-panel-action-text: rgba(255, 255, 255, 0.72);
  --offer-control-panel-action-text-hover: var(--text);
  --offer-control-panel-muted-text: rgba(255, 255, 255, 0.68);
}

.offer-control-panel {
  --button-transition: none;
  display: grid;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: var(--divider-width) solid var(--offer-control-panel-border-color);
  border-radius: var(--offer-control-radius, var(--radius-offer-control));
  background: transparent;
  isolation: isolate;
}

.offer-control-panel__selector {
  display: grid;
  gap: 0;
  width: 100%;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.offer-control-panel__selector > legend {
  display: none;
}

.offer-control-panel__options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: transparent;
}

.offer-control-panel__option {
  width: 100%;
  min-width: 0;
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  border-radius: 0;
  border: 0;
  font-size: var(--button-font-size);
  font-weight: 500;
  color: var(--offer-control-panel-muted-text);
  transition: none;
}

.offer-control-panel__option + .offer-control-panel__option {
  border-left: 0;
}

.offer-control-panel__option + .offer-control-panel__option::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: var(--divider-width);
  background: var(--offer-control-panel-divider-color);
  transform: translateX(var(--divider-offset));
  pointer-events: none;
}

.offer-control-panel__option[aria-pressed="true"] {
  background: var(--offer-control-panel-selected-bg);
  color: var(--offer-control-panel-selected-text);
  font-weight: 600;
}

.offer-control-panel .offer-switch-tab:hover:not([aria-pressed="true"]),
.offer-control-panel .offer-switch-tab:active:not(:disabled) {
  background: transparent;
  transform: none;
}

.offer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  width: 100%;
  margin-top: var(--offer-actions-margin-top, var(--button-group-gap));
  overflow: hidden;
  border: 0;
  border-top: var(--divider-width) solid var(--offer-control-panel-divider-color);
  border-radius: 0;
  background: transparent;
}

.offer-actions::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 3;
  width: var(--divider-width);
  background: var(--offer-control-panel-divider-color);
  transform: translateX(var(--divider-offset));
  pointer-events: none;
}

.offer-details-button,
.offer-pay-button {
  width: 100%;
  min-width: 0;
  min-height: var(--button-min-height);
  padding: var(--button-padding-block) var(--button-padding-inline);
  color: var(--offer-control-panel-action-text);
  font-size: var(--button-font-size);
  font-weight: 600;
  transition: none;
}

.offer-details-button {
  border-right: 0;
  cursor: default;
}

.offer-pay-button {
  width: 100%;
  border-radius: 0;
  background: transparent;
  color: var(--offer-control-panel-action-text);
}

.offer-pay-button:hover:not(:disabled) {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
  color: var(--offer-control-panel-action-text-hover);
}

.offer-pay-button:active:not(:disabled) {
  transform: none;
  background: rgba(255, 255, 255, 0.18);
}

.offer-access-summary {
  max-width: 28rem;
  margin: var(--offer-summary-offset, var(--layout-offer-summary-offset)) auto 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--offer-access-summary-size);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-none);
  text-align: center;
}

.offer-access-summary span {
  display: block;
  white-space: nowrap;
}

/* ==========================================================================
   Panel notice — вместо тяжёлого status-card внутри профиля и форм
   ========================================================================== */

.panel-notice {
  margin: 0 auto;
  color: var(--text-soft);
  font-size: var(--panel-notice-size);
  line-height: var(--leading-base);
}

.panel-notice strong {
  color: var(--text);
  font-size: var(--panel-notice-emphasis-size);
  font-weight: 500;
  letter-spacing: var(--tracking-none);
}

/* ==========================================================================
   Goal form — чекбоксы как чистые поводки без плашек
   ========================================================================== */

.goal-form {
  gap: var(--space-5);
}

.goal-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 0;
  padding: 0;
  margin: 0;
}

.goal-presets > legend {
  position: absolute;
  width: var(--visually-hidden-size);
  height: var(--visually-hidden-size);
  padding: 0;
  margin: var(--visually-hidden-offset);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.goal-option {
  --goal-option-padding-block: var(--layout-chip-padding-block);
  --goal-option-padding-inline: var(--layout-chip-padding-inline);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-sm);
  padding: var(--goal-option-padding-block) var(--goal-option-padding-inline);
  border: var(--divider-width) solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.goal-option input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
}

.goal-option-label {
  pointer-events: none;
  color: var(--text-soft);
  font-size: var(--goal-option-label-size);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-none);
  transition: color var(--dur) var(--ease);
}

.goal-option:hover {
  border-color: var(--text-soft);
}

.goal-option:active {
  transform: none;
}

.goal-option:has(input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--accent);
  outline-offset: var(--focus-ring-offset);
}

.goal-option:has(input:checked) {
  background: var(--accent);
  border-color: var(--accent);
}

.goal-option:hover .goal-option-label {
  color: var(--text);
}
.goal-option:has(input:checked) .goal-option-label {
  color: var(--accent-ink);
  font-weight: 500;
}

.goal-custom {
  display: grid;
  gap: var(--space-2);
}

.goal-custom > span {
  color: var(--text-muted);
  font-size: var(--goal-custom-label-size);
  font-weight: 500;
  letter-spacing: var(--tracking-label-wide);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  padding: 0;
}

.goal-form button[type="submit"] {
  justify-self: stretch;
}

.participant-shell--goal-composition .goal-form {
  --goal-gap: var(--layout-goal-gap);
  --goal-row-gap: var(--goal-gap);
  --goal-chip-min-height: var(--goal-chip-min-height-base);
  --goal-chip-padding-block: var(--goal-chip-padding-block-base);
  --goal-chip-padding-inline: var(--goal-chip-padding-inline-base);
  --goal-chip-font-size: var(--goal-chip-font-size-base);
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  gap: 0;
  pointer-events: none;
}

.participant-shell--goal-composition .goal-presets {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.participant-shell--goal-composition .goal-cloud {
  position: absolute;
  inset: clamp(0.65rem, calc(var(--fluid-block) * 1.8), 1.45rem)
    clamp(0.55rem, calc(var(--fluid-inline) * 1.9), 2.2rem);
  display: block;
  overflow: visible;
  pointer-events: none;
}

.participant-shell--goal-composition .goal-cloud-item {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  width: max-content;
  transform: translate3d(var(--goal-item-x, 0), var(--goal-item-y, 0), 0)
    scale(var(--goal-item-scale, 1));
  transform-origin: top left;
  transition: transform 560ms cubic-bezier(0.18, 1.18, 0.22, 1);
  pointer-events: auto;
}

.participant-shell--goal-composition .goal-cloud:not([data-layout-ready="true"]) .goal-cloud-item {
  visibility: hidden;
}

.participant-shell--goal-composition .goal-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: var(--goal-chip-min-height);
  max-width: none;
  padding: var(--goal-chip-padding-block) var(--goal-chip-padding-inline);
  border-color: rgba(255, 255, 255, 0.46);
  background: transparent;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
  transition:
    border-color 180ms var(--ease),
    color 180ms var(--ease);
  pointer-events: auto;
}

.participant-shell--goal-composition .goal-option-label {
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--goal-chip-font-size);
  font-weight: 450;
  text-align: center;
  white-space: nowrap;
}

.participant-shell--goal-composition .goal-option:hover {
  border-color: rgba(255, 255, 255, 0.78);
}

.participant-shell--goal-composition .goal-option:has(input:checked) {
  border-color: var(--goal-accent);
  background: transparent;
}

.participant-shell--goal-composition .goal-option:has(input:checked) .goal-option-label {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 450;
}

.participant-shell--goal-composition .goal-option:active {
  transform: none;
}

.participant-shell--goal-composition .goal-option:focus-visible {
  outline: var(--focus-ring-width) solid var(--goal-accent);
  outline-offset: var(--focus-ring-offset);
}

.participant-shell--details-picker .details-topic-capsule {
  min-width: clamp(10.5rem, calc(var(--fluid-min) * 21), 16rem);
  text-decoration: none;
}

.participant-shell--goal-composition .goal-option.goal-center-capsule {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
  border: var(--divider-width) solid var(--goal-accent);
  border-color: var(--goal-accent);
  background: var(--goal-accent);
  color: var(--text-strong);
  transform: none;
  transform-origin: center;
  box-shadow: none;
  cursor: default;
  opacity: 1;
  transition:
    background-color 180ms var(--ease),
    border-color 180ms var(--ease),
    opacity 180ms var(--ease);
  pointer-events: auto;
}

.participant-shell--goal-composition .goal-option.goal-center-capsule .goal-option-label {
  color: var(--text-strong);
  font-size: var(--goal-chip-font-size);
  font-weight: 450;
}

.participant-shell--goal-composition
  .goal-form[data-ready="true"]
  .goal-option.goal-center-capsule {
  transform: none;
  cursor: pointer;
}

.participant-shell--goal-composition
  .goal-option.goal-center-capsule:hover:not([aria-disabled="true"]):not(:disabled) {
  border-color: var(--goal-accent);
  background: var(--goal-accent);
  color: var(--text-strong);
  opacity: 1;
}

.participant-shell--goal-composition
  .goal-option.goal-center-capsule:hover:not([aria-disabled="true"]):not(:disabled)
  .goal-option-label {
  color: var(--text-strong);
}

.participant-shell--goal-composition .goal-option.goal-center-capsule:active:not(:disabled) {
  transform: none;
  border-color: var(--goal-accent);
  background: var(--goal-accent);
  color: var(--text-strong);
  opacity: 1;
}

.participant-shell--goal-composition.participant-shell--registration
  .form-panel--goal-composition
  .panel-scroll {
  width: 100%;
  justify-self: stretch;
  align-self: stretch;
}

.participant-shell--goal-composition.participant-shell--registration .registration-goal-section {
  width: 100%;
  max-width: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* широкий экран — split 50/50, обе колонки во всю высоту */
@media (min-width: 64rem) {
  .participant-shell--watch {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: var(--viewport-small-height);
    overflow: hidden;
  }

  .participant-shell--watch .lesson-stage,
  .participant-shell--watch .watch-panel {
    position: absolute;
    top: 0;
    width: 50%;
    min-width: 50%;
    max-width: 50%;
    height: var(--viewport-small-height);
    min-height: var(--viewport-small-height);
  }

  .participant-shell--watch .lesson-stage {
    left: 0;
  }

  .participant-shell--watch .watch-panel {
    left: 50%;
  }

  .participant-shell--watch .video-frame iframe {
    width: 100%;
    height: 100%;
    max-width: none;
  }

  .participant-shell,
  .stack-shell {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .participant-shell.participant-shell--note-focus {
    grid-template-columns: 1fr;
  }

  .panel,
  .form-panel,
  .watch-panel,
  .simple-stage,
  .payment-card {
    min-height: var(--viewport-small-height);
  }

  .split-stage,
  .lesson-stage {
    min-height: var(--viewport-small-height);
  }

  .participant-shell--window > .panel {
    --adaptive-base-gap: clamp(0.42rem, var(--adaptive-fluid), 0.92rem);
  }

  .participant-shell--window > .panel .panel-summary {
    font-size: var(--adaptive-copy-size);
  }

  .participant-shell--window .stage-phrase {
    font-size: var(--type-stage-phrase-emphasis);
  }

  .participant-shell--registration .registration-section {
    margin-inline: auto;
  }

  .page-join .legal-notice {
    left: 75%;
    transform: translateX(-50%);
  }

  .page-join:has(.participant-shell--auth-layout.participant-shell--registration) .legal-notice {
    left: 50%;
  }

  .profile-grid {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  }
}

/* узкий экран — вертикальный stack, видео сверху через общий block token */
@media (max-width: 63.999rem) {
  :root {
    --viewport-height: var(--viewport-stable-height);
    --anchor-offset: clamp(1.25rem, calc(var(--fluid-block) * 7), 3.25rem);
    --stage-gutter: clamp(1rem, calc(var(--fluid-inline) * 5), 1.75rem);
  }

  .participant-shell,
  .stack-shell {
    grid-template-columns: 1fr;
  }

  .panel,
  .form-panel,
  .watch-panel {
    min-height: auto;
  }

  .split-stage,
  .lesson-stage {
    min-height: var(--layout-block-split-stage-compact);
  }

  .participant-shell--note-focus {
    grid-template-columns: 1fr;
  }

  .participant-shell--watch {
    display: grid;
    grid-template-columns: 1fr;
    width: auto;
    max-width: none;
    min-height: var(--viewport-small-height);
    overflow: visible;
  }

  .participant-shell--watch .lesson-stage,
  .participant-shell--watch .watch-panel {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    height: auto;
  }

  .participant-shell--watch .watch-panel {
    min-height: var(--layout-block-watch-panel-compact);
  }

  .stage-title--compact {
    font-size: var(--type-title-small);
  }

  .profile-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* tablet — вертикальная композиция, но сцена крупнее для баланса */
@media (min-width: 46rem) and (max-width: 63.999rem) {
  .split-stage,
  .lesson-stage {
    min-height: var(--layout-block-stage-tablet);
  }

  .panel,
  .form-panel,
  .watch-panel {
    padding-block: var(--layout-panel-padding-block);
  }

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

/* narrow split: media takes the remaining height; content defines the bottom panel */
@media (max-width: 63.999rem) {
  :is(
    .participant-shell--window,
    .participant-shell--registration:not(.participant-shell--goal-composition),
    .participant-shell--gift-activation:not(.participant-shell--goal-composition),
    .participant-shell--info
  ),
  .participant-shell--watch {
    grid-template-rows: minmax(0, 1fr) auto;
    height: var(--viewport-height);
    min-height: var(--viewport-height);
    max-height: var(--viewport-height);
    overflow: hidden;
  }

  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-stage,
  .participant-shell--watch > .lesson-stage {
    min-height: 0;
    height: 100%;
    max-height: none;
  }

  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel,
  .participant-shell--watch > .watch-panel {
    --adaptive-fluid: var(--adaptive-narrow-fluid);
    --adaptive-base-gap: var(--layout-base-gap);
    --adaptive-action-gap: calc(var(--adaptive-base-gap) * 4);
    --adaptive-copy-size: var(--type-panel-copy-narrow);
    --adaptive-detail-size: var(--type-panel-detail-narrow);
    --adaptive-button-font-size: var(--type-control-narrow);
    --adaptive-button-padding-block: clamp(0.36rem, calc(var(--adaptive-base-gap) * 0.85), 0.52rem);
    --adaptive-button-padding-inline: clamp(0.72rem, calc(var(--adaptive-base-gap) * 2.45), 1rem);
    --adaptive-button-max-block-size: 2.35rem;
    --adaptive-control-max-size: 2.45rem;
    --adaptive-icon-max-size: 0.95rem;
    --split-base-gap: var(--adaptive-base-gap);
    --split-media-gap: calc(var(--split-base-gap) * 4);
    --split-content-actions-gap: calc(var(--split-base-gap) * 4);
    --split-detail-actions-gap: var(--split-content-actions-gap);
    --split-back-zone: calc(var(--adaptive-control-size) + var(--split-base-gap) * 4);
    container-type: inline-size;
  }

  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel:not(:has(> .split-panel__motion)),
  .participant-shell--watch > .watch-panel {
    height: auto;
    min-height: 0;
    max-height: var(--viewport-height);
    grid-template-rows: var(--split-media-gap) auto var(--split-media-gap);
    padding-block: 0;
    overflow: hidden;
  }

  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    .split-content-stack,
  :is(
      .participant-shell--window,
      .participant-shell--registration:not(.participant-shell--goal-composition),
      .participant-shell--gift-activation:not(.participant-shell--goal-composition),
      .participant-shell--info
    )
    > .split-screen-panel
    > .panel-footer,
  .participant-shell--watch .watch-panel .panel-scroll,
  .participant-shell--watch .watch-panel .panel-footer {
    --adaptive-fluid: inherit;
    --adaptive-base-gap: inherit;
    --adaptive-action-gap: inherit;
    --adaptive-content-width: inherit;
    --adaptive-copy-size: inherit;
    --adaptive-detail-size: inherit;
    --adaptive-button-font-size: inherit;
    --adaptive-button-padding-block: inherit;
    --adaptive-button-padding-inline: inherit;
    --adaptive-button-min-height: inherit;
    --adaptive-button-radius: inherit;
    --adaptive-control-size: inherit;
    --adaptive-icon-size: inherit;
    --split-base-gap: inherit;
    --split-media-gap: inherit;
    --split-content-actions-gap: inherit;
    --split-detail-actions-gap: inherit;
    --split-back-zone: inherit;
  }

  .participant-shell--window > .panel .panel-main-stack {
    grid-template-rows: auto var(--split-detail-actions-gap) auto;
  }

  .participant-shell--window > .panel .panel-summary-stack {
    gap: calc(var(--split-base-gap) * 0.55);
  }

  .participant-shell--watch .watch-panel .panel-scroll {
    gap: var(--split-content-actions-gap);
  }

  .participant-shell--watch .panel-copy,
  .participant-shell--watch .lesson-description,
  .participant-shell--watch .lesson-description p {
    width: 100%;
    max-width: 38ch;
  }

  .participant-shell--watch .lesson-description {
    gap: var(--split-base-gap);
  }
}

/* мобильный профиль — строки в один столбец, действия под значением */
@media (max-width: 46rem) {
  .profile-panel {
    --profile-main-gap: var(--layout-profile-main-gap-phone);
    --profile-section-gap: var(--layout-profile-section-gap-phone);
    --profile-cluster-gap: var(--layout-profile-cluster-gap-phone);
    --profile-chip-min-height: var(--chip-min-height-compact);
    --profile-chip-padding-block: var(--chip-padding-block-compact);
    --profile-chip-padding-inline: var(--chip-padding-inline-dense);
  }

  .participant-shell--window > .panel .panel-copy {
    width: min(22rem, calc(100% - var(--shell-gutter) * 2));
    margin-inline: auto;
  }

  .participant-shell--window > .panel .panel-summary {
    width: 100%;
    text-wrap: balance;
  }

  .participant-shell--profile .profile-panel-scroll {
    padding-block: 0;
  }

  .profile-screen-main {
    width: 100%;
  }

  .profile-goals-stage {
    gap: var(--profile-section-gap);
  }

  .profile-goals-heading h1,
  .profile-settings-heading {
    font-size: var(--type-small);
  }

  .profile-goals-tags {
    width: var(--profile-tags-phone-inline);
  }

  .profile-goal-tag {
    min-height: var(--profile-chip-min-height);
    padding: var(--profile-chip-padding-block) var(--profile-chip-padding-inline);
    font-size: var(--profile-chip-font-size);
  }

  .profile-actions-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    width: var(--profile-actions-compact-inline);
  }

  .profile-actions-area.profile-actions-area--centered {
    grid-template-columns: minmax(0, 1fr);
    width: var(--profile-actions-compact-inline);
    min-height: var(--centered-actions-min-block-compact);
  }

  .profile-actions-area .profile-row--email,
  .profile-actions-area [data-profile-access-row] {
    flex-basis: 100%;
  }

  .profile-actions-area .profile-action-button--access {
    max-width: var(--profile-actions-compact-inline);
  }

  .profile-action-button {
    min-height: var(--profile-chip-min-height);
    padding: var(--profile-chip-padding-block) var(--profile-chip-padding-inline);
    font-size: var(--profile-chip-font-size);
  }

  .participant-shell--goal-composition .goal-form {
    --goal-gap: var(--layout-goal-gap-compact);
    --goal-row-gap: var(--goal-gap);
    --goal-chip-min-height: calc(
      var(--goal-chip-min-height-compact) * var(--goal-chip-mobile-scale)
    );
    --goal-chip-padding-block: calc(
      var(--goal-chip-padding-block-compact) * var(--goal-chip-mobile-scale)
    );
    --goal-chip-padding-inline: calc(
      var(--goal-chip-padding-inline-compact) * var(--goal-chip-mobile-scale)
    );
    --goal-chip-font-size: calc(var(--type-fine) * var(--goal-chip-mobile-scale));
  }

  .participant-shell--goal-composition .goal-cloud {
    inset: var(--layout-goal-cloud-inset-block-compact)
      var(--layout-goal-cloud-inset-inline-compact);
  }

  @media (max-aspect-ratio: 12 / 22) {
    .participant-shell--goal-composition .goal-form {
      --goal-chip-min-height: calc(
        var(--goal-chip-min-height-base) * var(--goal-chip-mobile-scale)
      );
      --goal-chip-padding-block: calc(
        var(--goal-chip-padding-block-base) * var(--goal-chip-mobile-scale)
      );
      --goal-chip-padding-inline: calc(
        var(--goal-chip-padding-inline-base) * var(--goal-chip-mobile-scale)
      );
      --goal-gap: var(--layout-goal-gap-compact);
      --goal-row-gap: clamp(0.12rem, calc(var(--fluid-block) * 0.42), 0.22rem);
    }

    .participant-shell--goal-composition .goal-cloud {
      inset-block: clamp(0.32rem, calc(var(--fluid-block) * 0.75), 0.58rem);
      inset-inline: clamp(0.34rem, calc(var(--fluid-inline) * 0.95), 0.62rem);
    }
  }

  .participant-shell--goal-composition .goal-option {
    max-width: none;
  }

  .participant-shell--goal-composition .goal-option-label {
    line-height: var(--leading-tight);
  }

  .participant-shell--goal-composition .goal-center-capsule {
    max-width: none;
  }
}

@media (max-width: 34rem) {
  .profile-panel {
    --profile-stack-divider-gap: clamp(5.4rem, calc(var(--fluid-block) * 11), 7.25rem);
    --profile-stack-divider-inline: min(20rem, calc(100% - var(--shell-gutter) * 3.5));
  }
}

@media (max-width: 40rem) {
  .profile-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "label"
      "value"
      "actions";
    row-gap: var(--space-2);
  }

  .profile-row-actions {
    justify-self: start;
    align-self: start;
  }

  .profile-row--single {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "value actions";
    row-gap: 0;
  }

  .profile-row--single .profile-row-actions {
    justify-self: end;
    align-self: center;
  }
}

@media (min-width: 64rem) {
  .profile-screen-main {
    grid-template-columns: minmax(0, 1fr) var(--divider-width) minmax(0, 1fr);
    grid-template-rows: auto;
    justify-items: stretch;
    column-gap: var(--layout-profile-split-column-gap);
    align-items: start;
    width: var(--profile-split-inline);
  }

  .profile-screen-main::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    width: var(--divider-width);
    min-height: var(--layout-profile-split-divider-min-block);
    background: linear-gradient(
      180deg,
      transparent,
      rgba(255, 255, 255, 0.24) 18%,
      rgba(255, 255, 255, 0.24) 82%,
      transparent
    );
  }

  .profile-goals-stage {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    width: var(--profile-fallback-inline);
  }

  .profile-settings-section {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    width: var(--profile-settings-compact-inline);
  }

  .profile-screen-main--centered {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: var(--profile-split-centered-inline);
  }

  .profile-screen-main--centered::before {
    content: none;
  }

  .profile-screen-main--centered .profile-settings-section {
    grid-column: 1;
    grid-row: 1;
    width: var(--profile-settings-compact-inline);
  }

  .profile-screen-main--centered .profile-actions-area--centered {
    display: grid;
    width: var(--profile-actions-centered-inline);
  }

  .profile-goals-tags {
    width: var(--profile-tags-split-inline);
  }

  .profile-goals-tags[data-goal-density="many"] {
    width: var(--profile-tags-split-many-inline);
  }

  .profile-actions-area {
    display: flex;
    width: var(--profile-actions-compact-inline);
  }

  .profile-screen-stack:has(.profile-goals-tags[data-goal-density="many"]) .profile-goals-tags {
    width: var(--profile-fallback-inline);
  }
}

/* совсем узкие экраны — убираем боковой отступ почти полностью */
@media (max-width: 30rem) {
  :root {
    --shell-gutter: var(--layout-shell-gutter-compact);
    --stage-gutter: var(--layout-stage-gutter-compact);
    --back-zone-height: var(--layout-back-zone-compact);
  }

  .participant-shell--window > .panel {
    --adaptive-fluid: var(--adaptive-phone-fluid);
    --adaptive-base-gap: var(--adaptive-phone-base-gap);
    --adaptive-action-gap: calc(var(--adaptive-base-gap) * 4);
    --adaptive-copy-size: var(--type-panel-copy-phone);
    --adaptive-detail-size: var(--type-panel-detail-phone);
    --adaptive-button-font-size: var(--type-control-phone);
    --adaptive-button-padding-block: var(--adaptive-phone-button-padding-block);
    --adaptive-button-padding-inline: var(--adaptive-phone-button-padding-inline);
    --adaptive-button-min-block-size: var(--adaptive-compact-button-min-block-size);
    --adaptive-button-max-block-size: var(--adaptive-phone-button-max-block-size);
    --adaptive-control-min-size: var(--interactive-min-size);
    --adaptive-control-max-size: var(--adaptive-phone-control-max-size);
    --adaptive-icon-min-size: var(--adaptive-compact-icon-min-size);
    --adaptive-icon-max-size: var(--adaptive-phone-icon-max-size);
  }

  .participant-shell--window > .panel .panel-copy {
    width: 100%;
  }

  .participant-shell--window > .panel .panel-summary-stack {
    gap: var(--split-base-gap);
  }

  .participant-shell--window > .panel .panel-summary {
    font-size: var(--adaptive-copy-size);
    line-height: calc(1em + var(--adaptive-base-gap));
  }

  .participant-shell--window > .panel .panel-more-link {
    font-size: var(--adaptive-detail-size);
    line-height: var(--leading-control);
  }

  .participant-shell--window .panel-footer-actions {
    gap: var(--button-group-gap);
  }

  .participant-shell--window .panel-footer-actions .action {
    min-height: var(--button-min-height);
    padding-inline: var(--button-padding-inline);
    font-size: var(--button-font-size);
  }

  .panel-scroll {
    gap: var(--space-4);
  }

  .participant-shell--watch .lesson-tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: min(100%, 38ch);
  }

  .participant-shell--watch .lesson-tab {
    width: var(--button-width);
  }

  .offer-control-panel__option {
    min-height: var(--button-min-height);
    padding-inline: var(--button-padding-inline);
    font-size: var(--button-font-size);
    font-weight: 500;
  }

  .offer-details-button,
  .offer-pay-button {
    min-height: var(--button-min-height);
    padding-inline: var(--button-padding-inline);
    font-size: var(--button-font-size);
    font-weight: 600;
  }

  .status-card,
  .activation-card {
    padding: var(--system-notice-padding-block) var(--system-notice-padding-inline);
  }
}

@media (max-width: 40rem), (max-width: 63.999rem) and (max-height: 42rem) {
  .plus-sheet--details .plus-sheet-copy {
    gap: clamp(0.7rem, var(--layout-block-plus-sheet-gap-compact), 1rem);
  }

  .plus-sheet--details .plus-sheet-copy .panel-summary {
    font-size: var(--type-panel-copy-compact);
    line-height: var(--leading-comfort);
    font-weight: 500;
  }

  .participant-shell--join-gift.participant-shell--gift-offer {
    --gift-certificate-caption-size: var(--type-gift-certificate-caption-compact);
  }

  .participant-shell--group-offer .group-offer-center {
    --group-offer-panel-scale: 1.21;
    --group-offer-copy-size: var(--group-offer-copy-size-compact);
    --group-offer-heading-size: var(--group-offer-heading-size-compact);
    --group-offer-section-gap: calc(var(--offer-base-gap) * 2);

    top: auto;
    width: min(22rem, var(--container-stage-safe-inline));
    max-height: none;
    overflow: visible;
  }

  .group-offer-copy h1 {
    margin-bottom: var(--offer-faq-heading-gap-compact);
    font-size: var(--group-offer-heading-size);
    line-height: var(--leading-control);
  }

  .group-offer-copy .group-offer-inline-title {
    margin-bottom: 0;
    font-size: var(--group-offer-heading-size);
    line-height: var(--leading-caption);
  }

  .group-offer-copy p,
  .group-offer-copy:not(.group-offer-copy--faq) p:not(.group-offer-practice-label) {
    font-size: var(--group-offer-copy-size);
    line-height: var(--group-offer-copy-leading);
  }

  .group-offer-copy > p + p {
    margin-top: var(--offer-base-gap);
  }

  .group-offer-copy .group-offer-practice-label {
    margin-top: var(--group-offer-section-gap);
  }
}

@media (max-width: 22.5rem) {
  :root {
    --shell-gutter: var(--layout-shell-gutter-min);
    --stage-gutter: var(--layout-stage-gutter-min);
    --back-control-size: var(--layout-back-control-min);
    --back-arrow-size: var(--layout-back-arrow-min);
    --back-zone-height: var(--layout-back-zone-min);
  }

  .participant-shell--offer .form-panel .panel-scroll {
    padding-block: var(--offer-panel-scroll-padding-block-compact);
  }

  .participant-shell--solo-offer .form-panel .panel-scroll,
  .participant-shell--group-offer .form-panel .panel-scroll,
  .participant-shell--gift-offer .form-panel .panel-scroll {
    padding-block: 0;
  }

  .offer-control-panel__option {
    padding-inline: var(--button-padding-inline);
  }

  .offer-details-button,
  .offer-pay-button {
    padding-inline: var(--button-padding-inline);
    font-size: var(--button-font-size);
  }

  .offer-access-summary {
    font-size: var(--fs-xxs);
  }
}

/* ноутбуки 1280+ — мягко расширяем копию под просторную композицию */
@media (min-width: 80rem) {
  :root {
    --copy-width: min(36rem, 100%);
    --copy-wide: min(46rem, 100%);
  }
}

/* 2K+ мониторы — шире копии и выше потолок типографики */
@media (min-width: 112rem) {
  :root {
    --copy-width: min(40rem, 100%);
    --copy-wide: min(52rem, 100%);

    --fs-sm: var(--type-small);
    --fs-md: var(--type-body);
    --fs-lg: var(--type-body-large);
    --fs-xl: var(--type-title-medium);
    --fs-2xl: var(--type-title-large);
    --fs-3xl: var(--type-display-large);
  }

  .stage-title--compact {
    font-size: var(--type-title-large);
  }
}

/* очень широкие панорамные — стабильный потолок, без гонки за размером */
@media (min-width: 140rem) {
  :root {
    --copy-width: min(44rem, 100%);
    --copy-wide: min(56rem, 100%);
  }
}

/* landscape-телефоны с низкой высотой — прижимаем анкоры и уменьшаем шрифт stage */
@media (max-height: 32rem) and (orientation: landscape) {
  :root {
    --anchor-offset: var(--space-4);
    --back-control-size: var(--layout-back-control-landscape);
    --back-arrow-size: var(--layout-back-arrow-landscape);
    --back-zone-height: var(--layout-back-zone-landscape);
  }

  .participant-shell--join-choice .choice-panel {
    gap: var(--layout-choice-panel-gap-landscape);
  }

  .participant-shell--join-choice .choice-heading {
    font-size: var(--type-title-small);
    line-height: var(--leading-display-snug);
  }

  .participant-shell--join-choice .choice-card {
    min-height: var(--choice-card-min-height-landscape);
    padding-block: var(--layout-choice-card-padding-block-landscape);
  }

  .participant-shell--join-choice .choice-title {
    font-size: var(--choice-title-landscape-fluid-size);
  }

  .participant-shell--join-choice .choice-subtitle {
    font-size: var(--type-fine);
  }

  .participant-shell--window {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: var(--viewport-height);
    min-height: var(--viewport-height);
    max-height: var(--viewport-height);
    overflow: hidden;
  }

  .participant-shell--window > .split-stage,
  .participant-shell--window > .panel {
    width: auto;
    min-width: 0;
    max-width: none;
    height: var(--viewport-height);
    min-height: var(--viewport-height);
    max-height: var(--viewport-height);
  }

  .participant-shell--window > .panel {
    --adaptive-base-gap: var(--adaptive-landscape-base-gap);
    --adaptive-action-gap: calc(var(--adaptive-base-gap) * 4);
    --adaptive-copy-size: var(--adaptive-landscape-copy-size);
    --adaptive-detail-size: var(--adaptive-landscape-detail-size);
    --adaptive-button-font-size: var(--adaptive-landscape-control-size);
    --adaptive-button-padding-block: var(--adaptive-landscape-button-padding-block);
    --adaptive-button-padding-inline: var(--adaptive-landscape-button-padding-inline);
    --adaptive-button-min-block-size: var(--adaptive-landscape-button-min-block-size);
    --adaptive-button-max-block-size: var(--adaptive-landscape-button-max-block-size);
    --adaptive-button-font-multiplier: 1.08;
    --adaptive-control-min-size: var(--interactive-min-size);
    --adaptive-control-max-size: var(--adaptive-landscape-control-max-size);
    grid-template-rows: minmax(0, 1fr) auto minmax(var(--adaptive-control-size), 1fr);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  .participant-shell--window > .panel::-webkit-scrollbar {
    display: none;
  }

  .participant-shell--window > .panel .panel-copy {
    width: var(--container-form-compact-local);
  }

  .participant-shell--window > .panel .panel-summary-stack {
    gap: calc(var(--adaptive-base-gap) * 0.55);
  }

  .participant-shell--window > .panel .panel-summary {
    width: var(--measure-summary);
    font-size: var(--adaptive-copy-size);
    line-height: calc(1em + var(--adaptive-base-gap));
  }

  .participant-shell--window > .panel .panel-more-link {
    font-size: var(--adaptive-detail-size);
    line-height: var(--leading-control);
  }

  .participant-shell--window > .panel .panel-footer-actions {
    gap: var(--button-group-gap);
  }

  .participant-shell--window .panel-footer-actions .action {
    min-height: var(--button-min-height);
    padding-block: var(--button-padding-block);
    padding-inline: var(--button-padding-inline);
    font-size: var(--button-font-size);
    line-height: var(--leading-control);
  }

  .participant-shell--window .stage-rotator {
    min-height: var(--stage-rotator-min-height-compact);
  }

  .participant-shell--window .stage-phrase {
    font-size: var(--type-title-medium);
    line-height: var(--leading-display);
  }

  .participant-shell--window .stage-bottom-anchor,
  .participant-shell--window .stage-number {
    font-size: var(--stage-edge-caption-size, var(--type-stage-anchor));
  }

  .participant-shell--window .stage-number {
    font-weight: 900;
    -webkit-text-stroke: 0.045em currentColor;
    paint-order: stroke fill;
  }

  .participant-shell--plus .plus-sheet {
    --adaptive-base-gap: clamp(0.32rem, var(--adaptive-fluid), 0.55rem);
    --adaptive-copy-size: var(--type-panel-copy-landscape);
    --adaptive-control-min-size: var(--interactive-min-size);
    --adaptive-control-max-size: 2rem;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    overflow: hidden;
  }

  .participant-shell--plus .plus-sheet-copy {
    grid-row: 2;
    align-self: center;
    justify-self: center;
    width: var(--plus-sheet-copy-width);
    max-height: min(var(--layout-block-plus-sheet-copy-landscape), 10rem);
    gap: var(--adaptive-base-gap);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .participant-shell--plus .plus-sheet-copy::-webkit-scrollbar {
    display: none;
  }

  .participant-shell--plus .plus-sheet-copy .panel-summary {
    font-size: var(--adaptive-copy-size);
    line-height: calc(1em + var(--adaptive-base-gap) * 0.75);
  }

  .participant-shell--plus .plus-sheet-footer {
    grid-row: 3;
    height: auto;
    min-height: 0;
  }

  .participant-shell--plus.participant-shell--legacy-course .legacy-course-sheet-copy {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .participant-shell--login .form-panel,
  .participant-shell--goal-composition .form-panel--goal-composition {
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
  }

  .participant-shell--login .form-panel::-webkit-scrollbar,
  .participant-shell--goal-composition .form-panel--goal-composition::-webkit-scrollbar {
    display: none;
  }

  .participant-shell--solo-offer,
  .participant-shell--group-offer,
  .participant-shell--gift-offer {
    --offer-landscape-copy-size: var(--type-offer-landscape-copy);
    --offer-base-gap: var(--layout-base-gap);
    --solo-offer-control-height: max(
      var(--interactive-min-size),
      clamp(1.56rem, calc(var(--fluid-block) * 11), 2rem)
    );
    --solo-offer-text-size: var(--type-solo-offer-landscape-copy);
    --solo-offer-title-size: var(--type-solo-offer-landscape-title);
    --gift-offer-panel-height: calc(var(--solo-offer-control-height) * 2 + var(--divider-width));
  }

  .participant-shell--offer:not(:has(.stage-overlay--group-faq))
    .stage-overlay
    > .solo-offer-top-copy,
  .participant-shell--offer:not(:has(.stage-overlay--group-faq))
    .stage-overlay
    > .group-offer-top-copy,
  .participant-shell--offer:not(:has(.stage-overlay--group-faq)) .gift-recipient-notice {
    width: min(26rem, var(--container-stage-safe-inline));
    line-height: var(--leading-control);
  }

  .participant-shell--offer:not(:has(.stage-overlay--group-faq))
    .stage-overlay
    > .solo-offer-top-copy {
    font-size: calc(var(--offer-landscape-copy-size) * 0.9);
  }

  .participant-shell--offer:not(:has(.stage-overlay--group-faq))
    .stage-overlay
    > .group-offer-top-copy,
  .participant-shell--offer:not(:has(.stage-overlay--group-faq)) .gift-recipient-notice {
    font-size: var(--offer-landscape-copy-size);
  }

  .participant-shell--solo-offer .stage-static-title {
    font-size: var(--solo-offer-title-size);
    line-height: var(--leading-tight);
  }

  .participant-shell--gift-offer .gift-greeting-panel-hint.status-error {
    bottom: calc(var(--offer-bottom-reserve) + var(--offer-base-gap));
  }

  .stage-rotator {
    min-height: var(--stage-rotator-min-height-compact);
  }
}

@media (max-width: 63.999rem) {
  .participant-shell--watch .lesson-tabs {
    width: 100%;
    max-width: min(100%, 38ch);
  }
}

@media (max-width: 30rem) {
  .participant-shell--watch .lesson-description p {
    font-size: calc(var(--accordion-body-size, var(--type-small)) * 0.75);
  }

  .participant-shell--watch .lesson-tabs {
    --button-group-gap: calc(var(--layout-base-gap) * 0.75);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: min(100%, 38ch);
    margin-inline: auto;
  }

  .participant-shell--watch .lesson-tab {
    width: 100%;
    min-width: 0;
    min-height: calc(var(--button-min-height) * 0.75);
    padding: calc(var(--button-padding-block) * 0.75) calc(var(--button-padding-inline) * 0.75);
    font-size: calc(var(--type-control) * 0.75);
  }
}

.page-watch-panel-focus .participant-shell--watch {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: var(--viewport-height);
  overflow: hidden;
}

.page-watch-panel-focus .participant-shell--watch .lesson-stage {
  display: none;
}

.page-watch-panel-focus .participant-shell--watch .watch-panel {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  height: var(--viewport-height);
  min-height: var(--viewport-height);
  max-height: var(--viewport-height);
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
}

.page-watch-panel-focus .participant-shell--watch .watch-series-title {
  display: none;
}

/* Viewport stability for mobile in-app browsers. Dynamic viewport units may
   update while browser chrome appears or disappears; these full-screen routes
   keep shell geometry on stable viewport units and lock scrollable sheets to
   their own containers. */
html:has(.participant-shell--plus),
body:has(.participant-shell--plus) {
  height: var(--viewport-height);
  overflow: hidden;
  overscroll-behavior: none;
}

:is(
  .participant-shell--login,
  .participant-shell--join-choice,
  .participant-shell--registration,
  .participant-shell--gift-activation,
  .participant-shell--goal-composition,
  .participant-shell--solo-offer,
  .participant-shell--group-offer,
  .participant-shell--gift-offer,
  .participant-shell--group-readiness,
  .participant-shell--profile,
  .note-focus-stage,
  .group-payment-success-shell,
  .messages-shell,
  .payment-card
) {
  min-height: var(--viewport-height);
}

:is(.messages-shell) {
  height: var(--viewport-height);
}

:is(.payment-provider-waiting) {
  min-height: var(--viewport-height);
}

:is(.payment-provider-frame) {
  height: var(--viewport-height);
}

:is(
    .participant-shell--login,
    .participant-shell--join-choice,
    .participant-shell--registration,
    .participant-shell--gift-activation,
    .participant-shell--goal-composition,
    .participant-shell--group-readiness,
    .participant-shell--profile
  )
  :is(.split-stage, .form-panel, .form-panel--registration, .form-panel--goal-composition),
.participant-shell--profile .profile-panel {
  min-height: var(--viewport-height);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .text-shimmer,
  .rules-consent-form .form-hint,
  .rules-consent-section button[type="submit"] {
    animation: none !important;
    background: none;
    color: var(--text);
    -webkit-text-fill-color: currentColor;
  }

  .text-shimmer-wave-char {
    animation: none !important;
    color: var(--text-shimmer-wave-base);
    opacity: 1;
    text-shadow: none;
    transform: none;
  }

  .spokes {
    animation: none !important;
  }
}

/* ==========================================================================
   React route styles
   ========================================================================== */

#root {
  --app-safe-area-zero: 0px;
  --app-radius-pill: var(--radius-pill, 999px);
  --app-hairline-border: var(--hairline, rgba(255, 255, 255, 0.24));
  --app-muted-border: rgba(255, 255, 255, 0.16);
  --app-soft-border: rgba(255, 255, 255, 0.12);
  --app-dialog-border: rgba(255, 255, 255, 0.2);
  --app-active-border: var(--hairline-strong, rgba(255, 255, 255, 0.34));
  --app-text: var(--text, #fff);
  --app-text-soft: var(--text-soft, rgba(255, 255, 255, 0.78));
  --app-text-muted: var(--text-muted, rgba(255, 255, 255, 0.58));
  --app-text-faint: rgba(255, 255, 255, 0.54);
  --app-control-color: rgba(255, 255, 255, 0.72);
  --app-control-color-hover: rgba(255, 255, 255, 0.96);
  --app-control-color-strong: rgba(255, 255, 255, 0.94);
  --app-action-bg: rgba(255, 255, 255, 0.035);
  --app-action-bg-soft: rgba(255, 255, 255, 0.05);
  --app-action-bg-hover: rgba(255, 255, 255, 0.12);
  --app-action-bg-active: rgba(255, 255, 255, 0.1);
  --app-field-bg: rgba(255, 255, 255, 0.055);
  --app-result-action-bg: rgba(0, 0, 0, 0.08);
  --app-selected-border: rgba(76, 154, 255, 0.48);
  --app-target-outline-color: rgba(255, 255, 255, 0.42);
  --app-dialog-bg: rgba(5, 5, 6, 0.94);
  --app-dialog-shadow: var(--shadow-dialog, 0 1rem 3rem rgba(0, 0, 0, 0.32));
  --app-danger-color: #ff453a;
  --app-divider-width: var(--divider-width, var(--line-width-hair, 1px));
  --app-visually-hidden-size: var(--visually-hidden-size, var(--app-divider-width));
  --app-visually-hidden-offset: var(
    --visually-hidden-offset,
    calc(var(--app-visually-hidden-size) * -1)
  );
  --app-focus-outline-width: var(--focus-ring-width, 2px);
  --app-focus-outline-offset: var(--focus-ring-offset-loose, 4px);
  --app-press-shift: var(--press-shift, 1px);
  --app-press-scale: 0.97;
  --app-press-scale-subtle: 0.96;
  --app-transition-fast: 160ms var(--ease, ease);
  --app-transition-base: 180ms var(--ease, ease);
  --app-icon-size: var(--control-icon-size, var(--adaptive-icon-size, 1.125rem));
  --app-dialog-safe-gap: var(--dialog-safe-gap, var(--space-3, 0.8rem));
  --app-overlay-inset-block-start: max(
    var(--safe-area-top, var(--app-safe-area-zero)),
    var(--app-dialog-safe-gap)
  );
  --app-overlay-inset-inline-end: max(
    var(--safe-area-right, var(--app-safe-area-zero)),
    var(--app-dialog-safe-gap)
  );
  --app-overlay-inset-block-end: max(
    var(--safe-area-bottom, var(--app-safe-area-zero)),
    var(--app-dialog-safe-gap)
  );
  --app-overlay-inset-inline-start: max(
    var(--safe-area-left, var(--app-safe-area-zero)),
    var(--app-dialog-safe-gap)
  );
  --app-overlay-border: var(--app-divider-width) solid var(--app-dialog-border);
  --app-overlay-panel-radius: var(--overlay-panel-radius, var(--radius-md, 0.72rem));
  --app-overlay-fullscreen-radius: var(--overlay-fullscreen-radius, 0);
  --app-overlay-fullscreen-inset: var(--overlay-full-inset, 0);
  --app-overlay-fullscreen-inline: var(--overlay-full-inline, 100%);
  --app-container-safe-inline-fallback: calc(100% - var(--shell-gutter, 1rem) * 2);
  --app-container-space-safe-inline-fallback: calc(100% - var(--space-4, 1.2rem) * 2);
  --app-container-panel-inline: var(--container-panel, min(48rem, 100%));
  --app-container-review-controls-inline: min(30rem, var(--container-cqw, 100%));
  --app-container-review-video-inline: min(58rem, 100%);
  --app-container-dialog-list-inline: min(
    48rem,
    var(--container-safe-inline, var(--app-container-safe-inline-fallback))
  );
  --app-container-feed-post-inline: min(
    38rem,
    var(--container-space-safe-inline, var(--app-container-space-safe-inline-fallback))
  );
  --app-container-feed-post-compact-inline: min(
    100%,
    var(--container-query-safe-inline, var(--app-container-safe-inline-fallback))
  );
  --app-container-feed-edit-inline: min(28rem, 100%);
  --app-container-feed-dialog-inline: min(
    42rem,
    var(--container-space-safe-inline, var(--app-container-space-safe-inline-fallback))
  );
  --app-control-inline: var(--container-cqi-control, 38%);
  --app-control-inline-compact: var(--container-cqi-compact, 32%);
  --app-button-min-height: var(--button-min-height, var(--adaptive-button-min-height));
  --app-button-compact-min-height: var(
    --interactive-target-size-compact,
    var(--button-compact-min-height, var(--app-button-min-height))
  );
  --app-button-compact-padding-inline: var(
    --button-compact-padding-inline,
    calc(var(--adaptive-button-padding-inline) * 0.82)
  );
  --app-icon-button-hit-size: var(
    --interactive-icon-hit-size-compact,
    var(--control-sm, var(--app-button-compact-min-height))
  );
  --app-route-min-height: var(--viewport-height, 100vh);
  --app-safe-padding-block: max(
      var(--safe-area-top, var(--app-safe-area-zero)),
      var(--shell-gutter)
    )
    max(var(--safe-area-bottom, var(--app-safe-area-zero)), var(--shell-gutter));
  --app-safe-padding-inline: var(
      --panel-safe-gutter-start,
      var(--safe-shell-gutter-start, var(--shell-gutter))
    )
    var(--panel-safe-gutter-end, var(--safe-shell-gutter-end, var(--shell-gutter)));
  --app-surface-gap: var(--adaptive-base-gap);
  --app-result-gap: calc(var(--adaptive-base-gap) * 1.75);
  --app-review-gap: calc(var(--adaptive-base-gap) * 2);
  --app-review-controls-inline: var(
    --container-review-controls,
    var(--app-container-review-controls-inline)
  );
  --app-review-video-inline: var(
    --container-review-video,
    var(--app-container-review-video-inline)
  );
  --app-video-max-block: min(calc(var(--fluid-block, 1vh) * 72), 34rem);
  --app-dialog-list-inline: var(--container-dialog-list, var(--app-container-dialog-list-inline));
  --app-feed-post-inline: var(--container-feed-post, var(--app-container-feed-post-inline));
  --app-feed-post-inline-compact: var(
    --container-feed-post-compact,
    var(--app-container-feed-post-compact-inline)
  );
  --app-deadline-pill-inline: var(--container-deadline-pill, min(15rem, var(--app-control-inline)));
  --app-deadline-pill-inline-compact: var(
    --container-deadline-pill-compact,
    min(100%, var(--app-control-inline-compact))
  );
  min-height: var(--app-route-min-height);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.site-content-loading {
  position: relative;
  min-height: var(--app-route-min-height);
  background: transparent;
  overflow: hidden;
}

.site-content-boot-stage {
  position: fixed;
  inset: 0;
  z-index: -6;
  pointer-events: none;
}

.stage-route-fallback {
  position: fixed;
  inset: 0;
  z-index: -6;
  pointer-events: none;
  background: transparent;
}

.site-content-required {
  min-height: var(--app-route-min-height);
  container-type: inline-size;
  container-name: adaptive-surface;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--app-surface-gap);
  padding-block: var(--app-safe-padding-block);
  padding-inline: var(--app-safe-padding-inline);
  background: var(--page, #050506);
  color: var(--text, #f7f1e8);
  text-align: center;
}

.site-content-required p,
.site-content-required span {
  margin: 0;
}

.site-content-required p {
  font-size: var(--adaptive-copy-size, var(--type-panel-copy));
  line-height: var(--lh-base);
}

.site-content-required span {
  color: var(--app-text-soft);
  font-size: var(--adaptive-detail-size, var(--type-panel-detail));
  line-height: var(--lh-base);
}

.sr-only {
  position: absolute;
  width: var(--app-visually-hidden-size);
  height: var(--app-visually-hidden-size);
  padding: 0;
  margin: var(--app-visually-hidden-offset);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.google-icon {
  display: block;
  flex: 0 0 auto;
  width: var(--google-icon-size, var(--app-icon-size));
  height: var(--google-icon-size, var(--app-icon-size));
}

.gift-issued-shell {
  --gift-issued-gap: var(--app-result-gap);
  --gift-issued-instruction-gap: calc(var(--adaptive-base-gap) * 0.25);
  --gift-issued-status-min-height: calc(var(--adaptive-detail-size, 16px) * 1.5);
  min-height: var(--app-route-min-height);
  position: relative;
  z-index: var(--z-overlay);
  container-type: inline-size;
  container-name: adaptive-surface;
  display: grid;
  place-items: center;
  padding-block: var(--app-safe-padding-block);
  padding-inline: var(--app-safe-padding-inline);
  text-align: center;
  background: transparent;
  color: var(--app-text);
}

.gift-issued-content {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: var(--gift-issued-gap);
  width: var(--adaptive-content-width);
}

.gift-issued-shell p {
  max-width: var(--copy-wide, 44rem);
  margin: 0;
  color: var(--app-text-soft);
  font-size: var(--adaptive-detail-size, var(--type-panel-detail));
  line-height: var(--lh-base);
}

.gift-issued-deadline {
  margin: 0;
  color: var(--app-text-soft);
  font-size: var(--adaptive-copy-size, var(--type-panel-copy));
  line-height: var(--lh-base);
}

.gift-issued-copy {
  min-height: var(--button-min-height, var(--adaptive-button-min-height));
  padding: var(--button-padding-block, var(--adaptive-button-padding-block))
    var(--button-padding-inline, var(--adaptive-button-padding-inline));
  border: var(--app-divider-width) solid currentColor;
  border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
  background: var(--app-result-action-bg);
  color: inherit;
  font: inherit;
  font-size: var(--button-font-size, var(--adaptive-button-font-size));
  line-height: var(--button-line-height, var(--leading-solid));
  letter-spacing: var(--tracking-none);
  cursor: pointer;
  transition:
    background-color var(--app-transition-fast),
    transform var(--app-transition-fast);
}

.gift-issued-copy:hover {
  background: var(--app-action-bg-hover);
}

.gift-issued-copy:active {
  transform: translateY(var(--app-press-shift));
}

.gift-issued-copy:focus-visible {
  outline: var(--app-focus-outline-width) solid currentColor;
  outline-offset: var(--app-focus-outline-offset);
}

.gift-issued-instruction {
  display: grid;
  gap: var(--gift-issued-instruction-gap);
  max-width: var(--adaptive-content-width);
}

.gift-issued-instruction span {
  display: block;
}

.gift-issued-copy-status {
  min-height: var(--gift-issued-status-min-height);
  color: var(--app-text);
}

.gift-issued-copy-status[data-state="copied"] {
  color: var(--app-danger-color);
}

.new-lesson-badge {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--adaptive-detail-size, 12px) * 1.8);
  margin-left: var(--space-2);
  padding: calc(var(--adaptive-base-gap) * 0.25) var(--space-2);
  border: var(--app-divider-width) solid currentColor;
  border-radius: var(--app-radius-pill);
  font-size: var(--type-panel-meta);
  line-height: var(--leading-solid);
  text-transform: uppercase;
  vertical-align: middle;
}

.review-gate-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--button-group-gap, var(--adaptive-base-gap));
  width: var(--app-review-controls-inline);
  margin-inline: auto;
}

.review-gate-deadline {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-min-height, var(--adaptive-button-min-height));
  padding: var(--button-padding-block, var(--adaptive-button-padding-block))
    var(--button-padding-inline, var(--adaptive-button-padding-inline));
  border: var(--app-divider-width) solid var(--app-hairline-border);
  border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
  color: var(--app-text-soft);
  font-size: var(--button-font-size, var(--adaptive-button-font-size));
  line-height: var(--button-line-height, var(--leading-solid));
  white-space: nowrap;
  background: var(--app-action-bg-active);
}

.review-gate-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-min-height, var(--adaptive-button-min-height));
  padding: var(--button-padding-block, var(--adaptive-button-padding-block))
    var(--button-padding-inline, var(--adaptive-button-padding-inline));
  border: var(--app-divider-width) solid currentColor;
  border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
  color: inherit;
  font-size: var(--button-font-size, var(--adaptive-button-font-size));
  line-height: var(--button-line-height, var(--leading-solid));
  text-decoration: none;
  transition:
    background-color var(--app-transition-base),
    color var(--app-transition-base),
    transform var(--app-transition-base);
}

.review-gate-action:hover {
  background: var(--app-action-bg-hover);
}

.review-gate-action:active {
  transform: scale(var(--app-press-scale));
}

.participant-shell--review-gate-only {
  display: grid;
  place-items: center;
  min-height: var(--app-route-min-height);
}

.review-gate-fullscreen {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: var(--app-review-gap);
  width: 100%;
  min-height: var(--app-route-min-height);
  padding-block: max(var(--safe-area-top, var(--app-safe-area-zero)), var(--space-4))
    max(var(--safe-area-bottom, var(--app-safe-area-zero)), var(--space-4));
  padding-inline: var(--app-safe-padding-inline);
}

.review-gate-video {
  width: var(--app-review-video-inline);
  aspect-ratio: 16 / 9;
  max-height: var(--app-video-max-block);
}

.messages-deadline-pill {
  display: inline-flex;
  align-items: center;
  min-height: var(
    --button-min-height,
    var(--adaptive-button-min-height, var(--control-sm, 2.5rem))
  );
  max-width: var(--app-deadline-pill-inline);
  padding: 0 var(--adaptive-button-padding-inline);
  border: var(--app-divider-width) solid var(--app-hairline-border);
  border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
  color: var(--app-text-soft);
  font-size: var(--adaptive-detail-size, var(--type-panel-detail));
  line-height: var(--leading-solid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.messages-feed-item--target .message {
  outline: var(--app-focus-outline-width) solid var(--app-target-outline-color);
  outline-offset: var(--app-focus-outline-offset);
}

.messages-shell--dialogs,
.messages-shell:has(> .messages-dialog-list) {
  grid-template-rows: 9% minmax(0, 1fr) auto;
}

.messages-dialog-list {
  grid-row: 1;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 var(--shell-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--adaptive-base-gap);
  overflow-x: auto;
  scrollbar-width: none;
}

.messages-dialog-list::-webkit-scrollbar {
  display: none;
}

.messages-dialog-chip {
  min-height: var(--button-min-height, var(--adaptive-button-min-height));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 var(--adaptive-button-padding-inline);
  border: var(--app-divider-width) solid var(--app-muted-border);
  border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
  background: var(--app-action-bg);
  color: var(--app-control-color);
  font-size: var(--button-font-size, var(--adaptive-button-font-size));
  font-weight: 650;
  line-height: var(--leading-solid);
  white-space: nowrap;
  text-wrap: nowrap;
  text-decoration: none;
}

.messages-dialog-chip--active {
  border-color: var(--app-active-border);
  background: var(--app-action-bg-hover);
  color: var(--app-control-color-strong);
}

.telegram-prompt {
  --telegram-prompt-width: min(31rem, var(--container-query-space-safe-inline, calc(100vw - 2rem)));
  --telegram-prompt-gap: calc(var(--adaptive-base-gap) * 1.45);
  --telegram-prompt-panel-padding-block: calc(var(--adaptive-base-gap) * 2.2);
  --telegram-prompt-panel-padding-inline: calc(var(--adaptive-base-gap) * 2.35);
  --telegram-prompt-copy-size: var(--adaptive-detail-size, var(--type-panel-detail));
  --telegram-prompt-action-min-height: var(--app-button-min-height, var(--button-min-height));
  --telegram-prompt-action-padding-inline: var(--adaptive-button-padding-inline);
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay, 20) + 4);
  container-type: inline-size;
  container-name: adaptive-surface;
  display: grid;
  place-items: center;
  padding-block: var(--app-safe-padding-block);
  padding-inline: var(--app-safe-padding-inline);
}

.telegram-prompt--fullscreen {
  --telegram-prompt-width: min(38rem, var(--container-query-space-safe-inline, calc(100vw - 2rem)));
}

.telegram-prompt-panel {
  display: grid;
  justify-items: center;
  gap: var(--telegram-prompt-gap);
  width: var(--telegram-prompt-width);
  max-width: 100%;
  padding: var(--telegram-prompt-panel-padding-block) var(--telegram-prompt-panel-padding-inline);
  border: var(--app-overlay-border);
  border-radius: var(--app-overlay-panel-radius);
  background: rgba(5, 5, 6, 0.88);
  box-shadow: var(--app-dialog-shadow);
  color: var(--app-text);
  text-align: center;
}

.telegram-prompt--fullscreen .telegram-prompt-panel {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.telegram-prompt-copy {
  max-width: min(34rem, 100%);
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--telegram-prompt-copy-size);
  font-weight: 500;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tracking-none);
  text-wrap: balance;
}

.telegram-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--adaptive-base-gap);
  width: 100%;
  max-width: 100%;
}

.telegram-prompt--dialog .telegram-prompt-actions,
.telegram-prompt--dialog .profile-telegram-confirm-actions {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.telegram-prompt--dialog .telegram-prompt-action,
.telegram-prompt--dialog .profile-action-button.telegram-prompt-action {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

.telegram-prompt--dialog .profile-telegram-confirm-actions .profile-action-button {
  width: 100%;
  min-width: 0;
}

.telegram-prompt-action {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--adaptive-base-gap) * 0.65);
  min-height: var(--telegram-prompt-action-min-height);
  flex: 1 1 11rem;
  min-width: 0;
  max-width: 100%;
  padding: var(--button-padding-block) var(--telegram-prompt-action-padding-inline);
  border: var(--app-divider-width) solid rgba(255, 255, 255, 0.42);
  border-radius: var(--adaptive-button-radius, var(--app-radius-pill));
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
  color: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  font: inherit;
  font-size: var(--button-font-size, var(--adaptive-button-font-size));
  font-weight: 650;
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-none);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  text-wrap: balance;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.telegram-prompt-action:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.98);
}

.telegram-prompt-action:active:not(:disabled) {
  transform: scale(var(--app-press-scale, 0.97));
}

.telegram-prompt-action:disabled {
  cursor: wait;
  opacity: 0.58;
}

.telegram-prompt .profile-action-button.telegram-prompt-action {
  width: auto;
  white-space: normal;
  text-wrap: balance;
}

.telegram-prompt--dialog .profile-action-button.telegram-prompt-action {
  width: 100%;
}

@container adaptive-surface (max-width: 26rem) {
  .telegram-prompt:not(.telegram-prompt--dialog) .telegram-prompt-actions,
  .telegram-prompt:not(.telegram-prompt--dialog) .profile-telegram-confirm-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .telegram-prompt:not(.telegram-prompt--dialog) .profile-action-button.telegram-prompt-action,
  .telegram-prompt:not(.telegram-prompt--dialog)
    .profile-telegram-confirm-actions
    .profile-action-button {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }
}

.telegram-prompt-panel .status-error {
  width: 100%;
  max-width: 100%;
}

.telegram-prompt-error {
  display: grid;
  justify-items: center;
  gap: calc(var(--adaptive-base-gap) * 0.45);
  max-width: 100%;
  margin: 0;
  color: rgba(255, 210, 210, 0.9);
  font-size: var(--type-panel-meta);
  line-height: var(--lh-base);
  text-wrap: balance;
}

.telegram-prompt-error strong,
.telegram-prompt-error span {
  display: block;
}