/*
 * Слой приложения поверх дизайн-системы «techno monospace».
 *
 * Здесь только то, чего нет в ds-fewbase.css: раскладка экранов, сводка
 * расходов, поведение таблицы на узком экране. Компоненты (кнопки, поля,
 * таблица, баннеры, бейджи, теги, пустое состояние, топбар) берутся из
 * системы как есть — дублировать их тут нельзя.
 *
 * Всё заскоуплено на .ds-fewbase, как и сама система: правила лежат в одном
 * пространстве имён, и ds-fewbase.css переносится заменой файла целиком, не
 * задевая этот. Цвета — только через токены системы, литеральных значений в
 * файле быть не должно.
 *
 * Фон страницы задаёт body.ds-fewbase: у html фона нет, поэтому браузер
 * растягивает фон body на весь холст — отдельное правило для html не нужно.
 */

/*
 * Шрифты лежат локально, а не тянутся с CDN — как в time-recorder: у
 * платформы один источник начертаний, и внешний CDN на пути к первому
 * экрану добавлял бы чужой домен, чужой отказ и чужую задержку. У IBM Plex
 * Sans и JetBrains Mono есть кириллические подмножества, поэтому русский
 * текст не падает в системный шрифт. Кэш на год задаёт public/_headers.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* Поля документа снимаются у самого body, а не у .ds-fewbase: браузерные
   8px висят на body, и правило на классе их не отменяет, если класс стоит на
   том же элементе — специфичность выше, но свойство то же и значение
   наследуется от умолчания браузера, а не от класса. Без этого тёмная
   полоса шапки не доставала до краёв окна на восемь пикселов, и продукт
   стоял в рамке, которой нет у соседей. */
body {
  margin: 0;
}

.ds-fewbase {
  min-height: 100vh;
}

/* ── Каркас страницы ── */

/* ── Шапка ──
   Одна и та же во всех продуктах платформы (образец — time-recorder): знак и
   название, за ними разделы плитками, справа почта и выход. Человек,
   переходящий между инструментами, не должен искать навигацию заново. */

.ds-fewbase .topbar {
  padding: 12px 24px;
  gap: 22px;
}

.ds-fewbase .topbar .nav {
  gap: 22px;
  flex: 1;
  flex-wrap: wrap;
}

/* Пункты навигации — плитки; текущий вывернут в светлое. */
.ds-fewbase .nav a,
.ds-fewbase .nav .nav-current {
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.ds-fewbase .nav-current {
  background: var(--bg);
  color: var(--text);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 500;
}

/* Знак с названием — не плитка, у неё своё внутреннее выравнивание. */
.ds-fewbase .nav-brand {
  padding: 0;
}

/* Знак продукта в шапке — рядом со словомаркой, как у витрины платформы. */
.ds-fewbase .brand-mark {
  display: block;
}

/* Знак, название и бейдж тарифа — одна группа со своим внутренним
   зазором (9px, тот же, что внутри .nav-brand), отдельная от общего
   зазора между пунктами шапки (22px, .topbar .nav) — иначе бейдж
   отъезжал бы от названия дальше, чем от соседней вкладки. */
.ds-fewbase .brand-group {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Контурный тег без заливки и точки — DS-компонент .badge (плотная
   плашка со светлым фоном) читался на тёмной полосе шапки чужеродным
   пятном. Здесь легче: только буквы и тонкая рамка, тон в цвет своей
   роли.

   Селектор несёт лишний класс `.nav` не для вложенности, а ради
   специфичности: бейдж свободного тарифа — ссылка (`<a>`), и без этого
   `.ds-fewbase .nav a` (ниже, паддинг и размер пунктов меню) её обгонял бы
   по специфичности и раздувал бы плашку до размера обычного пункта шапки
   — бейдж тарифа Pro (`<span>`, того же правила не касается) и бейдж
   Free выглядели бы разного размера. */
.ds-fewbase .nav .plan-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid;
}

.ds-fewbase .plan-badge-pro {
  color: var(--accent);
  border-color: var(--accent);
}

.ds-fewbase .plan-badge-free {
  color: var(--topbar-fg-soft);
  border-color: var(--topbar-fg-soft);
}

.ds-fewbase a.plan-badge-free:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

.ds-fewbase .topbar .user-email {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--topbar-fg-soft);
  margin-left: auto;
  white-space: nowrap;
}

/* Форма выхода не должна ломать строку навигации. */
.ds-fewbase .nav form {
  display: inline-flex;
  margin: 0;
}

.ds-fewbase .wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* Узкие экраны настроек и формы подписки. */
.ds-fewbase .wrap-narrow {
  max-width: 520px;
}

/* ── Шапка страницы ── */

/* Имя экрана, счётчики и главное действие одной строкой под линейкой —
   так же, как в макете (артборды 2m и 2o). */
.ds-fewbase .page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: 1px solid var(--text);
  padding-bottom: var(--s-3);
}

.ds-fewbase .page-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.ds-fewbase .page-title h1 {
  font-size: 22px;
}

.ds-fewbase .page-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ── Заголовок раздела ── */

.ds-fewbase .list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  border-bottom: 1px solid var(--text);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
}

.ds-fewbase .list-head .count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
  margin-left: var(--s-2);
}

/* Подраздел (архив) — не второй заголовок страницы, а метка списка:
   мелкий моноширинный капс под тонкой линейкой. */
.ds-fewbase .list-head-sub {
  border-bottom-color: var(--line);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
}

.ds-fewbase .list-head-sub h2 {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ── Сводка расходов ── */

/* Карточек от одной до трёх: без курсов пропадает и разбивка по категориям,
   и прогноз. Flex, а не сетка: в макете первая карточка шире остальных
   (1.15fr против 1fr), и при этом раскладка обязана пережить исчезновение
   второй и третьей — grid-template-columns под три колонки оставил бы
   на их месте дыру. */
.ds-fewbase .summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.ds-fewbase .summary .card {
  flex: 1 1 240px;
  padding: 18px 20px;
}

.ds-fewbase .summary .card:first-child {
  flex-grow: 1.15;
}

.ds-fewbase .summary-value {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: var(--s-1);
}

.ds-fewbase .summary-sub {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-3);
}

.ds-fewbase .summary-sub .num {
  font-size: 12.5px;
  margin-top: 2px;
}

/* Пара «ключ → значение» в карточках разбивки. */
.ds-fewbase .kv {
  margin-top: var(--s-3);
}

.ds-fewbase .kv-row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--line-soft);
}

.ds-fewbase .kv-row:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.ds-fewbase .kv-key {
  color: var(--text-soft);
}

/* Валюта, не вошедшая в итоги, помечается прямо в строке разбивки:
   отдельная сноска внизу теряется, а расхождение сумм — нет. */
.ds-fewbase .kv-missing,
.ds-fewbase .kv-missing .kv-key {
  color: var(--red-fg);
}

/* Баннер над формой. */
.ds-fewbase .form-msg {
  margin-bottom: var(--s-4);
}

/* ── Список подписок ── */

/* Таблица в макете моноширинная целиком, а не только в колонках с числами:
   так строки читаются столбиком. */
.ds-fewbase .table td {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 9px 12px;
}

.ds-fewbase .table thead tr {
  background: var(--line-soft);
}

.ds-fewbase .table th {
  border-bottom-color: var(--line);
}

/* Вертикальные разделители колонок — граница ячейки, а не отдельный элемент. */
.ds-fewbase .table th + th,
.ds-fewbase .table td + td {
  border-left: 1px solid var(--line-soft);
}

.ds-fewbase .table .name {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Период — служебная колонка: приглушена, чтобы не спорить с суммой. */
.ds-fewbase .table .period {
  color: var(--text-muted);
}

.ds-fewbase .table .amt {
  text-align: right;
}

.ds-fewbase .table .acts {
  text-align: right;
  white-space: nowrap;
}

.ds-fewbase .table .acts > * {
  margin-left: var(--s-3);
}

.ds-fewbase .table .acts > :first-child {
  margin-left: 0;
}

/* Разметка действия требует post, то есть form; inline-flex возвращает её
   в строку. Отступ задаёт правило выше — margin здесь его бы перебил. */
.ds-fewbase .table .acts form {
  display: inline-flex;
}

/* Архив в макете — не таблица, а тихий список: без рамки, фона, шапки и
   разделителей колонок. Приглушение задаёт .archived дизайн-системы. */
.ds-fewbase .table.archived {
  border: 0;
  background: none;
}

.ds-fewbase .table.archived thead {
  display: none;
}

/* Рамки нет — значит нет и внутреннего поля у крайних ячеек: список
   выравнивается по той же линии, что заголовок раздела над ним. */
.ds-fewbase .table.archived td:first-child {
  padding-left: 0;
}

.ds-fewbase .table.archived td:last-child {
  padding-right: 0;
}

.ds-fewbase .table.archived td + td {
  border-left: 0;
}

/* ── Пустое состояние ── */

.ds-fewbase .empty-state {
  padding: var(--s-6) var(--s-5);
  gap: var(--s-2);
}

/* В макете заголовок пустого состояния — крупный и тёмный: это не подпись
   к пустоте, а первое, что читают на пустом экране. */
.ds-fewbase .empty-state .empty-state-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.ds-fewbase .empty-state .note {
  font-size: 13px;
}

.ds-fewbase .empty-state .btn {
  margin-top: var(--s-2);
}

/* ── Формы ── */

.ds-fewbase form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
}

.ds-fewbase .card-head {
  border-bottom: 1px solid var(--text);
  padding-bottom: 9px;
  margin-bottom: var(--s-4);
}

/* Загрузка чека — необязательный путь, поэтому обведена пунктиром, как
   пустое состояние: не поле формы, а предложение. */
.ds-fewbase .upload {
  border: 1px dashed var(--n-500);
  background: var(--n-200);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
  gap: var(--s-2);
}

/* Подпись блока: она же метка поля выбора файла (см. разметку). */
.ds-fewbase .upload-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.ds-fewbase .upload-note {
  font-size: 12.5px;
  color: var(--text-muted);
}

.ds-fewbase .upload-file {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 6px 8px;
}

/* Кнопка и ограничения формата стоят в строку: ограничения относятся к
   нажатию, а не к полю выше. */
.ds-fewbase .upload-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-1);
}

.ds-fewbase .upload-actions .btn {
  flex: none;
}

/* Форматы и размер съехали под строку с кнопкой, когда рядом с ней встал
   остаток распознаваний: два хвоста в одной строке читались как один. */
.ds-fewbase .upload-hint {
  margin-top: var(--s-2);
}

/* Поля выравниваются по нижнему краю, а не растягиваются: пометка
   «распознано» удлиняет метку соседнего поля на строку, и без этого поля
   ввода в строке разъезжались бы по вертикали. */
.ds-fewbase .field-row {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
}

.ds-fewbase .field-row .field {
  flex: 1;
}

.ds-fewbase .field-row .field-narrow {
  flex: none;
  width: 120px;
}

/* Пары «метка → значение», которые нельзя редактировать. */
.ds-fewbase .kv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-3);
}

.ds-fewbase .kv-grid p {
  margin-top: 3px;
}

/* Поле, которое заполнило распознавание чека: подсветка «здесь сейчас идёт
   работа» из дизайн-системы, а не самостоятельный цвет. */
.ds-fewbase .field-filled .input {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.ds-fewbase .field-mark {
  color: var(--a-700);
}

/* Поле, из-за которого форма не сохранилась. Рамку и фон красит сама
   система (.field-invalid .input), здесь — только метка. */
.ds-fewbase .field-invalid > label {
  color: var(--danger);
}

/* ── Настройки ── */

.ds-fewbase .settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--s-5);
}

.ds-fewbase .settings-grid .card {
  padding: var(--s-4) var(--s-5);
}

.ds-fewbase .settings-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Два поля в строку внутри карточки. align-items, иначе поле без подсказки
   растянулось бы по высоте соседнего — вместе со своим полем ввода. */
.ds-fewbase .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--s-4);
}

/* Подзаголовок внутри карточки. */
.ds-fewbase .blk-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ds-fewbase .blk-title-sep {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}

/* Канал, который заведомо ничего не доставит: чат не привязан. Флажок и
   подпись гаснут вместе — серым читается «сейчас недоступно», а не «выбор
   не сделан». */
.ds-fewbase .check-disabled {
  color: var(--text-muted);
}

.ds-fewbase .check-disabled input {
  cursor: not-allowed;
}

/* Карточка «только чтение»: тише обычной, потому что здесь ничего не
   меняется — правка живёт в кабинете платформы. */
.ds-fewbase .card-quiet {
  background: var(--grey-bg);
  border-color: var(--grey-line);
}

.ds-fewbase .form-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

.ds-fewbase .form-actions .btn {
  align-self: flex-start;
}

/* ── Узкий экран ── */

@media (max-width: 700px) {
  .ds-fewbase .topbar {
    padding-inline: var(--s-3);
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .ds-fewbase .topbar .nav {
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-3);
  }

  /* Адрес пропускает ссылки вперёд и переносится на свою строку, если не
     помещается рядом с ними. order, а не перестановка в разметке: на широком
     экране он должен остаться перед ссылками, как в макете. */
  .ds-fewbase .topbar .user-email {
    order: 1;
  }

  .ds-fewbase .wrap {
    padding: var(--s-4) var(--s-3) var(--s-6);
    gap: var(--s-4);
  }

  /* Кнопка добавления уходит под заголовок во всю ширину: рядом с ним она
     сжимается до нечитаемой, а это главное действие экрана. */
  .ds-fewbase .page-head,
  .ds-fewbase .list-head {
    flex-wrap: wrap;
  }

  .ds-fewbase .page-head .btn,
  .ds-fewbase .list-head .btn {
    flex: 1 1 100%;
  }

  .ds-fewbase .summary .card {
    flex: 1 1 100%;
  }

  .ds-fewbase .summary-value {
    font-size: 28px;
  }

  .ds-fewbase .settings-grid,
  .ds-fewbase .field-grid {
    grid-template-columns: 1fr;
  }

  /* Таблица становится списком карточек: шапка исчезает, названия колонок
     уходят внутрь строки префиксами из data-label. */
  .ds-fewbase .table,
  .ds-fewbase .table tbody,
  .ds-fewbase .table tr,
  .ds-fewbase .table td {
    display: block;
  }

  .ds-fewbase .table {
    border: 0;
    background: none;
  }

  .ds-fewbase .table thead {
    display: none;
  }

  /* Колонок больше нет — вертикальные разделители вернули бы полосу слева
     у каждой строки карточки. */
  .ds-fewbase .table th + th,
  .ds-fewbase .table td + td {
    border-left: 0;
  }

  .ds-fewbase .table tr {
    border: 1px solid var(--line);
    background: var(--surface);
    padding: var(--s-3);
    margin-bottom: var(--s-2);
  }

  /* На узком экране архив складывается в такие же карточки, как активный
     список, — значит, и поля у крайних ячеек те же. */
  .ds-fewbase .table.archived td:first-child,
  .ds-fewbase .table.archived td:last-child {
    padding-inline: 0;
  }

  .ds-fewbase .table tr:last-child {
    margin-bottom: 0;
  }

  .ds-fewbase .table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 3px 0;
    border-bottom: 0;
  }

  .ds-fewbase .table td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .ds-fewbase .table .name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    padding-bottom: var(--s-2);
  }

  .ds-fewbase .table .name::before,
  .ds-fewbase .table .acts::before {
    content: none;
  }

  /* Действия строки — блок высотой 44 px: попасть пальцем можно, лишних
     кнопок нет. */
  .ds-fewbase .table .acts {
    justify-content: flex-start;
    align-items: center;
    gap: var(--s-4);
    min-height: 44px;
    margin-top: var(--s-1);
    text-align: left;
  }

  .ds-fewbase .table .acts > * {
    margin-left: 0;
  }

  .ds-fewbase .field-row {
    flex-wrap: wrap;
  }
}

/* Знак продукта в шапке — свой мотив, а не диагональ платформы.
   Повторяемость: тот же квадрат, сдвинутый на модуль.
   Дизайн-система красит клетки 1, 5 и 9 (мотив самого fewbase), поэтому
   здесь перечислены ВСЕ девять: погашенные тоже, иначе от платформенной
   диагонали остались бы лишние акцентные клетки поверх нашего рисунка.
   Три класса против двух у системного правила — этим и перебивается. */
.ds-fewbase .topbar .mark i:nth-child(5),
.ds-fewbase .topbar .mark i:nth-child(6),
.ds-fewbase .topbar .mark i:nth-child(8),
.ds-fewbase .topbar .mark i:nth-child(9) {
  background: var(--accent);
}

.ds-fewbase .topbar .mark i:nth-child(1),
.ds-fewbase .topbar .mark i:nth-child(2),
.ds-fewbase .topbar .mark i:nth-child(4) {
  background: var(--topbar-fg);
}

.ds-fewbase .topbar .mark i:nth-child(3),
.ds-fewbase .topbar .mark i:nth-child(7) {
  background: var(--mark-dim);
}

/* — подписки на сами продукты fewbase —
   Пометка стоит в строке имени: у такой подписки нет кнопок «Изменить» и
   «Удалить», и без объяснения это читается как поломка, а не как правило. */
.ds-fewbase .row-mark {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 2px;
}

/* — экран «бесплатные места кончились» — */
.ds-fewbase .page-card {
  padding: var(--s-5);
}

/* Что даёт покупка — списком без маркеров: это перечень, а не проза, но и
   не список дел, которому маркеры к лицу. */
.ds-fewbase .plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-size: 13.5px;
}

.ds-fewbase .plan-list li {
  padding-left: var(--s-4);
  position: relative;
}

.ds-fewbase .plan-list li::before {
  content: "·";
  position: absolute;
  left: var(--s-2);
  color: var(--accent);
  font-weight: 700;
}