/* =========================================================================
   Транскрайбер — дизайн-система и стили страницы
   Один файл: токены + база + раскладка + компоненты + утилиты.
   ========================================================================= */

@layer reset, base, layout, components, utilities;

/* -------------------------------------------------------------------------
   ТОКЕНЫ
   Tier 1 — литеральные значения (палитра, шрифты, шкалы).
   Tier 2 — семантические (--bg, --text, --brand…), они же переопределяются
   в тёмной теме. В разметке используем только Tier 2 + шкалы.
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Tier 1 — палитра */
  --green-btn: #4d7d15;        /* заливка кнопок — белый текст проходит по контрасту (~5:1) */
  --green-btn-hover: #436b11;
  --green-deep: #4b820e;       /* насыщенный фирменный — большие зелёные секции */
  --green-ink: #46700f;        /* зелёный текст на светлом фоне (надзаголовки, ссылки) */
  --green-700: #4a760b;
  --green-600: #5f9a10;
  --green-500: #7cb518;   /* фирменный акцент */
  --green-400: #8fc73e;
  --green-200: #cfe6a3;
  --green-100: #e6f2cd;
  --green-050: #f1f7e4;

  --ink-900: #16181d;
  --ink-700: #33373f;
  --ink-500: #5b616a;
  --ink-400: #838a93;
  --ink-300: #a6acb4;

  --paper-000: #ffffff;
  --paper-050: #f7f8f3;
  --paper-100: #eef0e9;
  --paper-200: #e4e7dd;

  --pure-black: #111214;

  /* Tier 1 — типографика */
  --font-display: "Onest", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-body: "Golos Text", system-ui, "Segoe UI", Roboto, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.9375rem;
  --text-display: clamp(2rem, 1.35rem + 2.6vw, 3.15rem);

  /* Tier 1 — пространство, форма, движение */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3.25rem);   /* до ~52px на desktop */
  --rail-w: 15.5rem;
  --page-max: 85rem;   /* 1360px */

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 160ms;

  /* Tier 2 — семантика. По умолчанию СВЕТЛАЯ тема; тёмная включается
     только вручную переключателем ([data-theme="dark"]), системную не слушаем. */
  --bg: var(--paper-000);          /* общий фон — белый */
  --surface: var(--paper-000);
  --surface-sunken: var(--paper-100);
  --text: var(--ink-900);
  --text-soft: var(--ink-500);
  --text-faint: var(--ink-400);
  --border: var(--paper-200);
  --border-strong: #d3d7ca;

  --brand: var(--green-500);       /* лаймовый акцент: «WORD», иконки, рамки, активные состояния */
  --brand-strong: var(--green-600);
  --brand-ink: var(--green-ink);   /* зелёный ТЕКСТ на светлом */
  --brand-tint: var(--green-050);
  --brand-tint-2: var(--green-100);
  --on-brand: #10200a;             /* тёмный глиф на лаймовых иконках-квадратах */

  --btn-bg: var(--green-btn);      /* заливка основной кнопки */
  --btn-fg: #ffffff;               /* белый текст на кнопке */
  --btn-bg-hover: var(--green-btn-hover);

  --link: var(--green-ink);
  --focus: #2f6b12;
  --danger: #b42318;
  --danger-bg: #fdecea;

  --support-bg: var(--pure-black);
  --support-text: #f4f5f0;
  --support-text-soft: #b9bcb0;

  --shadow-sm: 0 1px 2px rgb(16 18 20 / 0.04), 0 6px 16px -6px rgb(16 18 20 / 0.07);
  --shadow-md: 0 10px 30px -12px rgb(16 18 20 / 0.16), 0 3px 8px -4px rgb(16 18 20 / 0.08);
  --ring: 0 0 0 3px color-mix(in oklab, var(--brand) 35%, transparent);

  accent-color: var(--brand);
}

/* Тёмная тема — только по кнопке */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14161a;
  --surface: #1c1f24;
  --surface-sunken: #24272d;
  --text: #eef0ec;
  --text-soft: #b1b5ac;
  --text-faint: #838980;
  --border: #31353c;
  --border-strong: #3d424a;

  --brand: var(--green-400);
  --brand-strong: var(--green-200);
  --brand-ink: var(--green-200);
  --brand-tint: #212a14;
  --brand-tint-2: #2b3a19;
  --on-brand: #0e1907;

  --btn-bg: #4f8317;
  --btn-fg: #ffffff;
  --btn-bg-hover: #3f6a12;

  --link: var(--green-200);
  --focus: #a6e05a;
  --danger: #ff9c8f;
  --danger-bg: #3a1a16;

  --support-bg: #0f130a;
  --support-text: #eef0ec;
  --support-text-soft: #a8ac9f;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 16px 40px -18px rgb(0 0 0 / 0.6), 0 4px 12px -6px rgb(0 0 0 / 0.4);
}

/* -------------------------------------------------------------------------
   RESET — точечный, низкой специфичности (:where), легко переопределяется
   ------------------------------------------------------------------------- */
@layer reset {
  :where(*, *::before, *::after) { box-sizing: border-box; }
  :where(body, h1, h2, h3, h4, p, figure, ul, ol, dd, blockquote) { margin: 0; }
  :where(ul, ol):where(.plain) { list-style: none; padding: 0; }
  :where(button, input, select, textarea) { font: inherit; color: inherit; }
  :where(button) { background: none; border: 0; cursor: pointer; }
  :where(a) { color: inherit; text-decoration: none; }
  :where(img, svg) { display: block; max-width: 100%; }
  :where(svg) { fill: none; }
}

/* -------------------------------------------------------------------------
   BASE
   ------------------------------------------------------------------------- */
@layer base {
  html { -webkit-text-size-adjust: 100%; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    font-feature-settings: "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  p { text-wrap: pretty; }

  a:not([class]) {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }
  a:not([class]):hover { color: var(--brand-ink); filter: brightness(0.9); }

  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }

  ::selection { background: var(--brand); color: var(--on-brand); }

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

/* -------------------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------------------- */
@layer layout {
  .page {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .wrap {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* Шапка */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in oklab, var(--surface) 82%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .topbar.is-scrolled {
    background: var(--surface);
    backdrop-filter: none;
    border-bottom-color: var(--border);
  }
  .topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    min-height: 4.15rem;
  }

  /* Тело: рельс + основная колонка */
  .shell {
    flex: 1;
    padding-block: clamp(1.25rem, 0.7rem + 2vw, 2.25rem) clamp(2rem, 1rem + 3vw, 3.5rem);
  }
  .shell__grid {
    display: grid;
    gap: clamp(1.5rem, 0.6rem + 3vw, 2.75rem);
    grid-template-columns: 1fr;
    align-items: start;
  }
  /* На мобильном (один столбец) сперва показываем саму форму/герой, а рельс
     (переключатель инструментов + статистика) — ниже; на десктопе рельс —
     обычный левый сайдбар в исходном порядке разметки. */
  .rail { order: 1; }
  .main { order: 0; }
  @media (min-width: 60rem) {
    .shell__grid { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
    .rail { order: 0; position: sticky; top: 5.75rem; }
  }

  /* Основная колонка. Компактный вертикальный ритм — как в референсе:
     герой + загрузка + преимущества + карточки «о проекте / поддержка»
     помещаются в один экран. */
  .main { display: grid; gap: clamp(1.1rem, 0.6rem + 2vw, 1.9rem); min-width: 0; }

  .footer {
    margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: var(--text-sm);
  }
  .footer__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    justify-content: space-between;
    padding-block: 1.5rem;
  }
}

/* -------------------------------------------------------------------------
   COMPONENTS
   ------------------------------------------------------------------------- */
@layer components {

  /* --- Логотип --------------------------------------------------------- */
  .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
    flex: none;
  }
  .logo__mark {
    display: grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: var(--r-sm);
    background: var(--brand);
    color: var(--on-brand);
  }
  .logo__mark svg { inline-size: 1.15rem; block-size: 1.15rem; }

  /* --- Навигация в шапке --------------------------------------------- */
  .site-nav { margin-inline: auto; }
  .site-nav__list {
    display: flex;
    gap: clamp(0.5rem, 0.1rem + 1vw, 1.4rem);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .site-nav__link {
    display: inline-block;
    padding: 0.4rem 0.15rem;
    color: var(--text-soft);
    font-size: var(--text-base);
    font-weight: 500;
    white-space: nowrap;
    transition: color var(--dur) var(--ease);
  }
  .site-nav__link:hover,
  .site-nav__link[aria-current="page"] { color: var(--text); }

  .topbar__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }

  /* Мобильное меню на нативном <details> — без JS */
  .menu { position: relative; }
  .menu > summary {
    list-style: none;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
  }
  .menu > summary::-webkit-details-marker { display: none; }
  .menu[open] > summary { background: var(--surface-sunken); }
  .menu__panel {
    position: absolute;
    inset-inline-end: 0;
    margin-top: 0.5rem;
    min-inline-size: 12rem;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    display: grid;
    gap: 0.125rem;
  }
  .menu__panel a {
    padding: 0.55rem 0.65rem;
    border-radius: var(--r-sm);
    color: var(--text-soft);
    font-weight: 500;
  }
  .menu__panel a:hover { background: var(--surface-sunken); color: var(--text); }

  @media (min-width: 64rem) { .menu { display: none; } }
  @media (max-width: 63.99rem) { .site-nav { display: none; } }
  /* На телефонах шапке не хватает ширины на лого + переключатель темы +
     «Войти» + «Регистрация» + гамбургер разом (ничего не сжимается и не
     переносится) — прячем текстовые кнопки входа, они продублированы в
     гамбургер-меню. */
  @media (max-width: 36rem) { .topbar__actions > .btn { display: none; } }

  /* --- Кнопки -------------------------------------------------------- */
  .btn {
    --_bg: var(--surface);
    --_fg: var(--text);
    --_bd: var(--border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0.5rem 1.1rem;
    border-radius: var(--r-md);
    border: 1px solid var(--_bd);
    background: var(--_bg);
    color: var(--_fg);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--text-base);
    line-height: 1.2;
    text-align: center;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
      transform var(--dur) var(--ease);
  }
  .btn:hover:not(:disabled) { border-color: var(--text-faint); }
  .btn:active:not(:disabled) { transform: translateY(1px); }
  .btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .btn svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }

  .btn--primary {
    --_bg: var(--btn-bg);
    --_fg: var(--btn-fg);
    --_bd: transparent;
    font-weight: 700;
  }
  .btn--primary:hover:not(:disabled) { --_bg: var(--btn-bg-hover); border-color: transparent; }

  .btn--ghost { --_bg: transparent; --_bd: transparent; color: var(--text-soft); }
  .btn--ghost:hover:not(:disabled) { color: var(--text); background: var(--surface-sunken); }

  .btn--lg { min-block-size: 2.9rem; padding-inline: 1.5rem; font-size: var(--text-md); }
  .btn--block { inline-size: 100%; }
  .btn--sm { min-block-size: 2.25rem; padding: 0.35rem 0.8rem; font-size: var(--text-sm); }

  /* --- Карточка ------------------------------------------------------- */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: clamp(1.1rem, 0.7rem + 1.6vw, 1.75rem);
    box-shadow: var(--shadow-sm);
  }

  /* --- Боковой рельс: тонкая рамка-панель (меню + статистика) ------- */
  .rail {
    display: grid;
    gap: 2.5rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
  }

  .modes { display: grid; gap: 0.25rem; }
  .modes__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    inline-size: 100%;
    padding: 0.6rem 0.7rem;
    border-radius: var(--r-md);
    color: var(--text-soft);
    font-weight: 500;
    text-align: start;
    border: 1px solid transparent;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .modes__item svg { inline-size: 1.5rem; block-size: 1.5rem; flex: none; color: var(--text-faint); }
  .modes__item:hover { background: var(--surface-sunken); color: var(--text); }
  .modes__item[aria-current] {
    background: var(--brand-tint);
    color: var(--text);
    border-color: color-mix(in oklab, var(--brand) 55%, var(--border));
    font-weight: 600;
  }
  .modes__item[aria-current] svg { color: var(--brand-strong); }
  .modes__soon {
    margin-inline-start: auto;
    font-family: var(--font-body);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-pill);
    padding: 0.05rem 0.4rem;
  }

  /* --- Статистика сервиса (в сайдбаре, под меню) ----------------- */
  .stats { display: grid; gap: 0.9rem; padding: 0.2rem 0.7rem 0.4rem; }
  .stat { display: flex; align-items: center; gap: 0.7rem; }
  .stat svg { inline-size: 1.5rem; block-size: 1.5rem; color: var(--brand-strong); flex: none; }
  .stat__num {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-md);
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
  }
  .stat__label { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.3; }

  /* --- Герой ------------------------------------------------------- */
  .hero { display: grid; gap: 0.35rem; position: relative; }
  .hero__title {
    font-size: var(--text-display);
    text-transform: uppercase;
  }
  .hero__title b { color: var(--brand-strong); font-weight: inherit; }
  .hero__lead {
    margin-top: 0.6rem;
    font-size: var(--text-md);
    color: var(--text-soft);
    max-width: 48ch;
    text-wrap: nowrap;
  }
  @media (max-width: 30rem) { .hero__lead { text-wrap: pretty; } }

  /* Картинка в углу — не влияет на высоту блока, поэтому форма ниже
     поднимается вплотную к тексту. */
  .hero__art {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: clamp(9rem, 24vw, 17rem);
    height: auto;
    mix-blend-mode: multiply;
    pointer-events: none;
  }
  @media (max-width: 40rem) { .hero__art { display: none; } }
  @media (min-width: 40.01rem) {
    /* Резерв места под картинку — только если она реально есть в этом .hero
       (на /summary и /convert картинки нет, форма там поднимается вплотную
       к тексту без всякого резерва). */
    .hero:has(.hero__art) > div { padding-inline-end: clamp(9rem, 25vw, 18rem); }
    /* высота героя гарантирует отступ под картинкой перед формой —
       ровно высота картинки (аспект 1456×1092 → ×0.75 от её ширины) */
    .hero:has(.hero__art) { min-block-size: clamp(6.75rem, 18vw, 12.75rem); }
  }
  :root[data-theme="dark"] .hero__art {
    mix-blend-mode: normal;
    background: #fff;
    border-radius: var(--r-md);
  }
  @media (max-width: 34rem) { .hero__art { display: none; } }

  /* --- Зона загрузки (сигнатурный элемент) ------------------------- */
  .uploader {
    display: grid;
    gap: 0.85rem;
    padding: clamp(0.9rem, 0.6rem + 1.4vw, 1.4rem);
    border: 2px dashed color-mix(in oklab, var(--brand) 55%, var(--border-strong));
    border-radius: var(--r-lg);
    background: var(--surface);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
      box-shadow var(--dur) var(--ease);
  }
  .uploader.is-dragover {
    border-color: var(--brand);
    background: var(--brand-tint);
    box-shadow: var(--ring);
  }

  .dropzone {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    text-align: center;
    padding: clamp(0.75rem, 0.5rem + 1.4vw, 1.35rem) 1rem;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
  }
  .dropzone:hover { background: color-mix(in oklab, var(--brand-tint) 55%, transparent); }
  .uploader:has(.dropzone input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
  .dropzone__icon {
    display: grid;
    place-items: center;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    border-radius: var(--r-md);
    background: var(--brand);
    color: var(--on-brand);
    margin-bottom: 0.15rem;
  }
  .dropzone__icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
  .dropzone__title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); }
  .dropzone__hint { font-size: var(--text-sm); color: var(--text-faint); }
  .dropzone__file {
    display: none;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.4rem 0.5rem 0.4rem 0.9rem;
    background: var(--brand-tint);
    border: 1px solid var(--brand-tint-2);
    border-radius: var(--r-pill);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
  }
  .dropzone.has-file .dropzone__file { display: inline-flex; }
  .dropzone.has-file .dropzone__icon,
  .dropzone.has-file .dropzone__title,
  .dropzone.has-file .dropzone__hint { display: none; }
  .dropzone__file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dropzone__clear {
    display: grid;
    place-items: center;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border-radius: 50%;
    color: var(--text-soft);
    flex: none;
  }
  .dropzone__clear:hover { background: var(--surface); color: var(--text); }
  .dropzone__clear svg { inline-size: 0.8rem; block-size: 0.8rem; }

  .or-line {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    color: var(--text-faint);
    font-size: var(--text-sm);
  }
  .or-line::before, .or-line::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--border);
  }

  /* --- Поле ссылки ----------------------------------------------- */
  .field { display: grid; gap: 0.4rem; }
  .field__label { font-size: var(--text-sm); font-weight: 600; color: var(--text-soft); }
  .inputgroup {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .inputgroup:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
  .inputgroup svg { inline-size: 1.15rem; block-size: 1.15rem; color: var(--text-faint); flex: none; }
  .inputgroup input {
    flex: 1;
    min-width: 0;
    min-block-size: 2.75rem;
    border: 0;
    background: none;
    outline: none;
  }
  .inputgroup input::placeholder { color: var(--text-faint); }

  /* Компактная форма на главной — короче по вертикали, чем на /summary и
     /convert (там форма — единственный акцент на странице и может себе
     позволить дышать; на главной под ней ещё "features" и "promos"). */
  #job-form { gap: 0.6rem; padding: clamp(0.7rem, 0.45rem + 1vw, 1.05rem); }
  #job-form .dropzone { padding: clamp(0.55rem, 0.35rem + 1vw, 0.95rem) 1rem; gap: 0.2rem; }
  #job-form .dropzone__icon { inline-size: 2.1rem; block-size: 2.1rem; margin-bottom: 0.05rem; }
  #job-form .dropzone__icon svg { inline-size: 1.05rem; block-size: 1.05rem; }
  #job-form .dropzone__title { line-height: 1.2; }
  #job-form .dropzone__hint,
  #job-form #form-hint { line-height: 1.3; }
  #job-form .inputgroup input { min-block-size: 2.5rem; }
  #job-form .btn--lg { min-block-size: 2.6rem; }

  /* --- Панель статуса задачи ------------------------------------- */
  .status {
    display: none;
    gap: 0.9rem;
    padding: clamp(1rem, 0.7rem + 1.4vw, 1.5rem);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
  }
  .status.is-active { display: grid; }
  .status__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  .status__state { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; }
  .status__dot {
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-radius: 50%;
    background: var(--text-faint);
    flex: none;
  }
  .status[data-state="queued"] .status__dot { background: var(--ink-300); }
  .status[data-state="running"] .status__dot {
    background: var(--brand);
    animation: pulse 1.4s var(--ease) infinite;
  }
  .status[data-state="done"] .status__dot { background: var(--brand-strong); }
  .status[data-state="error"] .status__dot { background: var(--danger); }
  .status__job { font-size: var(--text-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }

  .status__bar {
    inline-size: 100%;
    block-size: 0.5rem;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface-sunken);
    overflow: hidden;
  }
  .status__bar::-webkit-progress-bar { background: var(--surface-sunken); }
  .status__bar::-webkit-progress-value { background: var(--brand); border-radius: var(--r-pill); transition: inline-size var(--dur) var(--ease); }
  .status__bar::-moz-progress-bar { background: var(--brand); border-radius: var(--r-pill); }
  .status[data-state="done"] .status__bar { display: none; }
  .status[data-state="error"] .status__bar { display: none; }

  .status__msg { font-size: var(--text-sm); color: var(--text-soft); }
  .status[data-state="error"] .status__msg { color: var(--danger); }
  .status__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

  @supports not (accent-color: #000) {
    .status__bar { appearance: none; }
  }

  /* --- Сетка преимуществ --------------------------------------- */
  .features {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  }
  .feature {
    display: grid;
    gap: 0.15rem;
    align-content: start;
    padding: 0.7rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }
  .feature svg { inline-size: 1.65rem; block-size: 1.65rem; color: var(--brand-strong); margin-bottom: 0.3rem; }
  .feature__title { font-weight: 600; font-size: var(--text-sm); }
  .feature__text { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.35; }

  /* --- Промо-карточки: «О проекте» — светлая, «Поддержите» — тёмная -- */
  .promos {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
  .promo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem 1rem;
    padding: clamp(0.9rem, 0.7rem + 1vw, 1.4rem) clamp(1rem, 0.7rem + 1vw, 1.5rem);
    border-radius: var(--r-lg);
    overflow: hidden;
  }
  .promo__body { display: grid; gap: 0.4rem; align-content: center; }
  .promo h3 { font-size: var(--text-md); }
  .promo p { font-size: var(--text-sm); color: inherit; }
  .promo .btn--primary { justify-self: start; margin-top: 0.2rem; }

  .promo--about {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-soft);
  }
  .promo--about h3 { color: var(--text); }

  .promo--support { background: var(--support-bg); color: var(--support-text-soft); }
  .promo--support h3 { color: var(--support-text); }

  .promo__img {
    inline-size: clamp(5rem, 14vw, 8.5rem);
    height: auto;
    flex: none;
  }
  /* Тёмная карточка «Поддержите» — прозрачный/чёрный фон картинки убираем блендом */
  .promo--support .promo__img { mix-blend-mode: lighten; }
  @media (max-width: 26rem) {
    .promo { grid-template-columns: 1fr; }
    .promo__img { display: none; }
  }

  /* --- Секции с заголовком ------------------------------------- */
  .section__head { margin-bottom: 0.9rem; }
  .section__eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-ink);
    margin-bottom: 0.35rem;
  }
  .section__title { font-size: var(--text-xl); }

  /* --- Мелочи ------------------------------------------------- */
  .theme-toggle {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border);
    color: var(--text-soft);
  }
  .theme-toggle:hover { color: var(--text); border-color: var(--text-faint); }
  .theme-toggle svg { inline-size: 1.15rem; block-size: 1.15rem; }
  .theme-toggle .icon-moon { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

  .notice {
    padding: 0.7rem 0.9rem;
    background: var(--brand-tint);
    border: 1px solid var(--brand-tint-2);
    border-radius: var(--r-md);
    font-size: var(--text-sm);
  }
  .notice--muted { background: var(--surface-sunken); border-color: var(--border); color: var(--text-soft); }

  /* --- Инструменты (конспект / конвертация) ------------------------ */
  .tool { display: grid; gap: 0.55rem; align-content: start; }
  .tool h3 { font-size: var(--text-lg); }
  .tool__desc { font-size: var(--text-sm); color: var(--text-soft); margin-bottom: 0.35rem; }
  .tool .field__label { margin-top: 0.35rem; }
  .tool .status { margin-top: 0.4rem; }

  .select {
    min-block-size: 2.75rem;
    inline-size: 100%;
    padding: 0 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
  }

  input[type="file"] { font-size: var(--text-sm); color: var(--text-soft); max-inline-size: 100%; }
  input[type="file"]::file-selector-button {
    margin-inline-end: 0.6rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--r-sm);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    font-size: var(--text-sm);
    cursor: pointer;
  }
  input[type="file"]::file-selector-button:hover { border-color: var(--text-faint); }

  .status--spaced { margin-top: 1rem; }

  /* ===================================================================
     Страница «О проекте» (about.html) — маркетинговые блоки без сайдбара
     =================================================================== */
  .stack { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); }

  .btn--ghost-brand {
    --_bg: transparent;
    --_bd: color-mix(in oklab, var(--brand) 60%, var(--border));
    color: var(--brand-ink);
  }
  .btn--ghost-brand:hover:not(:disabled) { background: var(--brand-tint); border-color: var(--brand); }

  .dot { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--text-faint); display: inline-block; }
  .dot--on { background: var(--brand); }

  .dot { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--text-faint); display: inline-block; }
  .dot--on { background: var(--brand); }
  .band-title { font-size: clamp(1.35rem, 1rem + 1.3vw, 1.7rem); }

  .btn--on-green { --_bg: #fff; --_fg: var(--green-deep); --_bd: transparent; font-weight: 700; }
  .btn--on-green:hover:not(:disabled) { --_bg: color-mix(in oklab, #fff 88%, var(--brand)); border-color: transparent; }

  /* --- Герой --- */
  .mhero { display: grid; gap: clamp(1.75rem, 1rem + 3vw, 3rem); align-items: stretch; }
  @media (min-width: 62rem) { .mhero { grid-template-columns: 1.05fr 0.95fr; } }
  .mhero__title {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.0;
    text-transform: uppercase;
    font-size: clamp(2rem, 1.05rem + 3vw, 3.25rem);
    max-width: 14ch;
  }
  .mhero__title b { color: var(--brand-strong); font-weight: inherit; }
  .mhero__lead { margin-top: 1rem; font-size: 1.125rem; line-height: 1.55; color: var(--text-soft); max-width: 34ch; }
  .mhero__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.5rem; }
  .mhero__note {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 1rem; font-size: var(--text-sm); font-weight: 600; color: var(--brand-ink);
  }
  .mhero__note svg { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }

  /* --- Панель-схема потока --- */
  .flow {
    background: var(--brand-tint);
    border: 1px solid var(--brand-tint-2);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    display: grid;
    gap: clamp(1.5rem, 1rem + 2vw, 2.25rem);
    align-content: center;
  }
  .flow__row { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 0.4rem; }
  .flow__step { display: grid; justify-items: center; gap: 0.6rem; min-width: 0; text-align: center; }
  .flow__ico {
    display: grid; place-items: center;
    inline-size: clamp(3.4rem, 2.5vw + 2.6rem, 4.5rem); block-size: clamp(3.4rem, 2.5vw + 2.6rem, 4.5rem);
    border-radius: var(--r-md);
    background: var(--surface); color: var(--brand-strong);
    box-shadow: var(--shadow-sm);
  }
  .flow__ico svg { inline-size: 1.85rem; block-size: 1.85rem; }
  .flow__ico--brand { background: var(--brand); color: var(--on-brand); }
  .flow__label { font-size: var(--text-sm); font-weight: 600; line-height: 1.25; color: var(--text); }
  .flow__arrow { align-self: start; color: var(--brand-strong); margin-top: clamp(1.5rem, 1.6vw + 1rem, 2rem); }
  .flow__arrow svg { inline-size: 1.6rem; block-size: 1.6rem; }

  /* --- Полоса загрузки: левая зона = drop --- */
  .uploadbar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem 0.8rem;
    align-items: stretch;
    padding: clamp(0.75rem, 0.5rem + 1vw, 1rem);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-lg);
  }
  @media (min-width: 58rem) {
    .uploadbar { grid-template-columns: minmax(13rem, auto) minmax(0, 1fr) auto; }
    .uploadbar__formats { grid-column: 1 / -1; }
  }
  .uploadbar__drop {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 1rem; border-radius: var(--r-md);
    border: 1.5px dashed color-mix(in oklab, var(--brand) 55%, var(--border-strong));
    cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }
  .uploadbar__drop:hover,
  .uploadbar.is-dragover .uploadbar__drop { background: var(--brand-tint); border-color: var(--brand); }
  .uploadbar__drop svg { inline-size: 1.5rem; block-size: 1.5rem; color: var(--brand-strong); flex: none; }
  .uploadbar__drop b { font-weight: 600; font-size: var(--text-sm); display: block; }
  .uploadbar__drop u { font-size: var(--text-xs); color: var(--brand-ink); text-underline-offset: 0.15em; }
  .uploadbar__input { align-self: center; }
  .uploadbar__input input { min-block-size: 3rem; border: 0; background: none; outline: none; inline-size: 100%; }
  .uploadbar .btn { min-block-size: 3rem; }
  .uploadbar__formats { font-size: var(--text-xs); color: var(--text-faint); margin: 0.15rem 0 0.15rem 0.25rem; }

  /* --- «Что можно сделать» --- */
  .docards { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
  @media (min-width: 55rem) {
    .docards { grid-template-columns: 1.35fr 1fr 1fr; }
    .docard--brand { grid-row: span 2; }
    .docard:last-child { grid-column: 2 / -1; }
  }
  .docard {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "ico title arrow" "ico text arrow";
    column-gap: 0.9rem;
    align-items: center;
    align-content: center;
    min-block-size: 6rem;
    padding: 1.15rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    transition: border-color var(--dur) var(--ease);
  }
  .docard:hover { border-color: var(--brand); }
  .docard:hover .docard__arrow { transform: translateX(4px); }
  .docard__ico { grid-area: ico; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--r-md); background: var(--brand-tint); color: var(--brand-strong); }
  .docard__ico svg { inline-size: 1.45rem; block-size: 1.45rem; }
  .docard__title { grid-area: title; font-weight: 700; font-family: var(--font-display); }
  .docard__text { grid-area: text; font-size: var(--text-xs); color: var(--text-faint); margin-top: 0.15rem; }
  .docard__arrow { grid-area: arrow; color: var(--text-faint); transition: transform var(--dur) var(--ease); }
  .docard__arrow svg { inline-size: 1.2rem; block-size: 1.2rem; }
  .docard--brand { background: var(--brand); border-color: transparent; color: var(--on-brand); }
  .docard--brand .docard__title { font-size: var(--text-lg); }
  .docard--brand .docard__ico { background: color-mix(in oklab, #fff 24%, transparent); color: var(--on-brand); }
  .docard--brand .docard__text { color: color-mix(in oklab, var(--on-brand) 78%, transparent); }
  .docard--brand .docard__arrow { color: var(--on-brand); }
  .docard--brand:hover { border-color: transparent; }

  /* --- Шаги 01 / 02 / 03 --- */
  .steps {
    background: var(--support-bg);
    color: var(--support-text-soft);
    border-radius: var(--r-lg);
    padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
    display: grid;
    gap: 1.5rem;
  }
  .steps__title { color: var(--support-text); font-size: clamp(1.35rem, 1rem + 1.3vw, 1.7rem); }
  .steps__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 1.5rem 2rem;
  }
  .steps__item {
    flex: 1 1 12rem;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "num ico" "h h" "p p";
    column-gap: 0.7rem;
    row-gap: 0.4rem;
    align-items: center;
  }
  @media (min-width: 52rem) {
    .steps__item:not(:last-child)::after {
      content: "";
      position: absolute;
      inset-block-start: 1rem;
      inset-inline: 2.75rem -2.75rem;
      border-top: 2px dashed color-mix(in oklab, var(--brand) 40%, transparent);
    }
  }
  .steps__num {
    grid-area: num; position: relative; z-index: 1;
    display: grid; place-items: center;
    inline-size: 2rem; block-size: 2rem;
    border-radius: 50%;
    background: var(--support-bg);
    border: 1.5px solid var(--brand); color: var(--brand);
    font-family: var(--font-display); font-weight: 800; font-size: var(--text-sm);
  }
  .steps__ico { grid-area: ico; color: var(--brand); justify-self: start; }
  .steps__ico svg { inline-size: 1.6rem; block-size: 1.6rem; }
  .steps__h { grid-area: h; color: var(--support-text); font-weight: 600; }
  .steps__p { grid-area: p; font-size: var(--text-sm); }

  /* --- «Для учёбы» --- */
  .study {
    display: grid;
    gap: 1.5rem 2.5rem;
    align-items: center;
    background: var(--brand-tint);
    border: 1px solid var(--brand-tint-2);
    border-radius: var(--r-lg);
    padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  }
  @media (min-width: 52rem) { .study { grid-template-columns: 52% 1fr; } }
  .study__body { display: grid; gap: 0.6rem; justify-items: start; align-content: center; }
  .study__body h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.6rem); text-wrap: balance; }
  .study__body p { font-size: var(--text-sm); color: var(--text-soft); max-width: 34ch; }
  .study__body .btn { margin-top: 0.5rem; }
  .study__preview {
    position: relative;
    display: grid; gap: 0.6rem;
    background: var(--surface); border-radius: var(--r-md);
    padding: 1.4rem 1.6rem; box-shadow: var(--shadow-md);
  }
  .study__preview p { margin: 0.45rem 0 0.1rem; font-size: var(--text-sm); font-weight: 600; }
  .study__preview p:first-child { margin-top: 0; }
  .study__preview b { color: var(--brand-strong); }
  .study__preview .line { block-size: 0.5rem; border-radius: var(--r-pill); background: var(--surface-sunken); }
  .study__preview .line--s { inline-size: 62%; }
  .study__cap {
    position: absolute;
    inset-block-start: -0.9rem; inset-inline-end: -0.9rem;
    inline-size: 2.6rem; block-size: 2.6rem; padding: 0.55rem;
    border-radius: 50%; background: var(--brand); color: var(--on-brand);
    box-shadow: var(--shadow-sm);
  }

  /* --- Сервис в цифрах — насыщенный зелёный блок --- */
  .numbers {
    display: grid;
    gap: 1.25rem 2.5rem;
    align-items: center;
    background: var(--green-deep);
    color: #fff;
    border-radius: var(--r-lg);
    padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  }
  @media (min-width: 55rem) { .numbers { grid-template-columns: 1.3fr 1fr; } }
  .numbers .section__eyebrow { color: color-mix(in oklab, #fff 78%, transparent); }
  .numbers__grid { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin: 0.9rem 0 0; }
  .numbers__grid dt {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2rem, 1.2rem + 2.6vw, 2.9rem);
    letter-spacing: -0.02em; line-height: 1;
  }
  .numbers__grid dd { margin: 0.25rem 0 0; font-size: var(--text-xs); color: color-mix(in oklab, #fff 75%, transparent); }
  .numbers__aside { display: grid; gap: 1rem; justify-items: start; }
  .numbers__aside p { font-size: var(--text-sm); color: color-mix(in oklab, #fff 85%, transparent); margin: 0; }

  /* --- Один сервис — много инструментов (roadmap) --- */
  .toolslist { display: grid; gap: 1.5rem 2.5rem; align-items: start; }
  @media (min-width: 58rem) { .toolslist { grid-template-columns: 0.8fr 1.2fr; } }
  .toolslist__title {
    font-family: var(--font-display); text-transform: uppercase;
    font-size: clamp(1.35rem, 1rem + 1.3vw, 1.7rem); line-height: 1.15;
  }
  .toolslist__cols { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
  .roadmap-card { border-radius: var(--r-md); padding: 1.35rem 1.5rem; border: 1px solid var(--border); }
  .roadmap-card--now { background: var(--brand-tint); border-color: var(--brand-tint-2); }
  .roadmap-card--next { background: var(--surface-sunken); }
  .toolslist__cap {
    display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.9rem;
    font-weight: 700; text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.06em;
  }
  .toolslist ul { display: grid; gap: 0.6rem; }
  .toolslist li { font-size: var(--text-sm); display: flex; align-items: center; gap: 0.55rem; }
  .toolslist a { color: var(--text); }
  .toolslist a:hover { color: var(--brand-ink); }
  .toolslist__now li::before {
    content: ""; flex: none;
    inline-size: 1rem; block-size: 1rem;
    background: no-repeat center / 0.75rem
      url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235f9a10" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
  }
  .toolslist__soon li { color: var(--text-faint); }
  .toolslist__soon li::before {
    content: ""; flex: none;
    inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%;
    background: var(--text-faint);
  }

  /* --- Отзывы --- */
  .reviews { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: stretch; }
  .review {
    margin: 0; display: flex; flex-direction: column; gap: 1rem;
    padding: clamp(1.35rem, 1rem + 1vw, 1.75rem);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  }
  .review::before {
    content: "\201C";
    font-family: var(--font-display); font-size: 2.5rem; line-height: 0.55;
    color: var(--brand-strong);
  }
  .review blockquote { margin: 0; font-size: var(--text-sm); flex: 1; }
  .review figcaption { display: flex; align-items: center; gap: 0.7rem; font-size: var(--text-xs); color: var(--text-faint); margin-top: auto; }
  .review__ava { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--brand-tint); color: var(--brand-strong); font-family: var(--font-display); font-weight: 800; flex: none; }
  .review figcaption b { color: var(--text); font-size: var(--text-sm); }

  /* --- Донат: широкая тёмная секция --- */
  .donate-band {
    display: grid; gap: 1.25rem 2.5rem; align-items: center;
    background: var(--support-bg); color: var(--support-text-soft);
    border-radius: var(--r-lg);
    padding: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  }
  @media (min-width: 52rem) { .donate-band { grid-template-columns: 1fr auto; } }
  .donate-band h3 { color: var(--support-text); font-size: clamp(1.3rem, 1rem + 1.4vw, 1.7rem); text-wrap: balance; }
  .donate-band p { font-size: var(--text-sm); max-width: 54ch; margin: 0.6rem 0 1.1rem; }
  .donate-band .btn { justify-self: start; }
  .donate-band__img { inline-size: clamp(6rem, 13vw, 9rem); height: auto; mix-blend-mode: lighten; justify-self: center; }
  @media (max-width: 51.99rem) { .donate-band__img { display: none; } }

  /* --- Финальный CTA --- */
  .cta-band {
    display: grid; gap: 0.8rem; justify-items: start;
    background: var(--brand-tint); border: 1px solid var(--brand-tint-2);
    border-radius: var(--r-lg);
    padding: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  }
  .cta-band h3 {
    font-family: var(--font-display); text-transform: uppercase; text-wrap: balance;
    font-size: clamp(1.3rem, 1rem + 1.4vw, 1.7rem);
  }
  .cta-band p { font-size: var(--text-sm); color: var(--text-faint); }

  /* --- Расширенный подвал (about) --- */
  .footer--full .footer__inner {
    display: grid; gap: 1.5rem; padding-block: 2.25rem;
  }
  @media (min-width: 42rem) { .footer--full .footer__inner { grid-template-columns: auto 1fr; align-items: start; } }
  .footer__brand { font-family: var(--font-display); font-weight: 800; color: var(--text); }
  .footer__brand span { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--text-xs); color: var(--text-faint); margin-top: 0.15rem; }
  .footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-size: var(--text-sm); }
  @media (min-width: 42rem) { .footer__links { justify-content: flex-end; } }
  .footer__links a { color: var(--text-soft); }
  .footer__links a:hover { color: var(--text); }

  /* --- Auth (allauth): вход/регистрация/сброс пароля/подтверждение email --- */
  .authshell { display: grid; justify-items: center; padding-block: clamp(1.5rem, 1rem + 2vw, 3rem); }
  .authcard { inline-size: min(100%, 26rem); display: grid; gap: 1.1rem; }
  .authcard h1 { font-size: var(--text-xl); margin: 0; }
  .authform { display: grid; gap: 0.85rem; }
  .authform__actions { display: grid; gap: 0.6rem; margin-top: 0.3rem; }
  .field--checkbox { display: flex; align-items: center; gap: 0.5rem; }
  .field--checkbox .field__label { font-weight: 500; }
  .field__error { font-size: var(--text-sm); color: var(--danger); margin: 0; }
  .authcard__messages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
  .alert { padding: 0.7rem 0.9rem; border-radius: var(--r-md); background: var(--surface-sunken); font-size: var(--text-sm); }
  .alert--error, .alert--danger { background: var(--danger-bg); color: var(--danger); }
  .alert--success { background: var(--brand-tint); color: var(--brand-strong); }

  /* --- Личный кабинет: ссылки аккаунта + история задач ------------- */
  .lk-account-links { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin-top: 0.6rem; font-size: var(--text-sm); }
  .lk-section__title { font-size: var(--text-lg); margin: 0 0 1rem; }

  .jobrow {
    display: flex; align-items: center; gap: 0.9rem;
    padding-block: 0.9rem;
    border-block-end: 1px solid var(--border);
  }
  .jobrow:last-child { border-block-end: 0; padding-block-end: 0; }
  .jobrow:first-child { padding-block-start: 0; }
  .jobrow__icon {
    display: grid; place-items: center;
    inline-size: 2.25rem; block-size: 2.25rem; flex: none;
    border-radius: 50%;
    background: var(--brand-tint); color: var(--brand-strong);
  }
  .jobrow__icon svg { inline-size: 1.15rem; block-size: 1.15rem; }
  .jobrow__body { display: grid; gap: 0.15rem; min-width: 0; flex: 1; }
  .jobrow__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .jobrow__meta { font-size: var(--text-xs); color: var(--text-faint); }
  .jobrow__state { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--text-sm); font-weight: 600; flex: none; }
  .jobrow__dot { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--text-faint); flex: none; }
  .jobrow[data-state="queued"] .jobrow__dot { background: var(--ink-300); }
  .jobrow[data-state="running"] .jobrow__dot { background: var(--brand); animation: pulse 1.4s var(--ease) infinite; }
  .jobrow[data-state="done"] .jobrow__dot { background: var(--brand-strong); }
  .jobrow[data-state="error"] .jobrow__dot { background: var(--danger); }
  .jobrow[data-state="error"] .jobrow__state { color: var(--danger); }
  .jobrow__action { flex: none; }

  @media (max-width: 34rem) {
    .jobrow { flex-wrap: wrap; }
    .jobrow__state, .jobrow__action { margin-inline-start: calc(2.25rem + 0.9rem); }
  }

  .lk-empty { display: grid; gap: 0.9rem; justify-items: start; padding-block: 0.5rem; }
  .lk-empty p { color: var(--text-soft); max-width: 42ch; }
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand) 55%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--brand) 0%, transparent); }
}

/* -------------------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .u-stack-sm { display: grid; gap: 0.5rem; }
  .u-muted { color: var(--text-faint); }
  .u-nowrap { white-space: nowrap; }
}