/* BidOps — новый интерфейс (включается сотрудником: меню профиля → «Новый интерфейс», путь назад — /ui/old).
   Подключается поверх app.css и перекрашивает те же классы: разметка страниц и действия не меняются.
   Образец — пакет ChatGPT «BidOps-for-Claude» (prototype/dist/styles.css, design-tokens.json, 04-DESIGN.txt):
   спокойный фон, ясные границы, синий — только то, на что нажимают; зелёный, янтарный, красный — состояние вместе
   с текстом. Заголовки — Heading Now (Light 300 — страницы, Book 400 — разделы и названия лотов), без синтетического
   жирного; текст, таблицы и поля — системный интерфейсный шрифт. Отличие от образца: текст не мельче 14 px
   (правило BidOps из проверок интерфейса), у образца подписи 10–12 px.
   Тема: data-theme на <html> (выбор сотрудника) или как в системе. Тёмная — отдельная палитра, не фильтр. */

@font-face { font-family: "Heading Now"; src: url("/static/fonts/heading-now-light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Heading Now"; src: url("/static/fonts/heading-now-book.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --bg: #f7f8fa; --surface: #fff; --ink: #202b40; --ink2: #3f4c64; --muted: #5f6d83; --line: #e7ebf0; --line2: #d5dbe4;
  --field-line: #878fa0;
  --blue: #3d5ce3; --blue-dark: #304dc4; --blue-soft: #edf2ff; --blue-line: #c9d4fb;
  --green: #15735c; --green-soft: #e9f6f0; --green-line: #bfe3d3;
  --amber: #946017; --amber-soft: #fff3dc; --amber-line: #f0d6a8; --amber-edge: #d39a43;
  --red: #b13e3e; --red-soft: #fceeee; --red-line: #f1c7c7;
  --hover: #f5f7fa; --soft: #f2f4f8; --head: #fafbfd; --field: #fff; --focus: #3d5ce3;
  --font-heading: "Heading Now", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --side: 216px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #11151c; --surface: #191f29; --ink: #e1e7f0; --ink2: #c3cddc; --muted: #9aa8bd; --line: #2c3443; --line2: #394458;
    --blue: #8ea5ff; --blue-dark: #a5b7ff; --blue-soft: #252e4a; --blue-line: #3a4a78;
    --green: #81ceb0; --green-soft: #1b332d; --green-line: #2f5546;
    --amber: #e5bb73; --amber-soft: #352e22; --amber-line: #5a4a2c; --amber-edge: #c99a4e;
    --red: #efa5a5; --red-soft: #39262d; --red-line: #6a3a44;
    --hover: #202a3a; --soft: #1f2632; --head: #171e29; --field: #141b25; --focus: #8ea5ff; --field-line: #6b788f;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11151c; --surface: #191f29; --ink: #e1e7f0; --ink2: #c3cddc; --muted: #9aa8bd; --line: #2c3443; --line2: #394458;
  --blue: #8ea5ff; --blue-dark: #a5b7ff; --blue-soft: #252e4a; --blue-line: #3a4a78;
  --green: #81ceb0; --green-soft: #1b332d; --green-line: #2f5546;
  --amber: #e5bb73; --amber-soft: #352e22; --amber-line: #5a4a2c; --amber-edge: #c99a4e;
  --red: #efa5a5; --red-soft: #39262d; --red-line: #6a3a44;
  --hover: #202a3a; --soft: #1f2632; --head: #171e29; --field: #141b25; --focus: #8ea5ff; --field-line: #6b788f;
}
/* прежние имена из app.css — на новую палитру */
:root {
  --paper: var(--bg); --sheet: var(--surface); --rule: var(--line); --rule2: var(--line2); --row: var(--soft);
  --accent: var(--blue); --accent-dk: var(--blue-dark); --accent-tint: var(--blue-soft); --accent-line: var(--blue-line);
  --navy: var(--blue); --now: var(--blue); --teal: var(--green);
  --ok: var(--green); --ok-tint: var(--green-soft); --ok-line: var(--green-line);
  --warn: var(--amber); --warn-tint: var(--amber-soft); --warn-line: var(--amber-line); --warn-edge: var(--amber-edge);
  --bad: var(--red); --bad-tint: var(--red-soft); --bad-line: var(--red-line);
  --neutral-tint: var(--soft); --font: var(--font-ui); --r: 10px; --r-sm: 8px;
}

/* ---------------------------------------------------------------- основа */
body.ui2 { font: 15px/1.5 var(--font-ui); color: var(--ink); background: var(--bg); font-synthesis: none; }
body.ui2 a { color: var(--blue); }
body.ui2 :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
body.ui2 [hidden] { display: none !important; }
body.ui2 h1, body.ui2 h2, body.ui2 h3, body.ui2 h4 { font-family: var(--font-heading); font-weight: 400; letter-spacing: 0;
  font-synthesis: none; color: var(--ink); }
body.ui2 h1 { font-size: 40px; font-weight: 300; line-height: 1.16; letter-spacing: -.015em; margin: 0 0 8px; }
body.ui2 h2 { font-size: 22px; line-height: 1.3; margin: 26px 0 12px; }
body.ui2 h3 { font-size: 19px; line-height: 1.35; margin: 14px 0 8px; }
body.ui2 b, body.ui2 strong, body.ui2 th { font-weight: 600; }
body.ui2 .note, body.ui2 .muted, body.ui2 small { color: var(--muted); }
body.ui2 .note { font-size: 14px; }
body.ui2 .skip { position: fixed; left: 230px; top: -80px; z-index: 100; padding: 10px 14px; background: var(--surface);
  color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
body.ui2 .skip:focus { top: 10px; }

/* ---------------------------------------------------------------- оболочка */
body.ui2.shell { padding-left: var(--side); }
.side2 { position: fixed; z-index: 30; inset: 0 auto 0 0; width: var(--side); background: var(--surface);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 26px 16px 14px; overflow-y: auto; }
.brand2 { font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink) !important;
  padding: 0 12px 22px; letter-spacing: 0; }
.brand2:hover { text-decoration: none; }
.ws { display: flex; align-items: center; gap: 10px; padding: 12px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--head); margin-bottom: 26px; }
.ws .sq { width: 30px; height: 30px; border-radius: 6px; background: var(--soft); color: var(--muted); display: grid;
  place-items: center; flex: none; }
.ws .sq .ico { width: 18px; height: 18px; }
.ws b { display: block; font-size: 14px; font-weight: 600; color: var(--ink2); line-height: 1.3; }
.ws small { display: block; font-size: 13px; color: var(--muted); line-height: 1.3; }
.navlbl { font-size: 13px; color: var(--muted); padding: 0 12px; margin-bottom: 8px; font-weight: 600; }
.nav2 { display: flex; flex-direction: column; gap: 3px; }
.nav2 a, .nav2 summary, .side2-bottom a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px;
  padding: 10px 12px; border-radius: 8px; color: var(--ink2) !important; font-size: 15px; font-weight: 500; list-style: none;
  cursor: pointer; flex-wrap: wrap; }
.nav2 summary::-webkit-details-marker { display: none; }
.nav2 .ico, .side2-bottom .ico { width: 19px; height: 19px; flex: none; opacity: .85; }
.nav2 a:hover, .nav2 summary:hover, .side2-bottom a:hover { background: var(--hover); color: var(--ink) !important; text-decoration: none; }
.nav2 a.on, .nav2 summary.on, .side2-bottom a.on { background: var(--blue-soft); color: var(--blue) !important; font-weight: 600; }
.nav2 > a.on::before, .nav2 summary.on::before, .side2-bottom a.on::before { content: ""; position: absolute; left: 0; top: 13px;
  bottom: 13px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); }
.nav2 hr { border: 0; height: 1px; background: var(--line); margin: 12px 11px; width: auto; }
.more2 > a { padding-left: 43px; min-height: 38px; font-size: 14.5px; }
.more2 > a.on::before { display: none; }
.nav2 .navbar.on { flex-basis: 100%; flex-direction: row; align-items: center; gap: 8px; padding-left: 31px; }
.nav2 .navbar .pbar { width: 70px; }
.side2-bottom { margin-top: auto; padding-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.side2-bottom a { flex-wrap: nowrap; }
.side2-bottom a.uiback { font-size: 14px; color: var(--muted) !important; min-height: 38px; gap: 10px; }

.main2 { min-width: 0; }
.top2 { position: sticky; top: 0; z-index: 20; height: 72px; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 0 32px; background: var(--surface); background: color-mix(in srgb, var(--surface) 94%, transparent); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px); }
.gsearch { position: relative; flex: 1 1 260px; max-width: 480px; min-width: 200px; display: flex; align-items: center; }
.gsearch .ico { position: absolute; left: 12px; width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.gsearch input[type=search] { width: 100%; min-height: 42px; padding: 8px 64px 8px 40px; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--ink); font-size: 15px; }
.gsearch input[type=search]:hover { background: var(--hover); }
.gsearch input[type=search]:focus { background: var(--field); border-color: var(--blue); outline: 3px solid var(--blue-line); outline-offset: 0; }
.gsearch kbd { position: absolute; right: 10px; font-family: inherit; font-size: 13px; color: var(--muted); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 6px; pointer-events: none; }
.hact { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.iconbtn { width: 40px; height: 40px; min-height: 40px; padding: 0 !important; border-radius: 8px !important; border: 1px solid transparent !important;
  background: transparent !important; color: var(--muted) !important; display: inline-grid; place-items: center; }
.iconbtn:hover { background: var(--hover) !important; color: var(--ink) !important; }
.iconbtn .ico { width: 20px; height: 20px; grid-area: 1 / 1; }
.iconbtn .ico:last-child { display: none; }
:root[data-theme="dark"] .iconbtn .ico:first-child { display: none; }
:root[data-theme="dark"] .iconbtn .ico:last-child { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .iconbtn .ico:first-child { display: none; }
  :root:not([data-theme="light"]) .iconbtn .ico:last-child { display: block; }
}
.vline { width: 1px; height: 26px; background: var(--line); }
.who2 { position: relative; }
.who2 > summary { display: flex; align-items: center; gap: 10px; list-style: none; cursor: pointer; padding: 4px 8px 4px 4px;
  border-radius: 8px; color: var(--ink); }
.who2 > summary::-webkit-details-marker { display: none; }
.who2 > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg); margin: -4px 4px 0 6px; }
.who2 > summary:hover { background: var(--hover); }
.who2 .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: inline-grid;
  place-items: center; font-weight: 600; flex: none; }
.who2 .nm b { display: block; font-size: 14.5px; line-height: 1.25; }
.who2 .nm small { display: block; font-size: 13px; line-height: 1.25; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who2 .drop { left: auto; right: 0; min-width: 270px; }
.who2 .dsep { height: 1px; background: var(--line); margin: 6px 4px; }
.who2 .themes { display: flex; gap: 4px; padding: 2px 6px 8px; flex-wrap: wrap; }
.who2 .themes a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; }
.who2 .themes a.on { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); font-weight: 600; }
body.ui2 .drop { background: var(--surface); border-color: var(--line); box-shadow: 0 16px 40px rgba(10, 18, 34, .16); }
body.ui2 .drop a { color: var(--ink); font-size: 15px; }
body.ui2 .drop a:hover { background: var(--hover); }
body.ui2 button.linklike { color: var(--blue); }
body.ui2 button.linklike:hover { background: var(--hover); }
body.ui2 .jobstrip { margin: 12px 32px 0; background: var(--blue-soft); }
body.ui2 .jobstrip .pbar { background: var(--surface); }

body.ui2 .page { max-width: 1600px; padding: 30px 32px 70px; }
body.ui2.bare .page { padding-top: 24px; }

/* ---------------------------------------------------------------- заголовок страницы */
body.ui2 .top { margin-bottom: 22px; align-items: flex-end; }
body.ui2 .top .muted, body.ui2 .top .note { font-size: 15px; color: var(--muted); }
body.ui2 .crumbs { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
body.ui2 .crumbs a { color: var(--muted); }
body.ui2 .crumbs a:hover { color: var(--blue); }
.eyebrow { font-size: 14px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ph p.lead { margin: 6px 0 0; color: var(--muted); font-size: 15px; }

/* ---------------------------------------------------------------- панели, таблицы */
body.ui2 .panel, body.ui2 .card, body.ui2 .stat, body.ui2 .tablewrap, body.ui2 details.kw, body.ui2 .viewer, body.ui2 .kcard,
body.ui2 .board .day, body.ui2 .tile { background: var(--surface); border-color: var(--line); border-radius: 10px; box-shadow: none; }
body.ui2 .panel { padding: 20px 22px; }
body.ui2 .panel > h3:first-child, body.ui2 .panel > h2:first-child { margin-top: 0; }
body.ui2 .panel.bad { background: var(--red-soft); border-color: var(--red-line); }
body.ui2 table { background: transparent; }
body.ui2 th, body.ui2 td { border-bottom-color: var(--line); font-size: 15px; }
body.ui2 th { background: var(--head); color: var(--muted); font-size: 14px; font-weight: 600; }
body.ui2 .panel th { background: transparent; }
body.ui2 tr:hover td { background: var(--hover); }
body.ui2 .compact td { font-size: 14.5px; }
body.ui2 .fields td { border-bottom-color: var(--line); }
body.ui2 .fields tr.edited td:nth-child(2) { background: var(--amber-soft); }
body.ui2 .section-h h2 { font-size: 22px; }
body.ui2 details.panel > summary { font-family: var(--font-heading); font-weight: 400; font-size: 19px; color: var(--ink); }
body.ui2 details.panel > summary .note, body.ui2 details.panel > summary .pill { font-family: var(--font-ui); }
body.ui2 details > summary { color: var(--blue); }
body.ui2 .log { background: #0f1620; }
body.ui2 pre.kwraw, body.ui2 .viewer pre, body.ui2 textarea.copy { background: var(--soft); color: var(--ink); }
body.ui2 .viewer img { background: #fff; border-color: var(--line); }
body.ui2 code.cmd { background: var(--soft); border-color: var(--line); }

/* ---------------------------------------------------------------- метки и сроки */
body.ui2 .pill { border-radius: 5px; font-size: 14px; padding: 1px 8px; background: var(--soft); color: var(--ink2); font-weight: 500; }
body.ui2 .st-new, body.ui2 .st-client_yes, body.ui2 .st-in_work, body.ui2 .st-package, body.ui2 .st-qc, body.ui2 .st-ready,
body.ui2 .st-submitted { background: var(--blue-soft); color: var(--blue); }
body.ui2 .st-offered { background: transparent; color: var(--ink2); border: 1px dashed var(--line2); }
body.ui2 .st-lost, body.ui2 .st-client_no, body.ui2 .st-cancelled { background: transparent; color: var(--muted); border-color: var(--line); }
body.ui2 .pill.soft { background: transparent; border-color: var(--line2); }
body.ui2 .st-won, body.ui2 .st-contract, body.ui2 .rv-confirmed, body.ui2 .cov-covered, body.ui2 .ok { background: var(--green-soft); color: var(--green); border-color: var(--green-line); }
body.ui2 .rv-pending, body.ui2 .cov-partial, body.ui2 .warn { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-line); }
body.ui2 .rv-rejected, body.ui2 .cov-gap, body.ui2 .bad { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
body.ui2 .flag { border-radius: 6px; }
body.ui2 .flag.info { background: var(--soft); color: var(--ink2); }
body.ui2 .due { border-radius: 6px; }
body.ui2 .due-ok { color: var(--green); background: transparent; }
body.ui2 .due-warn { color: var(--amber); background: var(--amber-soft); }
body.ui2 .due-bad { color: #fff; background: #b13e3e; border-color: #b13e3e; }
body.ui2 .due-none { background: transparent; color: var(--muted); }
body.ui2 .risk-overdue { color: var(--red); }
body.ui2 .risk-risk { color: var(--amber); }
body.ui2 .tstat-open { background: var(--soft); color: var(--ink2); }
body.ui2 .tstat-in_progress { background: var(--blue-soft); color: var(--blue); }
body.ui2 .dot.on { background: var(--green); } body.ui2 .dot.err { background: var(--red); }

/* ---------------------------------------------------------------- кнопки и поля */
body.ui2 button, body.ui2 .btn { min-height: 40px; padding: 8px 15px; border-radius: 7px; border: 1px solid var(--line2);
  background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; box-shadow: none; }
body.ui2 button:hover, body.ui2 .btn:hover { background: var(--hover); border-color: var(--line2); }
body.ui2 button.primary, body.ui2 .btn.primary { background: #3d5ce3; border-color: #3d5ce3; color: #fff; box-shadow: none; }
body.ui2 button.primary:hover, body.ui2 .btn.primary:hover { background: #304dc4; border-color: #304dc4; }
:root[data-theme="dark"] body.ui2 button.primary, :root[data-theme="dark"] body.ui2 .btn.primary { background: #4d6ce7; border-color: #4d6ce7; }
:root[data-theme="dark"] body.ui2 button.primary:hover, :root[data-theme="dark"] body.ui2 .btn.primary:hover { background: #607ff3; border-color: #607ff3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.ui2 button.primary, :root:not([data-theme="light"]) body.ui2 .btn.primary { background: #4d6ce7; border-color: #4d6ce7; }
}
body.ui2 button.tint, body.ui2 .btn.tint { background: var(--blue-soft); border-color: transparent; color: var(--blue); }
body.ui2 button.tint:hover, body.ui2 .btn.tint:hover { border-color: var(--blue-line); }
body.ui2 button.danger { background: var(--surface); color: var(--red); border-color: var(--red-line); }
body.ui2 button.danger:hover { background: var(--red-soft); }
body.ui2 button.small, body.ui2 .btn.small { min-height: 34px; padding: 5px 12px; font-size: 14px; }
body.ui2 button.linklike { min-height: 0; border: 0; background: none; }
body.ui2 label { color: var(--ink2); font-size: 14.5px; }
body.ui2 label.chk { color: var(--ink); }
body.ui2 input[type=text], body.ui2 input[type=password], body.ui2 input[type=number], body.ui2 input[type=date],
body.ui2 input[type=datetime-local], body.ui2 input[type=email], body.ui2 input[type=search], body.ui2 select, body.ui2 textarea {
  background: var(--field); color: var(--ink); border-color: var(--field-line); border-radius: 7px; font-size: 15px; }
body.ui2 input::placeholder, body.ui2 textarea::placeholder { color: var(--muted); opacity: 1; }
body.ui2 input:focus, body.ui2 select:focus, body.ui2 textarea:focus { border-color: var(--blue); outline: 3px solid var(--blue-line); }
body.ui2 input[type=file]::file-selector-button { background: var(--surface); color: var(--ink); border-color: var(--line2); }
body.ui2 .seg { border-color: var(--field-line); }
body.ui2 .seg span { background: var(--field); color: var(--ink2); border-color: var(--line2); }
body.ui2 .seg input:checked + span { background: var(--blue); color: #fff; }
body.ui2 .viewswitch { background: var(--surface); border-color: var(--line); padding: 3px; gap: 3px; border-radius: 7px; }
body.ui2 .viewswitch a { border: 0 !important; border-radius: 5px; min-height: 34px; color: var(--muted); font-size: 14.5px; }
body.ui2 .viewswitch a.on { background: var(--blue-soft); color: var(--blue); }
body.ui2 .viewswitch a:hover { background: var(--hover); }
body.ui2 .chips a { background: var(--surface); border-color: var(--line); color: var(--ink2); border-radius: 6px; }
body.ui2 .chips a.on { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }
body.ui2 .flash { border-radius: 9px; background: var(--surface); border-color: var(--line); color: var(--ink); }
body.ui2 .flash.ok { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
body.ui2 .flash.warn { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
body.ui2 .flash.bad { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
body.ui2 .flash .note { color: inherit; opacity: .9; }
body.ui2 .choice > details { background: var(--surface); border-color: var(--line2); }
body.ui2 .choice > details > summary { color: var(--ink); }
body.ui2 .choice > details > summary::before { border-color: var(--line2); }
body.ui2 .choice > details[open] { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-line); }
body.ui2 .choice > details[open] > summary::before { border-color: var(--blue); }

/* ---------------------------------------------------------------- вкладки */
body.ui2 .tabs { gap: 24px; border-bottom-color: var(--line); margin-bottom: 20px; }
body.ui2 .tabs a { padding: 12px 0 11px; border-bottom-width: 2px; font-size: 15px; color: var(--muted); font-weight: 500; }
body.ui2 .tabs a:hover { color: var(--ink); }
body.ui2 .tabs a.on { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.ltabs { display: flex; gap: 24px; border-bottom: 1px solid var(--line); margin: 4px 0 20px; overflow-x: auto; scrollbar-width: thin; }
.ltabs a { display: inline-flex; align-items: center; gap: 7px; padding: 12px 0 11px; border-bottom: 2px solid transparent;
  color: var(--muted) !important; font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.ltabs a:hover { color: var(--ink) !important; text-decoration: none; }
.ltabs a.on { color: var(--blue) !important; border-bottom-color: var(--blue); font-weight: 600; }
.ltabs .counter { font-size: 13px; background: var(--soft); color: var(--ink2); padding: 0 6px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.ltabs a.on .counter { background: var(--blue-soft); color: var(--blue); }

/* ---------------------------------------------------------------- лот: шапка, путь, «Сейчас», справка */
body.ui2 .lothead h1 { font-size: 34px; font-weight: 300; line-height: 1.16; }
body.ui2 .lothead .meta { color: var(--muted); font-size: 15px; }
body.ui2 .lothead .side-act .when { text-align: right; }
body.ui2 .stepper { background: var(--surface); border-color: var(--line); border-radius: 10px; padding: 18px 20px; margin-bottom: 20px; }
body.ui2 .stepper li::before { background: var(--surface); border-color: var(--line2); color: var(--muted); }
body.ui2 .stepper li::after { background: var(--line); }
body.ui2 .stepper li b { background: var(--surface); color: var(--muted); font-weight: 500; }
body.ui2 .stepper li span { color: var(--muted); }
body.ui2 .stepper li.done::before { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
body.ui2 .stepper li.cur::before { background: var(--blue); border-color: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--blue-soft); }
:root[data-theme="dark"] body.ui2 .stepper li.cur::before { color: #11151c; }
body.ui2 .stepper li.cur b, body.ui2 .stepper li.late b { color: var(--ink); font-weight: 600; }
body.ui2 .stepper li.cur span { color: var(--ink2); }
body.ui2 .stepper li.late::before { background: #b13e3e; border-color: #b13e3e; color: #fff; }
body.ui2 .stepper li.late span { color: var(--red); }

body.ui2 .now { background: var(--blue-soft); color: var(--ink); border: 1px solid var(--blue-line); border-left: 4px solid var(--blue);
  border-radius: 10px; box-shadow: none; padding: 22px 26px; margin-bottom: 22px; }
body.ui2 .now > .lbl, body.ui2 .now .split .lbl { background: none; color: var(--blue); padding: 0; font-size: 14px; font-weight: 700; margin-bottom: 4px; }
body.ui2 .now h2 { font-size: 26px; color: var(--ink); margin: 0 0 6px; }
body.ui2 .now .why, body.ui2 .now label, body.ui2 .now .note, body.ui2 .now .more .note, body.ui2 .now .more label,
body.ui2 .now .actions .note, body.ui2 .now form .note { color: var(--ink2); }
body.ui2 .now a:not(.btn) { color: var(--blue); }
body.ui2 .now details > summary, body.ui2 .now .more > summary { color: var(--blue); }
body.ui2 .now .more { border-top-color: var(--blue-line); }
body.ui2 .now button.primary, body.ui2 .now .btn.primary { background: #3d5ce3; color: #fff; border-color: #3d5ce3; }
body.ui2 .now button:not(.primary):not(.danger), body.ui2 .now .btn:not(.primary) { background: var(--surface); color: var(--ink);
  border-color: var(--line2); }
body.ui2 .now button:not(.primary):not(.danger):hover, body.ui2 .now .btn:not(.primary):hover { background: var(--hover); }
body.ui2 .now button.danger { background: var(--surface); color: var(--red); border-color: var(--red-line); }
body.ui2 .now input[type=file] { color: var(--ink); }
body.ui2 .now .pbar { background: var(--surface); }
body.ui2 .now .pbar > span { background: var(--blue); }
body.ui2 .now.late { background: var(--red-soft); border-color: var(--red-line); border-left-color: var(--red); }
body.ui2 .now.late > .lbl { background: none; color: var(--red); }
body.ui2 .now .tgmsg { background: var(--soft); }
body.ui2 .side > .sec { border-top-color: var(--line); }
body.ui2 .side > .sec > h3 { font-size: 19px; }
body.ui2 .side > details.sec > summary { font-family: var(--font-heading); font-weight: 400; font-size: 18px; }
body.ui2 .side > details.sec > summary .note, body.ui2 .side > details.sec > summary .pill { font-family: var(--font-ui); font-size: 14px; }
body.ui2 .kv > div:nth-child(odd) { color: var(--muted); }
body.ui2 .plan li { border-bottom-color: var(--line); }
body.ui2 .tgmsg { background: var(--soft); }
body.ui2 .tgmsg .bubble { background: var(--surface); color: var(--ink); }
body.ui2 .tgmsg .kb span { background: var(--surface); color: var(--blue); }
body.ui2 .lotchip { background: var(--soft); color: var(--ink); }
body.ui2 .ovr .kv { grid-template-columns: 170px 1fr; }

/* ---------------------------------------------------------------- лоты: доска, план */
body.ui2 .kanban { gap: 12px; }
body.ui2 .kcol { background: var(--soft); border-radius: 10px; }
body.ui2 .kcol > h3 { font-size: 18px; }
body.ui2 .kcol > h3 .no { background: var(--surface); color: var(--blue); font-family: var(--font-ui); }
body.ui2 .kcol > h3 .n { font-family: var(--font-ui); }
body.ui2 .kcard .t { font-family: var(--font-heading); font-weight: 400; font-size: 17px; line-height: 1.3; }
body.ui2 .kcard .c { color: var(--muted); }
body.ui2 .board .day.today { border-color: var(--blue); box-shadow: inset 0 3px 0 var(--blue); }
body.ui2 .expired-list { background: var(--surface); border-color: var(--red-line); border-left-color: var(--red); }
body.ui2 .tcol.over { background: var(--blue-soft); box-shadow: inset 0 0 0 2px var(--blue-line); }
body.ui2 .challenge { background: var(--blue-soft); border-color: var(--blue-line); }
body.ui2 .sticky-bar { background: var(--surface); border-top-color: var(--line); }
body.ui2 .paircode { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue); }
body.ui2 .niche-grid > .niche { border-color: var(--line); }
body.ui2 .niche-grid > .niche:has(> label input:checked) { background: var(--blue-soft); border-color: var(--blue-line); }
body.ui2 .alerts > div { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-left-color: var(--amber-edge); }
body.ui2 .alerts > div.bad { border-left-color: var(--red); }
body.ui2 .alerts .choose { border-left-color: var(--blue); }

/* ---------------------------------------------------------------- «Сегодня» */
.focus-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding: 0 0 18px; margin-bottom: 20px; font-size: 15px; color: var(--ink2); }
.focus-strip > span { display: inline-flex; align-items: center; gap: 10px; }
.focus-strip .ico { width: 20px; height: 20px; color: var(--blue); }
.qtabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 26px; }
.qtab { position: relative; display: grid !important; grid-template-columns: 1fr auto; gap: 6px 12px; text-align: left !important;
  align-items: start !important; justify-content: stretch !important; padding: 18px 18px 16px !important; min-height: 84px;
  border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--surface) !important;
  color: var(--ink) !important; white-space: normal !important; font-weight: 400 !important; }
.qtab:hover { border-color: var(--blue-line) !important; }
.qtab b { font-size: 15px; font-weight: 600; line-height: 1.3; }
.qtab small { grid-column: 1; font-size: 14px; color: var(--muted); line-height: 1.4; }
.qtab strong { grid-column: 2; grid-row: 1 / 3; align-self: center; font-family: var(--font-ui); font-size: 32px; font-weight: 500;
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.qtab[aria-pressed="true"] { border-color: var(--blue) !important; background: var(--blue-soft) !important; }
.qtab[aria-pressed="true"]::before { content: ""; position: absolute; top: -1px; left: 18px; right: 18px; height: 3px;
  background: var(--blue); border-radius: 0 0 4px 4px; }
.qtab[aria-pressed="true"] strong { color: var(--blue); }
.qtab.hasblock strong { color: var(--amber); }
.g-today { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.sec-h h2 { margin: 0 !important; font-size: 24px !important; }
.sec-h small { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.sec-h > a { font-size: 15px; white-space: nowrap; }
.wq { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wq-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.wq-head select { width: auto; min-width: 210px; min-height: 38px; }
.wq-head .cnt { margin-left: auto; font-size: 14px; color: var(--muted); }
.wq-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px 200px; gap: 18px; align-items: center;
  padding: 18px 20px; border-top: 1px solid var(--line); }
.wq-row:first-of-type { border-top: 0; }
.wq-row.hasblock::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--amber-edge); }
.wq-row.late::before { background: var(--red); }
.lot-name { display: block; font-family: var(--font-heading); font-weight: 400; font-size: 19px; line-height: 1.32; color: var(--ink) !important;
  overflow-wrap: anywhere; }
a.lot-name:hover { color: var(--blue) !important; text-decoration: none; }
.lot-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 6px; font-size: 14px; color: var(--muted); }
.lot-meta .pill { font-size: 13.5px; }
.blocker, .hint { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 14px; line-height: 1.45; }
.blocker { color: var(--amber) !important; }
.blocker.late { color: var(--red) !important; }
.blocker::before { content: "⚠"; flex: none; }
.hint { color: var(--muted); }
.wq-due b { display: block; font-size: 14px; font-weight: 600; }
.wq-due span { display: block; font-size: 14px; color: var(--ink2); line-height: 1.55; font-variant-numeric: tabular-nums; }
.wq-due .lt { color: var(--red); font-weight: 600; }
.row-action { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 9px 14px;
  border-radius: 7px; background: var(--blue-soft); color: var(--blue) !important; font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.row-action::after { content: "→"; flex: none; }
.row-action:hover { text-decoration: none; filter: brightness(.97); outline: 1px solid var(--blue-line); }
.wq-row.hasblock .row-action { background: #3d5ce3; color: #fff !important; }
:root[data-theme="dark"] .wq-row.hasblock .row-action { background: #4d6ce7; }
.row-wait { font-size: 14px; color: var(--muted); }
.row-wait a { display: inline-block; margin-top: 4px; }
.wq-empty { padding: 26px 20px; color: var(--muted); }
.rail2 { display: flex; flex-direction: column; gap: 22px; }
.rail2 .box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rail2 .box > .bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px;
  border-bottom: 1px solid var(--line); }
.rail2 .box > .bh h2 { margin: 0; font-size: 21px; }
.rail2 .mt2 { display: block; padding: 14px 20px; border-top: 1px solid var(--line); color: var(--ink) !important; }
.rail2 .mt2:first-of-type { border-top: 0; }
.rail2 .mt2:hover { background: var(--hover); text-decoration: none; }
.rail2 .mt2 b { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; }
.rail2 .mt2 .m { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--muted); }
.rail2 .mt2 .m .risk-overdue { color: var(--red); }
.rail2 .empty { padding: 16px 20px; color: var(--muted); font-size: 14.5px; }
.rail2 .more { padding: 12px 20px; border-top: 1px solid var(--line); font-size: 14.5px; }
.rail2 table th, .rail2 table td { padding: 10px 14px; }

/* ---------------------------------------------------------------- инструкции */
.help-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.help-map .hm { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.help-map .hm h3 { margin: 0 0 4px; font-size: 20px; }
.help-map .hm p { margin: 0; color: var(--ink2); font-size: 14.5px; }
.help-map .hm .who { margin-top: 8px; font-size: 14px; color: var(--muted); }
.path-steps { list-style: none; margin: 0; padding: 0; counter-reset: ps; }
.path-steps li { position: relative; padding: 0 0 16px 44px; counter-increment: ps; }
.path-steps li::before { content: counter(ps); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--blue-line); color: var(--blue); display: grid; place-items: center; font-size: 14px; font-weight: 600;
  background: var(--surface); }
.path-steps li::after { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--line); }
.path-steps li:last-child::after { display: none; }
.path-steps b { display: block; font-size: 16px; }
.path-steps span { color: var(--ink2); font-size: 14.5px; }
.sit { border-top: 1px solid var(--line); padding: 12px 0; }
.sit:first-of-type { border-top: 0; }
.sit > summary { font-weight: 600; color: var(--ink) !important; font-size: 15.5px; }
.sit p { margin: 8px 0 0; color: var(--ink2); }

/* ---------------------------------------------------------------- адаптивность */
@media (max-width: 1280px) {
  .g-today { grid-template-columns: minmax(0, 1fr) 300px; }
  .wq-row { grid-template-columns: minmax(0, 1fr) 140px; }
  .wq-row > .row-action, .wq-row > .row-quiet { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 1100px) {
  .qtabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-today { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  body.ui2.shell { padding-left: 0; }
  .side2 { position: static; width: auto; height: auto; flex-direction: column; padding: 12px 16px; border-right: 0;
    border-bottom: 1px solid var(--line); }
  .brand2 { padding: 4px 4px 10px; font-size: 26px; }
  .ws, .navlbl { display: none; }
  .nav2 { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .nav2 a, .nav2 summary { min-height: 40px; padding: 8px 10px; }
  .nav2 hr { display: none; }
  .more2[open] { flex-basis: 100%; }
  .side2-bottom { flex-direction: row; flex-wrap: wrap; padding-top: 6px; }
  .top2 { position: static; height: auto; padding: 10px 16px; flex-wrap: wrap; }
  .gsearch { flex: 1 1 100%; order: 3; }
  .gsearch kbd { display: none; }
  .who2 .nm small { display: none; }
  body.ui2 .page { padding: 18px 16px 50px; }
  body.ui2 .jobstrip { margin: 10px 16px 0; }
  body.ui2 h1 { font-size: 34px; }
  body.ui2 .lothead h1 { font-size: 30px; }
  .wq-row { grid-template-columns: 1fr; gap: 10px; padding: 16px; }
  .wq-row > .row-action, .wq-row > .row-quiet { justify-self: stretch; }
  .wq-due span { display: inline; margin-right: 10px; }
  .qtab { padding: 14px !important; }
  .qtab strong { font-size: 28px; }
  body.ui2 .now { padding: 18px; }
}
@media (max-width: 480px) { .qtabs { gap: 8px; } .qtab small { display: none; } }
@media (prefers-reduced-motion: reduce) { body.ui2 * { transition: none !important; animation: none !important; } }

.row-quiet { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 9px 14px;
  border-radius: 7px; border: 1px solid var(--line); color: var(--ink2) !important; font-size: 14.5px; font-weight: 600; }
.row-quiet::after { content: "→"; flex: none; color: var(--muted); }
.row-quiet:hover { background: var(--hover); text-decoration: none; }
body.ui2 .grid > * { min-width: 0; }
@media (max-width: 860px) { body.ui2 .panel, body.ui2 [data-tab] > table { overflow-x: auto; } body.ui2 .kv { grid-template-columns: 120px minmax(0, 1fr); } }
body.ui2 .kcard .c, body.ui2 .lot-meta span { overflow-wrap: anywhere; }
.g-today > * { min-width: 0; }
body.ui2 .now .split > * { min-width: 0; } body.ui2 .tgmsg { max-width: min(460px, 100%); }

/* ---------------------------------------------------------------- ход заданий: круги (у каждого задания свой цвет) */
.jc0 { --jc: #3d5ce3; } .jc1 { --jc: #0e7c86; } .jc2 { --jc: #15735c; } .jc3 { --jc: #9a5d0c; } .jc4 { --jc: #7352a4; } .jc5 { --jc: #b1456b; }
:root[data-theme="dark"] .jc0 { --jc: #8ea5ff; } :root[data-theme="dark"] .jc1 { --jc: #6fd0d4; } :root[data-theme="dark"] .jc2 { --jc: #81ceb0; }
:root[data-theme="dark"] .jc3 { --jc: #e5bb73; } :root[data-theme="dark"] .jc4 { --jc: #c6b5f2; } :root[data-theme="dark"] .jc5 { --jc: #f0a3bf; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .jc0 { --jc: #8ea5ff; } :root:not([data-theme="light"]) .jc1 { --jc: #6fd0d4; }
  :root:not([data-theme="light"]) .jc2 { --jc: #81ceb0; } :root:not([data-theme="light"]) .jc3 { --jc: #e5bb73; }
  :root:not([data-theme="light"]) .jc4 { --jc: #c6b5f2; } :root:not([data-theme="light"]) .jc5 { --jc: #f0a3bf; }
}
.ring { position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.ring-lg { width: 54px; height: 54px; } .ring-md { width: 44px; height: 44px; } .ring-sm { width: 22px; height: 22px; }
.ring .trk { fill: none; stroke: var(--line); stroke-width: 5; }
.ring .arc { fill: none; stroke: var(--jc); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.ring-sm .trk, .ring-sm .arc { stroke-width: 6; }
.ring-failed .arc { stroke: var(--red); }
.ring-queued .trk, .ring-idle .trk { stroke-dasharray: 4 4; stroke: var(--line2); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--jc);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ring-md b { font-size: 12px; }
.ring-failed b { color: var(--red); }
.ring .spin { transform-origin: 22px 22px; animation: ringspin 1.1s linear infinite; }
@keyframes ringspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ring .spin { animation: none; } .ring .arc { transition: none; } }
body.ui2 .jobstrip { display: block; background: none; padding: 0; margin: 14px 32px 0; }
body.ui2 .jobstrip:empty { display: none; }
.jobring-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 16px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; }
.jobchip { display: inline-flex; align-items: center; gap: 12px; padding: 4px 14px 4px 4px; border-radius: 999px; color: var(--ink) !important;
  min-width: 0; }
.jobchip:hover { background: var(--hover); text-decoration: none; }
.jc-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.jc-t b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.jc-t small { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 340px; }
.jobs-all { margin-left: auto; font-size: 14.5px; white-space: nowrap; }
.nav2 .navbar.on { display: flex; flex-basis: 100%; flex-direction: row; align-items: center; gap: 8px; padding-left: 31px; }
.nav2 .navbar .nb-t, .ltabs .navbar .nb-t, body.ui2 .tabs .navbar .nb-t { font-size: 13.5px; color: var(--ink2); font-weight: 600; }
body.ui2 .tabs .navbar.on { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.jobpill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 12px 4px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted) !important; font-size: 14px; font-weight: 600; white-space: nowrap; }
.jobpill:hover { background: var(--hover); text-decoration: none; }
.jobpill.on { color: var(--ink) !important; border-color: var(--line2); }
.jobpill > span:first-child { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.jobpill > span:first-child:empty::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 3px dashed var(--line2); }

/* ---------------------------------------------------------------- инструкция раздела: панель справа, блок-схемы */
.guidebtn { display: inline-flex !important; align-items: center; gap: 8px; min-height: 40px !important; padding: 6px 14px 6px 11px !important;
  border-radius: 999px !important; border: 1px solid var(--line) !important; background: var(--surface) !important;
  color: var(--ink2) !important; font-size: 14.5px !important; font-weight: 600 !important; }
.guidebtn:hover { border-color: var(--blue-line) !important; color: var(--blue) !important; }
.guidebtn[aria-expanded="true"] { background: var(--blue-soft) !important; border-color: var(--blue-line) !important; color: var(--blue) !important; }
.guidebtn .ico { width: 18px; height: 18px; }
.guide2 { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--surface);
  border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(10, 18, 34, .14); display: flex; flex-direction: column; }
.guide2[hidden] { display: none !important; }
.gd-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px 10px 22px;
  border-bottom: 1px solid var(--line); }
.gd-k { font-size: 14px; font-weight: 600; color: var(--muted); }
.gd-body { overflow-y: auto; padding: 18px 22px 40px; flex: 1; overscroll-behavior: contain; }
.gd h2 { margin: 0 0 8px !important; font-size: 30px !important; font-weight: 300 !important; }
.gd h2:focus { outline: none; }
.gd-what { margin: 0 0 8px; color: var(--ink); }
.gd-who { margin: 0 0 18px; font-size: 14.5px; color: var(--ink2); }
.gd-flow { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.gd-flow h3 { margin: 0 0 12px !important; font-size: 20px !important; }
.flow { list-style: none; margin: 0; padding: 0; }
.fn { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px); column-gap: 26px; padding-bottom: 26px; }
.fn:last-child { padding-bottom: 0; }
.fn > .fb { grid-column: 1; position: relative; z-index: 1; padding: 9px 12px; border: 1.5px solid var(--blue-line); border-radius: 8px;
  background: var(--surface); font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.fb small { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); }
/* соединитель вниз со стрелкой */
.fn:not(:last-child)::after { content: ""; position: absolute; left: calc((100% - 176px) / 2); top: 100%; margin-top: -26px; height: 26px;
  width: 0; border-left: 1.5px solid var(--line2); }
.fn:not(:last-child)::before { content: ""; position: absolute; left: calc((100% - 176px) / 2 - 5px); bottom: 1px; width: 0; height: 0;
  border-left: 5.5px solid transparent; border-right: 5.5px solid transparent; border-top: 7px solid var(--line2); z-index: 2; }
.fn-auto > .fb { border-style: dashed; border-color: var(--line2); background: var(--soft); }
.fn-auto > .fb::before { content: "⚙ "; color: var(--muted); }
.fn-ask > .fb { border-color: var(--amber-edge); background: var(--amber-soft); padding-left: 22px; padding-right: 22px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); border: 0;
  box-shadow: none; }
.fn-ask > .fb { outline: none; }
.fn-end > .fb { border-radius: 999px; border-color: var(--green-line); background: var(--green-soft); color: var(--ink); text-align: center; }
.fyes { position: absolute; left: calc((100% - 176px) / 2 + 8px); bottom: 4px; font-size: 13px; font-weight: 600; color: var(--green); }
.falt { grid-column: 2; position: relative; align-self: center; }
.falt .fb { padding: 8px 10px; border: 1.5px dashed var(--amber-edge); border-radius: 8px; font-size: 14px; line-height: 1.35;
  color: var(--ink2); background: var(--surface); }
.falt::before { content: ""; position: absolute; left: -26px; top: 50%; width: 20px; border-top: 1.5px solid var(--amber-edge); }
.falt::after { content: ""; position: absolute; left: -7px; top: calc(50% - 5px); border-top: 5.5px solid transparent;
  border-bottom: 5.5px solid transparent; border-left: 7px solid var(--amber-edge); }
.fno { position: absolute; left: -24px; top: calc(50% - 20px); font-size: 13px; font-weight: 600; color: var(--amber); }
.fn:not(.fn-ask) { grid-template-columns: minmax(0, 1fr) minmax(0, 150px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gd-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--muted); }
.gd-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg { display: inline-block; width: 18px; height: 12px; border: 1.5px solid var(--blue-line); border-radius: 3px; }
.lg-auto { border-style: dashed; border-color: var(--line2); background: var(--soft); }
.lg-ask { border: 0; background: var(--amber-edge); clip-path: polygon(4px 0, 14px 0, 18px 50%, 14px 100%, 4px 100%, 0 50%); }
.lg-end { border-radius: 999px; border-color: var(--green-line); background: var(--green-soft); }
.gd-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gd-more { margin: 18px 0 0; font-size: 14.5px; }
@media (max-width: 1100px) { .guidebtn .gl { display: none; } .guidebtn { padding: 6px 10px !important; } }
@media (max-width: 520px) {
  .fn, .fn:not(.fn-ask) { grid-template-columns: minmax(0, 1fr); }
  .falt { grid-column: 1; margin-top: 8px; padding-left: 26px; }
  .falt::before { left: 6px; width: 16px; } .falt::after { left: 20px; } .fno { left: 0; top: -18px; }
  .fn:not(:last-child)::after, .fn:not(:last-child)::before, .fyes { left: 50%; }
}
@media (min-width: 1720px) { body.ui2.guide-open .main2 { margin-right: 460px; } body.ui2.guide-open .guide2 { box-shadow: none; } }
.fn-ask > .fb { display: flex; flex-direction: column; justify-content: center; min-height: 52px; }
@media (max-width: 860px) { .jobpill [data-jobpill-t] { display: none; } .jobpill { padding: 4px 9px; } .hact { gap: 8px; } .vline { display: none; } }
body.ui2 .jobmini { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; margin-left: 6px; vertical-align: middle; }
body.ui2 .jobmini .note { min-width: 0; }
/* вход: та же палитра и шрифт заголовков, что в программе */
body.ui2.bare .login2 { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
body.ui2.bare .login { margin: 0; width: min(400px, 100%); padding: 32px 32px 24px; }
body.ui2.bare .login .brand2 { margin: 0 0 4px; padding: 0; font-size: 40px; display: block; }
body.ui2.bare .login .muted { margin: 0 0 18px; }
/* состав фирмы и словарь категорий: метки */
body.ui2 .tagchip { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0; padding: 2px 9px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--neutral-tint); color: var(--ink2);
  font-size: 14px; line-height: 1.5; text-decoration: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body.ui2 a.tagchip:hover { border-color: var(--accent-line); color: var(--ink); }
body.ui2 .tagchip.on { background: var(--accent-tint); border-color: var(--accent-line); color: var(--accent-dk); }
body.ui2 .tagchip.prop { border-style: dashed; border-color: var(--amber-edge); background: transparent; }
body.ui2 .tagchip b { font-weight: 600; color: var(--muted); }
body.ui2 .tagchip .x { border: 0; background: none; padding: 0 0 0 4px; min-height: 0; font-size: 16px; line-height: 1; color: var(--muted); cursor: pointer; }
body.ui2 .tagchip .x:hover { color: var(--bad); }
body.ui2 .facets { display: grid; gap: 6px; margin: 0 0 12px; }
body.ui2 .facet { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; }
body.ui2 .facet > .note { margin-right: 8px; min-width: 140px; }
body.ui2 .lt-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 8px 0 10px; }
body.ui2 .lt-tags .tagadd { display: inline-flex; gap: 6px; align-items: center; }
body.ui2 .lt-tags .tagadd select { max-width: 260px; }
body.ui2 .qitem { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
body.ui2 .qitem:last-of-type { border-bottom: 0; }
body.ui2 .qact { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; justify-content: flex-end; }
body.ui2 .qact select { max-width: 220px; }
@media (max-width: 720px) { body.ui2 .qitem { flex-direction: column; } body.ui2 .qact { justify-content: flex-start; } body.ui2 .facet > .note { min-width: 0; width: 100%; } }
body.ui2 td .tagchip { white-space: normal; text-align: left; }
body.ui2 #fexp td:nth-child(2) { min-width: 170px; }
body.ui2 .fd-name { min-width: 200px; }
/* скрытые подписи (.sr) внутри прокручиваемых таблиц не должны раздвигать страницу */
body.ui2 .tablewrap, body.ui2 .tagchip { position: relative; }
body.ui2 .relform { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
body.ui2 .relform select { max-width: 200px; }
/* шапка на телефоне: кнопка «Кабинеты» руководителя не должна раздвигать страницу */
@media (max-width: 520px) { body.ui2 .hact { gap: 4px; } body.ui2 .hact .guidebtn { padding-left: 8px; padding-right: 8px; } }
body.ui2 .tabs .tabcnt { margin-left: 6px; }
body.ui2 .relform select { min-width: 170px; }

/* «Состав фирмы»: постраничный просмотр разделов (19.10.2026) */
body.ui2 .pager { display: flex; align-items: center; gap: 14px; margin: 8px 0 18px; }
body.ui2 .pager a { font-weight: 500; }