/* ============================================================================
   СБОРНИК НАУЧНЫХ СТАТЕЙ – кафедра финансов СПбГЭУ
   Оформление интерфейса.

   Замысел. Система готовит печатное издание, поэтому и сама выглядит как
   хорошо свёрстанный документ: спокойная бумажная палитра, волосяные линейки
   вместо теней, крупный воздух, фирменный бирюзовый – только на опознавании
   и на том действии, которое сейчас главное. Цветом не украшают, цветом
   показывают состояние.

   Три состояния одного продукта:
     до 700      телефон   – одна колонка, таблицы становятся карточками
     700-1179    планшет   – две колонки, меню в выдвижной панели
     от 1180     компьютер – постоянное боковое меню, полноценные таблицы

   Правила, которые нигде не нарушаются:
     • страница не прокручивается вбок – прокрутка только внутри таблицы;
     • у всех органов управления одна высота, один радиус, один отступ;
     • тема одна – светлая: интерфейс печатного издания не переключается;
     • цифры набираются моноширинными знаками и выравниваются по разряду;
     • фирменный цвет и логотип задаются здесь и не меняются настройками.
   ========================================================================== */

/* ============================================================== 1. ТОКЕНЫ === */
:root {
  /* ---- фирменный цвет СПбГЭУ (снят с логотипа, не настраивается) ---- */
  --brand:      #028c90;
  --brand-600:  #017b80;
  --brand-700:  #016a6f;
  --brand-800:  #01555a;
  --brand-050:  #edf7f7;
  --brand-100:  #d3ebeb;
  --brand-200:  #a9d7d8;

  /* ---- нейтральные: тёплый сланец, а не синяя сталь ---- */
  --n-0:   #ffffff;
  --n-25:  #f7f8f9;
  --n-50:  #f1f3f5;
  --n-100: #e7eaed;
  --n-150: #dde1e5;
  --n-200: #d2d7dc;
  --n-300: #b6bec6;
  --n-400: #8e98a2;
  --n-500: #626c76;   /* --muted: даёт 4,7:1 на --surface, 5,3:1 на белом */
  --n-600: #4e5861;
  --n-700: #384249;
  --n-800: #242c33;
  --n-900: #161d22;

  /* ---- смысловые имена ---- */
  --ink:        var(--n-800);
  --ink-soft:   var(--n-600);
  --muted:      var(--n-500);
  --page:       var(--n-25);
  --card:       var(--n-0);
  --surface:    var(--n-50);
  --surface-2:  var(--n-100);
  --line:       var(--n-200);
  --line-soft:  var(--n-150);   /* граница карточки: слабее была неразличима */
  --topbar:     var(--brand-700);

  /* ---- состояния ---- */
  --green:      #0f7a4a;  --green-dark: #0b5d38;  --green-bg: #e9f5ef;  --green-line: #bfe2cf;
  --red:        #b3261e;  --red-dark:   #8f1d17;  --red-bg:   #fdecea;  --red-line:   #f1c8c4;
  --amber:      #8a5a00;  --amber-dark: #6d4700;  --amber-bg: #fdf4e3;  --amber-line: #ecdbb2;
  --blue:       #1b5fa8;  --blue-dark:  #144a85;  --blue-bg:  #ebf2fb;  --blue-line:  #c8dcf1;
  --violet:     #5b3fa8;  --violet-bg:  #f0edfb;  --violet-line: #d7cff2;

  /* ---- шкала отступов (4-пиксельная сетка) ---- */
  /* Шкала отступов. Внизу два дробных шага: без них «почти ноль» и «чуть
     меньше восьми» набирались на глаз числами 1, 2, 3, 5, 6, 7 – одно и то же
     расстояние в разных местах получалось разным. Теперь значений ровно
     столько, сколько смыслов. */
  --s0: 2px;  /* подпись и значение внутри одного блока */
  --s1: 4px;
  --sh: 6px;  /* значок и подпись, поле и подсказка под ним */
  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;
  --formbar-h: 76px;  /* высота нижней панели действий: кнопка плюс отступы */

  /* ---- скругления ----
     Ровно три плюс «таблетка», и каждое привязано к своему уровню:
       --r-xs  мелочь внутри строки: значок, чип, поле в таблице;
       --r-sm  всё, на что нажимают и куда вводят: кнопка, поле, вкладка;
       --r     любая поверхность: карточка, окно, полоса настроек.
     Четвёртого размера нет намеренно: именно от него интерфейс начинает
     выглядеть собранным из разных мест. */
  --r-xs: 6px;  --r-sm: 8px;  --r: 12px;  --r-pill: 999px;

  /* ---- органы управления ---- */
  /* Высот ровно три. Всё, что выглядит как кнопка или поле, берёт одну из них:
     разнобой в 28, 34, 40 и 44 пикселя и создавал ощущение случайной вёрстки. */
  --control-h-sm: 32px;   /* плотные места: таблицы, панели, узкие полосы */
  --control-h:    38px;   /* обычная кнопка и поле ввода */
  --control-h-lg: 44px;   /* главная кнопка во всю ширину */

  /* ---- тени: почти незаметные, работу делают линейки ---- */
  --shadow-xs: 0 1px 1px rgba(22, 29, 34, .04);
  --shadow-sm: 0 1px 2px rgba(22, 29, 34, .05), 0 1px 1px rgba(22, 29, 34, .03);
  --shadow:    0 2px 4px rgba(22, 29, 34, .05), 0 6px 16px rgba(22, 29, 34, .06);
  --shadow-lg: 0 8px 20px rgba(22, 29, 34, .10), 0 24px 56px rgba(22, 29, 34, .16);
  --focus:     0 0 0 3px rgba(2, 140, 144, .28);

  /* ---- каркас ---- */
  --header-h:  60px;
  --sidebar-w: 252px;
  --page-max:  1560px;
  --pad-x:     var(--s6);

  /* ---- типографика ---- */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "SF Pro Text",
          "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial,
          "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --t-xs:  .75rem;      /* 12 – микроподписи */
  --t-sm:  .8125rem;    /* 13 – пояснения, мета */
  --t-md:  .9375rem;    /* 15 – основной текст интерфейса */
  --t-lg:  1.0625rem;   /* 17 – заголовки карточек */
  --t-xl:  1.1875rem;   /* 19 – крупный подзаголовок */
  --t-2xl: 1.375rem;    /* 22 – заголовок страницы */
  --t-3xl: 1.75rem;     /* 28 – крупные числа в плитках */
}

/* ===================================================== 2. СБРОС И ОСНОВА === */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

/* hidden обязан скрывать всегда: собственное display у класса (.modal { display:flex })
   иначе перебивает правило браузера и «закрытое» окно остаётся на экране. */
[hidden] { display: none !important; }

html {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  overflow-x: clip;
  font-size: var(--t-md);
  font-feature-settings: "cv05" 1, "ss01" 1;
}

img, video, canvas { max-width: 100%; height: auto; }
svg { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -3px; }

a { color: var(--brand-700); text-decoration: none; cursor: pointer; }
a:hover { color: var(--brand-800); text-decoration: underline; text-underline-offset: 2px; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-xs);
  position: relative; z-index: 2;
}

::selection { background: var(--brand-100); color: var(--brand-800); }

/* ====================================================== 3. ТИПОГРАФИКА === */
h1 { font-size: var(--t-2xl); font-weight: 680; line-height: 1.22; letter-spacing: -.018em; }
h2 { font-size: var(--t-xl);  font-weight: 660; line-height: 1.28; letter-spacing: -.012em; }
h3 { font-size: var(--t-lg);  font-weight: 640; line-height: 1.3;  letter-spacing: -.008em; }
h4 { font-size: var(--t-md);  font-weight: 640; line-height: 1.35; }

p { line-height: 1.55; }

.muted    { color: var(--muted); }
.small    { font-size: var(--t-sm); }
.nowrap   { white-space: nowrap; }
.right    { text-align: right; }
.center   { text-align: center; }
.hidden   { display: none !important; }
.spacer   { flex: 1 1 auto; }
.wrap     { flex-wrap: wrap; }
.big input, .big select { font-size: var(--t-lg); font-weight: 550; }

.ok-text   { color: var(--green-dark); font-weight: 600; }
.warn-text { color: var(--amber);      font-weight: 600; }
.bad-text  { color: var(--red-dark);   font-weight: 600; }

.mt1 { margin-top: var(--s1); }  .mt2 { margin-top: var(--s2); }
.mt3 { margin-top: var(--s3); }  .mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s6); }
.mb3 { margin-bottom: var(--s3); } .mb4 { margin-bottom: var(--s4); }

code, kbd, samp { font-family: var(--font-mono); overflow-wrap: anywhere; }
kbd {
  display: inline-block; padding: var(--s0) var(--sh); border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--line);
  border-bottom-width: 2px; font-size: var(--t-xs); color: var(--ink-soft);
}

/* код-подстановка в подсказках: «сюда встанет название сборника» */
code.ph {
  display: inline-block; padding: var(--s0) var(--sh); border-radius: var(--r-xs);
  background: var(--brand-050); border: 1px solid var(--brand-100);
  color: var(--brand-800); font-size: var(--t-xs); font-weight: 600; cursor: help;
  white-space: nowrap;
}

/* ========================================================== 4. КАРКАС === */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--card); padding: var(--s3) var(--s4);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg); font-weight: 600;
}
.skip-link:focus { left: var(--s3); top: var(--s3); }

/* ---- шапка ---- */
.topbar {
  background: var(--topbar);
  position: sticky; top: 0; z-index: 40;
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .14);
}
.topbar-inner {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; align-items: center; gap: var(--s2);
  height: var(--header-h); padding: 0 var(--pad-x);
}
.brand {
  display: flex; align-items: center; gap: var(--s3); color: #fff;
  min-width: 0; flex: 0 1 auto; overflow: hidden;
  border-radius: var(--r-sm); padding: var(--s1) var(--s2); margin-left: calc(var(--s2) * -1);
}
.brand:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, .10); }
.brand img, .brand .emblem { height: 34px; width: auto; display: block; flex: none; color: #fff; }
.brand span { display: flex; flex-direction: column; min-width: 0; line-height: 1.18; }
.brand b {
  font-size: var(--t-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: .085em; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand small {
  font-weight: 400; font-size: var(--t-xs); color: rgba(255, 255, 255, .82);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: var(--s0);
}

.topbar-user {
  color: #fff; font-size: var(--t-sm); display: flex; align-items: center; gap: var(--sh);
  min-width: 0; max-width: 34ch; flex: 0 1 auto; margin-left: auto;
  padding-right: var(--s2);
}
.topbar-user b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-label { color: rgba(255, 255, 255, .88); white-space: nowrap; }

.icon-btn {
  color: #fff; width: var(--control-h); height: var(--control-h); flex: none; position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); background: none; border: 0; cursor: pointer;
  transition: background .13s ease;
}
.icon-btn:hover { background: rgba(255, 255, 255, .15); text-decoration: none; color: #fff; }
.icon-btn:active { background: rgba(255, 255, 255, .22); }
.icon-btn svg { width: 19px; height: 19px; }

.burger { display: none; }
.burger-lines, .burger-lines::before, .burger-lines::after {
  content: ''; display: block; width: 17px; height: 2px; border-radius: var(--r-pill); background: #fff;
}
.burger-lines { position: relative; }
.burger-lines::before { position: absolute; top: -6px; }
.burger-lines::after  { position: absolute; top: 6px; }

/* значок-счётчик */
.count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 var(--sh); border-radius: var(--r-pill); background: var(--red);
  color: #fff; font-size: var(--t-xs); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.topbar .icon-btn .count {
  position: absolute; top: 3px; right: 3px; margin: 0;
  box-shadow: 0 0 0 2px var(--topbar);
}

/* ---- сетка приложения ---- */
.shell {
  max-width: var(--page-max); margin: 0 auto;
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--header-h));
}

/* ---- боковое меню ---- */
.sidebar {
  background: var(--card); border-right: 1px solid var(--line-soft);
  padding: var(--s4) var(--s3) var(--s6);
  display: flex; flex-direction: column;
  position: sticky; top: var(--header-h); align-self: start;
  height: calc(100vh - var(--header-h)); overflow-y: auto;
  overscroll-behavior: contain;
}
.menu { display: flex; flex-direction: column; gap: var(--s0); }
.menu a {
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s3); min-height: var(--control-h); border-radius: var(--r-sm);
  color: var(--n-700); font-size: var(--t-md); font-weight: 500;
  line-height: 1.3; width: 100%; text-align: left;
  background: none; border: 0; font-family: inherit; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.menu a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.menu a.active {
  background: var(--brand-050); color: var(--brand-800); font-weight: 640;
  box-shadow: inset 0 0 0 1px var(--brand-100);
}
/* Значки меню – графика: порог различимости 3:1, на n-400 было 2,9. */
.menu a svg { width: 18px; height: 18px; flex: none; color: var(--n-500); }
.menu a:hover svg { color: var(--n-500); }
.menu a.active svg { color: var(--brand); }
.menu .group {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .075em;
  /* не светлее n-500: на 12 px более светлый серый не проходит по контрасту */
  color: var(--n-500); padding: var(--s4) var(--s3) var(--sh); font-weight: 700;
}
.menu .group:first-child { padding-top: var(--s0); }

.rolechip { padding: 0 var(--s3) var(--s2); }

.sidebar-bottom {
  margin-top: auto; padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
}
.me { padding: var(--s3) var(--s3) 0; }
.me-role { font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.me-name { font-weight: 600; font-size: var(--t-md); margin: var(--s0) 0 var(--s1); }
.link {
  background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-sm);
  color: var(--brand-700); cursor: pointer; text-align: left;
}
.link:hover { text-decoration: underline; }
.sidebar-bottom .link { padding: var(--s1) 0; min-height: var(--control-h-sm); display: inline-flex; align-items: center; }

.drawer-back { display: none; }

/* ---- содержимое ---- */
.content {
  min-width: 0;
  padding: var(--s7) var(--pad-x) var(--s9);
  background: var(--page);
}
.footer {
  color: var(--muted); font-size: var(--t-sm); margin-top: var(--s8);
  padding-top: var(--s4); border-top: 1px solid var(--line-soft);
}
.foot {
  max-width: 560px; margin: 0 auto;
  padding: var(--s6) var(--s4) var(--s7);
  color: var(--muted); font-size: var(--t-sm); text-align: center;
}
body.bare { background: var(--page); }

/* ---- заголовок страницы ---- */
.page-head {
  display: flex; gap: var(--s4); flex-wrap: wrap;
  align-items: flex-start; justify-content: space-between;
  margin-bottom: var(--s6);
}
.page-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.page-head h1 { margin-bottom: var(--s1); }
.page-head p { color: var(--muted); font-size: var(--t-md); max-width: 78ch; }
.crumbs { font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--sh); display: flex; align-items: center; gap: var(--sh); }
.crumbs a { color: var(--muted); font-weight: 500; }
.crumbs a:hover { color: var(--brand-700); }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.seealso { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }

/* ==================================================== 5. КАРТОЧКИ, СЕТКИ === */
.card {
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: var(--shadow-xs);
  padding: var(--s6);
  margin-bottom: var(--s4);
  min-width: 0;
}
.card.narrow   { max-width: 840px; }
.card.soft     { background: var(--surface); border-color: var(--line-soft); box-shadow: none; }
.card.highlight{ background: var(--brand-050); border-color: var(--brand-100); box-shadow: none; }

/* заголовок карточки: линейка-волосок, без цветной подложки.
   h4 ведёт себя так же: в боковых карточках заголовок обычно h4,
   и без этого он оставался без линейки и без отступа. */
.card > h3,
.card > h4,
.card-head {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin: 0 0 var(--s4); padding-bottom: var(--s3);
  border-bottom: 1px solid var(--n-100);
}
.card-head > h3, .card-head > h4 { border: 0; padding: 0; margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--t-lg); }
.card-head .actions { margin-left: auto; }
/* заголовки внутри формы – просто воздух, без линейки */
.card form h3, .card form h4 { border: 0; padding: 0; margin: var(--s6) 0 var(--s3); display: block; }
.card > h3:first-child, .card > h4:first-child { margin-top: 0; }
.card > h4 { font-size: var(--t-md); font-weight: 650; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: var(--s4); margin-bottom: var(--s4);
}
/* Карточки в ряду равной высоты, а кнопка в каждой прижата к низу: иначе
   в соседних карточках одна и та же кнопка стоит на разной высоте, и ряд
   выглядит собранным наспех. */
.grid-cards > .card { display: flex; flex-direction: column; margin-bottom: 0; }
.grid-cards > .card > .btn:last-child,
.grid-cards > .card > form:last-child { margin-top: auto; align-self: flex-start; }
.grid-cards .card { margin: 0; }
/* Две равноправные сводки в ряду – одной высоты: разная высота даёт рваный
   низ, и ряд перестаёт читаться как ряд. */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); align-items: stretch; }
.cols > .card { height: 100%; }
/* А вот основная колонка и справочная рядом с ней – разной длины по существу,
   и растягивать справочную незачем: получится коробка с пустотой. */
.cols.main-side { align-items: start; }
.cols.main-side > .card { height: auto; }
/* Слева работа, справа справка: половина на половину отдаёт форме слишком мало. */
.cols.main-side { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.cols > * { min-width: 0; }
.cols .card { margin-bottom: 0; }

/* ---- плитки показателей ----
   Не шесть одинаковых квадратов, а строка фактов: крупное число,
   спокойная подпись и тонкая линия состояния слева, когда есть о чём сказать. */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3); margin-bottom: var(--s5);
}
.tile {
  padding: var(--s4) var(--s5); margin: 0; position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--s0);
  transition: border-color .13s ease, box-shadow .13s ease;
}
a.tile:hover { border-color: var(--brand-200); box-shadow: var(--shadow-sm); text-decoration: none; }
.tile .k {
  font-size: var(--t-sm); color: var(--muted); font-weight: 550;
  letter-spacing: 0; order: 1;
  /* Подпись переносится по словам, а место под две строки зарезервировано:
     так числа в соседних плитках всегда стоят на одной высоте и при этом
     ни одна подпись не обрезается многоточием. */
  line-height: 1.3; min-height: 2.6em;
}
.tile .v {
  font-size: var(--t-3xl); font-weight: 680; line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.025em; order: 2; margin-top: var(--s1);
}
.tile .sub { font-size: var(--t-sm); color: var(--muted); order: 3; line-height: 1.4; margin-top: var(--s0); }
.tile .v.warn { color: var(--amber); }
.tile .v.err  { color: var(--red-dark); }
.tile .v.ok   { color: var(--green-dark); }
/* цветная кромка слева – только когда число требует внимания */
.tile:has(.v.warn)::before,
.tile:has(.v.err)::before,
.tile:has(.v.ok)::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: var(--r) 0 0 var(--r);
}
.tile:has(.v.warn)::before { background: var(--amber); }
.tile:has(.v.err)::before  { background: var(--red); }
.tile:has(.v.ok)::before   { background: var(--green); }

/* ========================================================== 6. КНОПКИ === */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sh);
  min-height: var(--control-h); padding: 0 var(--s4);
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--card); color: var(--n-700);
  font-family: inherit; font-size: var(--t-md); font-weight: 600; line-height: 1.2;
  cursor: pointer; white-space: nowrap; text-align: center; user-select: none;
  box-shadow: var(--shadow-xs);
  transition: background .13s ease, border-color .13s ease, color .13s ease, box-shadow .13s ease;
}
.btn:hover { background: var(--surface); border-color: var(--n-300); color: var(--ink); text-decoration: none; }
.btn:active { background: var(--surface-2); box-shadow: none; }
.btn svg { width: 16px; height: 16px; }

.btn-primary {
  background: var(--brand-600); border-color: var(--brand-600); color: #fff;
  box-shadow: 0 1px 2px rgba(1, 85, 90, .22);
}
.btn-primary:hover  { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn-primary:active { background: var(--brand-800); border-color: var(--brand-800); }

.btn-secondary { background: var(--card); color: var(--n-700); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface); color: var(--ink); }

.btn-success { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 1px 2px rgba(11, 93, 56, .22); }
.btn-success:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }

.btn-danger  { background: var(--card); color: var(--red-dark); border-color: var(--red-line); }
.btn-danger:hover  { background: var(--red-bg); color: var(--red-dark); border-color: var(--red); }

.btn-warning { background: var(--card); color: var(--amber); border-color: var(--amber-line); }
.btn-warning:hover { background: var(--amber-bg); color: var(--amber-dark); border-color: var(--amber); }


.btn-sm { min-height: var(--control-h-sm); padding: 0 var(--s3); font-size: var(--t-sm); gap: var(--sh); }
.btn-sm svg { width: 14px; height: 14px; }
.btn-block { width: 100%; white-space: normal; min-height: var(--control-h-lg); }
.btn-block + .btn-block { margin-top: var(--s2); }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--surface); color: var(--n-500); border-color: var(--line-soft);
  cursor: not-allowed; box-shadow: none;
}
/* Белое по светло-серому исчезало совсем: фон темнее, надпись остаётся белой. */
.btn-primary:disabled { background: var(--n-500); border-color: var(--n-500); color: var(--n-0); }

.btn-icon {
  width: var(--control-h); height: var(--control-h); min-height: var(--control-h); padding: 0; flex: none;
  background: var(--card); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  display: inline-grid; place-items: center; cursor: pointer;
  font-size: var(--t-md); line-height: 1; font-family: inherit;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.btn-icon:hover { background: var(--surface); color: var(--ink); border-color: var(--n-300); }
.btn-icon.cf-del:hover, .btn-icon.remove-author:hover, .btn-icon.page-del:hover {
  background: var(--red-bg); color: var(--red-dark); border-color: var(--red-line);
}

/* ========================================================== 7. ФОРМЫ === */
label {
  display: block; font-weight: 600; font-size: var(--t-sm);
  margin-bottom: var(--s4); color: var(--n-700); line-height: 1.4;
}
input, select, textarea {
  width: 100%; max-width: 100%; margin-top: var(--sh);
  min-height: var(--control-h); padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--t-md); font-family: inherit; font-weight: 450;
  background: var(--card); color: var(--ink); line-height: 1.4;
  transition: border-color .13s ease, box-shadow .13s ease;
}
textarea { padding: var(--s2) var(--s3); resize: vertical; min-height: 92px; line-height: 1.55; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--n-300); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
input:disabled, select:disabled, textarea:disabled,
input[readonly] { background: var(--surface); color: var(--muted); cursor: not-allowed; }
input.bad, select.bad, textarea.bad { border-color: var(--red); background: var(--red-bg); }
/* Подсказка в пустом поле – это текст, к ней применим порог 4,5:1.
   На n-400 контраст был 2,9 и на светлом экране подсказка пропадала. */
input::placeholder, textarea::placeholder { color: var(--n-500); }
input[type=date], input[type=number] { min-width: 0; font-variant-numeric: tabular-nums; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; margin-top: 0; accent-color: var(--brand); }
input[type=file] {
  padding: var(--sh) var(--s2); font-size: var(--t-sm); cursor: pointer;
  background: var(--surface); border-style: dashed;
}
input[type=color] { padding: var(--s0); cursor: pointer; }

select {
  appearance: none; padding-right: var(--s7); cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238e98a2' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' d='M1.5 2l4.5 4.5L10.5 2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px;
}

.req { color: var(--red); font-weight: 700; margin-left: var(--s0); }
.hint {
  display: block; color: var(--muted); font-size: var(--t-sm); font-weight: 400;
  margin-top: var(--sh); line-height: 1.5; max-width: 82ch;
}
.field-note { display: flex; align-items: center; padding-top: var(--s5); }

label.check {
  display: flex; align-items: center; gap: var(--s3); font-weight: 500;
  font-size: var(--t-md); cursor: pointer; min-height: var(--control-h); color: var(--n-700);
}
label.check input { flex: none; width: 18px; height: 18px; }
label.check:hover { color: var(--ink); }

fieldset { border: 1px solid var(--line-soft); border-radius: var(--r); padding: var(--s5); margin-bottom: var(--s5); min-width: 0; }
legend { font-weight: 660; padding: 0 var(--s2); font-size: var(--t-md); }

/* Сетки полей. align-items: end прижимает каждое поле к низу своей ячейки,
   поэтому строки ввода стоят на одной линии даже там, где одна подпись
   занимает строку, а соседняя – две. Без этого сетка «прыгает». */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 0 var(--s4); align-items: end; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 0 var(--s4); align-items: end; }
.grid4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 0 var(--s3); align-items: end; }

/* Исключение: если в строке есть пояснение под полем, ячейка с ним становится
   заметно выше соседних, и прижим к низу поднял бы её поле над остальными.
   В таких строках равняемся по верху: подписи там однострочные, и поля всё
   равно встают на одну линию, а пояснение просто свисает вниз. */
.grid2:has(.hint), .grid3:has(.hint), .grid4:has(.hint) { align-items: start; }

.inline { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* ---- простой список записей ----
   Для коротких перечней: пара «студент – руководитель», запрос, файл. Таблица
   здесь лишняя: в узкой колонке она распадается на повтор одних и тех же
   подписей у каждой строки. В списке подпись не нужна – запись говорит сама
   за себя, а состояние и действие стоят справа, на одной вертикали. */
.list { list-style: none; margin: 0; padding: 0; }
.list-row {
  /* Действие равняется по первой строке записи, а не по её середине: запись
     бывает и в две строки, и с цитатой, и кнопка тогда уезжала к подписи. */
  display: flex; gap: var(--s4); align-items: flex-start; flex-wrap: wrap;
  padding: var(--s4) 0; border-top: 1px solid var(--line-soft);
}
.list-row:first-child { border-top: 0; padding-top: var(--s2); }
.list-row:last-child { padding-bottom: 0; }
.list-main { flex: 1 1 200px; min-width: 0; }
.list-main > b { display: block; line-height: 1.35; font-weight: 640; }
.list-main .sub { color: var(--muted); font-size: var(--t-sm); line-height: 1.4; margin-top: var(--s0); }
.list-side { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-left: auto; }
.list-side form { margin: 0; display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---- журнал событий ----
   Время слева отдельной колонкой постоянной ширины: по ней глаз идёт вниз,
   не спотыкаясь о разную длину имён. Дата вынесена в подпись над группой,
   поэтому в строке её нет. */
.list-day {
  font-size: var(--t-sm); font-weight: 600; color: var(--muted);
  padding: var(--s5) 0 var(--s2);
}
.list-day:first-child { padding-top: 0; }
.list-time {
  flex: 0 0 52px; font-size: var(--t-sm); color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 1.45;
}
.list-act { color: var(--n-700); }
/* В журнале имя и действие – одна фраза, а не две строки: «Петрова А. С.
   одобрила статью». Название статьи уходит подписью ниже. */
.log .list-main > b { display: inline; }
.log .list-row { padding: var(--s3) 0; }
.log .list-main .sub { margin-top: var(--s0); }
.list-main > .list-act + .tag { margin-left: var(--s2); vertical-align: 1px; }

/* Ряд действий формы: всегда во всю ширину сетки полей, а не отдельной ячейкой. */
.form-actions {
  grid-column: 1 / -1; display: flex; gap: var(--s2);
  align-items: center; flex-wrap: wrap; margin-top: var(--s2);
}

/* ---- подраздел внутри карточки ----
   Отделён чертой во всю ширину карточки и лежит на подложке: своя рамка
   превратила бы его в «коробку в коробке», из-за которой экран дробится. */
.sub-block {
  margin: var(--s5) calc(var(--s6) * -1) calc(var(--s6) * -1);
  padding: var(--s5) var(--s6);
  border-top: 1px solid var(--line);
  background: var(--surface); border-radius: 0 0 var(--r) var(--r);
}
.sub-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s2); }
.sub-head h4 { margin: 0; border: 0; padding: 0; }
/* Не контейнерный запрос, а обычный: у списка нет предка с container-type,
   поэтому @container здесь не срабатывал вовсе. */
@media (max-width: 560px) {
  .list-side { margin-left: 0; width: 100%; }
}
.inline.wrap label { margin-bottom: var(--s2); margin-right: var(--s3); }
.inline-form { display: flex; gap: var(--s2); align-items: flex-end; margin-top: var(--s3); }
.inline-form input, .inline-form select { margin: 0; }

/* ---- панель отбора ---- */
.filters {
  display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap;
  padding: var(--s4); margin-bottom: var(--s4);
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: var(--r); box-shadow: var(--shadow-xs);
}
/* Подпись над полем, а не рядом с ним. Раньше подпись была просто текстом
   внутри label, а поле – со своей шириной: у поля на всю ширину подпись
   вставала сверху, а у поля «по содержимому» – сбоку. В одной панели
   получались две разные разметки. Колонка это исключает. */
.filters label {
  display: flex; flex-direction: column; gap: var(--sh); margin: 0;
  /* Доля задаётся на подписи, а не на поле: иначе width:100% у поля
     считается от всей панели, поля раздуваются и кнопка уезжает на свою строку. */
  flex: 1 1 180px; max-width: 260px; min-width: 0;
  font-size: var(--t-sm); letter-spacing: 0;
  color: var(--muted); font-weight: 550;
}
.filters input:not([type=checkbox]):not([type=radio]),
.filters select { margin: 0; width: 100%; min-width: 0; }
.filters .grow { flex: 2 1 240px; max-width: none; }
/* Флажок и кнопки стоят на одной линии с полями, а не с подписями */
.filters label.check {
  flex-direction: row; align-items: center; gap: var(--s3);
  min-height: var(--control-h); align-self: flex-end;
  text-transform: none; letter-spacing: 0; font-size: var(--t-md);
  color: var(--n-700); font-weight: 500;
}
/* Кнопка отбора – по своему содержимому. Без явной ширины она растягивалась
   на всю строку и читалась как главное действие страницы, хотя это всего
   лишь «показать по отбору». На узком экране – наоборот, во всю ширину. */
.filters > .btn { align-self: flex-end; flex: 0 0 auto; width: auto; }
/* Внутри карточки панель отбора не рисует себя второй коробкой: она становится
   верхней полосой самой карточки – во всю её ширину, с одной чертой снизу.
   Иначе выходит «коробка в коробке», из-за которой экран выглядит рыхлым. */
.card > .filters {
  margin: 0 calc(var(--s6) * -1) var(--s6);
  padding: var(--s5) var(--s6);
  background: var(--surface); border: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
}
/* Верхняя полоса карточки: своей верхней черты у неё нет – её рисует сама
   карточка, – зато углы скруглены по карточке. */
.card > .filters:first-child {
  margin-top: calc(var(--s6) * -1); border-top: 0;
  border-radius: var(--r) var(--r) 0 0;
}
/* Если в карточке кроме панели ничего нет, она занимает карточку целиком:
   иначе под ней оставалась пустая белая полоса в высоту отступа. */
.card > .filters:only-child {
  margin-bottom: calc(var(--s6) * -1);
  border-bottom: 0; border-radius: var(--r);
}

/* ---- переключатель вариантов ---- */
.seg { display: flex; gap: var(--s2); margin-bottom: var(--s4); flex-wrap: wrap; }
.seg label {
  flex: 1 1 150px; margin: 0; padding: var(--s3) var(--s4); text-align: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  cursor: pointer; font-weight: 600; font-size: var(--t-md); color: var(--n-700);
  transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.seg label:hover { border-color: var(--n-300); background: var(--surface); }
/* Два способа показать выбор: современный :has() и класс от скрипта.
   :has() не поддерживает Firefox ESR, который ставят на рабочие машины,
   а без подсветки не видно, какая роль выбрана. */
.seg label:has(input:checked),
.seg label.on {
  border-color: var(--brand); background: var(--brand-050); color: var(--brand-800);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label:has(input:focus-visible) { box-shadow: var(--focus); }

.sec-num {
  display: inline-grid; place-items: center; width: 24px; height: 24px;
  border-radius: var(--r-xs); background: var(--brand-050); color: var(--brand-800);
  font-size: var(--t-xs); font-weight: 700; margin-right: var(--s2);
  font-variant-numeric: tabular-nums;
}

/* ========================================================= 8. ТАБЛИЦЫ === */
.table-wrap {
  border: 1px solid var(--line-soft); border-radius: var(--r);
  background: var(--card); overflow-x: auto; -webkit-overflow-scrolling: touch;
  container-type: inline-size;
}
.card > .table-wrap, .card .table-wrap { box-shadow: none; }
/* таблица внутри карточки уже обведена карточкой – двойной рамки не нужно */
.card > .table-wrap { border: 0; border-radius: 0; margin: 0 calc(var(--s6) * -1) calc(var(--s6) * -1); width: auto; }
/* Если таблица начинает карточку, она и сверху во всю ширину: иначе над
   шапкой остаётся пустая белая полоса в высоту отступа карточки. */
.card > .table-wrap:first-child { margin-top: calc(var(--s6) * -1); border-radius: var(--r) var(--r) 0 0; }
.card > .table-wrap:first-child > .table { border-radius: var(--r) var(--r) 0 0; }
.card > .table-wrap > .table { border-radius: 0; }
.card > .table-wrap tr:last-child td { border-bottom: 0; }

.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th {
  text-align: left; font-size: var(--t-sm); font-weight: 600;
  letter-spacing: 0; color: var(--muted);
  background: var(--surface); padding: var(--s3) var(--s4); white-space: nowrap;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 1;
}
.table td {
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft);
  vertical-align: top; line-height: 1.5; overflow-wrap: break-word;
}
.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover td { background: var(--n-25); }
.table tbody tr:last-child td { border-bottom: 0; }
.table td b, .table td a b { font-weight: 640; }
.table .muted.small { font-size: var(--t-xs); margin-top: var(--s0); }
.table.small td { padding: var(--sh) var(--s3); font-size: var(--t-sm); }
.table.small th { padding: var(--sh) var(--s3); }
.table tr.inactive td { opacity: .5; }
.table td.right { text-align: right; }
.table td.num, .table th.num { font-variant-numeric: tabular-nums; }
.table select.compact, .table input.num { margin: 0; min-height: var(--control-h-sm); font-size: var(--t-sm); }
.table select.compact { max-width: 160px; }
/* .num на поле ввода задаёт ширину, .num на ячейке – только выравнивание цифр:
   раньше одно правило делало и то и другое, и ячейка сжималась до 66 px. */
.table input.num { width: 66px; min-width: 66px; }
.table td[data-label="Статья"] { min-width: 180px; }
/* Раньше здесь стояло white-space: normal – «чтобы кнопки переносились,
   а не растягивали таблицу». После того как ширины колонок заданы явно,
   растягивать нечего, а перенос ставил кнопки столбиком. */
.table td.right.nowrap { white-space: nowrap; }
.table td.right .inline { justify-content: flex-end; flex-wrap: wrap; gap: var(--sh); }
select.compact { width: auto; margin: 0; min-height: var(--control-h-sm); font-size: var(--t-sm); display: inline-block; }
input.num { width: 76px; }

/* ---- пустое состояние ---- */
.empty {
  text-align: center; padding: var(--s7) var(--s5); color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--r); background: var(--surface);
}
/* Внутри карточки пустое состояние своей рамки не рисует – карточка уже есть.
   Пунктирная рамка в сплошной читается как вторая коробка. */
.card > .empty, .card > form > .empty, .card > div > .empty {
  border: 0; background: none; padding: var(--s6) var(--s4);
}

/* Пустое состояние сводки-врезки – одна спокойная строка, а не плакат.
   Врезку узнаём по тому, что у неё есть заголовок: плакатное пустое состояние
   занимает карточку целиком и заголовка над собой не имеет. Раньше «Очередь
   пуста» и «Пока ничего не происходило» съедали по четверти экрана ради
   двух строк, и рядом стоящие карточки получались разной высоты. */
.card > .card-head + .empty {
  padding: var(--s4) 0 var(--s2);
  text-align: left;
}
.card > .card-head + .empty svg { display: none; }
.card > .card-head + .empty b {
  font-size: var(--t-md); font-weight: 600; color: var(--n-700);
  margin-bottom: var(--s0);
}
.card > .card-head + .empty p {
  font-size: var(--t-sm); margin: 0 0 var(--s3); max-width: 60ch;
  margin-left: 0; margin-right: 0;
}
.card > .card-head + .empty p:last-child { margin-bottom: 0; }
.empty svg { width: 30px; height: 30px; color: var(--n-500); margin-bottom: var(--s3); }
.empty b { display: block; color: var(--ink); font-size: var(--t-lg); font-weight: 640; margin-bottom: var(--sh); }
.empty p { font-size: var(--t-md); margin-bottom: var(--s4); max-width: 46ch; margin-left: auto; margin-right: auto; line-height: 1.55; }
.empty p:last-child { margin-bottom: 0; }

/* ---- полоса готовности ---- */
.progress {
  height: 6px; width: 104px; background: var(--n-100); border-radius: var(--r-pill);
  display: inline-block; vertical-align: middle; margin-right: var(--sh); overflow: hidden;
}
.progress div { height: 100%; background: var(--amber); border-radius: var(--r-pill); transition: width .25s ease; }
.progress div.ok { background: var(--green); }

/* ================================================ 9. СОСТОЯНИЯ И ЗНАЧКИ === */
.tag {
  display: inline-flex; align-items: center; gap: var(--sh);
  padding: var(--s0) var(--s3); border-radius: var(--r-sm);
  font-size: var(--t-xs); font-weight: 650; line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent; max-width: 100%;
  background: var(--surface-2); color: var(--n-600); border-color: var(--line);
}
.tag-gray   { background: var(--surface-2); color: var(--n-600);      border-color: var(--line); }
.tag-blue   { background: var(--blue-bg);   color: var(--blue-dark);  border-color: var(--blue-line); }
.tag-orange { background: var(--amber-bg);  color: var(--amber);      border-color: var(--amber-line); }
.tag-green  { background: var(--green-bg);  color: var(--green-dark); border-color: var(--green-line); }
.tag-red    { background: var(--red-bg);    color: var(--red-dark);   border-color: var(--red-line); }
.tag-brand  { background: var(--brand-050); color: var(--brand-800);  border-color: var(--brand-100); }

/* ---- сообщения ---- */
.flash {
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm); margin-bottom: var(--s3);
  font-size: var(--t-md); border: 1px solid var(--line); background: var(--card);
  line-height: 1.5; box-shadow: var(--shadow-xs);
}
/* Содержимое бывает и строкой, и блоком со списком – правило общее. */
.flash > span, .flash > div { min-width: 0; flex: 1 1 auto; }
.flash ul { margin-top: var(--s2); }
.flash-close {
  background: none; border: 0; font-size: var(--t-xl); line-height: 1; cursor: pointer;
  color: inherit; opacity: .5; padding: 0 var(--s0); flex: none;
}
.flash-close:hover { opacity: 1; }
.flash-success { background: var(--green-bg); border-color: var(--green-line); color: var(--green-dark); }
.flash-error   { background: var(--red-bg);   border-color: var(--red-line);   color: var(--red-dark); }
.flash-info    { background: var(--blue-bg);  border-color: var(--blue-line);  color: var(--blue-dark); }
.flash-warn    { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-dark); }

/* ---- примечание ---- */
.note {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  font-size: var(--t-md); margin-bottom: var(--s4);
  border: 1px solid var(--line-soft); background: var(--surface);
  line-height: 1.55; color: var(--ink-soft);
}
.note > svg { margin-top: var(--s0); width: 18px; height: 18px; flex: none; }
.note > div { min-width: 0; }
.note.info    { background: var(--blue-bg);  border-color: var(--blue-line);  color: var(--blue-dark); }
.note.success { background: var(--green-bg); border-color: var(--green-line); color: var(--green-dark); }
.note.warn    { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber-dark); }
.note.error   { background: var(--red-bg);   border-color: var(--red-line);   color: var(--red-dark); }
.note ul { margin: var(--s2) 0 0 var(--s5); }
.note li { margin-bottom: var(--s1); }
.note code.ph { background: var(--card); border-color: currentColor; color: inherit; opacity: .9; }

/* ---- список проверок готовности ---- */
.checks { list-style: none; }
.checks li {
  padding: var(--s3) 0 var(--s3) var(--s6); position: relative;
  font-size: var(--t-md); border-bottom: 1px solid var(--line-soft); line-height: 1.45;
}
.checks li:last-child { border: 0; padding-bottom: 0; }
.checks li small { display: block; color: var(--muted); font-size: var(--t-sm); margin-top: var(--s0); }
.checks li::before {
  content: ""; position: absolute; left: 1px; top: 16px;
  width: 13px; height: 13px; border-radius: 50%;
  border: 2px solid var(--n-500); background: var(--card);
}
.checks li.ok::before   { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2px var(--card); }
.checks li.bad::before  { border-color: var(--red);   background: var(--red-bg); }
.checks li.warn::before { border-color: var(--amber); background: var(--amber-bg); }

/* ============================================ 10. СПИСКИ И БЛОКИ СТРАНИЦ === */
.person { margin-bottom: var(--s3); }
.person b { font-size: var(--t-md); font-weight: 660; }


.quote {
  background: var(--surface); border-left: 3px solid var(--n-300);
  border-radius: 0 var(--r-xs) var(--r-xs) 0; padding: var(--s2) var(--s3);
  margin-top: var(--s2); font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.55;
}

.timeline { list-style: none; }
.timeline li { padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); font-size: var(--t-sm); }
.timeline li:last-child { border: 0; padding-bottom: 0; }

.notif-list { list-style: none; }
.notif-list li {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft);
  border-radius: var(--r-sm); line-height: 1.5;
}
.notif-list li:last-child { border-bottom: 0; }
.notif-list li.unread { background: var(--brand-050); font-weight: 500; }
.notif-list time { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; }

.student-row {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap;
}
.student-row:last-child { border: 0; padding-bottom: 0; }
.student-articles { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

.chip {
  display: inline-flex; align-items: center; gap: var(--sh);
  padding: var(--s1) var(--s3); border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: var(--t-sm); color: var(--n-700); background: var(--card); font-weight: 500;
}
.chip:hover { border-color: var(--brand-200); color: var(--brand-800); background: var(--brand-050); text-decoration: none; }
.chip-add { border-style: dashed; color: var(--brand-700); }

.section-row { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.section-row input { margin: 0; }
.section-row label { margin: 0; white-space: nowrap; }

.bulk { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }
.versions { list-style: none; font-size: var(--t-sm); }
.versions li { padding: var(--sh) 0; }

.dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); font-size: var(--t-sm); }
.dl dt { font-size: var(--t-sm); color: var(--muted); font-weight: 550; }
.dl dd { min-width: 0; overflow-wrap: anywhere; }

.err-code { font-size: var(--t-3xl); font-weight: 700; color: var(--n-500); line-height: 1; letter-spacing: -.03em; }

/* ---- замечания ---- */
.comments { margin-bottom: var(--s4); }
.comment {
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--line-soft);
  margin-bottom: var(--s2); font-size: var(--t-md); line-height: 1.55;
}
.comment.mine { background: var(--brand-050); border-color: var(--brand-100); }
.comment-head { margin-bottom: var(--s1); font-size: var(--t-sm); color: var(--muted); }
.comment-head b { font-size: var(--t-md); color: var(--ink); font-weight: 640; }

/* ======================================================= 11. СТАТЬЯ === */
.show-cols { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--s4); align-items: start; }
.show-main, .show-side, .form-main, .form-side, .tpl-main, .tpl-side { min-width: 0; }
.show-side .card, .show-main .card { margin-bottom: var(--s4); }
.form-side .sticky, .tpl-side .sticky, .show-side .sticky { position: sticky; top: calc(var(--header-h) + var(--s4)); }

.article-title { font-size: var(--t-2xl); line-height: 1.25; max-width: 52ch; margin-top: var(--s1); letter-spacing: -.02em; }
.meta { display: flex; gap: var(--s2) var(--s5); flex-wrap: wrap; align-items: center; font-size: var(--t-sm); margin-top: var(--s3); }
.meta b { font-weight: 550; color: var(--muted); font-size: var(--t-sm); margin-right: var(--s1); }


/* ---- форма статьи ---- */
.article-form { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s4); align-items: start; }
.author-row {
  display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-end;
  margin-bottom: var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft);
}
.author-row label { flex: 1 1 165px; min-width: 0; margin-bottom: 0; }
.author-row > label:first-of-type { flex: 2 1 230px; }
.author-row .author-fio { min-width: 0; }
.author-row:last-child { border-bottom: 0; padding-bottom: 0; }
.author-row .btn-icon { margin-bottom: var(--s0); }

.counter { font-size: var(--t-xs); color: var(--muted); font-weight: 650; margin-left: var(--sh); font-variant-numeric: tabular-nums; }
.counter.bad { color: var(--red-dark); }
.counter.ok  { color: var(--green-dark); }

.as-printed {
  margin: var(--sh) 0 0; font-size: var(--t-sm); color: var(--muted);
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-xs); padding: var(--sh) var(--s3); line-height: 1.5;
}
.as-printed b { color: var(--ink); font-weight: 600; }

.kw-chips { display: flex; flex-wrap: wrap; gap: var(--sh); margin: -var(--s3) 0 var(--s4); }
.kw-chip {
  font-size: var(--t-xs); padding: var(--s0) var(--s3); border-radius: var(--r-pill);
  background: var(--brand-050); color: var(--brand-800); border: 1px solid var(--brand-100);
}
.ref-tools { display: flex; gap: var(--sh); align-items: center; flex-wrap: wrap; margin-bottom: var(--s2); }
.live-toggle { margin: var(--s1) 0 var(--s3); }
.live-preview { max-height: 62vh; overflow: auto; padding: var(--s2); margin-bottom: var(--s3); }
.live-preview .doc-page { width: 210mm; zoom: .42; }

.autosave {
  display: inline-flex; align-items: center; gap: var(--sh);
  font-size: var(--t-sm); color: var(--muted); padding: var(--sh) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  font-weight: 600; max-width: 100%; white-space: normal; line-height: 1.35;
}
.autosave.saving { color: var(--blue-dark);  border-color: var(--blue-line);  background: var(--blue-bg); }
.autosave.saved  { color: var(--green-dark); border-color: var(--green-line); background: var(--green-bg); }
.autosave.error  { color: var(--red-dark);   border-color: var(--red-line);   background: var(--red-bg); }
.autosave svg { width: 15px; height: 15px; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.formbar { display: none; }

/* ================================================= 12. РЕДАКТОР ТЕКСТА === */
.editor-toolbar {
  display: flex; gap: var(--s0); flex-wrap: wrap; min-width: 0; max-width: 100%; padding: var(--sh);
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--surface); position: sticky; top: var(--header-h); z-index: 5;
}
.editor-toolbar button {
  border: 1px solid transparent; background: transparent; padding: 0 var(--s2);
  height: var(--control-h-sm); min-width: var(--control-h-sm); border-radius: var(--r-xs); cursor: pointer;
  font: inherit; font-size: var(--t-sm); color: var(--n-600); touch-action: manipulation;
  transition: background .1s ease, color .1s ease;
}
.editor-toolbar button:hover { background: var(--card); border-color: var(--line); color: var(--ink); }
.editor-toolbar button.on { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-800); }
.editor-toolbar .sep { width: 1px; background: var(--line); margin: var(--s1) var(--s0); }

.editor {
  min-height: 380px; max-height: 70vh; overflow: auto;
  border: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: var(--s5) var(--s6); background: var(--card); color: var(--ink);
  font-family: "Times New Roman", Times, serif; font-size: 1.0625rem; line-height: 1.6;
}
.editor:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus); }
.editor:empty::before { content: attr(data-placeholder); color: var(--n-500); font-family: var(--font); font-size: var(--t-md); }
.editor p { margin: 0 0 var(--s2); text-indent: 1.25cm; text-align: justify; }
.editor h2 { font-family: inherit; font-size: 1.05em; text-align: center; font-weight: 700; margin: var(--s4) 0 var(--s2); }
.editor h3 { font-family: inherit; font-size: 1em; font-style: italic; font-weight: 700; margin: var(--s3) 0 6px; }
.editor table { border-collapse: collapse; width: 100%; margin: var(--s3) 0; font-size: .9em; table-layout: fixed; }
.editor td, .editor th { border: 1px solid var(--n-300); padding: 4px var(--s2); vertical-align: top; min-width: 28px; position: relative; }
.editor th { background: var(--surface); }
.editor td.sel, .editor th.sel { outline: 2px solid var(--brand); outline-offset: -2px; background: var(--brand-050); }
.editor img { max-width: 100%; display: block; margin: var(--s2) auto; cursor: pointer; border-radius: 0; }
.editor img.sel { outline: 3px solid var(--brand); outline-offset: 2px; }
.editor blockquote { margin: var(--s2) 0 var(--s2) 1cm; font-style: italic; }
.editor p[align=center] { text-align: center; text-indent: 0; }
.editor p[align=right]  { text-align: right;  text-indent: 0; }
.editor p[align=left]   { text-align: left; }
.editor ol, .editor ul { margin: var(--s2) 0 var(--s2) 1.2cm; }
.editor li { margin-bottom: 3px; text-align: justify; }

/* всплывающая панель для рисунка и таблицы */
.floatbar {
  position: absolute; z-index: 30; display: flex; align-items: center;
  gap: var(--s2); flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg); padding: var(--s2) var(--s3);
  font-size: var(--t-sm); max-width: min(520px, 92vw);
}
.floatbar .btn { min-height: var(--control-h-sm); padding: 0 var(--s3); font-size: var(--t-sm); }
.floatbar input[type=range] { width: 120px; margin: 0; min-height: 0; padding: 0; border: 0; background: none; accent-color: var(--brand); }
.floatbar .fb-val { font-variant-numeric: tabular-nums; min-width: 42px; color: var(--muted); font-weight: 600; }
.floatbar .fb-group { display: flex; gap: var(--s0); }
.col-grip { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.col-grip:hover { background: var(--brand-100); }

/* ============================================ 13. ПРЕДПРОСМОТР ДОКУМЕНТА === */
.doc-wrap {
  background: var(--n-100); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: var(--s5); overflow: auto;
  container-type: inline-size;
}
@container (max-width: 860px) { .doc-wrap .doc-page { zoom: .86; } }
@container (max-width: 740px) { .doc-wrap .doc-page { zoom: .74; } }
@container (max-width: 560px) { .doc-wrap .doc-page { zoom: .62; } }
@container (max-width: 480px) {
  .doc-wrap .doc-page { zoom: 1; width: 100% !important; min-height: 0 !important; padding: var(--s4) !important; font-size: 13pt !important; }
}
.doc-page {
  width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; color: #000;
  word-wrap: break-word; box-shadow: var(--shadow); border: 1px solid var(--n-200);
}
.doc-page p { margin: 0; }
.doc-page sup { vertical-align: super; font-size: .75em; }
.doc-page sub { vertical-align: sub; font-size: .75em; }
.doc-table { width: 100%; border-collapse: collapse; margin: 4pt 0 6pt; }
.doc-table td, .doc-table th { border: 1px solid #000; padding: 2pt 5pt; vertical-align: middle; line-height: 1.15; }
.doc-table th { font-weight: 700; text-align: center; }
.doc-table p { text-indent: 0 !important; }
.doc-pagebreak { border-top: 1px dashed #b9c4bd; margin: 16pt 0; text-align: center; position: relative; height: 0; }
.doc-pagebreak span { position: relative; top: -9px; background: #fff; color: #5f6a62; font-size: 10px; padding: 0 var(--s2); font-family: var(--font); }
.doc-toc-entry { display: flex; align-items: baseline; gap: 4px; }
.doc-toc-dots { flex: 1; border-bottom: 1px dotted #000; min-width: 20px; transform: translateY(-4px); }
.doc-toc-page { min-width: 1.5em; text-align: right; }
.doc-missing { color: var(--red-dark); font-style: italic; text-align: center; }
.scaled .doc-page { zoom: .62; }

/* ============================================= 14. ШАБЛОН И СТРАНИЦЫ === */
.tpl-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); gap: var(--s4); align-items: start; }
.tpl-side .doc-wrap { max-height: calc(100vh - 140px); padding: var(--s3); }
.tpl-side details summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--brand-700); margin-bottom: var(--s2); display: none; }

.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: var(--s3); align-items: stretch; }
/* Готовые шаблоны: карточки одной высоты, кнопка всегда внизу.
   Раньше кнопка стояла справа вверху, а описания разной длины делали ряд рваным. */
.preset {
  display: flex; flex-direction: column; gap: var(--s4);
  border: 1px solid transparent; border-radius: var(--r);
  padding: var(--s5); background: var(--surface); height: 100%;
  transition: border-color .13s ease, background .13s ease;
}
.preset:hover { border-color: var(--brand-200); background: var(--card); box-shadow: var(--shadow-xs); }
.preset-body { display: flex; flex-direction: column; gap: var(--sh); flex: 1 1 auto; min-width: 0; }
.preset b { font-size: var(--t-md); font-weight: 650; line-height: 1.3; }
.preset-body span { color: var(--muted); font-size: var(--t-sm); line-height: 1.5; }
.preset .btn { flex: none; width: 100%; }

.block {
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
  margin-bottom: var(--s2); background: var(--card);
  transition: border-color .13s ease;
}
.block:hover { border-color: var(--line); }
.block summary {
  display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4);
  cursor: pointer; list-style: none; flex-wrap: wrap; border-radius: var(--r-sm);
}
.block summary::-webkit-details-marker { display: none; }
.block summary:hover { background: var(--surface); }
.block summary b { font-size: var(--t-md); font-weight: 640; }
.block summary label { margin: 0; }
.block[open] > summary { border-bottom: 1px solid var(--line-soft); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.block-move { margin-left: auto; display: flex; gap: var(--s1); }
.block-body { padding: var(--s5) var(--s4) var(--s2); background: var(--surface); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.block[data-disabled] { background: var(--surface); opacity: .72; }
.block[data-disabled] summary b { color: var(--muted); }

.cf-row { display: grid; grid-template-columns: 1fr 1.5fr .9fr 1.3fr 1.3fr auto 34px; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.cf-row input, .cf-row select, .cf-row label { margin: 0; }
.cf-row input[readonly] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; }

.sticky-bottom {
  position: sticky; bottom: var(--s3); z-index: 3;
  display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  /* Подложка сплошная. Полупрозрачная выглядела нарядно, но текст на ней
     падал ниже нормы контраста, а на старых браузерах blur не работает вовсе. */
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.sticky-bottom .btn { flex: none; }
.sticky-bottom .muted { flex: 1 1 220px; min-width: 0; }
.import-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

.logo-preview {
  display: flex; align-items: center; gap: var(--s4); margin: var(--s2) 0 var(--s3);
  padding: var(--s4); background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r-sm);
}
.logo-preview img { height: 52px; max-width: 200px; }
.logo-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 60px; height: 60px; border-radius: var(--r); background: var(--brand); color: #fff;
}
.logo-chip .emblem, .logo-chip img { height: 36px; width: auto; display: block; }

/* ---- карточка служебной страницы сборника ---- */
.page-card { position: relative; }
.page-card[data-off] { opacity: .68; }
.page-card[data-off] .page-editor { opacity: .7; }
.page-card[data-off] .card-head h3::after {
  content: 'не печатается'; margin-left: var(--s2); padding: var(--s0) var(--s2);
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted);
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0; text-transform: none;
}
.page-editor { position: relative; margin-top: var(--s3); }
.page-editor .editor { min-height: 170px; }
.page-editor .editor p { text-indent: 0; text-align: left; }
.page-editor .editor p[align=center]  { text-align: center; }
.page-editor .editor p[align=right]   { text-align: right; }
.page-editor .editor p[align=justify] { text-align: justify; }
#tp-editor[hidden] { display: none; }

/* ================================================= 15. МОДАЛЬНЫЕ ОКНА === */
.modal {
  position: fixed; inset: 0; background: rgba(22, 29, 34, .48);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  z-index: 80; display: flex; align-items: center; justify-content: center;
  padding: var(--s5); animation: fade .14s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal-box {
  background: var(--card); border-radius: var(--r);
  width: min(980px, 100%); max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-lg);
  animation: lift .16s cubic-bezier(.2, .8, .3, 1);
}
@keyframes lift { from { transform: translateY(10px) scale(.99); opacity: .6; } }
.modal-box.small { width: min(540px, 100%); }
.modal-head {
  display: flex; gap: var(--s3); align-items: center;
  padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line-soft); flex: none;
}
.modal-head b { font-size: var(--t-lg); font-weight: 640; min-width: 0; }
.modal-head .btn-icon { margin-left: auto; }
.modal-body { overflow: auto; padding: var(--s5); flex: 1 1 auto; min-height: 0; }
.modal-body.doc-wrap { padding: var(--s5); border: 0; border-radius: 0; }
.modal-foot {
  display: flex; gap: var(--s2); justify-content: flex-end; flex-wrap: wrap;
  padding: var(--s4) var(--s5); border-top: 1px solid var(--line-soft);
  background: var(--surface); flex: none;
}
.modal-foot .btn { min-width: 118px; }
body.modal-open { overflow: hidden; }

.dlg-text { margin: 0; color: var(--ink-soft); line-height: 1.6; overflow-wrap: break-word; }
.dlg-fields { display: grid; gap: var(--s3); margin-top: var(--s5); }
.dlg-fields label { display: grid; gap: var(--sh); margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--n-700); }
.dlg-fields input { margin: 0; }

/* ======================================================== 16. ВХОД === */
.auth-wrap {
  min-height: calc(100vh - var(--header-h));
  display: grid; place-items: center;
  padding: var(--s8) var(--s4) var(--s7);
}
.auth-card {
  width: min(430px, 100%); padding: var(--s7) var(--s7) var(--s6);
  border-radius: var(--r); box-shadow: var(--shadow); border-color: var(--line-soft);
  margin: 0;
}
.auth-card h1 { font-size: var(--t-2xl); margin-bottom: var(--s2); text-align: center; }
.auth-card > p.muted { text-align: center; font-size: var(--t-md); margin-bottom: var(--s6); line-height: 1.55; }
.auth-logo { display: grid; place-items: center; margin-bottom: var(--s5); }
.auth-logo img {
  height: 62px; width: auto; background: var(--brand);
  border-radius: var(--r); padding: var(--s3);
}
.auth-form { margin-top: var(--s2); }
.auth-form label { margin-bottom: var(--s4); }
.auth-form .btn-block { margin-top: var(--s5); font-size: var(--t-md); }
.auth-foot { text-align: center; color: var(--muted); font-size: var(--t-sm); margin-top: var(--s5); }
.auth-card p.center { margin-top: var(--s4); }

/* ======================================================= 17. АДАПТИВ === */

/* ---- планшет: боковое меню уезжает в выдвижную панель ---- */
@media (max-width: 1179.98px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .burger { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 60;
    width: 284px; height: 100%; padding-top: calc(var(--s4) + env(safe-area-inset-top));
    transform: translateX(-100%); visibility: hidden;
    transition: transform .22s cubic-bezier(.3, .8, .3, 1), visibility .22s;
    box-shadow: var(--shadow-lg); border-right: 1px solid var(--line);
  }
  body.drawer .sidebar { transform: none; visibility: visible; }
  body.drawer .drawer-back {
    display: block; position: fixed; inset: 0; z-index: 55;
    background: rgba(22, 29, 34, .45); animation: fade .16s ease;
  }
  .article-form, .tpl-layout, .show-cols { grid-template-columns: minmax(0, 1fr); }
  .form-side .sticky, .tpl-side .sticky, .show-side .sticky { position: static; }

  /* С этой ширины боковая колонка перестаёт быть липкой, и кнопки сохранения
     уезжают в самый низ самой длинной страницы системы. Поэтому ровно здесь
     появляется нижняя панель действий – и здесь же убирается липкая полоса,
     иначе на экране оказываются две одинаковые кнопки «Сохранить». */
  /* нижняя панель действий формы – всегда под рукой */
  .formbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--card); border-top: 1px solid var(--line);
    padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom));
    gap: var(--s2); box-shadow: 0 -2px 12px rgba(22, 29, 34, .10);
  }
  .formbar .btn { flex: 1; }
  body.has-formbar .content { padding-bottom: calc(var(--formbar-h) + env(safe-area-inset-bottom)); }
  .sticky-bottom { display: none; }
  .scaled .doc-page { zoom: .8; }
  .tpl-side details summary { display: block; }
  .tpl-side .doc-wrap { max-height: none; }
  .editor-toolbar { top: 0; }
}

/* ---- узкий ноутбук и планшет ---- */
@media (max-width: 900px) {
  :root { --pad-x: var(--s5); }
  .topbar-user { display: none; }
  /* .cols.main-side задан двумя классами и сам по себе пересиливал это
     правило: боковая колонка оставалась рядом с основной и на телефоне. */
  .cols, .cols.main-side, .grid-cards { grid-template-columns: 1fr; gap: var(--s3); }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--s2); }
  .tile { padding: var(--s3) var(--s4); }
  .tile .v { font-size: var(--t-2xl); }
  .grid3, .grid4 { grid-template-columns: 1fr 1fr; }
  .page-head .actions { width: 100%; }
  /* Кнопки шапки делят строку поровну. При flex-basis: auto длинная надпись
     забирала себе больше места, и соседние кнопки выходили разной ширины. */
  .page-head .actions .btn { flex: 1 1 0; }
  .filters, .card > .filters { padding: var(--s3); }
  .filters label, .filters .grow { flex: 1 1 100%; }
  .filters input:not([type=checkbox]):not([type=radio]),
  .filters select { width: 100%; min-width: 0; }
  .author-row .btn-icon { flex: 1 0 100%; width: 100%; }
  .editor-toolbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .editor-toolbar::-webkit-scrollbar { display: none; }
  .editor-toolbar button { height: var(--control-h); min-width: var(--control-h); flex: none; }
  .editor { padding: var(--s4); max-height: none; min-height: 300px; }
  .doc-wrap { padding: 0; border: 0; background: transparent; }
  .doc-page { width: 100% !important; min-height: 0 !important; padding: var(--s4) !important; font-size: 13pt !important; box-shadow: var(--shadow-sm); }
  .doc-table { font-size: 10pt !important; }
  .modal { padding: 0; align-items: stretch; }
  .modal-box, .modal-box.small {
    width: 100%; max-height: none; border-radius: 0; height: 100%;
    padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-body { padding: var(--s4); }
  .modal-body.doc-wrap { padding: var(--sh); }
  .student-row { flex-direction: column; }
  .scaled .doc-page, .live-preview .doc-page { zoom: 1; width: 100% !important; }
  .import-grid, .cf-row { grid-template-columns: 1fr; }
  .table select.compact, .table input.num, select.compact { font-size: 16px; min-height: var(--control-h); max-width: 100%; }
  input.num { width: 100%; }
  .btn-sm { min-height: var(--control-h); }
  .btn-icon { width: var(--control-h); height: var(--control-h); }

}

/* ---- телефон ---- */
@media (max-width: 700px) {
  /* Поля отбора занимают всю строку – и кнопка тоже, иначе она висит
     одиноким огрызком под полями во всю ширину. */
  .filters label, .filters .grow { max-width: none; }
  .filters > .btn { width: 100%; flex: 1 0 100%; }
  :root { --pad-x: var(--s4); }
  .content { padding-top: var(--s5); }
  .card { padding: var(--s5) var(--s4); border-radius: var(--r-sm); }
  .card > .filters {
    margin: 0 calc(var(--s4) * -1) var(--s5);
    padding: var(--s4); border-radius: 0;
  }
  .sub-block {
    margin: var(--s4) calc(var(--s4) * -1) calc(var(--s5) * -1);
    padding: var(--s4); border-radius: 0 0 var(--r-sm) var(--r-sm);
  }
  .card > .filters:first-child {
    margin-top: calc(var(--s5) * -1);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
  }
  .card > .filters:only-child {
    margin-bottom: calc(var(--s5) * -1); border-radius: var(--r-sm);
  }
  .card > .table-wrap { margin: 0 calc(var(--s4) * -1) calc(var(--s5) * -1); }
  .card > .table-wrap:first-child { margin-top: calc(var(--s5) * -1); border-radius: var(--r-sm) var(--r-sm) 0 0; }
  .grid2, .grid3, .grid4, .author-row { grid-template-columns: 1fr; }
  .author-row .btn-icon { grid-column: auto; }
  .seg { flex-direction: column; }
  .dl { grid-template-columns: 1fr; gap: var(--s0) 0; }
  .dl dt { margin-top: var(--s2); }
  .meta .tag { white-space: normal; }
  .brand small { display: none; }
  .brand img, .brand .emblem { height: 28px; }
  .brand b { font-size: var(--t-sm); letter-spacing: .06em; }
  .page-head h1 { font-size: var(--t-xl); }
  .article-title { font-size: var(--t-xl); }
  .auth-card { padding: var(--s6) var(--s5); }
  .auth-wrap { padding: var(--s5) var(--s4) var(--s6); }
}

/* ---- таблица сама решает, когда стать карточками ----
   Смотрим не на ширину экрана, а на ширину колонки, в которой стоит таблица:
   на широком мониторе таблица в узкой колонке тоже не помещается. */
@container (max-width: 760px) {
  .table.stack { font-size: var(--t-md); display: block; width: 100%; }
  .table.stack thead { display: none; }
  .table.stack tbody { display: block; }
  /* Строка таблицы на узком экране становится записью списка, а не отдельной
     карточкой: карточка уже есть – та, в которой лежит таблица. Две вложенные
     рамки делали экран рыхлым, а содержимое – мелким. Записи разделяет черта. */
  .table.stack tr {
    display: block; border: 0; border-top: 1px solid var(--line-soft);
    border-radius: 0; padding: var(--s4) 0; margin: 0;
    background: none; box-shadow: none;
  }
  .table.stack tbody tr:first-child { border-top: 0; padding-top: var(--s2); }
  .table.stack tbody tr:last-child { padding-bottom: 0; }
  .table.stack td {
    display: flex; gap: var(--s4); padding: var(--s0) 0; border: 0;
    align-items: baseline; flex-wrap: wrap; min-width: 0; font-size: var(--t-sm);
    line-height: 1.45;
  }
  /* Кнопки и метки состояния выше строки текста, поэтому равняем их по центру:
     по базовой линии кнопка «села» бы ниже своей подписи. */
  .table.stack td.right, .table.stack td:has(> .tag) { align-items: center; }
  .table.stack td > * { min-width: 0; }
  .table.stack td input.num, .table.stack td select, .table.stack td input[type=text] { width: 100%; max-width: none; }
  /* Подпись – колонка постоянной ширины, а не доля от строки. При доле в 38 %
     короткая подпись оставляла между собой и значением пустоту в полстроки,
     и на каждой записи она была разной. Постоянные 116 px ставят все значения
     на одну вертикаль – по ней запись и читается. */
  .table.stack td::before {
    content: attr(data-label); flex: 0 0 116px; max-width: 116px; min-width: 0;
    font-size: var(--t-xs); color: var(--muted); font-weight: 650; line-height: 1.45;
    letter-spacing: .01em; overflow-wrap: break-word; hyphens: auto;
  }
  .table.stack td:not([data-label])::before { display: none; }
  .table.stack td.right { justify-content: flex-start; }
  .table.stack td.right .inline { justify-content: flex-start; }
  /* Кнопки в карточке идут в ряд и переносятся по надобности. Ширина 100 %
     доставалась только кнопке-ссылке: формы её не получали, и ряд выходил
     ступенькой – одна кнопка во всю ширину, две под ней. */
  .table.stack td.right { display: flex; flex-wrap: wrap; gap: var(--sh); }
  .table.stack td.right .btn { width: auto; flex: 0 1 auto; }
  .table.stack td.right form { margin: 0; }
  .table.stack tbody tr:hover td { background: none; }
  .table.stack .tag { white-space: normal; }
  .table.stack select.compact { max-width: 100%; }
}

/* ---- совсем узкие экраны ---- */
@media (max-width: 400px) {
  .btn { white-space: normal; max-width: 100%; }
  .actions, .inline, .btn-row { flex-wrap: wrap; }
  .tiles { grid-template-columns: 1fr 1fr; }
}

/* ---- уважение к системным настройкам ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

/* ========================================================== 18. ПЕЧАТЬ === */
@media print {
  /* Классовые цвета ссылок сильнее простого «a», поэтому перечисляем их. */
  a, .link, .chip, .chip-add, .more-list a, .fold > summary,
  .tpl-side details summary, .seealso { color: #000 !important; }
  .topbar, .sidebar, .drawer-back, .formbar, .footer, .foot,
  .page-head .actions, .show-side, .flash, .decision, .editor-toolbar,
  #comments, .crumbs, .meta, .filters, .presets, .sticky-bottom { display: none !important; }
  .shell { display: block; max-width: none; }
  .content { padding: 0; background: #fff; }
  .show-cols, .article-form, .tpl-layout { grid-template-columns: 1fr; }
  .card { border: 0; padding: 0; box-shadow: none; margin-bottom: 12pt; }
  .doc-wrap { background: #fff; padding: 0; border: 0; }
  .doc-page { box-shadow: none; border: 0; margin: 0; width: auto !important; min-height: 0 !important; }
  a { color: #000; text-decoration: none; }
}

/* ============================================ 19. ДОБАВЛЕННЫЕ КОМПОНЕНТЫ === */

/* ---- постоянная панель сохранения ----
   Раньше единственная кнопка «Сохранить» на экране «Титул и страницы» лежала
   в .formbar, которая показывается только на узких экранах. На компьютере
   титульный лист редактировался без возможности сохранить. */
.savebar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-radius: var(--r);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.savebar .btn { flex: none; }
.savebar .muted { flex: 1 1 240px; min-width: 0; }
.formbar-in { display: flex; gap: var(--s2); align-items: center; width: 100%; }
.formbar-in .btn { flex: 1; }
@media (max-width: 900px) {
  /* на узком экране снизу уже есть .formbar – вторая панель была бы дублем */
  .savebar { display: none; }
}

/* ---- список подстановок ---- */
.ph-list { margin-top: var(--s3); }
.ph-list > summary {
  cursor: pointer; font-weight: 640; padding: var(--s1) 0;
  list-style: none; display: inline-flex; align-items: center; gap: var(--sh);
}
.ph-list > summary::-webkit-details-marker { display: none; }
.ph-list > summary::before { content: '▸'; font-size: .8em; transition: transform .15s ease; }
.ph-list[open] > summary::before { transform: rotate(90deg); }
.ph-ul {
  list-style: none; margin: var(--s2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--sh) var(--s4);
}
.ph-ul li { display: flex; gap: var(--sh); align-items: baseline; line-height: 1.5; }
.ph-ul code.ph { flex: none; }
.ph-ul code.ph:hover { background: var(--card); border-color: var(--brand); }

/* ---- точка состояния рядом с названием статьи ---- */
.chip { min-height: 32px; max-width: 100%; }

/* ================================================= 20. ВЫГРУЗКА СБОРНИКА === */
/* Выгрузка – кульминация работы: не ряд одинаковых серых кнопок,
   а понятные карточки, где видно, что именно получишь. */
.export-card { border-color: var(--line); }
.export-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3); margin-top: var(--s2);
}
.export-tile {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4); border: 1px solid transparent;
  border-radius: var(--r); background: var(--surface); color: var(--ink);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease, background .14s ease;
}
.export-tile:hover {
  text-decoration: none; border-color: var(--brand-200); background: var(--brand-050);
  box-shadow: var(--shadow-xs);
}
.export-tile:active { transform: none; }
.export-tile .et-ico {
  display: grid; place-items: center; flex: none;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--n-500);
}
.export-tile .et-ico svg { width: 19px; height: 19px; }
.export-tile .et-txt { display: flex; flex-direction: column; gap: var(--s0); min-width: 0; }
.export-tile b { font-size: var(--t-md); font-weight: 640; line-height: 1.3; }
.export-tile small { font-size: var(--t-sm); color: var(--muted); line-height: 1.45; }
.export-tile.primary {
  border-color: var(--brand); background: var(--brand-050);
  box-shadow: 0 1px 2px rgba(1, 85, 90, .12);
}
.export-tile.primary .et-ico { background: var(--brand-600); color: #fff; }
.export-tile.primary b { color: var(--brand-800); }
.export-tile.primary:hover { border-color: var(--brand-700); background: var(--brand-100); }

/* ---- разделитель секции внутри состава сборника ---- */
.table tr.section-head td {
  background: var(--surface); font-weight: 650; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .06em; color: var(--n-600);
  padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line);
}
.table tbody tr.section-head:hover td { background: var(--surface); }
@container (max-width: 760px) {
  .table.stack tr.section-head {
    display: block; background: none; border: 0; box-shadow: none;
    padding: var(--s3) var(--s3) 0; margin: 0;
  }
  .table.stack tr.section-head td {
    display: block; background: none; border: 0; padding: 0;
    font-size: var(--t-xs); color: var(--n-600);
  }
  .table.stack tr.section-head td::before { display: none; }
}

/* ---- массовые действия ---- */
.bulk-row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; margin-top: var(--s3); }
.bulk-label { font-size: var(--t-sm); color: var(--muted); font-weight: 600; }
.bulk-label b { color: var(--muted); font-variant-numeric: tabular-nums; }
.bulk-label b.on { color: var(--brand-800); }
.sep-v { width: 1px; align-self: stretch; background: var(--line); margin: 0 var(--s1); }

/* ---- опасная зона в карточке ---- */
.danger-zone {
  margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px dashed var(--line);
}
.danger-zone p { margin: 0; }

/* ---- строка отметки в таблице ---- */
.table td.check input { width: 17px; height: 17px; margin: var(--s0) 0 0; }
@media (max-width: 900px) {
  .export-grid { grid-template-columns: 1fr; }
  .bulk-row .btn, .bulk-row select { flex: 1 1 auto; }
  .sep-v { display: none; }
}

/* ---- ширины колонок в составе сборника: название получает весь запас ---- */
.table th.c-check   { width: 36px; }
.table th.c-title   { width: auto; min-width: 240px; }
/* Колонка с человеком: «Смирнова М. А.» должна помещаться в строку целиком.
   На 124 px инициалы переносились и читались как обрывок. */
.table th.c-person  { width: 152px; }
.table td[data-label="Автор"] .muted,
.table td[data-label="Руководитель"] { white-space: nowrap; }
.table th.c-status  { width: 132px; }
.table th.c-pct     { width: 84px; text-align: right; }
.table th.c-section { width: 168px; }
.table th.c-order   { width: 80px; }
/* Перенос разрешён только там, где в ячейке длинный текст: фамилия автора
   с названием группы. Инициалы и фамилия руководителя не рвутся – см. выше. */
.table td[data-label="Автор"] { white-space: normal; }

/* ================================================== 21. КАБИНЕТ СТУДЕНТА === */
/* Блок следующего шага. Одна задача, одна кнопка – чтобы человек, открывший
   кабинет впервые, не гадал, с чего начинать. */
.next-step {
  display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s5) var(--s6);
}
.next-step .ns-body { flex: 1 1 320px; min-width: 0; }
.next-step h3 { margin: 0 0 var(--s1); border: 0; padding: 0; color: var(--brand-800); }
.next-step p { margin: 0; color: var(--ink-soft); font-size: var(--t-md); }
.next-step .btn { flex: none; }

/* ---- «Как это работает»: свёрнуто для тех, кто уже понял ---- */
.how-to > summary {
  cursor: pointer; list-style: none; padding: var(--s1) 0;
  display: flex; align-items: center; gap: var(--sh);
}
.how-to > summary::-webkit-details-marker { display: none; }
.how-to > summary::before { content: '▸'; color: var(--muted); transition: transform .15s ease; }
.how-to[open] > summary::before { transform: rotate(90deg); }
.how-steps { margin: var(--s4) 0 0; padding-left: 1.35rem; }
.how-steps li { margin-bottom: var(--sh); line-height: 1.55; color: var(--ink-soft); }
.how-steps li::marker { color: var(--brand-700); font-weight: 700; }

/* ---- полоса готовности в таблице ---- */
.table td[data-label="Готовность"] .progress { margin-bottom: var(--s0); }

@media (max-width: 700px) {
  .next-step { padding: var(--s4); gap: var(--s3); }
  .next-step .btn { width: 100%; }
}

/* ==================================================== 22. БЫСТРЫЕ ВИДЫ === */
/* Ряд над таблицей: то, к чему возвращаются каждый день, – в один щелчок. */
.views {
  display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4);
}
.view {
  display: inline-flex; align-items: center; gap: var(--sh);
  min-height: var(--control-h-sm); padding: 0 var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--card); color: var(--n-700);
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
  transition: border-color .13s ease, background .13s ease, color .13s ease;
}
.view:hover { text-decoration: none; border-color: var(--n-300); background: var(--surface); color: var(--ink); }
.view b {
  font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--muted); font-size: var(--t-xs);
  background: var(--surface); border-radius: var(--r-pill); padding: var(--s0) var(--sh);
}
.view.on {
  border-color: var(--brand); background: var(--brand-050); color: var(--brand-800);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.view.on b { background: var(--brand-600); color: #fff; }

/* ================================================== 23. КАРТОЧКА СТАТЬИ === */
/* Решение по статье – отдельный блок с подписью в разметке,
   а не текст в псевдоэлементе: подпись зависит от роли. */
.decision { padding: var(--s4) var(--s5); border-color: var(--line); }
.decision-label {
  font-size: var(--t-sm); font-weight: 600; color: var(--muted); margin-bottom: var(--s3);
}
.decision-row { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }
.decision-row form { margin: 0; }

/* последнее замечание – первым блоком в боковой колонке */
.note-card { border-color: var(--amber-line); background: var(--amber-bg); }
.note-card h4 { color: var(--amber-dark); }
.note-card .card-head { border-bottom-color: var(--amber-line); }
.note-card p { margin: var(--s2) 0 0; line-height: 1.55; color: var(--n-700); }

/* меню «Ещё» для редких форматов выгрузки */
.more-menu { position: relative; }
.more-menu > summary { list-style: none; cursor: pointer; }
.more-menu > summary::-webkit-details-marker { display: none; }
.more-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  min-width: 220px; padding: var(--s1);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.more-list a {
  padding: var(--s2) var(--s3); border-radius: var(--r-xs);
  color: var(--n-700); font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
}
.more-list a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }

/* свёрнутый блок внутри карточки */
.fold > summary {
  cursor: pointer; list-style: none; font-weight: 600; font-size: var(--t-sm);
  color: var(--brand-700); padding: var(--s2) 0; display: inline-flex; align-items: center; gap: var(--sh);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::before { content: '▸'; transition: transform .15s ease; }
.fold[open] > summary::before { transform: rotate(90deg); }

/* Приписка справа в панели отбора: счёт найденного, а не орган управления.
   Прижата к правому краю распоркой .spacer и читается спокойнее подписей. */
.filters-note {
  align-self: flex-end; min-height: var(--control-h);
  /* gap, а не пробел в разметке: в гибкой строке пробел между элементами
     схлопывается, и получалось «4статьи». */
  display: inline-flex; align-items: center; gap: var(--s1);
  font-size: var(--t-sm); color: var(--muted); font-weight: 500;
}
.filters-note b { color: var(--ink); font-weight: 650; }
@media (max-width: 700px) {
  .filters .spacer { display: none; }
  .filters-note { min-height: 0; flex: 1 1 100%; }
}

/* ---- совсем узкие карточки: подпись над значением ----
   Боковая колонка подписи на 375 px оставляет значению меньше половины
   ширины, и длинные слова всё равно не помещаются. */
@container (max-width: 430px) {
  .table.stack td { flex-direction: column; gap: var(--s0); align-items: stretch; }
  .table.stack td::before { flex: none; max-width: none; }
  .table.stack td.check { flex-direction: row; align-items: center; gap: var(--s3); }
  /* В столбик «по центру» означало бы «посередине строки», и подпись «Состояние»
     уезжала от левого края, тогда как все соседние подписи стоят слева. */
  .table.stack td:has(> .tag) { align-items: stretch; }
  /* Кнопки действий идут строкой и по своей ширине. В столбик, во всю ширину
     карточки, они читались как отдельные разделы, хотя это действия над одной
     записью. Подпись при этом занимает свою строку целиком. */
  .table.stack td.right { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sh); }
  .table.stack td.right::before { flex: 0 0 100%; }
  .table.stack td.right > .btn, .table.stack td.right form { flex: 0 0 auto; width: auto; }
  /* Метка состояния – это ярлык, а не строка таблицы: она должна быть
     по ширине слова, иначе растягивается во всю карточку и выглядит полосой. */
  .table.stack td > .tag { align-self: flex-start; }
}

/* ---- показ значения без поля ввода (руководитель в форме статьи) ---- */
.ro-field { display: flex; flex-direction: column; margin-bottom: var(--s4); min-width: 0; }
.ro-label {
  font-size: var(--t-sm); font-weight: 600; color: var(--n-700);
  margin-bottom: var(--sh); line-height: 1.4;
}
.ro-value {
  min-height: var(--control-h); display: flex; align-items: center;
  padding: 0 var(--s3); border: 1px dashed var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-size: var(--t-md);
  overflow-wrap: anywhere;
}

/* ============================================ 24. СТРОЙ НАСТРОЕК === */
/* Настройки – не россыпь полей в сетке, а список решений.
   Слева то, что настраивается, и зачем; справа – сам орган управления.

   Список идёт во всю ширину карточки, без собственной рамки: рамка у карточки
   уже есть, вторая превращала строй в «коробку внутри коробки» и делала его
   робким. Полосы-разделители, доходящие до краёв, держат вертикаль жёстче. */
.settings {
  /* Смотрим на ширину самого списка, а не экрана: этот же список стоит
     и в широкой карточке, и в узкой колонке рядом с макетом. */
  container-type: inline-size;
}
/* Карточка настроек: шапка с отступами, дальше строки во всю ширину.
   Без :has() – принадлежность объявлена классом, чтобы работало и в старых
   браузерах на университетских машинах. */
.card-settings { padding: 0; overflow: hidden; border-color: var(--line); }
.card-settings .cs-head { padding: var(--s6) var(--s6) var(--s5); }
.card-settings .cs-head h3 { border: 0; padding: 0; margin: 0 0 var(--sh); }
/* Заголовок с переключателем в той же строке: линейку даёт строй ниже */
.card-head.bare { margin: 0 0 var(--sh); padding: 0; border: 0; }
.card-head.bare h3 { margin: 0; }
.card-settings .cs-head p {
  margin: 0; color: var(--muted); font-size: var(--t-sm);
  line-height: 1.5; max-width: 80ch;
}
.card-settings .cs-head .actions { margin-top: var(--s3); }
.card-settings > .settings { border-top: 1px solid var(--line-soft); }
.card-settings > .logo-preview { margin: 0 var(--s6) var(--s5); }
.card-settings > .settings > .set-group:first-child { border-top: 0; }

.set {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 300px);
  gap: var(--s4) var(--s6); align-items: center;
  padding: var(--s4) var(--s6);
  border-top: 1px solid var(--n-100);
  transition: background .12s ease;
}
.set:first-child { border-top: 0; }
.set:hover { background: var(--n-25); }
.set:focus-within { background: var(--brand-050); }

.set-text { min-width: 0; }
.set-text b {
  display: block; font-weight: 650; font-size: var(--t-md);
  color: var(--ink); line-height: 1.35; letter-spacing: -.003em;
}
.set-text small {
  display: block; color: var(--muted); font-size: var(--t-sm);
  margin-top: var(--s0); line-height: 1.5; max-width: 64ch;
}
.set-text a { font-weight: 550; }

.set-ctl {
  display: flex; gap: var(--s2); align-items: center;
  justify-content: flex-end; flex-wrap: wrap; min-width: 0;
}
.set-ctl > input, .set-ctl > select, .set-ctl > textarea {
  margin: 0; width: auto; flex: 1 1 132px; min-width: 0;
}
.set-ctl label { margin: 0; }
/* единица измерения рядом с полем не должна переноситься одна */
.set-ctl > .muted { flex: none; font-size: var(--t-sm); }

/* Поле с собственной микроподписью – связка вроде «сверху / снизу / слева / справа» */
.unit { display: flex; flex-direction: column; gap: var(--s0); min-width: 0; flex: 1 1 58px; }
.unit > span {
  font-size: var(--t-xs); color: var(--muted); font-weight: 650;
  text-align: center; letter-spacing: .02em; text-transform: lowercase;
}
.unit > input { margin: 0; text-align: center; padding: 0 var(--s2); width: 100%; }

/* Компактные варианты органа управления */
.set-ctl .w-sm  { width: 84px;  flex: none; }
.set-ctl .w-md  { width: 140px; flex: none; }
.set-ctl .w-full{ width: 100%; flex: 1 1 100%; }

/* Заголовок группы настроек: сильная полоса, а не робкая подпись */
.set-group {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--n-600);
  padding: var(--s3) var(--s6);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.set-group + .set { border-top: 0; }
.set-group:first-child { border-top: 0; }

/* В узкой колонке подпись и орган управления встают друг под другом:
   иначе пояснение сжимается до трёх слов в строке. */
@container (max-width: 560px) {
  .set { grid-template-columns: minmax(0, 1fr); gap: var(--s2); padding: var(--s4); }
  .set-ctl { justify-content: flex-start; }
  .set-group { padding: var(--s3) var(--s4); }
}
@container (max-width: 380px) {
  .set-ctl > input:not(.w-sm), .set-ctl > select:not(.w-sm):not(.w-md) { width: 100%; flex: 1 1 100%; }
  .set-ctl .w-md { width: 100%; flex: 1 1 100%; }
}

/* ============================================ 25. МЕЛОЧИ, КОТОРЫЕ ВИДНО === */

/* Разделитель внутри карточки: волосок в тон остальным, а не линейка браузера */
hr { border: 0; height: 1px; background: var(--line-soft); margin: var(--s5) 0; }

/* Подсказка сразу под заголовком карточки – без верхнего отступа */
.tight { margin-top: 0; }
/* Подпись группы в списке: отделяет части перечня, но заголовком карточки
   не притворяется – ни линейки, ни крупного кегля. */
.group-label {
  font-size: var(--t-sm); font-weight: 600; color: var(--muted);
  margin-bottom: var(--s2);
}
.group-label.mt5 { margin-top: var(--s6); }

/* Кнопка «убрать автора» не нужна, пока автор один: нажатие всё равно
   заканчивалось отказом в окне. Прячем её, а не объясняем отказ. */
#authors:has(.author-row:only-child) .remove-author { display: none; }
.hint.tight { margin-top: 0; }

/* Клавиша: в разметке встречаются и элемент kbd, и класс */
.kbd {
  display: inline-block; padding: var(--s0) var(--sh); border-radius: var(--r-xs);
  background: var(--surface); border: 1px solid var(--line);
  border-bottom-width: 2px; font-family: var(--font-mono);
  font-size: var(--t-xs); color: var(--ink-soft); white-space: nowrap;
}

/* Маркированный список внутри карточки */
.bullets { margin: var(--s2) 0 0; padding-left: 1.15rem; }
.bullets li { margin-bottom: var(--sh); line-height: 1.55; }
.bullets li::marker { color: var(--n-500); }
.bullets.small li { font-size: var(--t-sm); }

/* Блок решения по статье – это действие, а не сведения */
.decision { border-color: var(--line); background: var(--surface); }

/* ---- список переходов с пояснениями ---- */
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list li {
  display: flex; flex-direction: column; gap: var(--s0);
  padding: var(--s3) 0; border-top: 1px solid var(--line-soft);
}
.nav-list li:first-child { border-top: 0; padding-top: 0; }
.nav-list li:last-child { padding-bottom: 0; }
.nav-list a { font-weight: 600; font-size: var(--t-md); }
.nav-list span { color: var(--muted); font-size: var(--t-sm); line-height: 1.45; }

/* подстановка внутри пояснения к настройке */
.set-text code.ph { font-size: var(--t-xs); padding: 0 var(--sh); vertical-align: 1px; }

/* ---- ширины колонок в справочниках ----
   Имя получает весь запас, короткие значения не рвутся на две строки. */
.table th.c-name   { width: auto; min-width: 210px; }
.table th.c-role   { width: 130px; }
.table th.c-mail   { width: 170px; }
.table th.c-date   { width: 116px; }
.table th.c-n      { width: 78px; }
/* Колонка действий: кнопки в строку, а не столбиком */
.table th.c-act { width: 1%; }
.table th.c-act + * { white-space: nowrap; }
.table td.right .btn + .btn { margin-left: var(--sh); }
/* Числовые колонки читаются по разряду */
.table th.c-n { text-align: center; }
.table td[data-label="Секций"], .table td[data-label="Статей"],
.table td[data-label="Принято"], .table td[data-label="Статьи"] {
  text-align: center; font-variant-numeric: tabular-nums;
}
.table td[data-label="Роль"],
.table td[data-label="Год"],
.table td[data-label="Срок приёма"] { white-space: nowrap; }

/* ---- свёрнутые настройки печати внутри карточки страницы ---- */
.page-setup { margin: var(--s3) 0; }
.page-setup > summary { color: var(--n-600); font-weight: 600; }
.page-setup[open] > summary { margin-bottom: var(--s3); }
.page-setup .settings {
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); overflow: hidden;
}
.page-setup .set { padding: var(--s3) var(--s4); }
.page-setup .set:hover { background: transparent; }

/* ---- форма решения по статье: кнопки в строку, без собственных отступов ---- */
.action-form { display: inline-flex; margin: 0; }

/* ---- кнопка выгрузки, пока файл собирается ---- */
.export-tile.busy { pointer-events: none; opacity: .65; }
.export-tile.busy .et-ico { position: relative; }
.export-tile.busy .et-ico::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: spin .8s linear infinite;
}
.export-tile.busy .et-ico svg { visibility: hidden; }
.btn.busy { pointer-events: none; opacity: .65; }

/* ---- узкий список: колоночные выравнивания не действуют ----
   Выравнивание по центру и по правому краю принадлежит широкой таблице, где
   оно выстраивает колонку. В списке колонок нет: короткие значения («0»,
   «Действия») уезжали в середину строки, а кнопки прижимались к правому краю.
   Правило стоит последним в файле, потому что колоночные выравнивания заданы
   выше и с той же силой. */
@container (max-width: 760px) {
  .table.stack td,
  .table.stack td.right,
  .table.stack td.center,
  .table.stack td::before { text-align: left; }
}

/* ---- один уровень рамок на экране ----
   Правило одно на всю систему: рамку рисует карточка. Всё, что лежит внутри
   неё, отделяется подложкой или волосяной чертой, но не второй рамкой. */
.card > .doc-wrap,
.card > form > .doc-wrap { border: 0; background: none; padding: 0; }
.card .note { box-shadow: none; }
.card.highlight .note { border-color: transparent; background: rgba(255, 255, 255, .6); }