/* Svetolux OS поверх Tabler 1.7. Стиль «рамка и лист»: шапка и меню лежат на тёплом каменном фоне,
   рабочая область — белый лист с тонкой рамкой и мягкими углами, без теней. Глубина — один шаг тона.
   Цвет — на данных, статусах и одном главном действии; красный логотипа (#BD0F10) — акцент бренда.
   Шрифт IBM Plex Sans хранится в проекте (vendor/fonts/plex). */

/* ==========================================================================================
   Токены
   ========================================================================================== */
:root, [data-bs-theme=light] {
  --svl-frame: #f5f3ef;        /* тёплый «каменный» фон рамки: шапка, меню, поля вокруг листа */
  --svl-sheet: #ffffff;
  --svl-raised: #faf9f7;       /* вложенные подложки: фильтры, блок соцсетей, комментарии */
  --svl-line: #e9e5df;         /* края листа и карточек */
  --svl-rule: #f1eee9;         /* линии строк */
  --svl-control: #dcd7cf;      /* рамки полей ввода */
  --svl-ink: #1c1917;
  --svl-muted: #66615b;        /* 5.9:1 на белом */

  --tblr-font-sans-serif: "IBM Plex Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tblr-body-bg: var(--svl-frame);
  --tblr-bg-surface: var(--svl-sheet);
  --tblr-bg-surface-secondary: var(--svl-raised);
  --tblr-border-color: var(--svl-line);
  --tblr-border-color-translucent: var(--svl-line);
  --tblr-body-color: var(--svl-ink);
  --tblr-secondary: var(--svl-muted);
  --tblr-secondary-color: var(--svl-muted);
  --tblr-border-radius: 8px;

  /* Акцент — красный логотипа. */
  --tblr-primary: #bd0f10;
  --tblr-primary-rgb: 189, 15, 16;
  --tblr-primary-lt-rgb: 251, 236, 236;
  --tblr-primary-fg: #fff;
  --tblr-primary-darken: #9e0c0d;
  --tblr-link-color: #a80d0e;
  --tblr-link-color-rgb: 168, 13, 14;
  --tblr-link-hover-color: #840a0b;
  --tblr-link-hover-color-rgb: 132, 10, 11;
  --svl-brand-yellow: #f6ca00;

  /* Разделы работы: цвет только у значка в заголовке карточки. */
  --svl-sales: #a80d0e;
  --svl-logistics: #2c5fa3;
  --svl-warehouse: #0f716a;
  --svl-finance: #2d7239;
  --svl-tasks: #b25a0b;
  --svl-people: #6e46a3;
  --svl-history: #7a736c;
  /* Направления бизнеса. */
  --svl-dir-svetolux: #bd0f10;
  --svl-dir-svl: #0f7c8c;
  --svl-dir-premium: #a8770a;
  --svl-dir-mixed: #6d4fb3;
  /* Путь «от постановки к готовности»: шаги, история, даты задач, прогресс плана. */
  --svl-start: #e8590c;
  --svl-mid: #e69500;
  --svl-finish: #2b9a3e;
  --svl-alert: #c92a2a;
  --svl-amber: #a8770a;
}
[data-bs-theme=dark] {
  --svl-frame: #0f0f10;
  --svl-sheet: #161617;
  --svl-raised: #1c1c1d;
  --svl-line: #29292b;
  --svl-rule: #212123;
  --svl-control: #3a3a3d;
  --svl-ink: #f2f0ed;
  --svl-muted: #a8a29c;

  --tblr-body-bg: var(--svl-frame);
  --tblr-bg-surface: var(--svl-sheet);
  --tblr-bg-surface-secondary: var(--svl-raised);
  --tblr-border-color: var(--svl-line);
  --tblr-border-color-translucent: var(--svl-line);
  --tblr-body-color: var(--svl-ink);
  --tblr-secondary: var(--svl-muted);
  --tblr-secondary-color: var(--svl-muted);

  --tblr-primary: #e5484d;
  --tblr-primary-rgb: 229, 72, 77;
  --tblr-primary-lt-rgb: 52, 28, 29;
  --tblr-primary-fg: #fff;
  --tblr-primary-darken: #c93a3f;
  --tblr-link-color: #f2797c;
  --tblr-link-color-rgb: 242, 121, 124;
  --tblr-link-hover-color: #f7a3a5;
  --tblr-link-hover-color-rgb: 247, 163, 165;

  --svl-sales: #f2797c;
  --svl-logistics: #7fb0f0;
  --svl-warehouse: #5fd0c5;
  --svl-finance: #82cf91;
  --svl-tasks: #f0a65c;
  --svl-people: #c3a2ee;
  --svl-history: #a8a29c;
  --svl-dir-svetolux: #f2797c;
  --svl-dir-svl: #5ec7d6;
  --svl-dir-premium: #e6b94a;
  --svl-dir-mixed: #b49af0;
  --svl-start: #ff922b;
  --svl-mid: #fcc419;
  --svl-finish: #51cf66;
  --svl-alert: #ff6b6b;
  --svl-amber: #e6b94a;
}

/* ==========================================================================================
   Основа: шрифт, размеры, кнопки, поля
   ========================================================================================== */
body { font-family: var(--tblr-font-sans-serif); font-size: .875rem; letter-spacing: 0; -webkit-font-smoothing: antialiased; }
.h1, .h2, .h3, .h4, h1, h2, h3, h4 { letter-spacing: -.01em; }
.btn { --tblr-btn-font-weight: 500; border-radius: 8px; box-shadow: none; }
.btn-sm { border-radius: 6px; }
.btn-primary { --tblr-btn-hover-bg: var(--tblr-primary-darken); --tblr-btn-active-bg: var(--tblr-primary-darken); }
.btn:not(.btn-primary):not(.btn-danger):not([class*="btn-ghost"]):not(.btn-link) { --tblr-btn-border-color: var(--svl-control); background: var(--svl-sheet); }
.form-control, .form-select { border-color: var(--svl-control); border-radius: 8px; box-shadow: none; }
.form-control-sm, .form-select-sm { border-radius: 6px; }
.form-label { font-weight: 500; }
.badge { border-radius: 6px; font-weight: 500; font-size: .72rem; letter-spacing: 0; padding: .3em .55em; text-transform: none; }
.alert { border-radius: 10px; box-shadow: none; }
.dropdown-menu { border-color: var(--svl-line); border-radius: 10px; box-shadow: 0 8px 24px rgba(28, 25, 23, .08); }
.avatar { font-weight: 500; }
/* Скрытые подписи (.visually-hidden) в заголовках таблиц позиционируются абсолютно; без этого они
   выпадают из прокручиваемой обёртки и растягивают страницу на телефоне (T35). */
.table-responsive { position: relative; }

/* ==========================================================================================
   Рамка и лист
   ========================================================================================== */
.page > .navbar, .page > .navbar-expand-md > .navbar-collapse > .navbar {
  background: transparent; border: 0; box-shadow: none; --tblr-navbar-border-color: transparent; }
.page > .navbar { min-height: 3.5rem; }
.page > .navbar-expand-md > .navbar-collapse > .navbar { min-height: 2.75rem; padding-top: 0; padding-bottom: 0; }
.page > .navbar-expand-md .nav-link { color: var(--svl-muted); font-weight: 500; padding-top: .55rem; padding-bottom: .55rem; }
.page > .navbar-expand-md .nav-link:hover { color: var(--svl-ink); }
.page > .navbar-expand-md .nav-link-icon .icon { width: 1rem; height: 1rem; font-size: 1rem; color: inherit; }
.page > .navbar-expand-md .nav-item.active > .nav-link { color: var(--svl-ink); }
@media (min-width: 768px) {
  .page > .navbar-expand-md .navbar .nav-item.active::after,
  .page > .navbar-expand-md .navbar .nav-item.active > .nav-link::after { border-bottom-width: 2px; border-color: var(--tblr-primary); }
}
/* Лист: вся рабочая область, отступ 8px от краёв окна, рамка в 1px, углы 16px, без тени. */
.page-wrapper { background: var(--svl-sheet); border: 1px solid var(--svl-line); border-radius: 16px; margin: .25rem 8px 8px; overflow: clip; }
@media (max-width: 767.98px) { .page-wrapper { margin: 0; border-radius: 0; border-left: 0; border-right: 0; } }
.footer { background: transparent; border-top: 1px solid var(--svl-rule); font-size: .8rem; }

.svl-brand { display: inline-flex; align-items: center; gap: .5rem; color: inherit; font-weight: 600; text-decoration: none; }
.svl-brand:hover { text-decoration: none; }
.svl-brand-logo { display: block; height: 1.6rem; width: auto; }
.svl-brand-os { padding-left: .5rem; border-left: 1px solid var(--svl-control); color: var(--svl-muted); font-size: .85rem; line-height: 1.6rem; font-weight: 500; letter-spacing: .02em; }
.page-center .svl-brand-logo { height: 2.25rem; }
.page-center .svl-brand-os { font-size: 1.1rem; line-height: 2.25rem; }
.svl-theme-toggle { background: none; border: 0; color: var(--svl-muted); }

/* ==========================================================================================
   Шапка страницы
   ========================================================================================== */
.page-header { margin-top: 0; padding-top: 1.75rem; padding-bottom: 0; }
.page-pretitle { color: var(--svl-muted); font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; margin-bottom: .2rem; }
.page-pretitle a { color: inherit; }
.page-title { font-size: 1.375rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.page-body { margin-top: 1.5rem; margin-bottom: 2rem; }
.row-cards { --tblr-gutter-y: 1rem; --tblr-gutter-x: 1rem; }

/* ==========================================================================================
   Карточки: белые на белом листе, рамка в 1px, без тени и цветных полос
   ========================================================================================== */
.page-body .card { box-shadow: none; border: 1px solid var(--svl-line); border-radius: 12px; transition: border-color .15s ease; }
.page-body .card > .card-header { background: transparent; border-bottom: 1px solid var(--svl-rule); min-height: 3.25rem; padding-top: .7rem; padding-bottom: .7rem;
  border-top-left-radius: 12px; border-top-right-radius: 12px; }
.page-body .card > .card-footer { background: transparent; border-top: 1px solid var(--svl-rule); }
.page-body .card-title { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: .5rem; letter-spacing: -.005em; }
.page-body .card-subtitle { color: var(--svl-muted); font-size: .8rem; margin-top: .15rem; }
a.card-link:hover, .card.svl-hover:hover { border-color: var(--svl-control); }
/* Действие в заголовке карточки («+ Заявка логисту») не переносится: подзаголовок сжимается, а не ссылка. */
.page-body .card > .card-header { gap: .75rem 1rem; }
.page-body .card > .card-header > :first-child { min-width: 0; }
.page-body .card-actions { flex: none; margin-left: auto; white-space: nowrap; }
.svl-d-sales { --svl-tone: var(--svl-sales); }
.svl-d-logistics { --svl-tone: var(--svl-logistics); }
.svl-d-warehouse { --svl-tone: var(--svl-warehouse); }
.svl-d-finance { --svl-tone: var(--svl-finance); }
.svl-d-tasks { --svl-tone: var(--svl-tasks); }
.svl-d-people { --svl-tone: var(--svl-people); }
.svl-d-history { --svl-tone: var(--svl-history); }
/* Значок раздела — без подложки, только цвет раздела. */
.svl-ico { display: inline-grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; color: var(--svl-tone, var(--svl-muted)); }
.svl-ico .icon { width: 1.05rem; height: 1.05rem; font-size: 1.05rem; stroke-width: 1.6; }
.svl-count { font-size: .72rem; font-weight: 500; padding: .05rem .45rem; border-radius: 6px; background: var(--svl-raised); color: var(--svl-muted);
  border: 1px solid var(--svl-rule); font-variant-numeric: tabular-nums; }

/* Заголовок группы на главной: «Логистика», «Склад», «Финансы». */
.svl-group-title { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; margin: .75rem 0 0; }
.svl-group-title::after { content: ""; flex: 1; height: 1px; background: var(--svl-rule); margin-left: .5rem; }

/* Плитки с цифрами: подпись — обычный регистр, число — лёгкое. */
.page-body .card .subheader { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 500; color: var(--svl-muted); }
.page-body .card .h1 { font-size: 1.75rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ==========================================================================================
   Таблицы и списки
   ========================================================================================== */
.page-body .table { --tblr-table-border-color: var(--svl-rule); }
.page-body .table > tbody > tr { transition: background-color .12s ease; }
.page-body .table > tbody > tr:hover > * { background-color: var(--svl-raised); }
.page-body .table thead th { font-size: .75rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--svl-muted);
  background: transparent; border-bottom: 1px solid var(--svl-line); padding-top: .6rem; padding-bottom: .6rem; }
.page-body .table td { font-variant-numeric: tabular-nums; }
.list-group-flush > .list-group-item { border-color: var(--svl-rule); }
.list-group-item-action:hover { background: var(--svl-raised); }
.nav-tabs { --tblr-nav-tabs-border-color: var(--svl-line); }
.nav-tabs .nav-link { font-weight: 500; color: var(--svl-muted); }
.nav-tabs .nav-link.active { color: var(--svl-ink); border-bottom-color: var(--tblr-primary); }
.card-header-tabs { margin-bottom: -.7rem; }
.datagrid-title { text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 500; color: var(--svl-muted); }

/* ==========================================================================================
   Направления бизнеса
   ========================================================================================== */
.svl-dir { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 500; color: var(--svl-dir); white-space: nowrap; }
.svl-dir::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--svl-dir); }
.svl-dir-svetolux { --svl-dir: var(--svl-dir-svetolux); }
.svl-dir-svl { --svl-dir: var(--svl-dir-svl); }
.svl-dir-premium { --svl-dir: var(--svl-dir-premium); }
.svl-dir-mixed { --svl-dir: var(--svl-dir-mixed); }
tr[class*="svl-dir-"] > td:first-child { box-shadow: inset 2px 0 0 var(--svl-dir); }
.svl-hero { position: relative; box-shadow: inset 2px 0 0 var(--svl-dir, var(--tblr-primary)) !important; }
.svl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem 1.5rem; }
.svl-kpi .svl-kpi-label { font-size: .78rem; color: var(--svl-muted); font-weight: 500; }
.svl-kpi .svl-kpi-value { font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: .1rem; }

/* ==========================================================================================
   Шкала стадий: тонкая линия, небольшие точки, цвет на пути оранжевый → янтарный → зелёный
   ========================================================================================== */
.svl-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; overflow-x: auto; }
/* --svl-k (0–100%) задаёт шаблон: точка шага на пути. */
.svl-steps li { --svl-c: color-mix(in oklch, var(--svl-finish) clamp(0%, calc((var(--svl-k, 0%) - 50%) * 2), 100%), color-mix(in oklab, var(--svl-mid) clamp(0%, calc(var(--svl-k, 0%) * 2), 100%), var(--svl-start)));
  --svl-cp: color-mix(in oklch, var(--svl-finish) clamp(0%, calc((var(--svl-kp, 0%) - 50%) * 2), 100%), color-mix(in oklab, var(--svl-mid) clamp(0%, calc(var(--svl-kp, 0%) * 2), 100%), var(--svl-start)));
  flex: 1 1 0; min-width: 5.5rem; position: relative; display: grid; justify-items: center; gap: .45rem; text-align: center;
  font-size: .75rem; color: var(--svl-muted); padding: 0 .25rem; }
.svl-steps li::before { content: ""; position: absolute; top: .56rem; left: -50%; right: 50%; height: 2px; border-radius: 2px; background: var(--svl-rule); z-index: 0; }
.svl-steps li:first-child::before { display: none; }
.svl-steps .dot { position: relative; z-index: 1; box-sizing: border-box; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; line-height: 1;
  background: var(--svl-sheet); border: 1.5px solid var(--svl-control); font-size: .62rem; font-weight: 600; color: var(--svl-muted); }
.svl-steps .dot .ti { display: block; font-size: .7rem; line-height: 1; width: auto; height: auto; margin: 0; }
.svl-steps li.done { color: var(--svl-ink); }
.svl-steps li.done::before, .svl-steps li.current::before { background: linear-gradient(90deg, var(--svl-cp), var(--svl-c)); }
.svl-steps li.done .dot { background: var(--svl-c); border-color: var(--svl-c); color: #fff; }
.svl-steps li.current { color: var(--svl-ink); font-weight: 600; }
.svl-steps li.current .dot { border-color: var(--svl-c); color: var(--svl-c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--svl-c) 16%, transparent); }
.svl-steps.cancelled li .dot { border-style: dashed; }

/* ==========================================================================================
   История (таймлайн)
   ========================================================================================== */
.svl-timeline { list-style: none; margin: 0; padding: 1rem 1.25rem .5rem; }
.svl-timeline > li { position: relative; padding: 0 0 .9rem 1.5rem; }
.svl-timeline > li::before { content: ""; position: absolute; left: .27rem; top: 1rem; bottom: -.15rem; width: 1px; background: var(--svl-line); }
.svl-timeline > li:last-child::before, .svl-timeline > li:not([hidden]):has(+ li[hidden])::before { display: none; }
.svl-timeline > li::after { content: ""; position: absolute; left: 0; top: .38rem; width: .58rem; height: .58rem; border-radius: 50%;
  background: var(--svl-sheet); border: 1.5px solid var(--svl-tone, var(--svl-muted)); }
.svl-timeline > li:first-child::after { background: var(--svl-tone, var(--svl-muted)); }
.svl-timeline .t-title { font-weight: 500; }
.svl-timeline .t-meta { font-size: .78rem; color: var(--svl-muted); margin-top: .05rem; }
.svl-timeline .t-comment { margin-top: .35rem; padding: .4rem .65rem; border-radius: 8px; background: var(--svl-raised); font-size: .85rem; }
/* История с градиентом: у каждого события свой цвет на пути от оранжевого к зелёному. */
.svl-timeline-graded > li { --svl-c: color-mix(in oklch, var(--svl-finish) clamp(0%, calc((var(--svl-k, 50%) - 50%) * 2), 100%), color-mix(in oklab, var(--svl-mid) clamp(0%, calc(var(--svl-k, 50%) * 2), 100%), var(--svl-start))); }
.svl-timeline-graded > li.is-neutral { --svl-c: var(--svl-history); }
.svl-timeline-graded > li.is-alert { --svl-c: var(--svl-alert); }
.svl-timeline-graded > li::after, .svl-timeline-graded > li:first-child::after { background: var(--svl-c); border-color: var(--svl-c); }
.svl-timeline-graded > li::before { background: color-mix(in oklab, var(--svl-c) 30%, var(--svl-line)); }
.svl-timeline-graded .t-title { color: color-mix(in oklab, var(--svl-c) 55%, var(--svl-ink)); }
.svl-timeline-graded > li.is-neutral .t-title { color: var(--svl-ink); }
.svl-timeline-graded .t-comment { box-shadow: inset 2px 0 0 color-mix(in oklab, var(--svl-c) 50%, transparent); }
.svl-more { display: flex; justify-content: center; padding: 0 1rem 1rem; }
.svl-more .icon { transition: transform .2s ease; }
.svl-more [aria-expanded="true"] .icon { transform: rotate(180deg); }

/* ==========================================================================================
   Навигация: «хлебные крошки» и строки-ссылки
   ========================================================================================== */
.svl-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 500; margin-bottom: .25rem; }
.svl-crumbs a { color: var(--svl-muted); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; }
.svl-crumbs a:hover { color: var(--tblr-primary); }
.svl-crumbs > .icon { width: .8rem; height: .8rem; font-size: .8rem; color: var(--svl-control); }
.svl-crumbs a .icon { font-size: .9rem; }
.svl-crumbs span { color: var(--svl-muted); }
tr.svl-row-link { cursor: pointer; }

/* ==========================================================================================
   Компактные списки внутри карточек («мини-окна»)
   ========================================================================================== */
.svl-mini-list > .list-group-item { padding-top: .75rem; padding-bottom: .75rem; }
.svl-mini-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .25rem 1.25rem; }
.svl-mini-main { min-width: 0; }
.svl-mini-main .fw-medium { font-weight: 500 !important; }
.svl-mini-amount { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.svl-mini-status { min-width: 7.5rem; text-align: right; }
@media (max-width: 575.98px) {
  .svl-mini-row { grid-template-columns: minmax(0, 1fr) auto; }
  .svl-mini-amount { grid-column: 1; text-align: left; }
  .svl-mini-status { grid-row: 1; grid-column: 2; min-width: 0; }
}

/* ==========================================================================================
   Фильтры реестров
   ========================================================================================== */
/* Панель видна всегда: поля в одну строку на широком экране, переносятся на узком. */
.svl-filter-grid { display: flex; flex-wrap: wrap; gap: .75rem 1rem; padding: .9rem 1rem; border-radius: 10px;
  background: var(--svl-raised); border: 1px solid var(--svl-rule); }
.svl-filter { flex: 1 1 7rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.svl-filter-wide { flex: 1.4 1 10rem; }
.svl-filter-dates { flex: 1.8 1 15rem; }
.svl-filter .form-label { display: block; float: none; width: auto; font-size: .75rem; margin-bottom: .25rem; color: var(--svl-muted); }
.svl-filter .input-icon { display: block; }
.svl-filter-range { display: flex; align-items: center; gap: .35rem; }
.svl-filter-range > span { color: var(--svl-muted); }
.svl-filter-range .form-control { min-width: 0; }

/* ==========================================================================================
   Плашки дат и значков
   ========================================================================================== */
.svl-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .5rem; border-radius: 6px; font-size: .75rem; font-weight: 500;
  background: color-mix(in oklab, var(--svl-chip) 9%, transparent); color: color-mix(in oklab, var(--svl-chip) 85%, var(--svl-ink)); font-variant-numeric: tabular-nums; }
.svl-chip .icon { width: .85rem; height: .85rem; font-size: .85rem; }
.svl-chip-red { --svl-chip: var(--svl-alert); }
.svl-chip-green { --svl-chip: var(--svl-finish); }
.svl-chip-violet { --svl-chip: var(--svl-people); }
.svl-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr)); gap: .5rem; }
.svl-date { --svl-c: color-mix(in oklch, var(--svl-finish) clamp(0%, calc((var(--svl-k, 0%) - 50%) * 2), 100%), color-mix(in oklab, var(--svl-mid) clamp(0%, calc(var(--svl-k, 0%) * 2), 100%), var(--svl-start)));
  display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .7rem; border-radius: 10px;
  background: color-mix(in oklab, var(--svl-c) 6%, var(--svl-sheet)); border: 1px solid color-mix(in oklab, var(--svl-c) 22%, var(--svl-line));
  box-shadow: inset 0 2px 0 var(--svl-c); }
.svl-date > .icon { flex: none; width: 1rem; height: 1rem; font-size: 1rem; margin-top: .1rem; color: var(--svl-c); }
.svl-date-label { font-size: .75rem; font-weight: 500; color: color-mix(in oklab, var(--svl-c) 65%, var(--svl-ink)); }
.svl-date-value { font-weight: 500; font-variant-numeric: tabular-nums; margin-top: .05rem; }
.svl-date-by { display: block; font-weight: 400; font-size: .75rem; color: var(--svl-muted); }
.svl-date.is-empty { --svl-c: var(--svl-control); background: var(--svl-raised); box-shadow: none; }
.svl-date.is-empty .svl-date-label, .svl-date.is-empty .svl-date-value { color: var(--svl-muted); }
.svl-date-due { --svl-c: var(--svl-people); }
.svl-date-due.is-overdue { --svl-c: var(--svl-alert); }

/* ==========================================================================================
   Состав пула: тонкая полоса и легенда-таблица
   ========================================================================================== */
.svl-pool-total { font-size: 1.5rem; font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.svl-pool-bar { display: flex; height: .5rem; border-radius: 999px; overflow: hidden; background: var(--svl-rule); gap: 2px; }
.svl-pool-part { display: block; min-width: .5rem; font-size: 0; }
.svl-pool-empty { margin: auto; font-size: .75rem; color: var(--svl-muted); }
.svl-pool-legend { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.svl-pool-legend li { display: flex; align-items: center; gap: .5rem; font-size: .85rem; min-width: 0; }
.svl-pool-legend li .icon { display: none; }
.svl-pool-legend strong { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }
.svl-pool-dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; }
.svl-pool-part.discount, .svl-pool-dot.discount { background: #2c5fa3; }
.svl-pool-part.designer-0, .svl-pool-dot.designer-0 { background: #d08a0e; }
.svl-pool-part.designer-1, .svl-pool-dot.designer-1 { background: #7c5bb5; }
.svl-pool-part.designer-2, .svl-pool-dot.designer-2 { background: #128594; }
.svl-pool-part.designer-3, .svl-pool-dot.designer-3 { background: #b9551f; }

/* ==========================================================================================
   Соцсети дизайнера
   ========================================================================================== */
.svl-social-links { display: inline-flex; gap: .25rem; }
.svl-social { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 6px; text-decoration: none;
  color: var(--svl-social); background: color-mix(in oklab, var(--svl-social) 10%, transparent); }
.svl-social:hover { text-decoration: none; color: #fff; background: var(--svl-social); }
.svl-social .icon { width: .95rem; height: .95rem; font-size: .95rem; }
.svl-social-instagram { --svl-social: #d6336c; }
.svl-social-2gis { --svl-social: #2b9a3e; }
.svl-social-site { --svl-social: #2c5fa3; }
.svl-social-other { --svl-social: var(--svl-muted); }
.svl-social-box { padding: 1rem 1.1rem; border-radius: 12px; background: var(--svl-raised); border: 1px solid var(--svl-rule); }
.svl-social-btn { background: var(--svl-sheet); }
.svl-social-btn.svl-social-instagram .icon { color: #d6336c; }
.svl-social-btn.svl-social-2gis .icon { color: #2b9a3e; }

/* ==========================================================================================
   План, бонусы и рейтинг
   ========================================================================================== */
.svl-plan { display: flex; align-items: center; gap: .65rem; }
.svl-plan-bar { flex: 1; height: .4rem; border-radius: 999px; background: var(--svl-rule); overflow: hidden; }
.svl-plan-fill { height: 100%; border-radius: 999px;
  background: color-mix(in oklch, var(--svl-finish) clamp(0%, calc((var(--svl-k, 0%) - 50%) * 2), 100%), color-mix(in oklab, var(--svl-mid) clamp(0%, calc(var(--svl-k, 0%) * 2), 100%), var(--svl-start))); }
.svl-plan.is-done .svl-plan-fill { background: var(--svl-finish); }
.svl-plan-value { font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 3.2rem; text-align: right; }
.svl-plan.is-done .svl-plan-value { color: var(--svl-finish); }
.svl-plan-value .icon { width: .9rem; height: .9rem; font-size: .9rem; color: var(--svl-start); margin-right: .15rem; }
.svl-bonus { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem .15rem .4rem; border-radius: 999px; white-space: nowrap;
  background: color-mix(in oklab, var(--svl-b) 9%, transparent); color: var(--svl-b); }
.svl-bonus .icon { width: 1rem; height: 1rem; font-size: 1rem; }
.svl-bonus strong { font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.svl-bonus small { font-size: .7rem; color: color-mix(in oklab, var(--svl-b) 70%, var(--svl-muted)); }
.svl-bonus.is-confirmed { --svl-b: var(--svl-finish); }
.svl-bonus.is-estimated { --svl-b: var(--svl-amber); }
.table .svl-bonus small { display: none; }
.table .svl-bonus { padding-right: .5rem; }
.svl-money { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--svl-amber); }
.svl-money .icon { width: .95rem; height: .95rem; font-size: .95rem; }
.svl-money.is-due { color: var(--svl-finish); }
.svl-money.is-paid { color: var(--svl-muted); font-weight: 500; }
.svl-place { display: inline-flex; align-items: center; justify-content: center; gap: .15rem; min-width: 1.75rem; height: 1.4rem; padding: 0 .4rem;
  border-radius: 999px; font-weight: 600; font-size: .75rem; background: var(--svl-raised); color: var(--svl-muted); border: 1px solid var(--svl-rule); }
.svl-place .icon { width: .8rem; height: .8rem; font-size: .8rem; }
.svl-place-1 { background: #fff6cc; border-color: #f3dd7a; color: #7a5a00; }
.svl-place-2 { background: #f1f2f4; border-color: #dcdfe3; color: #4b5057; }
.svl-place-3 { background: #fbeadf; border-color: #efc7a9; color: #7a3d14; }
.svl-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.page-body .svl-podium-card { box-shadow: inset 0 2px 0 var(--svl-medal); }
.svl-podium-1 { --svl-medal: #e0b400; }
.svl-podium-2 { --svl-medal: #adb5bd; }
.svl-podium-3 { --svl-medal: #d9864f; }
.svl-podium-medal { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-size: 1.15rem;
  background: color-mix(in oklab, var(--svl-medal) 16%, transparent); color: color-mix(in oklab, var(--svl-medal) 75%, #000); }
.svl-podium-percent { font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ==========================================================================================
   Финансы: очереди по этапам оплаты, цвет — точка на пути оранжевый → зелёный, долги — красные
   ========================================================================================== */
.svl-queue { --svl-c: color-mix(in oklch, var(--svl-finish) clamp(0%, calc((var(--svl-k, 0%) - 50%) * 2), 100%), color-mix(in oklab, var(--svl-mid) clamp(0%, calc(var(--svl-k, 0%) * 2), 100%), var(--svl-start))); }
.svl-queue.is-alert { --svl-c: var(--svl-alert); }
.page-body .svl-queue { box-shadow: inset 0 2px 0 var(--svl-c); }
.svl-queue-step { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  font-size: .7rem; font-weight: 600; line-height: 1; color: #fff; background: var(--svl-c); }
.svl-queue-step .ti { font-size: .8rem; }
.svl-queue-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.35rem; padding: 0 .45rem;
  border-radius: 999px; font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--svl-muted); background: var(--svl-raised); border: 1px solid var(--svl-rule); }
.svl-queue.has-items .svl-queue-count { color: color-mix(in oklab, var(--svl-c) 80%, var(--svl-ink)); background: color-mix(in oklab, var(--svl-c) 12%, transparent);
  border-color: color-mix(in oklab, var(--svl-c) 30%, transparent); }
.svl-queue.is-mine .svl-queue-count { color: #fff; background: var(--svl-c); border-color: var(--svl-c); }
.svl-queue-empty { display: flex; align-items: center; gap: .4rem; color: var(--svl-muted); }
.svl-queue-empty .icon { width: 1rem; height: 1rem; font-size: 1rem; color: var(--svl-finish); }
.svl-queue .list-group-item-action { box-shadow: inset 2px 0 0 transparent; transition: box-shadow .12s ease, background-color .12s ease; }
.svl-queue .list-group-item-action:hover { box-shadow: inset 2px 0 0 var(--svl-c); }
.svl-money.is-debt { color: var(--svl-alert); }

/* Сворачивание карточек: весь заголовок — кнопка, справа стрелка с подписью «Свернуть / Развернуть». */
.svl-fold-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-bottom: .75rem; }
.svl-fold-bar > .text-secondary { margin-right: auto; }
.svl-fold-head { cursor: pointer; user-select: none; transition: background-color .12s ease; }
.svl-fold-head:hover { background: var(--svl-raised) !important; }
.svl-fold-toggle { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border: 1px solid var(--svl-rule); border-radius: 6px;
  background: var(--svl-sheet); color: var(--svl-muted); font-size: .75rem; font-weight: 500; line-height: 1.2; }
.svl-fold-toggle .ti { font-size: .9rem; transition: transform .2s ease; }
.svl-fold-head:hover .svl-fold-toggle { color: var(--svl-ink); border-color: var(--svl-control); }
.svl-fold-toggle:focus-visible { outline: 2px solid var(--tblr-primary); outline-offset: 2px; }
.is-folded .svl-fold-toggle .ti { transform: rotate(180deg); }
.page-body .card.is-folded > .card-header { border-bottom: 0; border-radius: 12px; }
@media (max-width: 575.98px) { .svl-fold-label { display: none; } }

/* ==========================================================================================
   Состав партии по строкам
   ========================================================================================== */
.svl-items { padding: 1rem 1.1rem; border-radius: 12px; background: var(--svl-raised); border: 1px solid var(--svl-rule); }
.svl-items-head, .svl-item-row { display: grid; grid-template-columns: minmax(10rem, 1.3fr) minmax(8rem, 1.4fr) 6rem 5.5rem 2rem; gap: .5rem; align-items: start; }
.svl-items-head { font-size: .75rem; font-weight: 500; color: var(--svl-muted); padding-bottom: .35rem; }
.svl-item-row { margin-bottom: .5rem; }
.svl-item-row[hidden] { display: none; }
.svl-item-row .form-control, .svl-item-row .form-select { background-color: var(--svl-sheet); }
.svl-items-preview { flex: 1; min-width: 12rem; }
.svl-batch-items { list-style: none; margin: 0; padding: 0; }
.svl-batch-items li + li { margin-top: .1rem; }
@media (max-width: 767.98px) {
  .svl-items-head { display: none; }
  .svl-item-row { grid-template-columns: 1fr 6rem 2rem; padding-bottom: .5rem; border-bottom: 1px solid var(--svl-rule); }
  .svl-item-row > div:nth-child(1) { grid-column: 1 / -1; }
  .svl-item-row > div:nth-child(2) { grid-column: 1 / -1; }
}

/* ==========================================================================================
   Подсказки к разделам и блокам: значок «?» и всплывающее окно
   ========================================================================================== */
.svl-title-row { display: flex; align-items: center; gap: .4rem; }
.svl-help { display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--svl-control); cursor: help; font-size: 1.05rem; line-height: 1; transition: color .12s ease; }
.svl-help:hover, .svl-help:focus-visible, .svl-help[aria-describedby] { color: var(--tblr-primary); }
.card-title .svl-help { width: 1.1rem; height: 1.1rem; font-size: .95rem; margin-left: -.15rem; }
.svl-help-popover { --tblr-popover-max-width: 21rem; --tblr-popover-border-color: var(--svl-line); --tblr-popover-header-bg: transparent;
  --tblr-popover-body-padding-x: 1rem; --tblr-popover-body-padding-y: .75rem; border-radius: 12px; box-shadow: 0 12px 32px rgba(28, 25, 23, .1);
  font-size: .82rem; line-height: 1.45; }
.svl-help-popover .popover-header { font-size: .85rem; font-weight: 600; border-bottom: 1px solid var(--svl-rule); padding: .65rem 1rem .5rem; }
.svl-help-popover p { margin: 0 0 .6rem; color: var(--svl-ink); }
.svl-help-row { display: grid; grid-template-columns: 6.25rem 1fr; gap: .5rem; padding-top: .35rem; border-top: 1px solid var(--svl-rule); margin-top: .35rem; color: var(--svl-ink); }
.svl-help-row span { color: var(--svl-muted); }

/* ==========================================================================================
   Движение: только отклик, без «появления» карточек
   ========================================================================================== */
.page-body .progress-bar { transition: width .9s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .page-body .card, .page-body .progress-bar, .svl-more .icon { transition: none; }
}
.svl-wrap .badge { white-space: normal; text-align: left; line-height: 1.3; }

/* Калькулятор: разбор цены по шагам и справка по видам шагов. */
.svl-calc-steps { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .15rem; font-size: .82rem; counter-reset: calc; }
.svl-calc-steps li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem .5rem; border-radius: 6px; counter-increment: calc; }
.svl-calc-steps li:nth-child(odd) { background: var(--tblr-bg-surface-secondary); }
.svl-calc-steps li span:first-child::before { content: counter(calc) ". "; color: var(--tblr-secondary); }
.svl-calc-steps li:last-child { font-weight: 600; }
/* Калькулятор цен: строка «бренд · цена · кол-во · результат». */
.svl-calc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 11rem 5rem 10.5rem 2.25rem;
  grid-template-areas: "rule price qty out del"; gap: .5rem; align-items: center; }
.svl-calc-grid .svl-calc-rule { grid-area: rule; min-width: 0; }
.svl-calc-grid .svl-calc-price { grid-area: price; }
.svl-calc-grid .svl-calc-qty { grid-area: qty; }
.svl-calc-grid .svl-calc-out { grid-area: out; text-align: right; }
.svl-calc-grid .svl-calc-del { grid-area: del; }
.svl-calc-head { padding-bottom: .35rem; }
.svl-calc-row { padding: .65rem 0; border-top: 1px dashed var(--tblr-border-color); }
.svl-calc-row [data-calc-unit] { font-size: 1.05rem; }
.svl-calc-discount { width: 11rem; }
@media (max-width: 767.98px) {
  .svl-calc-head { display: none; }
  .svl-calc-grid { grid-template-columns: minmax(0, 1fr) 5rem 2.25rem;
    grid-template-areas: "rule rule del" "price qty qty" "out out out"; }
  .svl-calc-grid .svl-calc-out { text-align: left; }
}
.svl-step-help { margin: 0; display: grid; gap: .5rem; }
.svl-step-help dt { font-weight: 600; }
.svl-step-help dd { margin: 0; color: var(--tblr-secondary); }
details > summary { cursor: pointer; }

/* Аватарки: фото обрезается по кругу/квадрату Tabler, без фото — инициалы. */
.svl-avatar { background-size: cover; background-position: center; flex-shrink: 0; }

/* Чат сотрудников: список диалогов слева, переписка справа; высота — по окну. */
.svl-chat { height: calc(100vh - 15rem); min-height: 28rem; overflow: hidden; }
.svl-chat-side { flex-direction: column; min-height: 0; height: 100%; }
.svl-chat-list { overflow-y: auto; flex: 1 1 auto; }
.svl-chat-list .list-group-item.active { background: var(--tblr-primary-lt); border-color: transparent; color: inherit; }
.svl-chat-main { min-height: 0; height: 100%; }
.svl-chat-log { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .2rem; background: var(--tblr-bg-surface-secondary); }
.svl-chat-day { align-self: center; font-size: .75rem; color: var(--tblr-secondary); background: var(--tblr-bg-surface);
  border-radius: 1rem; padding: .1rem .7rem; margin: .75rem 0 .35rem; }
.svl-chat-empty { margin: auto; }
.svl-chat-msg { display: flex; align-items: flex-end; gap: .5rem; max-width: min(42rem, 85%); margin-top: .4rem; }
.svl-chat-msg.is-cont { margin-top: 0; }
.svl-chat-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.svl-chat-spacer { width: 2rem; flex-shrink: 0; }
.svl-chat-bubble { background: var(--tblr-bg-surface); border: 1px solid var(--tblr-border-color); border-radius: .9rem .9rem .9rem .25rem;
  padding: .4rem .65rem .3rem; min-width: 0; position: relative; }
.is-mine .svl-chat-bubble { background: var(--tblr-primary-lt); border-color: transparent; border-radius: .9rem .9rem .25rem .9rem; }
.svl-chat-author { font-size: .75rem; font-weight: 600; color: var(--tblr-primary); margin-bottom: .1rem; }
.svl-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.svl-chat-time { display: block; text-align: right; font-size: .68rem; color: var(--tblr-secondary); margin-top: .1rem; }
.svl-chat-file { display: inline-flex; align-items: center; margin-bottom: .2rem; overflow-wrap: anywhere; }
.svl-chat-file img { max-width: 100%; max-height: 16rem; border-radius: .5rem; display: block; }
.svl-chat-compose textarea { resize: none; max-height: 180px; }
@media (max-width: 991.98px) { .svl-chat { height: calc(100vh - 12rem); } }

/* Плавающая кнопка чата справа внизу. */
.svl-chat-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1030; width: 3.5rem; height: 3.5rem;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tblr-primary); color: #fff; font-size: 1.6rem; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18); transition: transform .15s ease, box-shadow .15s ease; }
.svl-chat-fab:hover, .svl-chat-fab:focus-visible { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .24); }
.svl-chat-fab-count { position: absolute; top: -.2rem; right: -.2rem; min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem;
  border-radius: 1rem; background: #fff; color: var(--tblr-primary); border: 2px solid var(--tblr-primary);
  font-size: .72rem; font-weight: 700; line-height: 1.05rem; text-align: center; }
.svl-chat-fab-count[hidden] { display: none; }
@media (max-width: 767.98px) { .svl-chat-fab { right: 1rem; bottom: 1rem; width: 3.1rem; height: 3.1rem; font-size: 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .svl-chat-fab { transition: none; } }

/* Рейтинг 2.0: карточка на менеджера, внутри — блоки «Продажи», «План», «Конверсия», «Из чего бонус». */
.svl-r2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; }
.svl-r2-card { border-top: 3px solid var(--svl-medal, var(--tblr-border-color)); }
.svl-r2-total { font-size: 1.35rem; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.svl-r2-block { padding: .75rem 0; border-top: 1px dashed var(--tblr-border-color); }
.svl-r2-label { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--tblr-secondary); margin-bottom: .45rem; }
.svl-r2-label .icon { width: 1rem; height: 1rem; }
.svl-r2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem .75rem; }
.svl-r2-stats div { min-width: 0; }
.svl-r2-stats span { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svl-r2-stats small { display: block; color: var(--tblr-secondary); font-size: .72rem; line-height: 1.2; }
.svl-r2-coef { margin-left: auto; font-size: .75rem; font-weight: 600; padding: .05rem .45rem; border-radius: 1rem;
  background: var(--tblr-bg-surface-secondary); color: var(--tblr-body-color); }
.svl-r2-coef.is-up { background: var(--tblr-green-lt); color: var(--tblr-green); }
.svl-r2-coef.is-down { background: var(--tblr-red-lt); color: var(--tblr-red); }
.svl-r2-sum dl { margin: 0; display: grid; gap: .2rem; font-size: .85rem; }
.svl-r2-sum dl div { display: flex; justify-content: space-between; gap: 1rem; }
.svl-r2-sum dt { font-weight: 400; color: var(--tblr-secondary); }
.svl-r2-sum dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.svl-r2-sum .is-total { border-top: 1px solid var(--tblr-border-color); padding-top: .3rem; margin-top: .15rem; font-weight: 600; }
.svl-r2-sum .is-total dt { color: var(--tblr-body-color); font-weight: 600; }
.svl-r2-how > summary { list-style: none; display: flex; align-items: center; cursor: pointer; }
.svl-r2-how > summary::-webkit-details-marker { display: none; }
.svl-r2-how > summary::after { content: "\ea5f"; font-family: "tabler-icons"; margin-left: .5rem; color: var(--tblr-secondary); transition: transform .15s; }
.svl-r2-how[open] > summary::after { transform: rotate(180deg); }

/* Быстрый доступ на главной: одна строка компактных кнопок — главные действия и ссылки компании. */
.svl-quick { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.svl-quick-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; border-radius: 2rem;
  background: var(--svl-tone-bg); color: var(--tblr-body-color); font-size: .85rem; font-weight: 500; text-decoration: none;
  border: 1px solid transparent; transition: border-color .12s ease; white-space: nowrap; }
.svl-quick-chip i { color: var(--svl-tone); font-size: 1rem; }
.svl-quick-chip:hover, .svl-quick-chip:focus-visible { color: var(--tblr-body-color); text-decoration: none; border-color: var(--svl-tone); }
.svl-quick-chip.is-link { background: var(--tblr-bg-surface); border-color: var(--tblr-border-color); }
.svl-quick-sep { width: 1px; height: 1.4rem; background: var(--tblr-border-color); margin: 0 .2rem; }
.svl-quick-edit { color: var(--tblr-secondary); padding: .25rem; font-size: 1rem; }
.svl-quick-edit:hover { color: var(--tblr-primary); }
.svl-tone-red { --svl-tone: #BD0F10; --svl-tone-bg: rgba(189, 15, 16, .07); }
.svl-tone-blue { --svl-tone: #2f6fdf; --svl-tone-bg: rgba(47, 111, 223, .08); }
.svl-tone-green { --svl-tone: #2f9e44; --svl-tone-bg: rgba(47, 158, 68, .08); }
.svl-tone-orange { --svl-tone: #e8590c; --svl-tone-bg: rgba(232, 89, 12, .08); }
.svl-tone-purple { --svl-tone: #7b4bd1; --svl-tone-bg: rgba(123, 75, 209, .08); }
.svl-tone-teal { --svl-tone: #0c8599; --svl-tone-bg: rgba(12, 133, 153, .08); }
.avatar.svl-tone-red, .avatar.svl-tone-blue, .avatar.svl-tone-green, .avatar.svl-tone-orange, .avatar.svl-tone-purple,
.avatar.svl-tone-teal { background: var(--svl-tone); color: #fff; }
@media (prefers-reduced-motion: reduce) { .svl-quick-chip { transition: none; } }


/* ==========================================================================================
   Слой «свечение»: стекло, мягкое сияние бренда и неон на акцентах.
   Включён по умолчанию; выключается в профиле (класс svl-flat на <html>) — тогда остаётся «рамка и лист».
   Свет только на акцентах (главная кнопка, активный пункт меню, плитки, чат, медали), текст и таблицы — без эффектов.
   ========================================================================================== */
:root, [data-bs-theme=light] {
  --svl-glow-red: rgba(189, 15, 16, .32);
  --svl-glow-amber: rgba(246, 202, 0, .28);
  --svl-aura-a: rgba(189, 15, 16, .20);
  --svl-aura-b: rgba(246, 202, 0, .24);
  --svl-aura-c: rgba(47, 111, 223, .12);
  --svl-glass: rgba(255, 255, 255, .58);
  --svl-glass-line: rgba(233, 229, 223, .9);
}
[data-bs-theme=dark] {
  --svl-glow-red: rgba(255, 46, 48, .55);
  --svl-glow-amber: rgba(255, 210, 40, .45);
  --svl-aura-a: rgba(255, 40, 42, .16);
  --svl-aura-b: rgba(255, 190, 30, .10);
  --svl-aura-c: rgba(80, 140, 255, .10);
  --svl-glass: rgba(22, 22, 23, .66);
  --svl-glass-line: rgba(255, 255, 255, .07);
}

/* Сияние за листом: три размытых пятна цвета бренда на фоне рамки. */
html:not(.svl-flat) body { background:
  radial-gradient(38rem 26rem at 8% -6%, var(--svl-aura-a), transparent 70%),
  radial-gradient(34rem 24rem at 96% 4%, var(--svl-aura-b), transparent 70%),
  radial-gradient(40rem 30rem at 60% 110%, var(--svl-aura-c), transparent 70%),
  var(--svl-frame); background-attachment: fixed; }

/* Лист — матовое стекло: сквозь края слегка просвечивает сияние. */
html:not(.svl-flat) .page-wrapper { background: var(--svl-glass); border-color: var(--svl-glass-line);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 20px 60px -30px rgba(28, 25, 23, .18); }
[data-bs-theme=dark]:not(.svl-flat) .page-wrapper { box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 30px 80px -30px rgba(0, 0, 0, .7); }
html:not(.svl-flat) .page-body .card { background: color-mix(in oklab, var(--svl-sheet) 80%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .15s ease, box-shadow .2s ease; }
html:not(.svl-flat) .page-body .card:hover { box-shadow: 0 10px 30px -18px rgba(28, 25, 23, .25); }
[data-bs-theme=dark]:not(.svl-flat) .page-body .card:hover { border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .03), 0 14px 40px -20px rgba(0, 0, 0, .8); }

/* Активный пункт меню — неоновая черта. */
html:not(.svl-flat) .page > .navbar-expand-md .navbar .nav-item.active > .nav-link::after {
  box-shadow: 0 0 10px var(--svl-glow-red), 0 0 2px var(--svl-glow-red); }
html:not(.svl-flat) .svl-brand-os { text-shadow: 0 0 12px var(--svl-glow-amber); }

/* Главная кнопка: красное свечение на наведении, лёгкий блик сверху. */
html:not(.svl-flat) .btn-primary { background-image: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0));
  transition: box-shadow .2s ease, transform .12s ease, background-color .15s ease; }
html:not(.svl-flat) .btn-primary:hover, html:not(.svl-flat) .btn-primary:focus-visible {
  box-shadow: 0 0 0 1px rgba(189, 15, 16, .4), 0 6px 22px -4px var(--svl-glow-red); }
[data-bs-theme=dark]:not(.svl-flat) .btn-primary { box-shadow: 0 0 18px -6px var(--svl-glow-red); }

/* Поля ввода: мягкий светящийся фокус вместо плоского кольца. */
html:not(.svl-flat) .form-control:focus, html:not(.svl-flat) .form-select:focus, html:not(.svl-flat) .ts-wrapper.focus .ts-control {
  border-color: rgba(189, 15, 16, .55); box-shadow: 0 0 0 3px rgba(189, 15, 16, .10), 0 0 16px -4px var(--svl-glow-red); }

/* Быстрый доступ: плашки светятся своим цветом. */
html:not(.svl-flat) .svl-quick-chip { transition: border-color .15s ease, box-shadow .2s ease, transform .12s ease; }
html:not(.svl-flat) .svl-quick-chip:hover, html:not(.svl-flat) .svl-quick-chip:focus-visible {
  transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--svl-tone) 35%, transparent),
  0 6px 20px -6px color-mix(in oklab, var(--svl-tone) 55%, transparent); }
[data-bs-theme=dark]:not(.svl-flat) .svl-quick-chip { background: color-mix(in oklab, var(--svl-tone) 16%, transparent); }
[data-bs-theme=dark]:not(.svl-flat) .svl-quick-chip i { filter: drop-shadow(0 0 6px color-mix(in oklab, var(--svl-tone) 80%, transparent)); }

/* Медали подиума и карточки рейтинга: тёплое свечение первого места. */
html:not(.svl-flat) .svl-podium-1, html:not(.svl-flat) .svl-r2-card.svl-podium-1 {
  box-shadow: inset 0 2px 0 var(--svl-medal), 0 12px 36px -20px rgba(224, 180, 0, .7) !important; }
html:not(.svl-flat) .svl-r2-total { text-shadow: 0 0 18px color-mix(in oklab, var(--svl-medal, transparent) 45%, transparent); }
html:not(.svl-flat) .svl-r2-coef.is-up { box-shadow: 0 0 10px -2px rgba(47, 158, 68, .55); }
html:not(.svl-flat) .svl-r2-coef.is-down { box-shadow: 0 0 10px -2px rgba(201, 42, 42, .55); }
html:not(.svl-flat) .progress-bar { box-shadow: 0 0 10px -2px currentColor; }

/* Выпадающие меню, модальные окна, всплывающие подсказки — стекло. */
html:not(.svl-flat) .dropdown-menu, html:not(.svl-flat) .modal-content {
  background: color-mix(in oklab, var(--svl-sheet) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
html:not(.svl-flat) .modal-backdrop.show { opacity: .35; }
html:not(.svl-flat) .modal-backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* Плавающая кнопка чата: неоновый ореол, при непрочитанных — медленный пульс. */
html:not(.svl-flat) .svl-chat-fab { box-shadow: 0 6px 20px rgba(0, 0, 0, .18), 0 0 24px -4px var(--svl-glow-red); }
html:not(.svl-flat) .svl-chat-fab:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .22), 0 0 34px 0 var(--svl-glow-red); }
html:not(.svl-flat) .svl-chat-fab:has(.svl-chat-fab-count:not([hidden]))::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 var(--svl-glow-red);
  animation: svl-fab-pulse 2.4s ease-out infinite; }
@keyframes svl-fab-pulse { 0% { box-shadow: 0 0 0 0 var(--svl-glow-red); } 70% { box-shadow: 0 0 0 14px rgba(189, 15, 16, 0); } 100% { box-shadow: 0 0 0 0 rgba(189, 15, 16, 0); } }

/* Чат: свои сообщения — с лёгким сиянием, чужие — стекло. */
html:not(.svl-flat) .is-mine .svl-chat-bubble { background: linear-gradient(135deg, rgba(189, 15, 16, .14), rgba(232, 89, 12, .10));
  box-shadow: 0 4px 16px -8px var(--svl-glow-red); }
html:not(.svl-flat) .svl-chat-bubble { background: color-mix(in oklab, var(--svl-sheet) 85%, transparent); }
html:not(.svl-flat) .svl-chat-log { background: transparent; }

/* Счётчики и точки — светятся. */
html:not(.svl-flat) .badge.bg-red, html:not(.svl-flat) .svl-chat-fab-count { box-shadow: 0 0 10px -1px var(--svl-glow-red); }

/* Тёмная тема: текст значков разделов чуть светится — «неон» без потери читаемости. */
[data-bs-theme=dark]:not(.svl-flat) .svl-ico { filter: drop-shadow(0 0 6px currentColor); }
[data-bs-theme=dark]:not(.svl-flat) .page-title { text-shadow: 0 0 24px rgba(255, 255, 255, .08); }

@media (prefers-reduced-motion: reduce) {
  html:not(.svl-flat) .svl-chat-fab::before { animation: none !important; }
  html:not(.svl-flat) .svl-quick-chip:hover, html:not(.svl-flat) .btn-primary { transform: none; }
}
/* Печать — без эффектов. */
@media print { body { background: #fff !important; } .page-wrapper { backdrop-filter: none !important; box-shadow: none !important; } }

/* Группа в таблице справочника (бренды по категориям) */
.svl-group-row th { background: var(--svl-frame); color: var(--svl-ink); font-size: .8125rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; padding-top: .55rem; padding-bottom: .55rem; }