/* ============================================================
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600&display=swap');
   Khan SAT-1600 · DESIGN SYSTEM v4 (Premium Layer)
   Author: Xudoyorxon Bunyodov / Худоёрхон Бунёдов
   Brand: forest green #1B5E20 · gold #C9A227
   ------------------------------------------------------------
   Единый слой токенов и примитивов. Загружается ПОСЛЕДНИМ.
   Не переопределяет существующие классы силой — расширяет их
   и даёт переиспользуемые компоненты вместо inline-стилей.
   ============================================================ */

/* ---------------------------------------------------------------
   1. ТОКЕНЫ
   --------------------------------------------------------------- */
:root {
  /* --- Цвет: лесная зелень --- */
  --ds-green-950: #08240C;
  --ds-green-900: #0E3D14;
  --ds-green-800: #14501A;
  --ds-green-700: #1B5E20;
  --ds-green-600: #2E7D32;
  --ds-green-500: #43964A;
  --ds-green-300: #8FC194;
  --ds-green-100: #D6E8D8;
  --ds-green-050: #EAF2EB;
  --ds-green-025: #F4F9F4;

  /* --- Цвет: золото --- */
  --ds-gold-800: #6F5510;
  --ds-gold-700: #8C6E16;
  --ds-gold-600: #A8861B;
  --ds-gold-500: #C9A227;
  --ds-gold-300: #E2C766;
  --ds-gold-100: #F3E6B4;
  --ds-gold-050: #FBF4DD;

  /* --- Нейтрали (с зелёным подтоном, не серые) --- */
  --ds-ink:        #1A211B;
  --ds-ink-2:      #334035;
  --ds-muted:      #5C6B5F;
  --ds-muted-2:    #7E8C81;
  --ds-line:       #DCE5DD;
  --ds-line-soft:  #EAF0EA;
  --ds-paper:      #FFFFFF;
  --ds-paper-2:    #F8FBF8;
  --ds-bg:         #F4F7F3;

  /* --- Семантика --- */
  --ds-danger:     #B3261E;
  --ds-danger-bg:  #FCEBEA;
  --ds-danger-line:#F0C4C1;
  --ds-warn:       #9A6400;
  --ds-warn-bg:    #FFF6E5;
  --ds-warn-line:  #F0DDB6;
  --ds-ok:         #2E7D32;
  --ds-ok-bg:      #E9F5EA;
  --ds-ok-line:    #C3E0C5;
  --ds-info:       #14607F;
  --ds-info-bg:    #E7F3F8;
  --ds-info-line:  #BEDDE8;

  /* --- Типографика --- */
  --ds-serif: "Georgia", "Times New Roman", serif;
  --ds-sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ds-fs-2xs: 11px;
  --ds-fs-xs:  12px;
  --ds-fs-sm:  13px;
  --ds-fs-md:  15px;
  --ds-fs-lg:  17px;
  --ds-fs-xl:  21px;
  --ds-fs-2xl: 26px;
  --ds-fs-3xl: 33px;
  --ds-fs-4xl: 42px;

  --ds-lh-tight: 1.2;
  --ds-lh-snug:  1.35;
  --ds-lh-base:  1.55;
  --ds-lh-loose: 1.75;

  --ds-fw-regular: 400;
  --ds-fw-medium:  500;
  --ds-fw-semi:    600;
  --ds-fw-bold:    700;

  --ds-track-tight: -0.01em;
  --ds-track-wide:  0.04em;
  --ds-track-caps:  0.08em;

  /* --- Пространство (шаг 4px) --- */
  --ds-s0: 0;
  --ds-s1: 4px;
  --ds-s2: 8px;
  --ds-s3: 12px;
  --ds-s4: 16px;
  --ds-s5: 20px;
  --ds-s6: 24px;
  --ds-s7: 32px;
  --ds-s8: 40px;
  --ds-s9: 56px;
  --ds-s10: 72px;

  /* --- Радиусы --- */
  --ds-r-xs: 6px;
  --ds-r-sm: 9px;
  --ds-r-md: 12px;
  --ds-r-lg: 14px;
  --ds-r-xl: 20px;
  --ds-r-full: 999px;

  /* --- Тени (с зелёным подтоном) --- */
  --ds-e0: none;
  --ds-e1: 0 1px 2px rgba(16,61,20,.07);
  --ds-e2: 0 1px 2px rgba(16,61,20,.06), 0 6px 18px rgba(16,61,20,.06);
  --ds-e3: 0 2px 4px rgba(16,61,20,.07), 0 14px 34px rgba(16,61,20,.10);
  --ds-e4: 0 4px 8px rgba(16,61,20,.09), 0 26px 60px rgba(16,61,20,.16);
  --ds-ring: 0 0 0 3px rgba(201,162,39,.38);
  --ds-ring-danger: 0 0 0 3px rgba(179,38,30,.28);

  /* --- Движение --- */
  --ds-dur-1: 110ms;
  --ds-dur-2: 190ms;
  --ds-dur-3: 320ms;
  --ds-ease:      cubic-bezier(.4, 0, .2, 1);
  --ds-ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ds-ease-in:   cubic-bezier(.4, 0, 1, 1);

  /* --- Слои --- */
  --ds-z-base: 1;
  --ds-z-sticky: 50;
  --ds-z-dropdown: 400;
  --ds-z-overlay: 900;
  --ds-z-modal: 1000;
  --ds-z-palette: 1200;
  --ds-z-toast: 1400;
  --ds-z-top: 2000;

  /* --- Цель касания --- */
  --ds-touch: 44px;
}

/* --- Тёмная тема --- */
[data-theme="dark"] {
  --ds-ink:        #E8F0E9;
  --ds-ink-2:      #C3D2C5;
  --ds-muted:      #93A395;
  --ds-muted-2:    #79877B;
  --ds-line:       #2A3A2C;
  --ds-line-soft:  #223122;
  --ds-paper:      #142016;
  --ds-paper-2:    #18261A;
  --ds-bg:         #0C170E;

  --ds-green-050: #17281A;
  --ds-green-025: #132114;
  --ds-green-100: #1E3521;

  --ds-danger-bg:  #351816;
  --ds-danger-line:#57231F;
  --ds-warn-bg:    #33280F;
  --ds-warn-line:  #4E3C15;
  --ds-ok-bg:      #16301A;
  --ds-ok-line:    #24491F;
  --ds-info-bg:    #122A33;
  --ds-info-line:  #1D414E;

  --ds-e1: 0 1px 2px rgba(0,0,0,.5);
  --ds-e2: 0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.4);
  --ds-e3: 0 2px 4px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.5);
  --ds-e4: 0 4px 8px rgba(0,0,0,.5), 0 26px 60px rgba(0,0,0,.6);
}

/* ---------------------------------------------------------------
   2. ГЛОБАЛЬНЫЙ КАЧЕСТВЕННЫЙ ПОЛ
   --------------------------------------------------------------- */

/* Видимый фокус на всём — единый, золотой, брендовый */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-gold-500);
  outline-offset: 2px;
  border-radius: var(--ds-r-xs);
}

/* Уважение к reduced-motion — обязательный пол качества */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Цели касания на сенсорных устройствах */
@media (pointer: coarse) {
  :where(button, .btn, .nav-tab, .topnav a, [role="button"]) {
    min-height: var(--ds-touch);
  }
}

.ds-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Пропуск к содержимому — клавиатурная навигация */
.ds-skip {
  position: absolute; left: var(--ds-s4); top: -60px;
  z-index: var(--ds-z-top);
  background: var(--ds-gold-500); color: var(--ds-green-900);
  padding: var(--ds-s2) var(--ds-s4); border-radius: var(--ds-r-sm);
  font-weight: var(--ds-fw-semi); font-size: var(--ds-fs-sm);
  transition: top var(--ds-dur-2) var(--ds-ease-out);
}
.ds-skip:focus { top: var(--ds-s3); }

/* ---------------------------------------------------------------
   3. КНОПКИ
   --------------------------------------------------------------- */
.ds-btn {
  --_bg: var(--ds-green-700);
  --_fg: #fff;
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ds-s2);
  min-height: 40px; padding: 0 var(--ds-s4);
  font-family: var(--ds-sans); font-size: var(--ds-fs-sm);
  font-weight: var(--ds-fw-semi); line-height: 1;
  color: var(--_fg); background: var(--_bg);
  border: 1px solid var(--_bd); border-radius: var(--ds-r-sm);
  cursor: pointer; user-select: none; text-decoration: none;
  position: relative; overflow: hidden;
  transition: background var(--ds-dur-1) var(--ds-ease),
              border-color var(--ds-dur-1) var(--ds-ease),
              box-shadow var(--ds-dur-1) var(--ds-ease),
              transform var(--ds-dur-1) var(--ds-ease);
}
.ds-btn:hover:not([disabled]):not([aria-busy="true"]) { filter: brightness(1.08); }
.ds-btn:active:not([disabled]) { transform: translateY(1px); filter: brightness(.94); }
.ds-btn[disabled], .ds-btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; filter: none;
}

.ds-btn--gold      { --_bg: var(--ds-gold-500); --_fg: var(--ds-green-900); }
.ds-btn--ghost     { --_bg: transparent; --_fg: var(--ds-green-700); --_bd: var(--ds-line); }
.ds-btn--ghost:hover:not([disabled]) { background: var(--ds-green-050); filter: none; }
.ds-btn--quiet     { --_bg: transparent; --_fg: var(--ds-muted); --_bd: transparent; }
.ds-btn--quiet:hover:not([disabled]) { background: var(--ds-green-050); color: var(--ds-ink); filter: none; }
.ds-btn--danger    { --_bg: var(--ds-danger); --_fg: #fff; }
.ds-btn--danger-ghost { --_bg: transparent; --_fg: var(--ds-danger); --_bd: var(--ds-danger-line); }
.ds-btn--sm        { min-height: 32px; padding: 0 var(--ds-s3); font-size: var(--ds-fs-xs); }
.ds-btn--lg        { min-height: 48px; padding: 0 var(--ds-s6); font-size: var(--ds-fs-md); }
.ds-btn--block     { display: flex; width: 100%; }
.ds-btn--icon      { padding: 0; width: 40px; }
.ds-btn--icon.ds-btn--sm { width: 32px; }

/* Загрузка: золотая нить — фирменный мотив вместо универсального спиннера */
.ds-btn[aria-busy="true"] { cursor: progress; color: transparent; }
.ds-btn[aria-busy="true"]::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ds-gold-300), transparent);
  animation: ds-thread 900ms linear infinite;
}
@keyframes ds-thread {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.ds-btn[data-state="success"] { --_bg: var(--ds-ok); --_fg: #fff; }
.ds-btn[data-state="error"]   { --_bg: var(--ds-danger); --_fg: #fff; }

/* ---------------------------------------------------------------
   4. ПОЛЯ ВВОДА
   --------------------------------------------------------------- */
.ds-field { display: flex; flex-direction: column; gap: var(--ds-s1); margin-bottom: var(--ds-s4); }
.ds-label {
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi);
  color: var(--ds-muted); letter-spacing: var(--ds-track-wide);
  text-transform: uppercase;
}
.ds-input, .ds-select, .ds-textarea {
  width: 100%; min-height: 40px;
  padding: var(--ds-s2) var(--ds-s3);
  font-family: var(--ds-sans); font-size: var(--ds-fs-md); line-height: var(--ds-lh-snug);
  color: var(--ds-ink); background: var(--ds-paper);
  border: 1px solid var(--ds-line); border-radius: var(--ds-r-sm);
  transition: border-color var(--ds-dur-1) var(--ds-ease), box-shadow var(--ds-dur-1) var(--ds-ease);
}
.ds-textarea { min-height: 96px; resize: vertical; }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--ds-green-300); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none; border-color: var(--ds-gold-500); box-shadow: var(--ds-ring);
}
.ds-input[disabled], .ds-textarea[disabled] { background: var(--ds-green-025); color: var(--ds-muted-2); cursor: not-allowed; }
.ds-input[aria-invalid="true"], .ds-textarea[aria-invalid="true"] {
  border-color: var(--ds-danger); box-shadow: var(--ds-ring-danger);
}
.ds-hint  { font-size: var(--ds-fs-xs); color: var(--ds-muted); }
.ds-error { font-size: var(--ds-fs-xs); color: var(--ds-danger); font-weight: var(--ds-fw-medium); }
.ds-ok    { font-size: var(--ds-fs-xs); color: var(--ds-ok); font-weight: var(--ds-fw-medium); }

/* ---------------------------------------------------------------
   5. КАРТОЧКИ И ПОВЕРХНОСТИ
   --------------------------------------------------------------- */
.ds-card {
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-e1);
  padding: var(--ds-s5);
  transition: box-shadow var(--ds-dur-2) var(--ds-ease), border-color var(--ds-dur-2) var(--ds-ease);
}
.ds-card--interactive { cursor: pointer; }
.ds-card--interactive:hover { box-shadow: var(--ds-e3); border-color: var(--ds-green-300); }
.ds-card__head { display: flex; align-items: baseline; gap: var(--ds-s3); margin-bottom: var(--ds-s4); }
.ds-card__title {
  font-family: var(--ds-serif); font-size: var(--ds-fs-lg);
  font-weight: var(--ds-fw-bold); letter-spacing: var(--ds-track-tight);
  color: var(--ds-ink); margin: 0;
}
.ds-card__sub { font-size: var(--ds-fs-sm); color: var(--ds-muted); }

/* ---------------------------------------------------------------
   6. СОСТОЯНИЯ: ЗАГРУЗКА / ПУСТО / ОШИБКА
   --------------------------------------------------------------- */
.ds-skeleton {
  background: linear-gradient(90deg, var(--ds-green-050) 25%, var(--ds-green-100) 37%, var(--ds-green-050) 63%);
  background-size: 400% 100%;
  animation: ds-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--ds-r-xs);
  color: transparent !important;
  pointer-events: none;
}
@keyframes ds-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.ds-skeleton--text { height: 1em; margin: .35em 0; }
.ds-skeleton--title { height: 1.5em; width: 45%; margin-bottom: var(--ds-s4); }
.ds-skeleton--block { height: 120px; }

/* Индикатор загрузки страницы — золотая нить под шапкой */
.ds-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: var(--ds-z-top); background: transparent; pointer-events: none;
  opacity: 0; transition: opacity var(--ds-dur-2) var(--ds-ease);
}
.ds-progress.is-on { opacity: 1; }
.ds-progress::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--ds-gold-500), var(--ds-gold-300), transparent);
  animation: ds-thread 1.1s linear infinite;
}

.ds-empty, .ds-errorstate {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--ds-s3); padding: var(--ds-s9) var(--ds-s5);
  border: 1px dashed var(--ds-line); border-radius: var(--ds-r-lg);
  background: var(--ds-paper-2);
}
.ds-empty__mark, .ds-errorstate__mark {
  width: 52px; height: 52px; border-radius: var(--ds-r-md);
  display: grid; place-items: center; font-family: var(--ds-serif);
  font-size: var(--ds-fs-xl); font-weight: var(--ds-fw-bold);
  background: var(--ds-green-050); color: var(--ds-green-600);
}
.ds-errorstate { border-color: var(--ds-danger-line); background: var(--ds-danger-bg); }
.ds-errorstate__mark { background: #fff; color: var(--ds-danger); }
.ds-empty__title, .ds-errorstate__title {
  font-family: var(--ds-serif); font-size: var(--ds-fs-lg);
  font-weight: var(--ds-fw-bold); color: var(--ds-ink);
}
.ds-empty__body, .ds-errorstate__body {
  font-size: var(--ds-fs-sm); color: var(--ds-muted); max-width: 46ch; line-height: var(--ds-lh-base);
}

/* ---------------------------------------------------------------
   7. МОДАЛЬНЫЕ ОКНА
   --------------------------------------------------------------- */
.ds-overlay {
  position: fixed; inset: 0; z-index: var(--ds-z-modal);
  background: rgba(8,36,12,.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: var(--ds-s4);
  animation: ds-fade var(--ds-dur-2) var(--ds-ease-out);
}
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
.ds-modal {
  width: min(520px, 100%); max-height: min(88vh, 760px);
  display: flex; flex-direction: column;
  background: var(--ds-paper); color: var(--ds-ink);
  border-radius: var(--ds-r-xl); box-shadow: var(--ds-e4);
  border-top: 3px solid var(--ds-gold-500);
  overflow: hidden;
  animation: ds-rise var(--ds-dur-3) var(--ds-ease-out);
}
@keyframes ds-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.ds-modal--wide { width: min(880px, 100%); }
.ds-modal__head {
  padding: var(--ds-s5) var(--ds-s6) var(--ds-s3);
  display: flex; align-items: flex-start; gap: var(--ds-s3);
}
.ds-modal__title {
  font-family: var(--ds-serif); font-size: var(--ds-fs-xl);
  font-weight: var(--ds-fw-bold); letter-spacing: var(--ds-track-tight); margin: 0; flex: 1;
}
.ds-modal__body {
  padding: 0 var(--ds-s6) var(--ds-s5);
  overflow-y: auto; font-size: var(--ds-fs-md);
  line-height: var(--ds-lh-base); color: var(--ds-ink-2);
}
.ds-modal__foot {
  padding: var(--ds-s4) var(--ds-s6);
  display: flex; gap: var(--ds-s2); justify-content: flex-end;
  border-top: 1px solid var(--ds-line-soft); background: var(--ds-paper-2);
}
@media (max-width: 560px) {
  .ds-overlay { align-items: flex-end; padding: 0; }
  .ds-modal { width: 100%; border-radius: var(--ds-r-xl) var(--ds-r-xl) 0 0; max-height: 92vh; }
  .ds-modal__foot { flex-direction: column-reverse; }
  .ds-modal__foot .ds-btn { width: 100%; }
}

/* ---------------------------------------------------------------
   8. УВЕДОМЛЕНИЯ
   --------------------------------------------------------------- */
.ds-toasts {
  position: fixed; z-index: var(--ds-z-toast);
  bottom: var(--ds-s5); right: var(--ds-s5);
  display: flex; flex-direction: column; gap: var(--ds-s2);
  max-width: min(380px, calc(100vw - 32px)); pointer-events: none;
}
@media (max-width: 560px) {
  .ds-toasts { left: var(--ds-s3); right: var(--ds-s3); bottom: var(--ds-s3); max-width: none; }
}
.ds-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--ds-s3);
  padding: var(--ds-s3) var(--ds-s4);
  background: var(--ds-green-900); color: #EFF6EF;
  border-left: 3px solid var(--ds-gold-500);
  border-radius: var(--ds-r-sm); box-shadow: var(--ds-e3);
  font-size: var(--ds-fs-sm); line-height: var(--ds-lh-snug);
  animation: ds-toast-in var(--ds-dur-3) var(--ds-ease-out);
}
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ds-toast.is-out { animation: ds-toast-out var(--ds-dur-2) var(--ds-ease-in) forwards; }
@keyframes ds-toast-out { to { opacity: 0; transform: translateY(6px); } }
.ds-toast--ok     { border-left-color: var(--ds-green-500); }
.ds-toast--error  { border-left-color: var(--ds-danger); }
.ds-toast--warn   { border-left-color: var(--ds-warn); }
.ds-toast__body   { flex: 1; }
.ds-toast__action {
  background: none; border: 0; color: var(--ds-gold-300);
  font: inherit; font-weight: var(--ds-fw-semi); cursor: pointer;
  padding: 0; text-decoration: underline; white-space: nowrap;
}

/* ---------------------------------------------------------------
   9. ТАБЛИЦЫ
   --------------------------------------------------------------- */
.ds-tabletools {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-s2);
  margin-bottom: var(--ds-s3);
}
.ds-tabletools .ds-input { max-width: 260px; min-height: 34px; font-size: var(--ds-fs-sm); }
.ds-tabletools__count { font-size: var(--ds-fs-xs); color: var(--ds-muted); margin-left: auto; }

.ds-tablewrap { overflow-x: auto; border: 1px solid var(--ds-line); border-radius: var(--ds-r-md); background: var(--ds-paper); }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-fs-sm); }
.ds-table th, .ds-table td {
  padding: var(--ds-s3) var(--ds-s4); text-align: left;
  border-bottom: 1px solid var(--ds-line-soft); vertical-align: middle;
}
.ds-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ds-green-050); color: var(--ds-green-800);
  font-weight: var(--ds-fw-semi); font-size: var(--ds-fs-xs);
  letter-spacing: var(--ds-track-wide); text-transform: uppercase;
  border-bottom: 1px solid var(--ds-line); white-space: nowrap;
}
.ds-table thead th[data-sortable] { cursor: pointer; user-select: none; }
.ds-table thead th[data-sortable]:hover { background: var(--ds-green-100); }
.ds-table thead th[data-sortable]::after {
  content: "↕"; margin-left: var(--ds-s1); opacity: .35; font-size: 10px;
}
.ds-table thead th[aria-sort="ascending"]::after  { content: "↑"; opacity: 1; color: var(--ds-gold-600); }
.ds-table thead th[aria-sort="descending"]::after { content: "↓"; opacity: 1; color: var(--ds-gold-600); }
.ds-table tbody tr { transition: background var(--ds-dur-1) var(--ds-ease); }
.ds-table tbody tr:hover { background: var(--ds-green-025); }
.ds-table tbody tr[aria-selected="true"] { background: var(--ds-gold-050); }
.ds-table tbody tr:last-child td { border-bottom: 0; }

/* Мобильная таблица: карточки вместо горизонтального скролла */
@media (max-width: 640px) {
  .ds-table--stack thead { display: none; }
  .ds-table--stack tbody tr {
    display: block; padding: var(--ds-s3);
    border-bottom: 1px solid var(--ds-line);
  }
  .ds-table--stack tbody td {
    display: flex; justify-content: space-between; gap: var(--ds-s3);
    padding: var(--ds-s1) 0; border: 0; text-align: right;
  }
  .ds-table--stack tbody td::before {
    content: attr(data-th); font-weight: var(--ds-fw-semi);
    color: var(--ds-muted); font-size: var(--ds-fs-xs);
    text-transform: uppercase; letter-spacing: var(--ds-track-wide); text-align: left;
  }
}

/* ---------------------------------------------------------------
   10. ЗНАЧКИ / ЧИПЫ / ВКЛАДКИ
   --------------------------------------------------------------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--ds-s1);
  padding: 2px var(--ds-s2); border-radius: var(--ds-r-full);
  font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-semi);
  letter-spacing: var(--ds-track-wide); text-transform: uppercase;
  background: var(--ds-green-050); color: var(--ds-green-700);
  border: 1px solid var(--ds-green-100);
}
.ds-badge--gold   { background: var(--ds-gold-050); color: var(--ds-gold-700); border-color: var(--ds-gold-100); }
.ds-badge--danger { background: var(--ds-danger-bg); color: var(--ds-danger); border-color: var(--ds-danger-line); }
.ds-badge--warn   { background: var(--ds-warn-bg); color: var(--ds-warn); border-color: var(--ds-warn-line); }
.ds-badge--ok     { background: var(--ds-ok-bg); color: var(--ds-ok); border-color: var(--ds-ok-line); }
.ds-badge--info   { background: var(--ds-info-bg); color: var(--ds-info); border-color: var(--ds-info-line); }

.ds-chip {
  display: inline-flex; align-items: center; gap: var(--ds-s1);
  min-height: 30px; padding: 0 var(--ds-s3);
  border-radius: var(--ds-r-full); border: 1px solid var(--ds-line);
  background: var(--ds-paper); color: var(--ds-ink-2);
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-medium); cursor: pointer;
  transition: all var(--ds-dur-1) var(--ds-ease);
}
.ds-chip:hover { border-color: var(--ds-green-300); background: var(--ds-green-025); }
.ds-chip[aria-pressed="true"] {
  background: var(--ds-green-700); border-color: var(--ds-green-700); color: #fff;
}

/* ---------------------------------------------------------------
   11. ПОДСКАЗКИ
   --------------------------------------------------------------- */
.ds-tip { position: relative; }
.ds-tip::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--ds-green-900); color: #EFF6EF;
  padding: var(--ds-s1) var(--ds-s2); border-radius: var(--ds-r-xs);
  font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-medium);
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--ds-dur-1) var(--ds-ease) 60ms;
  z-index: var(--ds-z-dropdown); box-shadow: var(--ds-e2);
}
.ds-tip:hover::after, .ds-tip:focus-visible::after { opacity: 1; }
@media (pointer: coarse) { .ds-tip::after { display: none; } }

/* ---------------------------------------------------------------
   12. КОМАНДНАЯ ПАЛИТРА
   --------------------------------------------------------------- */
.ds-palette-overlay {
  position: fixed; inset: 0; z-index: var(--ds-z-palette);
  background: rgba(8,36,12,.5); backdrop-filter: blur(4px);
  display: flex; justify-content: center; align-items: flex-start;
  padding: max(10vh, var(--ds-s6)) var(--ds-s4) var(--ds-s4);
  animation: ds-fade var(--ds-dur-1) var(--ds-ease-out);
}
.ds-palette {
  width: min(580px, 100%); background: var(--ds-paper);
  border-radius: var(--ds-r-lg); box-shadow: var(--ds-e4);
  border-top: 3px solid var(--ds-gold-500);
  overflow: hidden; display: flex; flex-direction: column;
  animation: ds-rise var(--ds-dur-2) var(--ds-ease-out);
}
.ds-palette__input {
  width: 100%; border: 0; border-bottom: 1px solid var(--ds-line);
  padding: var(--ds-s4) var(--ds-s5); font-size: var(--ds-fs-lg);
  font-family: var(--ds-sans); background: transparent; color: var(--ds-ink);
}
.ds-palette__input:focus { outline: none; }
.ds-palette__list { max-height: 46vh; overflow-y: auto; padding: var(--ds-s2); margin: 0; list-style: none; }
.ds-palette__item {
  display: flex; align-items: center; gap: var(--ds-s3);
  padding: var(--ds-s2) var(--ds-s3); border-radius: var(--ds-r-sm);
  cursor: pointer; font-size: var(--ds-fs-sm); color: var(--ds-ink-2);
}
.ds-palette__item[aria-selected="true"] { background: var(--ds-green-050); color: var(--ds-green-800); }
.ds-palette__item .ds-badge { margin-left: auto; }
.ds-palette__empty { padding: var(--ds-s7); text-align: center; color: var(--ds-muted); font-size: var(--ds-fs-sm); }
.ds-palette__foot {
  padding: var(--ds-s2) var(--ds-s5); border-top: 1px solid var(--ds-line-soft);
  font-size: var(--ds-fs-2xs); color: var(--ds-muted); display: flex; gap: var(--ds-s4);
  background: var(--ds-paper-2);
}
.ds-kbd {
  display: inline-block; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--ds-line); border-bottom-width: 2px;
  background: var(--ds-paper); font-family: var(--ds-mono);
  font-size: 10px; color: var(--ds-ink-2);
}

/* ---------------------------------------------------------------
   13. МОСТ К СУЩЕСТВУЮЩИМ КЛАССАМ
   Существующая разметка получает премиум-качество без правок JS.
   --------------------------------------------------------------- */
/* Переходы для .btn задаёт next.css — здесь только недостающие состояния,
   иначе два слоя перетирают друг друга и теряются transition для color/opacity. */
.btn[aria-busy="true"], .btn-gold[aria-busy="true"], .btn-sm[aria-busy="true"] {
  cursor: progress; opacity: .75; pointer-events: none;
}
.btn[aria-busy="true"]::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ds-gold-300), transparent);
  animation: ds-thread 900ms linear infinite;
}
.btn[disabled], .btn-gold[disabled], .btn-sm[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; transform: none; box-shadow: none;
}
.btn[disabled]:hover, .btn-gold[disabled]:hover { transform: none; }

/* Мягкое появление картинок.

   РАНЬШЕ ЗДЕСЬ БЫЛА ОШИБКА, из-за которой задания были невидимы.
   Стояло opacity:0, а вернуть видимость должен был класс is-loaded,
   который навешивал JS по событию load. Но между установкой
   opacity:0 и подпиской на событие картинка успевала загрузиться —
   load уже не срабатывал, и задание оставалось невидимым НАВСЕГДА.
   Появлялось только после завершения теста, когда экран
   перерисовывался и картинка была уже в кэше.

   Теперь появление делает анимация с forwards: она доигрывает до
   opacity:1 сама, независимо от JS и от того, когда пришло событие.
   Сломаться этот путь не может. */
img[data-ds-lazy] {
  animation: ds-img-in var(--ds-dur-3) var(--ds-ease-out) forwards;
}
@keyframes ds-img-in { from { opacity: 0; } to { opacity: 1; } }
/* при отключённой анимации картинка просто видима сразу */
@media (prefers-reduced-motion: reduce) {
  img[data-ds-lazy] { animation: none; opacity: 1; }
}

/* Карточки вопроса и варианты ответа — состояния наведения/выбора */
.choice { transition: border-color var(--ds-dur-1) var(--ds-ease), background var(--ds-dur-1) var(--ds-ease); }
.choice:hover:not([disabled]) { border-color: var(--ds-green-300); }

/* Виртуализованный список */
.ds-virtual { position: relative; overflow-y: auto; }
.ds-virtual__spacer { position: relative; width: 100%; }
.ds-virtual__win { position: absolute; left: 0; right: 0; }

/* Печать */
@media print {
  .ds-toasts, .ds-progress, .ds-palette-overlay, .ds-overlay,
  .topbar, .ext-tabs, footer { display: none !important; }
  .ds-card { box-shadow: none; border-color: #999; break-inside: avoid; }
}

/* ---------------------------------------------------------------
   14. ПОМОЩНИК В ТРЕНИРОВКЕ
   Вычёркивание вариантов, темп, подсказка по клавишам.
   --------------------------------------------------------------- */
.ds-pbar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--ds-s2) var(--ds-s3);
  margin: var(--ds-s3) 0 var(--ds-s2);
  padding-bottom: var(--ds-s2);
  border-bottom: 1px solid var(--ds-line-soft);
}
.ds-pbar__btn {
  display: inline-flex; align-items: center; gap: var(--ds-s2);
  min-height: 34px; padding: 0 var(--ds-s3);
  font: inherit; font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi);
  color: var(--ds-ink-2); background: var(--ds-paper);
  border: 1px solid var(--ds-line); border-radius: var(--ds-r-full);
  cursor: pointer;
  transition: background var(--ds-dur-1) var(--ds-ease),
              border-color var(--ds-dur-1) var(--ds-ease),
              color var(--ds-dur-1) var(--ds-ease);
}
.ds-pbar__btn:hover { border-color: var(--ds-green-300); background: var(--ds-green-025); }
.ds-pbar__btn.on {
  background: var(--ds-green-700); border-color: var(--ds-green-700); color: #fff;
}
.ds-pbar__ico { font-family: var(--ds-mono); letter-spacing: .5px; }
.ds-pbar__hint { font-size: var(--ds-fs-2xs); color: var(--ds-muted); }
.ds-pbar__hint b {
  font-weight: var(--ds-fw-semi); color: var(--ds-ink-2);
  padding: 0 3px; border: 1px solid var(--ds-line); border-radius: 4px;
  font-family: var(--ds-mono); font-size: 10px;
}
@media (pointer: coarse) { .ds-pbar__hint { display: none; } }

/* Темп: молча зелёный, к цели — золотой, за целью — красный */
.ds-pace {
  margin-left: auto;
  font-family: var(--ds-mono); font-size: var(--ds-fs-xs);
  font-weight: var(--ds-fw-semi); color: var(--ds-muted);
  padding: 3px var(--ds-s2); border-radius: var(--ds-r-full);
  background: var(--ds-green-025); border: 1px solid var(--ds-line-soft);
  min-width: 56px; text-align: center;
}
.ds-pace.warn { color: var(--ds-gold-700); background: var(--ds-gold-050); border-color: var(--ds-gold-100); }
.ds-pace.over { color: var(--ds-danger); background: var(--ds-danger-bg); border-color: var(--ds-danger-line); }

/* Вычёркивание варианта */
.choice { position: relative; }
.ds-cross {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0;
  display: grid; place-items: center;
  background: var(--ds-paper); color: var(--ds-muted);
  border: 1px solid var(--ds-line); border-radius: var(--ds-r-full);
  font-size: 13px; line-height: 1; cursor: pointer;
  transition: color var(--ds-dur-1) var(--ds-ease),
              border-color var(--ds-dur-1) var(--ds-ease);
}
.ds-cross:hover { color: var(--ds-danger); border-color: var(--ds-danger-line); }
@media (pointer: coarse) { .ds-cross { width: 34px; height: 34px; } }

.choice.ds-crossed { opacity: .5; }
.choice.ds-crossed .ctxt {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--ds-danger);
}
.choice.ds-crossed .k {
  background: transparent; color: var(--ds-muted);
  text-decoration: line-through; text-decoration-color: var(--ds-danger);
}
.choice.ds-crossed .ds-cross { color: var(--ds-green-600); border-color: var(--ds-green-300); }

/* Предупреждение об отсутствии ключа — до ответа, а не после */
.ds-nokey {
  display: flex; align-items: flex-start; gap: var(--ds-s2);
  margin: 0 0 var(--ds-s3);
  padding: var(--ds-s2) var(--ds-s3);
  font-size: var(--ds-fs-xs); line-height: var(--ds-lh-snug);
  color: var(--ds-warn); background: var(--ds-warn-bg);
  border: 1px solid var(--ds-warn-line);
  border-radius: var(--ds-r-sm);
}
.ds-nokey::before { content: "!"; font-weight: var(--ds-fw-bold); }

/* ---------------------------------------------------------------
   15. ЭКРАННАЯ ДИАГНОСТИКА
   Показывается по адресу ?diag=scroll или пятикратным нажатием
   на шапку. Нужна там, где консоль недоступна — прежде всего iPhone.
   --------------------------------------------------------------- */
#ds-diag {
  position: fixed; inset: 0; z-index: 2147483000;
  background: rgba(8, 36, 12, .72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 10px 10px;
  overscroll-behavior: contain;
}
.ds-diag__box {
  width: min(560px, 100%);
  max-height: calc(100% - 12px);
  display: flex; flex-direction: column;
  background: var(--ds-paper); color: var(--ds-ink);
  border-radius: var(--ds-r-lg);
  border-top: 3px solid var(--ds-gold-500);
  box-shadow: var(--ds-e4);
  overflow: hidden;
}
.ds-diag__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ds-s3) var(--ds-s4);
  font-family: var(--ds-serif); font-weight: var(--ds-fw-bold);
  font-size: var(--ds-fs-md);
  border-bottom: 1px solid var(--ds-line-soft);
}
.ds-diag__x {
  background: none; border: 0; font-size: 20px; line-height: 1;
  color: var(--ds-muted); cursor: pointer; padding: 4px 8px;
}
.ds-diag__body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  touch-action: pan-y; overscroll-behavior: contain;
  padding: var(--ds-s2) var(--ds-s3);
}
.ds-diag__t { width: 100%; border-collapse: collapse; font-size: 12px; }
.ds-diag__t td {
  padding: 5px 6px; border-bottom: 1px solid var(--ds-line-soft);
  vertical-align: top; word-break: break-word;
}
.ds-diag__t td:first-child { color: var(--ds-muted); width: 44%; }
.ds-diag__t td:last-child { font-family: var(--ds-mono); font-size: 11px; }
.ds-diag__t td.bad { color: var(--ds-danger); font-weight: var(--ds-fw-bold); }
.ds-diag__sec {
  background: var(--ds-green-050); color: var(--ds-green-800) !important;
  font-weight: var(--ds-fw-semi); font-size: 10px;
  letter-spacing: var(--ds-track-caps); text-transform: uppercase;
  width: auto !important;
}
.ds-diag__foot {
  display: flex; gap: var(--ds-s2); padding: var(--ds-s3);
  border-top: 1px solid var(--ds-line-soft); background: var(--ds-paper-2);
}
.ds-diag__btn {
  flex: 1; min-height: 44px; border: 0; border-radius: var(--ds-r-sm);
  background: var(--ds-green-700); color: #fff;
  font: inherit; font-size: var(--ds-fs-sm); font-weight: var(--ds-fw-semi);
  cursor: pointer;
}
.ds-diag__btn--alt { background: var(--ds-paper); color: var(--ds-green-700); border: 1px solid var(--ds-line); }
.ds-diag__note {
  padding: var(--ds-s2) var(--ds-s3) var(--ds-s3);
  font-size: 11px; line-height: 1.4; color: var(--ds-muted);
  background: var(--ds-paper-2);
}

/* Иллюстрация к заданию — свёрнута, грузится при раскрытии */
.ds-fig {
  margin: var(--ds-s3) 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-paper-2);
  overflow: hidden;
}
.ds-fig > summary {
  padding: var(--ds-s2) var(--ds-s3);
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi);
  color: var(--ds-green-700); cursor: pointer; list-style: none;
  min-height: 40px; display: flex; align-items: center; gap: var(--ds-s2);
}
.ds-fig > summary::-webkit-details-marker { display: none; }
.ds-fig > summary::before { content: "▸"; transition: transform var(--ds-dur-1) var(--ds-ease); }
.ds-fig[open] > summary::before { transform: rotate(90deg); }
.ds-fig > summary:hover { background: var(--ds-green-025); }
.ds-fig img {
  display: block; width: 100%; height: auto;
  max-height: 70vh; object-fit: contain;
  background: #fff; border-top: 1px solid var(--ds-line-soft);
}

/* График к заданию открыт сразу — без него задачу не решить */
.ds-fig--open > summary { color: var(--ds-ink-2); }
.ds-fig--open { border-color: var(--ds-green-300); }

/* Текст задания под картинкой: для поиска, перевода, озвучки
   и когда картинка плохо читается на маленьком экране */
.ds-qtext {
  margin: var(--ds-s3) 0;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-paper-2);
}
.ds-qtext > summary {
  padding: var(--ds-s2) var(--ds-s3);
  min-height: 40px; display: flex; align-items: center; gap: var(--ds-s2);
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-semi);
  color: var(--ds-green-700); cursor: pointer; list-style: none;
}
.ds-qtext > summary::-webkit-details-marker { display: none; }
.ds-qtext > summary::before { content: "▸"; transition: transform var(--ds-dur-1) var(--ds-ease); }
.ds-qtext[open] > summary::before { transform: rotate(90deg); }
.ds-qtext__body {
  padding: 0 var(--ds-s3) var(--ds-s2);
  font-size: var(--ds-fs-md); line-height: var(--ds-lh-base);
  color: var(--ds-ink); overflow-wrap: anywhere;
}
.ds-qtext__ch {
  margin: 0; padding: 0 var(--ds-s3) var(--ds-s3) var(--ds-s7);
  font-size: var(--ds-fs-sm); color: var(--ds-ink-2);
}
.ds-qtext__ch li { padding: 2px 0; }
.ds-qtext__ch { list-style: upper-alpha; }

/* ---------------------------------------------------------------
   16. СЛОВА В КОНТЕКСТЕ
   --------------------------------------------------------------- */
.wx-wrap { max-width: 720px; margin: 0 auto; padding: var(--ds-s4) var(--ds-s3) var(--ds-s8); }
.wx-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--ds-s3); margin-bottom: var(--ds-s4); flex-wrap: wrap;
}
.wx-steps { display: flex; gap: var(--ds-s1); flex-wrap: wrap; }
.wx-step {
  font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-semi);
  letter-spacing: var(--ds-track-wide); text-transform: uppercase;
  padding: 3px var(--ds-s2); border-radius: var(--ds-r-full);
  border: 1px solid var(--ds-line); color: var(--ds-muted);
  background: var(--ds-paper);
}
.wx-step.is-done { background: var(--ds-ok-bg); color: var(--ds-ok); border-color: var(--ds-ok-line); }
.wx-step.is-now { background: var(--ds-green-700); color: #fff; border-color: var(--ds-green-700); }
.wx-count { font-family: var(--ds-mono); font-size: var(--ds-fs-xs); color: var(--ds-muted); }

.wx-card {
  background: var(--ds-paper); border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg); box-shadow: var(--ds-e1);
  padding: var(--ds-s5); border-top: 3px solid var(--ds-gold-500);
}
.wx-level {
  font-size: var(--ds-fs-2xs); font-weight: var(--ds-fw-semi);
  letter-spacing: var(--ds-track-wide); text-transform: uppercase;
  color: var(--ds-muted); margin-bottom: var(--ds-s3);
}
.wx-prompt {
  font-family: var(--ds-serif); font-size: var(--ds-fs-2xl);
  font-weight: var(--ds-fw-bold); color: var(--ds-ink);
  line-height: var(--ds-lh-tight); overflow-wrap: anywhere;
}
/* предложение из задания — не заголовок, читается как текст */
.wx-prompt--sent {
  font-family: var(--ds-sans); font-size: var(--ds-fs-lg);
  font-weight: var(--ds-fw-regular); line-height: var(--ds-lh-base);
}
.wx-pos { font-size: var(--ds-fs-xs); color: var(--ds-muted); margin-top: var(--ds-s1); }
.wx-q {
  font-size: var(--ds-fs-sm); color: var(--ds-muted);
  margin: var(--ds-s4) 0 var(--ds-s3);
}
.wx-opts { display: flex; flex-direction: column; gap: var(--ds-s2); }
.wx-opt {
  width: 100%; min-height: 48px; padding: var(--ds-s3) var(--ds-s4);
  text-align: left; font: inherit; font-size: var(--ds-fs-md);
  color: var(--ds-ink); background: var(--ds-paper);
  border: 1px solid var(--ds-line); border-radius: var(--ds-r-sm);
  cursor: pointer; overflow-wrap: anywhere;
  transition: border-color var(--ds-dur-1) var(--ds-ease),
              background var(--ds-dur-1) var(--ds-ease);
}
.wx-opt:hover:not([disabled]) { border-color: var(--ds-green-300); background: var(--ds-green-025); }
.wx-opt[disabled] { cursor: default; }
.wx-opt.is-right { border-color: var(--ds-ok); background: var(--ds-ok-bg); font-weight: var(--ds-fw-semi); }
.wx-opt.is-wrong { border-color: var(--ds-danger); background: var(--ds-danger-bg); }

.wx-fb { margin-top: var(--ds-s4); }
.wx-fb:empty { display: none; }
.wx-fb {
  padding: var(--ds-s3) var(--ds-s4); border-radius: var(--ds-r-sm);
  border: 1px solid var(--ds-line); background: var(--ds-paper-2);
}
.wx-fb.is-ok { border-color: var(--ds-ok-line); background: var(--ds-ok-bg); }
.wx-fb.is-err { border-color: var(--ds-danger-line); background: var(--ds-danger-bg); }
.wx-fb__t { font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-sm); margin-bottom: var(--ds-s2); }
.wx-fb.is-ok .wx-fb__t { color: var(--ds-ok); }
.wx-fb.is-err .wx-fb__t { color: var(--ds-danger); }
.wx-fb__w { font-size: var(--ds-fs-md); margin-bottom: 2px; }
.wx-fb__en { font-size: var(--ds-fs-sm); color: var(--ds-muted); font-style: italic; }
.wx-fb__uz { font-size: var(--ds-fs-sm); color: var(--ds-muted); }
.wx-fb .ds-btn { margin-top: var(--ds-s3); }

.wx-src {
  margin-top: var(--ds-s3); font-size: var(--ds-fs-2xs);
  color: var(--ds-muted); text-align: center;
}
.wx-done { text-align: center; padding: var(--ds-s9) var(--ds-s4); }
.wx-done__mark {
  width: 56px; height: 56px; margin: 0 auto var(--ds-s4);
  border-radius: var(--ds-r-md); display: grid; place-items: center;
  background: var(--ds-ok-bg); color: var(--ds-ok);
  font-size: var(--ds-fs-2xl); font-weight: var(--ds-fw-bold);
}
.wx-done h2 { font-family: var(--ds-serif); margin-bottom: var(--ds-s2); }
.wx-done p { color: var(--ds-muted); font-size: var(--ds-fs-sm); margin-bottom: var(--ds-s4); }
/* ============================================================
   PREMIUM UPGRADE: ВОЗДУХ И ИЕРАРХИЯ
   Очистка карточек от визуального шума и добавление пространства
   ============================================================ */

/* 1. Карточки статистики (на главной) */
#root .stat {
  padding: 24px; /* Добавляем воздух (было 16px) */
  border-radius: 16px; /* Делаем углы мягче и современнее */
  box-shadow: none; /* Убираем грязную постоянную тень */
  background: var(--paper);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#root .stat:hover {
  transform: translateY(-2px);
  /* Дорогая, глубокая и сильно рассеянная тень только при наведении */
  box-shadow: 0 12px 32px rgba(16, 61, 20, 0.06); 
}

/* 2. Карточки доменов (Algebra, Advanced Math и т.д.) */
#root .domain-card {
  padding: 28px 24px; /* Увеличиваем внутренний простор */
  border-radius: 16px;
  box-shadow: none; /* Плоский, чистый лист в состоянии покоя */
  gap: 6px; /* Закон близости: прижимаем заголовок к подзаголовку */
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
              box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), 
              border-color 0.2s;
}

#root .domain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(16, 61, 20, 0.08);
  border-color: var(--green);
}

/* 3. Универсальные карточки Design System (из ds.css) */
body .ds-card {
  padding: var(--ds-s6); /* Увеличиваем с 20px до 24px */
  border-radius: 16px;
  box-shadow: none; 
}

body .ds-card:hover,
body .ds-card--interactive:hover {
  box-shadow: 0 12px 32px rgba(16, 61, 20, 0.06);
  transform: translateY(-2px);
}

/* 4. Заголовки страниц (Page Head) */
#root .page-head {
  margin-bottom: 32px; /* Отодвигаем контент вниз, даем заголовку дышать */
}

#root .page-head h1 {
  margin-bottom: 8px; /* Прижимаем описание плотнее к самому заголовку H1 */
}
/* ============================================================
   PREMIUM UPGRADE: ТИПОГРАФИКА И ЦИФРЫ
   ============================================================ */

/* 1. Переопределяем базовые токены шрифтов на премиальные */
:root {
  --ds-sans: 'Inter', system-ui, -apple-system, sans-serif !important;
  --ds-serif: 'Playfair Display', Georgia, serif !important;
}

/* 2. Элегантные заголовки */
h1, h2, h3, 
.page-head h1, 
.ds-card__title, 
.brand .t1,
.domain-card h3 {
  font-family: var(--ds-serif) !important;
  letter-spacing: -0.015em !important; /* Легкий минус-трекинг делает крупные шрифты "дороже" */
}

/* 3. Табличные (моноширинные) пропорции для всех счетчиков и статистики */
/* Это заставит цифры, например 46 694, стоять идеально ровно, как в Excel */
.stat .n,
.ext-score-tot .n,
.ks-num,
.ext-arena-timer,
.ext-exam-clock,
.ext-price,
.nx-heatc div {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.02em !important;
}

/* 4. Увеличиваем контраст основного текста */
body {
  font-family: var(--ds-sans) !important;
  -webkit-font-smoothing: antialiased; /* Делает текст на Mac и iOS идеально гладким */
  -moz-osx-font-smoothing: grayscale;
}
/* ============================================================
   PREMIUM UPGRADE: ФОРМЫ, ФОКУС И ЭКОЛОГИЯ ИНТЕРФЕЙСА
   ============================================================ */

/* 1. Идеальные инпуты (эффект мягкого вдавливания) */
input[type="text"], input[type="number"], input[type="password"],
input[type="email"], input[type="search"], textarea, select,
.ds-input, .ds-select, .ds-textarea {
  border: 1px solid var(--line, #DCE5DD) !important;
  border-radius: 12px !important;
  background: var(--paper, #ffffff) !important;
  /* Легкая внутренняя тень создает ощущение физического поля ввода */
  box-shadow: inset 0 2px 4px rgba(16, 61, 20, 0.02) !important; 
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

/* 2. Дорогое двойное свечение при клике (Focus Ring) */
input:focus, textarea:focus, select:focus,
.ds-input:focus, .ds-select:focus, .ds-textarea:focus,
.ext-inp:focus, .ir-input:focus {
  border-color: var(--green, #1B5E20) !important;
  outline: none !important;
  /* Первая тень - четкая граница, вторая - мягкое размытое свечение */
  box-shadow: 0 0 0 1px var(--green, #1B5E20), 0 0 0 4px rgba(27, 94, 32, 0.12) !important; 
  background: #ffffff !important;
}

/* 3. Укрощение клавиатурного фокуса для кнопок и ссылок */
:where(a, button, [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--bg, #F4F7F3), 0 0 0 4px var(--gold, #C9A227) !important;
  border-radius: inherit;
}

/* 4. Укрощение Wow-эффектов (Погода и лучи) */
/* Делаем их элегантным фоновым шумом, а не главным событием экрана */
body.nx-w-clear::before, 
body.nx-w-clear::after, 
body.nx-w-rain::before, 
body.nx-w-snow::before, 
body.nx-w-clouds::before,
body.nx-w-storm::before {
  opacity: 0.25 !important; /* Приглушаем интенсивность в 3-4 раза */
  mix-blend-mode: multiply; /* Эффект будет мягко смешиваться с цветом фона */
}

/* Слегка замедляем анимацию фона, чтобы она не вызывала визуальную усталость */
@media (prefers-reduced-motion: no-preference) {
  body[class*="nx-w-"]::before,
  body[class*="nx-w-"]::after {
    animation-duration: 15s !important; 
  }
}
/* ============================================================
   PREMIUM UPGRADE: УТИЛИТАРНЫЕ КЛАССЫ (Зачистка Батча B11)
   ============================================================ */

/* 1. Отступы (Шаг сетки = 4px) */
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }

.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }

/* 2. Flex-раскладка (вместо длинных строк в JS) */
.flex-row {
  display: flex !important;
  align-items: center !important;
}
.flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.flex-wrap { flex-wrap: wrap !important; }

.gap-1 { gap: 4px !important; }
.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }

/* 3. Текст и выравнивание */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.w-full { width: 100% !important; }