/* ============================================================
   Beztest — Academic Atelier
   Тёплая редакционная система: бумага, чернила, латунь.
   ============================================================ */
:root {
  --v50:#f5f1e8; --v100:#ebe4d6; --v200:#d9ceba; --v300:#bdad91;
  --v400:#8b7657; --v500:#496b60; --v600:#285548; --v700:#1d463b; --v800:#15372f;
  --primary:#285548; --primary-600:#1d463b; --primary-700:#15372f;
  --accent:#c18a45; --accent-2:#9b642b; --accent-soft:#f3e5cd;
  --grad:linear-gradient(128deg,#2f6152 0%,#1d463b 58%,#173a32 100%);
  --grad-soft:linear-gradient(145deg,#f6f2e9,#e8e0d1);
  --sidebar-grad:linear-gradient(168deg,#18372f 0%,#102a24 62%,#0b211c 100%);

  --cream:#fffaf0;
  /* Поверхности и служебные роли кабинета: значения совпадают с прежними
     литералами — светлая тема не меняется, тёмная переопределяет токены. */
  --surface-2:#fffefa; --surface-3:#fbf8f0; --panel:#faf6ed; --hover:#f8f4eb;
  --hover-line:#b7aa93; --chip-bg:#f3efe6; --tabs-bg:#eee8dc;
  --disabled-bg:#f4f1e9; --disabled-line:#ddd7ca; --input-line:#948671;
  --on-primary:#fffdf7; --quote-bg:#fbf8f1; --skel-mid:#f6f2e9;
  --spin-track:#ddd5c6; --star-focus:#f4e7d1; --ndot-ring:#f8f5ed; --ndot-bg:#b63c42; --on-green:#fffaf0;
  --badge-bg:#eef0eb; --badge-ink:#355146; --badge-gray-bg:#eeece7;
  --badge-gray-ink:#5e6662; --badge-violet-bg:#ece8f5; --badge-violet-ink:#4d3f86;
  --topbar-bg:rgba(250,247,239,.88); --topbar-line:rgba(190,183,170,.7);
  --card-glass:rgba(255,253,248,.96); --stat-glass:rgba(255,253,248,.94);
  --paper-glow:rgba(255,255,255,.72); --paper-stripe:rgba(52,78,68,.018);
  --busy-bar:rgba(255,255,255,.75);
  --unread-bg:#f8f1e4; --unread-mark:#b67b38; --item-hover:#f7f2e8;
  --selection-bg:#e5c99c; --placeholder:#6f7873;
  --card-hover-line:#c4b497; --danger-line:#e4c2c0; --modal-line:#d9cdb9;
  --busy-bar-ghost:rgba(40,85,72,.5); --file-btn-bg:#e8eee9; --file-btn-ink:#15372f;
  --scroll-shadow:rgba(23,35,31,.14);
  --ink:#17231f; --ink-2:#3f4c47; --muted:#5f6a65; --faint:#626c67;
  --line:#ded8cb; --line-2:#ece7dd; --bg:#f2eee5; --surface:#fffdf8;
  /* Каждое семейство даёт три роли: акцент (иконка, полоса), подложку и цвет
     текста на этой подложке. Раньше текстовый оттенок писали на месте — пять
     почти одинаковых красных (#8d2930, #902f35, #912e35, #962f36) на пять
     поверхностей с одним и тем же смыслом, и шестой добавлялся сам собой. */
  --green:#147348; --green-2:#0e603c; --green-bg:#e4f2e9; --green-ink:#0e603c; --green-line:#cae5d5;
  --red:#b63c42; --red-bg:#fae8e7; --red-ink:#8d2930; --red-line:#f1d1d0;
  --amber:#9b642b; --amber-bg:#f7ead6; --amber-ink:#78491c; --amber-line:#ecd6b4;
  --blue:#34657a; --blue-bg:#e6f0f3; --blue-ink:#28576c; --blue-line:#ccdee5;

  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sh-xs:0 1px 2px rgba(23,35,31,.06);
  --sh-sm:0 4px 14px rgba(32,45,39,.055);
  --sh-md:0 14px 34px rgba(25,43,36,.10);
  --sh-lg:0 28px 70px rgba(7,25,20,.22);
  --sh-primary:0 10px 24px rgba(21,70,58,.20);
  /* Кромка бумаги: светлый hairline по верхней грани — лист «ловит свет».
     Ямка: внутренняя тень для утопленных лотков (трек вкладок, ящик чекбоксов). */
  --paper-edge:inset 0 1px 0 rgba(255,255,255,.55);
  --well:inset 0 1px 4px rgba(23,35,31,.07);
  --sidebar-w:270px;

  /* Единая механика движения: раньше в файле встречалось семь разных длительностей
     и переходы разъезжались между соседними компонентами. */
  --dur-fast:.12s; --dur:.16s; --dur-slow:.24s;
  --ease:cubic-bezier(.2,.8,.2,1);

  --font:'Onest','Segoe UI',system-ui,sans-serif;
  --display:'Literata',Georgia,serif;
}

*,*::before,*::after { box-sizing:border-box; }
html { margin:0; padding:0; min-width:320px; scroll-behavior:smooth; overflow-x:hidden; }
.lsection,.hero,.lfooter,.auth-card { scroll-margin-top:24px; }
body {
  margin:0; padding:0; min-width:320px; min-height:100vh;
  font-family:var(--font); color:var(--ink); background-color:var(--bg);
  background-image:radial-gradient(circle at 16% 8%,var(--paper-glow),transparent 25%),repeating-linear-gradient(90deg,transparent 0,transparent 79px,var(--paper-stripe) 80px);
  font-size:15px; line-height:1.58; letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.is-landing { background:#10201b; color-scheme:dark; }
[hidden] { display:none !important; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-600); }
h1,h2,h3,h4 { margin:0 0 .55em; color:var(--ink); line-height:1.14; font-family:var(--display); font-weight:650; letter-spacing:-.025em; text-wrap:balance; }
/* Явная шкала заголовков: без неё размеры брались из умолчаний браузера в em и
   зависели от кегля родителя — иерархия плыла от страницы к странице. */
h1 { font-size:28px; }
h2 { font-size:21px; }
h3 { font-size:17px; }
h4 { font-size:15px; }
img { max-width:100%; }
button,input,select,textarea { font:inherit; }
button { touch-action:manipulation; }
/* Системная серая заливка при тапе спорит с собственными состояниями кнопок. */
a,button,input,select,textarea,[role='button'],[role='tab'] { -webkit-tap-highlight-color:rgba(40,85,72,.12); }
::selection { color:var(--ink); background:var(--selection-bg); }
:focus { outline:none; }
/* Кольцо фокуса — нетекстовый элемент интерфейса: WCAG требует контраст 3:1.
   Прежний #d6a35d давал 1.96 на фоне кабинета и 2.25 на поле ввода, то есть на
   светлых экранах фокус был почти неразличим. На тёмном сайдбаре он, наоборот,
   читался хорошо (6.71) — там прежний цвет и оставляем. */
:focus-visible { outline:3px solid #a8701f; outline-offset:3px; }
/* Светлое кольцо — только на тёмных поверхностях. Карточка входа светлая, и на
   ней латунный контур давал 2.2:1 вместо требуемых 3:1 для элементов управления. */
.sidebar :focus-visible, .lnav :focus-visible, .hero-left :focus-visible, .lfooter :focus-visible { outline-color:#d6a35d; }
/* Латунная плашка призыва и тёмный исходящий пузырь чата гасили стандартное
   кольцо: 1.81:1 и 2.10:1 к своим фонам. На латуни — тёмный контур, на тёмном
   пузыре — кремовый. */
.cta-inner :focus-visible { outline-color:#17382f; }
.msg.out :focus-visible { outline-color:var(--cream); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.skip-link { position:fixed; z-index:2000; top:10px; left:12px; padding:10px 14px; border-radius:8px; background:var(--surface); color:var(--ink); box-shadow:var(--sh-lg); transform:translateY(-160%); transition:transform .16s; }
.skip-link:focus { transform:translateY(0); }
.noscript { margin:20px; padding:16px; border:1px solid var(--red); background:var(--red-bg); border-radius:var(--r); }

/* Ползунок — из тёплой шкалы, а не нейтрально-серый: единственный «чужой» цвет
   в гамме был именно тут. scrollbar-color покрывает Firefox. */
* { scrollbar-color:var(--v300) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--v300); border:3px solid transparent; border-radius:99px; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:var(--v400); background-clip:padding-box; }
/* Лендинг тёмный по дизайну — ползунок приглушённо-зелёный. */
body.is-landing { --v300:#3a5248; --v400:#4e6a5d; }

/* ---------- Действия ---------- */
.btn {
  min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 19px; border:1px solid transparent; border-radius:10px;
  background:var(--grad); color:var(--on-primary); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--sh-primary);
  font-weight:650; font-size:14px; line-height:1.25; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;
}
.btn:hover { color:#fff; transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 13px 28px rgba(21,70,58,.26); }
/* Нажатие меняет освещение, а не только позицию: блик гаснет, появляется
   внутренняя тень — кнопка «вдавливается». */
.btn:active { transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(9,26,21,.32); }
.btn.ghost:active { box-shadow:var(--well); }
.btn:disabled { opacity:.54; cursor:not-allowed; transform:none; box-shadow:none; }
/* Две кнопки тёмного лендинга — латунная главная и контурная светлая. Раньше
   тот же латунный градиент жил в трёх контекстных правилах (hero, гостевая
   форма, навигация) и чуть-чуть расходился в каждом. */
.btn.brass { color:#162820; background:linear-gradient(165deg,#ddb168,#cf9c50); box-shadow:inset 0 1px 0 rgba(255,250,240,.35),0 12px 28px rgba(0,0,0,.22); }
.btn.brass:hover { color:#162820; background:linear-gradient(165deg,#e6bd76,#d9a85e); }
.btn.brass:active { box-shadow:inset 0 2px 5px rgba(0,0,0,.28); }
.btn.outline-light { background:transparent; color:var(--cream); border-color:rgba(255,250,240,.28); box-shadow:none; }
.btn.outline-light:hover { color:var(--cream); background:rgba(255,250,240,.08); box-shadow:none; }
/* Кнопка в работе: приглушена меньше, курсор «ожидание» и бегущая полоса —
   иначе «идёт запрос» неотличимо от «действие недоступно». */
.btn[aria-busy='true'] { position:relative; overflow:hidden; opacity:.82; cursor:progress; }
.btn[aria-busy='true']::after {
  content:''; position:absolute; left:0; bottom:0; height:2px; width:40%;
  background:var(--busy-bar); animation:btn-busy 1.1s var(--ease) infinite;
}
.btn.ghost[aria-busy='true']::after { background:var(--busy-bar-ghost); }
@keyframes btn-busy { from { transform:translateX(-100%); } to { transform:translateX(350%); } }
.btn svg { width:17px; height:17px; }
.btn.ghost { color:var(--ink); background:var(--surface); border-color:var(--line); box-shadow:var(--sh-xs); }
.btn.ghost:hover { background:var(--hover); border-color:var(--hover-line); box-shadow:var(--sh-sm); }
.btn.danger { background:#9e3038; box-shadow:0 9px 22px rgba(158,48,56,.2); }
.btn.success { background:#176b47; box-shadow:0 9px 22px rgba(23,107,71,.2); }
.btn.sm { min-height:38px; padding:7px 13px; border-radius:8px; font-size:13px; }
.btn.lg { min-height:50px; padding:13px 24px; font-size:15px; }
.btn.block { width:100%; }
.btn-link { min-height:36px; padding:5px 7px; border:0; background:transparent; color:var(--primary); font-size:13px; font-weight:650; cursor:pointer; }
.btn-link:hover { text-decoration:underline; }
/* Ссылка-кнопка внутри текста: без внутренних отступов, чтобы знаки препинания не отрывались. */
.btn-link.inline-link { min-height:0; padding:0; font-size:inherit; text-decoration:underline; text-underline-offset:2px; }

/* ---------- Формы ---------- */
.field { display:block; min-width:0; margin-bottom:15px; }
.field > span { display:block; margin-bottom:7px; color:var(--ink-2); font-size:12.5px; font-weight:650; letter-spacing:.015em; }
.input,.textarea,.select {
  width:100%; min-width:0; min-height:46px; padding:11px 13px;
  border:1px solid var(--input-line); border-radius:9px; background:var(--surface-2); color:var(--ink); box-shadow:inset 0 1px 2px rgba(23,35,31,.04);
  font-size:14px; transition:border-color .16s,box-shadow .16s,background .16s;
}
.input::placeholder,.textarea::placeholder { color:var(--placeholder); opacity:1; }
.input:hover,.textarea:hover,.select:hover { border-color:#6f6250; }
.input:focus,.textarea:focus,.select:focus { border-color:var(--primary); box-shadow:0 0 0 4px rgba(40,85,72,.12); }
/* У <input type=date> подсказки нет, :placeholder-shown для него не срабатывает — пустое
   обязательное поле краснело до первого касания. Для дат — только после взаимодействия. */
.input:not([type=date]):invalid:not(:placeholder-shown),.textarea:invalid:not(:placeholder-shown),.input[type=date]:user-invalid { border-color:#bb666a; }
/* Отключённое поле раньше выглядело как обычное: пользователь пытался в него
   писать и не понимал, почему ничего не происходит. */
.input:disabled,.textarea:disabled,.select:disabled {
  border-color:var(--disabled-line); background:var(--disabled-bg); color:var(--muted); cursor:not-allowed; box-shadow:none;
}
.input:disabled::placeholder,.textarea:disabled::placeholder { color:#a9b0ab; }
.textarea { min-height:104px; resize:vertical; }
.select { appearance:none; padding-right:38px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2366716c' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; }
input[type='checkbox'] { width:19px; height:19px; flex:none; accent-color:var(--primary); }
input[type='file'] { padding:8px; }
input[type='file']::file-selector-button { min-height:30px; margin-right:10px; padding:5px 10px; border:0; border-radius:6px; background:var(--file-btn-bg); color:var(--file-btn-ink); font-weight:650; cursor:pointer; }
/* Чем мельче кегль, тем свободнее должна быть строка: прежде подсказки и
   подписи получали более плотный интерлиньяж, чем основной текст. */
.hint { margin-top:5px; color:var(--muted); font-size:12.5px; line-height:1.6; }
/* Одна и та же ошибка встречается в четырёх местах: под формой, над полем ввода
   чата, в списке и всплывающей подсказкой. Рисунок общий — рамка, скруглeние и
   акцентная полоса слева; меняется только плотность. */
.form-error { margin:0 0 12px; padding:10px 12px; border:1px solid var(--red-line); border-left:3px solid var(--red); border-radius:8px; background:var(--red-bg); color:var(--red-ink); font-size:13px; }
.row { display:flex; flex-wrap:wrap; gap:14px; }
.row > * { flex:1; min-width:min(170px,100%); }
/* Кнопка «убрать строку» — вспомогательный контрол: без этого она подчинялась
   общему правилу строки и занимала треть ширины наравне с полями ввода. */
.row > .btn.sm { flex:none; min-width:0; align-self:center; }
.order-form,.profile-form,.settings-form { width:100%; }
/* Настройки: секции с заголовком, редакторы списков (ступени, даты, шаблоны). */
.settings-section { padding-top:4px; margin-bottom:22px; }
.settings-section + .settings-section { padding-top:18px; border-top:1px dashed var(--line); }
.list-editor { display:grid; gap:10px; }
.settings-form .hint + .field { margin-top:12px; }
.list-editor-row { position:relative; display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; padding:10px 54px 10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.list-editor-row .field { flex:1 1 140px; }
.list-editor-row .field span { font-size:11.5px; }
.list-editor-row .list-editor-wide { flex:1 1 100%; display:grid; gap:8px; }
.list-editor-row .list-editor-wide .row .field { flex:1 1 160px; }
.list-editor-row .list-editor-wide .textarea { min-height:64px; }
.list-editor-row .list-editor-del { position:absolute; top:10px; right:10px; width:34px; height:34px; }
/* Высота шаблона по содержимому (скрипт) — без внутренней прокрутки поля. */
.textarea-auto { overflow:hidden; resize:vertical; }
/* Навигация по секциям настроек: чипы с иконкой, под заголовком страницы. */
.settings-tabs { max-width:660px; margin-bottom:14px; }
.settings-tabs .chip { display:inline-flex; align-items:center; gap:6px; }
.settings-tabs .chip svg { width:14px; height:14px; }
.settings-section:focus { outline:none; }
/* Шаблоны ответов — свёрнутая секция: заголовок-summary с счётчиком. */
.settings-templates > summary { cursor:pointer; list-style:none; }
.settings-templates > summary::-webkit-details-marker { display:none; }
.settings-templates > summary::after { content:'▸'; margin-left:auto; color:var(--muted); transition:transform .15s; }
.settings-templates[open] > summary::after { transform:rotate(90deg); }
.settings-templates > summary .badge { margin-left:2px; }
/* Липкая панель «Сохранить»: форма в пять секций, кнопка всегда под рукой.
   Внутри карточки — sticky к низу окна; отрицательные поля растягивают её
   на всю ширину карточки. */
.settings-sticky { position:sticky; bottom:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px -23px -23px; padding:12px 23px; border-top:1px solid var(--line); border-radius:0 0 var(--r-lg) var(--r-lg); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(8px); }
.settings-sticky.is-dirty { border-top-color:var(--accent); box-shadow:0 -8px 24px rgba(12,30,25,.10); }
.settings-sticky.is-dirty .settings-sticky-status { color:var(--ink); font-weight:600; }
@media (max-width:760px) {
  .settings-sticky { margin:14px -15px -18px; padding:10px 15px max(10px,env(safe-area-inset-bottom)); }
  .settings-sticky .btn { min-height:44px; }
}
/* Двухэтапный вход: QR, секрет крупно, резервные коды столбиком. */
.totp-steps { margin:0 0 14px; padding-left:20px; font-size:13.5px; line-height:1.55; color:var(--ink-2); }
.totp-secret { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-bottom:14px; }
.qr-canvas { flex:none; border:1px solid var(--line); border-radius:10px; background:#fff; image-rendering:pixelated; }
.totp-secret-text { flex:1 1 200px; min-width:0; }
/* Ссылка otpauth:// — для настройки с того же телефона: QR с его экрана не
   снять, поэтому на узком экране ссылка стоит первой, а QR спрятан. */
.totp-open { margin-bottom:12px; }
@media (max-width:560px) { .totp-secret .qr-canvas { display:none; } .totp-open { width:100%; justify-content:center; } }
.totp-secret-code { display:block; margin-top:4px; font-size:17px; letter-spacing:.06em; word-break:break-all; color:var(--ink); }
.code-input { font-size:22px; letter-spacing:.3em; text-align:center; max-width:220px; }
.backup-code-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 18px; margin:12px 0; padding:0; list-style:none; }
.backup-code-list code { font-size:16px; letter-spacing:.05em; }

/* ---------- Карточки и системные элементы ---------- */
.card { padding:23px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--card-glass); box-shadow:var(--paper-edge),var(--sh-sm); }
/* Мера чтения: сплошной текст в карточке не должен растягиваться на всю ширину
   широкого монитора — строка за сотню знаков читается заметно хуже. */
.card .prose { max-width:68ch; }
/* Любой текст, пришедший от пользователя, обязан переноситься. Замер: одна
   вставленная в описание заказа ссылка без пробелов растягивала документ до
   2504 пикселей при окне 890 — вбок ехала вся страница, а не только абзац.
   Именно anywhere, а не break-word: только он учитывается при расчёте
   минимальной ширины блока. */
.prose, .oc-desc, .bid .cmt, .notif-item, .policy-copy, .m-body,
.empty p, table.data td, .t-title, .t-sub { overflow-wrap:anywhere; }
.card + .card { margin-top:18px; }
/* Карточки настроек: форма читается по мере строки, а не во всю колонку. */
.card.narrow { max-width:660px; }
.card.wide { max-width:800px; }
.card-title { display:flex; align-items:center; gap:9px; margin-bottom:18px; color:var(--ink); font-family:var(--display); font-size:16px; font-weight:650; }
.card-title::after { content:''; height:1px; flex:1; margin-left:5px; background:linear-gradient(90deg,var(--line),transparent); background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--line) 42%,transparent); }
.card-title svg { width:19px; height:19px; color:var(--accent-2); }
/* Заголовок карточки с действием справа («Открыть очередь», «Журнал по заказу»):
   декоративная черта уступает место ссылке, иначе она прижималась к тексту. */
.card-title .ct-head { display:flex; flex:1; align-items:center; gap:10px; min-width:0; }
.card-title .ct-action { margin-left:auto; font-family:var(--font); font-weight:500; white-space:nowrap; }
.card-title:has(.ct-head)::after, .card-title:has(.ct-action)::after { display:none; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid transparent; border-radius:999px; background:var(--badge-bg); color:var(--badge-ink); font-size:12px; line-height:1.3; font-weight:650; white-space:nowrap; }
.badge svg { width:13px; height:13px; }
.badge.gray { background:var(--badge-gray-bg); color:var(--badge-gray-ink); }
.badge.green { background:var(--green-bg); color:var(--green-ink); }
.badge.red { background:var(--red-bg); color:var(--red-ink); }
.badge.amber { background:var(--amber-bg); color:var(--amber-ink); }
.badge.blue { background:var(--blue-bg); color:var(--blue-ink); }
.badge.violet { background:var(--badge-violet-bg); color:var(--badge-violet-ink); }
.dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.alert { display:flex; align-items:flex-start; gap:11px; padding:13px 15px; border:1px solid transparent; border-radius:10px; font-size:13.5px; line-height:1.48; }
.alert svg { width:18px; height:18px; }
.alert.success { color:var(--green-ink); background:var(--green-bg); border-color:var(--green-line); }
.alert.error { color:var(--red-ink); background:var(--red-bg); border-color:var(--red-line); }
.alert.info { color:var(--blue-ink); background:var(--blue-bg); border-color:var(--blue-line); }
.alert.warn { color:var(--amber-ink); background:var(--amber-bg); border-color:var(--amber-line); }
/* Плотный вариант для шапки карточки: те же правила лежали инлайном в четырёх
   местах подряд. */
.alert.sm { margin-bottom:10px; padding:8px 12px; font-size:13px; }
.alert .a-ico { flex:none; margin-top:1px; }
.alert b { display:block; margin-bottom:2px; }
.avatar { width:38px; height:38px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#d4a45d; color:#142b24; box-shadow:inset 0 0 0 1px rgba(23,35,31,.12); font-family:var(--display); font-size:14px; font-weight:700; }
.avatar.sm { width:32px; height:32px; font-size:11px; }
.avatar.lg { width:48px; height:48px; font-size:16px; }

/* ============================================================
   ЛЕНДИНГ
   ============================================================ */
.landing { min-height:100vh; display:flex; flex-direction:column; overflow:clip; position:relative; background:#10201b; color:var(--cream); }
.landing:focus { outline:none; }
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; background:linear-gradient(92deg,rgba(9,27,22,.97) 0%,rgba(12,33,27,.91) 47%,rgba(12,30,25,.82) 100%),url('/img/hero.webp') center/cover no-repeat #10251f; }
.hero-bg::before { content:''; position:absolute; width:620px; height:620px; right:-250px; top:-280px; border:1px solid rgba(214,170,97,.2); border-radius:50%; box-shadow:0 0 0 68px rgba(214,170,97,.025),0 0 0 138px rgba(214,170,97,.018); }
.hero-bg::after { content:'BZ'; position:absolute; right:2vw; bottom:-.19em; color:rgba(255,250,240,.025); font-family:var(--display); font-size:min(46vw,640px); font-weight:700; line-height:.8; letter-spacing:-.1em; }
.grid-overlay { position:absolute; inset:0; z-index:0; opacity:.32; background-image:linear-gradient(rgba(236,222,194,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(236,222,194,.045) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,#000,transparent 80%); }
/* Линия под навигацией лежит на обёртке во всю ширину, а не на контейнере:
   иначе она обрывалась за 16px до краёв экрана. Один контейнер 1200px у шапки,
   первого экрана, секций, плашки и подвала — левые края совпадают. */
.lnav-bar { position:relative; z-index:5; border-bottom:1px solid rgba(255,250,240,.11); }
.lnav { position:relative; z-index:5; box-sizing:content-box; max-width:1200px; margin:0 auto; padding:22px 6vw; display:flex; align-items:center; gap:26px; }
.lnav .brand { display:flex; align-items:center; gap:10px; flex:none; color:var(--cream); font-family:var(--display); font-size:20px; font-weight:650; }
.lnav .brand:hover { color:#fff; }
.lnav .brand .logo { width:38px; height:38px; padding:7px; display:inline-flex; color:#ddb36d; border:1px solid rgba(221,179,109,.5); border-radius:50%; }
.lnav .brand .logo svg { width:100%; height:100%; }
/* Переносим, а не прячем в прокрутку: полосы не видно, и пункты, не влезшие в
   строку, просто переставали существовать. На широком экране переноса нет. */
.lnav .links { display:flex; flex-wrap:wrap; gap:2px; margin-left:8px; min-width:0; }
.lnav .links a { flex:none; }
.lnav .links a { padding:8px 11px; border-radius:7px; color:#c2cec8; font-size:13.5px; font-weight:500; transition:color .15s,background .15s; }
.lnav .links a:hover { color:var(--cream); background:rgba(255,255,255,.07); }
.lnav .spacer { flex:1; }
.lnav .btn { min-height:40px; }
/* Пункты только для телефона (см. медиазапрос ниже). */
.lnav .links .lnav-phone { display:none; }
/* Кнопка меню — только на узких экранах (см. медиазапрос ниже). */
.lnav .menu-btn { display:none; align-items:center; gap:7px; min-height:40px; padding:0 12px; border:1px solid rgba(255,250,240,.18); border-radius:8px; background:transparent; color:var(--cream); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; }
.lnav .menu-btn svg { width:18px; height:18px; }
.lnav .menu-btn:hover, .lnav.open .menu-btn { background:rgba(255,255,255,.07); }
@media (max-width:900px) {
  .lnav { flex-wrap:nowrap; gap:10px; }
  .lnav .menu-btn { display:inline-flex; }
  .lnav .links { display:none; position:absolute; top:100%; left:0; right:0; z-index:6; flex-direction:column; gap:2px; margin:0; padding:10px 12px 14px; border-bottom:1px solid rgba(255,250,240,.11); background:rgba(10,26,21,.98); backdrop-filter:blur(10px); box-shadow:0 18px 34px rgba(0,0,0,.35); animation:veil-in var(--dur) var(--ease); }
  .lnav.open .links { display:flex; }
  .lnav .links a { min-height:46px; padding:12px 14px; font-size:15.5px; }
  /* Прайс и регистрация — только в раскрытом меню телефона: на десктопе
     для них есть карточка в hero и кнопка «Войти». Регистрация отделена
     линией и подсвечена латунью — это главное действие, а не седьмой якорь. */
  .lnav .links .lnav-phone { display:block; }
  .lnav .links .lnav-cta { margin-top:6px; border-top:1px solid rgba(255,250,240,.11); padding-top:14px; color:#dcb374; font-weight:650; }
}
.hero { position:relative; z-index:2; box-sizing:content-box; max-width:1200px; margin:0 auto; padding:56px 6vw 96px; display:grid; grid-template-columns:minmax(0,1.12fr) minmax(360px,.74fr); align-items:start; gap:clamp(38px,7vw,100px); }
/* Левая колонка выровнена по верху карточки, а не по её середине: иначе на
   1366×768 заголовок и главная кнопка уезжали под сгиб. */
.hero-left { max-width:680px; padding-top:clamp(12px,5vh,64px); }
.hero-left .pill { display:inline-flex; align-items:center; gap:10px; margin-bottom:26px; padding:5px 13px 5px 5px; border:1px solid rgba(221,179,109,.24); border-radius:999px; background:rgba(8,24,20,.38); color:#cbd4cf; backdrop-filter:blur(8px); font-size:12.5px; }
.hero-left .pill .tag { flex:none; padding:4px 10px; border-radius:999px; background:#d5a85c; color:#152a23; font-size:10.5px; font-weight:700; letter-spacing:.09em; white-space:nowrap; }
.hero-left h1 { max-width:720px; margin:0 0 23px; color:var(--cream); font-size:clamp(43px,6vw,76px); line-height:.98; font-weight:600; letter-spacing:-.055em; text-wrap:balance; }
.hero-left h1 .accent { display:block; margin-left:clamp(0px,6vw,72px); color:#d8aa61; font-style:italic; font-weight:500; }
.hero-left p.lead { max-width:590px; margin:0 0 31px; color:#bdc9c3; font-size:17px; line-height:1.66; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; }
.hero-cta .btn svg, .cta-inner .btn svg { transition:transform var(--dur) var(--ease); }
.hero-cta .btn.brass:hover svg, .cta-inner .btn:hover svg { transform:translateX(3px); }
/* Гибкая строка, а не жёсткие три колонки: показателей может быть два, и в сетке
   третья колонка оставалась зияющей пустотой справа. */
.hero-stats { display:grid; grid-template-columns:repeat(3,minmax(0,auto)); justify-content:start; gap:18px 40px; margin-top:43px; padding-top:27px; border-top:1px solid rgba(255,250,240,.13); }
.hero-stats .s { min-width:0; max-width:210px; }
.hero-stats .s .n { color:var(--cream); font-family:var(--display); font-size:30px; font-weight:600; font-variant-numeric:tabular-nums; }
/* Две строки под подпись всегда: живые счётчики подменяют цифры компании
   после загрузки, и первый экран не должен при этом дёргаться. */
.hero-stats .s .l { min-height:2.7em; margin-top:1px; color:#91a39b; font-size:12.5px; line-height:1.35; }
.auth-card { position:relative; padding:30px; color:var(--ink); background:var(--cream); border:1px solid rgba(216,170,97,.6); border-radius:4px 22px 4px 22px; box-shadow:18px 18px 0 rgba(6,20,16,.34),var(--sh-lg); }
.auth-card::before { content:'КАБИНЕТ BEZTEST'; position:absolute; top:-12px; right:22px; padding:3px 9px; background:#d5a85c; color:var(--ink); font-size:9.5px; font-weight:700; letter-spacing:.13em; }
.auth-card h3 { margin:0 0 12px; color:var(--muted); font-family:var(--font); font-size:12px; font-weight:650; letter-spacing:.03em; }
/* Плашка над формой входа: инцидент, истёкшая сессия. */
.auth-card .auth-notice { margin:0 0 14px; text-align:left; }
.auth-card .input,.auth-card .select { background:#fffdf7; }
.social-row { display:flex; gap:9px; margin-bottom:16px; }
.social-btn { min-height:44px; flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:9px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink-2); font-size:12.5px; font-weight:650; cursor:pointer; transition:transform .15s,border-color .15s,background .15s; }
.social-btn:hover { transform:translateY(-1px); border-color:#a9987c; background:#f7f1e6; }
.social-btn:disabled { opacity:.55; cursor:wait; transform:none; }
.social-btn svg { width:20px; height:20px; }
.divider { display:flex; align-items:center; gap:11px; margin:5px 0 15px; color:var(--faint); font-size:11.5px; }
.divider::before,.divider::after { content:''; height:1px; flex:1; background:var(--line); }
.tabs { display:flex; margin-bottom:20px; padding:4px; border:1px solid var(--line); border-radius:10px; background:var(--tabs-bg); box-shadow:var(--well); }
.tabs button { min-height:38px; flex:1; padding:8px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:13.5px; font-weight:650; cursor:pointer; transition:background var(--dur),color var(--dur),transform var(--dur-fast) var(--ease); }
.tabs button:active { transform:scale(.97); }
.tabs button.active { background:var(--surface); color:var(--primary); box-shadow:0 2px 8px rgba(23,35,31,.08); }
.auth-switch { margin-top:12px; color:var(--muted); text-align:center; font-size:12px; overflow-wrap:anywhere; }
.policy { margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2); color:var(--muted); text-align:center; font-size:11.5px; }
.policy-copy { color:var(--ink-2); font-size:14px; line-height:1.62; }

/* Окно входа: поля с ошибкой у поля, роль карточками, пароль с «глазом». */
.auth-heading { margin:0 0 14px; color:var(--ink); font-family:var(--display); font-size:20px; font-weight:650; }
.auth-intro { margin:0 0 16px; color:var(--ink-2); font-size:14px; line-height:1.55; }
/* Причина, по которой человек видит форму входа («сессия завершена»): тост
   лендинг стирает при отрисовке, а эта строка стоит над полями. */
.auth-notice { margin:0 0 14px; padding:10px 12px; border:1px solid var(--blue-line); border-left:3px solid var(--blue); border-radius:8px; background:var(--blue-bg); color:var(--blue-ink); font-size:13px; line-height:1.5; }
.auth-notice.is-error { border-color:var(--red-line); border-left-color:var(--red); background:var(--red-bg); color:var(--red-ink); }
.auth-card .field > label:not(.consent-row), .auth-card .field-label { display:block; margin-bottom:7px; color:var(--ink-2); font-size:12.5px; font-weight:650; letter-spacing:.015em; }
.field-row { display:flex; align-items:stretch; gap:6px; }
.field-row .input { flex:1; }
.field-error { margin-top:6px; color:var(--red-ink); font-size:12.5px; line-height:1.5; }
.field.has-error .input, .field.has-error .select { border-color:var(--red); box-shadow:0 0 0 3px rgba(182,60,66,.12); }
.pw-eye { width:46px; min-height:46px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--input-line); border-radius:9px; background:var(--surface-2); color:var(--muted); cursor:pointer; transition:border-color .16s,color .16s; }
.pw-eye:hover { border-color:#6f6250; color:var(--ink); }
.pw-eye.is-on { color:var(--primary); border-color:var(--primary); }
.pw-eye svg { width:19px; height:19px; }
.pw-meter { display:flex; align-items:center; gap:10px; margin-top:8px; min-height:16px; }
.pw-bars { display:flex; gap:4px; flex:none; }
.pw-bars span { width:34px; height:5px; border-radius:3px; background:var(--line); transition:background .2s; }
.pw-bars span.on.l1 { background:var(--amber); }
.pw-bars span.on.l2 { background:#3f8a5f; }
.pw-bars span.on.l3 { background:var(--green); }
.pw-meter-label { color:var(--muted); font-size:12px; }
.pw-meter[data-level="1"] .pw-meter-label { color:var(--amber-ink); }
.pw-meter[data-level="2"] .pw-meter-label, .pw-meter[data-level="3"] .pw-meter-label { color:var(--green-ink); }

.role-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.role-card { display:flex; flex-direction:column; gap:3px; min-height:44px; padding:10px 11px; border:1px solid var(--input-line); border-radius:10px; background:var(--surface-2); color:var(--ink-2); text-align:left; cursor:pointer; transition:border-color .16s,background .16s,box-shadow .16s; }
.role-card b { color:var(--ink); font-size:13.5px; }
.role-card span { color:var(--muted); font-size:11.5px; line-height:1.4; }
.role-card:hover { border-color:#6f6250; }
.role-card.is-on { border-color:var(--primary); background:#eef3f0; box-shadow:0 0 0 3px rgba(40,85,72,.12); }
.role-card.is-on b { color:var(--primary); }
/* Пояснение показывается одно — к выбранной роли: три подписи в карточках
   добавляли карточке регистрации лишние полсотни пикселей. */
.role-desc { min-height:1.4em; margin-top:6px; color:var(--muted); font-size:12px; line-height:1.4; }

.login-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:-4px 0 14px; }
.check-row { display:inline-flex; align-items:center; gap:8px; color:var(--ink-2); font-size:13px; cursor:pointer; }
.check-row input { margin:0; }
.profile-form .check-row, .telegram-card .check-row { display:flex; align-items:flex-start; margin-top:6px; }
.profile-form .check-row input, .telegram-card .check-row input { margin-top:3px; flex:none; }
.profile-form .check-row .hint, .telegram-card .check-row .hint { display:block; margin-top:2px; }
.auth-link { color:var(--primary); font-size:13px; font-weight:600; }
.auth-switch a { color:var(--primary); font-weight:650; }
.auth-done { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--green-line); border-radius:10px; background:var(--green-bg); color:var(--green-ink); font-size:13.5px; line-height:1.55; }
.auth-done > span { width:22px; height:22px; flex:none; color:var(--green); }
.auth-done p { margin:6px 0 0; }
.btn.is-busy .btn-text::before { content:''; display:inline-block; width:12px; height:12px; margin-right:8px; vertical-align:-1px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
@media (prefers-reduced-motion:reduce) { .btn.is-busy .btn-text::before { animation:none; } }

/* Счётчик очереди на пункте меню сотрудника. */
.nav-badge { margin-left:auto; min-width:22px; padding:2px 7px; border-radius:11px; background:rgba(216,170,97,.22); color:#e9c98f; font-size:11.5px; font-weight:700; text-align:center; font-variant-numeric:tabular-nums; }
.nav-badge.is-overdue { background:var(--red); color:#fff; }
.queue-tabs { display:inline-flex; margin:0; }
/* «Мои (0)» в одну строку: flex:1 с узкой обёрткой ломал подпись пополам. */
.queue-tabs button { white-space:nowrap; flex:0 0 auto; padding-inline:14px; }
.queue-anchors { margin-bottom:14px; }
.queue-anchors .chip.chip-alarm { border-color:var(--amber); color:var(--amber-ink); }
.queue-empty { display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13.5px; }
.queue-empty svg { width:16px; height:16px; color:var(--green); }
.queue-sub + .queue-sub { margin-top:16px; }
.queue-sub-title { display:flex; align-items:center; gap:6px; margin:0 0 10px; font-family:var(--font); font-size:13px; font-weight:650; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.queue-sub-title svg { width:14px; height:14px; color:var(--amber); }
/* Диалоги, ждущие ответа сотрудника: строка на канал. */
.awaiting-list { display:flex; flex-direction:column; gap:6px; }
.awaiting-row { display:flex; align-items:center; gap:10px; min-width:0; padding:9px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink); text-decoration:none; transition:border-color .15s; }
.awaiting-row:hover { border-color:var(--hover-line); color:var(--ink); }
.awaiting-row .aw-title { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.awaiting-row .aw-meta { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.awaiting-row .badge { flex:none; }
/* Обращения в поддержку: та же строка, но кнопка (открывает тред на месте),
   и активная подсвечена латунью. Двухколоночная раскладка — список слева,
   диалог справа; на узком экране колонки складываются. */
.support-row { width:100%; font:inherit; text-align:left; cursor:pointer; }
.support-row.active { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
/* В узкой колонке списка строка переносится: бейдж и начало вопроса (до двух
   строк), ниже — кто и по какому заказу. Иначе от вопроса оставалось три слова. */
.support-list .support-row { flex-wrap:wrap; row-gap:4px; }
.support-list .support-row .aw-title { flex:1 1 60%; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.35; }
.support-list .support-row .aw-meta { flex:1 0 100%; white-space:normal; }
.support-layout { display:grid; grid-template-columns:minmax(260px,2fr) minmax(0,3fr); gap:16px; align-items:start; }
.support-layout .support-list { min-width:0; }
.support-layout .support-detail { min-width:0; position:sticky; top:12px; }
.support-detail .chat { height:420px; }
.card-title .icon-btn.support-back { display:none; width:36px; height:36px; }
.support-back svg { transform:rotate(180deg); }
.support-actions { justify-content:flex-end; }
.support-meta { line-height:1.7; overflow-wrap:anywhere; }
.support-templates { margin:0 0 8px; }
.support-order-link { text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.support-templates .chip { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.support-detail .card-title, .support-card .card-title { flex-wrap:wrap; row-gap:8px; }
@media (max-width:1000px) {
  .support-layout { grid-template-columns:1fr; }
  .support-layout .support-detail { position:static; }
  /* Открытый тред занимает экран целиком, список прячется — назад ведёт стрелка. */
  .support-layout.has-detail .support-list { display:none; }
  .card-title .icon-btn.support-back { display:flex; }
  .support-detail .card-title .ct-action, .support-card .card-title .ct-action { flex:1 0 100%; margin-left:0; }
  .support-actions { justify-content:flex-start; }
  /* Шаблоны — одной прокручиваемой строкой: четыре ряда чипов съедали ленту. */
  .filter-chips.support-templates { flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:thin; }
  .filter-chips.support-templates .chip { flex:none; }
}
/* На телефоне строка переносится: название — своей строкой, подписи — под ним. */
@media (max-width:640px) {
  .awaiting-row { flex-wrap:wrap; gap:6px 10px; }
  .awaiting-row .aw-title { flex-basis:100%; order:-1; white-space:normal; }
  .awaiting-row .aw-meta { flex:1 1 auto; }
}
/* Предупреждения о почте и диске на главной администратора. */
.home-warnings { display:flex; flex-direction:column; gap:8px; }
.home-warnings .alert { margin:0; }
.stat-grid.stat-grid-5.stat-grid-attention { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
/* Просрочки по SLA на главной сотрудника: плитки уже, подпись в две строки. */
.stat-grid-sla .stat { padding:16px 17px; }
.stat-grid-sla .st-n { font-size:24px; }
.stat-grid-sla .st-l { line-height:1.35; }
/* Отчёт «Авторы»: воронка горизонтальными полосами. */
.funnel { display:flex; flex-direction:column; gap:10px; }
.funnel-row { display:grid; grid-template-columns:minmax(150px,220px) minmax(0,1fr) minmax(110px,auto); align-items:center; gap:12px; }
.funnel-label { display:flex; flex-direction:column; gap:2px; min-width:0; }
.funnel-conv { color:var(--muted); font-size:12px; }
.funnel-conv.is-worst { color:var(--red-ink); font-weight:650; }
.funnel-bar-wrap { position:relative; display:flex; align-items:center; gap:10px; min-width:0; height:26px; }
.funnel-bar { height:100%; min-width:4px; border-radius:3px 8px 8px 3px; background:var(--grad); transition:width .3s; }
.funnel-n { font-family:var(--display); font-size:18px; font-weight:650; font-variant-numeric:tabular-nums; }
.funnel-stuck { font-size:13px; white-space:nowrap; text-align:right; }
.report-details > summary { cursor:pointer; list-style:none; }
.report-details > summary::-webkit-details-marker { display:none; }
.report-details > summary::before { content:'▸'; display:inline-block; width:14px; margin-right:4px; color:var(--muted); transition:transform .15s; }
.report-details[open] > summary::before { transform:rotate(90deg); }
.coverage-grid .st-n { font-size:24px; }
.coverage-authors { display:flex; flex-wrap:wrap; gap:4px; }
@media (max-width:640px) {
  .funnel-row { grid-template-columns:1fr; gap:4px; }
  .funnel-stuck { text-align:left; }
  .stat-grid.coverage-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Расчёты посредника с клиентом. */
/* Две колонки в модальном окне: правило .stat-grid ниже по файлу перебивало
   бы одиночный класс, поэтому селектор — составной. */
.stat-grid.receipts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:12px; }
/* Третья плитка — удержанная до приёмки предоплата — появляется только при резерве. */
.stat-grid.receipts-grid.receipts-grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.stat-grid.receipts-grid .stat { padding:12px 14px; }
.stat-grid.receipts-grid .st-n { font-size:20px; }
.stat-grid.receipts-grid .t-warn { color:var(--amber-ink); }
.receipt-list { display:flex; flex-direction:column; gap:6px; margin-top:12px; max-height:260px; overflow:auto; }
.receipt { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border:1px solid var(--line-2); border-radius:8px; font-size:13.5px; }
/* Цена сервиса → цена для клиента: по строке на заказ в «Расчётах». */
.order-money-list { display:flex; flex-direction:column; gap:6px; margin-top:12px; max-height:220px; overflow:auto; }
.order-money { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--line-2); border-radius:8px; font-size:13px; }
.order-money .input { width:110px; padding:5px 8px; font-size:13px; }
.order-money .t-title { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Клиенты на телефоне — карточки вместо таблицы в семь колонок. */
.client-cards { display:flex; flex-direction:column; gap:10px; }
.client-card { display:flex; flex-direction:column; gap:4px; width:100%; padding:12px 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--card-glass); color:inherit; text-align:left; font:inherit; cursor:pointer; }
.client-card:hover { border-color:var(--accent-2); }
.client-card.is-archived { opacity:.65; }
.client-card .client-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
/* Справочник клиентов: имя и вуз не сжимаются в столбик ради колонки действий. */
.clients-table td:first-child, .clients-table th:first-child { min-width:200px; }
.clients-table td:last-child > .flex { flex-wrap:nowrap; }
/* Меню «…» на <details>: второстепенные действия строки, без своего JS. */
.more-menu { position:relative; display:inline-block; }
.more-menu > summary { list-style:none; display:inline-flex; justify-content:center; min-width:36px; padding-inline:8px; letter-spacing:1px; cursor:pointer; }
.more-menu > summary::-webkit-details-marker { display:none; }
.more-menu[open] > summary { background:var(--item-hover); }
.more-menu-list { position:absolute; right:0; top:calc(100% + 4px); z-index:20; min-width:190px; padding:6px; border:1px solid var(--line-2); border-radius:10px; background:var(--surface); box-shadow:0 8px 24px rgba(0,0,0,.12); display:flex; flex-direction:column; }
.more-menu-item { display:block; width:100%; padding:8px 10px; border:0; border-radius:7px; background:none; color:inherit; font:inherit; font-size:13.5px; text-align:left; text-decoration:none; cursor:pointer; }
.more-menu-item:hover, .more-menu-item:focus-visible { background:var(--item-hover); outline:none; }
.more-menu-item.danger { color:var(--red-ink); }

/* Реквизиты выплат. На странице баланса — рядом с выводом средств, в две
   колонки; карточка реквизитов там теряет ограничение ширины профиля. */
.payout-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.payout-grid > .card { margin:0; max-width:none; }
@media (max-width:900px) { .payout-grid { grid-template-columns:1fr; } }
/* Заявки на выплату автора: сумма и статус, цепочка «подана → одобрена →
   перевод → выплачена», даты и чек. Отказ и сбой — красная точка на шаге. */
.card-subtitle { margin:0 0 8px; font-family:var(--display); font-size:15px; font-weight:600; color:var(--ink); }
.wd-list { display:flex; flex-direction:column; gap:10px; }
.wd-item { padding:10px 12px; border:1px solid var(--line-2); border-radius:10px; }
.wd-chain { display:flex; margin:8px 0 6px; padding:0; list-style:none; }
.wd-step { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; }
.wd-step::before { content:''; position:absolute; top:9px; left:-50%; width:100%; height:2px; background:var(--line); }
.wd-step:first-child::before { display:none; }
.wd-step.done::before, .wd-step.current::before, .wd-step.bad::before { background:var(--green); }
.wd-dot { position:relative; z-index:1; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--line); border-radius:50%; background:var(--surface); font-size:10px; font-weight:700; line-height:1; color:transparent; }
.wd-step.done .wd-dot { border-color:var(--green); background:var(--green); color:var(--on-green); }
.wd-step.current .wd-dot { border-color:var(--green); box-shadow:0 0 0 3px var(--green-bg); }
.wd-step.bad .wd-dot { border-color:var(--red); background:var(--red); color:#fff; }
.wd-label { font-size:11.5px; color:var(--muted); text-align:center; }
.wd-step.current .wd-label, .wd-step.done .wd-label { color:var(--ink); }
.wd-step.bad .wd-label { color:var(--red); font-weight:600; }
.wd-receipt { color:var(--ink); }
.wd-receipt a { font-weight:600; }
/* «О заказчике» у автора: цифры без имени, строки как в расчёте оплаты. */
.trust-block .quote-line { padding:5px 0; border-bottom:1px dashed var(--line-2); }
.trust-block .quote-line:last-child { border-bottom:0; }
.level-line { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 14px; font-size:13.5px; color:var(--muted); }
.level-line .level-badge { margin-left:0; }
/* Разделитель «·» — только между элементами одной строки: в тексте он повисал
   в начале перенесённой строки на 390 px. */
.level-line > span + span:not(.level-badge)::before { content:'·'; margin-right:6px; color:var(--muted); }
@media (max-width:560px) { .level-line { flex-direction:column; align-items:flex-start; gap:4px; } .level-line > span + span::before { content:none; } }
.level-line-head { display:inline-flex; align-items:center; gap:6px; }
/* История начислений автора на телефоне — карточками (author.js) */
.payout-rows { display:flex; flex-direction:column; gap:8px; }
.payout-row { padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); display:flex; flex-direction:column; gap:4px; }
.payout-row .money { font-size:15px; }
/* «Что дальше» под формой ставки и «как начисляются деньги» в пустом балансе. */
.next-steps { margin:14px 0 0; padding:0; list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:6px; font-size:13.5px; color:var(--muted); }
.next-steps li { display:flex; gap:8px; align-items:flex-start; }
.next-steps li::before { content:counter(step); counter-increment:step; flex:none; width:20px; height:20px; border-radius:50%; background:var(--green-bg); color:var(--green-ink); font-size:11.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.next-steps b { color:var(--ink); font-weight:600; }
.payout-now { padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-3); }
.payout-now b { font-variant-numeric:tabular-nums; }
.payout-full { padding:2px 8px; border-radius:6px; background:var(--chip-bg); font-variant-numeric:tabular-nums; letter-spacing:.04em; user-select:all; }
/* Налоговый статус, ИНН и ответ ФНС — одной строкой под маской реквизитов. */
.payout-tax { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:6px; font-size:13px; }
.payout-form .field-error a { color:inherit; text-decoration:underline; }
/* Telegram: ссылка на бота и код привязки рядом — код на случай, если
   ссылка не открылась, его вводят боту руками. */
.link-code-box { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:4px 0 8px; }
.link-code { padding:9px 14px; border:1px dashed var(--line); border-radius:9px; background:var(--chip-bg); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:17px; font-weight:700; letter-spacing:.14em; user-select:all; }

/* Кабинет: полоска «подтвердите почту». */
.verify-bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--amber-line); background:var(--amber-bg); color:var(--amber-ink); font-size:13.5px; }
.verify-bar > span:first-child { width:18px; height:18px; flex:none; color:var(--amber); }
.verify-bar b { font-weight:650; }
.verify-bar .spacer { flex:1; }
.verify-bar .btn-link { color:var(--amber-ink); text-decoration:underline; }
/* Плашка «Документы обновлены» — та же форма, что у «подтвердите почту»,
   но спокойнее: это не предупреждение, а просьба прочитать. */
.consent-bar { border-bottom-color:var(--blue-line); background:var(--blue-bg); color:var(--blue-ink); }
.consent-bar > span:first-child { color:var(--blue-ink); }
.consent-bar a { color:inherit; text-decoration:underline; }
.consent-bar .btn.sm { min-height:34px; }
.consent-actions { display:flex; gap:6px; flex:none; }
/* На телефоне плашка занимала четверть экрана: иконка одна на строке, текст на
   трёх, кнопка на четвёртой. Иконку прячем, кнопки — в одну строку с текстом. */
@media (max-width:760px) {
  .verify-bar { padding:8px 12px; gap:8px; font-size:13px; }
  .verify-bar > span:first-child { display:none!important; /* inline-стиль иконки */ }
  .consent-bar .consent-actions { width:100%; }
  .consent-bar .consent-actions .btn { flex:1; justify-content:center; min-height:36px; }
  .verify-bar:not(.consent-bar) .btn-link { width:100%; }
}

@media (max-width:560px) {
  /* 16px в полях — порог, ниже которого iOS Safari приближает страницу при фокусе. */
  .auth-card .input, .auth-card .select { font-size:16px; }
  .role-grid { grid-template-columns:1fr; }
  .role-card { flex-direction:row; align-items:baseline; gap:8px; min-height:0; }
}
.policy-copy p:first-child { margin-top:0; }
.policy-copy p:last-child { margin-bottom:0; }

.lsection { position:relative; z-index:2; padding:86px 6vw; }
/* Слот карточки входа живёт только на узком экране; на широком он пуст и не
   должен оставлять полосу в 170px между «Возможностями» и «Авторам». */
.auth-slot { display:none; }
.lsection .wrap { max-width:1200px; margin:0 auto; }
.lsection.dark { background:#12231e; }
.lsection.darker { background:#0c1b17; }
.sec-label { margin-bottom:13px; color:#d3a55d; text-align:center; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.sec-label::before,.sec-label::after { content:'—'; margin:0 8px; opacity:.6; }
.lsection h2 { margin-bottom:10px; color:var(--cream); text-align:center; font-size:clamp(30px,4vw,45px); font-weight:600; }
.lsection .sub { max-width:590px; margin:0 auto 46px; color:#9eafa7; text-align:center; font-size:15.5px; text-wrap:balance; }
.steps { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(222,187,128,.24); border-bottom:1px solid rgba(222,187,128,.18); }
.step { position:relative; min-height:226px; padding:27px 24px; border-right:1px solid rgba(222,187,128,.18); background:linear-gradient(to bottom,rgba(255,255,255,.025),transparent); }
.step:last-child { border-right:0; }
.step .num { width:40px; height:40px; margin-bottom:23px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(216,170,97,.6); border-radius:50%; color:#d8aa61; font-family:var(--display); font-size:17px; }
.step h3 { color:var(--cream); font-size:17px; font-weight:600; }
.step p { margin:0; color:#98aaa2; font-size:13.5px; }
.step .arrow-link { transition:color var(--dur) var(--ease),transform var(--dur) var(--ease); position:absolute; right:-12px; top:35px; z-index:2; width:24px; height:24px; display:flex; padding:4px; border-radius:50%; background:#12231e; color:#b88947; }
.step .arrow-link svg { width:16px; height:16px; }
.step:last-child .arrow-link { display:none!important; } /* icon() ставит inline display:inline-flex */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feat { position:relative; min-height:230px; padding:27px; overflow:hidden; border:1px solid rgba(255,250,240,.1); border-radius:3px 18px 3px 18px; background:rgba(255,255,255,.035); transition:border-color .22s,background .22s; }
.feat::after { content:''; position:absolute; width:110px; height:110px; right:-62px; bottom:-62px; border:1px solid rgba(216,170,97,.2); border-radius:50%; }
.feat:hover { border-color:rgba(216,170,97,.37); background:rgba(255,255,255,.055); }
.feat .fico { width:46px; height:46px; margin-bottom:24px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(216,170,97,.45); border-radius:50%; color:#d8aa61; }
.feat .fico svg { width:21px; height:21px; }
.feat h3 { color:var(--cream); font-size:18px; font-weight:600; }
.feat p { margin:0; color:#98aaa2; font-size:14px; line-height:1.62; }
.faq-list { max-width:820px; margin:0 auto; border-top:1px solid rgba(255,250,240,.14); }
.faq-item { border-bottom:1px solid rgba(255,250,240,.14); }
.faq-item summary { min-height:64px; padding:17px 5px; display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none; color:var(--cream); font-family:var(--display); font-size:16px; font-weight:600; cursor:pointer; transition:color var(--dur) var(--ease); }
.faq-item summary:hover { color:#fff; }
.faq-item summary:hover .faq-x { color:#e6c078; }
.faq-item[open] > p { animation:faq-reveal var(--dur-slow) var(--ease) both; }
@keyframes faq-reveal { from { opacity:0; transform:translateY(-5px); } }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item .faq-x { width:22px; height:22px; flex:none; display:inline-flex; color:#d8aa61; transition:transform .2s; }
.faq-item .faq-x svg { width:100%; height:100%; }
.faq-item[open] .faq-x { transform:rotate(45deg); }
.faq-item p { margin:0; padding:0 46px 20px 5px; color:#9eafa7; font-size:14px; line-height:1.65; }
.cta-band { max-width:1200px; margin:0 auto; }
/* Сатиновая латунь: блик из верхнего угла и затемнение к низу — металл, а не
   «жёлтый прямоугольник». Оттенки те же. */
.cta-inner { position:relative; padding:58px max(24px,6vw); overflow:hidden; border-radius:3px 24px 3px 24px; background:radial-gradient(120% 140% at 18% 0%,rgba(255,244,222,.32),transparent 55%),linear-gradient(155deg,#dcae63 0%,#d3a258 48%,#c89851 100%); color:var(--ink); text-align:center; box-shadow:var(--sh-lg); }
.cta-inner::before { content:''; position:absolute; inset:11px; border:1px solid rgba(23,35,31,.25); border-radius:2px 17px 2px 17px; pointer-events:none; }
.cta-inner::after { content:'✦'; position:absolute; right:3%; top:9%; color:rgba(23,35,31,.2); font-size:62px; line-height:1; pointer-events:none; }
.cta-inner h2 { position:relative; margin-bottom:10px; color:var(--ink); font-size:clamp(29px,4vw,43px); }
/* 4.39:1 на латунном фоне — не дотягивало до нормы для основного текста. */
.cta-inner p { position:relative; max-width:560px; margin:0 auto 24px; color:#273631; font-size:16px; text-wrap:balance; }
.cta-inner .btn { position:relative; background:#17382f; color:var(--cream); border-color:#17382f; box-shadow:0 12px 26px rgba(23,35,31,.22); }
.cta-inner .btn:hover { background:#102c25; }
.cta-inner .btn.ghost { background:transparent; color:#17382f; border-color:rgba(23,35,31,.45); box-shadow:none; }
.cta-inner .btn.ghost:hover { background:rgba(23,35,31,.08); }
.lfooter { padding:34px 6vw 40px; border-top:1px solid rgba(255,250,240,.09); background:#091713; color:#81938b; text-align:center; font-size:12.5px; }
.lfooter-inner { max-width:1200px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:15px; }
.lfooter-brand { display:flex; align-items:center; gap:9px; color:#cfd8d3; font-family:var(--display); font-size:16px; font-weight:650; }
.lfooter-brand .logo { width:28px; height:28px; padding:5px; display:inline-flex; color:#d8aa61; border:1px solid rgba(216,170,97,.42); border-radius:50%; }
.lfooter-brand .logo svg { width:100%; height:100%; }
/* 4.9:1 к #091713 — ссылки в подвале раньше были того же тона, что и текст. */
.lfooter p { max-width:74ch; margin:0; line-height:1.6; }

/* Поэтапное появление главного экрана */
.hero-left .pill,.hero-left h1,.hero-left .lead,.hero-cta,.hero-stats,.auth-card { animation:editorial-in .65s cubic-bezier(.2,.75,.25,1) both; }
.hero-left h1 { animation-delay:.06s; }
.hero-left .lead { animation-delay:.12s; }
.hero-cta { animation-delay:.18s; }
.hero-stats { animation-delay:.24s; }
.auth-card { animation-delay:.14s; }
@keyframes editorial-in { from { opacity:0; transform:translateY(18px); } }
/* Ответ на нажатие «Создать аккаунт»: карточка уже могла быть открыта на нужной
   вкладке, и без этой вспышки нажатие оставалось без единого видимого следа. */
.auth-card { outline:3px solid transparent; outline-offset:4px; }
.auth-card.is-called { animation:auth-called .95s var(--ease) 1; }
@keyframes auth-called { 0%,100% { outline-color:transparent; } 30%,55% { outline-color:rgba(216,170,97,.9); } }

/* ============================================================
   ПРИЛОЖЕНИЕ
   ============================================================ */
.shell { min-height:100vh; display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
/* dvh, а не vh: мобильные браузеры считают 100vh без адресной строки, и кнопка
   «Выйти» внизу панели оказывалась под панелью браузера. Строка с vh остаётся
   запасной для старых движков. */
.sidebar { position:sticky; top:0; height:100vh; height:100dvh; display:flex; flex-direction:column; overflow:hidden; background:var(--sidebar-grad); color:var(--cream); box-shadow:inset -1px 0 rgba(255,255,255,.07); }
.sidebar::after { content:''; position:absolute; z-index:0; width:270px; height:270px; left:-135px; bottom:8%; border:1px solid rgba(213,168,92,.15); border-radius:50%; box-shadow:0 0 0 56px rgba(213,168,92,.018),0 0 0 112px rgba(213,168,92,.012); pointer-events:none; }
.sidebar > * { position:relative; z-index:1; }
.sidebar .brand { display:flex; align-items:center; gap:10px; padding:24px 22px 3px; color:var(--cream); font-family:var(--display); font-size:20px; font-weight:650; }
.sidebar .brand:hover { color:#fff; }
.side-head { display:flex; align-items:center; justify-content:space-between; padding-right:14px; }
.sidebar .side-close { display:none; width:40px; height:40px; margin-top:20px; color:var(--cream); background:rgba(255,255,255,.06); border-color:rgba(255,250,240,.14); }
.side-close:hover { background:rgba(255,255,255,.12); }
.sidebar.open .side-close { display:inline-flex; }
.sidebar .brand .logo { width:36px; height:36px; padding:7px; display:inline-flex; border:1px solid rgba(213,168,92,.48); border-radius:50%; color:#d5a85c; }
.sidebar .brand .logo svg { width:100%; height:100%; }
.side-kicker { padding:0 22px 20px 68px; color:#9cb3a9; font-size:11px; font-weight:600; letter-spacing:.04em; }
.side-nav { flex:1; padding:11px 13px; overflow-y:auto; overscroll-behavior:contain; }
/* Список длиннее экрана: обрезанный край растворяется — видно, что дальше есть
   ещё. Без этого меню на высоте 768–900 обрезалось ровно под заголовком группы,
   и пункты «Поддержка», «Профиль» как будто отсутствовали. Классы ставит
   core.js по положению прокрутки: меню, которое влезает целиком, не тускнеет. */
.side-nav.fade-bottom { -webkit-mask-image:linear-gradient(#000 calc(100% - 28px), transparent); mask-image:linear-gradient(#000 calc(100% - 28px), transparent); }
.side-nav.fade-top { -webkit-mask-image:linear-gradient(transparent, #000 28px); mask-image:linear-gradient(transparent, #000 28px); }
.side-nav.fade-top.fade-bottom { -webkit-mask-image:linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image:linear-gradient(transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.side-nav a { position:relative; min-height:40px; margin-bottom:2px; padding:9px 13px; display:flex; align-items:center; gap:12px; border-radius:8px; color:#bfcfc8; font-size:14px; font-weight:550; transition:color .15s,background .15s,transform .15s; }
/* На ноутбуке (до 920px по высоте) шаг ещё плотнее, чтобы меню заказчика (13 пунктов
   с заголовками групп) целиком влезало без прокрутки. */
@media (max-height:920px) {
  .side-nav a { min-height:36px; padding:7px 13px; margin-bottom:1px; font-size:13.5px; }
  .side-nav .side-group { margin-top:10px; }
  .side-kicker { padding-bottom:12px; }
}
.side-nav a svg { width:19px; height:19px; flex:none; }
.side-nav a:hover { transform:translateX(2px); background:rgba(255,255,255,.065); color:var(--cream); }
.side-nav a.active { background:rgba(213,168,92,.13); color:var(--cream); }
.side-nav a::before { content:''; position:absolute; width:3px; height:22px; left:-13px; top:50%; border-radius:0 3px 3px 0; background:#d5a85c; transform:translateY(-50%) scaleY(0); transition:transform var(--dur) var(--ease); }
.side-nav a.active::before { transform:translateY(-50%) scaleY(1); }
/* Заголовки групп в длинном меню администратора: «Работа», «Каталог», «Система». */
.side-group { margin:14px 13px 6px; color:#8ea399; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.side-group:first-child { margin-top:2px; }
.side-foot { padding:13px; border-top:1px solid rgba(255,255,255,.09); }
.side-user { min-width:0; padding:8px 8px 10px; display:flex; align-items:center; gap:10px; }
.side-user > div { min-width:0; }
.side-user .avatar { background:#d5a85c; }
.side-user b { display:block; overflow:hidden; color:var(--cream); font-size:13.5px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.side-user > div span { display:block; margin-top:2px; overflow:hidden; color:#91a79e; font-size:11.5px; text-overflow:ellipsis; white-space:nowrap; }
.side-foot .btn { width:100%; color:#e7eee9; background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.12); box-shadow:none; }
.side-foot .btn:hover { background:rgba(255,255,255,.09); }
.main { min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; z-index:20; top:0; height:70px; padding:0 28px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--topbar-line); background:var(--topbar-bg); backdrop-filter:blur(14px); }
.topbar .crumb { min-width:0; display:flex; align-items:center; gap:8px; overflow:hidden; color:var(--muted); font-size:13px; }
.topbar .crumb svg { width:16px; height:16px; flex:none; }
.topbar .crumb .home { color:var(--accent-2); }
.topbar .crumb b { overflow:hidden; color:var(--ink); font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
/* Предки в крошках — ссылки: «Мои заказы» над карточкой заказа ведёт к списку. */
.topbar .crumb .crumb-link { display:inline-flex; align-items:center; gap:6px; flex:none; min-height:40px; padding:0 4px; color:var(--muted); white-space:nowrap; border-radius:6px; }
.topbar .crumb .crumb-link:hover { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.topbar .crumb .crumb-link:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }
.top-avatar { border-radius:50%; }
.top-avatar:focus-visible { outline:2px solid var(--accent-2); outline-offset:2px; }
.topbar .spacer { flex:1; }
.top-avatar { flex:none; display:flex; }
.icon-btn { position:relative; width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:50%; background:var(--surface-3); color:var(--ink-2); cursor:pointer; transition:background .15s,color .15s,border-color .15s,transform .15s; }
.icon-btn svg { width:18px; height:18px; }
.icon-btn:hover { transform:translateY(-1px); border-color:#aaa08d; background:#f3ede1; color:var(--primary); }
.icon-btn:active { transform:translateY(0) scale(.95); }
.icon-btn.primary { border-color:transparent; background:var(--primary); color:#fff; box-shadow:var(--sh-primary); }
.icon-btn.primary:hover { background:var(--primary-600); }
.icon-btn .ndot { animation:ndot-pop .35s var(--ease); position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 4px; display:flex; align-items:center; justify-content:center; border:2px solid var(--ndot-ring); border-radius:999px; background:var(--ndot-bg); color:#fff; font-size:9px; font-weight:700; }
.topbar .burger { display:none; }
/* «+» в шапке — только в режиме шторки (≤1000px): на широком экране «Новый
   заказ» есть в меню, и вторая одинаковая кнопка рядом лишь сбивала с толку. */
.topbar .icon-btn.primary { display:none; }
/* Счётчик очереди на бургере: на телефоне сайдбар спрятан, и число на пункте
   «Модерация» никто не видит. Та же форма, что у точки на колокольчике. */
.topbar .burger .qdot { position:absolute; top:-2px; right:-2px; min-width:18px; height:18px; padding:0 4px; display:flex; align-items:center; justify-content:center; border:2px solid var(--ndot-ring); border-radius:999px; background:#d5a85c; color:#1f2a25; font-size:9px; font-weight:700; }
.topbar .burger .qdot.is-overdue { background:var(--red); color:#fff; }
.content { width:100%; max-width:1250px; margin:0 auto; padding:31px 29px 44px; }
.content:focus { outline:none; }
/* Подвал кабинета: документы под содержимым, на всех страницах. margin-top:auto
   прижимает его к низу, если страница короче экрана (.main — колонка). */
.cabinet-footer { width:100%; max-width:1250px; margin:auto auto 0; padding:14px 29px 22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; border-top:1px solid var(--line-2); color:var(--muted); font-size:12.5px; }
.cabinet-footer nav { display:flex; flex-wrap:wrap; gap:6px 18px; }
.cabinet-footer a { color:var(--muted); text-decoration:none; }
.cabinet-footer a:hover { color:var(--ink); text-decoration:underline; }
/* При длинном заголовке правый блок с кнопками перепрыгивал из правого верхнего
   угла в левый нижний: перенос ставил его первым элементом новой строки.
   Заголовок занимает всю доступную ширину, кнопки остаются справа. */
.page-head { margin-bottom:24px; display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:15px; }
.page-head > :first-child { flex:1 1 320px; min-width:0; }
.page-head > :last-child:not(:first-child) { flex:0 0 auto; margin-left:auto; }
.page-head::after { content:''; width:100%; height:1px; order:3; margin-top:2px; background:linear-gradient(90deg,#bcae96 0%,var(--line) 35%,transparent 100%); }
.page-head h1 { margin:0; font-size:28px; font-weight:650; }
.page-head .sub { margin-top:5px; color:var(--muted); font-size:13.5px; }

/* Ступени заданы явно: auto-fit на четырёх плитках давал 3 в ряд и одинокую
   четвёртую под ними — сетка читалась как ошибка вёрстки. */
.stat-grid { margin-bottom:22px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.stat-grid.stat-grid-5 { grid-template-columns:repeat(5,minmax(0,1fr)); }
/* На двух колонках пятая плитка не остаётся сиротой — растягивается на ряд. */
@media (max-width:720px) { .stat-grid.stat-grid-5 > :nth-child(5):last-child { grid-column:1 / -1; } }
.h2-sm { margin:0 0 12px; font-size:17px; display:flex; align-items:center; }
.stat { position:relative; min-width:0; padding:20px 21px; overflow:hidden; border:1px solid var(--line); border-radius:3px 15px 3px 15px; background:var(--stat-glass); box-shadow:var(--paper-edge),var(--sh-sm); transition:transform .18s,box-shadow .18s; }
.stat::after { content:''; position:absolute; width:54px; height:54px; top:-31px; right:-28px; border:1px solid rgba(155,100,43,.18); border-radius:50%; }
.stat .st-ico { width:42px; height:42px; margin-bottom:14px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--grad-soft); color:var(--primary); transition:transform var(--dur) var(--ease); }
/* transition у .stat был объявлен, но ни одно правило его не использовало.
   Плитка некликабельна — «дышит», не меняя рамку и не обещая перехода. */
/* Поднимаются при наведении только плитки-ссылки: статичная цифра, которая
   «просится» под курсор, обманывает. */
.stat.stat-link { display:block; color:inherit; text-decoration:none; cursor:pointer; }
.stat.stat-link:hover { transform:translateY(-2px); box-shadow:var(--paper-edge),var(--sh-md); }
.stat.stat-link:hover .st-ico { transform:scale(1.06); }
.stat .st-ico svg { width:20px; height:20px; }
.stat .st-n { overflow-wrap:anywhere; font-family:var(--display); font-size:28px; font-weight:650; font-variant-numeric:tabular-nums; line-height:1; }
.stat .st-l { margin-top:7px; color:var(--muted); font-size:12.5px; }

/* Таблицы объявлены от 680px, то есть на телефоне прокручиваются вбок всегда, а
   обрезанный край выглядел как конец таблицы. Тени у краёв: слои local гаснут,
   когда докручено до края, слои scroll прибиты к контейнеру. */
/* position:relative — абсолютный .sr-only внутри таблицы остаётся в контейнере прокрутки, а не распирает страницу. */
.table-wrap { position:relative; width:100%; overflow-x:auto; overscroll-behavior-x:contain; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm);
  background:
    linear-gradient(to right,var(--surface),transparent) 0 0/26px 100% no-repeat local,
    linear-gradient(to left,var(--surface),transparent) 100% 0/26px 100% no-repeat local,
    linear-gradient(to right,var(--scroll-shadow),transparent) 0 0/17px 100% no-repeat scroll,
    linear-gradient(to left,var(--scroll-shadow),transparent) 100% 0/17px 100% no-repeat scroll,
    var(--surface); }
.table-wrap:focus-visible { outline:3px solid #a8701f; outline-offset:2px; }
table.data { width:100%; min-width:680px; border-collapse:collapse; font-size:13.5px; }
table.data th { padding:13px 17px; border-bottom:1px solid var(--line); background:var(--v50); color:#5e6964; text-align:left; font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
table.data td { padding:15px 17px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
table.data tr:last-child td { border-bottom:0; }
table.data tbody tr { transition:background .12s; }
/* Подсветка строки — помощь при чтении широкой таблицы, а не обещание клика.
   Правила :focus у tr были мёртвыми: строки не получают фокус, прокрутка таблицы
   доступна с клавиатуры через .table-wrap[tabindex]. */
table.data tbody tr:hover td { background:var(--hover); }
table.data .t-title { color:var(--ink); font-weight:650; }
a.table-order-link:hover, a.table-order-link:focus-visible { color:var(--primary); text-decoration:underline; }
table.data .t-sub { margin-top:2px; color:var(--muted); font-size:12px; }
/* Финансы: числа вправо, стрелки изменения, превью письма. */
table.data .num, table.data th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Код вуза короткий («ТГУ»), но overflow-wrap:anywhere на td рвал его посимвольно в узкой колонке. */
table.data .t-uni { white-space:nowrap; overflow-wrap:normal; }
/* На телефоне таблица всё равно шире экрана: ужимаем, чтобы в первый экран попадали дата, сумма и статус. */
@media (max-width:640px) {
  table.data { min-width:560px; }
  table.data th { padding:10px 12px; }
  table.data td { padding:11px 12px; }
}
.finance-table td:first-child { min-width:220px; }
.delta { font-weight:650; white-space:nowrap; }
.delta-good { color:var(--green); }
.delta-bad { color:var(--red); }
.finance-controls { padding:16px 18px; margin-bottom:16px; }
.finance-controls .input[type=date] { max-width:170px; }
.weekly-preview { margin:0; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); font-size:12.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }

.order-list { display:grid; gap:13px; }
.order-card { position:relative; min-width:0; padding:20px 22px; overflow:hidden; border:1px solid var(--line); border-radius:3px 15px 3px 15px; background:var(--surface); color:var(--ink); box-shadow:var(--sh-sm); cursor:pointer; transition:transform .16s,box-shadow .16s,border-color .16s; }
/* Полоса слева — цвет статуса (см. .st-* ниже); при наведении чуть шире. */
.order-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--line); transition:width .18s; }
.order-card:hover { transform:translateY(-2px); border-color:var(--card-hover-line); color:var(--ink); box-shadow:var(--sh-md); }
/* Тот же контейнер используется там, где нажимать не на что (письма демо-почты).
   Приподнимающаяся на наведении карточка обещала переход, которого нет. */
.order-card.static { cursor:default; }
.order-card.static:hover { transform:none; border-color:var(--line); box-shadow:var(--sh-sm); }
.order-card:hover::before,.order-card:focus-visible::before { width:6px; }
.order-card.static:hover::before { width:4px; }
/* Шапка, описание и мета — самостоятельный набор: их используют карточки заказа,
   прайса и преподавателя. Пока правила были привязаны к .order-card, две страницы
   из шести оставались вообще без раскладки. */
.oc-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.oc-head > :last-child { flex:none; text-align:right; }
.order-card h3 { margin:0 0 3px; font-size:17px; font-weight:650; }
.oc-desc { margin:9px 0 0; overflow:hidden; color:var(--ink-2); font-size:13.5px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.oc-meta { margin-top:11px; display:flex; flex-wrap:wrap; gap:7px 15px; color:var(--muted); font-size:12.5px; }
.oc-meta span { display:inline-flex; align-items:center; gap:5px; }
.oc-meta svg { width:14px; height:14px; color:var(--accent-2); }
/* Сжатая карточка закрытого заказа у сотрудника: одна строка. */
.order-card.compact { padding:11px 16px 11px 18px; }
.order-card.compact .oc-line { display:flex; align-items:center; gap:10px; min-width:0; }
.order-card.compact h3 { flex:1 1 auto; min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14.5px; }
.order-card.compact .oc-price { flex:none; font-weight:650; font-size:13px; white-space:nowrap; }
.order-card.compact .oc-when { flex:none; white-space:nowrap; }
.order-card.compact .badge { flex:none; }
@media (max-width:640px) {
  .order-card.compact .oc-line { flex-wrap:wrap; gap:6px 10px; }
  .order-card.compact h3 { flex-basis:100%; }
}
/* Действия на модерации: строка решения, под ней — служебное. */
.actions-row + .actions-row { margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.actions-decision .ml-auto { margin-left:auto; }
/* Закрепление заказа за сотрудником — строкой над решением. */
.actions-claim { margin-bottom:10px; }
/* Второстепенные действия карточки заказа — под «Ещё». */
.actions-more > summary { cursor:pointer; list-style:none; font-size:13px; display:inline-block; }
.actions-more > summary::-webkit-details-marker { display:none; }
.actions-more > summary::after { content:' ▾'; }
.actions-more[open] > summary::after { content:' ▴'; }
/* Принятая ставка после аукциона: список свёрнут. */
.bids-archive > summary { cursor:pointer; font-size:13px; }
.bid.accepted { border-color:var(--green, #2f6b4f); }
/* Подсказка о контактах в чате — появляется под полем при наборе. */
.chat-contact-hint { margin:6px 0 0; color:var(--amber-ink, #7a4b00); }
@media (max-width:560px) {
  /* Кнопки решения по модерации столбиком: «Отклонить» с ml-auto уезжала
     в правый край отдельной строкой с пустотой слева. */
  .actions-decision { flex-direction:column; }
  .actions-decision .btn { width:100%; justify-content:center; }
  .actions-decision .ml-auto { margin-left:0; }
}

.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,360px); gap:20px; align-items:start; }
.detail-grid > * { min-width:0; }
/* Боковая колонка следует за прокруткой: история и чат обычно короче основной
   части, и без этого внизу оставалась пустая полоса. */
@media (min-width:1121px) {
  .detail-grid > :last-child { position:sticky; top:86px; }
}
.kv { display:grid; grid-template-columns:125px minmax(0,1fr); gap:10px 15px; font-size:13.5px; }
.kv dt { color:var(--muted); }
.kv dd { min-width:0; margin:0; overflow-wrap:anywhere; color:var(--ink); font-weight:600; }
/* Состояние системы: сетка карточек, у каждой — цветная точка статуса. */
.sys-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; align-items:stretch; }
.sys-card .card-title { margin-bottom:14px; }
.sys-card .kv { grid-template-columns:minmax(110px,38%) minmax(0,1fr); font-size:13px; }
.sys-card .alert.sm { margin-bottom:10px; }
.sys-dot { display:inline-block; width:10px; height:10px; flex:none; border-radius:50%; background:var(--badge-gray-ink); box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent); }
.sys-ok .sys-dot, .sys-dot.sys-ok { background:var(--green); }
.sys-warn .sys-dot, .sys-dot.sys-warn { background:var(--amber); }
.sys-bad .sys-dot, .sys-dot.sys-bad { background:var(--red); }
.sys-off .sys-dot, .sys-dot.sys-off { background:var(--badge-gray-ink); opacity:.55; }
.sys-bad { border-color:var(--red-line); }
.sys-legend { display:flex; align-items:center; gap:6px 16px; flex-wrap:wrap; }
.sys-legend-item { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.sys-legend .sys-dot { box-shadow:none; }
.timeline { margin:0; padding:0; list-style:none; }
.timeline li { position:relative; padding:0 0 17px 23px; border-left:1px solid #d6ccbb; }
.timeline li:last-child { padding-bottom:0; border-left-color:transparent; }
.timeline li::before { content:''; position:absolute; width:10px; height:10px; left:-6px; top:4px; border:2px solid var(--surface); border-radius:50%; background:#b67b38; box-shadow:0 0 0 2px #e1d3ba; }
.timeline .tl-text { font-size:13.5px; font-weight:550; }
.timeline .tl-time { margin-top:2px; color:var(--muted); font-size:11.5px; }
.bid { margin-bottom:10px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); transition:border-color .15s; }
.bid:hover { border-color:var(--hover-line); }
.bid.best { border-color:#83b298; background:var(--green-bg); }
.bid .bid-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bid .price { color:var(--primary); font-family:var(--display); font-size:20px; font-weight:650; }
.bid.best .price { color:var(--green-2); }
.bid .who { font-weight:650; }
.bid .cmt { margin-top:6px; color:var(--ink-2); font-size:13px; }
/* Очередь выплат: панель пакета и реестра, история под спойлером. */
.wd-toolbar { display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:space-between; align-items:center; margin-bottom:12px; }
.wd-toolbar > :empty { display:none; }
.wd-registry .input[type=date] { width:auto; max-width:150px; }
.wd-registry .select { width:auto; min-width:170px; }
.wd-card .bid-top { align-items:flex-start; }
.wd-card .who a { color:inherit; }
.wd-history summary { cursor:pointer; font-weight:600; font-size:13.5px; color:var(--ink-2); }

.chat { height:470px; display:flex; flex-direction:column; }
/* Пустой чат не должен занимать полэкрана: хватит места под подсказку и поле. */
.chat.is-empty { height:auto; min-height:220px; }
.chat-empty { padding:30px 12px; margin:auto 0; font-size:13.5px; }
.chat-error { margin-bottom:6px; padding:7px 10px; border:1px solid var(--red-line); border-left:3px solid var(--red); border-radius:8px; background:var(--red-bg); color:var(--red-ink); font-size:12px; }
.chat-scroll { flex:1; padding:7px 3px; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:9px; }
.chat-scroll:focus-visible, .review-list:focus-visible, .m-body:focus-visible { outline:3px solid #a8701f; outline-offset:2px; }
.msg { max-width:84%; padding:10px 13px; border:1px solid var(--line); border-radius:13px; background:var(--bg); box-shadow:var(--sh-xs); font-size:13.5px; line-height:1.48; overflow-wrap:anywhere; }
.msg .m-who { margin-bottom:3px; font-size:10.5px; font-weight:700; opacity:.72; }
.msg .m-time { margin-top:5px; color:var(--muted); font-size:10.5px; }
.msg .m-time .btn-link + .btn-link { margin-left:8px; }
/* Точка на вкладке канала, где реплика участника ждёт ответа. */
.chan-tabs button .chan-dot { display:inline-block; width:7px; height:7px; margin-left:6px; border-radius:50%; background:var(--amber); vertical-align:1px; }
.chan-tabs button.active .chan-dot { background:#f3d38a; }
.msg.in { align-self:flex-start; border-bottom-left-radius:3px; }
.msg.out { align-self:flex-end; border-color:#265247; border-bottom-right-radius:3px; background:#265247; color:var(--cream); }
.msg.out .m-time { color:#c7d5cf; }
.msg .m-file a { margin-top:5px; display:inline-flex; align-items:center; gap:5px; font-size:12px; }
.msg.out .m-file a { color:#fff; text-decoration:underline; }
.chat-input { margin-top:11px; display:flex; align-items:flex-end; gap:7px; }
.chat-input .textarea { height:46px; min-height:46px; padding:11px 13px; }
/* Сигнал сотруднику: сообщение похоже на обмен контактами в обход сервиса. */
.msg .m-contact-flag { margin:2px 0 5px; }
.msg .m-contact-flag .badge { white-space:normal; text-align:left; line-height:1.3; }
/* Чипы шаблонов ответов: над полем ввода чата и в модалках сотрудника. */
.reply-templates { margin:9px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.reply-templates .chip.sm { padding:4px 10px; border:1px solid var(--line); border-radius:999px; background:var(--surface-2); color:var(--ink-2); font-size:12px; font-weight:600; cursor:pointer; transition:border-color .15s,background .15s; }
/* Пальцем по чипу в 29 px не попасть — на узком экране делаем его выше. */
@media (max-width:560px) { .reply-templates .chip.sm { min-height:36px; padding:8px 12px; } }
.reply-templates .chip.sm:hover { border-color:var(--v300); background:var(--v50); color:var(--ink); }
.reply-templates .chip.sm:focus-visible { outline:3px solid #a8701f; outline-offset:1px; }
.chat .reply-templates { margin:9px 0 -3px; }
.chan-tabs { margin-bottom:11px; display:flex; flex-wrap:wrap; gap:6px; }
/* Вне режима шторки скрим не нужен: без этого правила он проявился бы на широком
   экране неоформленной кнопкой во весь экран. Внутри медиазапроса правило ниже
   возвращает ему display, а закрытое состояние приходит атрибутом hidden. */
.scrim { display:none; }
.chan-tabs button { min-height:38px; padding:7px 12px; border:1px solid var(--line); border-radius:8px; background:var(--surface-2); color:var(--muted); font-size:12.5px; font-weight:650; cursor:pointer; transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur-fast) var(--ease); }
.chan-tabs button:active:not(:disabled) { transform:scale(.97); }
.chan-tabs button.active { border-color:var(--primary); background:var(--primary); color:#fff; }
.chan-tabs button:disabled { opacity:.5; cursor:not-allowed; background:var(--disabled-bg); }

.submission-report { margin:0 0 10px; padding:12px 14px; border:1px solid var(--line); border-left:3px solid var(--green); border-radius:8px; background:var(--surface-2); font-size:13.5px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }
.submission-report .text-meta { margin-bottom:4px; }
.empty { padding:50px 18px; color:var(--muted); text-align:center; }
.empty > span:first-child { width:64px; height:64px; margin:0 auto 14px; padding:17px; display:flex!important; border-radius:50%; background:var(--grad-soft); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--accent-2); }
/* Только иконка-марка: правило «svg во весь блок» раньше раздувало иконки
   кнопок в пустом состоянии до гигантского плюса. */
.empty > span:first-child svg { width:100%; height:100%; }
.empty .empty-actions .btn svg { width:16px; height:16px; }
.empty b { display:block; margin-bottom:4px; color:var(--ink); font-family:var(--display); font-size:17px; }
.empty p { max-width:480px; margin:4px auto 13px; font-size:13.5px; }
.empty .empty-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.error-state > span:first-child { background:var(--red-bg); box-shadow:inset 0 0 0 1px var(--red-line); color:var(--red); }
.file-chip { max-width:100%; margin:5px 5px 0 0; padding:7px 10px; display:inline-flex; align-items:center; gap:6px; overflow-wrap:anywhere; border:1px solid var(--line); border-radius:7px; background:var(--chip-bg); font-size:12.5px; }
.file-chip:hover { border-color:var(--hover-line); background:var(--v100); }
.file-chip svg { width:14px; height:14px; flex:none; color:var(--accent-2); }
.money { font-variant-numeric:tabular-nums; white-space:nowrap; }
.text-muted { color:var(--muted); }
.text-danger { color:var(--red); }
.text-center{text-align:center}
/* Черта над блоком: два места рисовали её вручную, с разным отступом сверху. */
.divided-top{padding-top:14px;border-top:1px solid var(--line)}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mb-2{margin-bottom:16px}.m-0{margin:0}
/* Приглушённая подпись существовала в трёх размерах сразу — 13, 12.5 и 12 — и
   размер задавался инлайном в JS, мимо стилей. Ролей две: подпись под строкой
   и совсем мелкая отметка вроде даты. */
.text-meta{font-size:13px}.text-micro{font-size:12px}
.flex{display:flex}.between{justify-content:space-between}.items-center{align-items:center}.gap-2{gap:12px}.wrap{flex-wrap:wrap}
/* Выбор клиента в форме заказа */
.client-pick { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.client-pick .select { flex:1 1 220px; min-width:0; }
.client-pick .hint { flex-basis:100%; margin:0; }
.client-line { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* Совпадение с прайсом под полем «Предмет»: вторая дверь к заказу. */
.price-match { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.price-match .btn { max-width:100%; white-space:normal; text-align:left; }
tr.is-archived td { opacity:.62; }
.ml-1 { margin-left:8px; }

/* Лендинг: форма «Опишите задачу» */
.start-section .wrap { max-width:760px; }
.guest-form { margin-top:22px; display:flex; flex-direction:column; gap:12px; text-align:left; }
.guest-row { display:flex; gap:12px; flex-wrap:wrap; }
.guest-row > .guest-title { flex:2 1 240px; min-width:0; }
.guest-row > .guest-subject { flex:1 1 170px; min-width:0; }
.guest-row > .guest-type { flex:1 1 170px; min-width:0; }
.guest-row.bottom { align-items:flex-end; justify-content:space-between; }
/* Лендинг всегда тёмный, независимо от темы кабинета: цвета берём его
   собственные (как у .lsection .sub), а не токены светлой темы. Подписи у
   всех полей видимые: плейсхолдер исчезает, как только начали печатать. */
.guest-field { display:flex; flex-direction:column; gap:6px; color:var(--cream); font-size:13px; font-weight:600; }
.guest-days .input { width:120px; }
.guest-note { margin:0; color:#9eafa7; font-size:12.5px; }
.start-section .form-error { border-color:#7c3f42; background:#2a1a1b; color:#ffb3ae; }
.cta-buttons { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
/* Строка для авторов под кнопками плашки: ссылка, а не третья кнопка —
   главный призыв остаётся заказчику. */
.cta-alt { position:relative; margin:18px 0 0; color:#273631; font-size:14px; }
.cta-alt a { color:#17382f; font-weight:650; text-decoration:underline; text-underline-offset:3px; }
.cta-alt a:hover { color:#102c25; }
.authors-cta { margin-top:30px; text-align:center; }
@media (max-width:560px) {
  /* Поле на три цифры не заслуживает целой строки: срок слева, кнопка
     занимает остаток — на одну строку короче. */
  .guest-row.bottom { flex-direction:row; align-items:flex-end; }
  .guest-days { flex:0 0 112px; }
  .guest-days .input { width:100%; }
  .guest-row.bottom .btn { flex:1; min-width:0; justify-content:center; padding-inline:12px; }
}
@media (max-width:420px) {
  /* На самом узком экране кнопка рядом с полем срока не умещалась: стрелка
     вылезала за край на пиксель. Кнопка — второй строкой во всю ширину. */
  .guest-row.bottom .btn { flex:1 1 100%; }
}

/* Лендинг: «О нас», отзывы и подвал с контактами.
   Ни одного нового цвета: все значения ниже уже стоят выше в этом же файле —
   #d3a55d у .sec-label, #bdc9c3 у .hero-left .lead, #9eafa7 у .lsection .sub,
   #98aaa2 у .feat p, #91a39b у .hero-stats .l, #dcb374 у .lfoot-link a:hover прежнего подвала. */

/* Цифры компании. Это её история, а не показания счётчиков сервиса, поэтому
   подпись говорит «за восемь лет», а не просто «студентов». */

/* Команда. Фотографии со старого сайта — 189×189, поэтому круг не больше 92px:
   выше начнётся мыло, а оригиналов крупнее нет. */
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.person { padding:26px 24px; border:1px solid rgba(255,250,240,.1); border-radius:3px 18px 3px 18px; background:rgba(255,255,255,.035); text-align:center; }
.person-photo { width:92px; height:92px; margin:0 auto 16px; display:block; border-radius:50%; border:1px solid rgba(216,170,97,.45); background:rgba(255,255,255,.04); object-fit:cover; }
.person-name { margin:0; color:var(--cream); font-family:var(--display); font-size:19px; font-weight:650; }
.person-role { margin-top:3px; color:#d3a55d; font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.person p { margin:12px 0 0; color:#98aaa2; font-size:14px; line-height:1.62; }

/* Что делаем и чего не делаем. Название сервиса читается как обещание сдать
   тест за студента — эта плашка снимает вопрос до того, как его зададут. */
.about-note { display:flex; align-items:center; gap:26px; margin-top:44px; padding:24px 26px; border:1px solid rgba(216,170,97,.28); border-radius:3px 18px 3px 18px; background:rgba(216,170,97,.05); }
.about-photo { width:184px; height:126px; flex:none; border-radius:3px 14px 3px 14px; object-fit:cover; }
.about-note h3 { margin:0 0 8px; color:var(--cream); font-size:19px; font-weight:600; }
.about-note p { margin:0 0 8px; color:#bdc9c3; font-size:14.5px; line-height:1.66; }
.about-note p:last-child { margin-bottom:0; color:#98aaa2; }

/* Отзывы. Карточка-цитата: латунная кавычка вместо иконки, имя и дата снизу. */
/* Карточки тянутся до высоты ряда, цитата занимает свободное место —
   подписи стоят на одной линии, а не ступеньками. */
.review { position:relative; display:flex; flex-direction:column; margin:0; padding:26px 26px 22px; border:1px solid rgba(255,250,240,.1); border-radius:3px 18px 3px 18px; background:rgba(255,255,255,.035); }
.review::before { content:'«'; position:absolute; top:10px; left:20px; color:rgba(216,170,97,.4); font-family:var(--display); font-size:46px; line-height:1; }
.review blockquote { position:relative; flex:1; margin:0; padding-top:30px; color:#bdc9c3; font-size:14.5px; line-height:1.68; }
.review figcaption { margin-top:16px; padding-top:13px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; border-top:1px solid rgba(255,250,240,.09); }
.review-name { color:var(--cream); font-family:var(--display); font-size:16px; font-weight:650; }
.review-date { color:#91a39b; font-size:12.5px; }
.review-cut { margin-left:auto; color:#91a39b; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

/* Подвал стал местом, куда идут за адресом и телефоном, а не набором якорей
   на эту же страницу. Двойная линейка — та же, что отбивает «Итого» в расчёте
   заказа: подвал так же подводит черту под страницей. */
.lfooter { text-align:left; }
.lfooter .lfooter-inner { align-items:stretch; }
.lfoot-cols { display:grid; grid-template-columns:1.4fr 1fr 1fr .8fr .9fr .9fr; gap:30px 30px; width:100%; padding-bottom:26px; border-bottom:3px double rgba(216,170,97,.4); }
/* Вход и регистрация — кнопками у марки, а не в хвосте списка ссылок. */
.lfoot-auth { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.lfoot-auth .btn { min-height:36px; }
.lfooter .lfoot-auth a { text-decoration:none; }
.lfooter .lfoot-auth .btn.brass { color:#162820; }
.lfooter .lfoot-auth .btn.outline-light { color:var(--cream); }
.lfoot-col p { max-width:34ch; margin:0 0 7px; color:#a4b6ae; line-height:1.55; }
.lfoot-me .lfooter-brand { margin-bottom:12px; }
.lfoot-about { color:#81938b; }
.lfoot-h { margin-bottom:11px; color:#d3a55d; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.lfoot-hours { display:grid; grid-template-columns:auto 1fr; gap:3px 14px; margin:0; padding:0; list-style:none; }
.lfoot-hours li { display:contents; }
.lfoot-day { color:#81938b; }
.lfoot-hours li span:last-child { color:#a4b6ae; font-variant-numeric:tabular-nums; }
.lfoot-num { color:#a4b6ae; font-variant-numeric:tabular-nums; }
.lfoot-tz { display:block; color:#81938b; font-size:11.5px; }
.lfoot-social { display:flex; flex-direction:column; gap:2px; margin-top:7px; }
.lfoot-nav { display:flex; flex-direction:column; gap:2px; }
/* Цель касания не ниже 24px: ссылки в подвале стоят столбиком вплотную. */
.lfoot-social a, .lfoot-nav a { display:inline-block; padding:3px 0; }
.lfooter a { color:#a4b6ae; text-decoration:none; }
.lfooter a:hover { color:#dcb374; text-decoration:underline; }
.lfoot-legal { max-width:none !important; padding-top:22px; color:#81938b; font-size:11.5px; }
.lfooter-inner > p:last-child { color:#81938b; }

@media (max-width:1000px) {
  .lfoot-cols { grid-template-columns:1fr 1fr 1fr; }
}
@media (max-width:760px) {
  .lfoot-cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:820px) {
  .team-grid { grid-template-columns:1fr; }
  /* Фотография рядом с текстом на узком экране сжимается до марки —
     убираем её, текст важнее. */
  .about-note { flex-direction:column; align-items:flex-start; gap:18px; }
  /* Оригинал 367px: на ретине это 184 CSS-px, выше фотография мылит,
     а исходников крупнее со старого сайта нет. */
  .about-photo { width:100%; height:auto; max-width:184px; }
}
@media (max-width:560px) {
  .lfoot-cols { grid-template-columns:1fr; gap:24px; }
  /* Якоря на разделы дублируют меню в шапке — на телефоне их нет, остаются
     политика и вход. Ссылки подвала, «Уже есть аккаунт? Войти» и вкладки
     карточки — цели касания от 44px. */
  .lfoot-nav .lfoot-anchor, .lfoot-anchors { display:none; }
  .lfoot-social a, .lfoot-nav a, .lfooter p > a { display:inline-block; padding:12px 0; }
  .auth-switch a { display:inline-block; padding:10px 8px; margin:-10px -8px; }
  .tabs button { min-height:44px; }
}

/* Материалы и свои авторы */
.material-list, .author-list { display:flex; flex-direction:column; gap:10px; }
.material-row, .author-row { padding:14px 16px; }
.material-main { min-width:0; flex:1 1 260px; }
.material-main b { display:block; overflow-wrap:anywhere; }
.author-row .t-title { font-weight:650; }

/* Верификация автора */
.verified-mark { display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:1px 6px 1px 4px; border-radius:999px; background:var(--green-bg); color:var(--green-ink); font-size:11.5px; font-weight:650; vertical-align:middle; }
.verified-mark svg { width:12px; height:12px; }
.verify-form { display:flex; flex-direction:column; gap:12px; }
.verify-form .field { margin:0; }
.verify-list { display:flex; flex-direction:column; gap:12px; }
.verify-row { padding:14px 16px; }
.verify-card .card-title .badge { margin-left:auto; }

/* Таблица пользователей: колонок много, и без нижней границы имя рассыпалось
   по одной букве в строку. Таблица и так прокручивается внутри своей обёртки. */
.users-table td:first-child, .users-table th:first-child { min-width:210px; }
.users-table td:nth-child(2) { min-width:150px; }
/* Колонка действий прилипает к правому краю: при горизонтальной прокрутке
   кнопки оставались за кадром, и до «Заблокировать» ехали вслепую. */
.users-table td:last-child { white-space:nowrap; }
.users-table td:last-child, .users-table th:last-child { position:sticky; right:0; z-index:1; background:var(--surface); box-shadow:-8px 0 8px -8px rgba(23,35,31,.18); }
.users-table tbody tr:hover td:last-child { background:var(--surface-2); }
.users-table thead th:last-child { background:var(--surface-2); }
.user-actions { flex-wrap:nowrap; gap:8px; }
.user-card .user-actions { flex-wrap:wrap; }
.user-card { padding:14px 16px; }
.user-card-controls { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.user-card-controls .select { width:100%; }
/* Список людей: имя не ломается посреди слова, а кнопка «Досье» прилипает к
   правому краю, как действия в таблице пользователей, — на телефоне она
   уезжала за кадр. */
.people-table { min-width:760px; }
.people-table td:first-child, .people-table th:first-child { min-width:200px; overflow-wrap:normal; word-break:normal; }
.people-table td:last-child { white-space:nowrap; }
.people-table td:last-child, .people-table th:last-child { position:sticky; right:0; z-index:1; background:var(--surface); box-shadow:-8px 0 8px -8px rgba(23,35,31,.18); }
.people-table tbody tr:hover td:last-child { background:var(--surface-2); }
.people-table thead th:last-child { background:var(--surface-2); }
/* Список людей: сотрудники отдельной группой, подписью-разделителем. */
.people-table .group-row td { padding:14px 12px 6px; color:var(--muted); font-size:12px; font-weight:650; text-transform:uppercase; letter-spacing:.04em; background:transparent; }
/* Сигналы в списке людей: бейджи в ячейке и ряд чипов-переключателей. */
.people-table .sig-badges { display:flex; flex-wrap:wrap; gap:4px; max-width:260px; }
.people-table .sig-badge { white-space:nowrap; }
.people-signal-chips { align-items:center; margin-top:-6px; }
.people-signal-chips .chips-label { margin-right:2px; }
.people-signal-chips .chip[hidden] { display:none; }
/* Досье: включённый переключатель меры (обязательная модерация, постоплата). */
.btn.ghost.is-on { border-color:var(--primary); color:var(--primary); background:var(--green-bg); }
/* Досье: последние заказы человека. */
.recent-orders { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; font-size:13.5px; }
.recent-orders li { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
/* Журнал: колонка заказа не растягивает таблицу длинным названием. Ширина
   таблицы больше общей — иначе на телефоне «Подробности» сжимали «Кто» до
   двух букв в строке; прокрутка идёт внутри .table-wrap, не у страницы. */
.audit-table { min-width:860px; }
.audit-table td:first-child { white-space:nowrap; }
.audit-table td:nth-child(2), .audit-table th:nth-child(2) { min-width:160px; }
.audit-table td:nth-child(2) a { overflow-wrap:normal; word-break:normal; white-space:nowrap; }
.audit-table .audit-order { max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.audit-controls { align-items:center; }
/* Журнал писем: текст письма с переносами строк, без прыжков по ширине. */
.mail-card .mail-body { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13.5px; }

/* Уровень автора и статус заказчика. В профиле карточки уровня и верификации
   держат ширину формы — иначе колонка «прыгала» от 660px к полной. */
.progress-card, .verify-card { max-width:660px; }
.progress-card .card-title .level-badge { margin-left:auto; }
.level-badge { margin-left:8px; vertical-align:middle; }
.prog-stats { display:flex; flex-wrap:wrap; gap:10px; margin:2px 0 14px; }
.prog-stat { flex:1 1 120px; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); }
.prog-stat b { display:block; font-size:19px; line-height:1.15; }
.prog-stat span { color:var(--muted); font-size:12.5px; }
.prog-stat.warn { border-color:var(--red-line); background:var(--red-bg); }
.prog-stat.warn b { color:var(--red-ink); }
.progress-card .onb-bar { margin:2px 0 10px; }
.perk-list { margin:12px 0 10px; padding:0; list-style:none; display:flex; flex-direction:column; gap:7px; }
.perk-list li { display:flex; align-items:flex-start; gap:8px; font-size:13.5px; }
.perk-list svg { width:15px; height:15px; flex:none; margin-top:2px; color:var(--green); }

/* Строка управления списком: поиск слева, порядок справа */
.list-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.list-controls > .input { flex:1 1 240px; min-width:0; }
.sort-row { display:flex; align-items:center; gap:8px; margin-left:auto; }
.sort-row > span { white-space:nowrap; }
.sort-select { width:auto; min-width:170px; }
@media (max-width:560px) { .sort-row { width:100%; margin-left:0; } .sort-select { flex:1; min-width:0; } }

/* Этапы заказа. Имена классов собственные: .step и .steps уже заняты
   карточками «Как это работает» на лендинге (min-height:226px и вертикальные
   разделители), и лента наследовала их вид. */
.order-steps { display:flex; margin:0 0 18px; padding:2px 0 0; list-style:none; overflow-x:auto; scrollbar-width:thin; }
.order-step { position:relative; flex:1 1 0; min-width:78px; display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
/* Соединитель тянется влево от точки: пройденный путь — зелёный. */
.order-step::before { content:''; position:absolute; top:10px; right:50%; width:100%; height:2px; background:var(--line); }
.order-step:first-child::before { display:none; }
.order-step.done::before, .order-step.current::before { background:var(--green); }
.ostep-dot { position:relative; z-index:1; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--line); border-radius:50%; background:var(--surface); color:transparent; font-size:11px; font-weight:700; line-height:1; }
.order-step.done .ostep-dot { border-color:var(--green); background:var(--green); color:var(--on-green); }
.order-step.current .ostep-dot { border-color:var(--green); background:var(--surface); box-shadow:0 0 0 4px var(--green-bg); }
/* Последний этап пройден — кружок закрашен и подсвечен: заказ завершён, а не «в процессе». */
.order-step.done.current .ostep-dot { background:var(--green); color:var(--on-green); box-shadow:0 0 0 4px var(--green-bg); }
.ostep-label { padding:0 4px; color:var(--muted); font-size:12px; line-height:1.25; }
.order-step.current .ostep-label { color:var(--ink); font-weight:650; }
.order-step.done .ostep-label { color:var(--ink); }
@media (max-width:560px) { .order-step { min-width:72px; } .ostep-label { font-size:11px; } }

/* «Что сделать сейчас» */
.attention .card-title::after { display:none; }
.att-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.att-item { display:flex; align-items:center; gap:12px; padding:10px 12px 10px 14px; border:1px solid var(--line); border-left-width:4px; border-radius:10px; background:var(--surface-2); }
.att-item.p1 { border-left-color:var(--red); }
.att-item.p2 { border-left-color:var(--amber); }
.att-item.p3 { border-left-color:var(--green); }
.att-ico { width:32px; height:32px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); }
.att-ico svg { width:16px; height:16px; }
.att-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:14px; }
.att-body b { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-body span { color:var(--muted); font-size:13px; }
.att-item .btn { flex:none; }
/* На телефоне заголовок пункта не режется до «Репетитор по о…»: текст занимает
   всю ширину после иконки, а кнопка переезжает на вторую строку под него. */
@media (max-width:560px) {
  .att-item { flex-wrap:wrap; }
  .att-body { flex:1 1 calc(100% - 44px); }
  .att-body b { white-space:normal; }
  .att-item .btn { margin-left:44px; }
}
/* «Мой план»: те же строки, что в «Что сделать сейчас», плюс действия справа. */
.plan-list { display:flex; flex-direction:column; gap:8px; }
.plan-item .att-body b { white-space:normal; }
.plan-actions { display:flex; align-items:center; gap:12px; flex:none; flex-wrap:wrap; justify-content:flex-end; }
.plan-actions .btn-link { font-size:13px; }
.plan-closed summary { cursor:pointer; font-size:13.5px; }
/* Куратор семестра (dashboard/curator.js): список подопечных — те же строки
   внимания с аватаром; карточка «Ваш куратор» и блок в досье — две колонки. */
.curator-list { display:flex; flex-direction:column; gap:8px; }
.curator-row { background:var(--surface); }
.curator-row .att-body b { white-space:normal; }
.curator-row .att-body .badge { align-self:flex-start; margin-top:3px; }
.curator-name { color:var(--ink); text-decoration:none; }
.curator-name:hover { color:var(--primary); }
.curator-actions { flex:none; display:flex; align-items:center; gap:8px; }
.curator-who { display:flex; align-items:flex-start; gap:12px; }
.curator-who > div { min-width:0; }
.curator-dossier .select { max-width:420px; }
.curator-card .card-title { margin-bottom:12px; }
.curator-semester { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.curator-semester .att-item { padding:8px 10px 8px 12px; }
.h4-sm { margin:0 0 8px; font-size:14px; font-family:var(--display); font-weight:650; }
.quote-line.curator-fee b { color:var(--amber-ink); }
@media (max-width:760px) { .curator-semester { grid-template-columns:1fr; } }
@media (max-width:560px) {
  .curator-row { flex-wrap:wrap; }
  .curator-row .att-body { flex:1 1 calc(100% - 50px); }
  .curator-row .att-body .badge { white-space:normal; text-align:left; }
  .curator-row .curator-actions { flex:1 1 100%; margin-left:50px; }
  .curator-row .curator-actions .btn { margin-left:0; }
}
@media (max-width:560px) {
  .plan-actions { flex:1 1 100%; gap:4px 8px; margin-left:44px; justify-content:flex-start; }
  .plan-item .btn { margin-left:0; }
}
/* «Пригласить друга»: ссылка + «Скопировать», три цифры под ней. */
.referral-row { display:flex; gap:8px; align-items:center; }
.referral-row .referral-link { flex:1; min-width:0; font-size:13.5px; font-variant-numeric:tabular-nums; }
.referral-row .btn { flex:none; }
.referral-code { margin-top:8px; }
.referral-code .mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.06em; color:var(--ink); }
.stat-grid.referral-stats { grid-template-columns:repeat(3,minmax(0,1fr)); margin:14px 0 10px; }
.stat-grid.referral-stats .stat { padding:12px 14px; }
.stat-grid.referral-stats .st-n { font-size:22px; }
.referral-card.is-compact .referral-stats { margin:10px 0 6px; }
.referral-card.is-compact .referral-code { display:none; }
.referral-card .card-title .ct-action { font-family:var(--font); }
@media (max-width:560px) {
  .referral-row { flex-wrap:wrap; }
  .referral-row .referral-link { flex-basis:100%; }
  .stat-grid.referral-stats { gap:8px; }
  .stat-grid.referral-stats .st-n { font-size:18px; }
}
.steps-list { margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:6px; font-size:14px; }
/* Отчёт посредника за период: управление датами и плитки итогов. */
.report-controls .row { margin-bottom:10px; }
/* Шесть плиток отчёта: по ширине, на телефоне — по две. */
.stat-grid.report-stats { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.stat-grid.report-stats .stat { padding:14px 16px; }
.stat-grid.report-stats .st-n { font-size:22px; }
.stat-grid.report-stats .st-ico { display:none; }
table.data tfoot th, table.data tfoot td { font-weight:650; border-top:2px solid var(--line); }

/* Карточка заказа: полоса статуса слева и прогресс срока снизу */
/* Полоса слева — тем же цветом, что бейдж статуса (см. statusBadge в util.js):
   ожидание проверки — янтарь, аукцион — фиолетовый, работа — синий, готово —
   зелёный, спор — красный. Раньше полоса и бейдж спорили друг с другом. */
.order-card.st-moderation::before, .order-card.st-review::before, .order-card.st-revision::before { background:var(--amber); }
.order-card.st-auction::before { background:var(--badge-violet-ink); }
.order-card.st-assigned::before, .order-card.st-in_progress::before { background:var(--blue); }
.order-card.st-completed::before, .order-card.st-paid::before { background:var(--green); }
.order-card.st-arbitration::before { background:var(--red); }
.order-card.st-cancelled::before, .order-card.st-draft::before, .order-card.st-scheduled::before { background:var(--line); }
.order-card.invited { box-shadow:0 0 0 1px var(--amber-line), var(--shadow-1, 0 1px 2px rgba(0,0,0,.04)); }
.oc-badges { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.oc-progress { margin-top:10px; height:4px; border-radius:999px; background:var(--v100); overflow:hidden; }
.oc-progress-fill { height:100%; border-radius:999px; background:var(--green); }
.oc-progress.warm .oc-progress-fill { background:var(--amber); }
.oc-progress.over .oc-progress-fill { background:var(--red); }

/* Чип приглашения прежнего автора в форме заказа */
.invite-chip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:10px 12px; border:1px solid var(--amber-line); border-radius:10px; background:var(--amber-bg); color:var(--amber-ink); font-size:14px; }
.invite-chip svg { width:16px; height:16px; flex:none; }
.invite-chip .btn { margin-left:auto; }

/* Чеклист первого входа */
.onboarding .card-title::after { display:none; }
.onb-bar { height:6px; margin:2px 0 14px; border-radius:999px; background:var(--v100); overflow:hidden; }
.onb-fill { height:100%; border-radius:999px; background:var(--grad); transition:width var(--dur-slow) var(--ease); }
.onb-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.onb-list li { display:flex; align-items:center; gap:10px; font-size:14px; }
.onb-list li.done { color:var(--muted); text-decoration:line-through; text-decoration-color:var(--line); }
.onb-mark { width:20px; height:20px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:1.5px solid var(--line); border-radius:50%; font-size:12px; font-weight:700; color:var(--green-2); background:var(--surface-2); }
.onb-list li.done .onb-mark { border-color:var(--green); background:var(--green-bg); }
.onb-list a { font-weight:600; }
/* Свёрнутый чек-лист после первого заказа: одна строка вместо карточки. */
.onb-compact { display:flex; align-items:center; gap:10px; padding:9px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--muted); font-size:13.5px; }
.onb-compact > span:first-child { display:inline-flex; color:var(--green-2); }
.onb-compact > span:first-child svg { width:16px; height:16px; }
.onb-compact .onb-text { flex:1; min-width:0; }
.onb-compact .onb-text a { font-weight:600; }
.onb-compact .btn-link { flex:none; font-size:13px; }

/* Скелетоны первичной загрузки: серые контуры на месте будущих карточек.
   Мерцание отключается вместе с остальной анимацией. */
.skel-card { margin-bottom:14px; padding:20px 22px; border:1px solid var(--line-2); border-radius:3px 15px 3px 15px; background:var(--surface); }
.skel-line { height:12px; margin:9px 0; border-radius:6px; background:linear-gradient(90deg,var(--line-2) 25%,var(--skel-mid) 50%,var(--line-2) 75%); background-size:200% 100%; animation:skel-shimmer 1.4s ease-in-out infinite; }
.skel-line.w35 { width:35%; } .skel-line.w45 { width:45%; } .skel-line.w60 { width:60%; } .skel-line.w90 { width:90%; }
@keyframes skel-shimmer { to { background-position:-200% 0; } }
.spinner { width:34px; height:34px; margin:48px auto; border:3px solid var(--spin-track); border-top-color:var(--primary); border-radius:50%; animation:spin .72s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes ndot-pop { 0% { transform:scale(.3); } 65% { transform:scale(1.15); } 100% { transform:scale(1); } }
.content > * { animation:content-in .28s ease both; }
.content > *:nth-child(2) { animation-delay:.05s; }
.content > *:nth-child(3) { animation-delay:.09s; }
.content > *:nth-child(n+4) { animation-delay:.13s; }
@keyframes content-in { from { opacity:0; transform:translateY(6px); } }

.rating-stars { margin:7px 0 10px; display:flex; justify-content:center; gap:4px; }
/* Невыбранная звезда была 1.74:1 к фону — контур практически не читался. */
.rating-star { width:43px; height:43px; padding:0; border:0; border-radius:50%; background:transparent; color:#8e887d; font-size:29px; line-height:1; cursor:pointer; transition:color .12s,transform .12s,background .12s; }
.rating-star:hover,.rating-star.filled { color:#96591a; transform:translateY(-1px); }
.rating-star:focus-visible { background:var(--star-focus); }
.rating-star:active { transform:translateY(0) scale(.9); }
.payment-quote { padding:15px; border:1px solid var(--line); border-radius:10px; background:var(--quote-bg); }
.quote-line { padding:6px 0; display:flex; justify-content:space-between; gap:18px; color:var(--muted); font-size:13.5px; }
.quote-line b { color:var(--ink); font-variant-numeric:tabular-nums; text-align:right; }
/* Отрицательный итог должен перебивать общее правило цвета внутри строки расчёта. */
.quote-line b.text-danger { color:var(--red); }
.quote-line.discount b { color:var(--green-2); }
/* Двойная линия из бухгалтерской книги: итог выделен типографикой, а не цветом. */
.quote-line.total { margin:6px 0 3px; padding-top:12px; border-top:3px double var(--line); border-top-color:color-mix(in srgb,var(--accent) 45%,var(--line)); color:var(--ink); font-weight:650; }
.quote-line.total b { font-family:var(--display); font-size:20px; }
/* Блок оплаты в карточке заказа: предоплата после назначения автора. Латунная
   кромка слева — как у «сдачи» и отчёта, чтобы взгляд цеплялся за деньги. */
.pay-card { border-left:4px solid var(--accent); }
.pay-card.pay-pending { border-left-color:var(--amber); }
.pay-card .promo-row .input { flex:1; min-width:0; }
.pay-card .pay-actions .btn { min-width:200px; }
/* «Что вас защищает»: список с иконками, как лента этапов, — датами, а не правилами. */
.protect-card { border-color:var(--green-line); }
.protect-list { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:11px; }
.protect-row { display:flex; align-items:flex-start; gap:11px; font-size:13.5px; line-height:1.42; }
.protect-row b { display:block; font-weight:650; }
.protect-ico { flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--green-bg); color:var(--green-ink); }
.protect-ico svg { width:15px; height:15px; }
.protect-row.muted { color:var(--muted); }
.protect-row.muted .protect-ico { background:var(--badge-gray-bg); color:var(--badge-gray-ink); }
.protect-row.overdue b { color:var(--red-ink); }
.protect-row.overdue .protect-ico { background:var(--red-bg); color:var(--red-ink); }
/* Строка срочности в прайс-модалке — предупреждение, а не ошибка. */
.urgency-line { color:var(--amber-ink); }
/* Платёж в служебном блоке сотрудника. */
.staff-payment { padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.staff-payment .kv { grid-template-columns:80px minmax(0,1fr); gap:5px 12px; }

/* ---------- Toast ---------- */
/* прайс-лист */
.price-card { margin-bottom:14px; }
.price-seo { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
.price-seo a { overflow-wrap:anywhere; }
/* Счётчик знаков описания: до порога — приглушённый, после — зелёный. */
.char-count { margin-top:5px; color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums; }
.char-count.ok { color:var(--green-ink); }
.price-seo-field > span:first-child { display:flex; align-items:center; gap:8px; }
.price-seo-field .badge { text-decoration:none; }
.price-card .price { font-family:var(--display); font-size:21px; font-weight:700; color:var(--primary); }
.price-components { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.component-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--v50); font-size:13px; }
.component-chip b { font-variant-numeric:tabular-nums; white-space:nowrap; flex:none; }
/* Абонемент на предмет (subscription.js): компоненты заказа со своей сдачей и
   приёмкой. Точка слева повторяет цвет статуса, полоса сверху — сколько принято. */
.comp-progress { height:6px; margin:4px 0 14px; border-radius:999px; background:var(--v100); overflow:hidden; }
.comp-progress-fill { height:100%; border-radius:999px; background:var(--green); transition:width .3s ease; }
.comp-list { list-style:none; margin:0; padding:0; }
.comp-row { padding:12px 0; border-top:1px solid var(--line-2); }
.comp-row:first-child { border-top:0; padding-top:0; }
.comp-head { display:grid; grid-template-columns:10px 1fr auto; align-items:flex-start; gap:4px 10px; }
.comp-dot { flex:none; width:10px; height:10px; margin-top:6px; border-radius:50%; background:var(--badge-gray-ink); }
.comp-row.submitted .comp-dot { background:var(--amber); }
.comp-row.accepted .comp-dot { background:var(--green); }
.comp-row.revision .comp-dot { background:var(--red); }
.comp-title { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.comp-title b { overflow-wrap:anywhere; }
.comp-head .badge { justify-self:end; }
.comp-reports { margin:10px 0 0 20px; }
.comp-reports .submission-report { margin-bottom:6px; }
.comp-files { margin-left:20px; }
.comp-actions { margin:10px 0 0 20px; }
.comp-money { margin-top:14px; padding-top:12px; border-top:1px solid var(--line-2); font-size:14px; }
.comp-money .hint { margin-top:4px; }
.comp-reorder:not(:empty) { margin-top:14px; }
@media (max-width:600px) {
  /* На телефоне бейдж статуса уходит под название — длинные названия
     компонентов иначе выталкивали точку на отдельную строку. */
  .comp-head { grid-template-columns:10px 1fr; }
  .comp-head .badge { grid-column:2; justify-self:start; }
}
/* Семестр пакетом: предмет в корзине помечен рамкой, кнопка «В пакете» — нажатой. */
.price-card.in-cart { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--sh-sm); }
.cart-toggle[aria-pressed="true"] { border-color:var(--accent); background:var(--v50); color:var(--primary); }
/* Полоска корзины: прилипает к низу экрана, не перекрывая последнюю карточку
   (padding-bottom у .content даёт ей место). */
.cart-bar { position:sticky; bottom:12px; z-index:5; margin-top:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 18px; border:1px solid var(--accent); border-radius:4px 16px 4px 16px; background:var(--surface); box-shadow:var(--paper-edge),var(--sh-lg); }
.cart-bar-head { display:flex; align-items:center; gap:8px; font-size:15px; }
.cart-bar-head svg { width:18px; height:18px; color:var(--accent-2); }
.cart-bar-hint { margin-top:3px; color:var(--muted); font-size:12.5px; }
.cart-bar-actions { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
@media (max-width:600px) { .cart-bar { bottom:8px; padding:12px 14px; } .cart-bar-actions { width:100%; margin-left:0; } .cart-bar-actions .btn { flex:1; } }
/* Окно пакета: строка на предмет — название, цена, крестик; ниже состав и дата. */
.batch-row { padding:14px 0; border-bottom:1px solid var(--line-2); }
.batch-row:first-child { padding-top:0; }
.batch-row .field { margin:10px 0 0; }
.batch-row-head { display:flex; align-items:flex-start; gap:10px; }
.batch-row-title { flex:1 1 auto; min-width:0; }
.batch-row-title b { display:block; overflow-wrap:anywhere; }
.batch-row-price { flex:none; font-family:var(--display); font-size:17px; font-weight:650; color:var(--primary); font-variant-numeric:tabular-nums; }
.batch-row-head .icon-btn { width:34px; height:34px; }
.batch-row-head .icon-btn svg { width:15px; height:15px; }
.batch-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.component-chip.pick { cursor:pointer; user-select:none; }
.component-chip.pick input { margin:0; accent-color:var(--primary); }
.component-chip.pick:has(input:checked) { border-color:var(--accent); background:var(--v100); }
/* Экспресс-консультация (dashboard/availability.js): слоты по дням, правила расписания, витрина авторов. */
.slot-days { display:flex; flex-direction:column; gap:10px; }
.slot-day-title { margin-bottom:6px; color:var(--ink-2); font-size:12.5px; font-weight:650; }
.slot-chips { display:flex; flex-wrap:wrap; gap:8px; }
.slot-chip { display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:6px 13px; border:1.5px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; font-variant-numeric:tabular-nums; cursor:pointer; text-decoration:none; transition:border-color .15s, background .15s, transform .1s; }
.slot-chip:hover { border-color:var(--accent); background:var(--v50); }
.slot-chip:active { transform:scale(.97); }
.slot-chip:focus-visible { outline:3px solid #a8701f; outline-offset:1px; }
.slot-chip.static { cursor:default; color:var(--ink-2); background:var(--v50); }
.slot-chip.static:hover { border-color:var(--line); }
.slot-chip.busy { border-style:dashed; color:var(--muted); }
.slot-chip.busy svg { width:14px; height:14px; color:var(--accent-2); }
.slot-chip.more { border-style:dashed; color:var(--primary); }
.rule-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:8px; }
.rule-row .select { flex:1 1 128px; min-width:0; padding-right:28px; }
.rule-row .input[type=date] { flex:1 1 128px; min-width:0; }
.rule-row .input[type=time] { flex:0 1 92px; min-width:84px; padding-inline:10px; }
.rule-row .rule-dash { color:var(--muted); font-size:13px; }
.rule-row .btn.sm { flex:none; min-width:38px; padding-inline:9px; }
.consult-authors { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:12px; }
.consult-author { padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.consult-author .avatar { flex:none; }
.consult-author a { color:var(--ink); font-weight:650; }
@media (max-width:640px) {
  .consult-authors { grid-template-columns:1fr; }
  /* Телефон: правило в две строки — «вид | день», затем «с … до … ×». */
  .rule-row { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto; align-items:center; }
  .rule-row .select:first-child { grid-column:1 / 3; }
  .rule-row .select:not(:first-child), .rule-row .input[type=date] { grid-column:3 / 5; }
  .rule-row .rule-dash-from { display:none; }
  .rule-row .input[type=time] { min-width:0; }
}
.batch-summary { padding-top:4px; }
/* Экран «Мой семестр»: строка — дата сдачи слева, предмет, статус с ценой, действие. */
.semester-group { margin-top:22px; }
.semester-row { display:grid; grid-template-columns:88px minmax(0,1fr) auto auto; align-items:center; gap:10px 16px; padding:13px 16px; margin-bottom:8px; border:1px solid var(--line); border-left:4px solid var(--line); border-radius:3px 12px 3px 12px; background:var(--surface); box-shadow:var(--sh-sm); }
.semester-row.st-scheduled { border-left-color:var(--badge-gray-ink); }
.semester-row.st-awaiting_payment, .semester-row.st-review, .semester-row.st-moderation, .semester-row.st-revision { border-left-color:var(--amber); }
.semester-row.st-auction { border-left-color:var(--badge-violet-ink); }
.semester-row.st-assigned, .semester-row.st-in_progress { border-left-color:var(--blue); }
.semester-row.st-completed, .semester-row.st-paid { border-left-color:var(--green); }
.semester-date { display:flex; flex-direction:column; line-height:1.2; }
.semester-date b { font-family:var(--display); font-size:16px; white-space:nowrap; }
.semester-date span { color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; }
.semester-date.soon b { color:var(--amber-ink); }
.semester-main { min-width:0; }
.semester-title { display:block; color:var(--ink); font-weight:650; text-decoration:none; overflow-wrap:anywhere; }
.semester-title:hover { color:var(--primary); }
.semester-meta { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:3px; }
.semester-side { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
.semester-price { font-variant-numeric:tabular-nums; white-space:nowrap; }
.semester-action .btn { white-space:nowrap; }
.batch-table-wrap { overflow-x:auto; }
.batch-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.batch-table th { padding:6px 10px; text-align:left; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; border-bottom:1px solid var(--line); white-space:nowrap; }
.batch-table td { padding:9px 10px; border-bottom:1px solid var(--line-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.batch-table tr:last-child td { border-bottom:0; }
@media (max-width:640px) {
  .semester-row { grid-template-columns:minmax(0,1fr) auto; }
  .semester-date { grid-column:1; flex-direction:row; align-items:baseline; gap:6px; }
  .semester-side { grid-column:2; grid-row:1; }
  .semester-main { grid-column:1 / -1; }
  .semester-action { grid-column:1 / -1; }
  .semester-action .btn { width:100%; }
}

/* карточка преподавателя */
.teacher-card { margin-bottom:12px; cursor:pointer; transition:transform .15s, border-color .15s; }
.teacher-card:hover { transform:translateY(-2px); border-color:var(--v300); }
.teacher-card .teacher-card-side { display:flex; flex-direction:column; align-items:flex-end; flex:none; }
.teacher-card .teacher-card-side .btn { pointer-events:none; }

/* служебная панель сотрудника. Правила строки расчёта живут выше, в блоке оплаты:
   повторное объявление здесь молча перебивало их и сбивало «Итого» с крупного
   начертания на обычный текст. */
.staff-block { border-color:var(--v200); background:linear-gradient(180deg,var(--v50),var(--surface) 60px); }

/* наборы чекбоксов (направления, типы работ). Без внутренней прокрутки: она
   обрезала последние пункты, а на телефоне давала скролл внутри скролла. */
.checks-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:2px 14px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); box-shadow:var(--well); }
.checks-grid .consent-row { margin:0 0 4px; font-size:13.5px; color:var(--ink); }

/* пагинация списков */
.pager { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px; }
.pager-info { color:var(--muted); font-size:13.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.pager .btn[disabled] { opacity:.45; cursor:default; pointer-events:none; }

/* фильтры-чипы списка заказов */
.filter-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.chips-hint { flex-basis:100%; margin:0; }
.filter-chips .chip { padding:7px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
.filter-chips .chip:hover { border-color:var(--v300); color:var(--ink); }
.filter-chips .chip:active { transform:scale(.96); }
.filter-chips .chip.active { background:var(--grad); color:#fff; border-color:transparent; box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--sh-primary); }

/* отзывы автора */
.review-list { display:flex; flex-direction:column; gap:10px; max-height:340px; overflow-y:auto; overscroll-behavior:contain; }
.review-item { border:1px solid var(--line); border-radius:12px; padding:12px 14px; font-size:14px; background:var(--surface); }
.review-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.review-stars { color:var(--accent); letter-spacing:2px; font-size:15px; }
/* Модерация отзывов (dashboard/reviews.js): карточка с текстом как есть — править нельзя, только скрыть. */
.review-mod-list { display:flex; flex-direction:column; gap:12px; }
.review-mod-text { margin:10px 0 0; padding:10px 14px; border-left:3px solid var(--accent); background:var(--surface-3); border-radius:0 10px 10px 0; font-size:14.5px; line-height:1.6; white-space:pre-line; }

/* согласие на обработку персональных данных */
.consent-row { display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.5; color:var(--muted); margin:2px 0 14px; cursor:pointer; }
.consent-row input { margin-top:3px; flex:none; }
/* Ссылки на документы отличимы от текста и с тап-зоной около 24px; сам текст
   — цель для галочки, ссылка срабатывает только по слову. */
.consent-row a { color:var(--primary); font-weight:600; text-decoration:underline; text-underline-offset:2px; padding:4px 0; }
.check-row a, .alert a { text-decoration:underline; text-underline-offset:2px; }
/* Переход из чек-листа к секции профиля — заголовок не должен прятаться под липким топбаром */
[data-profile-section] { scroll-margin-top:84px; }
/* Редкие секции профиля свёрнуты: пароль, копия данных, удаление */
.profile-fold > summary { cursor:pointer; list-style:none; margin-bottom:0; }
.profile-fold > summary::-webkit-details-marker { display:none; }
.profile-fold > summary > .fold-mark { order:2; margin-left:8px; color:var(--muted); font-size:12px; transition:transform .15s; }
.profile-fold[open] > summary > .fold-mark { transform:rotate(180deg); }
.profile-fold[open] > summary { margin-bottom:14px; }
@media (max-width:760px) {
  .checks-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 10px; padding:8px 10px; }
  .checks-grid .consent-row { font-size:12.5px; margin:0 0 2px; gap:6px; }
}

/* зона удаления аккаунта */
.danger-zone { border-color:var(--danger-line); }
.danger-zone .card-title svg { color:var(--red); }

#toast-root { position:fixed; z-index:1100; top:max(18px,env(safe-area-inset-top)); right:max(18px,env(safe-area-inset-right)); display:flex; flex-direction:column; gap:8px; pointer-events:none;
  max-height:calc(100vh - 36px); overflow-y:auto; overscroll-behavior:contain; }
/* В кабинете тосты стоят ниже шапки (70px): иначе «С возвращением» закрывал
   колокольчик и аватар на время показа. */
body:not(.is-landing) #toast-root { top:calc(70px + 10px + env(safe-area-inset-top, 0px)); max-height:calc(100vh - 100px); }
.toast { min-width:260px; max-width:370px; padding:13px 15px 13px 14px; display:flex; align-items:flex-start; gap:10px; border:1px solid var(--line); border-left:4px solid var(--blue); border-radius:9px; background:var(--surface); box-shadow:var(--sh-lg); color:var(--ink); font-size:13.5px; font-weight:550; pointer-events:auto; animation:toast-in .25s var(--ease); }
.toast > span:first-of-type, .toast .toast-text { flex:1; min-width:0; }
/* Раньше тип сообщения передавала только полоска слева, а success и info были
   почти одного цвета. Добавляем заливку и значок — тип виден с одного взгляда. */
.toast::before { content:'i'; flex:none; width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--blue-bg); color:var(--blue); font-family:var(--display); font-size:12px; font-weight:650; }
.toast.success { border-left-color:var(--green); background:linear-gradient(90deg,var(--green-bg),var(--surface) 42%); }
.toast.success::before { content:'✓'; background:var(--green-bg); color:var(--green-2); }
.toast.error::before { content:'!'; background:var(--red-bg); color:var(--red-ink); }
.toast.error { border-left-color:var(--red); background:linear-gradient(90deg,var(--red-bg),var(--surface) 42%); }
.toast-text { flex:1; min-width:0; }
.toast-close { flex:none; width:26px; height:26px; margin:-3px -4px 0 0; padding:0; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:19px; line-height:1; cursor:pointer; }
.toast-close:hover { background:var(--red-bg); color:var(--red-ink); }
@keyframes toast-in { from { opacity:0; transform:translateX(24px); } }

/* ---------- Диалоги ---------- */
#modal-root:empty { display:none; }
/* Прокрутка внутри наложений не утекает на страницу под ними: доскроллив модалку
   или список уведомлений до края, пользователь иначе начинал прокручивать фон. */
.modal-bg { position:fixed; z-index:1000; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(7,20,16,.72); backdrop-filter:blur(5px); animation:veil-in .16s ease; overscroll-behavior:contain;
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left)); }
.modal { width:100%; max-width:540px; max-height:min(90vh,760px); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--modal-line); border-radius:4px 20px 4px 20px; background:var(--surface); box-shadow:var(--paper-edge),var(--sh-lg); animation:dialog-in .22s cubic-bezier(.2,.82,.3,1); }
.modal .m-head { flex:none; padding:19px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--line); background:var(--panel); }
.modal .m-head h3 { margin:0; font-size:19px; }
.modal .m-body { min-height:0; padding:22px; overflow-y:auto; overscroll-behavior:contain; }
.modal .m-body > :first-child { margin-top:0; }
.modal .m-foot { flex:none; padding:15px 22px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; border-top:1px solid var(--line); background:var(--panel); }
/* Итог заказа в подвале окна (прайс): сумма видна рядом с кнопкой, не за прокруткой тела. */
.modal .m-foot:has(.modal-total) { align-items:center; }
.modal .m-foot .modal-total { flex:1 1 0; display:flex; flex-direction:column; min-width:120px; align-self:center; margin-right:auto; }
.modal .m-foot .modal-total > b { font-size:20px; line-height:1.2; }
.modal .m-foot .modal-total .hint { margin-top:2px; line-height:1.4; }
.modal .x { width:36px; height:36px; flex:none; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--muted); font-size:20px; line-height:1; cursor:pointer; transition:color .15s,background .15s,border-color .15s; }
.modal .x:hover { border-color:#d2a3a5; background:var(--red-bg); color:var(--red); }
@keyframes veil-in { from { opacity:0; } }
@keyframes veil-out { to { opacity:0; } }
@keyframes dialog-out { to { opacity:0; transform:translateY(6px) scale(.985); } }
/* Уход зеркалит появление: без этого модалка и панель исчезали рывком,
   и глаз терял место, к которому был привязан. */
.modal-bg.is-closing { animation:veil-out var(--dur-fast) ease forwards; }
.modal-bg.is-closing .modal { animation:dialog-out var(--dur-fast) ease forwards; }
.notif-panel.is-closing { animation:dialog-out var(--dur-fast) ease forwards; }
@keyframes dialog-in { from { opacity:0; transform:translateY(12px) scale(.985); } }

/* ---------- Уведомления ---------- */
.notif-panel { position:fixed; z-index:50; top:77px; right:max(20px,env(safe-area-inset-right)); width:380px; max-width:calc(100vw - 28px); max-height:min(480px,calc(100vh - 96px)); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:4px 16px 4px 16px; background:var(--surface); box-shadow:var(--sh-lg); animation:dialog-in .18s ease; }
.notif-panel .nh { position:sticky; z-index:1; top:0; padding:14px 17px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:var(--panel); font-family:var(--display); font-weight:650; }
.notif-item { width:100%; min-height:50px; padding:12px 17px; display:flex; align-items:flex-start; gap:11px; border:0; border-bottom:1px solid var(--line-2); background:var(--surface); color:var(--ink); text-align:left; font-size:13.5px; }
.notif-ico { width:28px; height:28px; flex:none; margin-top:1px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--line); color:var(--muted); }
.notif-ico svg { width:14px; height:14px; }
.notif-body { flex:1; min-width:0; }
.notif-item.unread .notif-ico { color:var(--primary); }
button.notif-item { cursor:pointer; }
button.notif-item:hover { background:var(--item-hover); }
.notif-item.unread { box-shadow:inset 3px 0 var(--unread-mark); background:var(--unread-bg); }
.notif-item .nt { margin-top:2px; color:var(--muted); font-size:11.5px; }

/* ============================================================
   АДАПТИВНОСТЬ
   ============================================================ */
@media (max-width:1080px) {
  .feat-grid { grid-template-columns:repeat(2,1fr); }
  .stat-grid, .stat-grid.stat-grid-5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Две колонки имеют смысл, только пока главная заметно шире боковой: при 320px
   боковой ей нужно от 450px, то есть окно от ~1120px. Ниже — одна колонка. */
@media (max-width:1120px) {
  .detail-grid { grid-template-columns:1fr; }
}

@media (max-width:960px) {
  .hero { grid-template-columns:1fr; padding-top:45px; gap:50px; }
  .hero-left { max-width:760px; }
  .auth-card { width:100%; max-width:500px; margin:0 auto; box-shadow:12px 12px 0 rgba(6,20,16,.3),var(--sh-lg); }
  /* Карточка входа здесь живёт в своей секции после «Возможностей» (landing.js
     переносит её ниже 960px) — секция короче остальных: в ней один блок. */
  .auth-slot { display:block; padding-top:56px; padding-bottom:56px; }
  .auth-slot-head .sub { margin-bottom:26px; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .step:nth-child(2) { border-right:0; }
  .step:nth-child(-n+2) { border-bottom:1px solid rgba(222,187,128,.18); }
  .step .arrow-link { display:none!important; }
}

/* Боковая панель уходит в шторку заметно раньше мобильной вёрстки: до 1000px
   постоянные 270px отнимают у контента больше трети окна, и на «ноутбуке в
   половину экрана» рабочая колонка оказывалась уже, чем на планшете. */
@media (max-width:1000px) {
  :root { --sidebar-w:0px; }
  .shell { grid-template-columns:minmax(0,1fr); }
  .sidebar { position:fixed; z-index:70; left:-286px; width:270px; transition:left var(--dur-slow) var(--ease); }
  .sidebar.open { left:0; box-shadow:var(--sh-lg); }
  .scrim { display:block; position:fixed; z-index:65; inset:0; width:100%; height:100%; padding:0; border:0; background:rgba(5,18,14,.65); backdrop-filter:blur(2px); cursor:pointer; animation:veil-in var(--dur) var(--ease); }
  .topbar .burger { display:flex; }
  .topbar .icon-btn.primary { display:flex; }
}

/* Закреплённое главное действие карточки заказа — только на телефоне; на
   широком экране блок «Действия» и так на виду. */
.sticky-action { display:none; }
@media (max-width:760px) {
  .sticky-action { position:fixed; z-index:60; left:0; right:0; bottom:0; display:flex; gap:8px; padding:10px max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); border-top:1px solid var(--line); background:color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter:blur(8px); box-shadow:0 -8px 24px rgba(12,30,25,.12); }
  .sticky-action .btn { flex:1; min-height:48px; justify-content:center; }
  .sticky-action .sticky-secondary { flex:0 0 auto; }
  .content.has-sticky-action { padding-bottom:96px; }
  /* Пока список ставок на экране, полоса «К ставкам» прячется. */
  .sticky-action.is-hidden { display:none; }
  /* Подвал под полосой: иначе она накрывала последние строки. */
  .content.has-sticky-action ~ .cabinet-footer { padding-bottom:96px; }
}
@media (max-width:760px) {
  .content { padding:21px 16px 36px; }
  .cabinet-footer { padding:12px 16px 18px; }
  .stat-grid, .stat-grid.stat-grid-5 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-head h1 { font-size:24px; }
  .feat-grid { grid-template-columns:1fr; }
  .lsection { padding:70px 5vw; }
  .cta-band { width:90vw; }
  /* На телефоне фото первого экрана почти целиком под градиентом и под
     карточкой входа — не видно ничего, кроме лишних килобайт в мобильной сети. */
  .hero-bg { background-image:linear-gradient(92deg,rgba(9,27,22,.97) 0%,rgba(12,33,27,.91) 47%,rgba(12,30,25,.82) 100%); }
  /* В одну колонку min-height:230px оставлял под каждой карточкой пустой
     низ — шесть карточек теряли по экрану на воздух. */
  .feat { min-height:0; padding:22px 20px; }
  .feat .fico { margin-bottom:14px; }
  .btn.ghost.reviews-more { display:flex; width:100%; min-height:46px; margin-top:14px; justify-content:center; color:var(--cream); border-color:rgba(221,179,109,.48); background:transparent; box-shadow:none; }
  .btn.ghost.reviews-more:hover { background:rgba(221,179,109,.12); }
}

@media (max-width:520px) {
  .lnav { padding:10px 16px; }
  .lnav .btn { margin-left:auto; }
  .lnav .menu-btn span { display:none; }
  /* Цели касания от 44px: бургер, «Войти» и пункты выпавшего меню. Шапка при
     этом не растёт — отступы панели ужаты ровно на эту разницу. */
  .lnav .menu-btn { width:44px; min-height:44px; padding:0; justify-content:center; }
  .lnav .brand { font-size:18px; }
  .lnav .brand .logo { width:34px; height:34px; }
  .lnav .btn { min-height:44px; padding:8px 14px; }
  .lnav .links a { min-height:44px; }
  .hero { padding:43px 16px 56px; }
  /* Из-под карточки на телефоне выглядывал обрезанный кусок «Z» — читался как
     дефект, а не как водяной знак. */
  .hero-bg::after { display:none; }
  .lsection { padding:52px 5vw; }
  .lsection .sub { margin-bottom:28px; }
  .hero-left h1 { font-size:clamp(39px,13vw,57px); }
  .hero-left h1 .accent { margin-left:0; }
  .hero-left p.lead { font-size:15.5px; }
  .hero-cta { display:grid; grid-template-columns:1fr; }
  .hero-cta .btn { width:100%; }
  /* Три цифры в ряд на 390px не помещаются без переноса слов в подписях —
     две колонки, и подпись остаётся целой. */
  .hero-stats { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 12px; }
  .hero-stats .s { max-width:none; }
  .hero-stats .s .n { font-size:22px; }
  .hero-stats .s .l { font-size:11.5px; min-height:0; }
  .auth-card { padding:25px 20px; border-radius:3px 17px 3px 17px; box-shadow:8px 8px 0 rgba(6,20,16,.3),var(--sh-lg); }
  .social-row { flex-direction:column; }
  .steps { grid-template-columns:1fr; }
  /* Номер слева от текста, а не над ним: шаг ужимается с ~200px до ~115px,
     и четыре шага видны за полтора экрана. Заголовок может быть h3 или h4. */
  .step { display:grid; grid-template-columns:40px 1fr; column-gap:14px; min-height:0; padding:18px 12px; border-right:0; border-bottom:1px solid rgba(222,187,128,.18); }
  .step .num { margin:0; grid-row:span 2; }
  .step h3, .step h4 { margin-bottom:4px; }
  .step:last-child { border-bottom:0; }
  .lsection h2 { font-size:30px; }
  .cta-inner { padding:36px 18px; }
  .cta-inner::after { display:none; }
  .cta-buttons { flex-direction:column; }
  .cta-buttons .btn { width:100%; }
  .faq-item p { padding-right:8px; }
  /* Команда — горизонтальными карточками: фото слева, имя и роль справа. */
  .person { display:grid; grid-template-columns:64px 1fr; gap:4px 14px; text-align:left; padding:16px; }
  .person-photo { width:64px; height:64px; grid-row:span 3; margin:0; }
  .person p { margin-top:6px; }
  .lfooter { text-align:left; }

  .topbar { height:62px; padding:0 11px; gap:7px; }
  /* Ссылка-домик в крошках: площадь касания 40×40 вместо голой иконки. */
  .topbar .crumb .crumb-link { min-width:40px; min-height:40px; justify-content:center; padding:0; }
  .icon-btn { width:38px; height:38px; }
  /* На телефоне — только ближайший родитель и текущая страница; дальние
     предки остаются в дереве для читалок. Подпись «Главная» у домика прячем —
     иконки достаточно. */
  .topbar .crumb > .crumb-far, .topbar .crumb .crumb-home-text { display:none!important; }
  .topbar .crumb { font-size:12px; }
  /* Вход в «Новый заказ» на экране один: на телефоне он уже есть в шапке («+»). */
  .page-head > .btn[href="#/new"] { display:none; }
  .top-avatar { display:none; }
  .content { padding:18px 12px 32px; }
  .page-head { align-items:stretch; }
  .page-head > .btn { width:100%; }
  .card { padding:18px 15px; border-radius:3px 13px 3px 13px; }
  .stat-grid, .stat-grid.stat-grid-5 { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .stat { padding:16px 14px; }
  .stat .st-n { font-size:23px; }
  .stat .st-l { font-size:11.5px; }
  .order-card { padding:17px 15px; }
  .oc-head { flex-direction:column; }
  .oc-head > :last-child { text-align:left; }
  /* Поля переходят в столбик, но интервал между ними обязан остаться:
     с gap:0 соседние поля и кнопки слипались в сплошную полосу. */
  .row { gap:10px; }
  .row > * { flex-basis:100%; min-width:0; }
  .kv { grid-template-columns:98px minmax(0,1fr); gap:9px 10px; }
  .sys-grid { grid-template-columns:1fr; }
  .sys-card .kv { grid-template-columns:1fr; gap:2px 0; }
  .sys-card .kv dt { margin-top:8px; }
  .wd-toolbar > * { flex-basis:100%; }
  .wd-card .bid-top { flex-direction:column; align-items:stretch; gap:6px; }
  .wd-card .bid-top > .flex:last-child { justify-content:space-between; }
  .wd-registry .input[type=date], .wd-registry .select { max-width:none; flex:1 1 45%; }
  .finance-controls .input[type=date] { max-width:none; flex:1 1 40%; }
  .backup-code-list { grid-template-columns:1fr; }
  .totp-secret { justify-content:center; }
  .chat { height:420px; }
  .chat-input { gap:5px; }
  .chat-input .icon-btn { width:38px; }
  .chat-input .btn { width:42px; min-width:42px; padding:0; }
  .msg { max-width:92%; }
  .rating-star { width:40px; height:40px; font-size:26px; }

  /* max(), а не голое число: иначе значение затирало env() выше и уведомление
     уезжало под вырез камеры. То же ниже для панели и модального окна. */
  /* Ниже верхней панели кабинета (62px на телефоне): тост «Аккаунт создан»
     накрывал кнопку меню, и первый экран нового пользователя начинался с
     поиска, как его закрыть. */
  #toast-root { left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); top:max(10px,env(safe-area-inset-top)); }
  body:not(.is-landing) #toast-root { top:calc(62px + 8px + env(safe-area-inset-top, 0px)); }
  .toast { width:100%; min-width:0; max-width:none; }
  .notif-panel { left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); top:69px; width:auto; max-width:none; }
  .modal-bg { padding:8px max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); align-items:flex-end; }
  .modal { max-height:calc(100dvh - 16px); border-radius:12px 12px 3px 3px; }
  .modal .m-head { padding:16px; }
  .modal .m-body { padding:17px 16px; }
  .modal .m-foot { padding:13px 16px; display:grid; grid-template-columns:1fr; }
  .modal .m-foot .modal-total { align-items:flex-start; }
  .modal .m-foot .btn { width:100%; white-space:normal; }
  .quote-line { gap:10px; }
}

@media (max-width:350px) {
  .stat-grid { grid-template-columns:1fr; }
  .tabs button { padding-inline:5px; font-size:12.5px; }
  .rating-stars { gap:1px; }
  .rating-star { width:38px; height:38px; font-size:24px; }
}


/* ============================================================
   ТЁМНАЯ ТЕМА
   Включается системной настройкой. Кабинет собран на токенах, поэтому тема —
   это их переопределение; лендинг тёмный по собственному дизайну и не трогается
   (иначе светлая карточка входа получила бы кремовый текст на кремовом фоне).
   Значения подобраны под те же нормы контраста, что и светлые: основной текст
   ≥4.5:1, приглушённый ≥4.5:1, крупные цифры ≥3:1 — проверено замером.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  body:not(.is-landing) {
    color-scheme: dark;

    --bg:#101915; --surface:#182420; --surface-2:#1c2924; --surface-3:#213029;
    --panel:#1c2823; --hover:#243430; --hover-line:#4c5c54; --chip-bg:#22322b;
    --tabs-bg:#131d19; --disabled-bg:#1b2621; --disabled-line:#2f3b35;
    --input-line:#47564e; --quote-bg:#1b2925; --skel-mid:#25352e;
    --spin-track:#2f3b35; --star-focus:#3b321f; --ndot-ring:#1c2823; --ndot-bg:#c4423d; --on-green:#10241b; /* темнее --red: белые цифры счётчика остаются читаемыми (5:1) */
    --topbar-bg:rgba(16,25,21,.85); --topbar-line:rgba(64,78,71,.6);
    --scroll-shadow:rgba(0,0,0,.55);
    --card-glass:rgba(24,36,32,.96); --stat-glass:rgba(24,36,32,.94);
    --paper-glow:rgba(217,171,99,.05); --paper-stripe:rgba(255,255,255,.012);
    --busy-bar:rgba(255,255,255,.25);
    --unread-bg:#243228; --unread-mark:#d9ab63; --item-hover:#22302a;
    --selection-bg:#5c4a22; --placeholder:#95a29a;
    --card-hover-line:#4c5c54; --danger-line:#5c3634; --modal-line:#2e3b34;
    --busy-bar-ghost:rgba(255,255,255,.22); --file-btn-bg:#243129; --file-btn-ink:#a9c6b5;
    /* Фирменный градиент кнопок на тёмных карточках давал 1.3–1.5:1 — кнопка
       читалась только по тексту. Светлее на два шага; тень остаётся чёрной. */
    --grad:linear-gradient(128deg,#3f7c67 0%,#2f604f 58%,#265042 100%);
    --primary:#3f7c67; --primary-600:#2f604f;

    --ink:#e9e6da; --ink-2:#c7cfc8; --muted:#9fada4; --faint:#9aa8a0;
    --line:#2e3b34; --line-2:#26322c;

    --v50:#1c2823; --v100:#243129; --v200:#2e3d34; --v300:#45564c;
    --v400:#93a396; --v500:#6f9c8c;
    --accent:#d9ab63; --accent-2:#caa05f; --accent-soft:#37311f;
    --grad-soft:linear-gradient(145deg,#1d2a24,#182420);

    --green:#4cb887; --green-2:#8fd8ae; --green-bg:#152e21; --green-ink:#8fd8ae; --green-line:#255239;
    --red:#e0736d; --red-bg:#361d1e; --red-ink:#ffa39e; --red-line:#5c3634;
    --amber:#d9a648; --amber-bg:#342a12; --amber-ink:#e6b873; --amber-line:#5c4a22;
    --blue:#66a9c4; --blue-bg:#132832; --blue-ink:#93c8de; --blue-line:#2a4c5c;

    --badge-bg:#233028; --badge-ink:#a9c6b5; --badge-gray-bg:#252d29; --badge-gray-ink:#aeb8b1;
    --badge-violet-bg:#2b2742; --badge-violet-ink:#c3b4ee;

    --sh-xs:0 1px 2px rgba(0,0,0,.3); --sh-sm:0 4px 14px rgba(0,0,0,.28);
    --sh-md:0 14px 34px rgba(0,0,0,.4); --sh-lg:0 28px 70px rgba(0,0,0,.55);
    /* Зелёный ореол возвращает кнопке цветную тень, а латунный оттенок в
       свечении фона — метафору настольной лампы ателье. */
    --sh-primary:0 10px 24px rgba(0,0,0,.4),0 0 22px rgba(63,124,103,.18);
    --paper-edge:inset 0 1px 0 rgba(255,255,255,.05);
    --well:inset 0 1px 4px rgba(0,0,0,.35);
  }
  /* Фирменный тёмно-зелёный как цвет ТЕКСТА на тёмных карточках нечитаем
     (1.89:1) — ценники и акценты переходят на светлую пару. Кнопки не трогаем:
     там он фон, а не текст — поэтому ссылка-кнопка (a.btn) исключена: правило
     оказывалось специфичнее .btn и красило подпись главной кнопки светло-зелёным
     по зелёному градиенту (2.94:1 на светлом крае). */
  body:not(.is-landing) a:not(.btn),
  body:not(.is-landing) .btn-link,
  body:not(.is-landing) .tabs button.active,
  body:not(.is-landing) a.table-order-link:hover,
  body:not(.is-landing) a.table-order-link:focus-visible,
  body:not(.is-landing) .stat .st-ico,
  body:not(.is-landing) .price-card .price,
  body:not(.is-landing) .bid .price,
  body:not(.is-landing) .quote-line.total b,
  body:not(.is-landing) .btn.outline { color:var(--green-2); }
  /* Латунное кольцо фокуса читается на тёмном лучше светлым. */
  body:not(.is-landing) :focus-visible { outline-color:#d9ab63; }
  /* Значки статусов с точкой: точка наследует цвет — норм; заголовки таблиц
     на тёмной подложке нуждаются в светлой букве. */
  body:not(.is-landing) table.data th { background:var(--v50); color:#aab6ae; }
  /* Исходящий пузырь чата остаётся фирменным тёмно-зелёным — на тёмном фоне
     ему нужна рамка, чтобы не сливаться. */
  body:not(.is-landing) .msg.out { border-color:#3a5a4d; }
  body:not(.is-landing) .icon-btn:hover { border-color:var(--hover-line); background:var(--hover); color:var(--green-2); }
  body:not(.is-landing) .filter-chips .chip.active { border-color:#4a8a72; }
  /* Шеврон select зашит картинкой — тёмной теме нужна светлая обводка. */
  body:not(.is-landing) .select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aab6ae' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
  body:not(.is-landing) .stat .st-ico { background:var(--v100); }
  /* Приглушённые сплошные заливки, набранные в правилах литералами. */
  body:not(.is-landing) .toast.success { background:linear-gradient(90deg,var(--green-bg),var(--surface) 42%); }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

@media (prefers-contrast:more) and (prefers-color-scheme: dark) {
  body:not(.is-landing) { --line:#55655c; --muted:#c0cbc4; }
}
@media (prefers-contrast:more) {
  :root { --line:#9e988d; --muted:#4f5954; }
  .btn,.icon-btn,.input,.textarea,.select,.card,.order-card,.table-wrap,
  .att-item,.invite-chip { border-width:2px; }
}

/* Приглушённый список во время подгрузки следующей страницы или нового
   поискового запроса: содержимое остаётся на месте, но по нему нельзя
   промахнуться мышью, пока оно ещё старое. */
/* Переход объявлен на самом элементе, а не только в состоянии: иначе список
   гас плавно, а возвращался рывком — класс снимается вместе с переходом. */
.list-fade { transition:opacity var(--dur) var(--ease); }
.is-loading { opacity:.45; pointer-events:none; }
@media (prefers-reduced-motion: reduce) { .list-fade { transition:none; } }

/* Надзор: журнал, досье, скрытые сообщения. Ничего яркого — сотрудник смотрит
   сюда подолгу, и страница должна читаться, а не привлекать внимание. */
.back-link { margin-bottom:14px; display:inline-flex; align-items:center; gap:7px; color:var(--muted); font-size:13.5px; font-weight:600; text-decoration:none; }
.back-link:hover { color:var(--ink); }
.back-link svg { width:15px; height:15px; }
.rot180 { transform:rotate(180deg); }
.nowrap { white-space:nowrap; }
.mb-3 { margin-bottom:24px; }
.gap-3 { gap:16px; }

.signal-list { display:flex; flex-direction:column; gap:9px; margin:0; padding:0; list-style:none; }
.signal { display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border:1px solid var(--line); border-left-width:3px; border-radius:3px 10px 10px 3px; font-size:14px; }
.signal svg { width:17px; height:17px; flex:none; margin-top:1px; }
.signal.warn { color:var(--amber-ink); background:var(--amber-bg); border-color:var(--amber-line); }
.signal.danger { color:var(--red-ink); background:var(--red-bg); border-color:var(--red-line); }

.note-list { display:flex; flex-direction:column; gap:10px; }
.note { padding:12px 14px; border:1px solid var(--line); border-radius:3px 12px 3px 12px; background:var(--stat-glass); }
.note-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.5; }
.note-meta { margin-top:7px; display:flex; align-items:center; justify-content:space-between; gap:10px; color:var(--muted); font-size:12.5px; }

/* Скрытое сообщение: рамка остаётся, содержимое приглушено. Участник видит
   причину, сотрудник — ещё и сам текст, чтобы было что разбирать. */
.msg.hidden-msg { opacity:.85; border-style:dashed; }
.m-hidden-note { display:flex; align-items:center; gap:7px; margin-bottom:5px; color:var(--amber-ink); font-size:12.5px; font-weight:600; }
.m-hidden-note svg { width:15px; height:15px; flex:none; }
/* Текст скрытого сообщения видит только сотрудник — это улика в разборе,
   поэтому не приглушаем её: зачёркивания достаточно, чтобы отличить. */
.m-hidden-text { text-decoration:line-through; text-decoration-thickness:1px; text-decoration-color:var(--muted); }
.m-hide-btn { min-height:24px; margin-left:8px; padding:0 4px; font-size:12px; font-weight:600; }
/* Своё сообщение — тёмно-зелёный пузырь: и предупреждение, и кнопка на нём
   должны быть светлыми, иначе оба сливаются с фоном. Цвета те же, что уже
   используются для времени и ссылок внутри .msg.out. */
.msg.out .m-hidden-note { color:#f0cd97; }
.msg.out .m-hide-btn { color:#dbeae2; }
.msg.out .m-hidden-text { text-decoration-color:#c7d5cf; }

/* «Что вас защищает» на лендинге: те же карточки, что «Возможности», плюс
   сноска со ссылкой на оферту — обещание должно вести к пункту договора. */
.guarantee-note { margin:22px 0 0; color:#98aaa2; text-align:center; font-size:14px; }
.guarantee-note a { color:#dcb374; }

/* Юридические документы (/legal/…): серверные страницы без скрипта в стиле
   лендинга. Ширина колонки — под чтение длинного текста, не под сетку. */
.legal-page .lhead { position:relative; }
.legal-page .lnav .links a.is-current { color:#dcb374; }
.legal-wrap { max-width:820px; text-align:left; }
.legal-wrap .sec-label { text-align:left; }
.legal-title { margin:0 0 10px; color:var(--cream); font-family:var(--display); font-size:clamp(28px,4vw,40px); font-weight:650; line-height:1.15; }
.legal-meta { margin:0 0 18px; color:#81938b; font-size:13px; }
.legal-intro { margin:0 0 26px; color:#a4b6ae; font-size:16px; line-height:1.6; }
.legal-toc { margin:0 0 34px; padding:18px 22px; border:1px solid rgba(216,170,97,.35); border-radius:3px 18px 3px 18px; background:rgba(255,255,255,.035); }
.legal-toc-h { margin-bottom:8px; color:#d3a55d; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.legal-toc ol { margin:0; padding-left:20px; columns:2; column-gap:28px; }
.legal-toc li { margin:3px 0; break-inside:avoid; }
.legal-toc a, .legal-body a, .legal-docs a, .legal-list a { color:#dcb374; text-decoration:none; }
.legal-toc a:hover, .legal-body a:hover, .legal-docs a:hover, .legal-list a:hover { text-decoration:underline; }
.legal-body { color:#c9d6cf; font-size:15.5px; line-height:1.68; overflow-wrap:anywhere; }
.legal-body h2 { margin:34px 0 12px; text-align:left; padding-top:18px; border-top:1px solid rgba(222,187,128,.18); color:var(--cream); font-family:var(--display); font-size:21px; font-weight:650; }
.legal-section:first-child h2 { margin-top:0; padding-top:0; border-top:0; }
.legal-body p { margin:0 0 12px; }
.legal-body ul, .legal-body ol { margin:0 0 14px; padding-left:24px; }
.legal-body li { margin:4px 0; }
.legal-body strong { color:var(--cream); font-weight:650; }
.legal-table-wrap { margin:6px 0 16px; overflow-x:auto; }
.legal-table { width:100%; border-collapse:collapse; font-size:14px; }
.legal-table th, .legal-table td { padding:9px 12px; border:1px solid rgba(222,187,128,.22); text-align:left; vertical-align:top; }
.legal-table th { color:#d3a55d; font-weight:650; background:rgba(255,255,255,.04); }
.legal-docs { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:34px; padding-top:18px; border-top:3px double rgba(216,170,97,.4); font-size:14px; }
.legal-docs a.is-current { color:#81938b; pointer-events:none; }
.legal-list { margin:0; padding-left:22px; }
.legal-list li { margin:8px 0; }
.legal-page .lfooter .lfooter-inner { text-align:center; }
@media (max-width:700px) {
  .legal-toc ol { columns:1; }
  .legal-page .lnav .links { display:none; }
}