dsh-desktop-kit 0.0.0-stage → 1.0.0

package/skills/wow-design/assets/kit/assets/css/components.css

@@ -0,0 +1,1001 @@
+/* ==========================================================================
+   AURORA · COMPONENTS · v1.0 · 2026-11-04
+   Полный набор компонентов на дизайн-токенах. Без внешних зависимостей.
+   Подключать после tokens.css / base.css / fonts.css.
+
+   КАТАЛОГ
+   01. Иконки                          10. Модальное окно
+   02. Кнопки                          11. Меню, dropdown, tooltip
+   03. Поля и формы                    12. Навигация: хлебные крошки, пагинация, segmented
+   04. Бейджи, чипы, статусы           13. Аватары, progress, skeleton, empty state, timeline
+   05. Карточки, панели, frame         14. KPI-карточка и sparkline
+   06. Таблицы                         15. Каркас приложения: sidebar, topbar
+   07. Tabs                            16. Hero-паттерны и proof-строка
+   08. Алерты                          17. Списки и служебные утилиты
+   09. Toast                           18. Адаптив и reduced-motion
+   ========================================================================== */
+
+/* ==========================================================================
+   01. ИКОНКИ — inline SVG, stroke 1.6, 20/24px. Цвет наследуется.
+   <svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
+   ========================================================================== */
+.icon{
+  width:20px;height:20px;flex:none;
+  fill:none;stroke:currentColor;stroke-width:1.6;
+  stroke-linecap:round;stroke-linejoin:round;
+  vertical-align:middle;
+}
+.icon--xs{width:14px;height:14px}
+.icon--sm{width:16px;height:16px}
+.icon--lg{width:24px;height:24px}
+.icon--xl{width:32px;height:32px}
+.icon--fill{fill:currentColor;stroke:none}
+
+/* ==========================================================================
+   02. КНОПКИ
+   .btn .btn--primary|secondary|ghost|danger + .btn--sm|lg + .btn--icon + .btn--block
+   Состояния: hover / focus-visible / active / disabled / .is-loading
+   ========================================================================== */
+.btn{
+  --btn-bg:transparent; --btn-ink:var(--ink); --btn-bd:transparent;
+  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
+  min-height:var(--control-h);padding:0 var(--sp-5);
+  border:1px solid var(--btn-bd);border-radius:var(--radius-control);
+  background:var(--btn-bg);color:var(--btn-ink);
+  font-family:var(--font-body);font-size:var(--text-sm);font-weight:600;line-height:1;
+  letter-spacing:.004em;white-space:nowrap;text-decoration:none;cursor:pointer;
+  position:relative;isolation:isolate;
+  transition:
+    background-color var(--dur) var(--ease),
+    border-color var(--dur) var(--ease),
+    color var(--dur) var(--ease),
+    box-shadow var(--dur) var(--ease),
+    transform var(--dur-fast) var(--ease);
+}
+.btn:hover{text-decoration:none}
+.btn:active{transform:translateY(1px)}
+.btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.btn[disabled],.btn.is-disabled{cursor:not-allowed;opacity:.45;pointer-events:none;transform:none}
+.btn .icon{transition:transform var(--dur) var(--ease)}
+.btn:hover .icon--arrow{transform:translateX(2px)}
+
+/* primary */
+.btn--primary{--btn-bg:var(--accent);--btn-ink:var(--accent-contrast);--btn-bd:var(--accent)}
+.btn--primary:hover{--btn-bg:var(--accent-hover);--btn-bd:var(--accent-hover)}
+.btn--primary:active{--btn-bg:var(--accent-press);--btn-bd:var(--accent-press)}
+/* secondary */
+.btn--secondary{--btn-bg:var(--surface);--btn-ink:var(--ink);--btn-bd:var(--line-strong)}
+.btn--secondary:hover{--btn-bg:var(--surface-2);--btn-bd:var(--ink-2)}
+.btn--secondary:active{--btn-bg:var(--bg-alt)}
+/* ghost */
+.btn--ghost{--btn-bg:transparent;--btn-ink:var(--ink-2);--btn-bd:transparent}
+.btn--ghost:hover{--btn-bg:color-mix(in oklab,var(--ink) 6%,transparent);--btn-ink:var(--ink)}
+.btn--ghost:active{--btn-bg:color-mix(in oklab,var(--ink) 10%,transparent)}
+/* danger */
+.btn--danger{--btn-bg:var(--danger);--btn-ink:var(--bg);--btn-bd:var(--danger)}
+.btn--danger:hover{--btn-bg:color-mix(in oklab,var(--danger) 86%,var(--ink))}
+.btn--danger:active{--btn-bg:color-mix(in oklab,var(--danger) 76%,var(--ink))}
+/* размеры */
+.btn--sm{min-height:var(--control-h-sm);padding:0 var(--sp-3);font-size:var(--text-xs);gap:6px}
+.btn--lg{min-height:var(--control-h-lg);padding:0 var(--sp-7);font-size:var(--text-md)}
+.btn--block{width:100%}
+.btn--icon{width:var(--control-h);padding:0;aspect-ratio:1/1}
+.btn--icon.btn--sm{width:var(--control-h-sm)}
+.btn--icon.btn--lg{width:var(--control-h-lg)}
+/* loading: текст скрывается, остаётся спиннер */
+.btn.is-loading{pointer-events:none;color:transparent}
+.btn.is-loading .icon{visibility:hidden}
+.btn.is-loading::after{
+  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
+  border:2px solid var(--accent-contrast);border-right-color:transparent;
+  animation:aurora-spin .7s linear infinite;
+}
+.btn--secondary.is-loading::after,
+.btn--ghost.is-loading::after{border-color:var(--accent);border-right-color:transparent}
+.btn--danger.is-loading::after{border-color:var(--bg);border-right-color:transparent}
+@keyframes aurora-spin{to{transform:rotate(360deg)}}
+
+/* Иконочная кнопка: цель 40×40, иконка не меняет размер */
+.icon-btn{
+  display:inline-flex;align-items:center;justify-content:center;flex:none;
+  width:40px;height:40px;padding:0;position:relative;
+  border:1px solid transparent;border-radius:var(--radius-control);
+  background:transparent;color:var(--ink-2);cursor:pointer;
+  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
+}
+.icon-btn:hover{background:var(--bg-alt);color:var(--ink)}
+.icon-btn:active{background:color-mix(in oklab,var(--ink) 8%,var(--bg-alt))}
+.icon-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.icon-btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
+.icon-btn--outline{border-color:var(--line-strong);background:var(--surface)}
+.icon-btn--outline:hover{border-color:var(--ink-2);background:var(--surface-2)}
+.icon-btn--sm{width:32px;height:32px}
+.icon-btn--dark{color:inherit}
+
+/* Текстовая ссылка-кнопка с подчёркиванием-акцентом */
+.link{
+  display:inline-flex;align-items:center;gap:6px;
+  color:var(--ink);font-weight:500;text-decoration:none;
+  background-image:linear-gradient(var(--accent),var(--accent));
+  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
+  padding-bottom:2px;transition:background-size var(--dur) var(--ease),color var(--dur) var(--ease);
+}
+.link:hover{color:var(--accent-ink);background-size:100% 1px}
+.link .icon{transition:transform var(--dur) var(--ease)}
+.link:hover .icon{transform:translateX(2px)}
+
+/* ==========================================================================
+   03. ПОЛЯ И ФОРМЫ
+   .field .label .input .select .textarea .field__hint .field__error
+   .check / .switch / .radio-group / .form-grid / .input-group
+   ========================================================================== */
+.field{display:flex;flex-direction:column;gap:7px;min-width:0}
+.label{
+  display:flex;align-items:baseline;gap:6px;
+  font-size:var(--text-sm);font-weight:600;color:var(--ink);line-height:1.4;
+}
+.label__hint{font-size:var(--text-xs);font-weight:400;color:var(--muted);margin-left:auto}
+.input,.select,.textarea{
+  width:100%;min-width:0;height:var(--control-h);
+  padding:0 var(--sp-4);
+  background:var(--surface);color:var(--ink);
+  border:1px solid var(--line-input);border-radius:var(--radius-control);
+  font-family:var(--font-body);font-size:var(--text-sm);line-height:1.4;
+  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background-color var(--dur) var(--ease);
+  appearance:none;
+}
+.input::placeholder,.textarea::placeholder{color:var(--muted)}
+.input:hover:not(:disabled):not(:focus),
+.select:hover:not(:disabled):not(:focus),
+.textarea:hover:not(:disabled):not(:focus){border-color:color-mix(in oklab,var(--ink) 48%,var(--line-input))}
+.input:focus,.select:focus,.textarea:focus{
+  outline:none;border-color:var(--accent);
+  box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 18%,transparent);
+}
+.input:disabled,.select:disabled,.textarea:disabled{
+  background:var(--bg-alt);color:var(--muted);cursor:not-allowed;border-color:var(--line);
+}
+.textarea{height:auto;min-height:112px;padding:var(--sp-3) var(--sp-4);line-height:var(--lh-normal);resize:vertical}
+/* select с собственной стрелкой (не зависит от ОС) */
+.select-wrap{position:relative;display:block}
+.select-wrap::after{
+  content:"";position:absolute;right:16px;top:50%;
+  width:7px;height:7px;margin-top:-5px;
+  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);
+  transform:rotate(45deg);pointer-events:none;
+}
+.select{padding-right:var(--sp-10);cursor:pointer}
+.select:disabled+.select-wrap::after{opacity:.4}
+.field__hint{font-size:var(--text-xs);color:var(--muted);line-height:1.5}
+.field__error{
+  display:flex;align-items:flex-start;gap:6px;
+  font-size:var(--text-xs);font-weight:500;color:var(--danger);line-height:1.5;
+}
+.field__error .icon{margin-top:1px}
+.field--invalid .input,.field--invalid .select,.field--invalid .textarea{border-color:var(--danger)}
+.field--invalid .input:focus,.field--invalid .select:focus,.field--invalid .textarea:focus{
+  box-shadow:0 0 0 3px color-mix(in oklab,var(--danger) 18%,transparent);
+}
+.field--valid .input,.field--valid .select{border-color:var(--success)}
+
+/* Группа с иконкой слева и/или kbd справа */
+.input-group{position:relative;display:block}
+.input-group .input{padding-left:var(--sp-10)}
+.input-group>.icon{
+  position:absolute;left:14px;top:50%;transform:translateY(-50%);
+  color:var(--muted);pointer-events:none;
+}
+.input-group--trailing .input{padding-right:var(--sp-12)}
+.input-group__trailing{
+  position:absolute;right:10px;top:50%;transform:translateY(-50%);
+  display:inline-flex;align-items:center;gap:4px;color:var(--muted);
+}
+.input-group__trailing .icon-btn{width:28px;height:28px}
+
+/* Чекбоксы и радио — кастомные, с фокус-кольцом */
+.check{
+  display:inline-flex;align-items:flex-start;gap:var(--sp-3);
+  font-size:var(--text-sm);color:var(--ink-2);line-height:1.55;
+  cursor:pointer;position:relative;
+}
+.check input{
+  appearance:none;width:18px;height:18px;flex:none;margin:2px 0 0;
+  background:var(--surface);border:1.5px solid var(--line-input);
+  border-radius:4px;display:grid;place-content:center;
+  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
+  cursor:pointer;
+}
+.check input::before{
+  content:"";width:5px;height:9px;margin-top:-2px;
+  border-right:2px solid var(--accent-contrast);border-bottom:2px solid var(--accent-contrast);
+  transform:rotate(45deg) scale(0);transition:transform var(--dur) var(--ease);
+}
+.check input:hover{border-color:var(--ink-2)}
+.check input:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.check input:checked{background:var(--accent);border-color:var(--accent)}
+.check input:checked::before{transform:rotate(45deg) scale(1)}
+.check input:disabled{background:var(--bg-alt);border-color:var(--line);cursor:not-allowed}
+.check input:disabled~*{color:var(--muted)}
+.check--radio input{border-radius:50%}
+.check--radio input::before{
+  width:8px;height:8px;margin:0;border:0;border-radius:50%;
+  background:var(--accent-contrast);transform:scale(0);
+}
+.check--radio input:checked::before{transform:scale(1)}
+.check__text{display:flex;flex-direction:column;gap:2px}
+.check__meta{font-size:var(--text-xs);color:var(--muted)}
+
+/* Переключатель */
+.switch{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--text-sm);color:var(--ink-2);cursor:pointer;position:relative}
+.switch input{
+  appearance:none;position:relative;flex:none;
+  width:42px;height:24px;border-radius:var(--radius-pill);
+  background:var(--bg-alt);border:1px solid var(--line-input);cursor:pointer;
+  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
+}
+.switch input::after{
+  content:"";position:absolute;left:3px;top:3px;
+  width:16px;height:16px;border-radius:50%;
+  background:var(--muted);box-shadow:var(--shadow-xs);
+  transition:transform var(--dur) var(--ease),background-color var(--dur) var(--ease);
+}
+.switch input:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.switch input:checked{background:var(--accent);border-color:var(--accent)}
+.switch input:checked::after{transform:translateX(18px);background:var(--accent-contrast)}
+.switch input:disabled{opacity:.5;cursor:not-allowed}
+.switch__text{display:flex;flex-direction:column;gap:1px}
+.switch__meta{font-size:var(--text-xs);color:var(--muted)}
+
+/* Раскладки формы */
+.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
+.form-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
+.form-grid .field--full{grid-column:1/-1}
+.check-group{display:flex;flex-direction:column;gap:var(--sp-3)}
+.form-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center}
+.form-actions__note{font-size:var(--text-xs);color:var(--muted);margin-left:auto}
+fieldset{border:0;padding:0;margin:0;min-width:0}
+legend{padding:0}
+
+/* ==========================================================================
+   04. БЕЙДЖИ, ЧИПЫ, СТАТУСЫ
+   ========================================================================== */
+.badge{
+  --badge-dot:currentColor;
+  display:inline-flex;align-items:center;gap:6px;
+  height:23px;padding:0 8px;white-space:nowrap;
+  border:1px solid transparent;border-radius:var(--radius-sm);
+  font-size:var(--text-2xs);font-weight:600;line-height:1;letter-spacing:.02em;
+  font-variant-numeric:tabular-nums;
+}
+.badge .icon{stroke-width:2}
+/* Текст бейджа смешивается с чернилами, чтобы на soft-фоне держаться ≥4.5:1 */
+.badge--neutral{background:var(--bg-alt);color:var(--ink-2);border-color:var(--line)}
+.badge--info{--badge-dot:var(--info);background:var(--info-soft);color:color-mix(in oklab,var(--info) 72%,var(--ink))}
+.badge--success{--badge-dot:var(--success);background:var(--success-soft);color:color-mix(in oklab,var(--success) 72%,var(--ink))}
+.badge--warning{--badge-dot:var(--warning);background:var(--warning-soft);color:color-mix(in oklab,var(--warning) 72%,var(--ink))}
+.badge--danger{--badge-dot:var(--danger);background:var(--danger-soft);color:color-mix(in oklab,var(--danger) 72%,var(--ink))}
+.badge--accent{--badge-dot:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
+.badge--copper{--badge-dot:var(--copper);background:var(--copper-soft);color:color-mix(in oklab,var(--copper) 70%,var(--ink))}
+.badge--outline{background:transparent;border-color:var(--line-strong);color:var(--ink-2)}
+.badge--dot::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--badge-dot)}
+.badge--mono{font-family:var(--font-mono);letter-spacing:0;font-weight:500}
+
+.status{display:inline-flex;align-items:center;gap:7px;font-size:var(--text-xs);font-weight:600;color:var(--ink-2);white-space:nowrap}
+.status::before{
+  content:"";width:6px;height:6px;border-radius:50%;background:var(--muted);
+  box-shadow:0 0 0 3px color-mix(in oklab,var(--muted) 16%,transparent);
+}
+.status--open::before{background:var(--info);box-shadow:0 0 0 3px color-mix(in oklab,var(--info) 16%,transparent)}
+.status--work::before{background:var(--warning);box-shadow:0 0 0 3px color-mix(in oklab,var(--warning) 18%,transparent)}
+.status--done::before{background:var(--success);box-shadow:0 0 0 3px color-mix(in oklab,var(--success) 16%,transparent)}
+.status--late::before{background:var(--danger);box-shadow:0 0 0 3px color-mix(in oklab,var(--danger) 16%,transparent)}
+.status--muted::before{background:var(--faint);box-shadow:none}
+.status--wait::before{background:var(--copper);box-shadow:0 0 0 3px color-mix(in oklab,var(--copper) 18%,transparent)}
+
+/* Фильтры-чипы */
+.chip{
+  display:inline-flex;align-items:center;gap:6px;
+  min-height:32px;padding:0 var(--sp-3);
+  background:var(--surface);color:var(--ink-2);
+  border:1px solid var(--line);border-radius:var(--radius-pill);
+  font-size:var(--text-xs);font-weight:500;line-height:1;
+  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease);
+  cursor:pointer;white-space:nowrap;
+}
+.chip:hover{border-color:var(--line-strong);background:var(--surface-2);color:var(--ink)}
+.chip[aria-pressed="true"],.chip.is-active{
+  background:var(--accent-soft);border-color:transparent;color:var(--accent-ink);font-weight:600;
+}
+.chip__count{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:500}
+.chip[aria-pressed="true"] .chip__count{color:var(--accent-ink);opacity:.75}
+.chip--mono{font-family:var(--font-mono);font-size:var(--text-2xs)}
+
+/* ==========================================================================
+   05. КАРТОЧКИ, ПАНЕЛИ, FRAME (рамки-образцы для витрины)
+   ========================================================================== */
+.card{
+  background:var(--surface);border:1px solid var(--line);
+  border-radius:var(--radius-card);box-shadow:var(--shadow-xs);
+  min-width:0;
+}
+.card--pad{padding:var(--sp-6)}
+.card--quiet{background:var(--surface-2);box-shadow:none}
+.card--flush-top{border-top:0;border-radius:0 0 var(--radius-card) var(--radius-card)}
+.card--interactive{
+  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
+}
+.card--interactive:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:var(--shadow-md)}
+.card--accent{border-color:color-mix(in oklab,var(--accent) 35%,var(--line))}
+.card__head{
+  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
+  padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--line);
+}
+.card__head--plain{padding-bottom:0;border-bottom:0}
+.card__title{font-family:var(--font-body);font-size:var(--text-lg);font-weight:600;line-height:1.35;letter-spacing:-.01em}
+.card__sub{font-size:var(--text-xs);color:var(--muted);margin-top:3px}
+.card__body{padding:var(--sp-6)}
+.card__body--tight{padding:var(--sp-4) var(--sp-5)}
+.card__foot{
+  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
+  padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--line);
+  font-size:var(--text-xs);color:var(--muted);
+}
+.card__actions{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
+
+/* Frame — рамка-образец для витрины; подпись «наезжает» на линию */
+.frame{
+  position:relative;border:1px solid var(--line);border-radius:var(--radius-card);
+  padding:clamp(20px,2.6vw,36px);background:var(--surface);
+}
+.frame--tinted{background:var(--surface-2)}
+.frame--bare{background:transparent;border-style:dashed}
+.frame__label{
+  position:absolute;top:0;left:20px;transform:translateY(-50%);
+  padding:0 8px;background:var(--bg);
+  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.04em;
+  color:var(--muted);text-transform:lowercase;
+}
+.frame--tinted .frame__label{background:var(--surface-2)}
+.frame__note{margin-top:var(--sp-4);font-size:var(--text-xs);color:var(--muted)}
+
+/* ==========================================================================
+   06. ТАБЛИЦЫ — sticky header, tabular-nums, скролл на мобильном
+   <div class="table-wrap"><table class="table">…</table></div>
+   ========================================================================== */
+.table-wrap{
+  overflow-x:auto;overscroll-behavior-x:contain;
+  -webkit-overflow-scrolling:touch;
+  border:1px solid var(--line);border-radius:var(--radius-card);
+  background:var(--surface);
+}
+.table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:var(--text-sm)}
+.table--wide{min-width:900px}
+.table caption{text-align:left;padding:var(--sp-4) var(--sp-5);font-size:var(--text-xs);color:var(--muted);border-bottom:1px solid var(--line)}
+.table th{
+  position:sticky;top:0;z-index:2;
+  padding:var(--sp-3) var(--sp-4);
+  background:var(--surface-2);color:var(--muted);
+  border-bottom:1px solid var(--line);
+  font-size:var(--text-2xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
+  text-align:left;white-space:nowrap;
+}
+.table td{
+  padding:var(--sp-4);border-bottom:1px solid var(--line);
+  vertical-align:middle;color:var(--ink-2);
+}
+.table tbody tr:last-child td{border-bottom:0}
+.table tbody tr{transition:background-color var(--dur-fast) var(--ease)}
+.table tbody tr:hover{background:var(--surface-2)}
+.table tbody tr:focus-within{background:var(--surface-2)}
+.table--compact th{padding:var(--sp-2) var(--sp-3)}
+.table--compact td{padding:var(--sp-3)}
+.table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
+.table .mono{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--muted);letter-spacing:-.02em}
+.table .strong{color:var(--ink);font-weight:600}
+.table__title{display:block;font-weight:500;color:var(--ink);line-height:1.4}
+.table__sub{display:block;font-size:var(--text-xs);color:var(--muted);margin-top:2px;line-height:1.4}
+.table__person{display:flex;align-items:center;gap:var(--sp-3);white-space:nowrap}
+.table__actions{display:flex;align-items:center;gap:2px;justify-content:flex-end}
+.row-actions{opacity:0;transition:opacity var(--dur) var(--ease)}
+tr:hover .row-actions,tr:focus-within .row-actions{opacity:1}
+.table__check{width:40px;padding-right:0}
+.table__check input{
+  appearance:none;width:16px;height:16px;border:1.5px solid var(--line-input);
+  border-radius:4px;background:var(--surface);display:grid;place-content:center;cursor:pointer;
+}
+.table__check input::before{content:"";width:4px;height:8px;margin-top:-2px;border-right:2px solid var(--accent-contrast);border-bottom:2px solid var(--accent-contrast);transform:rotate(45deg) scale(0);transition:transform var(--dur) var(--ease)}
+.table__check input:checked{background:var(--accent);border-color:var(--accent)}
+.table__check input:checked::before{transform:rotate(45deg) scale(1)}
+.table__check input:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.table-note{
+  display:none;align-items:center;gap:6px;
+  margin-top:var(--sp-2);font-size:var(--text-2xs);color:var(--muted);
+}
+
+/* ==========================================================================
+   07. TABS
+   <div class="tabs" role="tablist"> <button class="tab" role="tab" aria-selected>…
+   ========================================================================== */
+.tabs{
+  display:flex;align-items:stretch;gap:var(--sp-1);
+  border-bottom:1px solid var(--line);
+  overflow-x:auto;scrollbar-width:none;
+}
+.tabs::-webkit-scrollbar{display:none}
+.tab{
+  position:relative;flex:none;
+  display:inline-flex;align-items:center;gap:7px;
+  min-height:44px;padding:0 var(--sp-4);
+  margin-bottom:-1px;
+  color:var(--muted);font-size:var(--text-sm);font-weight:600;
+  border-bottom:2px solid transparent;
+  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
+  white-space:nowrap;
+}
+.tab:hover{color:var(--ink)}
+.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
+.tab:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
+.tab__count{
+  display:inline-flex;align-items:center;justify-content:center;
+  min-width:20px;height:20px;padding:0 6px;
+  background:var(--bg-alt);border-radius:var(--radius-pill);
+  font-size:var(--text-2xs);font-weight:600;color:var(--muted);
+  font-variant-numeric:tabular-nums;
+}
+.tab[aria-selected="true"] .tab__count{background:var(--accent-soft);color:var(--accent-ink)}
+.tab-panel{padding-top:var(--sp-6)}
+.tab-panel:focus{outline:none}
+
+/* ==========================================================================
+   08. АЛЕРТЫ
+   ========================================================================== */
+.alert{
+  --alert-accent:var(--line-strong);
+  position:relative;
+  display:flex;align-items:flex-start;gap:var(--sp-3);
+  padding:var(--sp-4) var(--sp-5);
+  border:1px solid var(--line);border-left:2px solid var(--alert-accent);
+  border-radius:var(--radius-control);
+  background:var(--surface);color:var(--ink-2);
+  box-shadow:var(--shadow-xs);
+  font-size:var(--text-sm);line-height:1.55;
+}
+.alert .icon{flex:none;margin-top:1px}
+.alert__body{display:flex;flex-direction:column;gap:2px;min-width:0}
+.alert__title{font-weight:600;color:var(--ink);font-size:var(--text-sm)}
+.alert__link{font-weight:600;color:var(--accent-ink);text-decoration:underline;text-underline-offset:.2em}
+.alert__close{margin-left:auto;color:var(--muted);flex:none}
+.alert--info{--alert-accent:var(--info);border-color:color-mix(in oklab,var(--info) 22%,var(--line))}
+.alert--info .alert__icon{color:var(--info)}
+.alert--success{--alert-accent:var(--success);border-color:color-mix(in oklab,var(--success) 22%,var(--line))}
+.alert--success .alert__icon{color:var(--success)}
+.alert--warning{--alert-accent:var(--warning);border-color:color-mix(in oklab,var(--warning) 24%,var(--line))}
+.alert--warning .alert__icon{color:var(--warning)}
+.alert--danger{--alert-accent:var(--danger);border-color:color-mix(in oklab,var(--danger) 24%,var(--line))}
+.alert--danger .alert__icon{color:var(--danger)}
+.alert--accent{--alert-accent:var(--accent);border-color:color-mix(in oklab,var(--accent) 22%,var(--line))}
+.alert--accent .alert__icon{color:var(--accent-ink)}
+.alert--plain{background:var(--surface-2);border-left-color:var(--line-strong)}
+
+/* ==========================================================================
+   09. TOAST
+   <div class="toast-region" aria-live="polite" aria-atomic="false"></div>
+   ========================================================================== */
+.toast-region{
+  position:fixed;right:clamp(16px,2.4vw,28px);bottom:clamp(16px,2.4vw,28px);
+  z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-end;
+  width:min(390px,calc(100vw - 32px));pointer-events:none;
+}
+.toast{
+  pointer-events:auto;
+  display:flex;align-items:flex-start;gap:var(--sp-3);width:100%;
+  padding:var(--sp-4);background:var(--surface);
+  border:1px solid var(--line-strong);border-radius:var(--radius-control);
+  box-shadow:var(--shadow-md);font-size:var(--text-sm);line-height:1.5;color:var(--ink-2);
+  animation:aurora-toast-in var(--dur-slow) var(--ease-out);
+}
+.toast.is-leaving{animation:aurora-toast-out var(--dur) var(--ease) forwards}
+.toast .icon{flex:none;margin-top:1px}
+.toast__body{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
+.toast__title{font-weight:600;color:var(--ink)}
+.toast__text{font-size:var(--text-xs);color:var(--muted)}
+.toast--success .toast__icon{color:var(--success)}
+.toast--danger .toast__icon{color:var(--danger)}
+.toast--info .toast__icon{color:var(--info)}
+.toast__close{color:var(--muted);flex:none}
+.toast__close:hover{color:var(--ink)}
+@keyframes aurora-toast-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
+@keyframes aurora-toast-out{to{opacity:0;transform:translateY(6px)}}
+
+/* ==========================================================================
+   10. МОДАЛЬНОЕ ОКНО
+   <div class="modal" id="..." role="dialog" aria-modal="true" aria-labelledby="..."
+        data-modal> <div class="modal__backdrop" data-modal-close></div> <div class="modal__dialog">…
+   ========================================================================== */
+.modal{
+  position:fixed;inset:0;z-index:var(--z-modal);
+  display:grid;place-items:center;padding:var(--sp-6);
+  visibility:hidden;opacity:0;
+  transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease);
+}
+.modal.is-open{visibility:visible;opacity:1}
+.modal__backdrop{position:absolute;inset:0;background:var(--scrim)}
+.modal__dialog{
+  position:relative;width:min(560px,100%);
+  max-height:calc(100svh - 2 * var(--sp-6));
+  display:flex;flex-direction:column;
+  background:var(--surface);border:1px solid var(--line-strong);
+  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
+  transform:translateY(16px) scale(.995);
+  transition:transform var(--dur-slow) var(--ease-out);
+}
+.modal.is-open .modal__dialog{transform:none}
+.modal--wide .modal__dialog{width:min(760px,100%)}
+.modal__head{
+  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4);
+  padding:var(--sp-6) var(--sp-6) var(--sp-4);
+}
+.modal__title{font-family:var(--font-body);font-size:var(--text-xl);font-weight:600;line-height:1.25;letter-spacing:-.015em}
+.modal__sub{font-size:var(--text-xs);color:var(--muted);margin-top:4px}
+.modal__body{padding:0 var(--sp-6) var(--sp-6);overflow-y:auto;color:var(--ink-2);font-size:var(--text-sm);line-height:1.6}
+.modal__body p+p{margin-top:var(--sp-3)}
+.modal__foot{
+  display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);
+  padding:var(--sp-4) var(--sp-6);border-top:1px solid var(--line);
+}
+.modal__foot--split{justify-content:space-between}
+.modal__note{font-size:var(--text-xs);color:var(--muted);margin-right:auto}
+body.modal-open{overflow:hidden}
+
+/* ==========================================================================
+   11. МЕНЮ / DROPDOWN / TOOLTIP
+   ========================================================================== */
+.dropdown{position:relative;display:inline-block}
+.menu{
+  position:absolute;top:calc(100% + 8px);right:0;z-index:var(--z-sticky);
+  min-width:232px;padding:var(--sp-2);
+  background:var(--surface);border:1px solid var(--line-strong);
+  border-radius:var(--radius-control);box-shadow:var(--shadow-md);
+  opacity:0;visibility:hidden;transform:translateY(-4px);
+  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),visibility var(--dur) var(--ease);
+}
+.dropdown.is-open .menu{opacity:1;visibility:visible;transform:none}
+.menu--left{left:0;right:auto}
+.menu--static{position:static;opacity:1;visibility:visible;transform:none;box-shadow:var(--shadow-sm);max-width:280px}
+.menu__label{
+  padding:6px var(--sp-3) var(--sp-2);
+  font-size:var(--text-2xs);font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
+}
+.menu__item{
+  display:flex;align-items:center;gap:var(--sp-3);width:100%;
+  min-height:38px;padding:8px var(--sp-3);
+  border-radius:var(--radius-sm);
+  color:var(--ink-2);font-size:var(--text-sm);font-weight:500;text-align:left;text-decoration:none;
+  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
+}
+.menu__item .icon{color:var(--muted);flex:none}
+.menu__item:hover,.menu__item:focus-visible{background:var(--bg-alt);color:var(--ink);outline:none}
+.menu__item[aria-checked="true"]{background:var(--accent-soft);color:var(--accent-ink)}
+.menu__item[aria-checked="true"] .icon{color:var(--accent-ink)}
+.menu__item--danger{color:var(--danger)}
+.menu__item--danger .icon{color:var(--danger)}
+.menu__item--danger:hover{background:var(--danger-soft);color:var(--danger)}
+.menu__shortcut{
+  margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs);
+  color:var(--muted);letter-spacing:0;
+}
+.menu__sep{height:1px;background:var(--line);margin:var(--sp-2) 0}
+
+/* Tooltip: [data-tooltip] внутри .tip */
+.tip{position:relative;display:inline-flex}
+.tip [data-tooltip]{position:relative}
+.tip [data-tooltip]::after{
+  content:attr(data-tooltip);
+  position:absolute;left:50%;bottom:calc(100% + 9px);z-index:var(--z-sticky);
+  transform:translateX(-50%) translateY(3px);
+  padding:6px 10px;border-radius:var(--radius-sm);
+  background:var(--ink);color:var(--bg);
+  font-size:var(--text-xs);font-weight:500;line-height:1.35;letter-spacing:0;
+  white-space:nowrap;opacity:0;pointer-events:none;
+  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
+}
+.tip [data-tooltip]:hover::after,.tip [data-tooltip]:focus-visible::after{opacity:1;transform:translateX(-50%)}
+
+/* ==========================================================================
+   12. НАВИГАЦИЯ: ХЛЕБНЫЕ КРОШКИ · ПАГИНАЦИЯ · SEGMENTED
+   ========================================================================== */
+.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);color:var(--muted)}
+.crumbs a{color:var(--muted);text-decoration:none}
+.crumbs a:hover{color:var(--accent-ink)}
+.crumbs__sep{color:var(--faint);display:inline-flex}
+.crumbs [aria-current="page"]{color:var(--ink-2);font-weight:500}
+
+.pager{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
+.pager__btn{
+  display:inline-flex;align-items:center;justify-content:center;
+  min-width:36px;height:36px;padding:0 8px;
+  border:1px solid transparent;border-radius:var(--radius-sm);
+  color:var(--ink-2);font-size:var(--text-sm);font-variant-numeric:tabular-nums;
+  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
+}
+.pager__btn:hover{background:var(--bg-alt);color:var(--ink)}
+.pager__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.pager__btn[aria-current="page"]{background:var(--accent);color:var(--accent-contrast);font-weight:600;border-color:var(--accent)}
+.pager__btn[disabled]{opacity:.4;pointer-events:none}
+.pager__gap{padding:0 6px;color:var(--faint);font-size:var(--text-sm)}
+
+.segment{
+  display:inline-flex;align-items:center;gap:2px;
+  padding:3px;background:var(--bg-alt);
+  border:1px solid var(--line);border-radius:var(--radius-control);
+}
+.segment__btn{
+  display:inline-flex;align-items:center;justify-content:center;gap:6px;
+  min-width:34px;min-height:32px;padding:0 10px;
+  border-radius:max(2px,calc(var(--radius-control) - 3px));
+  color:var(--muted);font-size:var(--text-xs);font-weight:600;letter-spacing:.01em;
+  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
+  white-space:nowrap;
+}
+.segment__btn:hover{color:var(--ink)}
+.segment__btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.segment__btn[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-xs)}
+.segment__btn .icon{width:16px;height:16px}
+
+/* ==========================================================================
+   13. АВАТАРЫ · PROGRESS · SKELETON · EMPTY STATE · TIMELINE
+   ========================================================================== */
+.avatar{
+  display:inline-flex;align-items:center;justify-content:center;flex:none;
+  width:36px;height:36px;border-radius:50%;
+  background:var(--bg-alt);color:var(--ink-2);
+  border:1px solid var(--line);
+  font-size:var(--text-xs);font-weight:600;letter-spacing:.02em;text-transform:uppercase;
+  font-variant-numeric:tabular-nums;overflow:hidden;
+}
+.avatar--sm{width:28px;height:28px;font-size:var(--text-2xs)}
+.avatar--lg{width:44px;height:44px;font-size:var(--text-sm)}
+.avatar--xl{width:56px;height:56px;font-size:var(--text-md)}
+.avatar--accent{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
+.avatar--copper{background:var(--copper-soft);color:color-mix(in oklab,var(--copper) 60%,var(--ink));border-color:transparent}
+.avatar--dark{background:var(--ink);color:var(--bg);border-color:transparent}
+.avatar--square{border-radius:var(--radius-sm)}
+.avatar-stack{display:flex;align-items:center}
+.avatar-stack .avatar{margin-left:-8px;border:2px solid var(--surface)}
+.avatar-stack .avatar:first-child{margin-left:0}
+
+.progress{height:8px;border-radius:var(--radius-pill);background:var(--bg-alt);overflow:hidden;border:1px solid var(--line)}
+.progress__bar{height:100%;width:var(--progress,0%);background:var(--accent);border-radius:inherit;transition:width var(--dur-slow) var(--ease)}
+.progress--thin{height:4px}
+.progress--success .progress__bar{background:var(--success)}
+.progress--warning .progress__bar{background:var(--warning)}
+.progress--danger .progress__bar{background:var(--danger)}
+.progress--copper .progress__bar{background:var(--copper)}
+.progress-meta{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-top:6px;font-size:var(--text-xs);color:var(--muted)}
+.progress-meta strong{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
+
+.skeleton{
+  --sk-base:var(--bg-alt);
+  background:linear-gradient(100deg,var(--sk-base) 30%,color-mix(in oklab,var(--ink) 8%,var(--sk-base)) 50%,var(--sk-base) 70%);
+  background-size:300% 100%;
+  border-radius:var(--radius-sm);
+  animation:aurora-shimmer 1.8s linear infinite;
+}
+.skeleton--text{height:12px;width:var(--w,100%)}
+.skeleton--title{height:20px;width:var(--w,60%)}
+.skeleton--circle{border-radius:50%;width:40px;height:40px}
+.skeleton--block{height:var(--h,64px)}
+@keyframes aurora-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}
+
+.empty{
+  display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);
+  padding:clamp(32px,5vw,56px) var(--sp-6);
+  border:1px dashed var(--line-strong);border-radius:var(--radius-card);
+  background:var(--surface-2);
+}
+.empty__icon{
+  width:48px;height:48px;border-radius:50%;
+  display:grid;place-items:center;color:var(--muted);
+  background:var(--bg-alt);border:1px solid var(--line);margin-bottom:var(--sp-2);
+}
+.empty__title{font-weight:600;color:var(--ink)}
+.empty__text{font-size:var(--text-sm);color:var(--muted);max-width:46ch;line-height:1.55}
+.empty__actions{margin-top:var(--sp-3);display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}
+
+.timeline{display:flex;flex-direction:column}
+.timeline__item{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-4);padding-bottom:var(--sp-6)}
+.timeline__item::before{content:"";position:absolute;left:11px;top:26px;bottom:4px;width:1px;background:var(--line)}
+.timeline__item:last-child{padding-bottom:0}
+.timeline__item:last-child::before{display:none}
+.timeline__dot{
+  position:relative;z-index:1;
+  width:23px;height:23px;border-radius:50%;
+  display:grid;place-items:center;
+  background:var(--surface);border:1px solid var(--line-strong);
+  color:var(--muted);
+}
+.timeline__dot .icon{width:12px;height:12px;stroke-width:2}
+.timeline__dot--accent{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast)}
+.timeline__dot--done{background:var(--success-soft);border-color:var(--success);color:var(--success)}
+.timeline__body{min-width:0;padding-top:1px}
+.timeline__title{font-size:var(--text-sm);font-weight:600;color:var(--ink);line-height:1.4}
+.timeline__time{font-size:var(--text-xs);color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums}
+.timeline__text{font-size:var(--text-sm);color:var(--ink-2);margin-top:6px;line-height:1.55}
+.timeline__tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:var(--sp-2)}
+
+/* ==========================================================================
+   14. KPI-КАРТОЧКА И SPARKLINE
+   ========================================================================== */
+.kpi{
+  position:relative;display:flex;flex-direction:column;gap:var(--sp-3);
+  padding:var(--sp-5);background:var(--surface);
+  border:1px solid var(--line);border-radius:var(--radius-card);
+  box-shadow:var(--shadow-xs);overflow:hidden;min-width:0;
+  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
+}
+.kpi:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
+.kpi--accent::before{
+  content:"";position:absolute;left:0;top:var(--sp-5);bottom:var(--sp-5);
+  width:2px;background:var(--accent);border-radius:0 2px 2px 0;
+}
+.kpi__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
+.kpi__label{
+  font-size:var(--text-2xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;
+  color:var(--muted);line-height:1.4;
+}
+.kpi__icon{
+  display:grid;place-items:center;width:30px;height:30px;flex:none;
+  border-radius:var(--radius-sm);background:var(--bg-alt);
+  color:var(--muted);border:1px solid var(--line);
+}
+.kpi__value{
+  display:flex;align-items:baseline;gap:2px;
+  font-size:clamp(1.75rem,2.4vw,2.125rem);font-weight:600;line-height:1;
+  letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;
+}
+.kpi__unit{font-size:var(--text-sm);font-weight:500;color:var(--muted);letter-spacing:0;margin-left:3px}
+.kpi__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-3);margin-top:auto}
+.kpi__delta{
+  display:inline-flex;align-items:center;gap:4px;
+  font-size:var(--text-xs);font-weight:600;font-variant-numeric:tabular-nums;
+}
+.kpi__delta--up{color:var(--success)}
+.kpi__delta--down{color:var(--danger)}
+.kpi__delta--flat{color:var(--muted)}
+.kpi__delta-note{font-size:var(--text-2xs);color:var(--muted);font-weight:400;margin-left:2px}
+.kpi__spark{flex:none;width:96px;height:34px;margin-left:auto;overflow:visible}
+.spark__area{fill:color-mix(in oklab,var(--accent) 13%,transparent)}
+.spark__line{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
+.spark__dot{fill:var(--accent)}
+.spark--copper .spark__line{stroke:var(--copper)}
+.spark--copper .spark__area{fill:color-mix(in oklab,var(--copper) 14%,transparent)}
+.spark--copper .spark__dot{fill:var(--copper)}
+.spark--danger .spark__line{stroke:var(--danger)}
+.spark--danger .spark__area{fill:color-mix(in oklab,var(--danger) 13%,transparent)}
+.spark--danger .spark__dot{fill:var(--danger)}
+
+/* ==========================================================================
+   15. КАРКАС ПРИЛОЖЕНИЯ: SIDEBAR + TOPBAR
+   ========================================================================== */
+.app{
+  display:grid;grid-template-columns:248px minmax(0,1fr);
+  min-height:100svh;background:var(--bg);
+}
+.app__main{display:flex;flex-direction:column;min-width:0;min-height:100svh}
+.app__content{
+  display:flex;flex-direction:column;gap:clamp(18px,2.2vw,28px);
+  padding:clamp(18px,2.6vw,36px);
+  flex:1;min-width:0;
+}
+
+/* Тёмная навигационная колонка: в светлой теме — чернильный фон,
+   в тёмной — приподнятая поверхность. Текст наследует контрастную пару. */
+.sidebar{
+  position:sticky;top:0;height:100svh;
+  display:flex;flex-direction:column;gap:var(--sp-6);
+  padding:var(--sp-5) var(--sp-4);
+  background:var(--ink);color:var(--bg);
+  overflow-y:auto;overscroll-behavior:contain;
+  z-index:var(--z-sticky);
+}
+[data-theme="dark"] .sidebar{
+  background:var(--surface);color:var(--ink);
+  border-right:1px solid var(--line);
+}
+.sidebar__brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-1) var(--sp-2);text-decoration:none;color:inherit}
+.sidebar__logo{
+  display:grid;place-items:center;width:36px;height:36px;flex:none;
+  border-radius:var(--radius-sm);
+  background:var(--accent-soft);color:var(--accent-ink);
+  font-family:var(--font-display);font-weight:600;font-size:var(--text-md);
+  letter-spacing:-.03em;
+}
+.sidebar__name{font-size:var(--text-sm);font-weight:600;letter-spacing:-.01em;line-height:1.25}
+.sidebar__sub{
+  font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase;
+  color:color-mix(in oklab,currentColor 58%,transparent);margin-top:2px;
+}
+.sidebar__nav{display:flex;flex-direction:column;gap:2px}
+.sidebar__label{
+  padding:0 var(--sp-3);margin:0 0 var(--sp-2);
+  font-size:var(--text-2xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
+  color:color-mix(in oklab,currentColor 55%,transparent);
+}
+.side-nav__item{
+  position:relative;display:flex;align-items:center;gap:var(--sp-3);
+  min-height:40px;padding:9px var(--sp-3);
+  border-radius:var(--radius-control);
+  color:color-mix(in oklab,currentColor 74%,transparent);
+  font-size:var(--text-sm);font-weight:500;text-decoration:none;
+  transition:background-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
+}
+.side-nav__item .icon{flex:none;opacity:.85}
+.side-nav__item:hover{background:color-mix(in oklab,currentColor 9%,transparent);color:inherit}
+.side-nav__item:focus-visible{outline:none;box-shadow:var(--focus-ring)}
+.side-nav__item[aria-current="page"]{
+  background:color-mix(in oklab,currentColor 12%,transparent);
+  color:inherit;font-weight:600;
+}
+.side-nav__item[aria-current="page"]::before{
+  content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;
+  border-radius:2px;background:var(--accent);
+}
+.side-nav__item[aria-current="page"] .icon{opacity:1}
+.side-nav__badge{
+  margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
+  min-width:22px;height:20px;padding:0 6px;border-radius:var(--radius-pill);
+  background:color-mix(in oklab,currentColor 14%,transparent);
+  font-size:var(--text-2xs);font-weight:600;font-variant-numeric:tabular-nums;
+}
+.sidebar__foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-3)}
+.sidebar__user{
+  display:flex;align-items:center;gap:var(--sp-3);
+  padding:var(--sp-3);border-radius:var(--radius-control);
+  border-top:1px solid color-mix(in oklab,currentColor 14%,transparent);
+}
+.sidebar__user-name{font-size:var(--text-xs);font-weight:600;line-height:1.3}
+.sidebar__user-role{font-size:var(--text-2xs);color:color-mix(in oklab,currentColor 55%,transparent);line-height:1.3}
+.sidebar__user .icon-btn{color:inherit;margin-left:auto;opacity:.7}
+
+.topbar{
+  position:sticky;top:0;z-index:var(--z-header);
+  display:flex;align-items:center;gap:var(--sp-3);
+  height:64px;padding:0 clamp(14px,2.2vw,28px);
+  background:var(--bg);border-bottom:1px solid var(--line);
+}
+.topbar__search{flex:1;max-width:420px}
+.topbar__actions{display:flex;align-items:center;gap:var(--sp-2);margin-left:auto}
+.topbar__divider{width:1px;height:24px;background:var(--line);margin:0 2px}
+.topbar__burger{display:none}
+.nav-scrim{display:none}
+
+/* Плотные списки загрузки/рейтингов */
+.bar-list{display:flex;flex-direction:column;gap:var(--sp-4)}
+.bar-list__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-2) var(--sp-4);align-items:center}
+.bar-list__name{font-size:var(--text-sm);color:var(--ink-2);display:flex;align-items:center;gap:var(--sp-3);min-width:0}
+.bar-list__value{font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}
+.bar-list__track{grid-column:1/-1}
+
+/* ==========================================================================
+   16. HERO-ПАТТЕРНЫ И PROOF-СТРОКА
+   ========================================================================== */
+.hero{position:relative;padding-block:clamp(40px,5vw,80px) clamp(48px,6vw,96px)}
+.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,72px);align-items:center}
+.hero__title{margin-top:var(--sp-5);max-width:15ch}
+.hero__lead{margin-top:var(--sp-5);max-width:52ch}
+.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3);margin-top:var(--sp-7)}
+.hero__meta{margin-top:var(--sp-6);display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;font-size:var(--text-xs);color:var(--muted)}
+.hero__meta .icon{color:var(--accent)}
+.proof{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-8);margin-top:var(--sp-8);padding-top:var(--sp-6);border-top:1px solid var(--line)}
+.proof__item{display:flex;flex-direction:column;gap:2px;min-width:0}
+.proof__value{font-size:var(--text-2xl);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);line-height:1.1}
+.proof__value small{font-size:var(--text-sm);font-weight:500;color:var(--muted);letter-spacing:0}
+.proof__label{font-size:var(--text-2xs);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
+
+/* Метка-«печать»/штамп (декоративная типографика, не картинка) */
+.stamp{
+  display:inline-grid;place-items:center;gap:2px;
+  width:var(--stamp-size,104px);height:var(--stamp-size,104px);
+  border:1px solid var(--line-strong);border-radius:50%;
+  font-family:var(--font-mono);font-size:var(--text-2xs);letter-spacing:.08em;
+  text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.4;
+}
+.stamp strong{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1}
+.stamp--square{border-radius:var(--radius-sm);border-color:var(--line)}
+.stamp--accent strong{color:var(--accent)}
+
+/* ==========================================================================
+   17. СПИСКИ И СЛУЖЕБНЫЕ УТИЛИТЫ
+   ========================================================================== */
+.list{border-top:1px solid var(--line)}
+.list__item{
+  display:flex;align-items:flex-start;gap:var(--sp-4);
+  padding:var(--sp-4) 0;border-bottom:1px solid var(--line);
+}
+.list__item:last-child{border-bottom:0}
+.list__main{min-width:0;flex:1}
+.list__title{font-weight:500;color:var(--ink);line-height:1.45}
+.list__meta{font-size:var(--text-xs);color:var(--muted);margin-top:2px;line-height:1.45}
+.list__aside{flex:none;margin-left:auto;text-align:right;font-size:var(--text-xs);color:var(--muted);font-variant-numeric:tabular-nums}
+
+.rule-label{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--text-2xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
+.rule-label::before,.rule-label::after{content:"";flex:1;height:1px;background:var(--line)}
+
+/* Крупная редакционная цифра (01, 02…) */
+.index-num{
+  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;
+  color:var(--muted);letter-spacing:.02em;font-variant-numeric:tabular-nums;
+}
+.caps-label{font-size:var(--text-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
+.divider{height:1px;background:var(--line);border:0;margin:0}
+.vr{width:1px;align-self:stretch;background:var(--line)}
+.scroll-x{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
+.scroll-x::-webkit-scrollbar{display:none}
+.surface{background:var(--surface)}
+.bg-alt{background:var(--bg-alt)}
+.hairline-top{border-top:1px solid var(--line)}
+.hairline-bottom{border-bottom:1px solid var(--line)}
+.pt-0{padding-top:0}
+.mt-auto{margin-top:auto}
+.w-100{width:100%}
+.nowrap{white-space:nowrap}
+.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.mono-sm{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:-.01em}
+.muted-ink{color:var(--ink-2)}
+.num-tnum{font-variant-numeric:tabular-nums}
+
+/* ==========================================================================
+   18. АДАПТИВ
+   ========================================================================== */
+@media (max-width:1199px){
+  .app{grid-template-columns:216px minmax(0,1fr)}
+}
+@media (max-width:1024px){
+  .app{grid-template-columns:1fr}
+  .sidebar{
+    position:fixed;left:0;top:0;bottom:0;width:272px;
+    transform:translateX(-100%);
+    transition:transform var(--dur-slow) var(--ease-out);
+    box-shadow:var(--shadow-lg);
+  }
+  .sidebar.is-open{transform:none}
+  .nav-scrim{
+    display:block;position:fixed;inset:0;z-index:var(--z-overlay);
+    background:var(--scrim);opacity:0;visibility:hidden;
+    transition:opacity var(--dur) var(--ease),visibility var(--dur) var(--ease);
+  }
+  .nav-scrim.is-open{opacity:1;visibility:visible}
+  .topbar__burger{display:inline-flex}
+  .hero__grid{grid-template-columns:1fr}
+  .hero__title{max-width:20ch}
+}
+@media (max-width:767px){
+  .topbar{height:58px;gap:var(--sp-2)}
+  .topbar__search{display:none}
+  .form-grid,.form-grid--3{grid-template-columns:1fr}
+  .proof{gap:var(--sp-4) var(--sp-6)}
+  .modal{padding:var(--sp-3);align-items:end}
+  .modal__dialog{width:100%;max-height:calc(100svh - 24px)}
+  .modal__head{padding:var(--sp-5) var(--sp-5) var(--sp-3)}
+  .modal__body{padding:0 var(--sp-5) var(--sp-5)}
+  .modal__foot{padding:var(--sp-4) var(--sp-5)}
+  .toast-region{left:var(--sp-4);right:var(--sp-4);bottom:var(--sp-4);width:auto;align-items:stretch}
+  .table-note{display:flex}
+  .row-actions{opacity:1}
+  .card__head{padding:var(--sp-4) var(--sp-5)}
+  .card__body{padding:var(--sp-5)}
+  .card__foot{padding:var(--sp-3) var(--sp-5)}
+  .pager__btn{min-width:40px;height:40px}
+  .segment__btn{min-height:34px}
+}
+@media (hover:none){
+  .row-actions{opacity:1}
+}
+@media (prefers-reduced-motion:reduce){
+  .btn:hover .icon--arrow,
+  .link:hover .icon{transform:none}
+  .card--interactive:hover{transform:none}
+  .kpi:hover{box-shadow:var(--shadow-xs)}
+  .skeleton{animation:none}
+}