/* ============================================================================
   Дизайн-система панели: переменные, каркас (сайдбар + контент), компоненты.
   Никаких внешних зависимостей и инлайн-стилей — CSP разрешает только этот файл.
   ========================================================================== */

:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --sidebar: #0f172a;
  --sidebar-2: #1e293b;
  --sidebar-fg: #cbd5e1;
  --sidebar-muted: #8494ab;

  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #eff4ff;
  --success: #047857;
  --success-soft: #ecfdf5;
  --warning: #b45309;
  --warning-soft: #fffbeb;
  --danger: #b42318;
  --danger-soft: #fef3f2;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
  --sidebar-width: 248px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; line-height: 1.25; }
h1 { font-size: 1.4rem; font-weight: 650; }
h2 { font-size: 1.1rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
p { margin: 0 0 10px; }

.muted { color: var(--muted); }
.small { font-size: 0.82rem; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; }

/* Утилиты отступов: инлайн-стили запрещены политикой CSP */
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 6px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 14px; }
.mb-4 { margin-bottom: 20px; }
.mt-3 { margin-top: 14px; }
.mt-4 { margin-top: 20px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* --- Каркас --------------------------------------------------------------- */

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--sidebar);
  color: var(--sidebar-fg);
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  gap: 18px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.sidebar__title { color: #fff; font-weight: 600; font-size: 0.98rem; }
.sidebar__subtitle { color: var(--sidebar-muted); font-size: 0.78rem; }
.logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(145deg, #2563eb, #6d28d9 58%, #0ea5e9);
  box-shadow: 0 8px 18px -10px rgba(37, 99, 235, 0.95);
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--sidebar-fg);
  font-size: 0.92rem;
  text-decoration: none;
}
.nav-link:hover { background: var(--sidebar-2); color: #fff; text-decoration: none; }
.nav-link.is-active { background: var(--primary); color: #fff; font-weight: 500; }
.nav-link__icon { width: 18px; text-align: center; opacity: 0.9; }

.sidebar__section {
  margin: 12px 10px 4px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sidebar-muted);
}

.sidebar__footer { margin-top: auto; border-top: 1px solid var(--sidebar-2); padding-top: 12px; }
.sidebar__user {
  color: #fff;
  font-size: 0.85rem;
  padding: 0 6px 8px;
  overflow-wrap: anywhere;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar__subtitle { color: var(--muted); font-size: 0.85rem; margin-top: 2px; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

.page { padding: 24px 28px 48px; max-width: 1180px; width: 100%; }

/* --- Сетки ---------------------------------------------------------------- */

.grid { display: grid; gap: 16px; }
.grid--stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid--cards { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* --- Карточки ------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.card__title { font-weight: 600; }
.card__body { padding: 16px 18px; }
.card__body > :last-child { margin-bottom: 0; }
.card__footer {
  padding: 12px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.card--narrow { max-width: 460px; margin: 0 auto; }
.card--quiet { box-shadow: none; }

/* Плитка показателя */
.stat { padding: 16px 18px; }
.stat__value { font-size: 1.7rem; font-weight: 650; letter-spacing: -0.01em; }
.stat__label { color: var(--muted); font-size: 0.85rem; }
.stat--accent { background: linear-gradient(180deg, #fff, var(--primary-soft)); }

/* --- Списки определений --------------------------------------------------- */

.meta {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 6px 18px;
  margin: 0;
}
.meta dt { color: var(--muted); font-size: 0.88rem; }
.meta dd { margin: 0; }

/* --- Бейджи --------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.badge--active, .badge--succeeded { color: var(--success); background: var(--success-soft); border-color: #a7f3d0; }
.badge--awaiting_payment, .badge--pending, .badge--waiting_for_capture {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: #fde68a;
}
.badge--expired, .badge--blocked, .badge--canceled, .badge--refunded {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: #fecaca;
}
.badge--plain::before { display: none; }

/* --- Кнопки --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn--danger { background: var(--danger-soft); border-color: #fecaca; color: var(--danger); }
.btn--danger:hover { background: #fee4e2; }
.btn--ghost { background: transparent; border-color: transparent; color: inherit; }
.btn--ghost:hover { background: rgba(148, 163, 184, 0.16); }
.btn--sm { padding: 6px 11px; font-size: 0.85rem; }
.btn--soft { background: var(--surface-2); border-color: var(--border); color: var(--muted); }
.btn--soft:hover { background: var(--primary-soft); border-color: #c7d7fe; color: var(--primary-dark); }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Действия в строке таблицы: ссылка и форма-кнопка в одну линию. */
.table__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.table__actions form { margin: 0; }

/* --- Формы ---------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field > label { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.field__hint { font-size: 0.8rem; color: var(--muted); }

/* Все текстовые поля, включая tel/url/datetime-local: перечисление типов по списку
   раньше пропускало type="tel", из-за чего телефон выглядел «сбитым». */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
textarea { min-height: 88px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 16px; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.input--narrow { width: 96px; }

.checkbox { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.checkbox input { width: auto; }
.checkbox label { margin: 0; color: var(--text); font-size: 0.92rem; }

/* --- Таблицы -------------------------------------------------------------- */

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.table th, .table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table th {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fbfcfe; }
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.table__primary { font-weight: 500; }

/* --- Уведомления и пустые состояния -------------------------------------- */

.alert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-bottom: 16px;
}
.alert--error { color: var(--danger); background: var(--danger-soft); border-color: #fecaca; }
.alert--ok { color: var(--success); background: var(--success-soft); border-color: #a7f3d0; }
.alert--warn { color: var(--warning); background: var(--warning-soft); border-color: #fde68a; }
.alert--info { color: #1e40af; background: var(--primary-soft); border-color: #bfdbfe; }
.alert :last-child { margin-bottom: 0; }

.empty { text-align: center; padding: 34px 18px; color: var(--muted); }
.empty__icon { font-size: 1.8rem; margin-bottom: 8px; opacity: 0.7; }
.empty__title { color: var(--text); font-weight: 600; margin-bottom: 4px; }

.note {
  white-space: pre-wrap;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 0;
}

/* Панель параметров: строки «подпись — значение» с разделителями, чтобы не сливались */
.panel { border: 1px solid var(--border); border-radius: var(--radius-sm); margin: 14px 0; overflow: hidden; }
.panel__title {
  padding: 8px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}
.params { margin: 0; }
.params__row {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.params__row:last-child { border-bottom: none; }
.params__row:nth-child(even) { background: #fbfcfe; }
.params__label { color: var(--muted); font-size: 0.85rem; }
.params__value { font-weight: 500; overflow-wrap: anywhere; }
.params__value--strong { font-size: 1.05rem; }
.params__value--total { font-size: 1.15rem; font-weight: 650; }

/* Крупная цена в карточке услуги */
.price-block { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.price-block__value { font-size: 1.7rem; font-weight: 650; letter-spacing: -0.01em; }
.price-block__note { color: var(--muted); font-size: 0.85rem; }

/* --- Карточка услуги ------------------------------------------------------ */

.service__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.service__title { font-size: 1.05rem; font-weight: 600; }
.service__price { font-size: 1.45rem; font-weight: 650; letter-spacing: -0.01em; }
.service__price-note { font-size: 0.82rem; color: var(--muted); font-weight: 400; }
.service__section-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 16px 0 6px;
}
.service__actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }

/* --- Панель фильтров ------------------------------------------------------ */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.toolbar .field { margin-bottom: 0; min-width: 170px; }
.toolbar__spacer { flex: 1; }

/* --- Страница входа ------------------------------------------------------- */

.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(1000px 500px at 50% -10%, #e0e7ff, var(--bg));
}
.auth__card { width: 100%; max-width: 440px; }
/* Плашка входа в том же стиле, что и в кабинете: фон + бренд разметкой */
.auth__banner {
  position: relative;
  display: flex;
  align-items: center;
  height: 152px;
  margin-bottom: 18px;
  border-radius: 16px;
  overflow: hidden;
  background: #0b1224;
  box-shadow: 0 18px 40px -26px rgba(15, 23, 42, 0.6);
}
.auth__banner-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auth__banner-body { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 20px; }
.auth__banner-title { color: #fff; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.auth__banner-sub { color: #a5b4fc; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.logo--light { background: rgba(255, 255, 255, 0.16); color: #fff; }
.auth__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.auth__title { font-size: 1.15rem; font-weight: 650; }
.auth__hint { text-align: center; color: var(--muted); font-size: 0.85rem; margin-top: 14px; }

/* Современная плашка агентства: цветной «mesh»-фон и крупная типографика.
   Текста в SVG нет — он живёт в разметке, поэтому не зависит от шрифтов системы. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 186px;
  padding: 26px 30px;
  border-radius: 18px;
  overflow: hidden;
  background: #0b1224;
  box-shadow: 0 20px 44px -28px rgba(15, 23, 42, 0.65);
  margin-bottom: 22px;
}
.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__body { position: relative; max-width: 620px; color: #fff; }
.hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #a5b4fc;
}
.hero__title {
  margin-top: 6px;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero__text { margin: 8px 0 0; color: #cbd5e1; font-size: 0.95rem; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  padding: 4px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: #e2e8f0;
  font-size: 0.78rem;
}
.hero__actions { position: relative; margin-top: 16px; }

/* Приветствие на странице «Задать вопрос»: текст администратора поверх mesh-фона */
.greet {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #0b1224;
  box-shadow: 0 20px 44px -28px rgba(15, 23, 42, 0.65);
  margin-bottom: 22px;
}
.greet__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.greet__body { position: relative; padding: 26px 30px; max-width: 720px; color: #fff; }
.greet__title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.greet__text { margin: 0 0 8px; color: #dbe4f3; font-size: 0.95rem; }
.greet__text:last-child { margin-bottom: 0; }

/* Контакты на странице «Задать вопрос»: сочные карточки с эмодзи и цветным акцентом */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.contact {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(150deg, var(--accent-soft), var(--surface) 58%);
  box-shadow: 0 12px 30px -22px rgba(15, 23, 42, 0.5);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.contact::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.contact:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -22px rgba(15, 23, 42, 0.55); }
.contact__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 20px -12px var(--accent);
  font-size: 1.4rem;
  line-height: 1;
}
.contact__icon--sm {
  display: inline-grid;
  width: 26px;
  height: 26px;
  margin: 0 6px 0 0;
  border-radius: 8px;
  font-size: 0.9rem;
  vertical-align: middle;
}
.contact__label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact__value { font-size: 1.08rem; font-weight: 650; word-break: break-word; }
.contact__note { margin: 2px 0 0; color: var(--muted); font-size: 0.82rem; }
.contact__action { align-self: flex-start; margin-top: 10px; }

/* Палитра акцентов карточек: чередуется по порядку контактов */
.contact--indigo, .contact-row--indigo { --accent: #4f46e5; --accent-2: #818cf8; --accent-soft: #eef2ff; }
.contact--cyan, .contact-row--cyan { --accent: #0891b2; --accent-2: #22d3ee; --accent-soft: #ecfeff; }
.contact--violet, .contact-row--violet { --accent: #7c3aed; --accent-2: #c084fc; --accent-soft: #f5f3ff; }
.contact--emerald, .contact-row--emerald { --accent: #059669; --accent-2: #34d399; --accent-soft: #ecfdf5; }
.contact--amber, .contact-row--amber { --accent: #d97706; --accent-2: #fbbf24; --accent-soft: #fffbeb; }
.contact--rose, .contact-row--rose { --accent: #e11d48; --accent-2: #fb7185; --accent-soft: #fff1f2; }

/* Сводка кабинета: сколько услуг действует, истекает, ждёт оплаты и завершено */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(140deg, var(--accent-soft), var(--surface) 70%);
  box-shadow: var(--shadow);
}
.stat__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  font-size: 1.15rem;
}
.stat__value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
.stat__label { color: var(--muted); font-size: 0.82rem; }
.stat--emerald { --accent: #059669; --accent-2: #34d399; --accent-soft: #ecfdf5; }
.stat--amber { --accent: #d97706; --accent-2: #fbbf24; --accent-soft: #fffbeb; }
.stat--indigo { --accent: #4f46e5; --accent-2: #818cf8; --accent-soft: #eef2ff; }
.stat--slate { --accent: #475569; --accent-2: #94a3b8; --accent-soft: #f1f5f9; }

/* Карточка услуги в кабинете: иконка, факты, полоса срока и действие */
.service {
  /* Сетка вместо flex: иконка, текст и кнопка всегда на одних местах, даже когда
     у карточки разное число строк (у истёкшей услуги нет полосы срока). */
  --edge: var(--border-strong);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--edge);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.service--active { --edge: var(--success); }
.service--awaiting { --edge: var(--warning); }
.service--finished { --edge: var(--border-strong); background: var(--surface-2); }
.service--finished .service__title { color: var(--muted); }
.service__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 1.4rem;
}
.service--active .service__icon { background: var(--success-soft); border-color: #a7f3d0; }
.service--awaiting .service__icon { background: var(--warning-soft); border-color: #fde68a; }
.service__body { min-width: 0; }
.service__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.service__title { font-weight: 650; }
.service__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 7px;
}
.fact {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
}
.fact b { color: var(--text); }
.fact--money { background: var(--primary-soft); border-color: #c7d7fe; color: var(--primary-dark); }
.fact--money b { color: var(--primary-dark); }
.fact--date { background: var(--success-soft); border-color: #a7f3d0; color: var(--success); }
.fact--date b { color: var(--success); }
.fact--overdue { background: var(--danger-soft); border-color: #fecaca; color: var(--danger); }
.fact--overdue b { color: var(--danger); }
.progress { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.progress progress {
  width: 100%;
  max-width: 260px;
  height: 8px;
  border: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
  appearance: none;
}
.progress progress::-webkit-progress-bar { background: var(--border); border-radius: 999px; }
.progress progress::-webkit-progress-value {
  background: linear-gradient(90deg, #34d399, #059669);
  border-radius: 999px;
}
.progress progress::-moz-progress-bar { background: linear-gradient(90deg, #34d399, #059669); }
.progress__label { color: var(--muted); font-size: 0.78rem; white-space: nowrap; }
.service__actions { flex: none; }
.service__icon, .service__actions { margin-top: 2px; }
.service--finished .service__icon { background: var(--surface); border-color: var(--border-strong); }
.service--finished .fact { background: var(--surface); }
.service__actions form { margin: 0; }
.service__details { margin: -6px 0 6px 64px; }

.section-title__icon { font-size: 1rem; }
.section-title--awaiting .section-title__icon { filter: saturate(1.2); }
.catalog__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 1.2rem;
}

/* Столбец отметок на странице чеков */
.check { width: 160px; }
.check__box { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.check__label { color: var(--muted); font-size: 0.82rem; }
tr.is-done { background: var(--success-soft); }
.field--narrow { max-width: 130px; }
.input--emoji { font-size: 1.2rem; text-align: center; }
.card--hint { background: var(--surface-2); }

.section-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 4px 0 12px;
  font-size: 1.1rem;
  font-weight: 600;
}
.section-title .small { font-weight: 400; }

.category-title {
  margin: 16px 0 8px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
}

/* Компактная строка услуги: заголовок, ключевые параметры и кнопка действия */
.item { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.item:last-child { border-bottom: none; }
.item__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.item__main { flex: 1; min-width: 220px; }
.item__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.item__meta { color: var(--muted); font-size: 0.85rem; margin-top: 3px; }
.item__meta b { color: var(--text); font-weight: 600; }
.item__actions { display: flex; gap: 8px; align-items: center; }
.item__actions form { margin: 0; }

.item__details { margin-top: 10px; }
.item__details > summary {
  cursor: pointer;
  color: var(--primary);
  font-size: 0.85rem;
  list-style: none;
}
.item__details > summary::-webkit-details-marker { display: none; }
.item__details > summary::before { content: "▸ "; }
.item__details[open] > summary::before { content: "▾ "; }
.item__details .panel { margin-bottom: 0; }

.section-card { padding: 0; overflow: hidden; }

/* --- Мастер добавления услуги -------------------------------------------- */

.wizard { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.wizard__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.86rem;
}
.wizard__num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 0.75rem;
  font-weight: 600;
}
.wizard__step.is-active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.wizard__step.is-active .wizard__num { background: var(--primary); color: #fff; }
.wizard__step.is-done { color: var(--success); border-color: #a7f3d0; background: var(--success-soft); }
.wizard__step.is-done .wizard__num { background: var(--success); color: #fff; }

.type-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.type-card { display: flex; flex-direction: column; height: 100%; }
.type-card__body { flex: 1; }
.type-card__title { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }
.type-card__example { color: var(--muted); font-size: 0.85rem; margin-bottom: 10px; }

.summary { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 18px; margin: 0; }
.summary dt { color: var(--muted); font-size: 0.88rem; }
.summary dd { margin: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.tabs__link {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.88rem;
  text-decoration: none;
}
.tabs__link:hover { background: var(--surface-2); text-decoration: none; }
.tabs__link.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tabs__count { color: var(--muted); }
.tabs__link.is-active .tabs__count { color: rgba(255, 255, 255, 0.75); }

/* --- Адаптив -------------------------------------------------------------- */

@media (max-width: 980px) {
  .layout { flex-direction: column; }
  .sidebar {
    width: 100%;
    flex: none;
    height: auto;
    position: static;
    border-radius: 0;
  }
  .sidebar__nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar__footer { margin-top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .sidebar__footer form { min-width: 120px; }
  .page { padding: 18px 16px 40px; }
  .topbar { padding: 14px 16px; position: static; }
  .meta { grid-template-columns: 1fr; gap: 2px; }
  .meta dt { margin-top: 8px; }
}

/* --- Этап 11: аккуратные заголовки категорий, «подробнее» в карточке, контакты --- */

/* Категория каталога — современный заголовок: акцентная полоса, градиентная плитка */
.group-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 12px;
  padding: 14px 18px 14px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(120% 190% at 0% 0%, rgba(37, 99, 235, 0.13), transparent 58%),
    linear-gradient(120deg, var(--surface-2), var(--surface) 72%);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.group-head::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #2563eb, #7c3aed 52%, #06b6d4);
}
.group-head__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(145deg, #2563eb, #6d28d9 58%, #0ea5e9);
  box-shadow: 0 10px 22px -12px rgba(37, 99, 235, 0.95);
  font-size: 1.3rem;
  line-height: 1;
}
.group-head__text { min-width: 0; }
.group-head__title { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.015em; }
.group-head__meta { margin-top: 2px; color: var(--muted); font-size: 0.8rem; }
.group-head__count {
  margin-left: auto;
  flex: none;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid #c7d7fe;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.8rem;
  font-weight: 600;
}

@media (max-width: 620px) {
  .group-head { gap: 10px; padding: 12px 14px 12px 16px; }
  .group-head__icon { width: 40px; height: 40px; font-size: 1.15rem; }
  .group-head__title { font-size: 1.02rem; }
}

/* «Подробнее» внутри карточки услуги: маленькая кнопка под статусом */
.service__more { margin-top: 10px; }
.service__more > summary { list-style: none; cursor: pointer; }
.service__more > summary::-webkit-details-marker { display: none; }
.service__more > summary::after { content: "▾"; margin-left: 2px; font-size: 0.8em; }
.service__more[open] > summary::after { content: "▴"; }
.service__more-body { display: grid; gap: 12px; margin-top: 12px; }
.service__more-body .panel { margin-bottom: 0; }

/* Контакты: строка «иконка слева — контакт справа» */
.contact-list { display: grid; gap: 12px; margin-bottom: 20px; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.contact-row:hover {
  border-color: var(--accent);
  box-shadow: 0 14px 30px -24px rgba(15, 23, 42, 0.55);
  transform: translateY(-1px);
}
.contact-row__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid var(--border);
  font-size: 1.4rem;
  line-height: 1;
}
.contact-row__body { flex: 1; min-width: 0; }
.contact-row__title { font-weight: 650; }
.contact-row__value { color: var(--accent); font-weight: 600; word-break: break-word; }
.contact-row__note { color: var(--muted); font-size: 0.82rem; margin-top: 2px; }
.contact-row__action {
  flex: none;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.contact-row__action:hover { text-decoration: underline; }

/* Приветствие без картинки — лаконичная подложка */
.greet--slim {
  background: linear-gradient(120deg, #101a3a, #1b2a63 55%, #24407f);
  box-shadow: 0 18px 38px -30px rgba(15, 23, 42, 0.7);
}
.greet--slim .greet__body { padding: 22px 26px; }
.greet--slim .greet__title { font-size: 1.3rem; }

/* --- Этап 11: админ-панель — KPI, «требует внимания», компактные таблицы --- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.kpi {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -24px rgba(15, 23, 42, 0.5);
  border-color: var(--border-strong);
  text-decoration: none;
}
.kpi__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 1.1rem;
}
.kpi__value { font-size: 1.55rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }
.kpi__label { color: var(--muted); font-size: 0.83rem; margin-top: 2px; }
.kpi--money .kpi__icon { background: var(--success-soft); border-color: #a7f3d0; }
.kpi--services .kpi__icon { background: var(--primary-soft); border-color: #c7d7fe; }
.kpi--attention { border-color: #fed7aa; background: linear-gradient(150deg, var(--warning-soft), var(--surface) 70%); }
.kpi--attention .kpi__icon { background: #ffedd5; border-color: #fed7aa; }
.kpi--calm .kpi__icon { background: var(--success-soft); border-color: #a7f3d0; }

.attention-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.attention {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.attention:hover { text-decoration: none; border-color: var(--border-strong); }
.attention--warn { background: linear-gradient(150deg, var(--warning-soft), var(--surface) 75%); border-color: #fde68a; }
.attention__icon { font-size: 1.3rem; line-height: 1.2; }
.attention__value { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.attention__label { font-size: 0.88rem; }
.attention__hint { color: var(--muted); font-size: 0.78rem; margin-top: 4px; }

.table--compact th, .table--compact td { padding: 8px 10px; font-size: 0.88rem; }
.table--compact th:first-child, .table--compact td:first-child { padding-left: 16px; }

.steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.steps li { color: var(--muted); font-size: 0.9rem; }
.steps li strong { color: var(--text); }

.service--off { opacity: 0.72; }
.service--off .service__title { color: var(--muted); }

.type-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: 13px;
  background: var(--primary-soft);
  border: 1px solid #c7d7fe;
  font-size: 1.3rem;
}

/* Страница «Платежи»: сводные чипы и спокойная таблица */
.payment-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip--light {
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted);
}
.chip--ok { background: var(--success-soft); border-color: #a7f3d0; color: var(--success); }
.chip--wait { background: var(--warning-soft); border-color: #fde68a; color: var(--warning); }

.table--payments tbody tr { border-left: 3px solid transparent; }
.table--payments tbody tr.is-paid { border-left-color: var(--success); }
.table--payments tbody tr.is-waiting { border-left-color: var(--warning); background: var(--warning-soft); }
.table--payments tbody tr:hover { background: var(--surface-2); }

/* --- Этап 13: заметные кнопки-раскрытия, фирменные иконки, выравнивание --- */

/* «Подробнее» и «Что входит»: кнопка-CTA вместо мелкой ссылки */
.details-cta > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid #c7d7fe;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary-soft), #eef2ff);
  color: var(--primary-dark);
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
  list-style: none;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.details-cta > summary:hover {
  background: linear-gradient(135deg, #e0e9ff, #e6ecff);
  border-color: var(--primary);
  box-shadow: 0 10px 20px -14px var(--primary);
}
.details-cta > summary::before,
.details-cta > summary::after { content: none; }
.details-cta > summary::-webkit-details-marker { display: none; }
.details-cta__arrow { font-size: 0.9em; line-height: 1; }
.details-cta__less { display: none; }
.details-cta[open] .details-cta__more { display: none; }
.details-cta[open] .details-cta__less { display: inline-flex; align-items: center; gap: 6px; }
.details-cta[open] > summary { background: var(--surface-2); border-color: var(--border-strong); color: var(--muted); }

/* Фирменные иконки контактов рисуются вектором и берут цвет акцента */
.brand-icon { display: block; width: 24px; height: 24px; }
.contact-row__icon { color: var(--accent); }
.contact-row__icon--sm {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 1rem;
}
.contact-row__icon--sm .brand-icon { width: 16px; height: 16px; }
.contact-preview { display: inline-flex; align-items: center; gap: 8px; }

/* --- Этап 14: главная страница админки «Услуги» --- */

.kpi-grid--services { margin-bottom: 18px; }
.kpi-grid--services .kpi { padding: 14px 16px; }
.kpi-grid--services .kpi__value { font-size: 1.4rem; }

.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.list-toolbar .tabs { flex: 1 1 420px; margin-bottom: 0; }
.search { display: flex; align-items: center; gap: 8px; }
.search input[type="search"] {
  min-width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  color: var(--text);
  background: var(--surface);
}
.search input[type="search"]:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }

/* Группы: то, что клиент оплачивает одним платежом */
.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.group-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(150deg, #f2f5ff, var(--surface) 62%);
  box-shadow: var(--shadow);
}
.group-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.group-card__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.group-card__items { display: grid; gap: 6px; }
.group-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.group-item:hover { border-color: var(--primary); text-decoration: none; }
.group-item__icon { font-size: 1.05rem; line-height: 1; }
.group-item__title {
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.group-item__price {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.group-card__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-size: 0.9rem;
}
.group-card__actions { margin-top: auto; }

.fact--link {
  background: var(--primary-soft);
  border-color: #c7d7fe;
  color: var(--primary-dark);
  text-decoration: none;
}
.fact--link:hover { text-decoration: underline; }
.service__actions { display: flex; align-items: center; gap: 6px; }
.table__detail { margin-top: 2px; }

/* --- Этап 15: комплекты в каталоге, описание услуги, выдача группы --- */

.item__text {
  margin: 8px 0 0 58px;
  color: var(--muted);
  font-size: 0.88rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Кнопка «Что входит»: заметная, но не спорит с главным действием */
.details-cta > summary {
  border-color: #a5b4fc;
  background: linear-gradient(135deg, #e0e7ff, var(--primary-soft));
  box-shadow: 0 6px 16px -12px var(--primary);
}
.details-cta > summary:hover { background: linear-gradient(135deg, #d3ddff, #e2e9ff); }
.details-cta__badge { font-size: 1rem; line-height: 1; }

/* Комплекты: несколько услуг одним платежом */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.offer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--primary);
  border-radius: 16px;
  background: linear-gradient(160deg, #f2f5ff, var(--surface) 55%);
  box-shadow: var(--shadow);
}
.offer__head { display: flex; align-items: flex-start; gap: 12px; }
.offer__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--primary-soft);
  border: 1px solid #c7d7fe;
  font-size: 1.25rem;
}
.offer__titles { flex: 1; min-width: 0; }
.offer__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.offer__meta { color: var(--muted); font-size: 0.8rem; }
.offer__price { text-align: right; white-space: nowrap; }
.offer__price b { font-size: 1.05rem; }
.offer__price .small { display: block; }
.offer__text { margin: 0; color: var(--muted); font-size: 0.88rem; }
.offer__items { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.offer__actions { margin-top: auto; }
.offer__actions form { margin: 0; }

/* Выдача группы в карточке клиента */
.assign-group {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.assign-group__body { flex: 1; min-width: 0; }
.assign-group__title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; }
.assign-group__items { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 6px; }
.assign-group form { margin: 0; flex: none; }

/* --- Этап 16: фильтр в «Моих услугах», заголовки групп в каталоге, фирменная иконка --- */

.cabinet-filter {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(160deg, var(--surface-2), var(--surface) 68%);
  box-shadow: var(--shadow);
}
.cabinet-filter__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cabinet-filter__label {
  flex: none;
  width: 92px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tabs--chips { flex: 1 1 320px; gap: 8px; }
.tabs--chips .tabs__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.tabs--chips .tabs__link:hover { transform: translateY(-1px); border-color: var(--primary); }
.tabs--chips .tabs__link.is-active { box-shadow: 0 6px 14px -8px var(--primary); }
.cabinet-filter__row--search { border-top: 1px dashed var(--border); padding-top: 10px; }
.cabinet-filter__row--search .search { flex: 1 1 320px; }
.cabinet-filter__row--search .search input[type="search"] { flex: 1 1 auto; }
.cabinet-filter__summary { margin-bottom: 14px; }