:root { --line:#e3e7ec; --dim:#6b7785; --ok:#137333; --warn:#b26a00; --err:#c5221f; --bg:#f4f6f8; }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:#1c2530; font:15px/1.5 -apple-system,Segoe UI,Roboto,sans-serif }
header { background:#fff; border-bottom:1px solid var(--line); padding:12px 18px;
         display:flex; gap:16px; align-items:center; flex-wrap:wrap }
.brand { font-weight:600; text-decoration:none; color:#1c2530 }
header nav { margin-left:auto; display:flex; gap:14px; align-items:center; flex-wrap:wrap }
header a { color:#1a56b0; text-decoration:none }
.who { color:var(--dim); font-size:13px }
main { max-width:1100px; margin:0 auto; padding:18px }

/* Меню слева: тёмная панель, как в настольных программах - разделы читаются
   сразу, а рабочая часть остаётся светлой и не спорит с ней за внимание. */
body.with-side { display:flex; align-items:stretch; min-height:100vh }
body.with-side main { flex:1; max-width:none; margin:0; padding:22px 28px; min-width:0 }

/* Панель стоит на месте, когда страница листается: разделы, смена пароля и выход
   должны быть под рукой всегда, а не в конце длинного списка. */
.side { width:232px; flex:0 0 232px; padding:16px 12px 14px; display:flex;
        flex-direction:column; gap:12px; color:#dbe3ee;
        background:linear-gradient(180deg,#1f2b3d 0%,#1a2433 100%);
        position:sticky; top:0; height:100vh; overflow-y:auto }

.side .brand { display:flex; align-items:center; gap:10px; padding:4px 8px 10px;
               text-decoration:none; color:#fff }
.brand-mark { display:inline-flex; align-items:center; justify-content:center;
              width:30px; height:30px; border-radius:9px; background:#3f7ddb;
              font-size:12px; font-weight:700; letter-spacing:.5px; flex:0 0 auto }
.brand-text { font-size:13px; line-height:1.25; font-weight:600; color:#eef3fa }

.side nav { display:flex; flex-direction:column; gap:2px }
.side nav a { display:flex; align-items:center; gap:9px; padding:8px 11px; border-radius:9px;
              color:#c2cddc; text-decoration:none; font-size:13.5px; line-height:1.3 }
.side nav a:hover { background:rgba(255,255,255,.08); color:#fff }
.side nav a.current { background:#3f7ddb; color:#fff; font-weight:600;
                      box-shadow:0 1px 4px rgba(0,0,0,.25) }
.side nav a.step span { flex:1; min-width:0 }
.side-group { margin:14px 0 4px; padding:0 12px; font-size:10px; text-transform:uppercase;
              letter-spacing:.8px; color:#7f8ea3 }

/* Состояние шага - спокойная точка справа, без цифр и рамок */
.side .dot { width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:#4a586c }
.side .dot.ready { background:#43c46a }
.side .dot.warn { background:#f0b545 }
.side .dot.empty { background:#4a586c }
.side nav a.current .dot { box-shadow:0 0 0 2px rgba(255,255,255,.25) }

.side-bottom { margin-top:auto; display:flex; flex-direction:column; gap:4px;
               border-top:1px solid rgba(255,255,255,.12); padding-top:10px }
.side-bottom .who { color:#dbe3ee; text-decoration:none; font-size:13px; line-height:1.3;
                    padding:7px 11px; border-radius:9px }
.side-bottom .who:hover { background:rgba(255,255,255,.08) }
.side-bottom .who span { display:block; color:#8493a8; font-size:11.5px }
.side-bottom .exit { color:#ffb4a8; text-decoration:none; font-size:13px; padding:6px 11px;
                     border-radius:9px }
.side-bottom .exit:hover { background:rgba(255,255,255,.08) }

/* На телефоне панель становится компактной полосой сверху */
@media (max-width: 720px) {
  body.with-side { display:block }
  .side { width:auto; flex:none; flex-direction:row; align-items:center; flex-wrap:wrap;
          gap:6px; padding:10px 12px; position:sticky; top:0; height:auto; z-index:20 }
  .side .brand { padding:0 6px 0 0 }
  .brand-text { display:none }
  .side nav { flex-direction:row; flex-wrap:wrap; gap:4px }
  .side nav a { padding:6px 9px }
  .side-group { margin:0; padding:0 4px; align-self:center }
  .side-bottom { margin:0 0 0 auto; flex-direction:row; align-items:center;
                 border-top:none; padding-top:0; gap:8px }
  .side-bottom .who span { display:none }
  body.with-side main { padding:14px }
}

/* Окно просмотра документа поверх страницы */
.doc-window { position:fixed; inset:0; background:rgba(18,24,34,.55); z-index:50;
              display:flex; flex-direction:column; padding:2vh 2vw }
.doc-window[hidden] { display:none }
.doc-window-bar { display:flex; align-items:center; gap:14px; background:#fff;
                  border-radius:10px 10px 0 0; padding:8px 14px }
.doc-window-title { font-weight:600; font-size:14px; flex:1; overflow:hidden;
                    text-overflow:ellipsis; white-space:nowrap }
.doc-window-bar a { color:#1a56b0; text-decoration:none; font-size:13px }
.doc-window-close { border:none; background:#f0f3f8; border-radius:6px; font-size:15px;
                    line-height:1; padding:6px 10px; cursor:pointer }
.doc-window-frame { flex:1; width:100%; border:none; background:#fff;
                    border-radius:0 0 10px 10px }
body.doc-open { overflow:hidden }
h1 { font-size:22px; margin:14px 0 } h2 { font-size:17px; margin:0 0 12px }
.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; margin-bottom:16px }
.card.narrow { max-width:380px; margin:40px auto }
.hint, .dim { color:var(--dim); font-size:13px } .small { font-size:12px }
label { display:block; margin-bottom:10px; font-size:13px; color:var(--dim) }
input, select { display:block; width:100%; padding:8px 10px; border:1px solid var(--line);
                border-radius:7px; font-size:14px; background:#fff; color:#1c2530 }
input[type=file] { padding:6px; font-size:13px }
button { padding:8px 14px; border:1px solid var(--line); border-radius:7px; background:#fff;
         cursor:pointer; font-size:14px } button:hover { background:#f0f3f6 }
button.primary { background:#1a56b0; color:#fff; border-color:#1a56b0 }
button.danger { color:var(--err); border-color:#f0c3c2 }
form.inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 }
form.inline label { margin:0 } .grow { flex:1 }
form.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:0 14px }
.row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; grid-column:1/-1; margin-top:6px }
table.list { width:100%; border-collapse:collapse; background:#fff; margin-bottom:8px }
table.list th { text-align:left; font-size:12px; color:var(--dim); font-weight:600;
                border-bottom:1px solid var(--line); padding:8px 10px }
table.list td { border-bottom:1px solid var(--line); padding:10px; vertical-align:top }
table.acts td { font-size:13px } .nowrap { white-space:nowrap }
.flash { padding:10px 14px; border-radius:8px; margin-bottom:14px; font-size:14px;
         background:#e7f6ec; color:var(--ok) }
.flash.error { background:#fce8e6; color:var(--err) } .flash.warn { background:#fef7e0; color:var(--warn) }
/* Пометки отличаются только цветом: размер шрифта задаёт место, где они стоят. */
.ok-mark { color:var(--ok) } .warn-mark { color:var(--warn) } .miss { color:var(--err) }
.req { color:var(--err); font-size:11px }
.warn-box { border:1px solid #f5dfae; background:#fff9ec; border-radius:8px; padding:10px 14px; margin:12px 0 }
.warn-box summary { cursor:pointer; color:var(--warn); font-size:14px }
.warn-box ul { margin:8px 0 0; padding-left:18px; font-size:13px } .warn-box li { margin-bottom:4px }
ul.files { list-style:none; padding:0; margin:10px 0 0 } ul.files li { padding:4px 0; font-size:14px }
details summary { cursor:pointer; color:#1a56b0 }
@media (max-width:640px){ table.list, table.list tr, table.list td, table.list th { display:block }
  table.list th { display:none } table.list td { border:none; padding:4px 0 }
  table.list tr { border-bottom:1px solid var(--line); padding:10px 0; display:block } }
table.acts-edit td { font-size:13px; vertical-align:top }
table.acts-edit details { margin-top:6px }
.mt { margin-top:6px }
button.small-btn { padding:4px 8px; font-size:12px }

/* полоса шагов внутри объекта */
.work-title { white-space:normal; word-break:break-word }
.merged-list { margin:6px 0 0; padding-left:18px } .merged-list li { margin-bottom:3px }
table.acts-edit td:nth-child(3) { min-width:320px }
.merged-list { list-style:none; margin:6px 0 8px; padding:0 }
.merged-list li { margin-bottom:5px; font-size:13px }
.inline-check { display:flex; gap:8px; align-items:flex-start; margin:0; color:#1c2530; font-size:13px }
.inline-check input { width:auto; margin-top:3px }
.add-volume { display:flex; flex-direction:column; gap:6px; border-style:dashed }
.add-volume input { font-size:13px }
textarea { display:block; width:100%; padding:8px 10px; border:1px solid var(--line);
           border-radius:7px; font-size:13px; font-family:inherit; resize:vertical }

/* Долгая работа: пока идёт скачивание, видно, на каком она шаге */
.work-progress { border-left:4px solid #2f6fed; background:#f4f8ff }
.other-doc { padding:4px 0; border-top:1px solid #eee; gap:8px; align-items:center }

/* Проверка перед сборкой: строки с замечаниями видно сразу */
.row-warn { background:#fff8f0 }
table.preview td { vertical-align:top }
.kind-акт { font-weight:600 }
.kind-схема { color:#388600 }
.kind-материал { color:#4472C4 }
ul.tight { margin:6px 0 0 18px; padding:0 }
ul.tight li { margin:2px 0 }

/* Ссылки-кнопки: скачать архив заготовок */
a.small-btn { display:inline-block; padding:4px 10px; font-size:12px; border:1px solid #cfd6e4;
              border-radius:6px; background:#fff; text-decoration:none; margin-right:6px }
a.small-btn:hover { background:#f4f8ff }

/* Журнал: правка записи прямо в строке дня */
.day-text { align-items:flex-start; gap:6px }
.day-text textarea { width:100%; min-height:38px; font-size:13px }

/* Проверка перед сборкой: сводка и замечания таблицей */
table.summary td { text-align:center; padding:8px 12px; color:#5b6472; font-size:13px }
table.summary td div { font-size:18px; color:#1d2530; margin-top:2px }
table.problems th { text-align:left; background:#fff5e8; color:#8a4b00 }
table.problems td { vertical-align:top; padding:5px 8px }
.row-edit { gap:6px; align-items:center }
.row-edit input.grow { font-size:13px; padding:3px 6px }

/* Кандидаты из магазина: выбор товара одним нажатием */
.candidate { gap:8px; align-items:center; padding:2px 0; border-top:1px solid #f0f2f6 }

/* Журнал: запись дня видна целиком, служебные колонки узкие */
.day-text textarea { width:100%; min-height:44px; font-size:13px; line-height:1.35;
                     resize:vertical; overflow:hidden }

/* Проверка: наименование занимает место, замечание - узкая колонка */
table.problems .col-kind { width:80px }
table.problems .col-note { width:210px }
table.problems td { vertical-align:top }
table.preview .col-page { width:44px }
table.preview .col-num { width:150px }
table.preview .col-org { width:150px }
table.preview .row-title { line-height:1.35 }
.patched { color:#8a4b00 }
.tight-grid { gap:6px 10px; margin-top:6px }
.tight-grid input { font-size:13px; padding:3px 6px }

/* Журнал действий и обратная связь */
table.log .col-when { width:150px }
table.log .col-who { width:110px }
.feedback { margin-top:24px; background:#fbfbfd }
.feedback summary { color:#5b6472; font-size:13px }
.feedback textarea { width:100%; min-height:60px; font-size:13px }

/* Памятка на первой странице */
.start-here summary { font-weight:600 }
.start-here ol.tight { margin:8px 0 0 20px; padding:0 }
.start-here ol.tight li { margin:4px 0 }

/* Галочки не должны растягиваться на всю строку - иначе подпись уезжает от квадратика */
input[type=checkbox], input[type=radio] { width:auto; display:inline-block; margin:0 6px 0 0 }
label.row { display:flex; align-items:center; gap:8px; margin-bottom:10px }
label.row span { color:#1c2530; font-size:14px }


/* Сводка: пары «название: значение» не должны слипаться */
.card.inline .stat + .stat { margin-left:18px }
.card.inline .stat { margin-right:0 }


/* Несколько документов на один материал */
.more-docs { margin-top:8px; border-top:1px solid #eef0f4; padding-top:6px }
.other-doc { padding:6px 0; border-top:1px solid #f4f6f9 }
.other-doc:first-of-type { border-top:none }
button.small-btn.danger { color:#a02020; border-color:#e6c9c9 }

/* Документы материала: одинаковые карточки с одним набором действий */
table.materials .col-material { width:34% }
.paper { padding:8px 0; border-top:1px solid #eef0f4 }
.paper:first-child { border-top:none; padding-top:0 }
.paper-head { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap;
              font-size:15px; line-height:1.35 }
.paper-head span { font-size:inherit }
.paper-head .tag { font-size:11px }
.paper-actions { gap:8px; margin-top:6px; align-items:center }
.paper-actions details.inline summary { cursor:pointer; color:#1a56b0; font-size:12px }
.tag { font-size:11px; color:#5b6472; background:#eef2f8; border-radius:10px; padding:1px 8px }
button.small-btn[disabled] { color:#5b6472; background:#f4f6f9; cursor:default }

/* Аккуратная кнопка выбора файла вместо системного поля */
.add-doc { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.file-pick { position:relative; display:inline-flex; margin:0 }
.file-pick input[type=file] { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer }
.file-pick span { display:inline-block; padding:4px 10px; font-size:12px; border:1px dashed #cfd6e4;
                  border-radius:6px; color:#5b6472; background:#fff }
.file-pick:hover span { border-color:#1a56b0; color:#1a56b0 }

/* Просмотр документа прямо в программе */
.doc-view { width:100%; height:78vh; border:1px solid var(--line); border-radius:8px;
            background:#fff; margin-top:8px }

/* Из какого магазина карточка - видно сразу */
.shop-tag { display:inline-block; margin-right:6px; padding:1px 7px; border-radius:10px;
            background:#eef2f8; color:#5b6472; font-size:11px }

/* Создание объекта: поле и кнопка на одной линии, кнопка не съезжает вверх */
.new-project { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap }
.new-project label { flex:1; min-width:260px; margin:0 }
.new-project button { flex:0 0 auto; height:38px }

/* Плитки шагов и томов: главный экран объекта */
.tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
         gap:12px; margin:10px 0 18px }
.tile { display:block; background:#fff; border:1px solid var(--line); border-left:4px solid #d7dce5;
        border-radius:10px; padding:12px 14px; text-decoration:none; color:#1c2530;
        transition:box-shadow .15s, border-color .15s }
.tile:hover { box-shadow:0 2px 10px rgba(20,30,50,.08); border-color:#c3ccdb }
.tile.ready { border-left-color:#2e9e4b }
.tile.warn { border-left-color:#e0a341 }
.tile.empty { border-left-color:#d7dce5 }
.tile-head { font-weight:600; font-size:15px; display:flex; align-items:center; gap:8px }
.tile-num { display:inline-flex; align-items:center; justify-content:center; width:20px;
            height:20px; border-radius:50%; background:#eef2f8; color:#5b6472; font-size:11px }
.tile.ready .tile-num { background:#e6f5ea; color:#1f7a33 }
.tile.warn .tile-num { background:#fdf1de; color:#8a4b00 }
.tile-hint { color:var(--dim); font-size:13px; margin-top:4px; line-height:1.35 }
.tile-status { font-size:12px; margin-top:6px; color:#5b6472 }
.tile.ready .tile-status { color:#1f7a33 }
.tile.warn .tile-status { color:#8a4b00 }
.add-volume { border-style:dashed; border-left-style:dashed; background:#fbfcfe }
.add-volume input { margin-top:8px }

/* Подсказки объединения однотипных работ */
.hints .hint-row { display: flex; align-items: center; gap: 10px;
                   padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.hints .hint-titles { flex: 1 1 320px; font-size: 14px; }

/* Файл выбран, но ещё не отправлен: это должно быть видно без наведения мышкой */
.file-pick.picked span { border-style:solid; border-color:var(--ok); color:var(--ok);
                         background:#f2f9f4; max-width:260px; overflow:hidden;
                         text-overflow:ellipsis; white-space:nowrap }

/* Меню лесенкой: отступ показывает вложенность, тонкая линия ведёт по ветке */
.side nav a.lvl-1 { padding-left:20px; font-weight:600; color:#e6edf7 }
.side nav a.lvl-2 { padding-left:30px }
.side nav a.lvl-3 { padding-left:42px }
.side nav a.branch { position:relative }
.side nav a.branch::before { content:""; position:absolute; top:0; bottom:0; width:1px;
                             background:rgba(255,255,255,.14) }
.side nav a.lvl-1::before { left:11px }
.side nav a.lvl-2::before { left:21px }
.side nav a.lvl-3::before { left:33px }
.side nav a.current::before { background:rgba(255,255,255,.35) }
@media (max-width: 720px) {
  .side nav a.lvl-1, .side nav a.lvl-2, .side nav a.lvl-3 { padding-left:9px }
  .side nav a.branch::before { display:none }
}

/* Что делать дальше: одна заметная строка вместо угадывания порядка */
.next-move { display:flex; align-items:center; gap:10px; margin:0 0 16px; padding:10px 14px;
             background:#eaf1fb; border:1px solid #cddffa; border-radius:9px; font-size:14px }
.next-move a { color:#14458f; text-decoration:none; font-weight:600 }
.next-move a:hover { text-decoration:underline }
.next-mark { font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#4c6a9c;
             background:#fff; border-radius:20px; padding:2px 9px; flex:0 0 auto }

/* Исходные файлы объекта: компактный список, всегда на виду */
table.list.sources td { padding:6px 10px; vertical-align:middle }
table.list.sources .col-source { width:44%; font-size:13.5px }

/* Журнал работ: место отдано тексту работ, служебные колонки узкие и мелкие.
   Поле с работами растёт под текст (см. journal.js) - листать его не приходится. */
table.journal { table-layout:fixed; font-size:13px }
table.journal td { padding:6px 8px; vertical-align:top }
table.journal th { padding:6px 8px }
table.journal th:nth-child(1), table.journal td:nth-child(1) { width:30px; color:var(--dim) }
table.journal th:nth-child(2), table.journal td:nth-child(2) { width:92px;
    white-space:normal; word-break:normal; font-size:12.5px }
table.journal td:nth-child(2) > div { line-height:1.25; font-size:11px }
table.journal th:nth-child(3), table.journal td:nth-child(3) { width:auto }
table.journal th:nth-child(4), table.journal td:nth-child(4) { width:124px }
table.journal th:nth-child(5), table.journal td:nth-child(5) { width:84px }

table.journal textarea { width:100%; box-sizing:border-box; font-size:12.5px;
    line-height:1.35; padding:5px 7px; resize:vertical; overflow:hidden }
table.journal label.signer { display:flex; margin:0 0 4px 0; gap:5px;
                             align-items:flex-start; flex-wrap:nowrap }
table.journal label.signer input { margin:1px 0 0 0; flex:0 0 auto; transform:scale(.9) }
table.journal label.signer span { font-size:11px; line-height:1.2; color:#1c2530;
                                  word-break:normal; overflow-wrap:anywhere }
table.journal td:nth-child(5) form { width:100% }
table.journal td:nth-child(5) button { width:100%; white-space:normal; line-height:1.2;
                                       font-size:11px; padding:3px 5px }
.save-bar { position:sticky; top:0; z-index:5; background:#fff }

/* Готовые файлы тома: заголовок отделяет их от кнопки сборки */
.files-head { font-size:14px; margin:14px 0 4px; color:#1c2530 }

/* Объём по каждой работе объединённого акта: название слева, поле рядом */
.qty-name { flex:0 0 auto; max-width:340px; overflow:hidden; text-overflow:ellipsis;
            white-space:nowrap }

/* Просмотр листа сметы в мастере разметки: таблица широкая, поэтому прокручивается */
.sheet-look { overflow-x:auto; border:1px solid var(--line); border-radius:8px; background:#fff }
table.sheet { table-layout:auto; margin:0; font-size:11.5px; white-space:nowrap }
table.sheet td, table.sheet th { padding:3px 6px; max-width:220px; overflow:hidden;
                                 text-overflow:ellipsis }
table.sheet tr.row-head { background:#eaf1fb; font-weight:600 }

/* Рабочий путь Excel: краткая сводка, список актов и отдельные правки. */
.button { display:inline-flex; align-items:center; justify-content:center; padding:8px 14px;
  border:1px solid var(--line); border-radius:7px; background:#fff; font-size:14px; text-decoration:none; color:#1a56b0 }
.button.primary { background:#1a56b0; color:#fff; border-color:#1a56b0 }
.button:hover { filter:brightness(.96) }
.workflow { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 20px; font-size:13px }
.workflow a { padding:7px 10px; border-radius:7px; background:#eaf0f8; text-decoration:none }
.workspace-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:8px 0 14px }
.workspace-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px }
.workspace-more { position:relative }
.workspace-more summary { padding:8px 10px }
.workspace-more>div { padding:12px; background:white; border:1px solid var(--line); border-radius:8px; min-width:220px }
.workspace-more form { margin-top:10px }
.action-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; background:#fff; border:1px solid #d2dfed;
  box-shadow:0 3px 12px #18345312; padding:12px; border-radius:9px; position:sticky; top:12px; z-index:12; margin-bottom:16px }
.import-counts { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px }
.import-counts b { font-size:24px; display:block; color:#1a56b0 }
.import-counts span { font-size:13px; color:var(--dim) }
.conflict-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px }
.conflict-options pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; margin:8px 0 }
.table-scroll { overflow:auto }
.text-wrap { white-space:pre-wrap; overflow-wrap:anywhere }
.act-filter { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin:16px 0 }
.act-filter label:first-child { flex:1; min-width:200px }
.act-filter input,.act-filter select { margin:4px 0 0 }
.act-list { display:grid; gap:10px }
.act-card { display:flex; gap:18px; align-items:center; padding:16px; border:1px solid var(--line); border-radius:10px; background:white }
.act-card[hidden] { display:none }
.act-number { font-weight:600; min-width:62px; color:#1a56b0 }
.act-content { flex:1; min-width:0 }
.act-name { display:block; font-weight:600; text-decoration:none; color:#1c2530; overflow-wrap:anywhere; white-space:pre-line; margin-bottom:5px }
.act-name:hover { color:#1a56b0 }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px }
.attachment-card { border:1px solid var(--line); border-radius:8px; padding:14px; margin:12px 0 }
.attachment-card .grid { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) }
.mobile-menu { display:none }
@media(max-width:720px) {
  .side { height:52px; flex-wrap:nowrap; position:sticky; overflow:visible }
  .side .brand-text { display:block; font-size:12px }
  .mobile-menu { display:block; margin-left:auto; background:transparent; color:white; border-color:#57677f }
  .side nav,.side .side-bottom { display:none }
  .side.menu-open { height:auto; flex-wrap:wrap; max-height:85vh; overflow:auto }
  .side.menu-open nav { display:flex; flex-direction:column; flex-basis:100%; gap:2px }
  .side.menu-open .side-bottom { display:flex; flex-basis:100%; flex-direction:column }
  .side.menu-open .brand { align-self:start }
  .action-bar { top:60px; padding:10px; gap:10px }
  .action-bar .dim { flex-basis:100% }
  .act-card { flex-wrap:wrap; gap:8px; padding:12px }
  .act-content { flex-basis:calc(100% - 80px) }
  .act-card>.button { margin-left:70px }
  .workspace-tools .button { flex:1 }
  .workflow { gap:5px; font-size:12px }
  .workflow a { padding:6px 8px }
  .import-counts { grid-template-columns:1fr 1fr }
  .table-scroll table.list { display:table; min-width:600px }
  .table-scroll table.list tr { display:table-row }
  .table-scroll table.list td,.table-scroll table.list th { display:table-cell }
}
@media(max-width:720px) {
  .mobile-menu:hover,.mobile-menu:focus-visible { background:#34445a; color:#fff }
  .workspace-tools { display:grid; grid-template-columns:1fr 1fr; gap:8px }
  .workspace-tools .button { padding:8px; min-height:40px }
  .act-filter { display:grid; grid-template-columns:minmax(0,1fr) 120px; align-items:end; gap:8px }
  .act-filter label:first-child { min-width:0 }
  .act-filter #act-count { grid-column:1/-1 }
}