/*
 * Стили продукта Consent поверх ds-fewbase.css (токены платформы).
 */

/*
 * Шрифты — локальные, тот же набор и те же подмножества, что у соседних
 * продуктов платформы (файлы в fonts/). Без этого блока кабинет падал в
 * системный monospace/sans у всех, у кого JetBrains Mono и IBM Plex не установлены.
 */
@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;
}
.ds-fewbase {
  /* Значения макетов раунда 11 Support, которых нет в токенах ДС. */
  --sp-thead: #e9e9e3;        /* фон шапки таблицы (11a) */
  --sp-badge-pro: #3fc59c;    /* текст бейджа PRO/BUSINESS на тёмной шапке */
  --sp-topbar-line: #4a4d50;  /* контур бейджа FREE */
  --sp-topbar-rule: #2a2d30;  /* линия над вкладками, когда они уходят на свою строку */
  --sp-body: #3b3d40;         /* основной текст карточки лимита */
  --sp-meter-track: #e2e2da;  /* шкала лимита согласий (11l): дорожка и заполнение на 100 % */
  --sp-meter-full: #c79a2a;
}

/* DS не задаёт сброс отступа у body — уже терялось дважды, фиксируем здесь. */
body { margin: 0; }

/* ---------- Топбар (11a, 11j): знак и тариф, вкладки ---------- */
.ds-fewbase .topbar { background: var(--topbar-bg); color: var(--topbar-fg); padding: 12px 24px; }
.ds-fewbase .nav { flex: 1; display: flex; align-items: center; gap: 20px; padding: 0; }
/* Знак, продукт и бейдж — одна неразрывная группа. */
.ds-fewbase .nav-product { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.ds-fewbase .nav-brand { display: inline-flex; align-items: center; gap: 9px; line-height: normal; font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; color: var(--topbar-fg); text-decoration: none; }
/* Знак-плейсхолдер рядом с названием продукта у гостя (меню сервисов
   показывается только вошедшему — см. layout.tsx). */
.ds-fewbase .nav-brand .brand-mark { display: block; }
/* Бейдж тарифа рядом со знаком — те же правила, что у infra-tracker и
   time-recorder: у <a> (free) и <span> (pro) один размер. PRO и BUSINESS —
   акцентный контур, FREE — серая ссылка на витрину тарифов. */
.ds-fewbase .nav .plan-badge { display: inline-block; font-family: var(--font-mono); font-size: 10px; line-height: normal; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border: 1px solid; white-space: nowrap; }
.ds-fewbase .nav .plan-badge-pro { color: var(--sp-badge-pro); border-color: var(--accent); }
.ds-fewbase .nav .plan-badge-free { color: var(--topbar-fg-soft); border-color: var(--sp-topbar-line); }
.ds-fewbase .nav a.plan-badge-free:hover { color: var(--topbar-fg); border-color: var(--topbar-fg-soft); text-decoration: none; }
/* Плашка сайта и меню сайтов (12j). */
.ds-fewbase .site-switch { position: relative; }
.ds-fewbase .site-pill { display: flex; align-items: center; gap: 8px; box-sizing: border-box; font-family: var(--font-mono); font-size: 11.5px; line-height: normal; border: 1px solid #3d4043; background: #1c1f22; padding: 4px 9px; color: var(--topbar-fg); white-space: nowrap; list-style: none; cursor: pointer; }
.ds-fewbase .site-pill::-webkit-details-marker { display: none; }
.ds-fewbase .site-pill::after { content: "\25BE"; color: var(--topbar-fg-soft); margin-left: auto; }
.ds-fewbase .site-switch[open] .site-pill { border-color: var(--topbar-fg-soft); background: #26292c; }
.ds-fewbase .site-switch[open] .site-pill::after { content: "\25B4"; }
.ds-fewbase .site-pill-name { color: var(--topbar-fg); }
.ds-fewbase .site-pill-host { color: #7b7e82; }
.ds-fewbase .site-menu { position: absolute; top: calc(100% + 7px); left: 0; width: 300px; max-width: calc(100vw - 28px); box-sizing: border-box; z-index: 2; background: var(--surface); border: 1px solid var(--text); box-shadow: 0 8px 20px rgba(20, 22, 26, 0.18); font-family: var(--font-mono); font-size: 12px; line-height: normal; white-space: nowrap; }
.ds-fewbase .site-menu .site-menu-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text); text-decoration: none; }
.ds-fewbase .site-menu .site-menu-item + .site-menu-item { border-top: 1px solid var(--line-soft); }
.ds-fewbase .site-menu .site-menu-item:hover { color: var(--text); text-decoration: none; }
.ds-fewbase .site-menu-host { color: var(--grey); overflow: hidden; text-overflow: ellipsis; }
.ds-fewbase .site-menu-name { overflow: hidden; text-overflow: ellipsis; }
.ds-fewbase .site-menu .site-menu-current { background: var(--grey-bg); color: var(--grey); }
.ds-fewbase .site-menu-current .site-menu-name { color: var(--grey-fg); }
.ds-fewbase .site-menu-tag { margin-left: auto; font-size: 10.5px; }
.ds-fewbase .site-menu .site-menu-new { display: block; padding: 9px 12px; border-top: 1px solid var(--text); color: var(--a-700); font-weight: 700; text-decoration: none; }
.ds-fewbase .site-menu .site-menu-new:hover { color: var(--a-700); text-decoration: none; }
/* 768 (12j): та же строка, поля уже. */
@media (max-width: 960px) {
  .ds-fewbase .topbar { padding: 12px 18px; }
}
/* 390 (12i, 12j): плашка сайта своей строкой под знаком, на всю ширину. */
@media (max-width: 720px) {
  .ds-fewbase .topbar { padding: 10px 14px; }
  .ds-fewbase .topbar:has(.site-switch) { padding-bottom: 12px; }
  .ds-fewbase .nav { flex-wrap: wrap; gap: 10px; }
  .ds-fewbase .site-switch { flex-basis: 100%; }
}

/* ---------- Каркас страницы ---------- */
.ds-fewbase .wrap { max-width: 1280px; margin: 0 auto; padding: 22px 24px 30px; }
@media (max-width: 960px) { .ds-fewbase .wrap { padding: 22px 18px 30px; } }
@media (max-width: 479px) { .ds-fewbase .wrap { padding: 22px 14px 30px; } }
/* Узкая колонка для форм (12i): карточка по центру, поля страницы 40/20/48. */
.ds-fewbase .wrap-narrow { max-width: none; padding: 40px 20px 48px; display: flex; justify-content: center; }
@media (max-width: 480px) {
  .ds-fewbase .wrap-narrow { padding: 24px 14px 32px; }
}

/* ---------- Кнопки (моно, прямые углы, как в макете) ---------- */
.ds-fewbase .btn { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 12px; padding: 7px 14px; border: 1px solid var(--text); background: var(--surface); color: var(--text); text-decoration: none; cursor: pointer; line-height: 1.2; }
.ds-fewbase .btn-primary { background: var(--text); color: var(--bg); font-weight: 700; padding: 9px 16px; border: 0; line-height: normal; white-space: nowrap; }
.ds-fewbase .btn-primary:hover { background: #000; }

/* ---------- Таблица (11a, 11c) ---------- */
/* line-height: normal — строки таблиц той высоты, что утверждена в макетах: без
   doctype (quirks) браузер сам сбрасывал его у <table>, со стандартным режимом
   таблица унаследовала бы 1.5 от body и стала выше. */
.ds-fewbase .table { width: 100%; border-collapse: collapse; font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: normal; border: 1px solid var(--line); background: var(--surface); }
.ds-fewbase .table thead tr { background: var(--sp-thead); }
.ds-fewbase .table th { text-align: left; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ds-fewbase .table th:first-child, .ds-fewbase .table td:first-child { padding-left: 14px; }
.ds-fewbase .table th:last-child, .ds-fewbase .table td:last-child { padding-right: 14px; }
.ds-fewbase .table th + th { border-left: 1px solid #e2e2da; }
.ds-fewbase .table td { padding: 9px 10px; vertical-align: top; }
.ds-fewbase .table td + td { border-left: 1px solid #f0f0e9; }
.ds-fewbase .table tbody tr { border-bottom: 1px solid var(--line-soft); }
.ds-fewbase .table tbody tr:last-child { border-bottom: 0; }

/* ---------- Формы кабинета (11d, 11e) ---------- */
.ds-fewbase .input { box-sizing: border-box; border: 1px solid var(--text); background: #fff; padding: 8px 11px; font-family: "JetBrains Mono", monospace; font-size: 13px; color: var(--text); max-width: 340px; width: 100%; }
.ds-fewbase .field { display: flex; flex-direction: column; gap: 6px; }
.ds-fewbase .field > .field-label, .ds-fewbase .field-label { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ds-fewbase .field-hint { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--grey); }
.ds-fewbase .field-error { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--red-fg); }
.ds-fewbase .field-invalid .input { border-color: var(--red-fg); background: #fff; }

/* ---------- Карточки ---------- */
.ds-fewbase .card { border: 1px solid var(--line); background: var(--surface); padding: 22px 24px 24px; }
.ds-fewbase .card h1 { margin: 0 0 6px; font-family: "JetBrains Mono", monospace; font-size: 20px; }
.ds-fewbase .card .lead { margin: 0 0 18px; font-size: 13.5px; color: var(--grey-fg); }
/* Заголовок раздела внутри карточки (страница сайта): моно, некрупно, явно
   мельче `.card h1` (DS `h2` — 22px, крупнее `.card h1`). */
.ds-fewbase .card h2 { margin: 22px 0 8px; font-family: "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; }
.ds-fewbase .card h2:first-of-type { margin-top: 18px; }
/* Шапка карточки: заголовок слева, кнопка или сводка тарифа справа. */
.ds-fewbase .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ds-fewbase .card-head-meta { font-family: "JetBrains Mono", monospace; font-size: 11.5px; line-height: normal; color: var(--grey-fg); white-space: nowrap; }
/* Карточка-мастер (11d): та же форма, что у Support /setup. */
.ds-fewbase .card.card-setup { width: 100%; max-width: 480px; box-sizing: border-box; margin: 0; padding: 26px 28px 28px; }
.ds-fewbase .card.card-setup h1 { font-size: 19px; font-weight: 700; line-height: normal; margin: 0; }
.ds-fewbase .card.card-setup .lead { margin: 8px 0 22px; line-height: 1.55; color: var(--grey-fg); }
.ds-fewbase .card.card-setup .card-head + .lead { margin: 10px 0 0; color: var(--sp-body); line-height: 1.6; }
.ds-fewbase .card.card-setup .field { gap: 7px; }
.ds-fewbase .card.card-setup .field-label { line-height: normal; }
.ds-fewbase .card.card-setup .input { max-width: none; padding: 9px 11px; min-height: 40px; }
.ds-fewbase .input::placeholder { color: #9a9c96; opacity: 1; }
.ds-fewbase .card.card-setup .field-hint { line-height: 1.5; color: var(--grey); }
.ds-fewbase .card.card-setup .field-error { font-size: 11.5px; }
/* Карточка лимита (12i): свои поля и просвет над кнопками. */
.ds-fewbase .card.card-setup.card-limit { padding: 24px; }
.ds-fewbase .card.card-setup.card-limit .card-head { flex-wrap: nowrap; }
.ds-fewbase .card.card-setup.card-limit .form-actions { margin-top: 20px; }
.ds-fewbase .card.card-setup .btn-primary { font-size: 13px; padding: 11px 20px; }
.ds-fewbase .card.card-setup .card-head ~ .form-actions .btn-primary { font-size: 12px; padding: 9px 16px; }
.ds-fewbase .form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.ds-fewbase .card.card-setup .form-actions { margin-top: 2px; }
.ds-fewbase a.form-back { font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: normal; color: var(--a-700); }
@media (max-width: 480px) {
  .ds-fewbase .card.card-setup { padding: 22px 18px 24px; }
  .ds-fewbase .card.card-setup.card-limit { padding: 24px; }
}

/* ---------- Список сайтов (12i) ---------- */
.ds-fewbase .page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--text); padding-bottom: 12px; }
.ds-fewbase .page-head-title { display: flex; align-items: baseline; gap: 14px; }
.ds-fewbase .page-head-title h1 { margin: 0; font-family: var(--font-mono); font-size: 22px; font-weight: 700; line-height: normal; }
.ds-fewbase .page-head-count { font-family: var(--font-mono); font-size: 12px; }
.ds-fewbase .page-head-count b { font-weight: 700; }
.ds-fewbase .sites-table { width: 100%; margin-top: 16px; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; line-height: normal; border: 1px solid var(--line); background: var(--surface); }
.ds-fewbase .sites-table th { text-align: left; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.ds-fewbase .sites-table td { padding: 12px 14px; border-top: 1px solid var(--line-soft); vertical-align: top; }
.ds-fewbase .sites-table .site-cell-name a { font-size: 13px; font-weight: 700; }
.ds-fewbase .sites-table .site-cell-domains { line-height: 1.6; }
.ds-fewbase .sites-table .site-cell-created { white-space: nowrap; }
.ds-fewbase .site-status { white-space: nowrap; }
.ds-fewbase .site-status-none { color: var(--grey); }
.ds-fewbase .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; flex-shrink: 0; }
.ds-fewbase .dot-on { background: var(--accent); }
.ds-fewbase .dot-off { background: var(--topbar-fg-soft); }
/* 390 (12i): строки вместо таблицы: имя, домены через запятую, статус и дата. */
@media (max-width: 479px) {
  .ds-fewbase .sites-table { display: block; border: 1px solid var(--line); font-size: 11.5px; }
  .ds-fewbase .sites-table thead { display: none; }
  .ds-fewbase .sites-table tbody { display: block; }
  .ds-fewbase .sites-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 14px; }
  .ds-fewbase .sites-table tr + tr { border-top: 1px solid var(--line-soft); }
  .ds-fewbase .sites-table td { display: block; padding: 0; border: 0; }
  .ds-fewbase .sites-table .site-cell-name { grid-column: 1 / -1; }
  .ds-fewbase .sites-table .site-cell-domains { grid-column: 1 / -1; line-height: normal; color: var(--grey-fg); overflow-wrap: anywhere; }
  .ds-fewbase .sites-table .site-cell-domains div { display: inline; }
  .ds-fewbase .sites-table .site-cell-domains div + div::before { content: ", "; }
  .ds-fewbase .sites-table .site-status { grid-row: 3; grid-column: 1; }
  .ds-fewbase .sites-table .site-cell-created { grid-row: 3; grid-column: 2; color: var(--grey); }
}

/* ---------- Шапка сайта и вкладки (12j) ---------- */
.ds-fewbase .site-back { display: block; width: fit-content; margin-top: -2px; font-family: var(--font-mono); font-size: 11.5px; line-height: normal; }
.ds-fewbase .site-name { margin: 10px 0 0; font-family: var(--font-mono); font-size: 26px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.ds-fewbase .site-domains { margin: 6px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: normal; color: var(--grey-fg); overflow-wrap: anywhere; }
.ds-fewbase .site-tabs-wrap { margin-top: 18px; box-shadow: inset 0 -1px 0 var(--text); }
.ds-fewbase .site-tabs { position: relative; display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.ds-fewbase .site-tabs::-webkit-scrollbar { display: none; }
.ds-fewbase .site-tab { font-family: var(--font-mono); font-size: 12.5px; line-height: normal; white-space: nowrap; flex-shrink: 0; padding: 0 0 9px; border-bottom: 3px solid transparent; color: var(--grey-fg); text-decoration: none; }
.ds-fewbase .site-tab-current { border-bottom-color: var(--accent); color: var(--text); font-weight: 700; }
@media (max-width: 479px) {
  .ds-fewbase .site-name { font-size: 22px; }
  .ds-fewbase .site-tabs-wrap { margin: 16px -14px 0; }
  .ds-fewbase .site-tabs { gap: 20px; padding: 0 14px; }
  /* Срезанный край затухает: справа по умолчанию, слева — когда список прокручен (cabinet.js). */
  .ds-fewbase .site-tabs { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  .ds-fewbase .site-tabs.fade-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
  .ds-fewbase .site-tabs.fade-left:not(.fade-right) { -webkit-mask-image: linear-gradient(to right, transparent, #000 44px); mask-image: linear-gradient(to right, transparent, #000 44px); }
  .ds-fewbase .site-tabs:not(.fade-left):not(.fade-right) { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Вкладка Install (12k) ---------- */
.ds-fewbase .install { display: flex; flex-direction: column; gap: 36px; max-width: 760px; margin-top: 26px; padding-bottom: 10px; }
.ds-fewbase .install h2 { margin: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 700; line-height: normal; }
.ds-fewbase .install-lead { margin: 6px 0 0; max-width: 680px; font-size: 13.5px; line-height: 1.6; color: var(--sp-body); text-wrap: pretty; }
.ds-fewbase .code-inline { font-family: var(--font-mono); font-size: 12.5px; background: #e8e8e1; padding: 1px 4px; }
.ds-fewbase .install-card { border: 1px solid var(--line); background: var(--surface); padding: 22px 24px 20px; }
/* Строка кода и Copy: одна рамка, кнопка справа (на телефоне под строкой). */
.ds-fewbase .code-row { display: flex; margin-top: 14px; border: 1px solid var(--text); background: #fff; }
.ds-fewbase .snippet { flex: 1; min-width: 0; padding: 12px 14px; font-family: var(--font-mono); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; user-select: all; }
.ds-fewbase .snippet-url { color: var(--a-700); }
.ds-fewbase .copy-btn { display: flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-width: 128px; min-height: 44px; padding: 0 18px; border: 0; background: var(--text); color: var(--bg); font-family: var(--font-mono); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ds-fewbase .copy-btn[hidden] { display: none; }
.ds-fewbase .copy-btn.is-copied { background: var(--a-100); color: var(--a-700); border-left: 1px solid var(--text); }
.ds-fewbase .install .field-hint { margin: 8px 0 0; line-height: 1.5; text-wrap: pretty; }
.ds-fewbase .install-status-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ds-fewbase .label-caps { margin: 0 0 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; line-height: normal; color: var(--text-muted); }
.ds-fewbase .install-status { display: flex; gap: 10px; align-items: baseline; margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sp-body); text-wrap: pretty; }
.ds-fewbase .install-status[data-seen="1"] { color: var(--text); }
.ds-fewbase .install-status b { font-weight: 600; }
.ds-fewbase .install-status .dot { margin: 0; transform: translateY(-1px); }
.ds-fewbase .install-status .dot-off { background: var(--topbar-fg-soft); }
.ds-fewbase .code-pair { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.ds-fewbase .code-block { display: block; border: 1px solid var(--line); background: #fff; padding: 11px 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; overflow-wrap: anywhere; }
.ds-fewbase .code-block-solo { margin-top: 12px; }
.ds-fewbase .code-mark { background: var(--a-100); color: var(--a-700); padding: 1px 2px; }
.ds-fewbase .install-cats { margin: 8px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--grey-fg); }
.ds-fewbase .link-more { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; }
@media (max-width: 479px) {
  .ds-fewbase .install { gap: 28px; margin-top: 20px; }
  .ds-fewbase .install-card { padding: 18px 16px; }
  .ds-fewbase .code-row { flex-direction: column; }
  .ds-fewbase .copy-btn.is-copied { border-left: 0; }
}

/* ---------- Страница посетителя /r/:id (12h): квитанция без шапки кабинета ---------- */
.ds-fewbase.record-body { background: var(--bg); }
.ds-fewbase .record-wrap { max-width: 668px; margin: 0 auto; padding: 28px 14px 40px; }
.ds-fewbase .record-card { background: var(--surface-focus); border: 1px solid #c9c9c1; color: var(--text); }
.ds-fewbase .record-url { display: flex; justify-content: space-between; gap: 12px; padding: 7px 16px; background: #e9e9e3; color: var(--grey); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; }
.ds-fewbase .record-url-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-fewbase .record-url-from { white-space: nowrap; }
.ds-fewbase .record-inner { padding: 30px 34px 26px; }
.ds-fewbase .record-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--text); padding-bottom: 10px; }
.ds-fewbase .record-host { font-family: var(--font-mono); font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ds-fewbase .record-badge, .ds-fewbase .record-label-bar { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.ds-fewbase .record-label-bar { border-bottom: 2px solid var(--text); padding-bottom: 10px; }
.ds-fewbase .record-inner h1 { margin: 22px 0 0; font-family: var(--font-body); font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.ds-fewbase .record-lead { margin: 6px 0 0; font-size: 14px; color: var(--grey-fg); }
.ds-fewbase .record-lead-nf { margin: 8px 0 8px; line-height: 1.6; }
.ds-fewbase .record-rows { border: 1px solid #e2e2da; margin-top: 18px; }
.ds-fewbase .record-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; padding: 13px 16px; border-bottom: 1px solid #e2e2da; }
.ds-fewbase .record-row:last-child { border-bottom: 0; }
.ds-fewbase .record-k { font-size: 13px; color: var(--grey-fg); padding-top: 1px; }
.ds-fewbase .record-v { min-width: 0; }
.ds-fewbase .record-mono { font-family: var(--font-mono); font-size: 13px; color: var(--text); }
.ds-fewbase .record-id { word-break: break-all; line-height: 1.5; }
.ds-fewbase .record-choice-col { display: flex; flex-direction: column; gap: 4px; }
.ds-fewbase .record-choice { font-size: 15px; font-weight: 600; }
.ds-fewbase .record-prev { font-size: 12.5px; color: var(--grey-fg); text-decoration: none; }
.ds-fewbase .record-prev:hover { text-decoration: underline; }
.ds-fewbase .record-cats { display: flex; flex-direction: column; }
.ds-fewbase .record-cat { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; line-height: normal; }
.ds-fewbase .record-cat-name { font-size: 14px; }
.ds-fewbase .record-cat-val { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; color: var(--grey-fg); }
.ds-fewbase .record-cat-val.record-yes { color: var(--text); font-weight: 700; }
.ds-fewbase .record-muted { font-weight: 400; color: var(--grey); }
.ds-fewbase .record-saw { border: 1px solid #e2e2da; margin-top: 16px; }
.ds-fewbase .record-saw summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; font-size: 14.5px; font-weight: 600; }
.ds-fewbase .record-saw summary::-webkit-details-marker { display: none; }
.ds-fewbase .record-saw-mark { font-family: var(--font-mono); font-size: 14px; font-weight: 400; color: var(--grey-fg); }
.ds-fewbase .record-saw-mark::before { content: "+"; }
.ds-fewbase .record-saw[open] .record-saw-mark::before { content: "\2212"; }
.ds-fewbase .record-saw-body { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 16px; border-top: 1px solid #e2e2da; }
.ds-fewbase .record-saw-meta { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--grey-fg); }
.ds-fewbase .record-label { margin-top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey); }
.ds-fewbase .record-line { font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ds-fewbase .record-stored { margin-top: 18px; font-size: 13.5px; line-height: 1.6; color: var(--grey-fg); text-wrap: pretty; }
.ds-fewbase .record-footer { border-top: 1px solid #e2e2da; padding: 12px 34px 16px; font-family: var(--font-mono); font-size: 10.5px; color: var(--grey); }
@media (max-width: 480px) {
  .ds-fewbase .record-wrap { padding: 0 0 24px; }
  .ds-fewbase .record-card { border-left: 0; border-right: 0; }
  .ds-fewbase .record-url-from { display: none; }
  .ds-fewbase .record-inner { padding: 24px 20px 22px; }
  .ds-fewbase .record-host { font-size: 15px; }
  .ds-fewbase .record-inner h1 { margin-top: 16px; font-size: 20px; }
  .ds-fewbase .record-rows { margin-top: 14px; }
  .ds-fewbase .record-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; }
  .ds-fewbase .record-k { font-size: 12px; padding-top: 0; }
  .ds-fewbase .record-footer { padding: 12px 20px 16px; }
}

/* ---------- Вкладка Appearance (12l): настройки слева, предпросмотр справа ----------
   Значения — из inline-стилей pp-12l.html. #c9c9c1 — рамка сегментов и предпросмотра,
   #e2e2dc / #c2c2ba / #ecece6 — подложка, рамка и фон «экрана» предпросмотра. */
.ds-fewbase .tab-lead { margin: 18px 0 0; max-width: 74ch; font-size: 13.5px; line-height: 1.55; color: var(--grey-fg); text-wrap: pretty; }
.ds-fewbase .ab { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 18px; }
.ds-fewbase .ab [hidden] { display: none !important; }
.ds-fewbase .ab-form { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* Группа: сворачиваемый блок с ▾ / ▸ и сводкой в свёрнутом виде. */
.ds-fewbase .ab-group { border: 1px solid var(--line); background: var(--surface); }
.ds-fewbase .ab-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 11px 16px; min-width: 0; cursor: pointer; line-height: normal; }
.ds-fewbase .ab-group > summary::-webkit-details-marker { display: none; }
.ds-fewbase .ab-group > summary::before { content: "\25B8"; flex-shrink: 0; width: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.ds-fewbase .ab-group[open] > summary::before { content: "\25BE"; }
.ds-fewbase .ab-group > summary:focus-visible { outline: 2px solid var(--a-400); outline-offset: -2px; }
.ds-fewbase .ab-group-title { font-family: var(--font-mono); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ds-fewbase .ab-group-sum { min-width: 0; font-family: var(--font-mono); font-size: 11px; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-fewbase .ab-group[open] .ab-group-sum, .ds-fewbase .ab-group-sum:empty { display: none; }
.ds-fewbase .ab-rows { padding: 0 16px 8px; }
/* Ряд: подпись 140 px, справа управление; подсказки и ошибки — блоками под ним. */
.ds-fewbase .ab-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.ds-fewbase .ab-row-label { padding-top: 5px; font-size: 13px; line-height: normal; color: var(--text-soft); }
.ds-fewbase .ab-row-control { min-width: 0; }
.ds-fewbase .ab .field-hint, .ds-fewbase .ab-cap { display: block; margin-top: 6px; line-height: 1.5; text-wrap: pretty; }
.ds-fewbase .ab-cap { font-family: var(--font-mono); font-size: 11px; color: var(--text-soft); }
.ds-fewbase .ab .field-error { display: block; margin-top: 6px; font-size: 11.5px; line-height: normal; }
.ds-fewbase .ab-cap a, .ds-fewbase .ab-pro-line a { text-decoration: underline; text-underline-offset: 2px; }
.ds-fewbase .ab-note { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--text-soft); text-wrap: pretty; }
.ds-fewbase .ab-warn { display: block; margin-top: 8px; border: 1px solid var(--yellow-line); background: var(--yellow-bg); padding: 7px 10px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--yellow-fg); }
.ds-fewbase .ab .input { display: block; max-width: none; padding: 7px 10px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; }
.ds-fewbase .ab .input::placeholder { color: var(--grey); }
.ds-fewbase .ab .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--a-200); }
.ds-fewbase .ab .field-invalid .input { border-color: var(--red-fg); }
/* Радио и флажки внутри карточек, сегментов и образцов — невидимы, выбор виден по рамке. */
.ds-fewbase .layout-pick input, .ds-fewbase .seg input, .ds-fewbase .ab-swatches input, .ds-fewbase .toggle input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
/* Раскладка: три карточки со схемой, подсказка под «Modal». */
.ds-fewbase .layout-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 0 6px; border-top: 1px solid var(--line-soft); }
.ds-fewbase .layout-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 8px 8px; border: 1px solid var(--line); background: var(--surface); color: var(--text-soft); font-family: var(--font-mono); font-size: 12px; line-height: normal; cursor: pointer; }
.ds-fewbase .layout-pick:has(input:checked) { border-color: var(--accent); background: var(--a-100); color: var(--a-700); }
.ds-fewbase .layout-pick:has(input:focus-visible) { outline: 2px solid var(--a-400); outline-offset: 2px; }
.ds-fewbase .layout-scheme { position: relative; box-sizing: content-box; width: 64px; height: 40px; background: #fff; border: 1px solid var(--n-500); }
.ds-fewbase .layout-scheme::before, .ds-fewbase .layout-scheme::after { content: ""; position: absolute; }
.ds-fewbase .layout-scheme::after { background: var(--grey); }
.ds-fewbase .layout-scheme-bar::after { left: 0; right: 0; bottom: 0; height: 9px; }
.ds-fewbase .layout-scheme-box::after { left: 4px; bottom: 4px; width: 24px; height: 15px; }
.ds-fewbase .layout-scheme-modal::before { inset: 0; background: rgba(20, 22, 26, 0.14); }
.ds-fewbase .layout-scheme-modal::after { left: 18px; top: 11px; width: 28px; height: 18px; }
.ds-fewbase .layout-pick:has(input:checked) .layout-scheme { border-color: var(--accent); }
.ds-fewbase .layout-pick:has(input:checked) .layout-scheme::after { background: var(--accent); }
.ds-fewbase .ab .layout-hint { grid-column: 3; }
/* Сегменты (тема, угол). */
.ds-fewbase .segmented { display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--font-mono); font-size: 12px; line-height: normal; }
.ds-fewbase .seg { position: relative; cursor: pointer; }
.ds-fewbase .seg span { display: block; border: 1px solid var(--line); background: var(--surface); color: var(--text-soft); padding: 5px 11px; white-space: nowrap; }
.ds-fewbase .seg input:checked + span { border-color: var(--accent); background: var(--a-100); color: var(--a-700); }
.ds-fewbase .seg input:focus-visible + span { outline: 2px solid var(--a-400); outline-offset: 2px; }
/* Акцент: «Default» по диагонали, семь образцов, «Custom» и поле #rrggbb. */
.ds-fewbase .ab-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ds-fewbase .ab-swatch { position: relative; display: inline-flex; cursor: pointer; }
.ds-fewbase .ab-swatch span { display: block; width: 24px; height: 24px; border: 1px solid rgba(0, 0, 0, 0.08); }
.ds-fewbase .ab-swatch-default span { background: linear-gradient(135deg, #24272b 50%, #ececec 50%); }
.ds-fewbase .ab-swatch input:checked + span { border: 0; outline: 2px solid var(--text); outline-offset: 2px; }
.ds-fewbase .ab-swatch input:focus-visible + span { outline: 2px solid var(--a-400); outline-offset: 2px; }
.ds-fewbase .ab-swatch-custom { position: relative; display: inline-flex; margin-left: 4px; font-family: var(--font-mono); font-size: 12px; line-height: normal; cursor: pointer; }
.ds-fewbase .ab-swatch-custom span { border: 1px solid var(--line); background: var(--surface); color: var(--text-soft); padding: 4px 10px; }
.ds-fewbase .ab-swatch-custom input:checked + span { border-color: var(--accent); background: var(--a-100); color: var(--a-700); }
.ds-fewbase .ab-swatch-custom input:focus-visible + span { outline: 2px solid var(--a-400); outline-offset: 2px; }
.ds-fewbase .ab-custom { display: none; align-items: center; gap: 8px; margin-top: 10px; }
.ds-fewbase .ab-accent:has(input[value="custom"]:checked) .ab-custom { display: flex; }
.ds-fewbase .ab-custom-swatch { flex-shrink: 0; box-sizing: content-box; width: 30px; height: 30px; }
.ds-fewbase .ab-custom-empty { width: 28px; height: 28px; border: 1px dashed var(--n-500); background: repeating-linear-gradient(45deg, var(--surface) 0 4px, var(--line-soft) 4px 8px); }
.ds-fewbase .ab .ab-hex { width: 120px; }
/* Переключатель 44×24 (11o): квадратная ручка. */
.ds-fewbase .toggle { position: relative; display: inline-flex; vertical-align: top; cursor: pointer; }
.ds-fewbase .knob { display: flex; align-items: center; justify-content: flex-start; width: 44px; height: 24px; padding: 2px; border: 1px solid #c9c9c1; background: #e0e0d8; }
.ds-fewbase .knob::after { content: ""; width: 18px; height: 18px; background: var(--n-500); }
.ds-fewbase .toggle input:checked + .knob { justify-content: flex-end; border-color: var(--accent); background: var(--accent); }
.ds-fewbase .toggle input:checked + .knob::after { background: #fff; }
.ds-fewbase .toggle input:focus-visible + .knob { outline: 2px solid var(--a-400); outline-offset: 2px; }
/* Языки: чипы с ручкой, «+ Add language» открывает список в две колонки. */
.ds-fewbase .ab-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ds-fewbase .ab-chip { display: flex; align-items: center; gap: 7px; border: 1px solid var(--text); background: #fff; padding: 5px 8px; font-family: var(--font-mono); font-size: 12px; line-height: normal; white-space: nowrap; cursor: grab; }
.ds-fewbase .ab-chip-grip { color: var(--topbar-fg-soft); }
.ds-fewbase .ab-chip-fallback { font-size: 10px; color: var(--a-700); border: 1px solid var(--green-line); background: var(--a-100); padding: 0 4px; }
.ds-fewbase .ab-chip-x { border: 0; background: none; padding: 0; font: inherit; color: var(--grey); cursor: pointer; }
.ds-fewbase .ab-chip-x:hover { color: var(--text); }
.ds-fewbase .ab-lang-add > summary { list-style: none; border: 1px dashed var(--grey); padding: 5px 10px; font-family: var(--font-mono); font-size: 12px; line-height: normal; white-space: nowrap; cursor: pointer; }
.ds-fewbase .ab-lang-add > summary::-webkit-details-marker { display: none; }
/* Открытый список — своей строкой под чипами во всю ширину (12l, сцена 2). */
.ds-fewbase .ab-lang-add[open], .ds-fewbase .ab-lang-add[open]::details-content { display: contents; }
.ds-fewbase .ab-lang-menu { flex: 0 0 100%; margin-top: 2px; border: 1px solid var(--text); background: #fff; box-shadow: 0 8px 20px rgba(20, 22, 26, 0.14); font-family: var(--font-mono); font-size: 12px; line-height: normal; }
.ds-fewbase .ab-lang-find { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--line-soft); background: #fff; padding: 8px 10px; font: inherit; color: var(--text); outline: none; }
.ds-fewbase .ab-lang-find::placeholder { color: var(--grey); }
.ds-fewbase .ab-lang-list { display: grid; grid-template-columns: 1fr 1fr; padding: 4px 0; }
.ds-fewbase .ab-lang { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 10px; color: var(--text); cursor: pointer; }
.ds-fewbase .ab-lang > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-fewbase .ab-lang input { appearance: none; flex-shrink: 0; display: grid; place-content: center; width: 12px; height: 12px; margin: 0; border: 1px solid var(--grey); background: #fff; }
.ds-fewbase .ab-lang input:checked { border-color: var(--text); background: var(--text); }
.ds-fewbase .ab-lang input:checked::after { content: "\2713"; color: #fff; font-size: 9px; line-height: 10px; }
.ds-fewbase .ab-lang input:disabled { border-color: var(--topbar-fg-soft); background: var(--topbar-fg-soft); }
.ds-fewbase .ab-lang:has(input:disabled) { color: var(--grey); cursor: default; }
.ds-fewbase .ab-lang input:focus-visible { outline: 2px solid var(--a-400); outline-offset: 1px; }
.ds-fewbase .ab-lang-code { margin-left: auto; font-size: 10.5px; color: var(--grey); }
.ds-fewbase .ab-lang-foot { margin: 0; padding: 7px 10px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--grey); }
.ds-fewbase .ab-size { margin: 12px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: normal; }
.ds-fewbase .ab-size b { font-weight: 700; }
/* Тексты: язык сегментами, поле на строку, «changed» и «× reset» у изменённых. */
.ds-fewbase .ab-row-texts { display: flex; flex-direction: column; gap: 8px; }
.ds-fewbase .ab-row-texts .ab-row-label { padding-top: 0; }
.ds-fewbase .ab-text-langs, .ds-fewbase .ab-seg { display: flex; font-family: var(--font-mono); font-size: 11.5px; line-height: normal; }
.ds-fewbase .ab-text-langs { flex-wrap: wrap; }
.ds-fewbase .ab-text-langs button, .ds-fewbase .ab-seg button { border: 1px solid #c9c9c1; background: var(--surface); color: var(--text-soft); padding: 4px 10px; font: inherit; white-space: nowrap; cursor: pointer; }
.ds-fewbase .ab-text-langs button:not([hidden]) ~ button, .ds-fewbase .ab-seg button + button { border-left: 0; }
.ds-fewbase .ab-text-langs button[aria-pressed="true"], .ds-fewbase .ab-text-langs button:not([hidden]) ~ button[aria-pressed="true"], .ds-fewbase .ab-seg button[aria-pressed="true"], .ds-fewbase .ab-seg button + button[aria-pressed="true"] { border: 1px solid var(--text); background: var(--text); color: var(--bg); }
.ds-fewbase .ab-text-langs button:focus-visible, .ds-fewbase .ab-seg button:focus-visible { outline: 2px solid var(--a-400); outline-offset: 1px; }
.ds-fewbase .ab-texts { margin-top: 8px; }
.ds-fewbase .ab-text { display: flex; flex-direction: column; gap: 5px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.ds-fewbase .ab-text-head { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: normal; color: var(--text-soft); }
.ds-fewbase .ab-text-mark { display: none; font-family: var(--font-mono); font-size: 10px; color: var(--a-700); border: 1px solid var(--green-line); background: var(--a-100); padding: 0 5px; }
.ds-fewbase .ab-text-reset { display: none; margin-left: auto; border: 0; background: none; padding: 0; font-family: var(--font-mono); font-size: 11px; line-height: normal; color: var(--grey-fg); cursor: pointer; }
.ds-fewbase .ab-text-changed .ab-text-mark, .ds-fewbase .ab-text-changed .ab-text-reset { display: inline-block; }
.ds-fewbase .ab textarea.ab-text-input { min-height: 56px; resize: none; field-sizing: content; }
.ds-fewbase .ab-count { font-family: var(--font-mono); font-size: 10.5px; line-height: normal; color: var(--grey); text-align: right; }
/* «After Save» (12l) и кнопки формы. */
.ds-fewbase .saved { scroll-margin-top: 24px; margin: 0; border: 1px solid var(--green-line); background: var(--a-100); padding: 9px 12px; font-family: var(--font-mono); font-size: 12px; line-height: normal; color: var(--a-700); }
.ds-fewbase .saved.saved-error { border-color: var(--red-fg); background: #fff; color: var(--red-fg); }
.ds-fewbase .ab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; padding-top: 4px; }
.ds-fewbase .ab-save { border: 0; background: var(--text); color: var(--bg); padding: 8px 18px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: normal; cursor: pointer; }
.ds-fewbase .ab-save:hover { background: #000; }
.ds-fewbase .ab-reset-link { border: 0; border-bottom: 1px solid #c9c9c1; background: none; padding: 0; font-family: var(--font-mono); font-size: 12px; line-height: normal; color: var(--grey-fg); cursor: pointer; }
.ds-fewbase .ab-reset-link:hover { color: var(--text); border-bottom-color: var(--text); }
/* Предпросмотр: закреплён справа; «экран» 1024×640 (телефон 390×740) уменьшен под ширину колонки.
   tan(atan2(a, b)) = a / b — отношение длин без JS. */
.ds-fewbase .ab-preview { position: sticky; top: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ds-fewbase .ab-preview-pin { display: flex; flex-direction: column; gap: 10px; }
.ds-fewbase .ab-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ds-fewbase .ab-preview-label, .ds-fewbase .ab-preview-hidden { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; line-height: normal; color: var(--text-muted); }
.ds-fewbase .ab-toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-fewbase .ab-pv-lang { appearance: none; border: 1px solid #c9c9c1; border-radius: 0; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='5'%3E%3Cpath d='M0 0h7L3.5 5z' fill='%238a8c86'/%3E%3C/svg%3E") no-repeat right 10px center; padding: 4px 25px 4px 10px; font-family: var(--font-mono); font-size: 11.5px; line-height: normal; color: var(--text); cursor: pointer; }
.ds-fewbase .ab-pv-lang:focus-visible { outline: 2px solid var(--a-400); outline-offset: 1px; }
.ds-fewbase .ab-collapse { display: none; }
.ds-fewbase .ab-viewport { border: 1px solid #c9c9c1; background: #e2e2dc; }
.ds-fewbase .ab-screen { box-sizing: content-box; aspect-ratio: 1024 / 640; overflow: hidden; border: 1px solid #c2c2ba; background: #ecece6; container-type: size; }
.ds-fewbase .ab-frame { display: block; width: 1024px; height: 640px; border: 0; transform-origin: 0 0; transform: scale(tan(atan2(100cqw, 1024px))); }
.ds-fewbase .ab-viewport[data-device="phone"] { display: flex; justify-content: center; padding: 8px 0; }
.ds-fewbase .ab-viewport[data-device="phone"] .ab-screen { width: 200px; height: 380px; aspect-ratio: auto; border-radius: 10px; }
.ds-fewbase .ab-viewport[data-device="phone"] .ab-frame { width: 390px; height: 740px; transform: scale(tan(atan2(100cqh, 740px))); }
.ds-fewbase .ab-pro-line { margin: 0; font-family: var(--font-mono); font-size: 11px; line-height: normal; color: var(--grey-fg); }
/* Уже 960 px: предпросмотр сверху, закреплён, не выше 40 % экрана (12l, сцена 3). */
@media (max-width: 959px) {
  .ds-fewbase .ab { display: flex; flex-direction: column; align-items: stretch; gap: 0; margin-top: 0; }
  .ds-fewbase .ab-preview { display: contents; }
  .ds-fewbase .ab-preview-pin { order: -2; position: sticky; top: 0; z-index: 1; gap: 8px; margin: 14px -18px 0; padding: 10px 18px 12px; background: #e9e9e3; border-top: 1px solid #c9c9c1; border-bottom: 1px solid #c9c9c1; }
  .ds-fewbase .ab-preview-head:has(.ab-toggles[hidden]) { display: none; }
  .ds-fewbase .ab-preview-label { display: none; }
  /* Две строки: вид и «Hide»; устройство, тема и язык. */
  .ds-fewbase .ab-toggles { flex: 1; row-gap: 0; }
  .ds-fewbase .ab-toggles::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .ds-fewbase .ab-toggles > * { order: 3; margin-top: 8px; }
  .ds-fewbase .ab-toggles > .ab-seg-view { order: 0; margin-top: 0; }
  .ds-fewbase .ab-toggles > .ab-collapse { order: 1; margin: 0 0 0 auto; display: inline; align-self: center; border: 0; background: none; padding: 0; font-family: var(--font-mono); font-size: 11.5px; line-height: normal; color: var(--text); cursor: pointer; }
  /* Скрыт: одна строка «Preview hidden» и «Show preview». */
  .ds-fewbase .ab-preview-pin:has(#ab-viewport[hidden]) .ab-toggles > :not(.ab-collapse) { display: none; }
  .ds-fewbase .ab-preview-pin:has(#ab-viewport[hidden]) { border-top: 0; }
  .ds-fewbase .ab-viewport { display: flex; justify-content: center; padding: 8px 0; }
  .ds-fewbase .ab-screen { width: min(calc(100% - 2px), calc((40vh - 110px) * 1.6)); }
  .ds-fewbase .ab-viewport[data-device="phone"] .ab-screen { width: auto; height: min(222px, calc(40vh - 110px)); aspect-ratio: 390 / 740; }
  .ds-fewbase .ab-pro-line { order: -1; margin-top: 8px; }
  .ds-fewbase .ab-form { margin-top: 14px; gap: 10px; }
  /* Редирект на #ab-saved: сообщение не должно уйти под закреплённый предпросмотр (≤ 40 % экрана). */
  .ds-fewbase .saved { scroll-margin-top: calc(40vh + 24px); }
}
@media (max-width: 479px) {
  .ds-fewbase .tab-lead { margin-top: 14px; font-size: 13px; }
  .ds-fewbase .ab-preview-pin { margin: 14px -14px 0; padding: 10px 14px 12px; }
  .ds-fewbase .ab-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ds-fewbase .ab-row-label { padding-top: 0; }
}

/* ---------- Connectors (12m) ---------- */
/* Свой скрипт (12n): таблица, форма с рамкой цвета ink, поле кода. Значения — из inline-стилей артборда. */
.ds-fewbase .script-table { background: var(--surface); border-color: var(--line); }
.ds-fewbase .script-table thead tr { background: none; }
.ds-fewbase .script-table th, .ds-fewbase .script-table th + th { padding: 9px 14px; font-weight: 400; color: #71736e; border-left: 0; }
.ds-fewbase .script-table td, .ds-fewbase .script-table td + td { padding: 11px 14px; border-left: 0; border-top: 1px solid #ecece4; vertical-align: middle; }
.ds-fewbase .script-table tbody tr { border-bottom: 0; }
.ds-fewbase .script-name { font-weight: 700; }
.ds-fewbase .script-actions { text-align: right; white-space: nowrap; }
.ds-fewbase .script-remove { display: inline; margin: 0 0 0 18px; }
.ds-fewbase .link-danger { border: 0; background: none; padding: 0; font: inherit; color: var(--red-fg); cursor: pointer; }
.ds-fewbase .link-danger:hover { text-decoration: underline; }
.ds-fewbase .script-form { box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--text); background: var(--surface); padding: 18px 18px 20px; line-height: normal; }
.ds-fewbase .script-form-title { margin: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 700; line-height: normal; }
.ds-fewbase .script-label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #71736e; }
.ds-fewbase .script-form .input { display: block; max-width: none; }
.ds-fewbase .script-form .script-name-input { max-width: 360px; padding: 8px 10px; line-height: 1.4; overflow-wrap: anywhere; }
.ds-fewbase .script-form .field-error { margin-top: 6px; font-size: 11.5px; }
.ds-fewbase .script-hint { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.ds-fewbase .script-form textarea.script-code { min-height: 240px; padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; resize: none; field-sizing: content; }
.ds-fewbase .script-form .ab-count { margin-top: 5px; }
.ds-fewbase .script-form .field-invalid .input { border-color: var(--red-fg); }
.ds-fewbase .script-buttons { display: flex; align-items: center; gap: 18px; font-family: var(--font-mono); font-size: 12px; }
.ds-fewbase .conn, .ds-fewbase .modal-bd { line-height: normal; }
.ds-fewbase .conn { max-width: 880px; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ds-fewbase .conn .tab-lead { margin: 0 0 6px; max-width: none; }
.ds-fewbase .conn-form { display: flex; flex-direction: column; gap: 12px; }
.ds-fewbase .conn-card { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; border: 1px solid var(--line); background: var(--surface); padding: 16px 18px; }
.ds-fewbase .conn-info { min-width: 0; }
.ds-fewbase .conn-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ds-fewbase .conn-name { font-family: var(--font-mono); font-size: 14px; font-weight: 700; }
.ds-fewbase .cat-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); border: 1px solid #c9c9c1; background: #fff; padding: 1px 6px; white-space: nowrap; }
.ds-fewbase .conn-where, .ds-fewbase .conn-hint { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.ds-fewbase .conn-hint { color: var(--text-soft); }
.ds-fewbase .conn-status-row { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; }
.ds-fewbase .conn-status { display: inline-flex; align-items: center; gap: 8px; color: var(--grey); }
.ds-fewbase .conn-status.conn-on { color: var(--text); }
.ds-fewbase .conn-status.not-saved { color: var(--red-fg); }
.ds-fewbase .conn-dot { width: 8px; height: 8px; border-radius: 50%; background: #a6a8a2; flex-shrink: 0; display: inline-block; }
.ds-fewbase .conn-on .conn-dot { background: var(--a-600); }
.ds-fewbase .conn-id-label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ds-fewbase .conn-card .input { max-width: none; padding: 8px 10px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.ds-fewbase .conn-card .input::placeholder { color: var(--grey); }
.ds-fewbase .conn-card .field-error { margin-top: 6px; font-size: 11.5px; }
.ds-fewbase .mode-card { margin-top: 18px; border: 1px solid var(--line); background: var(--surface); padding: 18px 18px 8px; }
.ds-fewbase .mode-title { margin: 0; font-family: var(--font-mono); font-size: 15px; font-weight: 700; line-height: normal; }
.ds-fewbase .mode-lead { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--grey-fg); }
.ds-fewbase .mode-label { margin: 16px 0 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.ds-fewbase .mode-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ds-fewbase .mode-pick { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); background: #fff; color: var(--text); cursor: pointer; }
.ds-fewbase .mode-pick input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.ds-fewbase .mode-pick:has(input:checked) { border-color: var(--accent); background: var(--a-100); }
.ds-fewbase .mode-pick:has(input:focus-visible) { outline: 2px solid var(--a-400); outline-offset: 2px; }
.ds-fewbase .mode-dot { margin-top: 3px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--grey); background: #fff; flex-shrink: 0; }
.ds-fewbase .mode-pick:has(input:checked) .mode-dot { border: 4px solid var(--accent); }
.ds-fewbase .mode-head { display: flex; align-items: center; gap: 8px; }
.ds-fewbase .mode-name { font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.ds-fewbase .mode-tag { font-family: var(--font-mono); font-size: 10px; color: var(--a-700); border: 1px solid var(--green-line); background: var(--a-100); padding: 0 5px; }
.ds-fewbase .mode-desc { display: block; margin-top: 5px; font-size: 13px; line-height: 1.55; color: #3b3d40; text-wrap: pretty; }
.ds-fewbase .mode-rows { margin-top: 14px; }
.ds-fewbase .mode-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.ds-fewbase .mode-row .toggle { flex-shrink: 0; }
.ds-fewbase .mode-row-text { min-width: 0; }
.ds-fewbase .mode-row-label { font-size: 13.5px; line-height: 1.45; }
.ds-fewbase .mode-row-hint { margin-top: 3px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--grey); text-wrap: pretty; }
.ds-fewbase .mono-tag { color: var(--grey-fg); }
.ds-fewbase .conn-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 522px; padding: 6px 0 22px; }
.ds-fewbase .conn-actions .saved { line-height: 1.5; }
.ds-fewbase .conn-btn { border: 0; background: var(--text); color: var(--bg); padding: 9px 18px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: normal; white-space: nowrap; cursor: pointer; }
.ds-fewbase .conn-btn:hover { background: #000; }
.ds-fewbase .conn-own { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; border-top: 1px solid var(--text); }
.ds-fewbase .conn-own-title { margin: 0; font-family: var(--font-mono); font-size: 18px; font-weight: 700; line-height: normal; }
.ds-fewbase .conn-own-lead { margin: 5px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--grey-fg); }
.ds-fewbase .warn-box { border: 1px solid #e8dbb9; background: #f8f1df; padding: 10px 12px; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: #8a5e07; text-wrap: pretty; }
.ds-fewbase .conn-own-none { border: 1px dashed #c9c9c1; padding: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--grey); }
.ds-fewbase a.add-link { display: inline-block; border: 1px solid var(--text); background: var(--surface); padding: 8px 16px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: normal; color: var(--text); text-decoration: none; white-space: nowrap; }
/* Окно поверх страницы (12m, 12q): подложка на весь экран, окно 480 px. */
.ds-fewbase .modal-bd { position: fixed; inset: 0; z-index: 50; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 300px 14px 24px; background: rgba(20, 22, 26, 0.45); }
.ds-fewbase .modal { box-sizing: border-box; width: 480px; max-width: 100%; background: var(--surface); border: 1px solid var(--text); box-shadow: 0 16px 40px rgba(20, 22, 26, 0.3); padding: 22px 24px; }
.ds-fewbase .modal-title { margin: 0; font-family: var(--font-mono); font-size: 17px; font-weight: 700; line-height: normal; }
.ds-fewbase .modal-text { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: #3b3d40; text-wrap: pretty; }
.ds-fewbase .modal-added { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; border: 1px solid var(--line); background: #fff; padding: 8px 11px; font-family: var(--font-mono); font-size: 12px; }
.ds-fewbase .modal-actions { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
.ds-fewbase .modal-cancel { font-family: var(--font-mono); font-size: 12px; }
@media (max-height: 760px) { .ds-fewbase .modal-bd { padding-top: 10vh; } }
@media (max-width: 479px) {
  .ds-fewbase .conn { margin-top: 16px; }
  .ds-fewbase .conn-card { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
  .ds-fewbase .conn-info { order: 1; }
  .ds-fewbase .conn-id { order: 2; }
  .ds-fewbase .mode-card { padding: 16px 14px; }
  .ds-fewbase .mode-picks { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) { .ds-fewbase .modal-actions { flex-wrap: wrap; } }

/* ---------- Log (12o) ---------- */
/* Значения — из inline-стилей артборда 12o. */
.ds-fewbase .log { padding: 18px 0 30px; display: flex; flex-direction: column; gap: 14px; }
.ds-fewbase .log .tab-lead { margin: 0; }
.ds-fewbase .log-filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ds-fewbase .log-segs { display: flex; gap: 12px; flex-wrap: wrap; }
.ds-fewbase .log-seg { display: flex; flex-wrap: nowrap; gap: 0; font-family: var(--font-mono); font-size: 11.5px; }
.ds-fewbase .seg-link { border: 1px solid #c9c9c1; background: var(--surface); color: var(--text-soft); padding: 5px 10px; white-space: nowrap; text-decoration: none; }
.ds-fewbase .seg-link + .seg-link { border-left: 0; }
.ds-fewbase .seg-link[aria-current] { background: var(--text); color: var(--bg); border: 1px solid var(--text); }
.ds-fewbase .log-selects { display: none; }
.ds-fewbase .log-csv { font-weight: 700; padding: 6px 14px; white-space: nowrap; background: var(--surface); }
.ds-fewbase .log-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: -2px; }
.ds-fewbase .log-count { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--grey-fg); }
.ds-fewbase .log-count b { color: var(--text); }
.ds-fewbase .log-legend { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--grey); }
.ds-fewbase .log-chips { display: flex; gap: 3px; position: relative; }
.ds-fewbase .cat-chip { width: 20px; height: 20px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; background: transparent; color: var(--grey); border: 1px solid #a6a8a2; }
.ds-fewbase .cat-chip-on { background: var(--text); color: #fff; border-color: var(--text); }
.ds-fewbase .log-body { margin-top: -2px; }
.ds-fewbase .log-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; border: 1px solid var(--line); background: var(--surface); }
.ds-fewbase .log-table th { text-align: left; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 400; padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ds-fewbase .log-table td { padding: 10px 12px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.ds-fewbase .log-table tbody tr:first-child td { border-top: 0; }
.ds-fewbase .log-table .log-date { white-space: nowrap; }
.ds-fewbase .log-date-short { display: none; }
.ds-fewbase .log-table .log-choice { font-family: var(--font-body); font-size: 13px; white-space: nowrap; }
.ds-fewbase .log-table .log-page { max-width: 220px; }
.ds-fewbase .log-path { overflow-wrap: anywhere; }
.ds-fewbase .log-table .log-id a { white-space: nowrap; }
.ds-fewbase .log-m-country { display: none; }
.ds-fewbase .log-row-withdrawn { background: var(--grey-bg); }
.ds-fewbase .log-back-wrap { display: inline-flex; align-items: center; gap: 6px; color: var(--grey-fg); }
.ds-fewbase .log-back { font-size: 13px; }
.ds-fewbase .log-pages { display: flex; align-items: center; justify-content: flex-end; gap: 20px; font-family: var(--font-mono); font-size: 12px; margin-top: 12px; }
.ds-fewbase .log-off { color: #a6a8a2; }
.ds-fewbase .log-range { color: var(--grey); }
.ds-fewbase .empty { border: 1px dashed #c9c9c1; background: var(--surface); padding: 32px 20px; text-align: center; margin-top: -2px; }
.ds-fewbase .empty-text { font-size: 14px; line-height: 1.6; color: #3b3d40; text-wrap: pretty; }
.ds-fewbase .empty-link { display: inline-block; font-family: var(--font-mono); font-size: 12px; margin-top: 10px; }
@media (max-width: 479px) {
  .ds-fewbase .log { padding-top: 16px; }
  .ds-fewbase .log-filters { flex-direction: column; align-items: stretch; gap: 8px; }
  .ds-fewbase .log-csv { display: block; text-align: center; }
  .ds-fewbase .log-legend, .ds-fewbase .log-range { display: none; }
  .ds-fewbase .log-table, .ds-fewbase .log-table tbody { display: block; border: 0; background: none; }
  .ds-fewbase .log-table thead { display: none; }
  .ds-fewbase .log-table tbody { display: flex; flex-direction: column; gap: 8px; }
  .ds-fewbase .log-table tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; }
  .ds-fewbase .log-table tr.log-row-withdrawn { background: var(--grey-bg); }
  .ds-fewbase .log-table td { display: block; padding: 0; border: 0; min-width: 0; }
  .ds-fewbase .log-table tbody tr:first-child td { border-top: 0; }
  .ds-fewbase .log-table .log-choice { order: 0; flex: 1 1 0; margin-bottom: 4px; font-size: 15px; font-weight: 600; }
  .ds-fewbase .log-table .log-date { order: 1; margin-bottom: 4px; font-size: 12.5px; font-weight: 700; }
  .ds-fewbase .log-table .log-date-full { display: none; }
  .ds-fewbase .log-table .log-date-short { display: inline; }
  .ds-fewbase .log-table .log-cats, .ds-fewbase .log-table .log-page, .ds-fewbase .log-table .log-lang, .ds-fewbase .log-table .log-id { flex: 0 0 100%; display: grid; grid-template-columns: 92px minmax(0, 1fr); column-gap: 10px; align-items: center; }
  .ds-fewbase .log-table td[data-label]::before { content: attr(data-label); color: var(--text-muted); }
  .ds-fewbase .log-table .log-cats { order: 2; } .ds-fewbase .log-table .log-page { order: 3; } .ds-fewbase .log-table .log-lang { order: 4; } .ds-fewbase .log-table .log-id { order: 5; }
  .ds-fewbase .log-table .log-country { display: none; }
  .ds-fewbase .log-m-country { display: inline; }
  .ds-fewbase .log-table .log-page { max-width: none; }
  .ds-fewbase .log-pages { justify-content: space-between; }
}
/* С JS на телефоне период и выбор — списки (12o, 390); без JS остаются сегменты-ссылки. */
@media (max-width: 479px) and (scripting: enabled) {
  .ds-fewbase .log-segs { display: none; }
  .ds-fewbase .log-selects { display: flex; gap: 8px; }
  .ds-fewbase .log-selects select { flex: 1; min-width: 0; appearance: none; border: 1px solid var(--text); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%238a8c86'/%3E%3C/svg%3E") no-repeat right 10px center; padding: 7px 26px 7px 10px; font-family: var(--font-mono); font-size: 12px; color: var(--text); border-radius: 0; }
}
.ds-fewbase .log-table .muted { color: var(--grey); }

/* ---------- Changes (12p) ---------- */
/* Значения — из inline-стилей артборда 12p. Таблица собрана сеткой: строка раскрывается через details. */
.ds-fewbase .chg-page { padding: 18px 0 30px; display: flex; flex-direction: column; gap: 14px; }
.ds-fewbase .chg-page .tab-lead { margin: 0; }
.ds-fewbase .chg-page .empty { margin-top: 0; }
.ds-fewbase .chg { border: 1px solid var(--line); background: var(--surface); font-family: var(--font-mono); font-size: 12px; }
.ds-fewbase .chg-head, .ds-fewbase .chg-row > summary { display: grid; grid-template-columns: 26px 184px 134px minmax(0, 1fr) auto; align-items: center; }
.ds-fewbase .chg-head { border-bottom: 1px solid var(--line); }
.ds-fewbase .chg-head span { padding: 9px 12px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.ds-fewbase .chg-row { border-top: 1px solid var(--line-soft); }
.ds-fewbase .chg-row[open] { background: #f5f5f0; }
.ds-fewbase .chg-row > summary { list-style: none; cursor: pointer; }
.ds-fewbase .chg-row > summary::-webkit-details-marker { display: none; }
.ds-fewbase .chg-row > summary::before { content: "\25B8"; padding: 10px 0 10px 12px; color: var(--text-muted); }
.ds-fewbase .chg-row[open] > summary::before { content: "\25BE"; }
.ds-fewbase .chg-date, .ds-fewbase .chg-what, .ds-fewbase .chg-details, .ds-fewbase .chg-mail { padding: 10px 12px; }
.ds-fewbase .chg-date { white-space: nowrap; }
.ds-fewbase .chg-tag { font-size: 10.5px; color: #4a4c50; background: #ffffff; border: 1px solid #c9c9c1; padding: 1px 6px; white-space: nowrap; }
.ds-fewbase .chg-row-script .chg-tag { color: var(--yellow-fg); background: var(--yellow-bg); border-color: var(--yellow-line); }
.ds-fewbase .chg-details { font-size: 12.5px; }
.ds-fewbase .chg-mail { grid-column: 5; text-align: right; font-size: 10.5px; color: var(--grey); white-space: nowrap; }
.ds-fewbase .chg-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 2px 12px 16px 38px; }
.ds-fewbase .chg-code { min-width: 0; }
.ds-fewbase .chg-code .label-caps { margin: 0 0 6px; }
.ds-fewbase .code-lines { margin: 0; border: 1px solid var(--line); background: #ffffff; padding: 10px 12px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; max-height: 150px; overflow: auto; }
.ds-fewbase .code-line { display: block; white-space: pre; min-height: 1.6em; }
.ds-fewbase .code-line-changed { margin: 0 -12px; padding: 0 12px; }
.ds-fewbase .chg-code-before .code-line-changed { background: #f6e6e2; }
.ds-fewbase .chg-code-after .code-line-changed { background: var(--green-bg); }
@media (max-width: 479px) {
  .ds-fewbase .chg-page { padding-top: 16px; }
  .ds-fewbase .chg { border: 0; background: none; display: flex; flex-direction: column; gap: 8px; }
  .ds-fewbase .chg-head { display: none; }
  .ds-fewbase .chg-row { border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; }
  .ds-fewbase .chg-row[open] { background: #f5f5f0; }
  .ds-fewbase .chg-row > summary { grid-template-columns: auto auto minmax(0, 1fr); column-gap: 8px; }
  .ds-fewbase .chg-row > summary::before { padding: 0; }
  .ds-fewbase .chg-date, .ds-fewbase .chg-what, .ds-fewbase .chg-details, .ds-fewbase .chg-mail { padding: 0; }
  .ds-fewbase .chg-date { font-weight: 700; }
  .ds-fewbase .log-date-full { display: none; }
  .ds-fewbase .log-date-short { display: inline; }
  .ds-fewbase .chg-what { justify-self: end; }
  .ds-fewbase .chg-details { grid-column: 1 / -1; margin-top: 8px; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; }
  .ds-fewbase .chg-mail { grid-column: 1 / -1; margin-top: 4px; text-align: left; }
  .ds-fewbase .chg-body { grid-template-columns: minmax(0, 1fr); padding: 0; margin-top: 12px; }
}

/* 12q: Settings — одна колонка карточек, тихая секция удаления, окно удаления. Значения с артборда pp-12q. */
.ds-fewbase .set { max-width: 720px; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding-bottom: 16px; }
.ds-fewbase .set-form { display: flex; flex-direction: column; gap: 12px; }
.ds-fewbase .set-card { border: 1px solid var(--line); background: var(--surface); padding: 18px 20px; }
.ds-fewbase .set-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ds-fewbase .set-title { margin: 0; font-family: var(--font-mono); font-size: 14px; font-weight: 700; line-height: normal; }
.ds-fewbase .set-count { font-family: var(--font-mono); font-size: 12px; color: var(--grey-fg); }
.ds-fewbase .set-count b { color: var(--text); }
.ds-fewbase .set-body { margin-top: 12px; }
.ds-fewbase .set-card .input { display: block; height: auto; max-width: 360px; padding: 8px 10px; line-height: 1.4; overflow-wrap: anywhere; }
.ds-fewbase .set-card .input::placeholder { color: var(--grey); }
.ds-fewbase .set-card .input[aria-invalid="true"] { border-color: var(--red-fg); background: #fff; }
.ds-fewbase .set-card .field-error { margin-top: 6px; font-size: 11.5px; line-height: normal; }
.ds-fewbase .set-hint { margin-top: 8px; max-width: 640px; font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: var(--grey); text-wrap: pretty; }
.ds-fewbase .set-domains { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); background: #fff; }
.ds-fewbase .set-domains li { display: flex; align-items: center; gap: 12px; padding: 9px 12px; font-family: var(--font-mono); font-size: 13px; line-height: normal; }
.ds-fewbase .set-domains li + li { border-top: 1px solid var(--line-soft); }
.ds-fewbase .set-domain { min-width: 0; overflow-wrap: anywhere; }
.ds-fewbase .set-remove { margin: 0 0 0 auto; border: 0; background: none; padding: 0; font-family: var(--font-mono); font-size: 12px; line-height: normal; color: var(--grey-fg); white-space: nowrap; cursor: pointer; }
.ds-fewbase .set-remove:hover { text-decoration: underline; }
.ds-fewbase .set-add-row { display: flex; gap: 8px; margin-top: 10px; }
.ds-fewbase .set-add-field { flex: 1; min-width: 0; max-width: 360px; }
.ds-fewbase .set-add-field .input { max-width: none; }
.ds-fewbase .set-add { align-self: flex-start; border: 1px solid var(--text); background: var(--surface); color: var(--text); padding: 8px 16px; font-family: var(--font-mono); font-size: 12px; font-weight: 700; line-height: normal; text-align: center; white-space: nowrap; cursor: pointer; }
.ds-fewbase .set-max { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; line-height: normal; color: var(--grey-fg); }
.ds-fewbase .set-switch { display: flex; align-items: flex-start; gap: 12px; }
.ds-fewbase .set-on { padding-top: 4px; font-family: var(--font-mono); font-size: 12px; line-height: normal; }
.ds-fewbase .set-switch:has(input:not(:checked)) .set-on { visibility: hidden; }
/* Save на артборде — строчная ссылка: её поле выступает над строкой, зазор до карточки виден 8 px, до секции удаления 22 px. */
.ds-fewbase .set-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: -4px; }
.ds-fewbase .set-actions .saved { align-self: stretch; line-height: 1.5; }
.ds-fewbase .set-danger { border: 1px solid var(--line); padding: 18px 20px; margin-top: 10px; }
.ds-fewbase .set-danger-title { margin: 0; font-family: var(--font-mono); font-size: 13px; font-weight: 700; line-height: normal; color: var(--grey-fg); }
.ds-fewbase .set-danger-text { margin: 8px 0 0; max-width: 640px; font-size: 13px; line-height: 1.6; color: var(--grey-fg); text-wrap: pretty; }
.ds-fewbase .set-danger > div { margin-top: 14px; }
/* Строчная, как на артборде: поле кнопки выступает за строку, карточка ниже кнопки короче. */
.ds-fewbase .set-danger .btn-danger-quiet { display: inline; }
.ds-fewbase .btn-danger-quiet { display: inline-block; border: 1px solid var(--red-fg); background: #fdf4f2; color: var(--red-fg); padding: 8px 14px; font-family: var(--font-mono); font-size: 12px; line-height: normal; white-space: nowrap; cursor: pointer; }
.ds-fewbase .btn-danger-quiet:hover { text-decoration: none; }
.ds-fewbase button.btn-danger-quiet:disabled { border-color: #dcc3be; background: var(--surface); color: #c29a93; cursor: not-allowed; }
.ds-fewbase .modal-bd.modal-del { padding-top: 320px; }
.ds-fewbase .modal-del .modal { width: 460px; }
.ds-fewbase .modal-del .modal-text { font-size: 13px; }
.ds-fewbase .del-label { display: block; margin: 16px 0 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; line-height: normal; color: var(--text-muted); }
.ds-fewbase .modal-del .input { display: block; height: auto; max-width: none; padding: 8px 10px; line-height: 1.4; overflow-wrap: anywhere; }
.ds-fewbase .del-hint { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; line-height: normal; color: var(--grey); }
.ds-fewbase .del-hint span { color: var(--text); }
@media (max-height: 760px) { .ds-fewbase .modal-bd.modal-del { padding-top: 10vh; } }
@media (max-width: 479px) {
  .ds-fewbase .set { margin-top: 16px; }
  .ds-fewbase .set-card, .ds-fewbase .set-danger { padding: 16px 14px; }
  .ds-fewbase .set-add-row { flex-direction: column; }
  .ds-fewbase .set-add-field { max-width: none; }
  .ds-fewbase .set-add { align-self: stretch; }
  .ds-fewbase .set-actions { align-items: stretch; margin-top: 0; padding-top: 4px; }
  .ds-fewbase .set-actions .conn-btn { display: block; width: 100%; }
  .ds-fewbase .set-danger { margin-top: 18px; }
}

/* Плашка лимита согласий месяца в кабинете (спека §7, макет 11l).
   80 % — нейтральная карточка с серой шкалой и вторичной кнопкой; 100 % —
   жёлтая (токены 2a), шкала охрой, строка «приём остановлен» и основная
   кнопка. Красной не бывает: ветки работают, отвечать можно. Селекторы с
   `.ds-fewbase` и классом плашки: ссылки дизайн-системы иначе перебивают цвет. */
.ds-fewbase .usage-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); padding: 10px 14px; font-family: "JetBrains Mono", monospace; font-size: 12px; }
.ds-fewbase .usage-banner.usage-banner-stopped { border-color: var(--yellow-line); background: var(--yellow-bg); padding: 11px 14px; }
.ds-fewbase .usage-banner .usage-banner-main { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ds-fewbase .usage-banner .usage-banner-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.ds-fewbase .usage-banner .usage-banner-count { color: var(--text); }
.ds-fewbase .usage-banner .usage-banner-count strong { font-weight: 700; }
.ds-fewbase .usage-banner .usage-banner-rest { color: var(--grey-fg); }
.ds-fewbase .usage-banner .usage-meter { display: block; width: 160px; height: 6px; background: var(--sp-meter-track); }
.ds-fewbase .usage-banner .usage-meter > span { display: block; height: 100%; background: var(--grey-fg); }
.ds-fewbase .usage-banner.usage-banner-stopped .usage-meter > span { background: var(--sp-meter-full); }
.ds-fewbase .usage-banner .usage-banner-note { color: var(--yellow-fg); }
.ds-fewbase .usage-banner a.usage-banner-link { white-space: nowrap; text-decoration: none; }
.ds-fewbase .usage-banner a.btn-primary.usage-banner-link { color: var(--bg); }