/**
 * Figma dashboard design tokens + layout primitives (reference: Figmadasboard).
 * Inter is applied globally via Next.js --font-inter; --ds-font-sans follows it.
 */

:root {
  --ds-font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif;

  /* —— Canvas & shell —— */
  --ds-canvas: #FFFFFF;
  --ds-surface: #ffffff;
  --ds-ink: #1a1a1a;
  --ds-border-strong: #1a1a1a;
  --ds-shell-border-width: 0px;
  --ds-shell-radius: 0px;
  --ds-shell-max-width: none;
  --ds-shadow-shell: none;
  /** Скругление правого края серого сайдбара (desktop) */
  --ds-sidebar-radius-right: 40px;

  /* —— Sidebar —— */
  --ds-sidebar: #e8e8e8;
  --ds-sidebar-hover: #d8d8d8;
  --ds-sidebar-width: 280px;
  --ds-sidebar-padding: 24px;

  /* —— Canonical control blueprint (Yandex-like reference — shape/color behaviour only, never fonts) —— */
  --cc-radius-nav-item: 16px;
  --cc-radius-control-compact: 14px; /* ordinary 40–48px controls (default) */
  --cc-radius-control: 16px;         /* large 52–56px controls only */
  --cc-radius-surface: 24px;
  --cc-radius-pill: 9999px;
  --cc-text-primary-light: #262633;
  --cc-text-muted-light: #85889E;
  --cc-icon-muted-light: #B3B8CC;
  --cc-control-secondary-bg-light: rgba(180, 184, 204, 0.14);
  --cc-control-secondary-hover-light: rgba(180, 184, 204, 0.2);
  --cc-nav-hover-bg-light: rgba(180, 184, 204, 0.243);
  --cc-surface-interactive-bg-light: rgba(180, 184, 204, 0.14);
  --cc-surface-interactive-hover-light: rgba(180, 184, 204, 0.2);
  --cc-add-tile-border-light: rgba(180, 184, 204, 0.35);
  --cc-add-tile-hover-light: rgba(180, 184, 204, 0.14);
  --cc-action-primary-bg-light: #292933;
  /* Dark CTA lightens on hover (не темнеет) — как у эталонной CTA-кнопки. */
  --cc-action-primary-hover-light: #383843;
  --cc-action-primary-text-light: #FAFAFF;

  /**
   * Нейтральный UI (фильтры, строки списков, навигация расписания, TabsList, variant secondary у Button):
   * не меняется при data-ui-accent — единый нейтральный translucent gray из --cc-* blueprint выше
   * (не путать с --ds-sidebar, который тонируется под акцент).
   */
  --ds-neutral-chrome: var(--cc-surface-interactive-bg-light);
  --ds-neutral-chrome-hover: var(--cc-surface-interactive-hover-light);
  --ds-neutral-row: var(--cc-surface-interactive-bg-light);
  --ds-neutral-row-hover: var(--cc-surface-interactive-hover-light);
  --ds-control-bg: var(--cc-control-secondary-bg-light);
  --ds-control-bg-hover: var(--cc-control-secondary-hover-light);
  --ds-control-bg-active: rgba(180, 184, 204, 0.255);
  --ds-focus-ring: rgb(89 94 106 / 0.34);
  --ds-action-dark: #292933;
  --ds-action-dark-hover: #383843;
  --ds-action-dark-active: #2f2f39;
  --ds-action-light: #FAFAFF;
  --ds-action-light-hover: #ededf2;
  --ds-action-light-active: #e2e2e8;
  --ds-danger-action: #b85a62;
  --ds-danger-action-hover: #9f4d55;
  --ds-danger-action-active: #88424a;
  --ds-danger-soft-bg: #f2dadd;
  --ds-danger-soft-text: #743239;
  --surface-success-subtle: #e8f4d1;
  --surface-danger-subtle: #f7e2e5;
  --text-on-subtle-status: #1a1a1a;
  --ds-surface-success-subtle: var(--surface-success-subtle);
  --ds-surface-danger-subtle: var(--surface-danger-subtle);
  --ds-text-on-subtle-status: var(--text-on-subtle-status);
  --ds-field-bg: #FFFFFF;
  --ds-field-bg-hover: #F5F5F8;
  --ds-field-border: #E7E8EF;
  --ds-field-border-hover: #DFE1EA;
  --ds-field-border-focus: #292933;
  --ds-field-text: #292933;
  --ds-field-placeholder: #8D91A3;
  --ds-field-icon: #8D91A3;
  --ds-field-height: 44px;
  --ds-control-radius-sm: 14px;
  --ds-control-radius-md: 16px;
  --ds-control-radius-lg: 18px;
  --ds-field-radius: var(--ds-control-radius-md);
  --ds-field-border-width: 2px;
  --ds-select-bg: #FFFFFF;
  --ds-select-bg-hover: #F5F5F8;
  --ds-select-bg-open: #FFFFFF;
  --ds-select-border: #E7E8EF;
  --ds-select-border-hover: #DFE1EA;
  --ds-select-border-focus: #292933;
  --ds-select-text: #292933;
  --ds-select-placeholder: #8D91A3;
  --ds-select-icon: #8D91A3;
  --ds-select-menu-bg: #FFFFFF;
  --ds-select-menu-item-hover: #F0F1F4;
  --ds-select-menu-shadow: 0 22px 64px -28px rgb(41 41 51 / 0.42);
  --ds-select-height: 44px;
  --ds-select-radius: var(--ds-control-radius-md);
  --ds-select-menu-radius: 22px;
  --ds-select-item-radius-compact: 10px;
  --ds-select-item-radius: 14px;
  --ds-switch-bg-off: #E5E7EF;
  --ds-switch-bg-off-hover: #DDE0E9;
  --ds-switch-bg-on: #292933;
  --ds-switch-bg-on-hover: #1b1b26;
  --ds-switch-thumb: #FFFFFF;
  --ds-switch-thumb-shadow: 0 2px 7px rgb(41 41 51 / 0.18);

  /* —— Inverse surface (tooltips / snackbars): dark chip on the light theme.
     ChinaChild neutrals, not Material colors and not pure black/white. —— */
  --ds-inverse-surface: #1a1a1a;
  --ds-inverse-on-surface: #FAFAFF;

  /* —— Plain tooltip (Material-3 plain-tooltip geometry only; Inter + ChinaChild inverse tokens) —— */
  --cc-tooltip-bg: var(--ds-inverse-surface);
  --cc-tooltip-fg: var(--ds-inverse-on-surface);
  --cc-tooltip-radius: 4px;
  --cc-tooltip-padding-x: 8px;
  --cc-tooltip-padding-y: 4px;
  --cc-tooltip-min-height: 24px;
  --cc-tooltip-max-width: 200px;
  --cc-tooltip-font-size: 12px;
  --cc-tooltip-line-height: 16px;
  --ds-z-tooltip: 1000;

  /* —— Switch (Material-3 geometry, ChinaChild colors). The pill track + circular thumb
     are an intentional semantic exception — never apply button/Square radius here.
     Sized at 1.5x smaller than stock Material-3 (owner-requested, 2026-08-16). —— */
  --cc-switch-track-width: 35px;
  --cc-switch-track-height: 21px;
  --cc-switch-track-radius: 9999px;
  --cc-switch-thumb-on-size: 16px;
  --cc-switch-thumb-off-size: 11px;
  --cc-switch-thumb-radius: 9999px;
  --cc-switch-track-on-bg: var(--ds-switch-bg-on);
  --cc-switch-track-off-bg: var(--ds-switch-bg-off);
  --cc-switch-track-off-border: #C3C7D4;
  --cc-switch-thumb-on-bg: var(--ds-switch-thumb);
  --cc-switch-thumb-off-bg: #8D91A3;
  /* Grammar vocabulary chips — always neutral gray, never accent/sage */
  --ds-grammar-vocab-pill-bg: var(--ds-neutral-row);
  --ds-grammar-vocab-pill-bg-hover: var(--ds-neutral-row-hover);
  /** Метрики прогресса (+ / −): не зависят от data-ui-accent / data-progress-accent */
  --progress-trend-up-strong: #6d9838;
  --progress-trend-up-soft: #dff0c4;
  --progress-trend-up-surface: #f3f8ec;
  --progress-trend-up-secondary: #90a97a;
  --progress-trend-up-ink: #5a7f2f;
  --progress-trend-up-badge-bg: #dff0c4;
  --progress-trend-up-badge-text: #5a7f2f;
  --progress-trend-up-chart: #6d9838;
  --progress-trend-up-area: #dff0c4;
  --progress-trend-down-strong: #b85c32;
  --progress-trend-down-soft: #f5d4c8;
  --progress-trend-down-surface: #fdeee8;
  --progress-trend-down-label: #a64b2a;
  --progress-trend-down-ink: #8f3f24;
  --progress-trend-down-badge-bg: #f5d4c8;
  --progress-trend-down-badge-text: #a64b2a;
  --progress-trend-down-chart: #b85c32;
  --progress-trend-down-area: #f5d4c8;
  /** Lesson analytics dashboard — one unified neutral surface + one purple viz accent.
      Charts always live in the purple family; +/− semantics stay on the trend badges above. */
  --dash-surface: #F4F5F7;
  --dash-surface-hover: #EEF0F4;
  --dash-inner: #FFFFFF;
  --dash-line: #9385F0;
  --dash-line-strong: #6C5CE7;
  --dash-fill-from: rgb(147 133 240 / 0.30);
  --dash-fill-to: rgb(147 133 240 / 0.02);
  --dash-dot: #8E7DF0;
  --dash-track: #DBDDE6;
  --dash-track-soft: #E7E9F0;
  --dash-marker: #1A1A20;
  --dash-marker-ring: #FFFFFF;
  --dash-grid: rgb(20 22 40 / 0.06);
  --dash-step-done: #C9C2F7;
  /* Уровень речи — two-block level comparison (current gray vs next purple).
     Gradient reads light/near-transparent at the bottom → gently stronger toward the top,
     with a crisp accent cap. Same component in two colour states. */
  --dash-block-gray-top: rgb(96 102 124 / 0.24);
  --dash-block-gray-bottom: rgb(96 102 124 / 0.02);
  --dash-block-gray-cap: rgb(96 102 124 / 0.42);
  --dash-block-purple-top: rgb(124 108 231 / 0.42);
  --dash-block-purple-bottom: rgb(124 108 231 / 0.03);
  --dash-block-purple-cap: #6C5CE7;
  --dash-pill-bg: #ECEAFB;
  --dash-pill-text: #5B4BD4;
  /** Skill map (student progress «карта навыков») — layered radar. Semantic viz tokens,
      independent of data-ui-accent. Layers: baseline (старт) → previous → latest → level. */
  --skill-baseline: #FFC83D;
  --skill-previous: #8F7AC8;
  --skill-latest: #7EAE8A;
  --skill-level: #86D0EC;
  --skill-grid: rgb(17 20 40 / 0.06);
  --skill-spoke: #FFFFFF;
  --ds-group-card-bg: #f5f5f5;
  --ds-group-card-bg-dark: #2a2a2a;

  /* Grammar article surfaces (tinted from --ds-sage / user accent) */
  --ds-grammar-hero-bg: color-mix(in srgb, var(--ds-sage) 72%, #ffffff);
  --ds-grammar-scheme-bg: color-mix(in srgb, var(--ds-sage) 32%, #ffffff);
  --ds-grammar-scheme-pill-bg: color-mix(in srgb, #ffffff 90%, var(--ds-sage));
  --ds-grammar-example-bg: color-mix(in srgb, var(--ds-neutral-row) 82%, var(--ds-sage));
  --ds-grammar-related-bg: color-mix(in srgb, var(--ds-sage) 58%, #ffffff);
  --ds-grammar-related-bg-hover: color-mix(in srgb, var(--ds-sage) 72%, #ffffff);
  --ds-grammar-callout-bg: #ebe4f7;
  --ds-grammar-callout-accent: #6f5b9a;
  --ds-grammar-topic-chip-bg: color-mix(in srgb, var(--ds-sage) 68%, #ffffff);

  /* —— Text hierarchy (exact Figma greys) —— */
  --ds-text-primary: #1a1a1a;
  --ds-text-secondary: #666666;
  --ds-text-muted: #555555;
  --ds-text-tertiary: #888888;
  --ds-text-quaternary: #444444;
  --ds-text-soft: #aaaaaa;
  --ds-text-soft-dark: #777777;
  --ds-text-placeholder: #aaaaaa;
  --ds-chevron: #cccccc;

  /* —— Surfaces & accents —— */
  --ds-surface-muted: var(--cc-surface-interactive-bg-light);
  /**
   * Лавандовая подложка баннера раздела — плоский цвет, без градиента.
   * Снят с hero на pay.yandex.ru/business/partners (там ровно rgb(239, 237, 247),
   * градиентных слоёв внутри секции нет). Владелец выбрал этот тон как эталон.
   */
  --ds-hero-lilac: #efedf7;
  /**
   * Пастельные тона уровней HSK. Значения сняты в браузере с живых страниц
   * bank.yandex.ru и pay.yandex.ru (03.09.2026), а не подобраны на глаз —
   * --ds-hero-lilac это тот же #efedf7 из этого семейства. Тон уровня выбирается
   * по доминирующему цвету его 3D-иллюстрации (см. lib/vocabulary/level-illustrations.ts).
   */
  --ds-hsk-tone-lilac: var(--ds-hero-lilac);
  --ds-hsk-tone-periwinkle: #eaedf9;
  --ds-hsk-tone-sky: #e3f3fa;
  --ds-hsk-tone-mint: #e1fae7;
  --ds-hsk-tone-blush: #fae9f6;
  --ds-hsk-tone-sun: #fcf1c5;

  /*
   * Тона баннера списка слов. Не новое семейство: каждый выведен из уже утверждённой
   * плашки цвета списка (userListColorStyles) — тот же тон, поднятый до L=0.945, то есть
   * ровно «на полтона светлее». Заливка плоская, без градиента, как у --ds-hero-lilac и
   * тонов HSK: градиент в этом семействе дизайн-системой отклонён. Контраст с --ds-ink
   * у всех ≥ 14.8:1. Нейтральный цвет своего тона не имеет и берёт обычную панель.
   */
  --ds-list-tone-neutral: var(--ds-surface-muted);
  --ds-list-tone-sage: #f3f8e9;
  --ds-list-tone-sand: #f7f3eb;
  --ds-list-tone-peach: #fbf0e7;
  --ds-list-tone-blue: #eaf2f8;
  --ds-list-tone-lilac: #f1ebf7;
  --ds-list-tone-mint: #ebf7f1;
  --ds-list-tone-rose: #f8eaed;
  --ds-list-tone-coral: #faece8;
  --ds-list-tone-sky: #e6f4fc;
  --ds-list-tone-lime: #f6fae8;
  --ds-list-tone-plum: #f1ecf6;
  --ds-surface-pill: var(--cc-surface-interactive-bg-light);
  --ds-surface-hover: var(--cc-surface-interactive-hover-light);
  --ds-sage: #d4e7b0;
  --ds-sage-strong: #8ab84a;
  --ds-sage-hover: #6d9838;
  --ds-pink: #f4c4c4;
  --ds-pink-strong: #c06060;
  --ds-gray-tile: #e5e5e5;
  --ds-panel-muted: #ebebeb;
  --ds-icon-on-dark: #777777;
  --ds-stat-muted-on-dark: #aaaaaa;
  --ds-stat-fraction-muted: #888888;
  --ds-stat-fraction-muted-dark: #666666;
  --ds-white-60: rgb(255 255 255 / 0.6);
  --ds-white-60-progress: rgb(255 255 255 / 0.6);

  /* —— Spacing (8px grid) —— */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-7: 28px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-page-padding: 32px;
  --ds-page-bottom-inset: 3rem;
  --ds-gutter: 24px;
  --ds-section-gap: 32px;
  --ds-card-padding-lg: 28px;
  --ds-card-padding-md: 24px;
  --ds-stat-padding: 24px;

  /* —— Action-control padding / icon-gap rhythm (Material "Square" ladder — shape only) —— */
  --cc-control-gap-md: 8px;   /* 52–64px controls */
  --cc-control-gap-lg: 12px;  /* 72–88px action controls */
  --cc-control-gap-xl: 16px;  /* 96px+ action controls */
  --cc-control-padding-md: 16px; /* 52–64px controls */
  --cc-control-padding-lg: 24px; /* 72–88px action controls */
  --cc-control-padding-xl: 28px; /* 96px+ action controls */

  /* —— Radius —— */
  /**
   * Canonical Material-3 "Square" control ladder (shape geometry only — never fonts,
   * colors, shadows or ripple). Ordinary buttons/action-controls pick radius by height:
   *   32–48px → --cc-radius-square-xs (14px)
   *   52–64px → --cc-radius-square-md (16px)
   *   72–88px → --cc-radius-square-lg (20px)
   *   96px+   → --cc-radius-square-xl (28px, hard cap)
   * Passive surfaces/cards → --cc-radius-surface (24px). Full radius is semantic only
   * (avatars, dots, badges, status/count chips, progress rings, decorative circles).
   * The app's ordinary controls are 40–48px tall, so they resolve to Square xs (14px).
   */
  --cc-radius-square-xs: 14px;
  --cc-radius-square-md: 16px;
  --cc-radius-square-lg: 20px;
  --cc-radius-square-xl: 28px;
  --cc-radius-full: 9999px; /* semantic pills/circles only — alias of --cc-radius-pill */

  --ds-radius-micro: 6px;
  --ds-radius-sm: 16px;
  --ds-radius-md: 16px; /* medium rounded rectangle: surfaces, badges, filter/search chrome, calendar */
  /** Ordinary button/action-control radius (32–48px controls) → Material Square xs (14px). */
  --ds-radius-control: var(--cc-radius-square-xs);
  --ds-radius-lg: 24px;
  --ds-radius-xl: 24px;
  --ds-radius-surface: 24px;
  --ds-radius-floating: 24px;
  --ds-radius-pill: 9999px;

  /* —— Typography scale (px, Figma) —— */
  --ds-text-2xs: 10px;
  --ds-text-xs: 11px;
  --ds-text-sm: 12px;
  --ds-text-sm-plus: 13px;
  --ds-text-body-sm: 14px;
  --ds-text-body: 15px;
  --ds-text-body-lg: 16px;
  --ds-text-body-xl: 17px;
  --ds-text-lg: 18px;
  --ds-text-xl: 20px;
  --ds-text-2xl: 24px;
  --ds-text-3xl: 26px;
  --ds-text-4xl: 28px;
  --ds-text-5xl: 30px;
  --ds-text-6xl: 32px;
  --ds-text-7xl: 34px;
  --ds-text-8xl: 36px;
  --ds-text-stat: 50px;

  --ds-font-normal: 400;
  --ds-font-medium: 500;
  --ds-font-semibold: 600;
  --ds-font-bold: 700;

  --ds-leading-none: 1;
  --ds-leading-tight: 1.3;
  --ds-leading-body: 1.5;
  --ds-leading-relaxed: 1.7;

  --ds-tracking-tight: -0.02em;

  /* —— Logo / profile —— */
  --ds-logo-size: 28px;
  --ds-profile-avatar: 110px;
  --ds-profile-name-size: 36px;
  --ds-contact-avatar: 56px;
  --ds-lesson-dot: 88px;

  /* —— Layout columns —— */
  --ds-dashboard-aside: 380px;

  /* —— Icons —— */
  --ds-icon-nav: 20px;
  --ds-icon-sm: 18px;
  --ds-icon-md: 22px;
  --ds-icon-chevron: 26px;
  --ds-icon-contact: 24px;

  /* —— shadcn bridge (semantic) —— */
  --font-size: 16px;
  --background: var(--ds-surface);
  --foreground: var(--ds-text-primary);
  --card: var(--ds-surface);
  --card-foreground: var(--ds-text-primary);
  --popover: var(--ds-surface);
  --popover-foreground: var(--ds-text-primary);
  --primary: var(--ds-ink);
  --primary-foreground: #ffffff;
  --secondary: var(--ds-sidebar);
  --secondary-foreground: var(--ds-ink);
  --muted: var(--ds-sidebar);
  --muted-foreground: var(--ds-text-muted);
  --accent: var(--ds-sidebar-hover);
  --accent-foreground: var(--ds-ink);
  --destructive: var(--ds-danger-action);
  --destructive-foreground: #ffffff;
  --border: rgb(0 0 0 / 0.1);
  --input: transparent;
  --input-background: #e8e8e8;
  --switch-background: #cbced4;
  --ring: var(--ds-focus-ring);
  --font-weight-medium: var(--ds-font-medium);
  --font-weight-normal: var(--ds-font-normal);
  --radius: 20px;
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: var(--ds-sidebar);
  --sidebar-foreground: var(--ds-text-primary);
  --sidebar-primary: var(--ds-ink);
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: var(--ds-sidebar-hover);
  --sidebar-accent-foreground: var(--ds-text-primary);
  --sidebar-border: rgb(0 0 0 / 0.08);
  --sidebar-ring: var(--ring);

  /* Legacy base layer aliases (h1–h4 in @layer base) */
  --text-base: var(--ds-text-body-lg);
  --text-lg: var(--ds-text-lg);
  --text-xl: var(--ds-text-xl);
  --text-2xl: var(--ds-text-2xl);
}

@keyframes typingDot {
  0%,
  80%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes dsPreviewCursorDragWord {
  0% { left: 22.73%; top: 12.89%; transform: scale(1); }
  28% { left: 22.73%; top: 12.89%; transform: scale(0.88); }
  66% { left: 44.12%; top: 30.6%; transform: scale(1); }
  100% { left: 22.73%; top: 12.89%; transform: scale(1); }
}

@keyframes dsPreviewCursorSelect {
  0% { left: 12%; top: 8%; transform: scale(1); }
  36% { left: 12%; top: 8%; transform: scale(0.86); }
  66% { left: 12%; top: 8%; transform: scale(1); }
  100% { left: 12%; top: 8%; transform: scale(1); }
}

@keyframes dsPreviewCursorCheckbox {
  0% { left: 42.51%; top: 59.77%; transform: scale(1); }
  35% { left: 42.51%; top: 59.77%; transform: scale(0.84); }
  65% { left: 6.42%; top: 42.58%; transform: scale(1); }
  100% { left: 42.51%; top: 59.77%; transform: scale(1); }
}

@keyframes dsPreviewCursorOrderWord {
  0% { left: 31.28%; top: 13.93%; transform: scale(1); }
  30% { left: 31.28%; top: 13.93%; transform: scale(0.88); }
  68% { left: 52.14%; top: 37.37%; transform: scale(1); }
  100% { left: 31.28%; top: 13.93%; transform: scale(1); }
}

@keyframes dsPreviewCursorMatchWord {
  0% { left: 30%; top: 38%; transform: scale(1); }
  30% { left: 30%; top: 38%; transform: scale(0.9); }
  65% { left: 60%; top: 38%; transform: scale(1); }
  100% { left: 30%; top: 38%; transform: scale(1); }
}

@keyframes dsPreviewCursorAudioTap {
  0% { left: 8%; top: 38%; transform: scale(1); }
  35% { left: 8%; top: 38%; transform: scale(0.86); }
  65% { left: 8%; top: 38%; transform: scale(1); }
  100% { left: 8%; top: 38%; transform: scale(1); }
}

@keyframes dsPreviewCursorClickGeneric {
  0% { left: 34%; top: 38%; transform: scale(1); }
  35% { left: 34%; top: 38%; transform: scale(0.85); }
  65% { left: 34%; top: 38%; transform: scale(1); }
  100% { left: 34%; top: 38%; transform: scale(1); }
}

@keyframes dsPreviewCursorDragGeneric {
  0% { left: 10%; top: 18%; transform: scale(1); }
  30% { left: 10%; top: 18%; transform: scale(0.9); }
  65% { left: 32%; top: 54%; transform: scale(1); }
  100% { left: 10%; top: 18%; transform: scale(1); }
}

@keyframes dsPreviewCursorMatchGeneric {
  0% { left: 18%; top: 42%; transform: scale(1); }
  30% { left: 18%; top: 42%; transform: scale(0.9); }
  65% { left: 50%; top: 42%; transform: scale(1); }
  100% { left: 18%; top: 42%; transform: scale(1); }
}

@keyframes dsPreviewCursorOrderGeneric {
  0% { left: 24%; top: 28%; transform: scale(1); }
  30% { left: 24%; top: 28%; transform: scale(0.9); }
  65% { left: 36%; top: 56%; transform: scale(1); }
  100% { left: 24%; top: 28%; transform: scale(1); }
}

@keyframes dsPreviewCursorImageDrag {
  0% { left: 10%; top: 14%; transform: scale(1); }
  28% { left: 10%; top: 14%; transform: scale(0.88); }
  66% { left: 20%; top: 46%; transform: scale(1); }
  100% { left: 10%; top: 14%; transform: scale(1); }
}

@keyframes dsPreviewCursorImageType {
  0% { left: 20%; top: 58%; transform: scale(1); }
  38% { left: 20%; top: 58%; transform: scale(0.86); }
  70% { left: 20%; top: 58%; transform: scale(1); }
  100% { left: 20%; top: 58%; transform: scale(1); }
}

@keyframes dsPreviewCursorImageForm {
  0% { left: 20%; top: 58%; transform: scale(1); }
  38% { left: 20%; top: 58%; transform: scale(0.86); }
  70% { left: 20%; top: 58%; transform: scale(1); }
  100% { left: 20%; top: 58%; transform: scale(1); }
}

@keyframes dsPreviewCursorAnswerTfu {
  0% { left: 40.11%; top: 59.24%; transform: scale(1); }
  36% { left: 40.11%; top: 59.24%; transform: scale(0.86); }
  68% { left: 15.24%; top: 29.04%; transform: scale(1); }
  100% { left: 40.11%; top: 59.24%; transform: scale(1); }
}

@keyframes dsPreviewCursorOrderColumns {
  0% { left: 16.71%; top: 58.72%; transform: scale(1); }
  30% { left: 16.71%; top: 58.72%; transform: scale(0.9); }
  66% { left: 34.09%; top: 13.41%; transform: scale(1); }
  100% { left: 16.71%; top: 58.72%; transform: scale(1); }
}

@keyframes dsPreviewCursorOrderText {
  0% { left: 40%; top: 26%; transform: scale(1); }
  35% { left: 40%; top: 26%; transform: scale(0.88); }
  68% { left: 18%; top: 26%; transform: scale(1); }
  100% { left: 40%; top: 26%; transform: scale(1); }
}

@keyframes dsPreviewCursorOrderLetters {
  0% { left: 18%; top: 54%; transform: scale(1); }
  30% { left: 18%; top: 54%; transform: scale(0.88); }
  66% { left: 10%; top: 34%; transform: scale(1); }
  100% { left: 18%; top: 54%; transform: scale(1); }
}

@keyframes dsPreviewChipDrag {
  0%, 24% { transform: translate(0, 0); opacity: 1; }
  55%, 76% { transform: translate(38px, 64px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes dsPreviewDropAnswer {
  0%, 48% { opacity: 0; transform: translateY(3px); }
  60%, 84% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(3px); }
}

@keyframes dsPreviewDropPlaceholder {
  0%, 48% { opacity: 1; }
  60%, 84% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes dsPreviewSlotGlow {
  0%, 48% { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
  60%, 84% { box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.55); background: rgb(16 185 129 / 0.16); }
  100% { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); background: rgb(0 0 0 / 0.05); }
}

@keyframes dsPreviewCheckboxTick {
  0%, 44% { background: rgb(255 255 255 / 0.95); border-color: rgb(0 0 0 / 0.25); }
  58%, 84% { background: rgb(16 185 129 / 0.2); border-color: rgb(16 185 129 / 0.55); }
  100% { background: rgb(255 255 255 / 0.95); border-color: rgb(0 0 0 / 0.25); }
}

@keyframes dsPreviewCheckboxMark {
  0%, 48% { opacity: 0; transform: scale(0.6); }
  60%, 84% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.6); }
}

@keyframes dsPreviewSelectMenu {
  0%, 38% { opacity: 0; transform: translateY(-4px); }
  52%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes dsPreviewSelectValue {
  0%, 58% { color: var(--ds-text-secondary); }
  70%, 84% { color: var(--ds-text-primary); }
  100% { color: var(--ds-text-secondary); }
}

@keyframes dsPreviewOrderToken {
  0%, 24% { transform: translate(0, 0); opacity: 1; }
  56%, 80% { transform: translate(0, 66px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes dsPreviewOrderSlot {
  0%, 50% { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
  62%, 84% { box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.55); background: rgb(16 185 129 / 0.16); }
  100% { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); background: rgb(255 255 255 / 0.85); }
}

@keyframes dsPreviewMatchLine {
  0%, 35% { opacity: 0; transform: scaleX(0.15); }
  58%, 84% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(0.15); }
}

@keyframes dsPreviewTargetGlow {
  0%, 38% {
    box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.25);
    background-color: rgb(255 255 255 / 0.85);
  }
  58%, 84% {
    box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.75);
    background-color: rgb(16 185 129 / 0.18);
  }
  100% {
    box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.25);
    background-color: rgb(255 255 255 / 0.85);
  }
}

@keyframes dsPreviewAnswerGlow {
  0%, 42% {
    background-color: rgb(16 185 129 / 0.12);
    transform: translateY(0);
  }
  58%, 84% {
    background-color: rgb(16 185 129 / 0.24);
    transform: translateY(-1px);
  }
  100% {
    background-color: rgb(16 185 129 / 0.12);
    transform: translateY(0);
  }
}

.ds-preview-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 6;
  width: 14px;
  height: 18px;
  pointer-events: none;
  background: #101010;
  clip-path: polygon(0 0, 0 100%, 26% 72%, 43% 100%, 56% 93%, 40% 64%, 84% 64%);
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.8));
}

.ds-preview-cursor--click { animation: dsPreviewCursorClickGeneric 1.8s ease-in-out infinite; }
.ds-preview-cursor--drag { animation: dsPreviewCursorDragGeneric 2.1s ease-in-out infinite; }
.ds-preview-cursor--match { animation: dsPreviewCursorMatchGeneric 2.1s ease-in-out infinite; }
.ds-preview-cursor--order { animation: dsPreviewCursorOrderGeneric 2.1s ease-in-out infinite; }
.ds-preview-cursor--audio { animation: dsPreviewCursorAudioTap 1.7s ease-in-out infinite; }
.ds-preview-cursor--drag-word { animation: dsPreviewCursorDragWord 2.1s ease-in-out infinite; }
.ds-preview-cursor--select { animation: dsPreviewCursorSelect 1.9s ease-in-out infinite; }
.ds-preview-cursor--checkbox { animation: dsPreviewCursorCheckbox 1.8s ease-in-out infinite; }
.ds-preview-cursor--order-word { animation: dsPreviewCursorOrderWord 2.1s ease-in-out infinite; }
.ds-preview-cursor--match-word { animation: dsPreviewCursorMatchWord 2.1s ease-in-out infinite; }
.ds-preview-cursor--image-drag { animation: dsPreviewCursorImageDrag 2.1s ease-in-out infinite; }
.ds-preview-cursor--image-type { animation: dsPreviewCursorImageType 1.9s ease-in-out infinite; }
.ds-preview-cursor--image-form { animation: dsPreviewCursorImageForm 1.9s ease-in-out infinite; }
.ds-preview-cursor--answer-tfu { animation: dsPreviewCursorAnswerTfu 1.8s ease-in-out infinite; }
.ds-preview-cursor--order-columns { animation: dsPreviewCursorOrderColumns 2.1s ease-in-out infinite; }
.ds-preview-cursor--order-text { animation: dsPreviewCursorOrderText 2s ease-in-out infinite; }
.ds-preview-cursor--order-letters { animation: dsPreviewCursorOrderLetters 2s ease-in-out infinite; }

.ds-preview-chip-source { opacity: 0.65; }
.ds-preview-chip-drag { animation: dsPreviewChipDrag 2.1s ease-in-out infinite; }
.ds-preview-drop-slot {
  position: relative;
  display: inline-flex;
  min-width: 56px;
  justify-content: center;
  animation: dsPreviewSlotGlow 2.1s ease-in-out infinite;
}
.ds-preview-drop-placeholder { animation: dsPreviewDropPlaceholder 2.1s ease-in-out infinite; }
.ds-preview-drop-answer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: dsPreviewDropAnswer 2.1s ease-in-out infinite;
}

.ds-preview-choice-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds-preview-checkbox {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgb(0 0 0 / 0.25);
  background: rgb(255 255 255 / 0.95);
}
.ds-preview-choice-row--selected .ds-preview-checkbox { animation: dsPreviewCheckboxTick 1.8s ease-in-out infinite; }
.ds-preview-choice-row--selected .ds-preview-checkbox::after {
  content: "✓";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #16a34a;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  animation: dsPreviewCheckboxMark 1.8s ease-in-out infinite;
}

.ds-preview-select-field {
  position: relative;
  display: inline-flex;
  min-width: 88px;
}
.ds-preview-select-value { animation: dsPreviewSelectValue 1.9s ease-in-out infinite; }
.ds-preview-select-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 5;
  border-radius: 8px;
  background: #fff;
  padding: 4px 8px;
  color: #111;
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.15);
  opacity: 0;
  animation: dsPreviewSelectMenu 1.9s ease-in-out infinite;
}

.ds-preview-order-token { animation: dsPreviewOrderToken 2.1s ease-in-out infinite; }
.ds-preview-order-slot {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
  animation: dsPreviewOrderSlot 2.1s ease-in-out infinite;
}

.ds-preview-image-drop-target,
.ds-preview-image-type-target,
.ds-preview-image-form-target,
.ds-preview-answer-target,
.ds-preview-column-target,
.ds-preview-order-text-target,
.ds-preview-letter-slot {
  box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.45);
}

.ds-preview-image-drop-target,
.ds-preview-image-type-target,
.ds-preview-image-form-target,
.ds-preview-column-target,
.ds-preview-order-text-target,
.ds-preview-letter-slot {
  animation: dsPreviewTargetGlow 2s ease-in-out infinite;
}

.ds-preview-answer-target {
  animation: dsPreviewAnswerGlow 1.9s ease-in-out infinite;
}

.ds-preview-link-line {
  position: absolute;
  left: 126px;
  top: 84px;
  width: 104px;
  height: 2px;
  background: rgb(16 185 129 / 0.75);
  transform-origin: left center;
  opacity: 0;
  animation: dsPreviewMatchLine 2.1s ease-in-out infinite;
}

.dark {
  /* Совпадает с областью контента — без «чёрной рамки» вокруг приложения */
  --background: var(--ds-surface);
  /* Читаемый основной текст на #0a / #14 (~rgb(232,232,232)) */
  --foreground: #e8e8e8;
  --card: var(--ds-surface);
  --card-foreground: oklch(0.985 0 0);
  --popover: var(--ds-surface);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: var(--ds-danger-action);
  --destructive-foreground: #17171c;
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: var(--ds-focus-ring);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);

  /* ChinaChild / Figma dashboard tokens — dark surfaces */
  --ds-canvas: #1F1F24;
  --ds-surface: #26262b;
  --ds-ink: #e8e8e8;
  --ds-border-strong: #e8e8e8;
  --ds-sidebar: #1a1a1a;
  --ds-sidebar-hover: #2f2f2f;
  --ds-text-primary: #e8e8e8;
  --ds-text-secondary: #c6c6c6;
  --ds-text-muted: #b8b8b8;
  --ds-text-tertiary: #a0a0a0;
  --ds-text-quaternary: #d0d0d0;
  --ds-text-soft: #9a9a9a;
  --ds-text-soft-dark: #b0b0b0;
  --ds-text-placeholder: #9ca3af;
  --ds-chevron: #8a8a8a;
  --ds-surface-muted: var(--cc-surface-interactive-bg-dark);
  /* Тёмное зеркало лаванды: тот же приём, что у --ds-grammar-hero-bg — подмешиваем к панели. */
  --ds-hero-lilac: color-mix(in srgb, var(--dash-block-purple-cap) 16%, var(--ds-panel-muted));
  /*
   * Тёмные зеркала тонов уровней — тот же приём, что у --ds-hero-lilac: подмешиваем
   * светлый тон к тёмной панели. Панель стоит ПЕРВЫМ аргументом намеренно: Lightning CSS
   * собирает фолбэк для браузеров без color-mix из первого цвета, и тон обязан вырождаться
   * в нейтральную тёмную поверхность, а не в светлый пастель.
   */
  --ds-hsk-tone-lilac: var(--ds-hero-lilac);
  --ds-hsk-tone-periwinkle: color-mix(in srgb, var(--ds-panel-muted) 78%, #eaedf9);
  --ds-hsk-tone-sky: color-mix(in srgb, var(--ds-panel-muted) 78%, #e3f3fa);
  --ds-hsk-tone-mint: color-mix(in srgb, var(--ds-panel-muted) 78%, #e1fae7);
  --ds-hsk-tone-blush: color-mix(in srgb, var(--ds-panel-muted) 78%, #fae9f6);
  --ds-hsk-tone-sun: color-mix(in srgb, var(--ds-panel-muted) 78%, #fcf1c5);

  /* Тёмные зеркала тонов списка — панель первым аргументом, по той же причине, что выше. */
  --ds-list-tone-neutral: var(--ds-surface-muted);
  --ds-list-tone-sage: color-mix(in srgb, var(--ds-panel-muted) 78%, #f3f8e9);
  --ds-list-tone-sand: color-mix(in srgb, var(--ds-panel-muted) 78%, #f7f3eb);
  --ds-list-tone-peach: color-mix(in srgb, var(--ds-panel-muted) 78%, #fbf0e7);
  --ds-list-tone-blue: color-mix(in srgb, var(--ds-panel-muted) 78%, #eaf2f8);
  --ds-list-tone-lilac: color-mix(in srgb, var(--ds-panel-muted) 78%, #f1ebf7);
  --ds-list-tone-mint: color-mix(in srgb, var(--ds-panel-muted) 78%, #ebf7f1);
  --ds-list-tone-rose: color-mix(in srgb, var(--ds-panel-muted) 78%, #f8eaed);
  --ds-list-tone-coral: color-mix(in srgb, var(--ds-panel-muted) 78%, #faece8);
  --ds-list-tone-sky: color-mix(in srgb, var(--ds-panel-muted) 78%, #e6f4fc);
  --ds-list-tone-lime: color-mix(in srgb, var(--ds-panel-muted) 78%, #f6fae8);
  --ds-list-tone-plum: color-mix(in srgb, var(--ds-panel-muted) 78%, #f1ecf6);
  /* Панели / «инпутные» карточки (как :root #e8e8e8 на светлом) — TeacherCourseBuilder, lesson editor blocks */
  --input-background: var(--ds-surface-muted);
  --ds-surface-pill: var(--cc-surface-interactive-bg-dark);
  --ds-surface-hover: var(--cc-surface-interactive-hover-dark);
  --ds-sage: #3d4d2e;
  --ds-sage-strong: #9bc45c;
  --ds-sage-hover: #b8d97a;
  --ds-pink: #4a3034;
  --ds-pink-strong: #e57373;
  --ds-gray-tile: #2a2a2a;
  --ds-panel-muted: #313135;
  --ds-icon-on-dark: #a3a3a3;
  --ds-stat-muted-on-dark: #b5b5b5;
  --ds-stat-fraction-muted: #9ca3af;
  --ds-stat-fraction-muted-dark: #d4d4d4;
  --ds-white-60: rgb(255 255 255 / 0.12);
  --ds-white-60-progress: rgb(255 255 255 / 0.45);

  /* —— Canonical control blueprint — dark (translucent overlays over the #1F1F24 canvas) —— */
  --cc-text-primary-dark: #FAFAFF;
  --cc-text-muted-dark: rgba(240, 240, 255, 0.46);
  --cc-icon-muted-dark: rgba(235, 235, 255, 0.26);
  --cc-control-secondary-bg-dark: rgba(250, 250, 255, 0.125);
  --cc-control-secondary-hover-dark: rgba(250, 250, 255, 0.18);
  --cc-nav-hover-bg-dark: rgba(250, 250, 255, 0.125);
  --cc-surface-interactive-bg-dark: rgba(250, 250, 255, 0.08);
  --cc-surface-interactive-hover-dark: rgba(250, 250, 255, 0.16);
  --cc-add-tile-border-dark: rgba(250, 250, 255, 0.22);
  --cc-add-tile-hover-dark: rgba(250, 250, 255, 0.1);
  --cc-action-primary-bg-dark: #FAFAFF;
  --cc-action-primary-hover-dark: #ededf2;
  --cc-action-primary-text-dark: #1b1b26;

  --ds-neutral-chrome: var(--cc-surface-interactive-bg-dark);
  --ds-neutral-chrome-hover: var(--cc-surface-interactive-hover-dark);
  --ds-neutral-row: var(--cc-surface-interactive-bg-dark);
  --ds-neutral-row-hover: var(--cc-surface-interactive-hover-dark);
  --ds-control-bg: var(--cc-control-secondary-bg-dark);
  --ds-control-bg-hover: var(--cc-control-secondary-hover-dark);
  --ds-control-bg-active: rgba(250, 250, 255, 0.22);
  --ds-focus-ring: rgb(154 160 176 / 0.38);
  --ds-action-light: #FAFAFF;
  --ds-action-light-hover: #ededf2;
  --ds-action-light-active: #e2e2e8;
  --ds-danger-action: #d98a91;
  --ds-danger-action-hover: #e59ba2;
  --ds-danger-action-active: #c97a82;
  --ds-danger-soft-bg: #521923;
  --ds-danger-soft-text: #ffc2ca;
  --surface-success-subtle: #344428;
  --surface-danger-subtle: #4a262c;
  --text-on-subtle-status: #f4f4f7;
  --ds-surface-success-subtle: var(--surface-success-subtle);
  --ds-surface-danger-subtle: var(--surface-danger-subtle);
  --ds-text-on-subtle-status: var(--text-on-subtle-status);
  --ds-field-bg: #26262b;
  --ds-field-bg-hover: #313135;
  --ds-field-border: #4a4d59;
  --ds-field-border-hover: #5b5f6d;
  --ds-field-border-focus: #FAFAFF;
  --ds-field-text: #FAFAFF;
  --ds-field-placeholder: #9595A1;
  --ds-field-icon: #9595A1;
  --ds-select-bg: #26262b;
  --ds-select-bg-hover: #313135;
  --ds-select-bg-open: #26262b;
  --ds-select-border: #4a4d59;
  --ds-select-border-hover: #5b5f6d;
  --ds-select-border-focus: #FAFAFF;
  --ds-select-text: #FAFAFF;
  --ds-select-placeholder: #9595A1;
  --ds-select-icon: #9595A1;
  --ds-select-menu-bg: #26262b;
  --ds-select-menu-item-hover: #36363a;
  --ds-select-menu-shadow: 0 22px 64px -28px rgb(0 0 0 / 0.72);
  --ds-switch-bg-off: #44444a;
  --ds-switch-bg-off-hover: #505057;
  --ds-switch-bg-on: #a6a7aa;
  --ds-switch-bg-on-hover: #b4b5b8;
  --ds-switch-thumb: #1F1F24;
  --ds-switch-thumb-shadow: 0 2px 7px rgb(0 0 0 / 0.22);

  /* Inverse surface flips on dark theme: light chip on dark background. */
  --ds-inverse-surface: #FAFAFF;
  --ds-inverse-on-surface: #17171c;
  /* Switch off-state outline + off-thumb tuned for the dark theme. */
  --cc-switch-track-off-border: rgb(255 255 255 / 0.28);
  --cc-switch-thumb-off-bg: #a6a7aa;

  --ds-grammar-vocab-pill-bg: var(--ds-neutral-row);
  --ds-grammar-vocab-pill-bg-hover: var(--ds-neutral-row-hover);
  --progress-trend-up-strong: #a3c968;
  --progress-trend-up-soft: rgb(163 201 104 / 0.28);
  --progress-trend-up-surface: rgb(109 152 56 / 0.22);
  --progress-trend-up-secondary: #7f9d61;
  --progress-trend-up-ink: #c4e085;
  --progress-trend-up-badge-bg: rgb(163 201 104 / 0.24);
  --progress-trend-up-badge-text: #c4e085;
  --progress-trend-up-chart: #b8d97a;
  --progress-trend-up-area: rgb(163 201 104 / 0.22);
  --progress-trend-down-strong: #f0b090;
  --progress-trend-down-soft: rgb(166 75 42 / 0.35);
  --progress-trend-down-surface: rgb(166 75 42 / 0.24);
  --progress-trend-down-label: #f0b090;
  --progress-trend-down-ink: #f5d4c8;
  --progress-trend-down-badge-bg: rgb(166 75 42 / 0.32);
  --progress-trend-down-badge-text: #f0b090;
  --progress-trend-down-chart: #f0b090;
  --progress-trend-down-area: rgb(166 75 42 / 0.28);
  /** Dashboard purple viz — dark theme mirror. */
  --dash-surface: #26262b;
  --dash-surface-hover: #2c2c32;
  --dash-inner: #1F1F24;
  --dash-line: #A99CF5;
  --dash-line-strong: #C0B6F9;
  --dash-fill-from: rgb(169 156 245 / 0.30);
  --dash-fill-to: rgb(169 156 245 / 0.02);
  --dash-dot: #A99CF5;
  --dash-track: rgb(255 255 255 / 0.12);
  --dash-track-soft: rgb(255 255 255 / 0.07);
  --dash-marker: #F4F4F7;
  --dash-marker-ring: #26262b;
  --dash-grid: rgb(255 255 255 / 0.08);
  --dash-step-done: rgb(169 156 245 / 0.45);
  --dash-block-gray-top: rgb(255 255 255 / 0.18);
  --dash-block-gray-bottom: rgb(255 255 255 / 0.02);
  --dash-block-gray-cap: rgb(255 255 255 / 0.30);
  --dash-block-purple-top: rgb(169 156 245 / 0.50);
  --dash-block-purple-bottom: rgb(169 156 245 / 0.04);
  --dash-block-purple-cap: #A99CF5;
  --dash-pill-bg: rgb(169 156 245 / 0.20);
  --dash-pill-text: #C0B6F9;
  /* Skill map — dark theme: keep the semantic hues, lift a touch for the dark surface. */
  --skill-baseline: #F2C558;
  --skill-previous: #A692E0;
  --skill-latest: #93C4A0;
  --skill-level: #8FD3EE;
  --skill-grid: rgb(255 255 255 / 0.07);
  --skill-spoke: rgb(255 255 255 / 0.09);

  --ds-grammar-hero-bg: color-mix(in srgb, var(--ds-sage) 42%, var(--ds-panel-muted));
  --ds-grammar-scheme-bg: color-mix(in srgb, var(--ds-sage) 34%, var(--ds-panel-muted));
  --ds-grammar-scheme-pill-bg: color-mix(in srgb, #ffffff 16%, color-mix(in srgb, var(--ds-sage) 40%, #2a2a2a));
  --ds-grammar-example-bg: var(--ds-group-card-bg-dark);
  --ds-grammar-related-bg: color-mix(in srgb, var(--ds-sage) 48%, var(--ds-panel-muted));
  --ds-grammar-related-bg-hover: color-mix(in srgb, var(--ds-sage) 62%, var(--ds-panel-muted));
  --ds-grammar-callout-bg: color-mix(in srgb, #9b87d0 32%, var(--ds-panel-muted));
  --ds-grammar-callout-accent: #c4b5e8;
  --ds-grammar-topic-chip-bg: color-mix(in srgb, var(--ds-sage) 52%, var(--ds-panel-muted));
}

/* Grammar tag category tints (soft hex on [data-grammar-theme], see lib/grammar/category-theme.ts) */
[data-grammar-theme] {
  --ds-grammar-hero-bg: var(--grammar-theme-hero);
  --ds-grammar-scheme-bg: var(--grammar-theme-scheme);
  --ds-grammar-scheme-pill-bg: var(--grammar-theme-scheme-pill);
  --ds-grammar-related-bg: var(--grammar-theme-related);
  --ds-grammar-related-bg-hover: var(--grammar-theme-related-hover);
  --ds-grammar-topic-chip-bg: var(--grammar-theme-chip);
  --ds-grammar-vocab-pill-bg: var(--ds-neutral-row);
  --ds-grammar-vocab-pill-bg-hover: var(--ds-neutral-row-hover);
}

.dark [data-grammar-theme] {
  --ds-grammar-hero-bg: color-mix(in srgb, var(--grammar-theme-hero) 44%, var(--ds-panel-muted));
  --ds-grammar-scheme-bg: color-mix(in srgb, var(--grammar-theme-scheme) 38%, var(--ds-panel-muted));
  --ds-grammar-scheme-pill-bg: color-mix(in srgb, var(--grammar-theme-scheme-pill) 28%, var(--ds-panel-muted));
  --ds-grammar-related-bg: color-mix(in srgb, var(--grammar-theme-related) 46%, var(--ds-panel-muted));
  --ds-grammar-related-bg-hover: color-mix(in srgb, var(--grammar-theme-related-hover) 52%, var(--ds-panel-muted));
  --ds-grammar-topic-chip-bg: color-mix(in srgb, var(--grammar-theme-chip) 42%, var(--ds-panel-muted));
  --ds-grammar-vocab-pill-bg: #2a2a2a;
  --ds-grammar-vocab-pill-bg-hover: #363636;
}

/**
 * Grammar «Слова из статьи» chips — fixed neutral grays.
 * Class + explicit colors so category theme / --ds-sage never tint these pills.
 */
.grammar-vocab-pill {
  background-color: #f5f5f5 !important;
}
.grammar-vocab-pill:hover {
  background-color: #ebebeb !important;
}
.dark .grammar-vocab-pill,
html.dark .grammar-vocab-pill {
  background-color: #2a2a2a !important;
}
.dark .grammar-vocab-pill:hover,
html.dark .grammar-vocab-pill:hover {
  background-color: #363636 !important;
}
[data-grammar-theme] .grammar-vocab-pill {
  background-color: #f5f5f5 !important;
}
[data-grammar-theme] .grammar-vocab-pill:hover {
  background-color: #ebebeb !important;
}
.dark [data-grammar-theme] .grammar-vocab-pill,
html.dark [data-grammar-theme] .grammar-vocab-pill {
  background-color: #2a2a2a !important;
}
.dark [data-grammar-theme] .grammar-vocab-pill:hover,
html.dark [data-grammar-theme] .grammar-vocab-pill:hover {
  background-color: #363636 !important;
}

/* Tailwind v4: bridge semantic CSS variables → theme utilities (border-border, bg-background, …) */
@theme inline {
  --font-sans: var(--ds-font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

  /* Figma / dashboard tokens → Tailwind color utilities (bg-ds-*, text-ds-*, border-ds-*, …) */
  --color-ds-canvas: var(--ds-canvas);
  --color-ds-surface: var(--ds-surface);
  --color-ds-ink: var(--ds-ink);
  --color-ds-border-strong: var(--ds-border-strong);
  --color-ds-sidebar: var(--ds-sidebar);
  --color-ds-sidebar-hover: var(--ds-sidebar-hover);
  --color-ds-neutral-chrome: var(--ds-neutral-chrome);
  --color-ds-neutral-chrome-hover: var(--ds-neutral-chrome-hover);
  --color-ds-neutral-row: var(--ds-neutral-row);
  --color-ds-neutral-row-hover: var(--ds-neutral-row-hover);
  --color-ds-group-card-bg: var(--ds-group-card-bg);
  --color-ds-group-card-bg-dark: var(--ds-group-card-bg-dark);
  --color-ds-text-primary: var(--ds-text-primary);
  --color-ds-text-secondary: var(--ds-text-secondary);
  --color-ds-text-muted: var(--ds-text-muted);
  --color-ds-text-tertiary: var(--ds-text-tertiary);
  --color-ds-text-quaternary: var(--ds-text-quaternary);
  --color-ds-text-soft: var(--ds-text-soft);
  --color-ds-text-soft-dark: var(--ds-text-soft-dark);
  --color-ds-text-placeholder: var(--ds-text-placeholder);
  --color-ds-chevron: var(--ds-chevron);
  --color-ds-surface-muted: var(--ds-surface-muted);
  --color-ds-surface-pill: var(--ds-surface-pill);
  --color-ds-surface-hover: var(--ds-surface-hover);
  --color-ds-sage: var(--ds-sage);
  --color-ds-sage-strong: var(--ds-sage-strong);
  --color-ds-sage-hover: var(--ds-sage-hover);
  --color-ds-pink: var(--ds-pink);
  --color-ds-pink-strong: var(--ds-pink-strong);
  --color-ds-gray-tile: var(--ds-gray-tile);
  --color-ds-panel-muted: var(--ds-panel-muted);
  --color-ds-icon-on-dark: var(--ds-icon-on-dark);
  --color-ds-stat-muted-on-dark: var(--ds-stat-muted-on-dark);
  --color-ds-stat-fraction-muted: var(--ds-stat-fraction-muted);
  --color-ds-stat-fraction-muted-dark: var(--ds-stat-fraction-muted-dark);
  --color-ds-white-60: var(--ds-white-60);
  --color-ds-white-60-progress: var(--ds-white-60-progress);

  /* Figma type scale → text-ds-* font-size utilities */
  --text-ds-2xs: var(--ds-text-2xs);
  --text-ds-xs: var(--ds-text-xs);
  --text-ds-sm: var(--ds-text-sm);
  --text-ds-sm-plus: var(--ds-text-sm-plus);
  --text-ds-body-sm: var(--ds-text-body-sm);
  --text-ds-body: var(--ds-text-body);
  --text-ds-body-lg: var(--ds-text-body-lg);
  --text-ds-body-xl: var(--ds-text-body-xl);
  --text-ds-lg: var(--ds-text-lg);
  --text-ds-xl: var(--ds-text-xl);
  --text-ds-2xl: var(--ds-text-2xl);
  --text-ds-3xl: var(--ds-text-3xl);
  --text-ds-4xl: var(--ds-text-4xl);
  --text-ds-5xl: var(--ds-text-5xl);
  --text-ds-6xl: var(--ds-text-6xl);
  --text-ds-7xl: var(--ds-text-7xl);
  --text-ds-8xl: var(--ds-text-8xl);
  --text-ds-stat: var(--ds-text-stat);
}

/* Light theme colour accents (Figma «Зелёная» / «Розовая») */
html:not(.dark)[data-ui-accent="sage"] {
  --ds-canvas: #FFFFFF;
  --ds-sidebar: #d4e4c4;
  --ds-sidebar-hover: #c4d8b0;
  --ds-panel-muted: #dfe8d4;
  /* Плашки/скелетоны: нейтральный серый, без тона акцента (см. :root --ds-surface-muted) */
  --ds-surface-muted: var(--cc-surface-interactive-bg-light);
  --ds-sage: #d4e7b0;
  --ds-sage-strong: #8ab84a;
  --ds-sage-hover: #6d9838;
  --ds-group-card-bg: color-mix(in srgb, var(--ds-sage) 34%, #f5f5f5);
}

html:not(.dark)[data-ui-accent="pink"] {
  --ds-canvas: #FFFFFF;
  --ds-sidebar: #edd4d4;
  --ds-sidebar-hover: #e4c4c4;
  --ds-panel-muted: #ead5d5;
  --ds-surface-muted: var(--cc-surface-interactive-bg-light);
  --ds-sage: #efd6d6;
  --ds-sage-strong: #c06060;
  --ds-sage-hover: #a84848;
  --ds-group-card-bg: color-mix(in srgb, var(--ds-sage) 34%, #f5f5f5);
}

html:not(.dark)[data-ui-accent="blue"] {
  --ds-canvas: #FFFFFF;
  --ds-sidebar: #d4dff0;
  --ds-sidebar-hover: #c4d2e8;
  --ds-panel-muted: #dde6f4;
  --ds-surface-muted: var(--cc-surface-interactive-bg-light);
  --ds-sage: #d4dff4;
  --ds-sage-strong: #3d6ea8;
  --ds-sage-hover: #2f5685;
  --ds-group-card-bg: color-mix(in srgb, var(--ds-sage) 34%, #f5f5f5);
}

html:not(.dark)[data-ui-accent="orange"] {
  --ds-canvas: #FFFFFF;
  --ds-sidebar: #f0e4d4;
  --ds-sidebar-hover: #e8d8c4;
  --ds-panel-muted: #f2e8dc;
  --ds-surface-muted: var(--cc-surface-interactive-bg-light);
  --ds-sage: #fce8d4;
  --ds-sage-strong: #c0631a;
  --ds-sage-hover: #9e4f14;
  --ds-group-card-bg: color-mix(in srgb, var(--ds-sage) 34%, #f5f5f5);
}

/**
 * Тёмная тема — те же акценты, что в светлой: тонированный холст/сайдбар и яркие
 * --ds-sage-strong/--ds-sage-hover для ссылок и плашек (читаемый контраст).
 */
html.dark[data-ui-accent="sage"] {
  --ds-canvas: #1F1F24;
  --ds-sidebar: #151c13;
  --ds-sidebar-hover: #243320;
  --ds-panel-muted: #1a2218;
  --ds-surface-muted: var(--cc-surface-interactive-bg-dark);
  --ds-sage: #2a3826;
  --ds-sage-strong: #a3c968;
  --ds-sage-hover: #c4e085;
  --ds-pink: #2a3826;
  --ds-pink-strong: #a3c968;
  --accent: #243320;
  --accent-foreground: #e8f2e4;
  --sidebar-accent: #243320;
  --sidebar-accent-foreground: #e8f2e4;
  --ds-group-card-bg-dark: color-mix(in srgb, var(--ds-sage) 48%, #1e1e1e);
}

html.dark[data-ui-accent="pink"] {
  --ds-canvas: #1F1F24;
  --ds-sidebar: #1f1618;
  --ds-sidebar-hover: #322428;
  --ds-panel-muted: #241a1d;
  --ds-surface-muted: var(--cc-surface-interactive-bg-dark);
  --ds-sage: #3a282c;
  --ds-sage-strong: #e88787;
  --ds-sage-hover: #f0a8a8;
  --ds-pink: #3a282c;
  --ds-pink-strong: #e88787;
  --accent: #322428;
  --accent-foreground: #fce8e8;
  --sidebar-accent: #322428;
  --sidebar-accent-foreground: #fce8e8;
  --ds-group-card-bg-dark: color-mix(in srgb, var(--ds-sage) 48%, #1e1e1e);
}

html.dark[data-ui-accent="blue"] {
  --ds-canvas: #1F1F24;
  --ds-sidebar: #141b26;
  --ds-sidebar-hover: #1c2636;
  --ds-panel-muted: #182030;
  --ds-surface-muted: var(--cc-surface-interactive-bg-dark);
  --ds-sage: #1e2d40;
  --ds-sage-strong: #7eb0e8;
  --ds-sage-hover: #9ec8f5;
  --ds-pink: #1e2d40;
  --ds-pink-strong: #7eb0e8;
  --accent: #1c2636;
  --accent-foreground: #e4eef8;
  --sidebar-accent: #1c2636;
  --sidebar-accent-foreground: #e4eef8;
  --ds-group-card-bg-dark: color-mix(in srgb, var(--ds-sage) 48%, #1e1e1e);
}

html.dark[data-ui-accent="orange"] {
  --ds-canvas: #1F1F24;
  --ds-sidebar: #1c1610;
  --ds-sidebar-hover: #2e2418;
  --ds-panel-muted: #221a12;
  --ds-surface-muted: var(--cc-surface-interactive-bg-dark);
  --ds-sage: #3d3020;
  --ds-sage-strong: #e8994a;
  --ds-sage-hover: #f0b06a;
  --ds-pink: #3d3020;
  --ds-pink-strong: #e8994a;
  --accent: #2e2418;
  --accent-foreground: #f8eee4;
  --sidebar-accent: #2e2418;
  --sidebar-accent-foreground: #f8eee4;
  --ds-group-card-bg-dark: color-mix(in srgb, var(--ds-sage) 48%, #1e1e1e);
}

[data-progress-accent] {
  --progress-accent: #8ab84a;
  --progress-accent-strong: #6d9838;
  --progress-accent-soft: #dff0c4;
  --progress-accent-surface: #f3f8ec;
  --progress-accent-secondary: #90a97a;
  --progress-accent-secondary-soft: #edf2e7;
  --progress-accent-gradient-start: #edf5e3;
  --progress-accent-gradient-end: #f7f9f2;
  --progress-grid: rgb(0 0 0 / 0.07);
}

html:not(.dark) [data-progress-accent="pink"] {
  --progress-accent: #c06060;
  --progress-accent-strong: #a84848;
  --progress-accent-soft: #f1dddd;
  --progress-accent-surface: #f8eeee;
  --progress-accent-secondary: #b6888d;
  --progress-accent-secondary-soft: #f3e8ea;
  --progress-accent-gradient-start: #f7ecec;
  --progress-accent-gradient-end: #faf6f6;
}

html:not(.dark) [data-progress-accent="blue"] {
  --progress-accent: #3d6ea8;
  --progress-accent-strong: #2f5685;
  --progress-accent-soft: #dbe7f6;
  --progress-accent-surface: #ecf3fb;
  --progress-accent-secondary: #7691b7;
  --progress-accent-secondary-soft: #e7eef8;
  --progress-accent-gradient-start: #ebf2fb;
  --progress-accent-gradient-end: #f7f9fc;
}

html:not(.dark) [data-progress-accent="orange"] {
  --progress-accent: #c0631a;
  --progress-accent-strong: #9e4f14;
  --progress-accent-soft: #f7e6d5;
  --progress-accent-surface: #fbf1e7;
  --progress-accent-secondary: #b68857;
  --progress-accent-secondary-soft: #f4ece3;
  --progress-accent-gradient-start: #faf0e4;
  --progress-accent-gradient-end: #fbf7f2;
}

html.dark [data-progress-accent="sage"] {
  --progress-accent: #a3c968;
  --progress-accent-strong: #c4e085;
  --progress-accent-soft: rgb(163 201 104 / 0.18);
  --progress-accent-surface: #1b2417;
  --progress-accent-secondary: #7f9d61;
  --progress-accent-secondary-soft: #171d15;
  --progress-accent-gradient-start: #182015;
  --progress-accent-gradient-end: #141814;
  --progress-grid: rgb(255 255 255 / 0.08);
}

html.dark [data-progress-accent="pink"] {
  --progress-accent: #e88787;
  --progress-accent-strong: #f0a8a8;
  --progress-accent-soft: rgb(232 135 135 / 0.16);
  --progress-accent-surface: #24191b;
  --progress-accent-secondary: #b17b83;
  --progress-accent-secondary-soft: #1d1517;
  --progress-accent-gradient-start: #211618;
  --progress-accent-gradient-end: #171314;
  --progress-grid: rgb(255 255 255 / 0.08);
}

html.dark [data-progress-accent="blue"] {
  --progress-accent: #7eb0e8;
  --progress-accent-strong: #9ec8f5;
  --progress-accent-soft: rgb(126 176 232 / 0.16);
  --progress-accent-surface: #151f2c;
  --progress-accent-secondary: #6f8caf;
  --progress-accent-secondary-soft: #131a23;
  --progress-accent-gradient-start: #141c28;
  --progress-accent-gradient-end: #11161c;
  --progress-grid: rgb(255 255 255 / 0.08);
}

html.dark [data-progress-accent="orange"] {
  --progress-accent: #e8994a;
  --progress-accent-strong: #f0b06a;
  --progress-accent-soft: rgb(232 153 74 / 0.16);
  --progress-accent-surface: #241c13;
  --progress-accent-secondary: #b38859;
  --progress-accent-secondary-soft: #1d1712;
  --progress-accent-gradient-start: #22180f;
  --progress-accent-gradient-end: #181411;
  --progress-grid: rgb(255 255 255 / 0.08);
}

/** Тренды ± на метриках: не подменяются акцентом data-progress-accent */
html.dark [data-progress-accent] {
  --progress-trend-up-strong: #a3c968;
  --progress-trend-up-soft: rgb(163 201 104 / 0.28);
  --progress-trend-up-surface: rgb(109 152 56 / 0.22);
  --progress-trend-up-secondary: #7f9d61;
  --progress-trend-up-ink: #c4e085;
  --progress-trend-up-badge-bg: rgb(163 201 104 / 0.24);
  --progress-trend-up-badge-text: #c4e085;
  --progress-trend-up-chart: #b8d97a;
  --progress-trend-up-area: rgb(163 201 104 / 0.22);
  --progress-trend-down-strong: #f0b090;
  --progress-trend-down-soft: rgb(166 75 42 / 0.35);
  --progress-trend-down-surface: rgb(166 75 42 / 0.24);
  --progress-trend-down-label: #f0b090;
  --progress-trend-down-ink: #f5d4c8;
  --progress-trend-down-badge-bg: rgb(166 75 42 / 0.32);
  --progress-trend-down-badge-text: #f0b090;
  --progress-trend-down-chart: #f0b090;
  --progress-trend-down-area: rgb(166 75 42 / 0.28);
}

/**
 * Редактор урока: нейтральные «шейпы» и hover, без тона data-ui-accent.
 * В :root --muted/--accent привязаны к --ds-sidebar (sage → зеленоватый фон при hover:bg-muted и т.п.).
 */
.ds-lesson-editor-page {
  --ds-surface-muted: #f8f8f8;
  --ds-panel-muted: #ebebeb;
  --ds-sage: #d4e7b0;
  --ds-sage-strong: #8ab84a;
  --ds-sage-hover: #6f9738;
  --ds-pink: #f4d2da;
  --ds-pink-strong: #d26f87;
  /* Сильнее, чем в :root: карточки блоков на --input-background (#e8e8e8), иначе ghost-hover почти не виден */
  --ds-surface-hover: #dedee2;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --accent: #e4e4e7;
  --accent-foreground: #18181b;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --sidebar-accent: #e4e4e7;
  --sidebar-accent-foreground: #18181b;
}

.dark .ds-lesson-editor-page {
  --ds-surface-muted: var(--cc-surface-interactive-bg-dark);
  --ds-panel-muted: #313135;
  --ds-sage: #304323;
  --ds-sage-strong: #9bc45c;
  --ds-sage-hover: #b7dc75;
  --ds-pink: #4a3037;
  --ds-pink-strong: #e4889d;
  --ds-surface-hover: var(--cc-surface-interactive-hover-dark);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
}

/* Иероглифы в материале урока: только элементы с классом .lesson-cjk-text (редактор и предпросмотр). */
.lesson-cjk-text {
  font-size: 20px;
  line-height: 1.45;
}

@layer components {
  /* —— App после логина: на весь экран, без рамки и без «карточки» с отступами от края viewport —— */
  .ds-figma-shell-outer {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 100svh;
    min-height: 100dvh;
    /* Поверх dvh: реальная высота после клавиатуры iOS (задаётся VisualViewportSync) */
    min-height: var(--visual-viewport-height, 100dvh);
    /**
     * Без фиксированной высоты outer растягивался по контенту → main.scrollHeight === clientHeight,
     * скролл уезжал на document, ResizeObserver на main давал лавину перерисовок.
     */
    height: var(--visual-viewport-height, 100dvh);
    max-height: var(--visual-viewport-height, 100dvh);
    overflow: hidden;
    flex-direction: column;
    margin: 0;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom);
    border: none;
    outline: none;
    box-shadow: none;
    background-color: #ffffff;
    font-family: var(--ds-font-sans);
  }

  .dark .ds-figma-shell-outer {
    background-color: #1F1F24;
  }

  .ds-figma-shell-row {
    display: flex;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    flex: 1 1 0%;
    align-items: stretch;
    border: none;
    box-shadow: none;
  }

  /**
   * Десктоп: равномерный scale shell по ширине окна (w/1440), без полей справа.
   * Эталон 1440×900; на iMac крупнее, на 14" MacBook — как в макете.
   */
  @media (min-width: 1024px) {
    .ds-figma-shell-outer:has(.ds-app-viewport-scale-host) {
      display: flex;
      flex-direction: column;
    }

    .ds-app-viewport-scale-host {
      display: flex;
      flex: 1 1 auto;
      align-items: flex-start;
      justify-content: flex-start;
      min-height: 0;
      min-width: 0;
      width: 100%;
      overflow: hidden;
    }

    .ds-app-viewport-scale-stage {
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

    .ds-app-viewport-scale-stage > .ds-figma-shell-row {
      flex: 1 1 auto;
      width: 100%;
      height: 100%;
      min-height: 0;
      min-width: 0;
    }

    .ds-app-viewport-scale-stage .ds-figma-shell-main {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;
    }

    .ds-app-viewport-scale-stage .ds-figma-shell-main-scroll {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: clip;
    }

    .ds-app-viewport-scale-spacer {
      flex-shrink: 0;
    }
  }

  /**
   * Если где-то осталась обёртка с таким классом — не даём ей рамку/отступы/ограничивать ширину.
   * Полноэкранный режим только через ds-figma-shell-outer + row.
   */
  .ds-figma-shell-card {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    max-width: none;
    min-height: 0;
    flex: 1 1 0%;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: inherit;
  }

  /**
   * Сайдбар — строго нейтральный серый (--ds-neutral-chrome), без тонирования data-ui-accent
   * (акцент меняет --ds-sidebar и холст, но не колонку навигации).
   */
  .ds-figma-shell-sidebar {
    display: none;
    width: 280px;
    flex-shrink: 0;
    flex-direction: column;
    box-sizing: border-box;
    align-self: stretch;
    min-height: 100%;
    min-width: 0;
    overflow: hidden;
    background-color: var(--ds-neutral-chrome);
    /* Отступы зоны лого и навигации (компактнее, чтобы 8 пунктов влезали без скролла) */
    padding: 24px 24px 20px;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }

  @media (min-width: 1024px) {
    /* Без вертикальных полей — иначе видна «чёрная рамка» вокруг блока на тёмном фоне */
    .ds-figma-shell-sidebar {
      display: flex;
      min-height: 0;
      height: 100%;
      flex: 0 0 280px;
      align-self: stretch;
      border-radius: 0 var(--ds-sidebar-radius-right) var(--ds-sidebar-radius-right) 0;
      padding-top: max(24px, env(safe-area-inset-top));
      padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
  }

  .ds-figma-shell-main {
    display: flex;
    min-height: 0;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    background-color: #ffffff;
  }

  .dark .ds-figma-shell-main {
    background-color: #1F1F24;
  }

  .dark .ds-figma-shell-main-scroll {
    color: var(--ds-text-primary);
  }

  /** Основной скролл на main */
  .ds-figma-shell-main-scroll {
    box-sizing: border-box;
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    /**
     * Containing block для absolute-потомков страницы (например `.sr-only` input у
     * «Прикрепить»). Без него такой элемент позиционируется от ICB, не обрезается
     * `overflow: hidden` оболочки и раздувает scrollHeight документа → появляется
     * второй скролл, который уводит весь shell вверх и оставляет пустоту снизу.
     */
    position: relative;
    /* clip: гориз. обрезка без поломки sticky внутри скроллящегося main */
    overflow-x: clip;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  @supports not (overflow: clip) {
    .ds-figma-shell-main-scroll {
      overflow-x: hidden;
    }
  }

  /**
   * Мобильный «стеклянный» бар: fixed, полное скругление, остаётся у верха экрана при скролле.
   * Внутренний блок — pointer-events: auto.
   */
  .ds-mobile-top-chrome {
    pointer-events: none;
    position: fixed;
    z-index: 45;
    top: 0;
    right: 0;
    left: 0;
    box-sizing: border-box;
    padding-top: max(0.5rem, env(safe-area-inset-top));
    padding-right: max(0.75rem, env(safe-area-inset-right));
    padding-bottom: 0.5rem;
    padding-left: max(0.75rem, env(safe-area-inset-left));
  }

  .ds-mobile-top-chrome__bar {
    pointer-events: auto;
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.375rem 0.5rem 0.375rem 0.625rem;
    border-radius: 1.125rem;
    border: 1px solid rgb(0 0 0 / 0.09);
    background-color: rgb(255 255 255 / 0.7);
    box-shadow:
      0 4px 24px rgb(0 0 0 / 0.07),
      0 1px 0 rgb(255 255 255 / 0.55) inset;
    backdrop-filter: blur(22px) saturate(1.75);
    -webkit-backdrop-filter: blur(22px) saturate(1.75);
  }

  .dark .ds-mobile-top-chrome__bar {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(18 18 18 / 0.72);
    box-shadow: 0 6px 28px rgb(0 0 0 / 0.42);
  }

  .ds-mobile-top-chrome__menu-btn {
    display: inline-flex;
    height: 2.25rem;
    width: 2.25rem;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.875rem;
    border: 0;
    background-color: transparent;
    color: var(--ds-ink);
    transition:
      background-color 0.15s ease,
      color 0.15s ease,
      opacity 0.15s ease;
  }

  .ds-mobile-top-chrome__menu-btn:hover {
    background-color: transparent;
    color: #000000;
  }

  .ds-mobile-top-chrome__menu-btn:active {
    opacity: 0.72;
  }

  .dark .ds-mobile-top-chrome__menu-btn {
    background-color: transparent;
    color: #f4f4f7;
  }

  .dark .ds-mobile-top-chrome__menu-btn:hover {
    background-color: transparent;
    color: #ffffff;
  }

  /** Резервируем место под fixed-бар, чтобы контент не уезжал под него */
  .ds-mobile-top-chrome-spacer {
    flex-shrink: 0;
    height: calc(max(0.5rem, env(safe-area-inset-top)) + 3.75rem + 0.5rem);
  }

  /**
   * Редактор урока (компактный тулбар): убираем дублирующий site-chrome с бургером,
   * остаётся одна стеклянная полоса с инструментами урока.
   */
  @media (max-width: 1023px) {
    main.ds-figma-shell-main-scroll.ds-lesson-editor-toolbar-docked .ds-mobile-top-chrome {
      display: none;
    }

    main.ds-figma-shell-main-scroll.ds-lesson-editor-toolbar-docked .ds-mobile-top-chrome-spacer {
      display: none;
    }
  }

  /** Базовые поля контента: мобильные safe-area + ровные края для всех страниц (ученик/преподаватель). */
  .ds-figma-shell-page-pad {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1;
    min-height: 0;
    width: 100%;
    padding-top: 0.875rem;
    padding-bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem));
    padding-left: max(5px, env(safe-area-inset-left));
    padding-right: max(5px, env(safe-area-inset-right));
  }

  /* Не даём вложенным флекс-контейнерам раздвигать мобильный viewport по ширине. */
  .ds-figma-shell-page-pad > * {
    min-width: 0;
  }

  /**
   * Грамматика и другие длинные статьи: не сжимать page-pad до высоты viewport,
   * иначе контент ниже первого экрана обрезается без прокрутки в main.
   */
  .ds-figma-shell-page-pad:has(.grammar-shell) {
    flex: 0 0 auto;
    min-height: auto;
  }

  @media (min-width: 480px) {
    .ds-figma-shell-page-pad {
      padding-top: 1rem;
      padding-bottom: max(2.25rem, calc(env(safe-area-inset-bottom) + 1.5rem));
      padding-left: max(8px, env(safe-area-inset-left));
      padding-right: max(8px, env(safe-area-inset-right));
    }
  }

  @media (max-width: 767px) {
    .ds-figma-shell-page-pad:has(.lesson-shell) {
      padding-left: max(2px, env(safe-area-inset-left));
      padding-right: max(2px, env(safe-area-inset-right));
    }
  }

  @media (min-width: 768px) {
    .ds-figma-shell-page-pad {
      padding: 2.5rem;
      padding-bottom: max(var(--ds-page-bottom-inset), calc(env(safe-area-inset-bottom) + 2.5rem));
    }

    /** Ученик в уроке: почти во всю правую колонку, узкие боковые поля от края и от сайдбара. */
    .ds-figma-shell-page-pad:has(.lesson-shell) {
      padding-top: 2.5rem;
      padding-bottom: max(var(--ds-page-bottom-inset), calc(env(safe-area-inset-bottom) + 2.5rem));
      padding-left: max(1rem, env(safe-area-inset-left));
      padding-right: max(1rem, env(safe-area-inset-right));
    }
  }

  @media (min-width: 1280px) {
    .ds-figma-shell-page-pad:has(.lesson-shell) {
      padding-left: max(1.25rem, env(safe-area-inset-left));
      padding-right: max(1.25rem, env(safe-area-inset-right));
    }
  }

  /** Сообщения: на телефоне почти на всю ширину; на десктопе — меньше левого поля */
  .ds-figma-shell-page-pad:has(.ds-messages-page) {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0;
  }

  @media (min-width: 640px) {
    .ds-figma-shell-page-pad:has(.ds-messages-page) {
      padding-left: 1rem;
      padding-right: 1rem;
      padding-top: 0.5rem;
      padding-bottom: 0;
    }
  }

  @media (min-width: 1024px) {
    .ds-figma-shell-main-scroll:has(.ds-messages-page) {
      overflow-y: hidden;
    }

    .ds-figma-shell-page-pad:has(.ds-messages-page) {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-height: 0;
      padding-left: 1.25rem;
      padding-right: 2.5rem;
      padding-bottom: 0;
    }

    .ds-figma-shell-page-pad:has(.ds-messages-page) > .ds-messages-page {
      flex: 1 1 auto;
      min-height: 0;
    }
  }

  /** Корень страницы без собственных полей — поля даёт shell */
  .ds-figma-page {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    padding-bottom: var(--ds-page-bottom-inset);
  }

  /**
   * Конструктор урока: колонки редактора — собственные области прокрутки во всю высоту
   * окна, а не обычный контент страницы. С нижним паддингом под ними оставалась мёртвая
   * полоса ~40px, из-за которой последняя карточка выглядела обрезанной. Отступ
   * «контент кончился» даёт внутренний `padding-bottom` самих прокручиваемых колонок.
   *
   * Правый паддинг здесь раньше тоже гасился — к окну прижималась панель «Настройки».
   * Настройки переехали в модалку, третьей колонки нет, поля страницы снова обычные.
   */
  @media (min-width: 768px) {
    .ds-figma-shell-page-pad:has(.ds-lesson-editor-page) {
      padding-bottom: 0 !important;
    }
  }

  .ds-figma-page > .mx-auto {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* —— App shell (Layout) —— */
  .ds-app-canvas {
    display: flex;
    min-height: 100dvh;
    width: 100%;
    align-items: stretch;
    justify-content: flex-start;
    background-color: var(--ds-surface);
    padding: 0;
    font-family: var(--ds-font-sans);
  }

  .ds-app-loading {
    display: flex;
    flex: 1;
    width: 100%;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    perspective: 900px;
  }

  .ds-app-loading__coin {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    transform-style: preserve-3d;
    transform-origin: center center;
    animation: ds-app-loading-flip-y 2.8s ease-in-out infinite;
    will-change: transform;
  }

  .ds-app-loading__face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
  }

  .ds-app-loading__face--front {
    transform: rotateY(0deg) translateZ(0.5px);
  }

  .ds-app-loading__face--back {
    transform: rotateY(180deg) translateZ(0.5px);
  }

  .ds-app-loading__logo-img {
    display: block;
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain;
  }

  /** Тыльная сторона монеты — тот же знак, зеркально по горизонтали */
  .ds-app-loading__logo-img--mirrored {
    transform: scaleX(-1);
  }

  .dark .ds-app-loading__logo-img {
    filter: invert(1);
  }

  @keyframes ds-app-loading-flip-y {
    0% {
      transform: rotateY(0deg);
    }

    100% {
      transform: rotateY(360deg);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ds-app-loading__coin {
      animation: none;
    }
  }

  .ds-app-shell {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    overflow: hidden;
    border-radius: 0;
    border: none;
    background-color: var(--ds-surface);
    box-shadow: none;
  }

  .ds-app-row {
    display: flex;
    flex: 1;
    min-height: 100dvh;
  }

  .ds-sidebar {
    display: flex;
    width: var(--ds-sidebar-width);
    flex-shrink: 0;
    flex-direction: column;
    align-self: stretch;
    min-height: 100dvh;
    background-color: var(--ds-sidebar);
    padding: var(--ds-sidebar-padding);
    border-radius: 0 var(--ds-sidebar-radius-right) var(--ds-sidebar-radius-right) 0;
  }

  .ds-main {
    min-width: 0;
    flex: 1;
    min-height: 0;
    overflow: auto;
    background-color: var(--ds-surface);
  }

  .ds-brand-logo {
    font-size: var(--ds-logo-size);
    font-weight: var(--ds-font-bold);
    line-height: var(--ds-leading-none);
    color: var(--ds-ink);
  }

  .ds-profile-avatar {
    width: var(--ds-profile-avatar);
    height: var(--ds-profile-avatar);
    margin-bottom: var(--ds-space-3);
    overflow: hidden;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-surface);
  }

  .ds-profile-name {
    margin-bottom: var(--ds-space-1);
    font-size: var(--ds-profile-name-size);
    font-weight: var(--ds-font-normal);
    line-height: var(--ds-leading-none);
    color: var(--ds-ink);
  }

  .ds-profile-role {
    font-size: var(--ds-text-body-sm);
    color: var(--ds-text-muted);
  }

  .ds-nav-link {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-3) var(--ds-space-4);
    font-size: var(--ds-text-body);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-leading-body);
    color: var(--ds-ink);
    text-decoration: none;
    transition: background-color 0.15s ease;
  }

  .ds-nav-link--active {
    background-color: var(--ds-ink);
    color: #ffffff;
  }

  .ds-nav-link:not(.ds-nav-link--active):hover {
    background-color: var(--ds-sidebar-hover);
  }

  .ds-nav-icon {
    width: var(--ds-icon-nav);
    height: var(--ds-icon-nav);
    flex-shrink: 0;
  }

  /* —— Page layout —— */
  .ds-page {
    box-sizing: border-box;
    width: 100%;
    max-width: min(1400px, 100%);
    margin-inline: auto;
    padding: max(var(--ds-space-4), env(safe-area-inset-top))
      max(var(--ds-space-4), env(safe-area-inset-right))
      max(var(--ds-space-6), env(safe-area-inset-bottom))
      max(var(--ds-space-4), env(safe-area-inset-left));
  }

  @media (min-width: 768px) {
    .ds-page {
      padding: var(--ds-page-padding) max(var(--ds-page-padding), env(safe-area-inset-right))
        var(--ds-page-padding) max(var(--ds-page-padding), env(safe-area-inset-left));
    }
  }

  .ds-section-header {
    margin-bottom: var(--ds-section-gap);
  }

  .ds-section-header__title {
    margin-bottom: var(--ds-space-1);
    font-size: var(--ds-text-8xl);
    font-weight: var(--ds-font-bold);
    line-height: var(--ds-leading-none);
    color: var(--ds-text-primary);
  }

  .ds-section-header__subtitle {
    font-size: var(--ds-text-body);
    color: var(--ds-text-secondary);
  }

  /* —— Dashboard —— */
  .ds-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: var(--ds-section-gap);
  }

  @media (min-width: 768px) {
    .ds-stat-grid {
      gap: 1.25rem;
    }
  }

  @media (min-width: 640px) and (max-width: 1023px) {
    .ds-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ds-stat-grid > :nth-child(3) {
      grid-column: 1 / -1;
    }
  }

  @media (max-width: 639px) {
    .ds-stat-grid {
      grid-template-columns: 1fr;
    }
  }

  .ds-stat-card {
    border-radius: var(--ds-radius-xl);
    padding: var(--ds-stat-padding);
  }

  .ds-stat-card--muted {
    background-color: var(--ds-sidebar);
  }

  /** Десктоп: нейтральный серый, без оттенка акцентного сайдбара (sage и т.д.) */
  @media (min-width: 1024px) {
    .ds-stat-card--muted {
      background-color: var(--ds-neutral-row);
    }

    .dark .ds-stat-card--muted {
      background-color: var(--ds-surface-muted);
    }
  }

  .ds-stat-card--dark {
    background-color: var(--ds-ink);
    color: #ffffff;
  }

  /* В тёмной теме --ds-ink светлый: отдельная «тёмная» плитка для читаемости */
  .dark .ds-stat-card--dark {
    background-color: #2c2c2e;
    color: #fafafa;
  }

  .dark .ds-stat-card--dark .ds-stat-card__icon-badge {
    background-color: rgb(255 255 255 / 0.12);
    color: #ffffff;
  }

  .ds-stat-card--sage {
    background-color: var(--ds-sage);
  }

  .ds-stat-card__value {
    margin-bottom: var(--ds-space-2);
    font-size: var(--ds-text-stat);
    font-weight: var(--ds-font-normal);
    line-height: var(--ds-leading-none);
  }

  .ds-stat-card__label {
    font-size: var(--ds-text-body);
  }

  .ds-stat-card--interactive {
    position: relative;
    text-decoration: none;
    color: inherit;
    transition:
      transform 0.18s ease,
      box-shadow 0.18s ease;
  }

  .ds-stat-card--interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 42px rgb(0 0 0 / 0.1);
  }

  .ds-stat-card--interactive:active {
    transform: translateY(0);
  }

  .ds-stat-card--interactive:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ds-surface), 0 0 0 4px rgb(26 26 26 / 0.22);
  }

  .ds-stat-card--dark.ds-stat-card--interactive:hover {
    box-shadow: 0 18px 50px rgb(0 0 0 / 0.42);
  }

  .ds-stat-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ds-space-3);
    margin-bottom: var(--ds-space-2);
  }

  .ds-stat-card__icon-badge {
    display: flex;
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-md);
    background-color: rgb(255 255 255 / 0.55);
    color: var(--ds-ink);
  }

  .ds-stat-card--dark .ds-stat-card__icon-badge {
    background-color: rgb(255 255 255 / 0.12);
    color: #ffffff;
  }

  .ds-stat-card--sage .ds-stat-card__icon-badge {
    background-color: rgb(255 255 255 / 0.55);
  }

  .ds-stat-card__cta {
    margin-top: var(--ds-space-4);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--ds-text-body-sm);
    font-weight: var(--ds-font-medium);
    transition:
      gap 0.15s ease,
      opacity 0.15s ease;
  }

  .ds-stat-card--interactive:hover .ds-stat-card__cta {
    gap: 8px;
  }

  .ds-stat-card--dark .ds-stat-card__cta {
    color: rgb(255 255 255 / 0.88);
  }

  .ds-stat-card--muted .ds-stat-card__cta,
  .ds-stat-card--sage .ds-stat-card__cta {
    color: var(--ds-sage-hover);
  }

  /* Ссылки под числами на главной (макет Figma) */
  .ds-dashboard-stat-link {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ds-sage-strong);
    text-decoration: none;
    transition:
      color 0.15s ease,
      gap 0.15s ease;
  }

  .ds-dashboard-stat-link:hover {
    gap: 6px;
    color: var(--ds-sage-hover);
  }

  .ds-stat-card--dark .ds-dashboard-stat-link {
    color: var(--ds-sage-strong);
  }

  .ds-stat-card--dark .ds-dashboard-stat-link:hover {
    color: color-mix(in srgb, var(--ds-sage-strong) 58%, #ffffff);
  }

  .ds-stat-card--sage .ds-dashboard-stat-link {
    color: color-mix(in srgb, var(--ds-sage-strong) 42%, var(--ds-ink));
  }

  .ds-stat-card--sage .ds-dashboard-stat-link:hover {
    color: color-mix(in srgb, var(--ds-sage-strong) 32%, var(--ds-ink));
  }

  .dark .ds-stat-card--sage .ds-dashboard-stat-link {
    color: var(--ds-sage-hover);
  }

  .dark .ds-stat-card--sage .ds-dashboard-stat-link:hover {
    color: color-mix(in srgb, var(--ds-sage-hover) 72%, #ffffff);
  }

  /* Главная: рабочая область занимает всю доступную ширину shell. */
  .ds-dashboard-page {
    --ds-section-gap: 28px;
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  @media (min-width: 1280px) {
    .ds-dashboard-page {
      max-width: none;
    }
  }

  .ds-dashboard-grid {
    display: grid;
    gap: var(--ds-gutter);
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--ds-dashboard-aside));
  }

  /** Иначе flex внутри ячейки не сжимается и уезжает вправо на мобилке */
  .ds-dashboard-grid > * {
    min-width: 0;
  }

  @media (max-width: 1279px) {
    .ds-dashboard-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .ds-lesson-row {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: var(--ds-space-4);
    margin-bottom: 0;
    border-radius: var(--ds-radius-md);
    padding: 10px 12px;
    transition: background-color 0.16s ease;
  }

  .ds-lesson-row:hover {
    background-color: rgb(0 0 0 / 0.035);
  }

  .ds-lesson-row:hover .ds-lesson-row__chevron {
    opacity: 1;
  }

  .ds-lesson-dot {
    display: flex;
    width: var(--ds-lesson-dot);
    height: var(--ds-lesson-dot);
    flex-shrink: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-pill);
  }

  .ds-lesson-dot__day {
    margin-bottom: var(--ds-space-1);
    font-size: var(--ds-text-3xl);
    font-weight: var(--ds-font-normal);
    line-height: var(--ds-leading-none);
  }

  .ds-lesson-dot__time {
    font-size: var(--ds-text-xs);
  }

  .ds-lesson-row__title {
    margin-bottom: var(--ds-space-1);
    font-size: var(--ds-text-xl);
    font-weight: var(--ds-font-normal);
    line-height: var(--ds-leading-none);
    color: var(--ds-text-primary);
  }

  .ds-lesson-row__meta {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-size: var(--ds-text-sm-plus);
    color: var(--ds-text-secondary);
  }

  .ds-lesson-row__chevron {
    flex-shrink: 0;
    color: var(--ds-chevron);
    opacity: 0;
    transition: opacity 0.15s ease;
  }

  .ds-link-sage {
    border: none;
    background: none;
    font-size: var(--ds-text-body);
    color: var(--ds-sage-strong);
    cursor: pointer;
    transition: color 0.15s ease;
  }

  .ds-link-sage:hover {
    color: var(--ds-sage-hover);
  }

  a.ds-link-sage {
    text-decoration: none;
  }

  .ds-calendar-title-bold {
    font-size: var(--ds-text-5xl);
    font-weight: var(--ds-font-bold);
    line-height: var(--ds-leading-none);
    color: var(--ds-text-primary);
  }

  .ds-calendar-title-reg {
    font-size: var(--ds-text-5xl);
    font-weight: var(--ds-font-normal);
    line-height: var(--ds-leading-none);
    color: var(--ds-text-primary);
  }

  .ds-calendar-weekday {
    padding-bottom: var(--ds-space-1);
    text-align: center;
    font-size: var(--ds-text-sm);
    color: var(--ds-text-tertiary);
  }

  .ds-calendar-cell {
    cursor: pointer;
    border-radius: var(--ds-radius-sm);
    padding-block: 6px;
    text-align: center;
    font-size: var(--ds-text-body-sm);
  }

  .ds-calendar-cell--today {
    background-color: var(--ds-sage);
  }

  .ds-calendar-cell:not(.ds-calendar-cell--today):hover {
    background-color: var(--ds-surface-hover);
  }

  /* Figma Dashboard calendar: tight gap, sage today cell, single event dot */
  .ds-calendar-grid-figma {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--ds-space-1);
  }

  .ds-calendar-day-cell {
    cursor: pointer;
    border-radius: var(--ds-radius-md);
    padding: 6px 2px 8px;
    text-align: center;
    transition: background-color 0.15s ease;
  }

  .ds-calendar-day-cell--today {
    background-color: var(--ds-sage);
  }

  .ds-calendar-day-cell:hover:not(.ds-calendar-day-cell--today) {
    background-color: var(--ds-surface-hover);
  }

  .ds-calendar-event-dot {
    margin-top: 2px;
    display: flex;
    height: 10px;
    align-items: center;
    justify-content: center;
  }

  .ds-calendar-event-dot > span {
    height: 4px;
    width: 4px;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-ink);
  }

  .ds-contact-row {
    display: flex;
    cursor: pointer;
    align-items: center;
    gap: var(--ds-space-3);
  }

  .ds-contact-avatar {
    position: relative;
    height: var(--ds-contact-avatar);
    width: var(--ds-contact-avatar);
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--ds-radius-pill);
    background-color: #e5e7eb;
  }

  .ds-contact-name {
    margin-bottom: 2px;
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-font-normal);
    line-height: var(--ds-leading-none);
    color: var(--ds-text-primary);
  }

  .ds-contact-role {
    font-size: var(--ds-text-sm-plus);
    color: var(--ds-text-secondary);
  }

  /* —— Courses —— */
  .ds-course-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ds-gutter);
    margin-bottom: var(--ds-space-10);
  }

  @media (max-width: 1023px) {
    .ds-course-grid {
      grid-template-columns: 1fr;
    }
  }

  .ds-course-card {
    cursor: pointer;
    border-radius: var(--ds-radius-xl);
    padding: var(--ds-card-padding-lg);
    transition: transform 0.2s ease;
  }

  .ds-course-card:hover {
    transform: scale(1.01);
  }

  .ds-activity-card {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
    border-radius: var(--ds-radius-md);
    background-color: var(--ds-surface-muted);
    padding: var(--ds-space-4);
  }

  .ds-activity-icon {
    display: flex;
    height: 36px;
    width: 36px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-sage);
  }

  /* —— Auth: 2 колонки, иллюстрация слева (SVG), стеклянная панель формы, крупная типографика —— */
  .ds-auth-root--loading {
    align-items: stretch;
    justify-content: center;
    background-color: var(--ds-surface);
  }

  .dark .ds-auth-root--loading {
    background-color: #18181b;
  }

  .ds-auth-root {
    min-height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: var(--ds-font-sans);
    color: #141414;
    color-scheme: light dark;
  }

  /* Колонка: один градиент только на корне — иначе на маркетинге тот же угол, но другая «коробка» градиента, и виден вертикальный шов */
  @media (max-width: 1023px) {
    .ds-auth-root {
      padding: 12px;
      gap: 12px;
      background: linear-gradient(
        128deg,
        #f5f3ff 0%,
        #ede9fe 22%,
        #ddd6fe 48%,
        #c4b5fd 72%,
        #a78bfa 100%
      );
    }

    .dark .ds-auth-root {
      background: linear-gradient(128deg, #0a0912 0%, #1e1b4b 40%, #312e81 78%, #0f172a 100%);
    }

    .ds-auth-marketing {
      min-height: 30dvh;
      background: transparent;
      border-radius: 22px;
    }

    .dark .ds-auth-marketing {
      background: transparent;
    }
  }

  @media (min-width: 1024px) {
    .ds-auth-root {
      flex-direction: row;
      align-items: stretch;
      background: #ffffff;
      /* Видео-панель и форма «вписаны» в рамку экрана со скруглением (как в макете) */
      padding: 18px;
      gap: 28px;
    }

    .dark .ds-auth-root {
      background: #18181b;
    }
  }

  .ds-auth-marketing {
    position: relative;
    z-index: 0;
    display: flex;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    min-height: 38dvh;
    flex-shrink: 0;
    flex-direction: column;
    overflow: hidden;
    background: #0a0912;
    border-radius: 0;
  }

  .dark .ds-auth-marketing {
    background: #0a0912;
  }

  @media (min-width: 1024px) {
    .ds-auth-marketing {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
      min-height: calc(100dvh - 36px);
      overflow: hidden;
      border-radius: 28px;
    }
  }

  .ds-auth-marketing__shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
      180deg,
      rgb(10 9 18 / 0.38) 0%,
      rgb(10 9 18 / 0.06) 34%,
      rgb(10 9 18 / 0.5) 100%
    );
  }

  .ds-auth-marketing__inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 2.25rem 1.75rem 2.5rem;
  }

  @media (min-width: 1024px) {
    .ds-auth-marketing__inner {
      padding: 3rem 3rem 3.5rem;
    }
  }

  .ds-auth-marketing__brand-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.625rem;
  }

  .ds-auth-marketing__logo-img {
    display: block;
    height: 42px;
    width: 42px;
    object-fit: contain;
  }

  .ds-auth-marketing__wordmark {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
  }

  .ds-auth-marketing__lottie {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .ds-auth-marketing__video {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .ds-auth-marketing__video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.16);
    transform-origin: center center;
    border-radius: 0;
  }

  .ds-auth-marketing__lottie > div {
    width: 100% !important;
    height: 100% !important;
  }

  .ds-auth-marketing__lottie svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  .ds-auth-marketing__fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 30% 40%, #1e1b4b 0%, #0a0912 62%);
    border-radius: 0;
  }

  .ds-auth-marketing__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    color: #fff;
  }

  .ds-auth-marketing__content--steps {
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .ds-auth-marketing__content--quote {
    justify-content: flex-end;
  }

  .ds-auth-marketing__headline {
    margin-top: 1.5rem;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-shadow: 0 8px 40px rgb(0 0 0 / 0.4);
    hyphens: none;
    -webkit-hyphens: none;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .ds-auth-marketing__lead {
    margin-top: 0.75rem;
    max-width: 32ch;
    font-size: 1rem;
    line-height: 1.55;
    color: rgb(255 255 255 / 0.82);
    text-shadow: 0 4px 24px rgb(0 0 0 / 0.4);
    hyphens: none;
    -webkit-hyphens: none;
    text-wrap: pretty;
  }

  .ds-auth-steps {
    margin: 1.875rem 0 0;
    display: flex;
    width: 100%;
    max-width: 22rem;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    padding: 0;
  }

  .ds-auth-step {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    border-radius: 16px;
    padding: 0.875rem 1.125rem;
    text-align: left;
    transition: background-color 0.16s ease, color 0.16s ease;
  }

  .ds-auth-step--active {
    background: #fff;
    color: #0a0a0a;
    box-shadow: 0 14px 44px rgb(0 0 0 / 0.28);
  }

  .ds-auth-step--idle {
    background: rgb(255 255 255 / 0.1);
    color: rgb(255 255 255 / 0.85);
  }

  .ds-auth-step__num {
    display: inline-flex;
    height: 28px;
    width: 28px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-pill);
    font-size: 0.875rem;
    font-weight: 600;
  }

  .ds-auth-step--active .ds-auth-step__num {
    background: #0a0a0a;
    color: #fff;
  }

  .ds-auth-step--idle .ds-auth-step__num {
    border: 1.5px solid rgb(255 255 255 / 0.5);
    color: rgb(255 255 255 / 0.9);
  }

  .ds-auth-step__label {
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .ds-auth-marketing__tag {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
    color: rgb(255 255 255 / 0.82);
  }

  .ds-auth-marketing__title {
    margin-top: 1rem;
    max-width: 16ch;
    font-size: clamp(2.25rem, 4.8vw, 3.5rem);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.035em;
    color: #fff;
    text-shadow: 0 12px 48px rgb(0 0 0 / 0.45);
    hyphens: none;
    -webkit-hyphens: none;
    overflow-wrap: normal;
    text-wrap: balance;
  }

  .ds-auth-marketing__quote {
    margin-top: 1.25rem;
    max-width: 38ch;
    font-size: 1rem;
    line-height: 1.55;
    color: rgb(255 255 255 / 0.82);
    text-shadow: 0 4px 24px rgb(0 0 0 / 0.4);
    hyphens: none;
    -webkit-hyphens: none;
    text-wrap: pretty;
  }

  @media (max-width: 1023px) {
    .ds-auth-marketing__content--quote .ds-auth-marketing__quote,
    .ds-auth-marketing__content--quote .ds-auth-marketing__tag,
    .ds-auth-marketing__content--steps .ds-auth-steps,
    .ds-auth-marketing__content--steps .ds-auth-marketing__lead {
      display: none;
    }

    .ds-auth-marketing__inner {
      padding-bottom: 1.5rem;
    }

    .ds-auth-marketing__headline {
      margin-top: 1rem;
    }
  }

  .ds-auth-marketing__shine {
    pointer-events: none;
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(125deg, rgb(255 255 255 / 0.08) 0%, transparent 40%, transparent 100%);
  }

  .ds-auth-role-btn {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    height: 46px;
    padding: 0 12px;
    border: none;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 500;
    outline: none;
    transition: background-color 0.16s ease, color 0.16s ease;
    cursor: pointer;
  }

  .ds-auth-role-btn:focus-visible {
    box-shadow: 0 0 0 2px rgb(26 26 26 / 0.2);
  }

  .dark .ds-auth-role-btn:focus-visible {
    box-shadow: 0 0 0 2px rgb(255 255 255 / 0.35);
  }

  .ds-auth-role-btn--active {
    background: var(--ds-ink);
    color: #fff;
  }

  .dark .ds-auth-role-btn--active {
    background: #fff;
    color: #1a1a1a;
  }

  .ds-auth-role-btn--idle {
    background: rgb(0 0 0 / 0.06);
    color: var(--ds-ink);
  }

  .ds-auth-role-btn--idle:hover {
    background: rgb(0 0 0 / 0.12);
  }

  .dark .ds-auth-role-btn--idle {
    background: rgb(255 255 255 / 0.08);
    color: #fff;
  }

  .dark .ds-auth-role-btn--idle:hover {
    background: rgb(255 255 255 / 0.16);
  }

  .ds-auth-form-aside {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    /* Без backdrop-filter: в связке со скруглением даёт прямоугольный слой (Chromium/WebKit). */
    overflow: hidden;
    background: linear-gradient(165deg, rgb(255 255 255 / 0.92) 0%, rgb(250 250 252 / 0.88) 100%);
    padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
      max(1.75rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
    /* Разделитель колонок — border-left всегда прямой; вместо него только фон и тень */
    /* Колонка: «лист» формы поверх градиента — скруглённые верхние углы */
    margin-top: clamp(-1.25rem, -3.5vw, -0.5rem);
    border-top-left-radius: clamp(1.25rem, 5vw, 2.25rem);
    border-top-right-radius: clamp(1.25rem, 5vw, 2.25rem);
    box-shadow: 0 -4px 28px rgb(0 0 0 / 0.05);
  }

  .dark .ds-auth-form-aside {
    background: linear-gradient(165deg, rgb(24 24 27 / 0.92) 0%, rgb(15 15 18 / 0.94) 100%);
    box-shadow: 0 -4px 32px rgb(0 0 0 / 0.35);
    color: #fafafa;
  }

  @media (max-width: 1023px) {
    .ds-auth-form-aside {
      overflow: visible;
      background: #ffffff;
      box-shadow: none;
      margin-top: 0;
      border-radius: 22px;
    }

    .dark .ds-auth-form-aside {
      background: #141416;
      box-shadow: none;
    }

    /* Контент опускаем ниже переключателя языка + запас, чтобы был воздух до заголовка */
    .ds-auth-form-scroll {
      padding-top: 4.5rem;
    }
  }

  @media (min-width: 1024px) {
    .ds-auth-form-aside {
      flex: 1 1 0;
      width: auto;
      min-width: 0;
      margin-top: 0;
      min-height: calc(100dvh - 36px);
      border-radius: 0;
      padding: 2rem 1.5rem;
      background: transparent;
      box-shadow: none;
    }

    .dark .ds-auth-form-aside {
      background: transparent;
      box-shadow: none;
    }

    /* Clear the absolute top-right language switcher on desktop too, so a tall screen (e.g. the
       "Регистрация аккаунта" title) never slides under it. Symmetric-ish padding keeps content
       visually centered on shorter screens (login). */
    .ds-auth-form-scroll {
      padding-top: 4.5rem;
      padding-bottom: 2.5rem;
    }
  }

  .ds-auth-form-scroll {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
  }

  .ds-auth-form-inner {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 28rem;
  }

  @media (min-width: 1024px) {
    .ds-auth-form-inner {
      max-width: 30rem;
    }
  }

  .ds-auth-screen-title {
    text-align: center;
    font-size: clamp(1.75rem, 3.4vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #0a0a0a;
    hyphens: none;
    -webkit-hyphens: none;
    text-wrap: balance;
  }

  .dark .ds-auth-screen-title {
    color: #fafafa;
  }

  .ds-auth-screen-sub {
    margin-top: 0.625rem;
    margin-bottom: 2rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.55;
    color: #525252;
  }

  /* Переключатель языка — компактный выпадающий список, правый верхний угол формы */
  .ds-auth-lang {
    position: absolute;
    z-index: 5;
    top: max(1.5rem, env(safe-area-inset-top));
    right: max(1.5rem, env(safe-area-inset-right));
  }

  .ds-auth-lang__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 38px;
    padding: 0 0.75rem;
    border: none;
    border-radius: 12px;
    background: rgb(0 0 0 / 0.05);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: #404040;
    cursor: pointer;
    outline: none;
    transition: background-color 0.15s ease;
  }

  .ds-auth-lang__trigger:hover {
    background: rgb(0 0 0 / 0.09);
  }

  .ds-auth-lang__trigger:focus-visible {
    box-shadow: 0 0 0 3px rgb(0 0 0 / 0.08);
  }

  .ds-auth-lang__chevron {
    opacity: 0.55;
  }

  .dark .ds-auth-lang__trigger {
    background: rgb(255 255 255 / 0.1);
    color: #e5e5e5;
  }

  .dark .ds-auth-lang__trigger:hover {
    background: rgb(255 255 255 / 0.14);
  }

  .ds-auth-lang__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
  }

  .dark .ds-auth-screen-sub {
    color: #a3a3a3;
  }

  .ds-auth-accent-link {
    font-weight: 600;
    color: #0a0a0a;
    text-decoration: none;
    transition: opacity 0.15s ease;
  }

  .ds-auth-accent-link:hover {
    opacity: 0.65;
  }

  .dark .ds-auth-accent-link {
    color: #fafafa;
  }

  .dark .ds-auth-accent-link:hover {
    opacity: 0.8;
  }

  .ds-auth-divider {
    margin-top: 1.75rem;
    margin-bottom: 1.75rem;
    border: 0;
    border-top: 1px solid rgb(0 0 0 / 0.08);
  }

  .dark .ds-auth-divider {
    border-top-color: rgb(255 255 255 / 0.1);
  }

  /* Поля и кнопки — крупнее */
  .ds-auth-root .ds-input-field {
    height: 58px;
    border-radius: var(--ds-field-radius);
    border: var(--ds-field-border-width) solid var(--ds-field-border);
    background-color: var(--ds-field-bg);
    font-size: 1.0625rem;
    color: var(--ds-field-text);
  }

  .dark .ds-auth-root .ds-input-field {
    background-color: var(--ds-field-bg);
    border-color: var(--ds-field-border);
    color: var(--ds-field-text);
  }

  .ds-auth-root .ds-input-field::placeholder {
    color: var(--ds-field-placeholder);
  }

  .dark .ds-auth-root .ds-input-field::placeholder {
    color: var(--ds-field-placeholder);
  }

  .ds-auth-root .ds-input-field:focus-visible {
    border-color: var(--ds-field-border-focus);
    background-color: var(--ds-field-bg);
    box-shadow: none;
  }

  .dark .ds-auth-root .ds-input-field:focus-visible {
    border-color: var(--ds-field-border-focus);
    background-color: var(--ds-field-bg);
    box-shadow: none;
  }

  .ds-auth-root .ds-btn-primary-solid {
    height: 58px;
    border-radius: 14px;
    background-color: #1c1c1e;
    font-size: 1.0625rem;
    font-weight: 700;
  }

  .dark .ds-auth-root .ds-btn-primary-solid {
    background-color: #fafafa;
    color: #141414;
  }

  .ds-auth-root .ds-btn-primary-solid:hover:not(:disabled) {
    opacity: 0.9;
  }

  .ds-auth-root .ds-auth-field-label {
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #404040;
  }

  .dark .ds-auth-root .ds-auth-field-label {
    color: #d4d4d4;
  }

  .ds-segmented {
    display: inline-flex;
    width: fit-content;
    border-radius: var(--ds-radius-control);
    padding: 6px;
    background-color: #F5F5F8;
  }

  .ds-segmented__btn {
    border: none;
    border-radius: var(--ds-radius-control);
    padding: 10px 20px;
    font-family: inherit;
    font-size: var(--ds-text-body-sm);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-leading-body);
    cursor: pointer;
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
    background: transparent;
    color: var(--ds-text-muted);
  }

  .ds-segmented__btn:hover:not(.ds-segmented__btn--active) {
    color: var(--ds-ink);
  }

  .ds-segmented__btn--active {
    background-color: var(--ds-ink);
    color: #ffffff;
  }

  .ds-form-card {
    border-radius: var(--ds-radius-xl);
    border: 1px solid rgb(0 0 0 / 0.06);
    background-color: #fafafa;
    padding: var(--ds-space-6);
  }

  @media (min-width: 768px) {
    .ds-form-card {
      padding: var(--ds-space-8);
    }
  }

  /* Плоская белая зона формы (макет Figma, без «стеклянной» карточки) */
  .ds-auth-form-panel {
    width: 100%;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .ds-auth-field-label {
    display: block;
    margin-bottom: var(--ds-space-1);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-medium);
    letter-spacing: 0.02em;
    color: var(--ds-text-tertiary);
  }

  .ds-auth-field-label--flush {
    margin-bottom: 0;
  }

  .ds-auth-remember {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
  }

  .ds-auth-remember-track {
    position: relative;
    height: 22px;
    width: 38px;
    flex-shrink: 0;
    cursor: pointer;
    border: none;
    border-radius: var(--ds-radius-pill);
    padding: 0;
    transition: background-color 0.15s ease;
  }

  .ds-auth-remember-track--on {
    background-color: var(--ds-ink);
  }

  .ds-auth-remember-track--off {
    background-color: var(--ds-sidebar);
  }

  .ds-auth-remember-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    height: 16px;
    width: 16px;
    border-radius: var(--ds-radius-pill);
    background-color: #ffffff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
    transition: transform 0.15s ease;
  }

  .ds-auth-remember-track--on .ds-auth-remember-knob {
    transform: translateX(16px);
  }

  .ds-auth-social-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-3);
    padding-top: var(--ds-space-4);
  }

  .ds-auth-social-link {
    border: none;
    background: none;
    padding: 4px 2px;
    font-family: inherit;
    font-size: var(--ds-text-sm-plus);
    color: var(--ds-text-tertiary);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition:
      color 0.15s ease,
      text-decoration-color 0.15s ease;
  }

  .ds-auth-social-link:hover {
    color: var(--ds-ink);
    text-decoration-color: var(--ds-ink);
  }

  .ds-auth-social-sep {
    font-size: var(--ds-text-sm-plus);
    color: var(--ds-sidebar-hover);
  }

  .ds-contact-card {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    border-radius: var(--ds-radius-xl);
    border: 1px solid transparent;
    padding: var(--ds-space-2) var(--ds-space-3);
    transition:
      background-color 0.16s ease,
      border-color 0.16s ease,
      box-shadow 0.16s ease;
  }

  .ds-contact-card:hover {
    background-color: rgb(0 0 0 / 0.03);
    border-color: rgb(0 0 0 / 0.06);
    box-shadow: 0 8px 28px rgb(0 0 0 / 0.05);
  }

  .ds-feature-tile {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-4);
    border-radius: var(--ds-radius-xl);
    background-color: var(--ds-surface);
    padding: var(--ds-space-5);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
  }

  .ds-feature-tile__icon {
    display: grid;
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    place-content: center;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-sage);
    color: var(--ds-ink);
  }

  .ds-input-field {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--ds-field-height);
    border-radius: var(--ds-field-radius);
    border: var(--ds-field-border-width) solid var(--ds-field-border);
    background-color: var(--ds-field-bg);
    padding: 0 16px;
    font-family: inherit;
    font-size: var(--ds-text-body-sm);
    font-weight: var(--ds-font-normal);
    line-height: var(--ds-leading-body);
    color: var(--ds-field-text);
    caret-color: var(--ds-field-border-focus);
    outline: none;
    box-shadow: none;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .dark .ds-input-field {
    border-color: var(--ds-field-border);
    background-color: var(--ds-field-bg);
    color: var(--ds-field-text);
    caret-color: var(--ds-field-border-focus);
  }

  .ds-input-field::placeholder {
    color: var(--ds-field-placeholder);
  }

  /* iOS Safari auto-zooms the whole page on focus of any text input whose computed
     font-size is under 16px, and the zoom sticks after the user taps away — it isn't
     scoped to this field or page. Bump to 16px on touch/mobile widths only; desktop keeps
     the designed 14px. */
  @media (max-width: 767px) {
    .ds-input-field {
      font-size: 16px;
    }
  }

  .ds-input-field:focus-visible {
    border-color: var(--ds-field-border-focus);
    background-color: var(--ds-field-bg);
    /* Single clean outline — the dark focus border is the indicator; no extra outer halo. */
    box-shadow: none;
  }

  .dark .ds-input-field:focus-visible {
    border-color: var(--ds-field-border-focus);
    background-color: var(--ds-field-bg);
    box-shadow: none;
  }

  .ds-input-field:hover:not(:disabled):not(:focus-visible) {
    border-color: var(--ds-field-border-hover);
    background-color: var(--ds-field-bg-hover);
  }

  .dark .ds-input-field:hover:not(:disabled):not(:focus-visible) {
    border-color: var(--ds-field-border-hover);
    background-color: var(--ds-field-bg-hover);
  }

  .ds-input-field:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  textarea.ds-input-field {
    height: auto;
    min-height: 4rem;
    padding-top: 12px;
    padding-bottom: 12px;
    resize: vertical;
    field-sizing: content;
  }

  textarea.ds-input-field:focus-visible {
    caret-color: var(--ds-field-border-focus);
  }

  .ds-search-field {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
    min-height: var(--ds-field-height);
    border-radius: var(--ds-field-radius);
    border: var(--ds-field-border-width) solid var(--ds-field-border);
    background-color: var(--ds-field-bg);
    padding: 0 16px;
    color: var(--ds-field-text);
    box-shadow: none;
    outline: none;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .ds-search-field:hover:not(:focus-within) {
    border-color: var(--ds-field-border-hover);
    background-color: var(--ds-field-bg-hover);
  }

  .ds-search-field:focus-within {
    border-color: var(--ds-field-border-focus);
    background-color: var(--ds-field-bg);
    /* Single clean outline on focus — the dark border is the indicator; no extra outer halo. */
    box-shadow: none;
  }

  .ds-search-field svg {
    color: var(--ds-field-icon);
  }

  .ds-search-field input {
    min-width: 0;
    flex: 1 1 0%;
    border: 0;
    background: transparent;
    color: var(--ds-field-text);
    caret-color: var(--ds-field-border-focus);
    outline: none;
    box-shadow: none;
  }

  .ds-search-field input::placeholder {
    color: var(--ds-field-placeholder);
  }

  .ds-select-field {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--ds-select-height);
    border-radius: var(--ds-select-radius);
    border: var(--ds-field-border-width) solid var(--ds-select-border);
    background-color: var(--ds-select-bg);
    padding: 0 16px;
    font-family: inherit;
    font-size: var(--ds-text-body-sm);
    font-weight: var(--ds-font-normal);
    line-height: var(--ds-leading-body);
    color: var(--ds-select-text);
    outline: none;
    box-shadow: none;
    transition:
      background-color 0.15s ease,
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .dark .ds-select-field {
    border-color: var(--ds-select-border);
    background-color: var(--ds-select-bg);
    color: var(--ds-select-text);
  }

  .ds-select-field:focus-visible {
    border-color: var(--ds-select-border-focus);
    background-color: var(--ds-select-bg-open);
    box-shadow: none;
  }

  .dark .ds-select-field:focus-visible {
    border-color: var(--ds-select-border-focus);
    background-color: var(--ds-select-bg-open);
    box-shadow: none;
  }

  .ds-select-field:hover:not(:disabled):not(:focus-visible) {
    border-color: var(--ds-select-border-hover);
    background-color: var(--ds-select-bg-hover);
  }

  .dark .ds-select-field:hover:not(:disabled):not(:focus-visible) {
    border-color: var(--ds-select-border-hover);
    background-color: var(--ds-select-bg-hover);
  }

  [data-slot="select-trigger"].ds-select-field {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .ds-select-field[data-state="open"],
  [data-slot="select-trigger"].ds-select-field[data-state="open"] {
    border-color: var(--ds-select-border-focus);
    background-color: var(--ds-select-bg-open);
  }

  [data-slot="select-trigger"].ds-select-field[data-size="sm"] {
    height: 44px;
    min-height: 44px;
    padding-inline: 16px;
    font-size: var(--ds-text-body-sm);
  }

  [data-slot="select-trigger"].ds-select-field [data-slot="select-value"] {
    min-width: 0;
  }

  [data-slot="select-trigger"].ds-select-field[data-placeholder],
  [data-slot="select-trigger"].ds-select-field [data-slot="select-value"][data-placeholder] {
    color: var(--ds-select-placeholder);
  }

  /* Switch — Material-3 geometry (35×21 pill track, 11px→16px thumb, 1.5px off-outline;
     1.5x smaller than stock Material-3), ChinaChild colors. Pill/circle here is an
     intentional semantic exception, not a button. */
  .ds-switch {
    position: relative;
    display: inline-flex;
    width: var(--cc-switch-track-width);
    height: var(--cc-switch-track-height);
    flex-shrink: 0;
    align-items: center;
    border: 1.5px solid var(--cc-switch-track-off-border);
    border-radius: var(--cc-switch-track-radius);
    background-color: var(--cc-switch-track-off-bg);
    padding: 0;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    transition:
      background-color 0.18s ease,
      border-color 0.18s ease,
      opacity 0.15s ease;
  }

  .ds-switch:hover {
    background-color: var(--ds-switch-bg-off-hover);
  }

  .ds-switch[data-state="checked"],
  .ds-switch[aria-checked="true"],
  .ds-switch.ds-switch--on {
    background-color: var(--cc-switch-track-on-bg);
    border-color: transparent;
  }

  .ds-switch[data-state="checked"]:hover,
  .ds-switch[aria-checked="true"]:hover,
  .ds-switch.ds-switch--on:hover {
    background-color: var(--ds-switch-bg-on-hover);
  }

  .ds-switch:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-switch-track-on-bg) 30%, transparent);
  }

  .ds-switch:disabled,
  .ds-switch[data-disabled],
  .ds-switch[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* Off state: small thumb, left-aligned, tinted so it reads on the light track. */
  .ds-switch-thumb,
  .ds-switch__thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    width: var(--cc-switch-thumb-off-size);
    height: var(--cc-switch-thumb-off-size);
    border-radius: var(--cc-switch-thumb-radius);
    background-color: var(--cc-switch-thumb-off-bg);
    box-shadow: none;
    transform: translateY(-50%);
    transition:
      left 0.2s cubic-bezier(0.4, 0, 0.2, 1),
      width 0.2s ease,
      height 0.2s ease,
      background-color 0.2s ease;
  }

  /* On state: larger 24px thumb, right-aligned, on-color. */
  .ds-switch[data-state="checked"] .ds-switch-thumb,
  .ds-switch[data-state="checked"] .ds-switch__thumb,
  .ds-switch[aria-checked="true"] .ds-switch-thumb,
  .ds-switch[aria-checked="true"] .ds-switch__thumb,
  .ds-switch.ds-switch--on .ds-switch-thumb,
  .ds-switch.ds-switch--on .ds-switch__thumb {
    width: var(--cc-switch-thumb-on-size);
    height: var(--cc-switch-thumb-on-size);
    left: calc(100% - var(--cc-switch-thumb-on-size) - 1px);
    background-color: var(--cc-switch-thumb-on-bg);
  }

  .ds-btn-primary-solid {
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    height: 48px;
    border: none;
    border-radius: var(--ds-radius-md);
    background-color: var(--ds-ink);
    font-family: inherit;
    font-size: var(--ds-text-body);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-leading-body);
    color: #ffffff;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }

  .ds-btn-primary-solid:hover:not(:disabled) {
    opacity: 0.92;
  }

  .ds-btn-primary-solid:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .ds-btn-primary-solid:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(26 26 26 / 0.2);
  }

  .dark .ds-btn-primary-solid {
    background-color: #fafafa;
    color: #141414;
  }

  .dark .ds-btn-primary-solid:focus-visible {
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.25);
  }

  .ds-btn-social {
    display: inline-flex;
    height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    border-radius: var(--ds-radius-md);
    border: 1px solid rgb(0 0 0 / 0.1);
    background-color: var(--ds-surface);
    font-family: inherit;
    font-size: var(--ds-text-body-sm);
    font-weight: var(--ds-font-medium);
    color: var(--ds-ink);
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .ds-btn-social:hover {
    background-color: var(--input-background);
  }

  .ds-btn-social:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(26 26 26 / 0.12);
  }

  .ds-field-label {
    font-size: var(--ds-text-sm-plus);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-leading-body);
    color: var(--ds-ink);
  }

  .ds-course-card__icon-wrap {
    display: flex;
    height: 48px;
    width: 48px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-md);
    background-color: var(--ds-white-60);
  }

  .ds-progress-track {
    height: 8px;
    overflow: hidden;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-white-60);
  }

  .ds-progress-fill {
    height: 100%;
    border-radius: var(--ds-radius-pill);
    transition: width 0.25s ease;
  }

  .ds-activity-row {
    display: flex;
    align-items: center;
    gap: var(--ds-space-4);
    border-radius: var(--ds-radius-md);
    background-color: var(--ds-surface-muted);
    padding: var(--ds-space-4);
    text-decoration: none;
    color: inherit;
    outline: none;
    transition: background-color 0.15s ease;
  }

  .ds-activity-row:hover {
    background-color: var(--ds-surface-hover);
  }

  .ds-activity-row:focus-visible {
    box-shadow: 0 0 0 2px rgb(26 26 26 / 0.2);
  }

  /* —— Lesson screen tabs (Figmadasboard LessonPage.tsx) —— */
  .ds-lesson-figma-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
    margin-bottom: var(--ds-space-6);
    border-bottom: 1px solid var(--ds-sidebar);
    padding-bottom: 0;
  }

  .ds-lesson-figma-tab {
    margin-bottom: -1px;
    border: none;
    border-radius: 12px 12px 0 0;
    padding: 10px 20px;
    font-family: inherit;
    font-size: var(--ds-text-body-sm);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-leading-body);
    cursor: pointer;
    background: transparent;
    color: var(--ds-text-tertiary);
    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }

  .ds-lesson-figma-tab:hover:not(.ds-lesson-figma-tab--active) {
    color: var(--ds-ink);
  }

  .ds-lesson-figma-tab--active {
    background-color: var(--ds-ink);
    color: #ffffff;
  }

  /* —— Settings: p-6 md:p-8 от края main (компенсация shell-page-pad) —— */
  .ds-settings-page-bleed {
    box-sizing: border-box;
    width: calc(100% + 2rem);
    max-width: none;
    margin: -1rem;
    padding: 1.5rem;
    color: #1a1a1a;
  }

  @media (min-width: 768px) {
    .ds-settings-page-bleed {
      width: calc(100% + 5rem);
      margin: -2.5rem;
      padding: 2rem;
    }
  }

  .dark .ds-settings-page-bleed {
    color: var(--ds-ink);
  }

  .ds-settings-form-stack {
    display: flex;
    width: 100%;
    max-width: 540px;
    flex-direction: column;
    gap: 2rem;
    margin-left: auto;
    margin-right: auto;
  }

  @media (min-width: 768px) {
    .ds-settings-form-stack {
      gap: 2.5rem;
    }
  }

  /** Десктоп: 3 колонки; планшет — 2; мобилка — одна колонка */
  .ds-settings-panels-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  @media (min-width: 768px) {
    .ds-settings-panels-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1rem;
      align-items: stretch;
    }

    .ds-settings-panels-grid > .ds-settings-panel {
      height: 100%;
    }
  }

  @media (min-width: 1280px) {
    .ds-settings-panels-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* —— Настройки: последовательные категории и самостоятельные мягкие строки. —— */
  .ds-settings-groups {
    display: flex;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    flex-direction: column;
    gap: 2.5rem;
  }

  .ds-settings-profile-card {
    display: flex;
    width: 100%;
    min-height: 88px;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    border: 0;
    border-radius: var(--ds-radius-surface);
    background-color: var(--ds-surface-muted);
    padding: 16px;
    text-align: left;
    color: var(--ds-ink);
    transition: background-color 0.15s ease;
  }

  .ds-settings-profile-card:hover {
    background-color: var(--ds-surface-hover);
  }

  .ds-settings-profile-card:focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 2px;
  }

  .ds-settings-profile-card-avatar {
    position: relative;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-surface);
  }

  .ds-settings-profile-card-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 4px;
  }

  .ds-settings-profile-card-name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
  }

  .ds-settings-profile-card-role {
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--ds-text-tertiary);
  }

  .ds-settings-profile-card-edit {
    display: flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--ds-text-tertiary);
  }

  .ds-settings-profile-dialog {
    width: min(432px, calc(100vw - 32px));
    max-width: 432px;
    gap: 8px;
    background-color: #f0f1f5;
    padding: 8px;
  }

  .dark .ds-settings-profile-dialog {
    background-color: #313135;
  }

  .ds-settings-profile-dialog-top {
    display: grid;
    gap: 20px;
    border-radius: var(--ds-radius-surface);
    background-color: var(--ds-surface);
    padding: 22px 20px 24px;
  }

  .ds-settings-profile-dialog-title {
    font-size: 1.625rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
  }

  .ds-settings-profile-dialog-avatar-button {
    position: relative;
    width: 100px;
    height: 100px;
    justify-self: center;
    cursor: pointer;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background: transparent;
    padding: 0;
  }

  .ds-settings-profile-dialog-avatar-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .ds-settings-profile-dialog-avatar-button:focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 4px;
  }

  .ds-settings-profile-dialog-avatar {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-surface-muted);
  }

  .ds-settings-profile-dialog-avatar-edit {
    position: absolute;
    right: -2px;
    bottom: 0;
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-surface);
    color: var(--ds-ink);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  }

  .ds-settings-profile-preferred-field {
    width: 100%;
  }

  .ds-settings-profile-dialog-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: var(--ds-radius-surface);
    background-color: var(--ds-surface);
    padding: 22px 20px;
  }

  .ds-settings-profile-dialog-section-title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ds-ink);
  }

  .ds-settings-profile-dialog-footer {
    padding-top: 4px;
  }

  /**
   * Попапы раздела «Словарь» переиспользуют согласованный вид попапа настроек
   * профиля: те же классы .ds-settings-profile-dialog / -top / -section /
   * -section-title / -footer — серое полотно, белые карточки-секции, та же
   * типографика и кнопки. Отличается только ширина: она задаётся утилитой в
   * разметке, потому что правило `width` из .ds-settings-profile-dialog всё
   * равно перебивается `w-full` из базового DialogContent (utilities
   * выигрывают у components).
   *
   * Ниже — единственное, чего в наборе профиля нет: плоский список строк
   * внутри белой карточки (разобранные слова, выбор списка). Разделитель и
   * отрицательный инсет повторяют .ds-settings-list-row--plain из контактов.
   */
  .ds-vocabulary-dialog-rows {
    display: flex;
    flex-direction: column;
    margin-inline: -8px;
  }

  .ds-vocabulary-dialog-row {
    position: relative;
    display: grid;
    width: 100%;
    align-items: center;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 14px 8px;
    text-align: left;
  }

  .ds-vocabulary-dialog-row + .ds-vocabulary-dialog-row::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background-color: rgb(41 41 51 / 0.1);
    content: "";
    pointer-events: none;
  }

  .dark .ds-vocabulary-dialog-row + .ds-vocabulary-dialog-row::before {
    background-color: rgb(255 255 255 / 0.08);
  }

  .ds-settings-profile-contacts {
    --ds-settings-row-divider-inset: 60px;
    --ds-settings-row-divider-end: 0;
    margin-inline: -8px;
  }

  .ds-settings-profile-contacts .ds-settings-list-row--plain {
    min-height: 64px;
    padding: 10px 8px;
  }

  .ds-settings-profile-contacts .ds-settings-row-icon {
    width: 44px;
    height: 44px;
  }

  .ds-settings-primary-action {
    height: 48px;
    border-radius: var(--cc-radius-square-xs);
    padding-inline: 24px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
  }

  .ds-settings-primary-action--dialog {
    width: 100%;
  }

  .ds-settings-primary-action--page {
    width: 55%;
    min-width: 220px;
    max-width: 408px;
  }

  .ds-settings-password-dialog {
    --ds-settings-password-dialog-background: var(--ds-surface);
    box-sizing: border-box;
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 32px);
    display: block;
    overflow-y: auto;
    border-radius: var(--cc-radius-square-xl);
    background-color: var(--ds-surface);
    padding: 32px !important;
  }

  .ds-calendar-connect-banner {
    position: relative;
    height: 170px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: var(--ds-radius-surface);
    background: linear-gradient(105deg, #d8ecff 0%, #e2e9ff 55%, #eeeaff 100%);
    padding: 16px 32px;
    color: #17171c;
  }

  .ds-calendar-connect-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    max-width: 70%;
    flex-direction: column;
    align-items: flex-start;
    transform: translateY(12px);
  }

  .ds-calendar-connect-banner__headline {
    max-width: 700px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.18;
    letter-spacing: 0.005em;
  }

  .ds-calendar-connect-banner__description {
    max-width: 440px;
    margin-top: 5px;
    color: #545966;
    font-size: 14px;
  }

  .ds-calendar-connect-banner__button {
    min-width: 140px;
    height: 44px;
    margin-top: 20px;
    background: #18181b !important;
    padding-inline: 22px;
    color: #fff !important;
    font-size: 14px;
  }

  .ds-calendar-connect-banner__button:hover {
    background: #303036 !important;
  }

  .ds-calendar-connect-banner__switch {
    position: absolute;
    z-index: 1;
    top: 66%;
    left: 69%;
    width: 72px;
    height: auto;
    pointer-events: none;
    transform: translate(-50%, -50%) rotate(-5deg);
    object-fit: contain;
  }

  .ds-calendar-connect-banner__phone {
    position: absolute;
    z-index: 1;
    top: 16px;
    right: 6%;
    width: min(22%, 200px);
    height: auto;
    max-width: none;
    pointer-events: none;
    object-fit: contain;
  }

  .ds-calendar-connect-banner__close {
    position: absolute;
    z-index: 3;
    top: 8px;
    right: 8px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 0;
    border-radius: var(--cc-radius-square-xs);
    background: transparent;
    color: #676b76;
    transition: color 0.18s cubic-bezier(0.34, 0.8, 0.34, 1);
  }

  .ds-calendar-connect-banner__close:hover {
    background: transparent;
    color: #17171c;
  }

  .ds-calendar-connect-banner__close:active {
    color: #000;
  }

  .ds-calendar-connect-banner__close:focus-visible {
    outline: 3px solid rgb(89 94 106 / 0.34);
    outline-offset: 2px;
  }

  .ds-calendar-connect-banner__close svg {
    width: 18px;
    height: 18px;
  }

  .ds-calendar-connect-intro-phone {
    object-fit: cover;
    object-position: top;
    transform: translateX(8%);
  }

  .ds-calendar-connect-provider-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  @media (max-width: 767px) {
    .ds-calendar-connect-banner {
      height: clamp(390px, calc(520px - 28vw), 450px);
      padding: 28px 20px;
    }

    .ds-calendar-connect-banner__content {
      max-width: none;
      transform: none;
    }

    .ds-calendar-connect-banner__headline {
      width: 100%;
      max-width: 100%;
      font-size: clamp(20px, 6.4vw, 26px);
      line-height: 1.22;
      text-align: left;
    }

    .ds-calendar-connect-banner__button {
      min-width: 150px;
      height: 50px;
      margin-top: 20px;
      align-self: center;
      font-size: 16px;
    }

    .ds-calendar-connect-banner__phone {
      top: auto;
      right: auto;
      bottom: -24px;
      left: 56%;
      width: min(270px, calc(100% - 24px));
      transform: translateX(-50%);
    }

    .ds-calendar-connect-banner__close {
      display: grid;
    }

    .ds-calendar-connect-banner__switch {
      display: none;
    }

    .ds-calendar-connect-banner--connected {
      height: 220px;
      padding: 16px 20px;
    }

    .ds-calendar-connect-banner--connected .ds-calendar-connect-banner__content {
      max-width: 66%;
    }

    .ds-calendar-connect-banner--connected .ds-calendar-connect-banner__headline {
      font-size: 20px;
      line-height: 1.18;
    }

    .ds-calendar-connect-banner--connected .ds-calendar-connect-banner__button {
      min-width: 140px;
      height: 44px;
      margin-top: 14px;
      align-self: flex-start;
      font-size: 14px;
    }

    .ds-calendar-connect-banner--connected .ds-calendar-connect-banner__phone {
      right: -28px;
      bottom: -42px;
      left: auto;
      width: 150px;
      transform: none;
    }

    .ds-calendar-connect-banner--connected .ds-calendar-connect-banner__switch {
      top: auto;
      right: 108px;
      bottom: 10px;
      left: auto;
      display: block;
      width: 62px;
      transform: rotate(-5deg);
    }

  }

  @media (min-width: 560px) and (max-width: 767px) {
    .ds-calendar-connect-banner {
      height: 300px;
      padding: 28px;
    }

    .ds-calendar-connect-banner__content {
      width: 52%;
      max-width: 52%;
    }

    .ds-calendar-connect-banner__headline {
      font-size: 24px;
    }

    .ds-calendar-connect-banner__button {
      align-self: flex-start;
    }

    .ds-calendar-connect-banner__phone {
      right: 8px;
      bottom: -66px;
      left: auto;
      width: 280px;
      transform: none;
    }
  }

  @media (max-width: 399px) {
    .ds-calendar-connect-dialog {
      width: calc(100vw - 16px) !important;
      padding: 20px !important;
    }

    .ds-calendar-connect-provider {
      min-height: 64px;
      padding-block: 10px;
    }
  }

  @media (max-width: 279px) {
    .ds-calendar-connect-banner {
      padding: 24px 16px;
    }

    .ds-calendar-connect-banner__button {
      width: 100%;
      min-width: 0;
    }

    .ds-calendar-connect-dialog {
      padding: 16px !important;
    }

    .ds-calendar-connect-provider-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .dark .ds-settings-password-dialog {
    --ds-settings-password-dialog-background: var(--ds-canvas);
    --ds-ink: #fafaff;
    --ds-text-secondary: #c7c7d1;
    --ds-text-tertiary: #9595a1;
    --ds-field-border: #404045;
    --ds-field-border-hover: #55555c;
    background-color: var(--ds-canvas);
  }

  .ds-settings-password-dialog .ds-settings-password-header {
    position: relative;
    width: 100%;
    min-height: 34px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }

  .ds-settings-password-progress {
    position: absolute;
    top: 0;
    left: 50%;
    display: grid;
    transform: translateX(-50%);
    justify-items: center;
    gap: 5px;
    color: var(--ds-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
  }

  .ds-settings-password-progress-bars {
    display: flex;
    gap: 3px;
  }

  .ds-settings-password-progress-bars > span {
    width: 22px;
    height: 4px;
    border-radius: var(--ds-radius-pill);
    background-color: color-mix(in srgb, var(--ds-ink) 16%, transparent);
  }

  .ds-settings-password-progress-bars > span[data-active="true"] {
    background-color: var(--ds-ink);
  }

  .ds-settings-password-nav {
    position: absolute;
    top: -4px;
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--cc-radius-square-xs);
    background: transparent;
    color: var(--ds-text-tertiary);
    transition: background-color 0.2s cubic-bezier(0.34, 0.8, 0.34, 1), color 0.2s cubic-bezier(0.34, 0.8, 0.34, 1);
  }

  .ds-settings-password-nav:hover,
  .ds-settings-password-nav:active,
  .ds-settings-password-nav:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ds-ink);
  }

  .ds-settings-password-nav:focus-visible {
    outline: none !important;
  }

  .ds-settings-password-nav svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.75;
  }

  .ds-settings-password-nav--back {
    left: -6px;
  }

  .ds-settings-password-nav--close {
    right: -6px;
  }

  .ds-settings-password-step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-top: 34px;
  }

  .ds-settings-password-step--new {
    padding-top: 56px;
  }

  .ds-settings-password-step--success {
    align-items: center;
    padding-top: 52px;
  }

  .ds-settings-password-illustration {
    width: 220px;
    height: 120px;
    align-self: center;
    object-fit: contain;
  }

  .ds-settings-password-illustration--success {
    margin-bottom: 18px;
  }

  .ds-settings-password-title {
    margin: 24px auto 28px;
    max-width: 330px;
    color: var(--ds-ink);
    font-size: 30px;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-align: center;
  }

  .ds-settings-password-title--left {
    width: 100%;
    max-width: none;
    margin: 0 0 28px;
    font-size: 26px;
    text-align: left;
  }

  .ds-settings-password-field {
    position: relative;
    display: block;
    width: 100%;
  }

  .ds-settings-password-field input {
    width: 100%;
    height: 64px;
    border: 2px solid var(--ds-field-border);
    border-radius: var(--cc-radius-square-md);
    background-color: transparent;
    padding: 0 60px 0 26px;
    color: var(--ds-ink);
    font: inherit;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    outline: none;
    transition: background-color 0.18s cubic-bezier(0.34, 0.8, 0.34, 1), border-color 0.18s cubic-bezier(0.34, 0.8, 0.34, 1);
  }

  .ds-settings-password-field:hover input:not(:focus) {
    border-color: var(--ds-field-border-hover);
    background-color: var(--ds-neutral-row-hover);
  }

  .ds-settings-password-field input::placeholder {
    color: var(--ds-text-tertiary);
    opacity: 1;
  }

  .ds-settings-password-field input:focus,
  .ds-settings-password-field input:focus-visible {
    border: 2px solid var(--ds-field-border-focus) !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .ds-settings-password-field input:-webkit-autofill,
  .ds-settings-password-field input:-webkit-autofill:hover,
  .ds-settings-password-field input:-webkit-autofill:focus,
  .ds-settings-password-field input:-webkit-autofill:active {
    border: 2px solid var(--ds-field-border-focus) !important;
    -webkit-text-fill-color: var(--ds-ink) !important;
    caret-color: var(--ds-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--ds-settings-password-dialog-background) inset !important;
    box-shadow: 0 0 0 1000px var(--ds-settings-password-dialog-background) inset !important;
    outline: none !important;
  }

  .ds-settings-password-visibility {
    position: absolute;
    top: 50%;
    right: 18px;
    display: flex;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--cc-radius-square-xs);
    background: transparent;
    color: var(--ds-text-tertiary);
  }

  .ds-settings-password-visibility:hover,
  .ds-settings-password-visibility:active,
  .ds-settings-password-visibility:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ds-ink);
  }

  .ds-settings-password-visibility:focus-visible {
    outline: none !important;
  }

  .ds-settings-password-visibility svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.75;
  }

  .ds-settings-password-fields {
    display: grid;
    gap: 12px;
  }

  .ds-settings-password-requirements {
    display: grid;
    gap: 12px;
    margin: 26px 0 28px;
    color: var(--ds-text-tertiary);
    font-size: 15px;
    line-height: 1.25;
  }

  .ds-settings-password-requirements p,
  .ds-settings-password-requirements > span {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .ds-settings-password-requirements p {
    margin: 0;
    color: var(--ds-ink);
  }

  .ds-settings-password-requirement-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  .ds-settings-password-requirements span[data-met="true"],
  .ds-settings-password-requirements.is-strong p {
    color: #30a45d;
  }

  .ds-settings-password-text-action {
    width: 100%;
    min-height: 56px;
    align-self: center;
    margin: 20px 0;
    border: 0;
    border-radius: var(--cc-radius-square-md);
    background: transparent;
    color: var(--ds-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    transition: background-color 0.18s cubic-bezier(0.34, 0.8, 0.34, 1), color 0.18s cubic-bezier(0.34, 0.8, 0.34, 1);
  }

  .ds-settings-password-text-action:hover {
    background-color: var(--ds-neutral-row-hover);
    color: var(--ds-ink);
  }

  .ds-settings-password-text-action:focus-visible {
    border-radius: 6px;
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 4px;
  }

  .ds-settings-password-action {
    width: 100%;
    min-height: 56px;
    border-radius: var(--cc-radius-square-md);
    font-size: 18px;
    font-weight: 500;
  }

  .ds-settings-password-error,
  .ds-settings-password-result {
    margin: 14px 0 0;
    color: #2e8f52;
    font-size: 14px;
    line-height: 1.35;
    text-align: center;
  }

  .ds-settings-password-error,
  .ds-settings-password-result.is-error {
    color: var(--ds-danger-action);
  }

  .ds-settings-password-description {
    max-width: 340px;
    margin: -12px auto 30px;
    color: var(--ds-text-secondary);
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
  }

  .ds-settings-password-step--success .ds-settings-password-title {
    margin: 0 0 22px;
  }

  .ds-settings-password-step--success .ds-settings-password-text-action {
    margin: 30px 0 0;
  }

  .ds-settings-password-step--success .ds-settings-password-result {
    margin-top: 18px;
  }

  .ds-settings-contact-dialog {
    --ds-settings-contact-dialog-background: var(--ds-surface);
    box-sizing: border-box;
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 32px);
    display: block;
    overflow-y: auto;
    border-radius: var(--cc-radius-square-xl);
    background-color: var(--ds-surface);
    padding: 32px !important;
  }

  .ds-settings-timezone-dialog {
    box-sizing: border-box;
    width: min(420px, calc(100vw - 32px)) !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 32px);
    display: grid;
    gap: 20px;
    overflow-y: auto;
    border-radius: var(--cc-radius-square-xl);
    background-color: var(--ds-surface);
    padding: 32px !important;
  }

  .dark .ds-settings-timezone-dialog {
    background-color: var(--ds-canvas);
  }

  .ds-settings-timezone-header {
    align-items: center;
    gap: 12px;
    text-align: center;
  }

  .ds-settings-timezone-title {
    margin: 0;
    color: var(--ds-ink);
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    text-align: center;
  }

  .ds-settings-timezone-visual {
    position: relative;
    width: 100%;
    height: 270px;
    margin-top: 8px;
    overflow: hidden;
    border-radius: var(--ds-radius-surface);
    background: var(--ds-control-bg);
  }

  .ds-settings-timezone-visual-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    inset: 0 !important;
    object-fit: contain;
    object-position: right center;
  }

  .ds-settings-timezone-info {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 14px;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--ds-text-secondary);
    transition: color 0.18s cubic-bezier(0.34, 0.8, 0.34, 1);
  }

  .ds-settings-timezone-info:hover,
  .ds-settings-timezone-info:focus-visible {
    color: var(--ds-ink);
  }

  .ds-settings-timezone-info:focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 1px;
  }

  .ds-settings-timezone-info svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.75;
  }

  .ds-settings-timezone-detected {
    border-radius: var(--cc-radius-square-xs);
    background: var(--ds-control-bg);
    padding: 12px 16px;
    color: var(--ds-ink);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
  }

  .ds-settings-timezone-field {
    display: grid;
    gap: 8px;
    color: var(--ds-ink);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
  }

  .ds-settings-timezone-select {
    height: 56px !important;
    padding-inline: 18px;
    font-size: 16px;
    text-align: left;
  }

  .ds-settings-timezone-travel {
    position: absolute;
    z-index: 1;
    bottom: 16px;
    left: 16px;
    display: inline-flex;
    width: fit-content;
    align-items: center;
    border: 0;
    background: transparent;
    color: var(--ds-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    transition: color 0.18s cubic-bezier(0.34, 0.8, 0.34, 1);
  }

  .ds-settings-timezone-travel:hover,
  .ds-settings-timezone-travel:focus-visible {
    color: var(--ds-ink);
  }

  .ds-settings-timezone-travel:focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 3px;
  }

  .ds-settings-timezone-footer {
    display: block;
    margin: 0;
  }

  .dark .ds-settings-contact-dialog {
    --ds-settings-contact-dialog-background: var(--ds-canvas);
    --ds-ink: #fafaff;
    --ds-text-tertiary: #9595a1;
    --ds-field-border: #404045;
    --ds-field-border-hover: #55555c;
    background-color: var(--ds-canvas);
  }

  .ds-settings-contact-close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--cc-radius-square-xs);
    background: transparent;
    color: var(--ds-text-tertiary);
    transition: color 0.2s cubic-bezier(0.34, 0.8, 0.34, 1);
  }

  .ds-settings-contact-close:hover,
  .ds-settings-contact-close:active,
  .ds-settings-contact-close:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ds-ink);
  }

  .ds-settings-contact-close:focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 1px;
  }

  .ds-settings-contact-close svg {
    width: 26px;
    height: 26px;
    stroke-width: 1.75;
  }

  .ds-settings-contact-header {
    align-items: center;
    gap: 28px;
    text-align: center;
  }

  .ds-settings-contact-illustration {
    width: 220px;
    height: 120px;
    object-fit: contain;
  }

  .ds-settings-contact-title {
    margin: 0;
    transform: translateY(12px);
    color: var(--ds-ink);
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    text-align: center;
  }

  .ds-settings-contact-form {
    display: grid;
    gap: 24px;
    margin-top: 20px;
  }

  .ds-settings-contact-field {
    position: relative;
    display: block;
    width: 100%;
  }

  .ds-settings-contact-field > span {
    position: absolute;
    top: 9px;
    left: 24px;
    z-index: 1;
    color: var(--ds-text-tertiary);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    pointer-events: none;
  }

  .ds-settings-contact-field input {
    width: 100%;
    height: 64px;
    border: 2px solid var(--ds-field-border);
    border-radius: var(--cc-radius-square-md);
    background-color: transparent;
    padding: 23px 60px 5px 24px;
    color: var(--ds-ink);
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    outline: none;
    transition: background-color 0.18s cubic-bezier(0.34, 0.8, 0.34, 1), border-color 0.18s cubic-bezier(0.34, 0.8, 0.34, 1);
  }

  .ds-settings-contact-field:hover input:not(:focus) {
    border-color: var(--ds-field-border-hover);
    background-color: var(--ds-neutral-row-hover);
  }

  .ds-settings-contact-field input:focus,
  .ds-settings-contact-field input:focus-visible {
    border-color: var(--ds-field-border-focus) !important;
    outline: none !important;
    box-shadow: none !important;
  }

  .ds-settings-contact-field .ds-settings-contact-phone-input {
    width: 100%;
    height: 64px;
    overflow: hidden;
    border: 2px solid var(--ds-field-border);
    border-radius: var(--cc-radius-square-md);
    background-color: transparent;
    padding: 0;
  }

  .ds-settings-contact-field:hover .ds-settings-contact-phone-input:not(:focus-within) {
    border-color: var(--ds-field-border-hover);
    background-color: var(--ds-neutral-row-hover);
  }

  .ds-settings-contact-field .ds-settings-contact-phone-input:focus-within {
    border-color: var(--ds-field-border-focus) !important;
  }

  .ds-settings-contact-field .ds-settings-contact-phone-input input {
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 60px 0 12px;
    font-size: 16px;
  }

  .ds-settings-contact-field .ds-settings-contact-phone-input input:focus,
  .ds-settings-contact-field .ds-settings-contact-phone-input input:focus-visible {
    border: 0 !important;
  }

  .ds-settings-contact-field .ds-settings-contact-phone-country {
    padding: 0 12px 0 24px;
  }

  .ds-settings-contact-field input:-webkit-autofill,
  .ds-settings-contact-field input:-webkit-autofill:hover,
  .ds-settings-contact-field input:-webkit-autofill:focus,
  .ds-settings-contact-field input:-webkit-autofill:active {
    border-color: var(--ds-field-border-focus) !important;
    -webkit-text-fill-color: var(--ds-ink) !important;
    caret-color: var(--ds-ink);
    -webkit-box-shadow: 0 0 0 1000px var(--ds-settings-contact-dialog-background) inset !important;
    box-shadow: 0 0 0 1000px var(--ds-settings-contact-dialog-background) inset !important;
  }

  .ds-settings-contact-clear {
    position: absolute;
    top: 50%;
    right: 12px;
    display: flex;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--cc-radius-square-xs);
    background: transparent;
    color: var(--ds-text-tertiary);
  }

  .ds-settings-contact-clear:hover,
  .ds-settings-contact-clear:active,
  .ds-settings-contact-clear:focus-visible {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ds-ink);
  }

  .ds-settings-contact-clear:focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: -3px;
  }

  .ds-settings-contact-clear svg {
    width: 24px;
    height: 24px;
    stroke-width: 1.75;
  }

  .ds-settings-contact-error {
    margin: -16px 2px 0;
    color: #b85a62;
    font-size: 13px;
    line-height: 1.4;
  }

  .dark .ds-settings-contact-error {
    color: #e59ba2;
  }

  .ds-settings-contact-save {
    width: 100%;
    height: 48px;
    min-height: 48px;
    border-radius: var(--cc-radius-square-md);
    font-size: 16px;
    font-weight: 500;
  }

  @media (max-width: 639px) {
    .ds-settings-primary-action--page {
      width: 100%;
      min-width: 0;
    }

    .ds-settings-password-dialog {
      padding: 24px;
    }

    .ds-settings-password-title {
      font-size: 26px;
    }

    .ds-settings-password-title--left {
      font-size: 23px;
    }

    .ds-settings-password-field input {
      height: 64px;
      padding-left: 20px;
      font-size: 16px;
    }

    .ds-settings-password-action {
      min-height: 56px;
      font-size: 16px;
    }

    .ds-settings-contact-dialog {
      padding: 28px 20px 20px !important;
    }

    .ds-settings-timezone-dialog {
      padding: 28px 20px 20px !important;
    }

    .ds-settings-timezone-title {
      font-size: 28px !important;
    }

    .ds-settings-contact-close {
      top: 14px;
      right: 14px;
    }

    .ds-settings-contact-title {
      font-size: 28px !important;
    }

    .ds-settings-contact-form {
      margin-top: 20px;
    }

    .ds-settings-contact-field > span {
      left: 20px;
    }

    .ds-settings-contact-field input {
      height: 64px;
      padding-left: 20px;
      font-size: 16px;
    }
  }

  .ds-settings-profile-dialog .ds-settings-label {
    margin-bottom: 6px;
    font-size: 0.875rem;
    line-height: 1.25;
  }

  .ds-settings-profile-dialog .ds-settings-input {
    min-height: 44px;
    font-weight: 400;
  }

  .ds-settings-profile-dialog .ds-settings-profile-preferred-field p,
  .ds-settings-profile-dialog .ds-settings-profile-dialog-section p {
    margin-top: 8px;
    font-size: 0.875rem;
    line-height: 1.35;
  }

  .ds-settings-timezone-menu {
    width: var(--radix-select-trigger-width);
    max-height: 210px !important;
    border-radius: 20px !important;
    overflow: hidden;
  }

  .ds-settings-timezone-menu > [data-slot="select-scroll-up-button"],
  .ds-settings-timezone-menu > [data-slot="select-scroll-down-button"] {
    display: none;
  }

  .ds-settings-timezone-menu [data-slot="select-viewport"] {
    max-height: 210px;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 10px 8px 8px;
    scrollbar-color: #5d5d66 transparent;
    scrollbar-width: auto;
  }

  .ds-settings-timezone-menu [data-slot="select-viewport"]::-webkit-scrollbar {
    width: 10px;
  }

  .ds-settings-timezone-menu [data-slot="select-viewport"]::-webkit-scrollbar-track {
    background-color: transparent;
  }

  .ds-settings-timezone-menu [data-slot="select-viewport"]::-webkit-scrollbar-thumb {
    min-height: 40px;
    border: 3px solid transparent;
    border-radius: 999px;
    background-color: #5d5d66 !important;
    background-clip: padding-box;
  }

  .ds-settings-timezone-option {
    min-height: 42px;
    border-radius: var(--ds-select-item-radius);
    padding: 9px 40px 9px 14px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.3;
  }

  .ds-settings-timezone-option > span:first-child {
    right: 14px;
    width: 18px;
    height: 18px;
  }

  .dark .ds-settings-timezone-menu {
    background-color: #3c3c42 !important;
  }

  .dark .ds-settings-timezone-option[data-highlighted],
  .dark .ds-settings-timezone-option[data-state="checked"],
  .dark .ds-settings-timezone-option:focus {
    background-color: #56565f !important;
  }

  .ds-settings-profile-dialog > [data-slot="dialog-close"],
  .ds-settings-avatar-picker-dialog > [data-slot="dialog-close"] {
    top: 24px !important;
    right: 24px !important;
  }

  .ds-settings-profile-dialog > [data-slot="dialog-close"] svg,
  .ds-settings-avatar-picker-dialog > [data-slot="dialog-close"] svg {
    width: 24px !important;
    height: 24px !important;
  }

  .ds-settings-avatar-picker-dialog {
    width: min(560px, calc(100vw - 32px));
    max-width: 560px;
    max-height: calc(100dvh - 32px);
    gap: 24px;
    padding: 32px;
  }

  .ds-settings-avatar-picker-title {
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: -0.03em;
  }

  .ds-settings-avatar-picker-preview {
    position: relative;
    width: 144px;
    height: 144px;
    justify-self: center;
    overflow: hidden;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-surface-muted);
  }

  .ds-settings-avatar-picker-preview-emoji {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 86px;
    line-height: 1;
  }

  .ds-settings-avatar-colors {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .ds-settings-avatar-color {
    display: flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 0;
    border-radius: var(--ds-radius-pill);
    color: #292933;
    transition: transform 0.15s ease;
  }

  .ds-settings-avatar-color:hover {
    transform: scale(1.06);
  }

  .ds-settings-avatar-color:focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 2px;
  }

  .ds-settings-avatar-grid {
    display: grid;
    max-height: min(38vh, 360px);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-items: center;
    gap: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--ds-radius-surface);
    background-color: var(--ds-surface-muted);
    padding: 24px;
    scrollbar-gutter: stable;
  }

  .ds-settings-avatar-option {
    position: relative;
    width: 68px;
    height: 68px;
    flex: 0 0 auto;
    cursor: pointer;
    overflow: hidden;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-surface);
    padding: 0;
    transition: transform 0.15s ease;
  }

  .ds-settings-avatar-option:hover {
    transform: scale(1.04);
  }

  .ds-settings-avatar-option:focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 2px;
  }

  .ds-settings-avatar-option--selected {
    outline: 2px solid var(--ds-ink);
    outline-offset: 3px;
  }

  .ds-settings-avatar-option--camera {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #292933;
    color: #ffffff;
  }

  .dark .ds-settings-avatar-option--camera {
    background-color: #fafaff;
    color: #1a1a20;
  }

  .ds-settings-avatar-option--emoji {
    font-size: 42px;
    line-height: 1;
  }

  /* Кадрирование аватара: тёмная сцена, рамка выделения, пилюли действий. */
  .ds-avatar-crop-dialog {
    max-width: 760px;
    gap: 0;
    padding: 0;
    overflow: hidden;
    /* Одна поверхность целиком: сцена под фото и подвал с кнопками — того же тона,
       чтобы попап не сливался с тёмным фоном под ним. */
    background-color: #2a2a2e;
    color: #ffffff;
    box-shadow: 0 32px 90px -24px rgb(0 0 0 / 0.75);
  }

  .ds-avatar-crop-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / 0.12);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .ds-avatar-crop-close:hover {
    background-color: rgb(255 255 255 / 0.22);
  }

  .ds-avatar-crop-close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }

  .ds-avatar-crop-close:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .ds-avatar-crop-stage {
    position: relative;
    width: 100%;
    height: min(64vh, 520px);
    overflow: hidden;
    background-color: #2a2a2e;
    touch-action: none;
    user-select: none;
  }

  .ds-avatar-crop-frame {
    position: absolute;
    cursor: move;
    touch-action: none;
    outline: 1.5px solid #ffffff;
    outline-offset: -1px;
  }

  .ds-avatar-crop-frame:focus-visible {
    outline: 2px solid #ffffff;
  }

  .ds-avatar-crop-veil {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
  }

  .ds-avatar-crop-veil-hole {
    position: absolute;
    /* Дыра в затемнении: тень с огромным разбросом обрезается границами снимка. */
    box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.45);
  }

  .ds-avatar-crop-frame-circle {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / 0.12);
    pointer-events: none;
  }

  .ds-avatar-crop-handle {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    touch-action: none;
  }

  .ds-avatar-crop-handle[data-handle="tl"] {
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    cursor: nwse-resize;
  }

  .ds-avatar-crop-handle[data-handle="tr"] {
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%);
    cursor: nesw-resize;
  }

  .ds-avatar-crop-handle[data-handle="bl"] {
    top: 100%;
    left: 0;
    transform: translate(-50%, -50%);
    cursor: nesw-resize;
  }

  .ds-avatar-crop-handle[data-handle="br"] {
    top: 100%;
    left: 100%;
    transform: translate(-50%, -50%);
    cursor: nwse-resize;
  }

  .ds-avatar-crop-handle-dot {
    width: 18px;
    height: 18px;
    border: 2px solid #ffffff;
    border-radius: 9999px;
    background-color: rgb(0 0 0 / 0.25);
    transition: transform 0.15s ease, background-color 0.15s ease;
  }

  .ds-avatar-crop-handle:hover .ds-avatar-crop-handle-dot {
    transform: scale(1.15);
    background-color: rgb(255 255 255 / 0.3);
  }

  .ds-avatar-crop-error {
    margin: 0;
    padding: 14px 20px 0;
    text-align: center;
    font-size: 13px;
    color: #ff9d9d;
  }

  .ds-avatar-crop-actions {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 20px 20px 24px;
  }

  .ds-avatar-crop-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 176px;
    height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .ds-avatar-crop-action:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }

  .ds-avatar-crop-action:disabled {
    opacity: 0.6;
    pointer-events: none;
  }

  .ds-avatar-crop-action--ghost {
    background-color: rgb(35 35 36 / 0.55);
    color: #fafaff;
  }

  .ds-avatar-crop-action--ghost:hover {
    background-color: rgb(35 35 36 / 0.8);
  }

  .ds-avatar-crop-action--primary {
    background-color: #ffffff;
    color: #1f1f24;
  }

  .ds-avatar-crop-action--primary:hover {
    background-color: #e1e1e5;
  }

  .ds-settings-group-head {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ds-ink);
  }

  .ds-settings-group-caption {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--ds-text-tertiary);
  }

  .ds-settings-group-head-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .ds-settings-group-head-row + *,
  .ds-settings-group-caption + * {
    margin-top: 1rem;
  }

  .ds-settings-list {
    --ds-settings-row-divider-inset: 84px;
    --ds-settings-row-divider-end: 24px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: visible;
    background: transparent;
  }

  .ds-settings-list:has(> .ds-settings-list-row--plain) {
    gap: 0;
  }

  .ds-settings-list-row {
    display: flex;
    width: 100%;
    min-height: 88px;
    align-items: center;
    gap: 18px;
    border: 0;
    border-radius: var(--ds-radius-surface);
    background-color: var(--ds-surface-muted);
    padding: 16px 20px;
    text-align: left;
    font-family: inherit;
    color: inherit;
  }

  .ds-settings-list-row--block {
    display: block;
  }

  .ds-settings-list-row--plain {
    position: relative;
    min-height: 68px;
    gap: 16px;
    border-radius: var(--ds-radius-surface);
    background-color: transparent;
    padding: 12px 24px;
  }

  .ds-settings-list-row--plain + .ds-settings-list-row--plain::before {
    position: absolute;
    top: 0;
    right: var(--ds-settings-row-divider-end);
    left: var(--ds-settings-row-divider-inset);
    height: 1px;
    background-color: rgb(41 41 51 / 0.1);
    content: "";
    pointer-events: none;
    transition: opacity 0.15s ease;
  }

  .dark .ds-settings-list-row--plain + .ds-settings-list-row--plain::before {
    background-color: rgb(255 255 255 / 0.08);
  }

  .ds-settings-accent-section {
    padding-inline: 4px;
  }

  button.ds-settings-list-row--button {
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  button.ds-settings-list-row--button:hover {
    background-color: var(--ds-surface-hover);
  }

  button.ds-settings-list-row--plain:hover {
    border-radius: var(--ds-radius-surface);
    background-color: var(--ds-surface-hover);
  }

  button.ds-settings-list-row--plain:hover::before,
  button.ds-settings-list-row--plain:hover + .ds-settings-list-row--plain::before {
    opacity: 0;
  }

  button.ds-settings-list-row--button:focus-visible {
    outline: 3px solid var(--ds-focus-ring);
    outline-offset: 2px;
  }

  .ds-settings-row-icon {
    display: flex;
    height: 44px;
    width: 44px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-control);
    background-color: var(--ds-control-bg);
    color: var(--ds-text-secondary);
  }

  .dark .ds-settings-row-icon {
    background-color: rgb(255 255 255 / 0.08);
  }

  .ds-settings-list-row.ds-settings-list-row--plain > .ds-settings-row-icon {
    background-color: var(--ds-control-bg);
  }

  .ds-settings-row-icon--avatar {
    overflow: hidden;
    border-radius: 9999px;
    padding: 0;
  }

  .ds-settings-row-title {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ds-ink);
  }

  .ds-settings-row-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--ds-text-tertiary);
  }

  .ds-settings-row-trailing {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
    color: var(--ds-text-tertiary);
  }

  .ds-settings-list-row:has([data-slot="tabs-list"]) {
    flex-wrap: wrap;
  }

  .ds-settings-list-row:has([data-slot="tabs-list"]) .ds-settings-row-title {
    white-space: nowrap;
  }

  .ds-settings-list-row:has([data-slot="tabs-list"]) .ds-settings-row-trailing {
    width: 100%;
    justify-content: center;
  }

  .ds-settings-list-row--plain > .ds-settings-row-trailing:has(> svg:only-child) {
    width: 44px;
    height: 44px;
    justify-content: center;
    margin-left: auto;
  }

  .ds-settings-row-trailing > svg {
    color: color-mix(in srgb, var(--ds-text-tertiary) 72%, transparent);
  }

  .ds-settings-group-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 10px;
  }

  /* —— "Пустой слот" — обводка + "+" (референс Яндекс ID: «Открыть карту Пэй»,
   * «Добавить паспорт РФ»). Это ровно допустимое §2-исключение "an intentional
   * 2px outline-tile" — заливки тут нет, поэтому обводка не декоративная, а
   * единственный источник контраста для места, где элемент ещё не подключён. */
  .ds-settings-tile {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 136px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border: 0;
    border-radius: var(--ds-radius-surface);
    background: transparent;
    padding: 20px 52px 20px 20px;
    text-align: left;
    font-family: inherit;
    color: inherit;
  }

  .ds-settings-tile--outline {
    border: 2px solid rgb(41 41 51 / 0.14);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .dark .ds-settings-tile--outline {
    border-color: rgb(255 255 255 / 0.18);
  }

  .ds-settings-tile--outline:hover {
    border-color: rgb(41 41 51 / 0.26);
    background-color: var(--ds-surface-muted);
  }

  .dark .ds-settings-tile--outline:hover {
    border-color: rgb(255 255 255 / 0.3);
    background-color: var(--ds-surface-muted);
  }

  .ds-settings-tile--static {
    cursor: default;
  }

  .ds-settings-tile--static:hover {
    border-color: rgb(41 41 51 / 0.14);
    background-color: transparent;
  }

  .dark .ds-settings-tile--static:hover {
    border-color: rgb(255 255 255 / 0.18);
    background-color: transparent;
  }

  .ds-settings-tile-plus-badge {
    position: absolute;
    top: -14px;
    right: -10px;
    display: flex;
    height: 32px;
    width: 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-pill);
    background-color: #ffffff;
    color: var(--ds-text-tertiary);
  }

  .dark .ds-settings-tile-plus-badge {
    background-color: #1F1F24;
  }

  .ds-settings-tile-icon {
    display: flex;
    height: 44px;
    width: 44px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--ds-radius-control);
    background-color: var(--ds-surface-muted);
    color: var(--ds-text-secondary);
  }

  .ds-settings-tile-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ds-ink);
  }

  .ds-settings-tile-copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
  }

  .ds-settings-tile-subtitle {
    display: block;
    margin-top: 4px;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--ds-text-tertiary);
  }

  /* Illustration-led empty slot: the artwork is centered and anchored to the bottom of its
   * own row (most of these illustrations are drawn with empty space at the top, so anchoring
   * to the bottom instead of stretching keeps the visible art flush with the copy below it). */
  .ds-settings-tile--illustration {
    align-items: center;
    min-height: 108px;
    padding: 12px 24px 20px;
    text-align: center;
  }

  /* No copy follows the artwork in this tile — let it sit flush against the bottom border
   * instead of leaving padding underneath it. */
  .ds-settings-tile--illustration-flush {
    padding-bottom: 0;
  }

  .ds-settings-tile-copy--center {
    align-items: center;
  }

  /** Неактивные фильтры / техкнопки — серые на любом акценте */
  .ds-neutral-pill {
    background-color: var(--ds-neutral-chrome);
    color: var(--ds-ink);
    transition: background-color 0.15s ease;
  }

  .ds-neutral-pill:hover {
    background-color: var(--ds-neutral-chrome-hover);
  }

  .ds-settings-page-title {
    margin: 0;
    font-size: clamp(2rem, 4vw, 2.625rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--ds-ink);
  }

  @media (max-width: 639px) {
    .ds-settings-page-bleed {
      padding-inline: 1rem;
    }

    .ds-settings-form-stack {
      gap: 1.75rem;
    }

    .ds-settings-groups {
      gap: 2.25rem;
    }

    .ds-settings-list-row {
      min-height: 76px;
      gap: 12px;
      padding: 14px;
    }

    .ds-settings-list-row--plain {
      min-height: 68px;
      gap: 16px;
      padding: 12px 16px;
    }

    .ds-settings-list {
      --ds-settings-row-divider-inset: 76px;
      --ds-settings-row-divider-end: 16px;
    }

    .ds-settings-accent-grid {
      width: 100%;
    }

    .ds-settings-profile-card {
      min-height: 96px;
      gap: 16px;
      padding: 16px;
    }

    .ds-settings-profile-card-avatar {
      width: 56px;
      height: 56px;
    }

    .ds-settings-profile-dialog-top,
    .ds-settings-profile-dialog-section {
      padding-right: 20px;
      padding-left: 20px;
    }

    .ds-settings-avatar-picker-dialog {
      gap: 20px;
      padding: 24px 20px;
    }

    .ds-settings-avatar-picker-dialog > [data-slot="dialog-close"] {
      top: 16px;
      right: 16px;
    }

    .ds-settings-avatar-picker-preview {
      width: 124px;
      height: 124px;
    }

    .ds-settings-avatar-picker-preview-emoji {
      font-size: 72px;
    }

    .ds-settings-avatar-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      padding: 18px 12px;
    }

    .ds-settings-avatar-option {
      width: 56px;
      height: 56px;
    }

    .ds-settings-avatar-option--emoji {
      font-size: 36px;
    }

    .ds-avatar-crop-stage {
      height: min(56vh, 400px);
    }

    .ds-avatar-crop-close {
      top: 12px;
      right: 12px;
      width: 44px;
      height: 44px;
    }

    .ds-avatar-crop-actions {
      padding: 16px 16px 18px;
    }

    .ds-avatar-crop-actions {
      gap: 12px;
    }

    .ds-avatar-crop-action {
      width: 100%;
      max-width: 176px;
      height: 46px;
      font-size: 15px;
    }

    .ds-settings-row-icon {
      height: 44px;
      width: 44px;
    }

    .ds-settings-tile {
      min-height: 120px;
      padding: 18px 46px 18px 18px;
    }
  }

  .ds-settings-page-lead {
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.45;
    color: var(--ds-text-secondary);
  }

  @media (min-width: 768px) {
    .ds-settings-page-lead {
      margin-bottom: 2rem;
    }
  }

  @media (min-width: 1024px) {
    .ds-settings-page-header .ds-settings-page-lead {
      margin-bottom: 1rem;
    }
  }

  /* Секции настроек: светло-серые карточки в стиле макета (бледно-серый, без тени) */
  .ds-settings-panel {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    border: none;
    background-color: #F5F5F8;
    padding: 1.25rem 1.25rem 1.4rem;
    box-shadow: none;
  }

  /** Тело панели: вертикальный стек полей без принудительного растягивания по высоте соседей. */
  .ds-settings-panel-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
  }

  .ds-settings-panel-meta {
    flex-shrink: 0;
  }

  .ds-settings-panel-actions {
    margin-top: 0;
  }

  .dark .ds-settings-panel {
    background-color: #313135;
  }

  @media (min-width: 768px) {
    .ds-settings-panel {
      padding: 1.25rem 1.25rem 1.4rem;
    }
  }

  @media (min-width: 1024px) {
    .ds-settings-panel {
      padding: 1.15rem 1.25rem 1.3rem;
    }

    .ds-settings-panel .ds-settings-section-head {
      margin-bottom: var(--ds-space-4);
      font-size: 1.05rem;
    }
  }

  /* Мобилка/планшет: fixed-бар шапки (lg:hidden) не должен перекрывать заголовок «Оплата и баланс».
     Гасим отрицательный верхний margin от .ds-settings-page-bleed только для этой страницы. */
  @media (max-width: 1023px) {
    .ds-payment-page.ds-settings-page-bleed {
      margin-top: 0;
    }
  }

  /* —— Оплата: варианты карточек (светлая / тёмная тема), без обводки —— */
  .ds-payment-page .ds-settings-panel.ds-payment-panel {
    border: none;
    box-shadow: none;
  }

  .dark .ds-payment-page .ds-settings-panel.ds-payment-panel {
    border: none;
  }

  .ds-payment-page .ds-payment-panel.ds-payment-panel--neutral {
    background-color: var(--ds-neutral-row);
  }

  .dark .ds-payment-page .ds-payment-panel.ds-payment-panel--neutral {
    background-color: var(--ds-surface-muted);
  }

  /* Как блок «HSK 1 — Прогресс» в сайдбаре: bg-ds-sage */
  .ds-payment-page .ds-payment-panel.ds-payment-panel--sage {
    background-color: var(--ds-sage);
  }

  .dark .ds-payment-page .ds-payment-panel.ds-payment-panel--sage {
    background-color: var(--ds-sage);
  }

  .ds-payment-page .ds-payment-panel.ds-payment-panel--ink {
    background-color: var(--ds-ink);
    color: #ffffff;
    box-shadow: 0 8px 28px rgb(0 0 0 / 0.14);
  }

  .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .ds-settings-section-head {
    color: #ffffff;
  }

  .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .ds-settings-section-head svg {
    color: rgb(255 255 255 / 0.78);
  }

  .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .ds-settings-subtitle {
    color: rgb(255 255 255 / 0.92);
  }

  .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .text-ds-ink {
    color: #ffffff;
  }

  .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .text-ds-text-tertiary {
    color: rgb(255 255 255 / 0.68);
  }

  .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .ds-payment-panel--ink-cta {
    border: none;
    background-color: #ffffff;
    color: var(--ds-ink);
  }

  .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .ds-payment-panel--ink-cta:hover {
    opacity: 0.92;
  }

  /**
   * Тёмная тема: та же логика, что в светлой — тёмная «чернильная» плашка и светлый текст.
   * Раньше фон был #ececec, а var(--ds-ink) в .dark = светлый — заголовок сливался с карточкой.
   */
  .dark .ds-payment-page .ds-payment-panel.ds-payment-panel--ink {
    background-color: #1a1a1a;
    color: #ffffff;
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.55);
  }

  .dark .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .ds-settings-section-head {
    color: #ffffff;
  }

  .dark .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .ds-settings-section-head svg {
    color: rgb(255 255 255 / 0.78);
  }

  .dark .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .ds-settings-subtitle {
    color: rgb(255 255 255 / 0.92);
  }

  .dark .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .text-ds-ink {
    color: #ffffff;
  }

  .dark .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .text-ds-text-tertiary {
    color: rgb(255 255 255 / 0.72);
  }

  .dark .ds-payment-page .ds-payment-panel.ds-payment-panel--ink .ds-payment-panel--ink-cta {
    background-color: #ffffff;
    color: #141414;
  }

  .ds-settings-section-head {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    margin: 0 0 var(--ds-space-5);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ds-ink);
  }

  .ds-settings-section-head svg {
    flex-shrink: 0;
    color: var(--ds-text-tertiary);
  }

  .ds-settings-subtitle {
    margin-bottom: var(--ds-space-3);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ds-text-tertiary);
  }

  /** Шапка профиля куратора / преподавателя (как референс Figma) */
  .ds-mentor-hero {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  @media (min-width: 768px) {
    .ds-mentor-hero {
      flex-direction: row;
      align-items: flex-start;
      gap: 2.5rem;
    }
  }

  .ds-mentor-hero__photo-wrap {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    height: 168px;
    width: 168px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--ds-radius-lg);
    background-color: #f0f0f0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  }

  @media (min-width: 768px) {
    .ds-mentor-hero__photo-wrap {
      margin-left: 0;
      margin-right: 0;
      height: 176px;
      width: 176px;
    }
  }

  .ds-mentor-hero__stats-row {
    display: none;
    margin-top: 1.5rem;
    width: 100%;
    align-items: center;
  }

  @media (min-width: 768px) {
    .ds-mentor-hero__stats-row {
      display: flex;
      margin-top: 1.75rem;
    }
  }

  .ds-mentor-hero__stat-divider {
    height: 2rem;
    width: 1px;
    flex-shrink: 0;
    align-self: center;
    background-color: rgb(0 0 0 / 0.1);
  }

  .dark .ds-mentor-hero__stat-divider {
    background-color: rgb(255 255 255 / 0.12);
  }

  .ds-mentor-hero__stat-cell {
    display: flex;
    flex-direction: column;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .ds-mentor-hero__stat-cell:first-of-type {
    padding-left: 0;
  }

  .ds-mentor-hero__stat-cell:last-of-type {
    padding-right: 0;
  }

  .ds-mentor-hero__stat-value {
    font-size: var(--ds-text-2xl);
    font-weight: var(--ds-font-bold);
    line-height: 1;
    color: var(--ds-ink);
  }

  .ds-mentor-hero__stat-label {
    margin-top: 0.35rem;
    font-size: var(--ds-text-sm-plus);
    color: #666666;
  }

  .dark .ds-mentor-hero__stat-label {
    color: var(--ds-text-tertiary);
  }

  .ds-mentor-hero__actions {
    margin-top: 1.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
  }

  @media (min-width: 768px) {
    .ds-mentor-hero__actions {
      justify-content: flex-start;
    }
  }

  /**
   * Профиль преподавателя — блок «Предметы»: фон из палитры акцента (--ds-sage*),
   * заголовок и пилюли в тёмном оттенке того же ряда (как референс Figma).
   */
  .ds-mentor-subjects-card {
    border-radius: var(--ds-radius-lg);
    background-color: color-mix(in srgb, var(--ds-sage) 78%, #ffffff);
    padding: var(--ds-space-6);
  }

  @media (min-width: 768px) {
    .ds-mentor-subjects-card {
      padding: var(--ds-space-7);
    }
  }

  .dark .ds-mentor-subjects-card {
    background-color: color-mix(in srgb, var(--ds-sage) 55%, #0f0f0f);
  }

  .ds-mentor-subjects-card__head {
    display: flex;
    margin-bottom: var(--ds-space-4);
    align-items: center;
    gap: var(--ds-space-2);
    font-size: var(--ds-text-lg);
    font-weight: var(--ds-font-semibold);
    /* тёмный «лесной» оттенок в ряду акцента */
    color: color-mix(in srgb, var(--ds-sage-strong) 52%, #0f2912 48%);
  }

  .dark .ds-mentor-subjects-card__head {
    color: color-mix(in srgb, var(--ds-sage-hover) 70%, #f0fdf4 30%);
  }

  .ds-mentor-subjects-card__head svg {
    flex-shrink: 0;
    color: inherit;
  }

  .ds-mentor-subjects-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2);
  }

  .ds-mentor-subjects-pill {
    border-radius: 9999px;
    padding: 0.5rem 0.875rem;
    font-size: var(--ds-text-sm-plus);
    font-weight: var(--ds-font-medium);
    /* пилюли светлее карточки, текст того же тёмного зелёного ряда */
    background-color: color-mix(in srgb, var(--ds-sage) 22%, #ffffff 78%);
    color: color-mix(in srgb, var(--ds-sage-strong) 52%, #0f2912 48%);
  }

  .dark .ds-mentor-subjects-pill {
    background-color: color-mix(in srgb, var(--ds-sage) 35%, #ffffff 12%);
    color: color-mix(in srgb, var(--ds-sage-hover) 65%, #ffffff 35%);
  }

  .ds-settings-label {
    display: block;
    margin-bottom: var(--ds-space-1);
    font-size: var(--ds-text-xs);
    color: var(--ds-text-tertiary);
  }

  .ds-settings-public-card .ds-settings-input {
    font-size: 1rem;
    font-weight: 400;
  }

  @media (min-width: 768px) {
    .ds-settings-public-card .ds-settings-input {
      padding: 10px 16px;
      font-size: 0.875rem;
      font-weight: 400;
    }
  }

  .ds-settings-input {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--ds-field-height);
    border-radius: var(--ds-field-radius);
    border: var(--ds-field-border-width) solid var(--ds-field-border);
    background-color: var(--ds-field-bg);
    padding: 12px 20px;
    font-family: inherit;
    font-size: var(--ds-text-body-lg);
    font-weight: var(--ds-font-medium);
    line-height: 1.45;
    color: var(--ds-field-text);
    caret-color: var(--ds-field-border-focus);
    outline: none;
    box-shadow: none;
    transition:
      border-color 0.15s ease,
      background-color 0.15s ease;
  }

  textarea.ds-settings-input {
    display: block;
    min-height: 7.5rem;
    padding-top: 14px;
    padding-bottom: 14px;
    line-height: 1.55;
    resize: vertical;
  }

  input.ds-settings-input[type="number"] {
    line-height: 1.35;
  }

  .dark .ds-settings-input {
    border-color: var(--ds-field-border);
    background-color: var(--ds-field-bg);
    color: var(--ds-field-text);
    box-shadow: none;
  }

  .ds-settings-input:hover:not(:disabled):not(:focus) {
    border-color: var(--ds-field-border-hover);
    background-color: var(--ds-field-bg-hover);
  }

  .ds-settings-input:focus {
    border-color: var(--ds-field-border-focus);
    background-color: var(--ds-field-bg);
    box-shadow: none;
  }

  .dark .ds-settings-input:focus {
    border-color: var(--ds-field-border-focus);
    background-color: var(--ds-field-bg);
    box-shadow: none;
  }

  .ds-settings-input::placeholder {
    color: var(--ds-field-placeholder);
  }

  .ds-settings-accent-grid {
    display: grid;
    width: 72%;
    margin-inline: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .ds-settings-accent-tile {
    position: relative;
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: none;
    padding: var(--ds-space-4);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition:
      transform 0.15s ease,
      box-shadow 0.15s ease;
  }

  .ds-settings-accent-tile:hover {
    transform: scale(1.02);
  }

  .ds-settings-accent-tile--active {
    box-shadow: 0 10px 28px rgb(0 0 0 / 0.14);
  }

  .dark .ds-settings-accent-tile--active {
    box-shadow: 0 12px 36px rgb(0 0 0 / 0.5);
  }

  .ds-settings-accent-check {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    height: 26px;
    width: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background-color: rgb(255 255 255 / 0.95);
    color: var(--ds-sage-hover);
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  }

  .ds-settings-panel .ds-figma-toggle--on {
    background-color: var(--ds-switch-bg-on);
  }

  .ds-settings-panel .ds-figma-toggle--off {
    background-color: var(--ds-switch-bg-off);
  }

  .dark .ds-settings-panel .ds-figma-toggle--off {
    background-color: var(--ds-switch-bg-off);
  }

  .ds-figma-toggle {
    position: relative;
    display: inline-flex;
    height: 32px;
    width: 56px;
    flex-shrink: 0;
    align-items: center;
    cursor: pointer;
    border: 0;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-switch-bg-off);
    padding: 2px;
    transition:
      background-color 0.15s ease,
      opacity 0.15s ease;
  }

  .ds-figma-toggle--on {
    background-color: var(--ds-switch-bg-on);
  }

  .ds-figma-toggle--off {
    background-color: var(--ds-switch-bg-off);
  }

  .ds-figma-toggle-knob {
    display: block;
    height: 28px;
    width: 28px;
    border-radius: var(--ds-radius-pill);
    background-color: var(--ds-switch-thumb);
    box-shadow: var(--ds-switch-thumb-shadow);
    transform: translateX(0);
    transition: transform 0.15s ease;
  }

  .ds-figma-toggle--on .ds-figma-toggle-knob {
    transform: translateX(24px);
  }

  /* —— Schedule week column (Figmadasboard Schedule.tsx) —— */
  .ds-schedule-day-head {
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-2);
    text-align: center;
  }

  .ds-schedule-day-head--today {
    background-color: var(--ds-ink);
    color: #ffffff;
  }

  .dark .ds-schedule-day-head--today {
    background-color: #fafafa;
    color: #141414;
  }

  .ds-schedule-day-head--muted {
    background-color: var(--ds-neutral-chrome);
    color: var(--ds-text-tertiary);
  }

  .ds-schedule-slot {
    cursor: pointer;
    border-radius: var(--ds-radius-md);
    padding: 10px;
    transition: opacity 0.15s ease;
  }

  .ds-schedule-slot:hover {
    opacity: 0.92;
  }

  .ds-schedule-empty {
    min-height: 60px;
    flex: 1;
    border-radius: var(--ds-radius-md);
    border: 2px dashed var(--ds-neutral-chrome-hover);
  }

  .dark .ds-schedule-empty {
    border-color: rgb(255 255 255 / 0.12);
  }

  .ds-schedule-slot--lesson {
    background-color: #e2e3e8;
    color: var(--ds-ink);
  }

  .dark .ds-schedule-slot--lesson {
    background-color: #52525b;
    color: #fafafa;
  }

  .ds-schedule-slot--club {
    background-color: var(--ds-gray-tile);
    color: var(--ds-ink);
    border: 1px solid rgb(0 0 0 / 0.1);
  }

  .dark .ds-schedule-slot--club {
    border-color: rgb(255 255 255 / 0.14);
  }

  .ds-schedule-slot--test {
    background-color: var(--ds-pink);
    color: var(--ds-ink);
  }

  .dark .ds-schedule-slot--test {
    color: #fde8ea;
  }

  .ds-schedule-slot--event {
    background-color: var(--ds-sage);
    color: var(--ds-ink);
  }

  .dark .ds-schedule-slot--event {
    color: #ecfccb;
  }

  /* —— Classes list (Figmadasboard Classes.tsx) —— */
  .ds-class-card {
    background-color: var(--ds-neutral-row);
    color: inherit;
  }

  .ds-class-card:hover {
    background-color: var(--ds-neutral-row-hover);
  }

  /* —— Messages split layout —— */
  /* Плоская вёрстка как Figmadasboard Messages.tsx (без рамки вокруг всего чата) */
  .ds-messages-shell {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 0;
    background-color: var(--ds-surface);
    border: none;
    box-shadow: none;
  }

  .ds-messages-page {
    padding-bottom: 0;
  }

  /** Мобильный чат: занимаем оставшуюся высоту вьюпорта под плавающим баром */
  @media (max-width: 1023px) {
    .ds-figma-shell-main-scroll:has(.ds-messages-page) {
      overflow-y: hidden;
    }

    .ds-messages-page {
      flex: 1 1 auto;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow-x: hidden;
      min-height: calc(var(--visual-viewport-height, 100dvh) - var(--ds-mobile-messages-offset, 7.5rem));
      height: calc(var(--visual-viewport-height, 100dvh) - var(--ds-mobile-messages-offset, 7.5rem));
    }

    .ds-messages-page__frame {
      display: flex;
      min-height: 0;
      min-width: 0;
      flex: 1;
      flex-direction: column;
      max-width: 100%;
      overflow-x: hidden;
      height: 100%;
    }

    .ds-messages-shell {
      height: 100%;
      min-height: 0;
    }

    .ds-messages-sidebar {
      max-height: min(36dvh, 300px);
      min-width: 0;
    }

    .ds-messages-chat-panel {
      display: flex;
      min-height: 0;
      min-width: 0;
      flex: 1;
      flex-direction: column;
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      height: 100%;
    }
  }

  .ds-messages-sidebar {
    display: flex;
    width: 100%;
    flex-shrink: 0;
    flex-direction: column;
    border-bottom: 1px solid #e8e8e8;
    border-right: none;
  }

  @media (min-width: 1024px) {
    .ds-messages-sidebar {
      width: 300px;
      max-height: none;
      border-bottom: none;
      border-right: 1px solid #e8e8e8;
    }

    .ds-messages-page {
      display: flex;
      min-height: 0;
      height: auto;
      flex: 1 1 auto;
      flex-direction: column;
    }

    .ds-messages-page__frame {
      display: flex;
      min-height: 0;
      height: auto;
      max-height: none;
      flex: 1 1 auto;
      flex-direction: column;
    }

    .ds-messages-shell {
      flex: 1 1 auto;
      min-height: 0;
    }
  }

  .dark .ds-messages-sidebar {
    border-color: #333333;
  }

  .dark .ds-messages-search-wrap {
    border-bottom-color: #333333;
  }

  .dark .ds-messages-search-glass {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  .ds-messages-search {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    border-radius: var(--ds-radius-md);
    background-color: var(--ds-surface-pill);
    padding: 8px 12px;
  }

  .ds-messages-search input {
    min-width: 0;
    flex: 1;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--ds-text-body-sm);
    color: var(--ds-text-primary);
    outline: none;
  }

  .ds-messages-search input::placeholder {
    color: var(--ds-text-placeholder);
  }

  .ds-msg-bubble-them {
    background-color: var(--ds-surface-pill);
    color: var(--ds-text-primary);
  }

  .ds-msg-bubble-me {
    background-color: var(--ds-ink);
    color: #ffffff;
  }

  .ds-video-call-main-stage {
    flex: 1; /* Allow video to take available space */
  }

  .dark .ds-msg-bubble-them {
    background-color: #262626;
    color: #e8e8e8;
    border: 1px solid rgb(255 255 255 / 0.08);
  }

  .dark .ds-msg-bubble-me {
    background-color: #e8e8e8;
    color: #141414;
  }
}

/* ==========================================================================
   Lesson analytics dashboard — micro-interactions
   The chart BUILDS from an empty state, live, on hover — the purple line and its
   soft gradient reveal together, left → right. No marker sliding along a line that
   is already drawn. Deliberately unhurried (calm, premium — not snappy).
   Elements opt in via data-dash-motion so the reduced-motion guard can switch
   every dashboard animation off in one place.
   ========================================================================== */

/* Left → right reveal: line + gradient area draw on screen from nothing. */
@keyframes dash-wipe {
  from { clip-path: inset(-40px 100% -40px -40px); }
  to { clip-path: inset(-40px -40px -40px -40px); }
}

/* Arc drawing itself along its own path (gauge). */
@keyframes dash-draw {
  from { stroke-dashoffset: var(--dash-path-len, 320); }
  to { stroke-dashoffset: 0; }
}

@keyframes dash-pop {
  0% { transform: scale(0); opacity: 0; }
  70% { opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes dash-fill-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dash-grow-x {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Line/area chart builds from empty, left → right, on hover. ~1.5s, gentle ease. */
.dash-build { will-change: clip-path; }
.group:hover .dash-build,
.dash-viz-eager .dash-build {
  animation: dash-wipe 1500ms cubic-bezier(0.33, 0, 0.15, 1) both;
}

/* Endpoint marker appears only once the line has reached it. */
.dash-endpoint { opacity: 1; }
.group:hover .dash-endpoint,
.dash-viz-eager .dash-endpoint {
  animation: dash-fill-in 420ms ease-out both;
  animation-delay: 1250ms;
}

/* Gauge: active arc draws itself from the start of the scale to the value. */
.group:hover .dash-arc-active,
.dash-viz-eager .dash-arc-active {
  animation: dash-draw 1600ms cubic-bezier(0.33, 1, 0.68, 1) both;
}
.group:hover .dash-arc-marker,
.dash-viz-eager .dash-arc-marker {
  animation: dash-fill-in 420ms ease-out both;
  animation-delay: 1350ms;
}

/* Dot-matrix cascade — per-dot stagger set inline via animation-delay. */
.group:hover .dash-dot-cell,
.dash-viz-eager .dash-dot-cell {
  animation: dash-pop 620ms cubic-bezier(0.34, 1.1, 0.5, 1) both;
}

/* Comparative bar grows from the left; the knob settles in once it arrives. */
.dash-split-fill { transform-origin: left center; }
.group:hover .dash-split-fill,
.dash-viz-eager .dash-split-fill {
  animation: dash-grow-x 1400ms cubic-bezier(0.33, 0, 0.15, 1) both;
}
.group:hover .dash-split-knob,
.dash-viz-eager .dash-split-knob {
  animation: dash-fill-in 420ms ease-out both;
  animation-delay: 1200ms;
}

@media (prefers-reduced-motion: reduce) {
  [data-dash-motion],
  .dash-build,
  .dash-endpoint,
  .dash-arc-active,
  .dash-arc-marker,
  .dash-dot-cell,
  .dash-split-fill,
  .dash-split-knob {
    animation: none !important;
    transition: none !important;
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}