/* ═══════════════════════════════════════════════════════════════
   БУМАЖНЫЙ ВИД
   ═══════════════════════════════════════════════════════════════

   Этот файл подключается ПОСЛЕ style.css и переопределяет вид,
   не трогая разметку страниц.

   ПОЧЕМУ ОТДЕЛЬНЫМ ФАЙЛОМ, А НЕ ПРАВКОЙ style.css.

   Там 2348 строк, писанных под тёмное поле: тени, свечения,
   полупрозрачные заливки, рамки со светом. Перекрасить их
   переменными нельзя — я пробовал, вышло нечитаемо: текст стал
   тёмным, а фон остался тёмным.

   Отдельный слой надёжнее в обе стороны. Если вид не подойдёт,
   его убирают одной строкой из страниц, и прежнее оформление
   возвращается целиком, без следов.

   НИ ОДИН КЛАСС НЕ ПЕРЕИМЕНОВАН и ни один элемент не удалён.
   Меняется только внешний вид: возможности, кнопки и поля
   остаются на местах.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Цвета трёх орденов. На сайте цвет что-то значит, а не украшает:
     синий — заглавия и главное действие, красный — разделы и то,
     где ждёт человек, золото — тонкие черты и «дело со временем».
     На общедоступных страницах ордена не называются. */
  --p-paper:      #e9e3d2;
  --p-paper-lift: #efeadd;   /* лист поверх бумаги */
  --p-navy:       #22406f;
  --p-navy-deep:  #1a3358;
  --p-ruby:       #8f2f2f;
  --p-gold:       #8a6a24;
  --p-ink:        #26221a;
  --p-ink-dim:    #6f6653;
  --p-line:       rgba(38,34,26,0.16);
  --p-line-gold:  rgba(138,106,36,0.45);

  /* ─── СТАРЫЕ ПЕРЕМЕННЫЕ ПЕРЕОПРЕДЕЛЕНЫ ────────────────────
     Я завёл свои (--p-*), а прежние оставил как были. И зря:
     на них держится половина текста в разметке — там стоит
     color: var(--true-gold) и подобное.

     Замер нашёл десять таких мест: «Уведомление о подтверждении
     документов», числа в сводке кабинета, подписи под ними.
     Все светлые, все сливались с бумагой.

     Имена оставлены прежними — переименовать значило бы править
     2348 строк стилей и 54 страницы. Здесь важнее не сломать. */
  --ink:            #26221a;
  --ink-dim:        #6f6653;
  --bg-0:           #e9e3d2;
  --bg-1:           #efeadd;
  --gold:           #22406f;   /* был голубой; на бумаге — синий */
  --gold-bright:    #2c5490;
  --line:           rgba(38,34,26,0.16);
  --neon-a:         #22406f;
  --neon-b:         #1a3358;
  --neon-c:         #8a6a24;
  --neon-d:         #8f2f2f;
  --true-gold:      #8a6a24;   /* золото: было светлое #e8bd5a */
  --true-gold-soft: #a1832f;
}

/* ─── Бумага ───────────────────────────────────────────────────
   Фон рисуется стилями, ни одной картинки не загружается: тёплый
   тон, четыре мягких перелива и слабое зерно.

   ПРЕЖНЯЯ ПОДЛОЖКА bg-hex.jpg НЕ УДАЛЕНА с сервера — она просто
   не подключается. Вернётся, если убрать этот файл.

   Слой неподвижен (fixed) и всегда ровно по экрану: на телефоне
   фон не раздувается по длине страницы, а страницы у нас длинные. */
/* Тёмный фон стоял в ДВУХ местах, и я закрыл только одно.

   Первое — html: там --bg-0, тёмно-синий. Страница длиннее окна,
   и ниже листов проступал он.

   Второе — body::before с картинкой bg-hex.jpg. Я назвал свой слой
   зерна так же, и он заменил её лишь отчасти: где мой слой кончался,
   вылезала прежняя.

   Здесь закрыты оба. */
html{
  background-color: var(--p-paper) !important;
  background-image: none !important;

  /* ВЫСОТА ДОЛЖНА РАСТИ ПО СОДЕРЖИМОМУ.
     
     В старых стилях стояло height:100% на html и body. На тёмном
     поле это было незаметно: фон рисовался неподвижным слоем
     во весь экран, и высота самих элементов роли не играла.
     
     На бумаге вышло иначе. Страница подачи — 4281 точка, а body
     остался высотой 900, то есть ровно с окно. Мой фон висит
     на body, значит и он кончался на 900 точках. Всё ниже первого
     экрана оказывалось без фона — на тёмном html из старых стилей.
     
     Владелец описал это как «фон обрезается при прокрутке»,
     и описал точно. */
  height: auto !important;
  min-height: 100% !important;
}

body{
  height: auto !important;
  min-height: 100vh !important;
}

body{
  background-color: var(--p-paper) !important;
  background-image:
    radial-gradient(58% 42% at 18% 12%, rgba(255,252,244,0.60), transparent 70%),
    radial-gradient(52% 38% at 84% 22%, rgba(238,231,214,0.55), transparent 72%),
    radial-gradient(64% 48% at 26% 82%, rgba(232,224,206,0.50), transparent 74%),
    radial-gradient(46% 34% at 78% 92%, rgba(244,239,228,0.45), transparent 70%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  color: var(--p-ink) !important;
}

/* Зерно бумаги. Отдельным слоем поверх фона, но ПОД содержимым:
   pointer-events отключены, иначе слой перехватывал бы нажатия. */
body::before{
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Холст с шестигранниками. Скрипт сам останавливается, когда
   видит скрытый холст — я это проверил в его коде. */
#bg-canvas{ display: none !important; }

/* ─── Полоса набора ────────────────────────────────────────────
   940 точек вместо 760. Строка при этом не длиннее 74 знаков —
   ширину держит сам текст, см. .card p ниже. */
.wrap{ max-width: 940px !important; }


/* ─── Листы вместо карточек ────────────────────────────────────
   Скругление почти убрано, размытие снято, сверху тонкая золотая
   черта вместо неоновой полосы. */
.card, .material-card, .hex-panel{
  background: var(--p-paper-lift) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--p-ink) !important;
}
.card::before, .material-card::before{
  background: var(--p-line-gold) !important;
  height: 1px !important;
  opacity: 1 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Строка не длиннее 74 знаков: читать длинные строки трудно,
   глаз теряет начало следующей. */
.card p, .card li{ max-width: 74ch; }

/* ─── Заголовки ────────────────────────────────────────────────
   h1 и h2 синие, заголовки разделов красные. Красный означает
   «здесь ждёт человек» и в кабинетах, и в панели — цвет держит
   один смысл по всему сайту. */
h1, h2{ color: var(--p-navy) !important; text-shadow: none !important; }
h3, h4, .card h3, .cs-module-head{ color: var(--p-ruby) !important; text-shadow: none !important; }

/* Заголовок раздела с чертой под ним: иначе разделы сливаются
   в сплошной текст. */
.card > h2:first-child, .card > h3:first-child{
  padding-bottom: 8px;
  border-bottom: 1px solid var(--p-line-gold);
}

/* ─── Текст ────────────────────────────────────────────────────*/
body, p, li, td, th, label, .card{ color: var(--p-ink) !important; }
.muted, .hint, .note, .doc-row-style, small{ color: var(--p-ink-dim) !important; }
a{ color: var(--p-navy) !important; }
a:hover{ color: var(--p-ruby) !important; }

/* ─── Кнопки ───────────────────────────────────────────────────
   Прежде они светились. Теперь это печатные кнопки: рамка, тонкая
   заливка, никакого свечения. */
.btn, .chip-btn, .auth-tab, .admin-tab-btn, .lang-toggle-btn{
  background: transparent !important;
  border: 1px solid var(--p-navy) !important;
  color: var(--p-navy) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.btn:hover, .chip-btn:hover{
  background: rgba(34,64,111,0.08) !important;
  color: var(--p-navy-deep) !important;
}
.btn.filled, .chip-btn.filled, .btn.primary{
  background: var(--p-navy) !important;
  color: #f4f0e6 !important;
  border-color: var(--p-navy) !important;
}
.btn.filled:hover, .chip-btn.filled:hover{ background: var(--p-navy-deep) !important; }
.btn.danger, .chip-btn.danger{
  border-color: var(--p-ruby) !important;
  color: var(--p-ruby) !important;
}
.btn.danger:hover, .chip-btn.danger:hover{ background: rgba(143,47,47,0.08) !important; }

/* Выбранная вкладка подчёркнута синим, а не залита. */
.admin-tab-btn.active, .auth-tab.active{
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid var(--p-navy) !important;
  border-radius: 0 !important;
  color: var(--p-navy) !important;
  font-weight: 600;
}

/* ─── Поля ─────────────────────────────────────────────────────*/
input, textarea, select, .field, .field-compact{
  background: #f6f2e8 !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 3px !important;
  color: var(--p-ink) !important;
  box-shadow: none !important;
}
input:focus, textarea:focus, select:focus{
  border-color: var(--p-navy) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(34,64,111,0.12) !important;
}
::placeholder{ color: #a39a85 !important; }

/* ─── Таблицы и списки ─────────────────────────────────────────
   Линейки вместо заливок: так читается опись, а не окно программы. */
table{ border-collapse: collapse !important; }
th{
  color: var(--p-ink-dim) !important;
  font-weight: 500 !important;
  border-bottom: 1px solid var(--p-line-gold) !important;
  background: transparent !important;
}
td{ border-bottom: 1px solid var(--p-line) !important; background: transparent !important; }
tr:hover td{ background: rgba(138,106,36,0.05) !important; }

/* ─── Дело со временем ─────────────────────────────────────────
   Золотая черта слева. Единственная выделенная строка на странице:
   если выделять многое, не выделено ничто. */
.urgent, .card.urgent, .lecture-soon{
  border-left: 3px solid var(--p-gold) !important;
  padding-left: 14px;
}

/* Где на той стороне ждёт человек — красная черта и красное число.
   Это отличие владелец сделал намеренно, оно сохранено. */
.needs-attention, .dash-tile.needs-attention{
  border-left: 3px solid var(--p-ruby) !important;
}
.needs-attention h3, .needs-attention .count{ color: var(--p-ruby) !important; }

/* ─── Сводка ───────────────────────────────────────────────────
   Строка чисел с тонкими перегородками вместо плиток.
   Плитки остаются нажимаемыми — меняется только вид. */
.dash-tile{
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--p-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: center;
  padding: 10px 14px !important;
}
.dash-tile:last-child{ border-right: none !important; }
.dash-tile h3{
  color: var(--p-navy) !important;
  font-size: 1.9em !important;
  margin: 0 0 4px !important;
  border: none !important;
  padding: 0 !important;
}
.dash-tile p{
  color: var(--p-ink-dim) !important;
  font-size: 0.78em !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 !important;
}

/* ─── Подвал ───────────────────────────────────────────────────*/
.site-footer{
  background: transparent !important;
  border-top: 1px solid var(--p-line-gold) !important;
  color: var(--p-ink-dim) !important;
}
.site-footer a{ color: var(--p-ink-dim) !important; }
.site-footer a:hover{ color: var(--p-navy) !important; }
.site-footer-heading, .site-footer-group > summary{ color: var(--p-navy) !important; }

/* ─── Убираем следы тёмного вида ───────────────────────────────
   Свечения, неоновые полосы и размытия по всему файлу стилей.
   Перечислять их по одному пришлось бы долго, поэтому снимаем
   разом там, где они точно не нужны. */
/* Свечение текста снимается везде, КРОМЕ ШАПКИ: там логотип
   с градиентом, и вмешиваться в него нельзя. */
.card, .material-card, .btn, .chip-btn, h1, h2, h3, h4,
.hex-panel, .doc-card, .notif-row, .admin-tab-btn{
  text-shadow: none !important;
}
.hex-fixed-btn{ opacity: .35 !important; }
.hex-fixed-btn:hover{ opacity: .7 !important; }

/* ─── Мастерская документов ────────────────────────────────────
   Реестр выше, выдача ниже — порядок прежний. Ни одно поле
   и ни одна кнопка не убраны: меняется только вид. */
.doc-card{
  background: var(--p-paper-lift) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
}
.doc-card:hover{ border-color: var(--p-navy) !important; }
.doc-row{ border-bottom: 1px solid var(--p-line) !important; }
.doc-row-head{ color: var(--p-navy) !important; }
#doc-preview-note{ color: var(--p-ink-dim) !important; }

/* ─── Заставка ─────────────────────────────────────────────────
   Остаётся как была, по решению владельца. Она тёмная и это
   уместно: до неё бумага ещё не началась. */

/* ─── Печать ───────────────────────────────────────────────────
   На бумаге фон и зерно ни к чему. */
@media print{
  body{ background: #fff !important; }
  body::before{ display: none !important; }
  .nav, .site-footer{ display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   РАСКЛАДКА
   ═══════════════════════════════════════════════════════════════
   Слева объясняем, справа делают. Всё, что человек читает, идёт
   налево; всё, где он нажимает или вводит, — направо. Если на
   странице нечего делать, правая колонка не нужна и страница
   идёт одной колонкой.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Две колонки ──────────────────────────────────────────────
   Левая шире: там связный текст. В правой списки и действия,
   им нужно меньше. Между ними вертикальная линия — без неё
   колонки читаются как одна. */
.wrap.grid-2{
  grid-template-columns: 52fr 48fr !important;
  gap: 0 30px !important;
  align-items: start;
}
.wrap.grid-2 > .card.col-half + .card.col-half{
  border-left: 1px solid var(--p-line) !important;
  padding-left: 30px;
}

/* Между разделами внутри колонки — пустота, а не рамка.
   Рамками разделяются только колонки и полосы. */
.wrap.grid-2 > .card.col-half{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding-top: 0 !important;
}
.wrap.grid-2 > .card.col-half::before{ display: none !important; }

/* На узком экране колонки складываются в одну: линия убирается,
   иначе она повисла бы поперёк страницы. */
@media (max-width: 820px){
  .wrap.grid-2{ grid-template-columns: 1fr !important; }
  .wrap.grid-2 > .card.col-half + .card.col-half{
    border-left: none !important;
    padding-left: 0;
    border-top: 1px solid var(--p-line) !important;
    padding-top: 22px;
    margin-top: 8px;
  }
}


/* ─── Отступ от края — поле листа ──────────────────────────────*/
.wrap{ padding-left: clamp(18px, 5vw, 64px) !important;
       padding-right: clamp(18px, 5vw, 64px) !important; }

/* ─── Подзаголовки: красным, мельче, с разрядкой ───────────────*/
.card h4, .cs-module-head, .site-footer-heading{
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.86em;
}

/* ─── Врезка за золотой чертой ─────────────────────────────────
   То, что нужно сказать отдельно. Как «дело со временем»,
   только про смысл, а не про срок. */
blockquote, .callout, .note-block{
  border-left: 2px solid var(--p-line-gold) !important;
  background: transparent !important;
  padding: 2px 0 2px 16px !important;
  margin: 14px 0 !important;
  font-style: italic;
  color: var(--p-ink) !important;
}

/* ─── Опасное действие никогда не заливается ───────────────────
   Только обводится: залитую красную кнопку жмут не глядя. */
.btn.danger, .chip-btn.danger, .btn.filled.danger{
  background: transparent !important;
  color: var(--p-ruby) !important;
  border: 1px solid var(--p-ruby) !important;
}

/* ─── Полоски пройденного в зачётной книжке ────────────────────
   Ни процентов, ни цифр: длина полоски и есть ответ. */
.syl-bar, .progress-bar, .progress{
  background: rgba(38,34,26,0.10) !important;
  border-radius: 0 !important;
  height: 6px !important;
  overflow: hidden;
}
.syl-bar > *, .progress-bar > *, .progress > *{
  background: var(--p-navy) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ─── Метка ордена слева от номера документа ───────────────────
   Цвет метки в кабинете значит орден. Это допустимо: кабинет
   за паролем. На общедоступных страницах те же цвета остаются
   просто цветами университета и нигде не расшифровываются. */
.doc-mark{ display: inline-block; width: 8px; height: 8px; margin-right: 8px; }
.doc-mark.ruby{ background: var(--p-ruby); }
.doc-mark.sapphire{ background: var(--p-navy); }
.doc-mark.gold{ background: var(--p-gold); }

/* ─── Поля-линейки на подаче заявки ────────────────────────────
   Письменное прошение, а не анкета в учреждении. Исключение —
   поле для файла: у него рамка, потому что туда кладут файл,
   а не пишут. */
.form-lined input[type=text],
.form-lined input[type=email],
.form-lined input[type=tel],
.form-lined textarea{
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid var(--p-navy) !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
}
.form-lined input[type=file]{ border: 1px solid var(--p-line) !important; }
.form-lined label{
  color: var(--p-ink-dim) !important;
  font-size: 0.82em;
  letter-spacing: 0.05em;
}

/* ─── Буквица ──────────────────────────────────────────────────
   Один раз на страницу, в самом первом абзаце, и больше нигде. */
.dropcap::first-letter{
  float: left;
  font-size: 3.1em;
  line-height: 0.82;
  padding: 6px 10px 0 0;
  color: var(--p-ruby);
  font-weight: 600;
}

/* ─── Страницы проверки: узкая колонка по центру ───────────────
   Бланк идёт последним намеренно: сначала ответ, потом
   доказательство. */
body.verify-page .wrap{ max-width: 640px !important; }
.cert-blank{ margin-top: 26px; }
.cert-blank img{ border: 1px solid var(--p-line) !important; background: #1a1c22; }

/* ═══════════════════════════════════════════════════════════════
   ШЕСТИГРАННИКИ УБРАНЫ ПОЛНОСТЬЮ
   ═══════════════════════════════════════════════════════════════

   Я сперва убрал только ФОН — холст с сеткой. Но шестигранники
   сидят и в самой разметке: 55 панелей, 42 значка, вкладки
   и кнопки со срезанными углами. Убрав фон, я оставил формы,
   и сходства с макетом не вышло — владелец это увидел сразу.

   Обрезка задаётся через clip-path. Здесь она снимается везде.
   Разметку не трогаю: классы остаются, меняется только вид.
   Если понадобится вернуть — убрать этот раздел.
   ═══════════════════════════════════════════════════════════════ */

/* ШАПКУ НЕ ТРОГАЕМ: селектор [class*="hex"] задевал бы и её
   содержимое. Перечисляем только то, что нужно. */
.hex-panel, .hex-panel::before, .hex-panel::after,
.auth-tab, .lang-toggle-btn, .hex, .hex-sm, .hex-bg,
.hex-row, .hex-dot, .hex-glyph, .hex-fixed-btn{
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

/* Шестигранная плашка с названием превращается в лист:
   прямые углы, тонкая рамка, никакого свечения. */
.hex-panel{
  background: var(--p-paper-lift) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  padding: 26px 30px !important;
  /* Во всю ширину полосы набора, а не узкой плашкой посередине.
     Раньше она была шестигранной и потому узкой; став листом,
     должна занять ту же ширину, что и остальные листы. */
  max-width: none !important;
  width: 100% !important;
  margin: 0 0 26px !important;
  text-align: left !important;
  box-sizing: border-box;
}
.hex-panel::before, .hex-panel::after{ display: none !important; }
.hex-panel-subtitle{ color: var(--p-ink-dim) !important; font-style: normal !important; }

/* Значки-шестигранники и точки-разделители убираются совсем:
   на бумажной странице им нечего делать. */
.hex-glyph, .hex-dot, .hex-row, .hex-sm, .hex-bg{ display: none !important; }

/* Кнопка звука в углу — она тоже шестигранная. Оставляем,
   но делаем незаметной: это служебная кнопка. */
.hex-fixed-btn{ opacity: .28 !important; }
.hex-fixed-btn:hover{ opacity: .6 !important; }

/* Вкладки входа и переключатель языка: прямые прямоугольники. */
.auth-tab, .lang-toggle-btn{
  border-radius: 3px !important;
  padding: 7px 16px !important;
}

/* ═══════════════════════════════════════════════════════════════
   ТОЧНЫЕ РАЗМЕРЫ
   ═══════════════════════════════════════════════════════════════
   Значения взяты из образцов, не на глаз.

   ШРИФТЫ. В образцах заглавия набраны Cinzel, текст — Schola.
   Это шрифты документов. На сайте остаются Cormorant SC и
   Cormorant: они уже подключены и на длинном тексте ведут себя
   лучше. Начертание чуть другое, размеры и разрядка — те же.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Размеры текста ───────────────────────────────────────────*/

h1{ font-size: 21px !important; letter-spacing: 0.08em !important; }
h2{ font-size: 14px !important; letter-spacing: 0.10em !important; }

body, p, li, .card{ font-size: 15.5px !important; line-height: 1.6 !important; }
.muted, .hint, .note, small, .doc-row-style{ font-size: 13.5px !important; }

td{ font-size: 14px !important; padding: 7px 0 !important; }
th{ font-size: 10.5px !important; letter-spacing: 0.09em !important; }

.dash-tile h3{ font-size: 25px !important; letter-spacing: 0 !important; }
.dash-tile p{ font-size: 10.5px !important; letter-spacing: 0.09em !important; }

/* ─── Кнопки: все одного роста ─────────────────────────────────
   Заливки нет ни у одной. Три вида различаются только цветом
   рамки и букв.

   Красную не заливаем намеренно: залитую красную кнопку жмут
   не глядя. */
.btn, .chip-btn{
  padding: 6px 14px !important;
  font-size: 12px !important;
  border-width: 1px !important;
  border-radius: 0 !important;
  background: transparent !important;
  margin-right: 7px;
}
.btn, .chip-btn{ border-color: #cfc3a4 !important; color: #26221a !important; }
.btn.filled, .chip-btn.filled, .btn.primary{
  border-color: #22406f !important; color: #22406f !important;
  background: transparent !important;
}
.btn.danger, .chip-btn.danger{ border-color: #8f2f2f !important; color: #8f2f2f !important; }

/* ─── Шапка ────────────────────────────────────────────────────*/

/* ГЕРБ. В присланных размерах стоит «46×46 в рамке #c8a44e».
   Не применяю ни то, ни другое, и вот почему:

   рамку вы велели убрать двумя сообщениями раньше — логотип
   не трогается ни в чём;

   46 на 46 сплющивает герб: его рисунок 1536 на 1024, то есть
   не квадратный. Задана только высота 46, ширина считается
   из пропорций и выходит 69. */

/* ─── Вкладки и линии ──────────────────────────────────────────*/
.admin-tabs, .student-tabs, .subnav{ border-bottom-color: #cfc3a4 !important; }
.admin-tab-btn.active, .auth-tab.active{ border-bottom: 2px solid #22406f !important; }

/* ─── Колонки ──────────────────────────────────────────────────*/
.wrap.grid-2 > .card.col-half:first-child{ padding-right: 28px; }
.wrap.grid-2 > .card.col-half + .card.col-half{
  padding-left: 28px;
  border-left-color: #cfc3a4 !important;
}

/* ─── Сводка чисел ─────────────────────────────────────────────*/
.dash-grid, .dashboard-row{
  border-top: 1px solid #cfc3a4;
  border-bottom: 1px solid #cfc3a4;
}
.dash-tile{ border-right-color: #e2d8bd !important; padding: 14px !important; }

/* ─── Таблицы ──────────────────────────────────────────────────
   Под шапкой золотая линия, под строками светлая. */
th{ border-bottom: 1px solid #9a7a2a !important; }
td{ border-bottom: 1px solid #e2d8bd !important; }

/* ─── Метка ордена ─────────────────────────────────────────────*/
.doc-mark{ width: 8px !important; height: 8px !important; margin-right: 8px !important; }

/* ─── Билет студента ───────────────────────────────────────────*/
#id-card-container, .student-id-card{
  border: 1px solid #9a7a2a !important;
  background: rgba(255,255,255,0.30) !important;
  padding: 14px 18px !important;
  border-radius: 0 !important;
}
#id-card-container .name, .student-id-card .name{
  font-size: 17px !important; letter-spacing: 0.06em !important;
}

/* ─── Полоска пройденного ──────────────────────────────────────*/
.syl-bar, .progress-bar, .progress{
  width: 120px !important; height: 5px !important;
  background: #e2d8bd !important;
}
.syl-bar > *, .progress-bar > *, .progress > *{ background: #22406f !important; }

/* ═══════════════════════════════════════════════════════════════
   ЧИТАЕМОСТЬ — РАЗ И НАВСЕГДА
   ═══════════════════════════════════════════════════════════════

   Я закрывал цвета по одному, и каждый раз что-то оставалось.
   Здесь закрыто разом и по причине, а не по списку.

   В старых стилях 23 места со СВЕТЛЫМ текстом: он писался под
   тёмное поле и на бумаге почти не виден. Плюс переменные
   --ink-dim и --gold, которые тоже были светлыми.

   Правило простое: на бумаге текст тёмный. Цвет может означать
   состояние — успех, отказ, предупреждение, — но яркость его
   должна быть такой, чтобы читалось.
   ═══════════════════════════════════════════════════════════════ */

/* Светлые цвета из старых стилей — в тёмные того же смысла.
   Красный остаётся красным, зелёный зелёным: значение цвета
   не меняется, меняется только яркость. */
[style*="#e0645a"], [style*="#c67a70"],
.err, .error, .danger-text, .status-bad{ color: #8f2f2f !important; }

[style*="#5fd88a"], [style*="#5fd18a"],
.ok, .success, .status-ok{ color: #2d6b3f !important; }

[style*="#dbe6ff"], [style*="#fff3c4"]{ color: var(--p-ink) !important; }

/* Подвал: был серо-голубой от тёмного вида. */
.site-footer, .site-footer *{ color: var(--p-ink-dim) !important; }
.site-footer a, .site-footer-heading,
.site-footer-group > summary, .site-footer-brand,
.site-footer-name{ color: var(--p-navy) !important; }
.site-footer a:hover{ color: var(--p-ruby) !important; }
.site-footer-tag, .site-footer-years, .site-footer-bottom{ color: #8a8270 !important; }

/* Пояснения под полями и мелкие подписи: были почти белыми. */
.hint, .field-hint, .form-hint, .doc-row-style, .muted, small,
label small, .note-small{ color: #6f6653 !important; }

/* Всё, что задано переменными старого вида, — перекрываем.
   Переменные я не переименовывал (см. начало файла), но их
   значения на бумаге читаются иначе, чем задумывалось. */
.card *, .wrap *, main *, section *{ }
p, li, td, dd, dt, label, span:not([class*="badge"]):not([class*="mark"]){
  color: inherit;
}

/* Полосы состояния и метки: тёмный текст на светлой подложке,
   а не светлый на прозрачной. */
.badge, .tag, .status, .cat-badge, .meta-tag{
  background: rgba(38,34,26,0.06) !important;
  color: var(--p-ink) !important;
  border: 1px solid var(--p-line) !important;
}
.badge.danger, .status.bad{ color: #8f2f2f !important; border-color: rgba(143,47,47,0.35) !important; }
.badge.ok, .status.ok{ color: #2d6b3f !important; border-color: rgba(45,107,63,0.35) !important; }

/* Ссылки внутри текста — синие с подчёркиванием, чтобы
   отличались не одним цветом. */
.card a, main a, p a{ color: var(--p-navy) !important; text-decoration: underline; text-underline-offset: 2px; }
.card a:hover, main a:hover, p a:hover{ color: var(--p-ruby) !important; }

/* Заставка и всплывающие окна остаются тёмными: там тёмный
   уместен, и текст на них светлый по делу. */
#intro-overlay, #intro-overlay *,
.tool-overlay, .tool-overlay *,
.captcha-img{ color: unset !important; }

/* ═══════════════════════════════════════════════════════════════
   ШАПКА
   ═══════════════════════════════════════════════════════════════

   Полоса во всю ширину окна — это владелец одобрил.
   Цвет темнее прежнего: #142338 → #1b3157.

   ГЕРБА ЗДЕСЬ НЕТ НИ ОДНОЙ СТРОКИ, и это намеренно.

   Я дважды его ломал: сперва обвёл рамкой, потом задал 46 на 46
   и сплющил — рисунок 1536 на 1024, не квадратный. Оба раза
   владелец поправлял.

   Правило простое: ни width, ни height, ни border на .nav img.
   Герб остаётся 45 на 30, как был всегда.
   ═══════════════════════════════════════════════════════════════ */

.nav{
  /* Во всю ширину: ни полей по бокам, ни скруглений, ни отступа
     сверху. Содержимое прижато к колонке в 1000 точек, иначе
     логотип уехал бы к самому краю экрана. */
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  border-bottom: 1px solid rgba(232,201,138,0.28) !important;
  padding-inline: max(20px, calc((100% - 1000px) / 2)) !important;
  box-sizing: border-box;
  background: linear-gradient(100deg, #142338 0%, #1b3157 100%) !important;
}

/* Слой ::after рисовал прежний полупрозрачный фон. Гасим его:
   иначе он ложится поверх нового и осветляет плашку. */
.nav::after{ background: none !important; }

/* Цвет ссылок в шапке — на тёмном они должны читаться.
   Логотип и его градиент не трогаются. */
.nav a{ color: #c9d6ea !important; }
.nav a:hover, .nav a.active{ color: #e8c98a !important; }

/* ═══════════════════════════════════════════════════════════════
   КАБИНЕТ СТУДЕНТА
   ═══════════════════════════════════════════════════════════════

   РАЗВОРОТА В ДВЕ КОЛОНКИ ЗДЕСЬ НЕТ, И ЭТО НАМЕРЕННО.

   Я его сделал — обернул часть разделов в две колонки. И сломал
   вкладки: скрипт student-tabs.js разносит разделы по вкладкам,
   перебирая ПРЯМЫХ ДЕТЕЙ полосы набора. Обёртка их спрятала,
   скрипт ничего не нашёл — и все разделы осели в первой вкладке.
   Владелец увидел это как «обзор дублируется во всех папках».

   Сделать разворот стилями тоже нельзя: разделы уже разложены
   по вкладкам, и внутри одной вкладки их бывает один-два —
   колонки будут пустовать.

   Кабинет остаётся одной колонкой. Это расходится с макетом,
   но макет рисовался без учёта вкладок: на нём все разделы
   на одной странице, а в кабинете их 34 и они разнесены
   по семи вкладкам.

   Если разворот всё же нужен — переделывать надо вместе
   со вкладками, а не поверх них.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Студенческий билет ───────────────────────────────────────
   Единственный блок в рамке на всей странице: имя крупно, ниже
   одной строкой через точки — номер, дата зачисления, дом,
   зачётные единицы. */
#id-card-container, .student-id-card{
  border: 1px solid #9a7a2a !important;
  background: rgba(255,255,255,0.30) !important;
  padding: 14px 18px !important;
  border-radius: 0 !important;
}

/* ─── Зачётная книжка ──────────────────────────────────────────
   Строка на курс, справа полоска пройденного. Ни процентов,
   ни цифр: длина полоски и есть ответ. */
#gradebook-box .row, .gradebook-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid #e2d8bd;
}

/* ─── Ближайшая лекция ─────────────────────────────────────────
   Единственный выделенный лист: у него дело со временем. */
#next-lecture-card{
  border-left: 3px solid var(--p-gold) !important;
  padding-left: 14px;
}

/* ─── Дисквалификация и просмотр руководителем ─────────────────
   Красным на светлой подложке, во всю ширину, над колонками. */
.disqualified-banner, .supervised-banner, .warn-banner{
  background: rgba(143,47,47,0.07) !important;
  border-left: 3px solid #8f2f2f !important;
  color: #8f2f2f !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
}


/* ─── «Пока ничего нет» ────────────────────────────────────────
   Эти надписи были почти белыми: писались под тёмное поле,
   где светло-серый читался. На бумаге они слились с фоном.

   Виден пример на снимке владельца: «Пока нет лекций или заданий,
   привязанных к предметам» — текст едва различим.

   Делаем их приглушёнными, но читаемыми: это не украшение,
   а ответ на вопрос «почему тут пусто». */
.empty, .lect-empty, .cert-empty, .no-data{
  color: #6f6653 !important;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   ЦВЕТА ТЕКСТА — ВСЕ, ОДНИМ МЕСТОМ
   ═══════════════════════════════════════════════════════════════

   В проекте нашлось 56 мест со светлым текстом: он писался под
   тёмное поле, где светло-зелёный и бледно-розовый читались.
   На бумаге они сливаются с фоном.

   Раньше я закрывал их по одному и только в стилях. Но половина
   сидит прямо в разметке (style="color:#5fd88a") и в скриптах,
   которые подставляют цвет при выводе. Оттуда стилями не достать
   иначе как по значению.

   Здесь перечислены ВСЕ девять цветов. Смысл каждого сохранён —
   зелёный остаётся зелёным, красный красным, — меняется только
   яркость.

     было      стало     смысл
     #5fd88a → #2d6b3f   успех, «оплачено», «допуск получен»
     #4fd18a → #2d6b3f   то же
     #5fd18a → #2d6b3f   то же
     #a6f0bf → #2d6b3f   светлее прежних, тот же смысл
     #ff9a90 → #8f2f2f   отказ, задолженность, отзыв
     #e8bd5a → #8a6a24   золото: отметки и подписи
     #dbe6ff → #26221a   был просто светлый текст
     #fff3c4 → #26221a   то же
     #ffffff → #26221a   белый на бумаге не виден вовсе
   ═══════════════════════════════════════════════════════════════ */

[style*="#5fd88a"], [style*="#5FD88A"],
[style*="#4fd18a"], [style*="#4FD18A"],
[style*="#5fd18a"], [style*="#5FD18A"],
[style*="#a6f0bf"], [style*="#A6F0BF"]{ color: #2d6b3f !important; }

[style*="#ff9a90"], [style*="#FF9A90"]{ color: #8f2f2f !important; }

[style*="#e8bd5a"], [style*="#E8BD5A"]{ color: #8a6a24 !important; }

[style*="#dbe6ff"], [style*="#DBE6FF"],
[style*="#fff3c4"], [style*="#FFF3C4"]{ color: #26221a !important; }

/* Белый текст — только в шапке и на тёмных бланках, где он уместен.
   Везде остальном он на бумаге просто не виден. */
:not(.nav):not(.nav *):not(#intro-overlay):not(#intro-overlay *)[style*="color:#fff"],
:not(.nav):not(.nav *)[style*="color: #fff"],
:not(.nav):not(.nav *)[style*="color:#ffffff"]{ color: #26221a !important; }

/* Те же цвета, заданные классами в старых стилях. */
.ok, .success, .status-ok, .paid, .granted{ color: #2d6b3f !important; }
.err, .error, .status-bad, .overdue, .revoked{ color: #8f2f2f !important; }
.warn, .warning, .status-warn{ color: #8a6a24 !important; }

/* ═══════════════════════════════════════════════════════════════
   ЧИСЛА НА ВКЛАДКАХ
   ═══════════════════════════════════════════════════════════════
   Как метка на приложении телефона: маленький кружок с числом
   у названия вкладки.

   КРАСНЫЙ — И ЭТО НЕ УКРАШЕНИЕ. По всему сайту красный означает
   «здесь ждёт человек»: красная черта у просроченного, красная
   кнопка у отказа. Число на вкладке значит то же самое —
   кто-то ждёт ответа.

   Показывается только когда есть чего ждать. Ноль не рисуем:
   метка, которая горит всегда, перестаёт значить что-либо.
   ═══════════════════════════════════════════════════════════════ */

.tab-badge{
  display: inline-block;
  min-width: 17px;
  height: 17px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--p-ruby, #8f2f2f);
  color: #f4f0e6;
  font-size: 10.5px;
  line-height: 17px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: middle;
  box-sizing: border-box;
}
.tab-badge[hidden]{ display: none !important; }

/* На выбранной вкладке метка приглушается: раздел уже открыт,
   и кричать о нём незачем. */
.admin-tab-btn.active .tab-badge{ opacity: .55; }

@media (max-width: 720px){
  .tab-badge{ min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; margin-left: 5px; }
}

/* ═══════════════════════════════════════════════════════════════
   ОСЛАБЛЕННЫЙ ТЕКСТ
   ═══════════════════════════════════════════════════════════════

   В старых стилях текст приглушали ПРОЗРАЧНОСТЬЮ: opacity 0.5–0.75.
   На тёмном поле это работало — светлые буквы оставались видны.
   На бумаге прозрачность смешивает текст с фоном, и он пропадает.

   Владелец увидел это в карточке заявки: мотивационное письмо
   и латинское написание имени почти сливались с листом. А письмо
   читают, решая о поддержке.

   Приглушаем ЦВЕТОМ, а не прозрачностью: тон светлее основного,
   но контраст с бумагой сохраняется.
   ═══════════════════════════════════════════════════════════════ */

.cs-mini, .material-card, .cms-own,
[style*="opacity:0.5"], [style*="opacity: 0.5"],
[style*="opacity:0.6"], [style*="opacity: 0.6"],
[style*="opacity:0.7"], [style*="opacity: 0.7"],
[style*="opacity:0.75"], [style*="opacity: 0.75"]{
  opacity: 1 !important;
  color: #6f6653 !important;
}

/* Значки и служебные кнопки приглушать прозрачностью можно:
   у них нет текста, и слиться с фоном им нечем. */
.hex-fixed-btn, #back-to-top-btn, .site-footer-crest{
  color: inherit !important;
}

/* ОСЛАБЛЕНИЕ, ЗАДАННОЕ ПРЯМО В РАЗМЕТКЕ.
   
   Одно место мои правила не поймали: прозрачность стоит
   на родителе БЕЗ КЛАССА, прямо в атрибуте style. Достать
   его по классу нельзя — только по самому значению.
   
   Перечисляем все ходовые значения. Прозрачность 0.8 и выше
   не трогаем: там текст ещё читается, а приглушение осмысленно. */
/* ЗАПИСЬ БЕЗ НУЛЯ. В коде стоит opacity:.6 — без нуля перед точкой.
   Я искал «0.6» и не находил, хотя место было прямо передо мной.
   Перечисляем обе записи. */
[style*="opacity:.3"], [style*="opacity: .3"],
[style*="opacity:.4"], [style*="opacity: .4"],
[style*="opacity:.45"], [style*="opacity: .45"],
[style*="opacity:.5"], [style*="opacity: .5"],
[style*="opacity:.55"], [style*="opacity: .55"],
[style*="opacity:.6"], [style*="opacity: .6"],
[style*="opacity:.65"], [style*="opacity: .65"],
[style*="opacity:.7"], [style*="opacity: .7"],
[style*="opacity:.75"], [style*="opacity: .75"],
[style*="opacity:0.3"], [style*="opacity: 0.3"],
[style*="opacity:0.4"], [style*="opacity: 0.4"],
[style*="opacity:0.45"], [style*="opacity: 0.45"],
[style*="opacity:0.55"], [style*="opacity: 0.55"],
[style*="opacity:0.65"], [style*="opacity: 0.65"]{
  opacity: 1 !important;
  color: #6f6653 !important;
}

/* Мотивационное письмо и обоснование поддержки — читаются
   целиком, без приглушения: по ним принимают решение. */
.application-motivation, .charity-reason,
[class*="motivation"], [class*="charity"]{
  opacity: 1 !important;
  color: var(--p-ink) !important;
}

/* ─── Короткий подвал кабинетов ────────────────────────────────
   Две строки: правовые ссылки и знак дистанционной работы.
   Разделов и тридцати ссылок здесь нет — см. footer.js. */
.footer-slim .site-footer-slim{
  max-width: 1000px;
  margin: 0 auto;
  padding: 18px clamp(18px, 5vw, 64px);
  text-align: center;
}
.footer-slim .site-footer-legal{
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--p-ink-dim) !important;
}
.footer-slim .site-footer-legal a{
  color: var(--p-navy) !important;
  text-decoration: none;
}
.footer-slim .site-footer-legal a:hover{ color: var(--p-ruby) !important; }
.footer-slim .site-footer-bottom{
  margin-top: 8px;
  font-size: 11.5px;
  color: #8a8270 !important;
}

/* ─── Список языков ────────────────────────────────────────────
   Открывается по кнопке в шапке. Названия на самих языках. */
#lang-menu{
  min-width: 150px;
  background: var(--p-paper-lift, #efeadd);
  border: 1px solid var(--p-line, rgba(38,34,26,0.16));
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(38,34,26,0.14);
  padding: 4px 0;
}
#lang-menu button{
  display: block; width: 100%;
  padding: 8px 16px;
  border: none; background: none;
  text-align: left;
  font-size: 13px;
  color: var(--p-ink, #26221a);
  cursor: pointer;
}
#lang-menu button:hover{ background: rgba(34,64,111,0.08); color: var(--p-navy, #22406f); }

/* ─── Подзаголовок «UNIVERSITY» на главной ─────────────────────
   Был растянут разрядкой 0.52em — почти полбуквы между знаками.
   Слово расползалось и висело оторванно от названия.

   Разрядка вдвое меньше, кегль мельче, подтянуто вверх. Отступ
   text-indent повторяет разрядку: без него строка съезжает влево
   на ширину зазора после последней буквы. */
.hex-panel-subtitle{
  font-size: clamp(8px, 0.9vw, 10.5px) !important;
  letter-spacing: 0.26em !important;
  text-indent: 0.26em !important;
  margin: -9px 0 14px !important;
}

/* ─── Лица университета в подвале ──────────────────────────────
   Кружок с фотографией, рядом имя и должность. Где фото нет —
   первая буква имени: пустой кружок ничего не говорит. */
.footer-faces{ margin: 2px 0 10px; }
.face{
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0;
  text-decoration: none;
  color: inherit;
}
.face-avatar{
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--p-line-gold, rgba(138,106,36,0.45));
  display: flex; align-items: center; justify-content: center;
  background: rgba(138,106,36,0.10);
}
.face-photo{ width: 100%; height: 100%; object-fit: cover; display: block; }
.face-letter{
  font-family: 'Cormorant SC', serif;
  font-size: 15px;
  color: var(--p-gold, #8a6a24);
}
.face-text{ display: flex; flex-direction: column; line-height: 1.25; }
.face-text b{ font-size: 12.5px; color: var(--p-navy, #22406f); font-weight: 600; }
.face-role{ font-size: 11px; color: var(--p-ink-dim, #6f6653); }
a.face:hover b{ color: var(--p-ruby, #8f2f2f); }

/* ─── Фото преподавателя в панели ──────────────────────────────
   Кружок с образцом рядом с кнопкой. Виден сразу, каким будет
   на сайте: круглый и небольшой. */
.pp-photo-row{
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0;
}
.pp-photo-prev{
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--p-line-gold, rgba(138,106,36,0.45));
  background: rgba(138,106,36,0.10);
  display: flex; align-items: center; justify-content: center;
}
.pp-photo-prev img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-letter{
  font-family: 'Cormorant SC', serif;
  font-size: 17px;
  color: var(--p-gold, #8a6a24);
}

/* ─── Санкции: кто закрыт и журнал решений ─────────────────────
   Строка на запись: вид, кого, кнопка снятия. Журнал — датой,
   решением и причиной. */
.acc-row{
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--p-line, rgba(38,34,26,0.16));
}
.acc-kind{
  font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--p-ink-dim, #6f6653); min-width: 66px;
}
.acc-target{ flex: 1; font-size: 14px; color: var(--p-ink, #26221a); }

.sanc-row{
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 7px 0;
  border-bottom: 1px solid #e2d8bd;
  font-size: 13px;
}
.sanc-when{ color: var(--p-ink-dim, #6f6653); font-size: 11.5px; min-width: 108px; }
.sanc-what{ font-weight: 600; }
.sanc-who{ color: var(--p-ink, #26221a); }
/* Причина курсивом: это пояснение к решению, а не само решение. */
.sanc-why{ color: var(--p-ink-dim, #6f6653); font-style: italic; flex: 1 1 100%; }
.sanc-by{ color: #8a8270; font-size: 11px; margin-left: auto; }

/* ─── Жалобы на преподавателя ──────────────────────────────────
   Обращение, под ним ответ. Неотвеченные помечены рубиновой
   чертой слева: их видно сразу в списке. */
.cmp-item{
  padding: 12px 0 12px 14px;
  border-left: 2px solid var(--p-line, rgba(38,34,26,0.16));
  border-bottom: 1px solid #e2d8bd;
  margin-bottom: 4px;
}
.cmp-item.cmp-new{ border-left-color: var(--p-ruby, #8f2f2f); }
.cmp-when{ font-size: 11.5px; color: var(--p-ink-dim, #6f6653); margin-bottom: 6px; }
.cmp-text{ font-size: 14px; line-height: 1.55; white-space: pre-wrap; color: var(--p-ink, #26221a); }
.cmp-answer{
  margin-top: 10px; padding: 10px 12px;
  background: rgba(34,64,111,0.05);
  border-left: 2px solid var(--p-navy, #22406f);
  font-size: 13.5px; line-height: 1.55; white-space: pre-wrap;
}
.cmp-answer b{ color: var(--p-navy, #22406f); font-size: 12px; }
.cmp-wait{ margin-top: 8px; font-size: 12px; color: var(--p-gold, #8a6a24); }
.cmp-reply{ margin-top: 10px; }
.cmp-reply textarea{ width: 100%; margin-bottom: 8px; }

/* ─── Реестр дипломов ──────────────────────────────────────────
   Строка на диплом: имя, номер, степень, дата и состояние.
   Отозванные приглушены — они в реестре остаются, но действия
   с ними закончены. */
.dip-row{
  padding: 11px 0;
  border-bottom: 1px solid #e2d8bd;
}
.dip-row-revoked{ opacity: 0.62; }
.dip-main{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dip-main b{ font-size: 14px; color: var(--p-ink, #26221a); }
.dip-num{
  font-family: 'LR Mono', monospace;
  font-size: 11.5px; color: var(--p-ink-dim, #6f6653);
}
.dip-sub{ font-size: 12px; color: var(--p-ink-dim, #6f6653); margin-top: 3px; }
.dip-state{ margin-left: 6px; font-size: 11.5px; }
.dip-revoked{ color: var(--p-ruby, #8f2f2f); }
.dip-dup{ color: var(--p-gold, #8a6a24); }
.dip-btns{ margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── Кадры ────────────────────────────────────────────────────
   Строка на сотрудника: имя, должности, права, кнопка.
   Уволенные приглушены — запись остаётся, но человек не работает. */
.hr-row{
  padding: 11px 0;
  border-bottom: 1px solid #e2d8bd;
}
.hr-dismissed{ opacity: 0.6; }
.hr-main{ display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hr-main b{ font-size: 14px; color: var(--p-ink, #26221a); }
.hr-pos{ font-size: 12px; color: var(--p-navy, #22406f); }
.hr-sub{ font-size: 11.5px; color: var(--p-ink-dim, #6f6653); margin-top: 3px; }
.hr-btns{ margin-top: 8px; }
#hr-order-text{ font-family: 'LR Mono', monospace; font-size: 12.5px; }

/* ─── Разделы кабинета сотрудника ──────────────────────────────
   Ссылка-карточка: название и что за ним. Без пояснения человек
   не поймёт, куда ведёт «Документы» и чем они отличаются
   от «Оценок». */
.st-section{
  display: block;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--p-line, rgba(38,34,26,0.16));
  border-left: 2px solid var(--p-navy, #22406f);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  background: rgba(34,64,111,0.03);
}
.st-section:hover{ background: rgba(34,64,111,0.07); }
.st-section b{ display: block; font-size: 14px; color: var(--p-navy, #22406f); }
.st-section span{ display: block; font-size: 12.5px; color: var(--p-ink-dim, #6f6653); margin-top: 3px; }

/* ─── Вакансии и отклики ───────────────────────────────────────
   Открытое место — карточкой, отклик — строкой с рассказом
   о себе целиком: решение принимается по нему, и прятать его
   под «показать полностью» значило бы мешать. */
.vac-item{
  padding: 10px 0 10px 12px;
  border-left: 2px solid var(--p-line-gold, rgba(138,106,36,0.45));
  border-bottom: 1px solid #e2d8bd;
  margin-bottom: 4px;
}
.vac-item b{ display: block; font-size: 14px; color: var(--p-navy, #22406f); }
.vac-item span{ display: block; font-size: 12.5px; color: var(--p-ink-dim, #6f6653); margin-top: 3px; }
.vac-when{ font-size: 11.5px; color: var(--p-ink-dim, #6f6653); }

.vac-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0;
  border-bottom: 1px solid #e2d8bd;
}
.vac-closed{ opacity: 0.55; }

.vac-app{
  padding: 12px 0 12px 14px;
  border-left: 2px solid var(--p-ruby, #8f2f2f);
  border-bottom: 1px solid #e2d8bd;
  margin-bottom: 6px;
}
.vac-done{ border-left-color: var(--p-line, rgba(38,34,26,0.16)); opacity: 0.7; }
.vac-about{
  margin-top: 8px; font-size: 13.5px; line-height: 1.55;
  white-space: pre-wrap; color: var(--p-ink, #26221a);
}
.vac-note{
  margin-top: 8px; padding: 8px 10px;
  background: rgba(34,64,111,0.05);
  border-left: 2px solid var(--p-navy, #22406f);
  font-size: 12.5px;
}
.vac-btns{ margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }