/* Облік обладнання - веб-інтерфейс.
   Кольори й форма елементів навмисно наближені до додатку контролю
   генераторів (темна тема, панелі з заокругленими кутами, великі кнопки,
   системний шрифт) - той самий "візуальний почерк", але повністю
   локально, без інтернету й без Google Таблиць. */

:root{
  --bg: #f5f5f7;
  --panel: #ffffff;
  --panel-2: #f0f0f3;
  --border: #d8d8dc;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --accent: #007aff;
  --accent-active: #0066d6;
  --accent-2: #34aadc;
  --on: #1fa971;
  --on-dim: #dcf3e8;
  --off: #d6482a;
  --off-dim: #fbe3da;
  --shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px -12px rgba(0,0,0,0.18);
  --radius: 16px;
  --radius-sm: 12px;
}

html[data-theme="dark"]{
  --bg: #14171a;
  --panel: #1d2226;
  --panel-2: #23292e;
  --border: #343c42;
  --text: #eceff1;
  --muted: #8b959c;
  --accent: #0a84ff;
  --accent-active: #3395ff;
  --accent-2: #5ac8fa;
  --on: #34d399;
  --on-dim: #1c3a30;
  --off: #f2603d;
  --off-dim: #3a2620;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -12px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]):not([data-theme="dark"]){
    --bg: #14171a;
    --panel: #1d2226;
    --panel-2: #23292e;
    --border: #343c42;
    --text: #eceff1;
    --muted: #8b959c;
    --accent: #0a84ff;
    --accent-active: #3395ff;
    --accent-2: #5ac8fa;
    --on: #34d399;
    --on-dim: #1c3a30;
    --off: #f2603d;
    --off-dim: #3a2620;
  }
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Tahoma додана одразу після Segoe UI навмисно: на частині Windows-машин
     жирне (bold) накреслення Segoe UI не має повного набору кириличних
     гліфів, і браузер замість наступного шрифту зі списку "згадує" системний
     шрифт за замовчуванням (зазвичай Times New Roman) - жирний текст
     (назви обладнання, заголовки) раптом виглядає зовсім іншим, "не в
     стилі" шрифтом, хоча решта тексту нормального накреслення відображається
     коректно. Tahoma є практично на кожній Windows-машині й має надійну
     жирну кирилицю, тому перехоплює цей випадок ще до того, як дійде до
     системного запасного варіанту. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14.5px;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

.wrap{
  /* Раніше було жорстко 1180px - на широких/великих моніторах це лишало
     багато порожнього місця обабіч, особливо помітно на сторінці
     обладнання (багато фільтрів і стовпців таблиці). Тепер підлаштовується
     під ширину вікна (мінус невеликі поля), з розумною верхньою межею,
     щоб рядки таблиці не розтягувались занадто на дуже широких екранах. */
  max-width: min(1800px, 96vw);
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* ---------- Верхня панель ---------- */
header.topbar{
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 3px solid var(--accent);
}
.topbar-inner{
  max-width: min(1800px, 96vw); margin: 0 auto; padding: 12px 20px;
  display:flex; align-items:center; gap: 14px; flex-wrap: wrap;
}
.brand{ font-weight: 800; font-size: 16.5px; white-space: nowrap; }
.brand .clock{ font-weight: 400; color: var(--muted); font-size: 12.5px; margin-left: 8px; font-variant-numeric: tabular-nums; }
.topbar-nav{ display:flex; gap: 6px; flex-wrap: wrap; flex:1; }
.topbar-nav a, .topbar-nav details summary{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 12px 6px 6px; border-radius: 12px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); cursor: pointer; list-style:none;
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
/* Кожен пункт меню отримує свою кольорову іконку-чіп - той самий прийом,
   що й на плитках категорій (екран вибору категорії), щоб верхня панель
   виглядала однаково з рештою програми. */
.topbar-nav .nav-icon{
  width: 24px; height: 24px; border-radius: 8px; flex: none;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--nav-dot, var(--accent)) 24%, var(--panel));
  font-size: 13px;
}
.topbar-nav a:hover, .topbar-nav details summary:hover{ background: var(--panel-2); color: var(--text); }
.topbar-nav a.active{
  background: var(--nav-dot, var(--accent));
  color: #fff; border-color: var(--nav-dot, var(--accent)); font-weight: 800;
}
.topbar-nav a.active .nav-icon{ background: rgba(255,255,255,.25); }
.topbar-nav details summary::-webkit-details-marker{ display:none; }
.topbar-nav details{ position: relative; }
.dropdown{
  position:absolute; top: calc(100% + 4px); left:0; min-width: 210px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); padding: 6px; z-index: 40;
}
.dropdown a{ display:block; padding: 9px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.dropdown a:hover{ background: var(--panel-2); }
.dropdown hr{ border: none; border-top: 1px solid var(--border); margin: 5px 2px; }
.dropdown form{ margin:0; }
.link-btn{
  display:block; width:100%; text-align:left; padding: 9px 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--off); background: none; border: none;
  font-family: inherit; cursor: pointer;
}
.link-btn:hover{ background: var(--panel-2); }

.topbar-right{ display:flex; align-items:center; gap: 8px; }
.user-chip{ font-size: 13px; color: var(--muted); white-space:nowrap; }
.user-chip b{ color: var(--text); }
.icon-btn{
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color: var(--text); font-size: 15px;
}
.icon-btn:hover{ background: var(--panel-2); }

/* ---------- Загальні елементи ---------- */
.card{
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
.page-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin: 22px 0 16px; flex-wrap:wrap; }
.page-head h1{ font-size: 23px; margin: 0; font-weight: 800; letter-spacing: -0.01em; }
.page-head .sub{ color: var(--muted); font-size: 13px; margin-top: 2px; }

.btn{
  appearance: none; border: 1px solid var(--border); background: var(--panel-2); color: var(--text);
  font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 10px 16px; border-radius: 12px;
  cursor: pointer; display:inline-flex; align-items:center; gap:8px; transition: transform .08s ease, filter .15s ease;
}
.btn:hover{ filter: brightness(0.97); }
html[data-theme="dark"] .btn:hover{ filter: brightness(1.15); }
.btn:active{ transform: scale(0.98); }
.btn.primary{ background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 800; box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--accent) 65%, transparent); }
.btn.success{ background: var(--on); border-color: var(--on); color: #04231a; }
.btn.danger{ background: var(--off); border-color: var(--off); color: #2a0f05; }
.btn.ghost{ background: transparent; border-color: transparent; color: var(--muted); }
.btn.ghost:hover{ background: var(--panel-2); color: var(--text); }
.btn.small{ padding: 7px 11px; font-size: 12.5px; border-radius: 9px; }
.btn:disabled{ opacity: .45; cursor: default; }
.btn-row{ display:flex; gap: 10px; flex-wrap: wrap; }

label{ font-size: 12px; color: var(--muted); font-weight: 600; display:block; margin-bottom: 6px; }
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=search], select, textarea{
  width: 100%; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  font-family: inherit; font-size: 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  appearance: none; -webkit-appearance:none;
}
select{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b959c' stroke-width='2.4' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position: right 12px center; background-size: 13px; padding-right: 34px; }
textarea{ resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus{ outline: 2px solid var(--accent); outline-offset: 1px; }
input[type=checkbox]{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; flex:none;
  border-radius:5px; border:1px solid var(--border); background: var(--panel-2);
  cursor:pointer; position:relative; margin:0; vertical-align:middle;
  transition: background .12s, border-color .12s;
}
input[type=checkbox]:checked{ background: var(--accent); border-color: var(--accent); }
input[type=checkbox]:checked::after{
  content:""; position:absolute; left:5px; top:1px; width:5px; height:9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
input[type=checkbox]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.field{ margin-bottom: 14px; }
.field-row{ display:flex; gap:8px; align-items:flex-end; }
.field-row .field{ flex:1; margin-bottom:0; }
.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.hint{ color: var(--muted); font-size: 12px; margin-top: 4px; }

.badge{ display:inline-flex; align-items:center; gap:6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.badge .dot{ width:7px; height:7px; border-radius:50%; background: currentColor; }
.badge.archived{ background: var(--panel-2); color: var(--muted); }
/* Наступне ТО/повірка - прострочено (червоний, як off) чи скоро (жовтогарячий,
   окремий колір - не хочемо плутати з "off"/danger, це лише нагадування). */
.badge.mst-overdue{ background: var(--off); color: #fff; }
.badge.mst-soon{ background: #e0a458; color: #1d1d1f; }

.flash{ padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: 13.5px; font-weight: 600; }
.flash.ok{ background: var(--on-dim); color: var(--on); }
.flash.error{ background: var(--off-dim); color: var(--off); }
/* "Увага, перевірте" (наприклад, збіг серійного номера, чи що хтось
   інший саме зараз редагує цю картку) - НЕ те саме, що "error" (нічого
   не збереглось): дію виконано, просто варто перевірити. Той самий
   жовтогарячий, що й badge.mst-soon, щоб не плодити нових кольорів. */
.flash.warn{ background: color-mix(in srgb, #e0a458 20%, var(--panel-2)); color: #e0a458; }

/* ---------- Екран вибору категорії ---------- */
/* Центруємо весь блок (заголовок + плитки) по висоті вільного простору під
   шапкою - раніше він тулився вгорі, а знизу лишалась порожня "яма",
   особливо помітно, коли категорій мало. 100dvh мінус приблизна висота
   шапки + її власні відступи (не потрібна точна цифра - трохи більше чи
   менше просто трохи зсуває блок, це не критично). */
.picker-page{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height: calc(100dvh - 160px);
  text-align:center;
}
.picker-hero{ margin: 0 0 28px; }
.picker-hero h1{ font-size: 26px; margin: 0 0 6px; font-weight: 700; }
.picker-hero .sub{ color: var(--muted); font-size: 14px; }
.picker-grid{
  /* auto-fit (не auto-fill!) - з auto-fill порожні "невидимі" колонки все
     одно займали місце, тому декілька плиток тулились ліворуч, а праворуч
     лишалась порожнеча. auto-fit прибирає порожні колонки, а
     justify-content центрує те, що лишилось. */
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
  justify-content:center;
  gap: 16px; max-width: 900px; margin: 0 auto;
}
.tile{
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 18px; text-align:left; box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  display:flex; flex-direction:column; gap: 16px; min-height: 116px;
}
.tile:hover{ transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 26px -10px rgba(0,0,0,.35); }
.tile .tile-top{ display:flex; align-items:center; gap: 12px; }
.tile .tile-icon{
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--dot, var(--accent)) 22%, var(--panel));
  font-size: 17px;
}
.tile .tile-name{ font-weight: 700; font-size: 14.5px; }
.tile .tile-count{ color: var(--muted); font-size: 12.5px; }
.tile.all{ border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }

/* ---------- Дашборд ---------- */
.dash-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin: 22px 0;
}
.dash-stat{ text-align:center; border-left: 4px solid var(--accent); border-radius: var(--radius); }
.dash-stat-num{ font-size: 33px; font-weight: 900; line-height:1.2; }
.dash-stat-label{
  color: var(--muted); font-size: 12.5px; margin-top: 6px;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.dash-cols{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items:start; }
@media (max-width: 900px){ .dash-cols{ grid-template-columns: 1fr; } }

/* ---------- Панель фільтрів ---------- */
.filter-card{ display:flex; flex-wrap:wrap; gap: 10px; align-items:flex-end; margin-bottom: 16px; }
.filter-card .field{ margin-bottom:0; min-width: 140px; }
.filter-card .field.search{ flex: 1 1 220px; }
.filter-card .check-field{ display:flex; align-items:center; gap:8px; padding-bottom: 10px; }
.filter-card .check-field label{ margin:0; }
/* Решта фільтрів (крім Пошуку), схована за кнопкою "Фільтри" - щоб не
   займати багато місця, коли активних фільтрів нема (див. initFilterToggle
   в app.js та extra_filters_count у webapp.py). */
#toggleFiltersBtn{ margin-bottom: 0; }
#toggleFiltersBtn.active{ background: var(--accent); color:#fff; border-color: var(--accent); }
.filter-extra{
  display:flex; flex-wrap:wrap; gap: 10px; align-items:flex-end;
  flex-basis: 100%; width: 100%;
  margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.filter-extra[hidden]{ display:none; }

/* ---------- Таблиця обладнання ---------- */
.table-card{ padding: 0; overflow-x: auto; }
.table-toolbar{ display:flex; justify-content:flex-end; padding: 10px 14px; border-bottom: 1px solid var(--border); }
table.eq-table{ width:100%; border-collapse: collapse; }
/* Стовпці додаткових полів (можуть бути дуже багатьма - усе, що прив'язане
   до категорії "Ліма Генератор" тощо) за замовчуванням сховані - лишаємо
   на екрані лише основні, вбудовані стовпці, щоб таблиця не розповзалась.
   Кнопка "Показати повну інформацію" (app.js, initExtraColumns) додає
   таблиці клас show-extra. */
table.eq-table .cf-col{ display:none; }
table.eq-table.show-extra .cf-col{ display: table-cell; }
table.eq-table th{
  text-align:left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: var(--panel-2);
}
table.eq-table th a{ color: inherit; }
table.eq-table td{ padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; vertical-align: middle; }
table.eq-table th.num, table.eq-table td.num{ width: 40px; text-align:center; color: var(--muted); }
table.eq-table tbody tr:last-child td{ border-bottom: none; }
table.eq-table tbody tr:hover{ background: var(--panel-2); }
table.eq-table tbody tr.archived-row{ opacity: .55; }
/* Тонка кольорова смужка зліва рядка за категорією обладнання (--dot
   проставляється на <tr> тим самим category_color(), що й плитки на
   екрані категорій/дашборді) - щоб у змішаному списку з кількох категорій
   було легше групувати рядки очима, не читаючи щоразу стовпець
   "Категорія". Прозора, якщо в обладнання категорія не вказана. */
table.eq-table td.num{ box-shadow: inset 5px 0 0 0 var(--dot, transparent); }
.eq-name{ font-weight: 700; }
.eq-name-wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.row-actions{ display:flex; gap: 6px; justify-content:flex-end; }
.empty-state{ padding: 46px 20px; text-align:center; color: var(--muted); }

/* ---------- Форма обладнання ---------- */
.form-card{ max-width: 720px; }
.form-section-title{ font-size: 12.5px; text-transform: uppercase; letter-spacing:.03em; color: var(--muted); font-weight:700; margin: 22px 0 10px; }
.form-section-title:first-child{ margin-top: 0; }
.ref-with-add{ display:flex; gap:6px; }
.ref-with-add select{ flex:1; }
.ref-with-add .btn{ flex:none; width: 38px; padding:0; justify-content:center; }

/* ---------- Історія ---------- */
.history-list{ list-style:none; margin:0; padding:0; }
.history-list li{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.history-list li:last-child{ border-bottom:none; }
.history-list .tag{ display:flex; align-items:center; gap:10px; min-width:0; }
.history-list .tag .dot{ width:8px; height:8px; border-radius:50%; background: var(--muted); flex:none; }
.history-list .tag .txt{ display:flex; flex-direction:column; min-width:0; }
.history-list .tag .eq-link{ font-size: 12px; color: var(--muted); }
.history-list .time{ color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12.5px; text-align:right; flex:none; white-space:nowrap; }
.history-list .field-diff{ color: var(--muted); }
.history-list .field-diff b{ color: var(--text); }

/* ---------- Плитки-картки для довідників/користувачів ---------- */
.ref-list{ list-style:none; margin:0; padding:0; }
.ref-list li{ display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.ref-list li:last-child{ border-bottom:none; }
.ref-list .name{ font-weight: 600; font-size: 13.5px; display:flex; align-items:center; gap:8px; }
.ref-list .count{ color: var(--muted); font-size: 12px; font-weight: 400; }
.swatch{ width: 12px; height:12px; border-radius:50%; flex:none; }

.tabs{ display:flex; gap: 6px; margin-bottom: 16px; flex-wrap:wrap; }
.tabs a{ padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--panel-2); border: 1px solid var(--border); }
.tabs a.active{ background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Вхід / bootstrap ---------- */
.auth-wrap{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 24px; }
.auth-card{ width: 100%; max-width: 380px; background: var(--panel); border: 1px solid var(--border); border-radius: 20px; padding: 30px 26px; box-shadow: var(--shadow); }
.auth-card h1{ font-size: 20px; text-align:center; margin: 0 0 4px; }
.auth-card .sub{ text-align:center; color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.auth-card .btn{ width: 100%; justify-content:center; padding: 13px; font-size: 14.5px; }
.auth-footer{ display:flex; justify-content:space-between; align-items:center; margin-top: 18px; }
.auth-footer .version{ color: var(--border); font-size: 10.5px; }
.theme-switch{ display:flex; align-items:center; gap:7px; font-size: 12.5px; color: var(--muted); cursor:pointer; user-select:none; }

/* ---------- Bottom-sheet підтвердження ---------- */
.confirm-overlay{
  position: fixed; inset:0; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px);
  display:flex; align-items:flex-end; justify-content:center; z-index: 200;
  opacity:0; pointer-events:none; transition: opacity .2s ease;
}
.confirm-overlay.show{ opacity:1; pointer-events:auto; }
.confirm-sheet{
  width:100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 20px 20px 0 0; padding: 20px 20px 28px; transform: translateY(16px); transition: transform .25s ease;
}
@media (min-width: 640px){
  .confirm-overlay{ align-items:center; }
  .confirm-sheet{ border-radius: 20px; transform: translateY(8px); }
}
.confirm-overlay.show .confirm-sheet{ transform: translateY(0); }
.confirm-sheet .grabber{ width:36px; height:4px; border-radius:2px; background: var(--border); margin: 0 auto 16px; }
.confirm-sheet .q-title{ font-size: 16px; font-weight:700; text-align:center; margin-bottom: 6px; }
.confirm-sheet .q-detail{ font-size: 13.5px; color: var(--muted); text-align:center; line-height:1.5; margin-bottom: 20px; }
.confirm-actions{ display:flex; flex-direction:column; gap: 10px; }

/* ---------- Прив'язка ---------- */
.footer-note{ text-align:center; color: var(--muted); font-size: 11.5px; margin: 30px 0 10px; }

/* ---------- Вкладення (фото/документи) ---------- */
.attach-upload{ display:flex; gap:8px; align-items:center; margin-bottom: 14px; flex-wrap:wrap; }
.attach-upload input[type=file]{
  flex:1; min-width:180px; background: var(--panel-2); border:1px solid var(--border);
  border-radius: var(--radius-sm); padding:8px; font-size:12.5px; color: var(--text);
}
.attach-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.attach-item{
  border:1px solid var(--border); border-radius: var(--radius-sm); padding:10px;
  display:flex; flex-direction:column; gap:8px; background: var(--panel-2);
}
.attach-thumb{
  display:flex; align-items:center; justify-content:center; height:90px;
  border-radius:8px; overflow:hidden; background: var(--panel);
}
.attach-thumb img{ width:100%; height:100%; object-fit:cover; }
.attach-thumb.attach-file{ font-size:34px; }
.attach-meta{ min-width:0; }
.attach-name{
  display:block; font-size:12.5px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.attach-sub{ font-size:11px; color: var(--muted); }
.attach-item form{ margin:0; }

/* ---------- Картка обладнання "одним поглядом" (👁 у списку) ---------- */
.view-sheet{ max-width: 820px; margin: 0 auto; }

/* ---------- Акт приймання-передачі ---------- */
.act-sheet{ max-width: 720px; margin: 0 auto; }
.act-title{ font-size: 18px; font-weight: 800; text-align:center; margin-bottom: 4px; }
.act-date{ text-align:center; color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.act-table{ width:100%; border-collapse: collapse; margin-bottom: 22px; }
.act-table th, .act-table td{ padding: 9px 12px; border: 1px solid var(--border); font-size: 13.5px; text-align:left; }
.act-table th{ width: 42%; background: var(--panel-2); font-weight: 600; }
.act-note{ font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 28px; }
.act-signatures{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.act-sign-block{ font-size: 13.5px; }
.act-sign-label{ font-weight: 700; margin-bottom: 16px; }
.act-sign-line{ margin-bottom: 24px; }
@media (max-width: 520px){ .act-signatures{ grid-template-columns: 1fr; } }

/* ---------- Бланк звірки наявності ---------- */
.audit-sheet{ max-width: 980px; }
.col-toggle-row{ display:flex; flex-wrap:wrap; gap: 8px 18px; }
.col-toggle{ display:flex; align-items:center; gap:6px; font-size:13px; cursor:pointer; user-select:none; }
.audit-meta{ display:flex; gap: 24px; flex-wrap:wrap; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.audit-table{ width:100%; border-collapse: collapse; margin-bottom: 14px; }
.audit-table th, .audit-table td{ padding: 8px 10px; border: 1px solid var(--border); font-size: 13px; text-align:left; }
.audit-table th{ background: var(--panel-2); font-weight:700; font-size: 11.5px; text-transform:uppercase; letter-spacing:.02em; color: var(--muted); }
.audit-table th.num, .audit-table td.num{ width: 34px; text-align:center; }
.audit-table th.audit-check-col, .audit-table td.audit-check-col{ width: 110px; white-space:nowrap; }

/* ---------- Звіт для керівництва ---------- */
.report-sheet{ max-width: 900px; margin: 0 auto; }
.report-meta{ display:flex; gap: 24px; flex-wrap:wrap; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.report-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
@media (max-width: 720px){ .report-grid{ grid-template-columns: 1fr; } }
.report-block{ background: var(--panel-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; }
.report-bar-row{ display:flex; align-items:center; gap:10px; padding: 6px 0; }
.report-bar-name{ flex: 0 0 42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 13px; }
.report-bar-track{ flex:1; height:8px; background: var(--panel); border-radius:4px; overflow:hidden; }
.report-bar-fill{ display:block; height:100%; background: var(--accent); border-radius:4px; }
.report-bar-n{ flex: 0 0 30px; text-align:right; font-weight:700; font-size: 13px; }
/* Кольорове маркування за рівнем (наразі - шкала заповнення основних
   даних на дашборді): менше 60% - погано (той самий "off", що й
   прострочене ТО), 60-89% - помітно, але не критично (той самий
   жовтогарячий, що й "скоро" ТО), 90%+ - добре. Той самий принцип
   кольорового сигналу, що вже є для дат ТО - навмисно ті самі кольори. */
.report-bar-fill.sev-bad{ background: var(--off); }
.report-bar-n.sev-bad{ color: var(--off); }
.report-bar-fill.sev-mid{ background: #e0a458; }
.report-bar-n.sev-mid{ color: #e0a458; }
.report-bar-fill.sev-good{ background: var(--on); }
.report-bar-n.sev-good{ color: var(--on); }

/* ---------- Позначка "хто зараз редагує цю картку" ---------- */
.badge.editing-badge{ background: color-mix(in srgb, var(--accent) 18%, var(--panel-2)); color: var(--accent); font-size: 11px; padding: 2px 8px; white-space: nowrap; }

/* ---------- Друк (напр. акт приймання-передачі) ---------- */
@media print{
  /* Друк завжди на білому папері й чорним текстом - незалежно від того,
     темна чи світла тема була обрана на екрані (інакше, наприклад, акт чи
     бланк звірки, роздрукований у темній темі, вийшов би ледь читаним:
     світлий текст на білому аркуші). */
  header.topbar, .no-print, .flash{ display:none !important; }
  html, body{ background:#fff !important; color:#000 !important; }
  .card{ box-shadow:none; border-color:#999; background:#fff !important; color:#000 !important; }
  .act-table th, .act-table td, .audit-table th, .audit-table td{ border-color:#999 !important; color:#000 !important; }
  .act-table th, .audit-table th{ background:#eee !important; }
  .act-note, .act-date, .audit-meta, .report-meta{ color:#333 !important; }
  .wrap{ max-width:100%; padding:0; }
  .report-block{ background:#fff !important; border-color:#999 !important; }
  .report-bar-track{ background:#eee !important; }
  .report-bar-fill{ background:#666 !important; }
}

@media (max-width: 720px){
  .grid-2{ grid-template-columns: 1fr; }
  table.eq-table thead{ display:none; }
  table.eq-table, table.eq-table tbody, table.eq-table tr, table.eq-table td{ display:block; width:100%; }
  /* На вузькому екрані рядок стає цілою "карткою" - тому й кольорову
     смужку категорії переносимо з тонкого стовпця "№" на ліву межу всієї
     картки (замість box-shadow на td.num, який тут уже не має сенсу). */
  table.eq-table tr{ padding: 10px 14px; border-bottom: 1px solid var(--border); border-left: 3px solid var(--dot, transparent); }
  table.eq-table td{ border-bottom:none; padding: 3px 0; }
  table.eq-table td.num{ box-shadow:none; }
  table.eq-table td:empty{ display:none; }
  table.eq-table td[data-label]:not(:empty)::before{
    content: attr(data-label) ": "; color: var(--muted); font-weight: 600;
  }
  table.eq-table.show-extra .cf-col{ display:block; }
  table.eq-table td.num{ width:100%; text-align:left; }
  .row-actions{ justify-content:flex-start; margin-top: 8px; }
}

/* ---------- Ефект дзеркала (скло) - Варіант D+ ---------- */
.card, .tile, .dash-stat{
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-color: color-mix(in srgb, var(--text) 14%, var(--border));
}
.card::before, .tile::before, .dash-stat::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0) 68%,
    rgba(255,255,255,.07) 100%);
  pointer-events:none;
}
/* .dropdown НЕ додаємо у групу вище: там навмисно position:absolute
   (спливаюче меню під "Довідники" тощо), і якби ми задали йому ще раз
   position:relative разом із рештою скляних елементів, воно випало б із
   потоку абсолютного позиціювання і "розповзалось" по сторінці замість
   акуратного спливання під кнопкою - саме цей регрес і стався у 2.32.0.
   Тому для дропдауна - окреме, "безпечне" скляне оформлення: тільки фон/
   розмиття/рамка, без зміни position чи overflow. */
.dropdown{
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-color: color-mix(in srgb, var(--text) 14%, var(--border));
}
/* border-left "смужка категорії" (Варіант D) має лишитись поверх скляної
   рамки - оголошуємо ще раз після загального .card border-color вище. */
.dash-stat{ border-left: 4px solid var(--accent); }
table.eq-table td.num{ box-shadow: inset 5px 0 0 0 var(--dot, transparent); }

/* Таблицю лишаємо без скла - там і так багато дрібного тексту, зайва
   прозорість/розмиття лише заважали б читати дані; лише сама картка-обгортка
   (.table-card) отримує легкий скляний бордер, без розмиття. */
.table-card{
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

header.topbar{
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
}

/* Глянцева кнопка - класичний "дзеркальний" акцент: світла смуга зверху,
   немов відблиск на скляній/лакованій поверхні. */
.btn.primary{
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white 18%), var(--accent) 60%);
}
.btn.primary::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:55%;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0));
  pointer-events:none;
}

/* Активна вкладка меню (суцільна заливка кольором - Варіант D) - додаємо
   такий самий відблиск зверху. */
.topbar-nav a.active{ position: relative; overflow: hidden; }
.topbar-nav a.active::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:60%;
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
  pointer-events:none; border-radius: 12px 12px 0 0;
}

/* ---------- Дзеркало v2 - додаткові штрихи ---------- */

/* Тонкий "скляний" скролбар замість системного - в тон решті інтерфейсу. */
::-webkit-scrollbar{ width: 11px; height: 11px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 8px; border: 3px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--accent) 55%, transparent); background-clip: content-box;
}

/* Кнопка та активна вкладка отримують легке кольорове підсвічення знизу -
   ніби скло підсвічене акцентним кольором ізсередини - плюс "відблиск",
   що пробігає по кнопці при наведенні (типовий прийом для скляних/лакованих
   поверхонь). */
.btn.primary{
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--accent) 65%, transparent),
              inset 0 1px 0 rgba(255,255,255,.2);
}
.btn.primary::after{
  content:"";
  position:absolute; top:0; left:-60%; width:35%; height:100%;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn.primary:hover::after{ left: 130%; }

.topbar-nav a.active{
  box-shadow: 0 4px 14px -6px color-mix(in srgb, var(--nav-dot, var(--accent)) 70%, transparent);
}

/* Іконки-чіпи (меню, плитки категорій) - легкий випуклий блиск зверху,
   щоб виглядали як маленькі скляні кульки, а не плоскі квадратики. */
.topbar-nav .nav-icon, .tile .tile-icon{
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.12);
}
.topbar-nav .nav-icon::before, .tile .tile-icon::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

/* Значки статусу/нагадувань ("Прострочено", "Скоро") - той самий глянець
   зверху, що й у кнопок/вкладок, для єдності стилю. */
.badge{ position: relative; overflow: hidden; }
.badge::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:55%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  pointer-events:none;
}

/* Фокус на полях введення - кольорове "скляне" світіння замість плаского
   системного контуру. */
input[type=text]:focus, input[type=password]:focus, input[type=number]:focus,
input[type=date]:focus, input[type=search]:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Прогрес-бар заповненості даних (дашборд і звіт для керівництва) - теж
   скляний, з відблиском поверх кольорової заливки. */
.report-bar-fill{ position: relative; overflow: hidden; }
.report-bar-fill::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  pointer-events:none;
}

/* ---------- Дзеркало v3 - ще кілька штрihiв ---------- */

/* Анімація появи карток при завантаженні сторінки - плавний підйом +
   прояснення, зі невеликим "каскадом" по черзі елементів у сітці. */
@keyframes cardRise{
  from{ opacity:0; transform: translateY(10px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
.card, .tile{
  animation: cardRise .45s cubic-bezier(.2,.8,.2,1) both;
}
.dash-grid > .card:nth-child(1){ animation-delay: .00s; }
.dash-grid > .card:nth-child(2){ animation-delay: .04s; }
.dash-grid > .card:nth-child(3){ animation-delay: .08s; }
.dash-grid > .card:nth-child(4){ animation-delay: .12s; }
.dash-grid > .card:nth-child(5){ animation-delay: .16s; }
.dash-grid > .card:nth-child(6){ animation-delay: .20s; }
.dash-grid > .card:nth-child(7){ animation-delay: .24s; }
.dash-grid > .card:nth-child(8){ animation-delay: .28s; }
.picker-grid > .tile:nth-child(1){ animation-delay: .00s; }
.picker-grid > .tile:nth-child(2){ animation-delay: .04s; }
.picker-grid > .tile:nth-child(3){ animation-delay: .08s; }
.picker-grid > .tile:nth-child(4){ animation-delay: .12s; }
.picker-grid > .tile:nth-child(5){ animation-delay: .16s; }
.picker-grid > .tile:nth-child(6){ animation-delay: .20s; }
.picker-grid > .tile:nth-child(7){ animation-delay: .24s; }
.picker-grid > .tile:nth-child(8){ animation-delay: .28s; }
.picker-grid > .tile:nth-child(9){ animation-delay: .32s; }
@media (prefers-reduced-motion: reduce){
  .card, .tile{ animation: none; }
}

/* Кольорова тінь-підсвітка під карткою/плиткою у колір її категорії/статусу
   (--dot, той самий, що й для смужки в таблиці обладнання) - ніби скло
   лежить на кольоровій поверхні й кидає м'яке кольорове світіння знизу.
   Там, де --dot не заданий, підсвітка просто не з'являється (transparent). */
.dash-stat, .tile{
  box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--dot, transparent) 65%, transparent);
}
.dash-stat{ border-left-color: var(--dot, var(--accent)); }

/* ---------- Скляна bottom-sheet підтвердження ---------- */
.confirm-overlay{
  background: rgba(10,12,14,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.confirm-sheet{
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-color: color-mix(in srgb, var(--text) 14%, var(--border));
  box-shadow: 0 -12px 40px -12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.confirm-sheet::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 40%);
  pointer-events:none;
}

/* ---------- Дзеркало v4 - ще два штрихи ---------- */

/* Рядки таблиці підсвічуються при наведенні кольором своєї категорії
   (--dot, той самий, що й для смужки зліва), а не нейтральним сірим. */
table.eq-table tbody tr:hover{
  background: color-mix(in srgb, var(--dot, var(--accent)) 12%, var(--panel-2));
}

/* Кольоровий аватар-чіп користувача в шапці - перша літера імені на
   градієнтному тлі замість емодзі-силуету, з тим самим глянцем, що й
   решта елементів. */
.avatar-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  font-size: 11px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  vertical-align: middle; margin-right: 3px; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.12);
}
.avatar-chip::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,0) 55%);
  pointer-events:none;
}

/* =========================================================================
   "Повітряне скло" (у дусі iOS 27, Apple, вересень 2026) - легше й
   прозоріше перевтілення "скляного" стилю вище: менше заливки, менше тіні,
   тонша рамка. Ці правила йдуть останніми навмисно - вони перекривають
   лише background/backdrop-filter/border/box-shadow з блоків "Дзеркало"
   вище (наприклад, .card, .tile, .dash-stat), а не всі їхні властивості,
   тож border-radius, padding, position тощо там і лишаються "живими".

   ВАЖЛИВО: .table-card і .filter-card (обгортка таблиці обладнання й панель
   фільтрів/пошуку над нею) свідомо НЕ входять у цей "повітряний" список.
   Це великі панелі, майже повністю заповнені суцільними непрозорими полями
   (input/select на var(--panel-2), див. вище) - якщо зробити саму картку
   навколо них такою ж прозорою й малоконтрастною, як маленькі плитки
   дашборду, то на реальних даних (багато рядків/фільтрів, майже нема
   "цікавого" фону, який мало б просвічувати) це виглядає не як скло, а як
   суцільна сіра пляма без чітких меж - саме так це й побачив користувач на
   162 реальних записах. Тому .table-card лишає собі окреме, більш непрозоре
   й контрастне оформлення (нижче), а .filter-card - трохи прозоріше за
   .table-card, але теж набагато контрастніше за "повітряні" плитки. */
.card, .tile, .dash-stat{
  background: color-mix(in srgb, var(--panel) 28%, transparent);
  backdrop-filter: blur(34px) saturate(140%);
  -webkit-backdrop-filter: blur(34px) saturate(140%);
  border-width: 1px;
  border-color: color-mix(in srgb, var(--text) 14%, var(--border));
  box-shadow: 0 6px 14px -12px color-mix(in srgb, black 30%, transparent);
}
.card::before, .tile::before, .dash-stat::before{
  background: linear-gradient(135deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 40%);
}
.table-card{
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-width: 1px;
  border-color: color-mix(in srgb, var(--text) 16%, var(--border));
}
.filter-card{
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-width: 1px;
  border-color: color-mix(in srgb, var(--text) 18%, var(--border));
}
.filter-card::before{
  background: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 35%);
}
header.topbar{
  background: color-mix(in srgb, var(--bg) 30%, transparent);
  backdrop-filter: blur(36px) saturate(160%);
  -webkit-backdrop-filter: blur(36px) saturate(160%);
  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, var(--border));
}
/* .dropdown - як і в блоці вище, свідомо чіпаємо лише background/
   backdrop-filter/border-width, а не position чи overflow (див. коментар
   біля первинного .dropdown{ position:absolute; ... } на початку файлу) -
   саме заради цього дропдаун і далі спливає коректно під кнопкою. */
.dropdown{
  background: color-mix(in srgb, var(--panel) 42%, transparent);
  backdrop-filter: blur(34px) saturate(140%);
  -webkit-backdrop-filter: blur(34px) saturate(140%);
  border-width: 1px;
}

/* =========================================================================
   ПРЕВ'Ю: "Більше мінімалізму" - прибираємо частину декоративних штрихів,
   накопичених у попередніх раундах (глянець/відблиски, кольорове підсвічення
   знизу, "випуклі" іконки, товсті кольорові смужки), лишаючи саму ідею
   прозорого "повітряного скла". Мета - менше візуального шуму, більше
   спокійного, рівного вигляду. НЕ для продакшену, лише приклад.
   ========================================================================= */

/* Без діагонального "відблиску" на картках/плитках - лишається тільки
   прозоре скло, без ефекту "світла на склі". */
.card::before, .tile::before, .dash-stat::before, .filter-card::before{
  display:none;
}

/* Без кольорового світіння знизу під плитками дашборду/категорій. */
.dash-stat, .tile{ box-shadow: none; }

/* Тонша кольорова смужка категорії/статусу замість товстої - ледь помітний
   акцент, а не яскрава плашка. */
.dash-stat{ border-left-width: 2px; }
table.eq-table td.num{ box-shadow: inset 2px 0 0 0 var(--dot, transparent); }

/* Кнопки - рівна заливка без глянцевої смуги зверху й без "пробіжки" світла
   при наведенні. */
.btn.primary{ background: var(--accent); box-shadow: none; }
.btn.primary::before, .btn.primary::after{ display:none; }

/* Активна вкладка меню - без відблиску зверху, лишається тільки заливка. */
.topbar-nav a.active::before{ display:none; }
.topbar-nav a.active{ box-shadow: none; }

/* Іконки-чіпи - пласкі, без випуклого "скляного" глянцю. */
.topbar-nav .nav-icon::before, .tile .tile-icon::before{ display:none; }
.topbar-nav .nav-icon, .tile .tile-icon{ box-shadow:none; }

/* Значки статусу - без глянцевої смуги зверху. */
.badge::before{ display:none; }

/* Аватар користувача - суцільний колір замість градієнта й відблиску. */
.avatar-chip{ background: var(--accent); box-shadow:none; }
.avatar-chip::before{ display:none; }

/* Спливаюче підтвердження дії - без відблиску, лишається тільки скло. */
.confirm-sheet::before{ display:none; }

/* =========================================================================
   ПРЕВ'Ю: "Мінімальне дзеркало" - до попереднього "більше мінімалізму"
   повертаємо лише натяк на скло: тонку світлу смужку зверху картки (як
   відблиск на верхньому краю скла), набагато стриманішу за початковий
   діагональний "глянець". Решта мінімалістичних правок (тонша смужка
   категорії, пласкі кнопки/іконки/аватар, без кольорового світіння)
   лишаються без змін. НЕ для продакшену, лише приклад. */
.card::before, .tile::before, .dash-stat::before, .filter-card::before{
  display:block;
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}

/* Кнопка - теж лише тонка світла риска зверху замість повної глянцевої
   смуги/пробіжки світла. */
.btn.primary{ position:relative; overflow:hidden; }
.btn.primary::before{
  display:block;
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background: rgba(255,255,255,.55);
  pointer-events:none;
}

/* =========================================================================
   ПРЕВ'Ю: "Мінімалізм+" - чотири додаткові штрихи поверх "мінімального
   дзеркала": легша типографіка заголовків, приглушені кольори статусів,
   більше повітря між елементами, тонший скролбар. НЕ для продакшену,
   лише приклад. */

/* 1) Легша типографіка заголовків - великі цифри й заголовки сторінок
   менш "жирні", витонченіший шрифтовий контраст. */
.dash-stat-num{ font-weight: 600; }
.page-head h1{ font-weight: 600; }
.picker-hero h1{ font-weight: 600; }
.brand{ font-weight: 600; }
.topbar-nav a.active{ font-weight: 600; }
.act-title{ font-weight: 600; }

/* 2) Приглушені кольори статусів - бейджі й кольорові смужки/акценти
   категорій/статусів (--dot) стають тихішими, менш яскравими. */
.badge{ filter: saturate(.55); }
table.eq-table tr{ border-left-color: color-mix(in srgb, var(--dot, transparent) 55%, var(--muted) 45%); }
table.eq-table td.num{ box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--dot, transparent) 55%, var(--muted) 45%); }
.dash-stat{ border-left-color: color-mix(in srgb, var(--dot, var(--accent)) 55%, var(--muted) 45%); }
table.eq-table tbody tr:hover{ background: color-mix(in srgb, var(--dot, var(--accent)) 7%, var(--panel-2)); }
.tile .tile-icon{ background: color-mix(in srgb, var(--dot, var(--accent)) 14%, var(--panel)); filter: saturate(.7); }

/* 3) Більше повітря між елементами - трохи щедріші відступи й проміжки. */
.card{ padding: 22px; }
.tile{ padding: 24px 20px; }
.dash-grid{ gap: 20px; margin: 26px 0; }
.dash-cols{ gap: 22px; }
.picker-grid{ gap: 22px; }
.filter-card{ gap: 14px; }
.page-head{ margin: 26px 0 20px; }
table.eq-table td{ padding: 15px 16px; }

/* 4) Тонший, майже непомітний скролбар - ще тонший і прозоріший за той,
   що вже був, щоб не привертав уваги, поки ним не користуються. */
::-webkit-scrollbar{ width: 7px; height: 7px; }
::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
::-webkit-scrollbar-thumb:hover{
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* =========================================================================
   Вибір кількох одиниць у списку (з 2.38.0): стовпець прапорців і панель
   дій знизу ("Передати" / "Змінити").
   ========================================================================= */
table.eq-table th.sel, table.eq-table td.sel{ width: 34px; text-align:center; padding-left: 10px; padding-right: 0; }
table.eq-table td.sel{ box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--dot, transparent) 55%, var(--muted) 45%); }
table.eq-table td.num{ box-shadow: none; }
table.eq-table input[data-select-row], table.eq-table input[data-select-all]{
  width: 17px; height: 17px; cursor: pointer; accent-color: var(--accent);
}
table.eq-table tbody tr.row-selected{ background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.bulk-bar{
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 60; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 12px 10px 18px; border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--text) 16%, var(--border));
  box-shadow: 0 12px 32px -12px rgba(0,0,0,.45);
  max-width: calc(100vw - 32px);
}
.bulk-bar[hidden]{ display:none; }
.bulk-bar .bulk-count{ font-size: 14px; margin-right: 6px; }
@media (max-width: 720px){
  table.eq-table td.sel{ width:auto; text-align:left; padding: 0 0 4px; box-shadow:none; }
  .bulk-bar{ bottom: 12px; left: 16px; right: 16px; transform:none; justify-content:center; }
}
@media print{ .bulk-bar, table.eq-table .sel{ display:none !important; } }

/* =========================================================================
   "Як на MacBook" (з 2.39.0) - у дусі macOS 27: бокова панель на всю
   висоту вікна, прилегла до краю (без відступів довкола), з кольоровими
   значками розділів; єдина світла/темна "віконна" подача; таблиці як у
   Finder (дрібніший шрифт, чергування рядків, без зайвих ліній); кнопки-
   "капсули"; меню й панелі - легке матове скло. Блок навмисно останній:
   він перекриває оформлення з попередніх раундів (скло/мінімалізм).
   ========================================================================= */
:root{
  --bg:#f5f5f7; --panel:#ffffff; --panel-2:#f2f2f5; --border:#e3e3e8; --text:#1d1d1f; --muted:#86868b;
  --accent:#007aff; --accent-active:#0062cc; --accent-2:#5ac8fa;
  --on:#28a745; --on-dim:#e3f6e7; --off:#ff3b30; --off-dim:#ffe5e3;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(0,0,0,.04);
  --sb-bg: rgba(236,236,241,.82); --sb-border: rgba(0,0,0,.08);
  --hairline: rgba(0,0,0,.07);
}
html[data-theme="dark"]{
  --bg:#1e1e1f; --panel:#2a2a2c; --panel-2:#333336; --border:#3c3c40; --text:#f5f5f7; --muted:#98989d;
  --accent:#0a84ff; --accent-active:#409cff; --accent-2:#64d2ff;
  --on:#32d74b; --on-dim:#1f3a25; --off:#ff453a; --off-dim:#3d2120;
  --shadow:0 1px 2px rgba(0,0,0,.3);
  --sb-bg: rgba(40,40,43,.78); --sb-border: rgba(255,255,255,.08);
  --hairline: rgba(255,255,255,.07);
}
body{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", Tahoma, Roboto, sans-serif;
  font-size: 13.5px; letter-spacing: -0.003em;
}

/* --- каркас: бокова панель + вміст --- */
.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  position: sticky; top:0; height:100vh; width:236px; flex:0 0 236px;
  display:flex; flex-direction:column; overflow-y:auto; z-index:40;
  background: var(--sb-bg);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-right: 1px solid var(--sb-border);
  padding: 0 10px 10px;
}
.sb-head{ padding: 22px 10px 8px; }
.sb-brand{ font-weight:700; font-size:15px; letter-spacing:-.01em; }
.sb-clock{ font-size:11.5px; color:var(--muted); margin-top:2px; font-variant-numeric: tabular-nums; }
.sb-nav{ display:flex; flex-direction:column; gap:1px; }
.sb-section{ font-size:11px; font-weight:600; color:var(--muted); padding:16px 10px 5px; }
.sb-item{
  display:flex; align-items:center; gap:9px; padding:5px 10px; border-radius:8px;
  font-size:13.5px; color:var(--text); line-height:1.35;
}
.sb-item:hover{ background: color-mix(in srgb, var(--text) 6%, transparent); }
.sb-item.active{ background: color-mix(in srgb, var(--text) 11%, transparent); font-weight:600; }
.sb-icon{ width:18px; display:inline-flex; justify-content:center; color: var(--ic, var(--accent)); flex:0 0 18px; }
.sb-icon svg{ display:block; }
.sb-foot{ margin-top:auto; display:flex; align-items:center; gap:6px; padding-top:10px; border-top:1px solid var(--sb-border); }
.sb-user{ position:relative; flex:1; min-width:0; }
.sb-user summary{ display:flex; align-items:center; gap:9px; padding:6px 8px; border-radius:9px; cursor:pointer; list-style:none; }
.sb-user summary::-webkit-details-marker{ display:none; }
.sb-user summary:hover{ background: color-mix(in srgb, var(--text) 6%, transparent); }
.sb-user-name{ display:flex; flex-direction:column; min-width:0; font-size:13px; font-weight:600; line-height:1.2; }
.sb-user-name small{ font-weight:400; color:var(--muted); font-size:11px; }
.sb-chev{ margin-left:auto; color:var(--muted); font-size:11px; }
.sb-menu{ position:absolute !important; left:0 !important; right:auto !important; top:auto !important; bottom: calc(100% + 6px) !important; min-width: 230px; }
.avatar-chip{
  width:28px; height:28px; border-radius:50%; flex:0 0 28px;
  display:inline-flex !important; align-items:center; justify-content:center;
  background: linear-gradient(180deg, #8e8e93, #6d6d72) !important; color:#fff; font-weight:600; font-size:13px;
}
.sb-foot .icon-btn{ width:30px; height:30px; border-radius:50%; border:none; background:transparent; }
.sb-foot .icon-btn:hover{ background: color-mix(in srgb, var(--text) 8%, transparent); }
.main-pane{ flex:1; min-width:0; }
.wrap{ max-width: 1560px; margin:0; padding: 6px 30px 60px; }
.mobile-bar{ display:none; }
.sb-backdrop{ display:none; }

/* --- поверхні: суцільні, з тонкою лінією, як групи в Системних параметрах --- */
.card, .tile, .dash-stat, .table-card, .filter-card{
  background: var(--panel) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  border: 1px solid var(--hairline) !important; border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.card::before, .tile::before, .dash-stat::before, .filter-card::before,
.btn.primary::before, .btn.primary::after, .badge::before{ display:none !important; }
.page-head{ margin: 22px 0 16px; }
.page-head h1{ font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.page-head .sub{ font-size: 12.5px; }

/* --- кнопки-капсули й поля --- */
.btn{
  border-radius: 999px !important; padding: 6px 14px; font-size: 13px; font-weight: 500 !important;
  background: var(--panel) !important; border: 1px solid var(--border) !important; color: var(--text);
  box-shadow: 0 1px 1px rgba(0,0,0,.05) !important; filter:none !important;
}
.btn:hover{ background: var(--panel-2) !important; }
.btn.primary{ background: var(--accent) !important; border-color: var(--accent) !important; color:#fff !important; }
.btn.primary:hover{ background: var(--accent-active) !important; }
.btn.ghost{ background: transparent !important; border-color: transparent !important; box-shadow:none !important; color: var(--accent); }
.btn.small{ padding: 4px 10px; font-size: 12px; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.icon-btn{ border-radius: 8px; }
input[type=text], input[type=password], input[type=number], input[type=date],
input[type=search], select, textarea{
  border-radius: 8px !important; background-color: var(--field-bg) !important;
  border: 1px solid var(--field-border) !important; font-size: 13.5px; padding: 7px 10px;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.03);
}
select{ padding-right: 30px; }
input:focus, select:focus, textarea:focus{
  outline: none !important; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent) !important;
}
.field label{ font-size: 12px; font-weight: 600; color: var(--muted); }

/* --- таблиці як у Finder --- */
.table-card{ padding: 0 !important; overflow-x:auto; }
table.eq-table{ font-size: 13px; }
table.eq-table th{
  font-size: 11.5px !important; font-weight: 600 !important; color: var(--muted) !important;
  text-transform: none !important; letter-spacing: 0 !important;
  background: var(--panel) !important; border-bottom: 1px solid var(--hairline) !important;
  padding: 9px 12px !important;
}
table.eq-table td{ padding: 7px 12px !important; border-bottom: none !important; }
table.eq-table tr{ border-left: none !important; }
table.eq-table td.sel, table.eq-table td.num{ box-shadow: none !important; }
table.eq-table tbody tr:nth-child(even){ background: color-mix(in srgb, var(--text) 3.5%, var(--panel)); }
table.eq-table tbody tr:hover{ background: color-mix(in srgb, var(--accent) 8%, var(--panel)) !important; }
table.eq-table tbody tr.row-selected{ background: color-mix(in srgb, var(--accent) 16%, var(--panel)) !important; }
table.eq-table td.eq-name a{ font-weight: 600; }
/* кольорова крапка категорії замість смужки зліва */
table.eq-table td.num{ position: relative; }
table.eq-table td.num::after{
  content:""; position:absolute; left:4px; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%;
  background: var(--dot, transparent);
}
.row-actions .btn.small{ padding: 3px 9px; }

/* --- значки статусів, дашборд --- */
.badge{ border-radius: 999px !important; font-weight: 500 !important; font-size: 11.5px !important; padding: 2px 9px !important; filter:none !important; }
.dash-stat{ border-left: 1px solid var(--hairline) !important; }
.dash-stat-num{ font-weight: 700 !important; letter-spacing: -0.02em; }
.tile .tile-icon{ border-radius: 10px !important; }

/* --- меню (випадаючі списки) - матове скло з тінню, як контекстні меню macOS --- */
.dropdown{
  background: color-mix(in srgb, var(--panel) 88%, transparent) !important;
  backdrop-filter: blur(24px) saturate(180%) !important; -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border: 1px solid var(--hairline) !important; border-radius: 10px !important;
  box-shadow: 0 10px 30px -6px rgba(0,0,0,.25) !important; padding: 5px !important;
}
.dropdown a, .dropdown .link-btn{ padding: 5px 10px !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 400 !important; }
.dropdown a:hover, .dropdown .link-btn:hover{ background: var(--accent) !important; color: #fff !important; }

.flash{ border-radius: 10px !important; font-weight: 500 !important; }
.bulk-bar{ border-radius: 999px !important; padding: 7px 8px 7px 18px !important; }

/* --- вузький екран: бокова панель висувається кнопкою ☰ --- */
@media (max-width: 900px){
  .sidebar{
    position: fixed; left:0; top:0; bottom:0; height:auto;
    transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.25);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
  }
  body.sb-open .sidebar{ transform: none; }
  body.sb-open .sb-backdrop{ display:block; position:fixed; inset:0; z-index:35; background: rgba(0,0,0,.25); }
  .mobile-bar{
    display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:30;
    padding: 10px 16px; background: color-mix(in srgb, var(--bg) 85%, transparent);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--hairline);
  }
  .wrap{ padding: 4px 16px 60px; }
}
@media print{
  .sidebar, .mobile-bar, .sb-backdrop{ display:none !important; }
  .app-shell{ display:block; }
}
.row-actions{ flex-wrap: nowrap !important; gap: 4px !important; }
.btn.small.icon-only{ width: 28px; height: 28px; padding: 0 !important; justify-content:center; color: var(--muted); }
.btn.small.icon-only:hover{ color: var(--accent); }
.btn.small.icon-only svg{ width:14px; height:14px; }
.badge{ white-space: nowrap; }
.sb-menu{ background: color-mix(in srgb, var(--panel) 97%, transparent) !important; }


/* =========================================================================
   Доведення вигляду "як на MacBook" (2.39.1): форми й поля.
   ========================================================================= */
:root{ --field-bg:#ffffff; --field-border:#d2d2d7; }
html[data-theme="dark"]{
  --bg:#18181a; --panel:#262628; --panel-2:#2f2f32; --border:#3d3d41;
  --sb-bg: rgba(40,40,43,.94); --sb-border: rgba(255,255,255,.07);
  --field-bg:#313134; --field-border:#48484d; --hairline: rgba(255,255,255,.08);
}
/* Стрілка у випадаючих списках (раніше її випадково "затирав" фон поля) */
select{
  -webkit-appearance:none; appearance:none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386868b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M7 10l5 5 5-5'/></svg>") !important;
  background-repeat:no-repeat !important; background-position: right 10px center !important; background-size: 14px !important;
  padding-right: 32px !important;
}
input[type=text], input[type=password], input[type=number], input[type=date], input[type=search], select{ min-height: 34px; }
textarea{ min-height: 80px; }

/* Сторінки-форми: одна охайна колонка по центру замість вузької картки
   зліва і кнопок, "загублених" біля правого краю широкого екрана. */
.wrap:has(> form.form-card){ max-width: 940px; margin: 0 auto; }
.form-card{ max-width: none !important; padding: 24px 26px !important; }
.form-section-title{
  text-transform:none !important; letter-spacing:0 !important; font-size:14px !important;
  font-weight:600 !important; color: var(--text) !important;
  margin: 10px 0 12px !important; padding-top: 18px; border-top: 1px solid var(--hairline);
}
.form-section-title:first-child{ margin-top:0 !important; padding-top:0; border-top:none; }
.field label{ font-size:12.5px; font-weight:500; color: var(--muted); margin-bottom:5px; }
.page-head h1{ font-weight: 650; }
/* Кнопка "+" біля списку - квадратна, у висоту поля */
.ref-with-add{ display:flex; gap:8px; align-items:stretch; }
.ref-with-add select{ flex:1; min-width:0; }
.ref-with-add .btn{
  flex: 0 0 34px; width:34px; min-height:34px; padding:0 !important;
  border-radius: 8px !important; justify-content:center; font-size:16px; color: var(--accent);
}
.hint{ color: var(--muted); }

/* Інші "вузькі" сторінки (Налаштування, Діагностика, Користувачі, Довідники
   тощо) - так само одна колонка по центру, на всю її ширину. */
.wrap:has(> .card[style*="max-width"]){ max-width: 940px; margin: 0 auto; }
.wrap:has(> .card[style*="max-width"]) > .card[style*="max-width"]{ max-width: none !important; }

/* Роль "тільки перегляд" (2.40.0): кнопки й посилання, що ведуть до змін, ховаємо. */
body[data-role-readonly] .write-only{ display:none !important; }

/* Швидкий пошук у боковій панелі (2.40.0) - маленький, завжди на виду */
.sb-search{ position:relative; margin: 4px 4px 6px; }
.sb-search input[type=search]{
  width:100%; min-height: 28px !important; height: 28px; padding: 4px 52px 4px 27px !important;
  border-radius: 8px !important; font-size: 13px !important;
  background-color: color-mix(in srgb, var(--text) 6%, transparent) !important;
  border: 1px solid transparent !important; box-shadow:none !important;
}
.sb-search input[type=search]:focus{
  background-color: var(--field-bg) !important; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent) !important;
}
.sb-search input[type=search]::-webkit-search-cancel-button{ display:none; }
.sb-search-icon{ position:absolute; left:9px; top:50%; transform:translateY(-50%); color: var(--muted); display:flex; pointer-events:none; }
.sb-kbd{
  position:absolute; right:7px; top:50%; transform:translateY(-50%); pointer-events:none;
  font: 500 10.5px/1 -apple-system, "Segoe UI", sans-serif; color: var(--muted);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 5px; background: var(--panel);
}
.sb-search input:focus ~ .sb-kbd{ display:none; }
.sb-results{
  position:absolute; left:0; right:-120px; top: calc(100% + 6px); z-index: 80;
  background: color-mix(in srgb, var(--panel) 97%, transparent);
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--hairline); border-radius: 10px; padding: 5px;
  box-shadow: 0 14px 34px -8px rgba(0,0,0,.3); max-height: 70vh; overflow:auto;
}
.sb-results[hidden]{ display:none; }
.qs-item{ display:flex; flex-direction:column; gap:1px; padding: 6px 9px; border-radius: 7px; color: var(--text); }
.qs-item.active{ background: var(--accent); color:#fff; }
.qs-item.active .qs-sub{ color: rgba(255,255,255,.85); }
.qs-name{ font-size: 13px; font-weight: 600; }
.qs-sub{ font-size: 11.5px; color: var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qs-arch{ font-size:10px; font-weight:600; padding:0 5px; border-radius:4px; background: color-mix(in srgb, var(--muted) 25%, transparent); }
.qs-empty, .qs-more{ padding: 8px 9px; font-size: 12px; color: var(--muted); }
.qs-more{ border-top: 1px solid var(--hairline); margin-top: 4px; }
.sidebar{ overflow: visible; }
.sb-nav{ overflow-y:auto; flex: 1 1 auto; min-height: 0; }
@media (max-width: 900px){ .sb-results{ right: 0; } }

/* Лічильники в боковій панелі (2.40.0), як непрочитані листи в Mail */
.sb-count{ margin-left:auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; padding-left: 6px; }
.sb-count.alert{ background: #ff3b30; color:#fff; border-radius: 999px; padding: 0 7px; line-height: 17px; font-weight: 600; }
.sb-item.active .sb-count:not(.alert){ color: var(--text); }
/* Перемикач-сегменти (як segmented control на Mac) - звіт за період */
.seg{ display:inline-flex; padding:2px; border-radius: 9px; background: color-mix(in srgb, var(--text) 7%, transparent); gap:2px; flex-wrap:wrap; }
.seg-btn{ padding: 5px 12px; border-radius: 7px; font-size: 12.5px; color: var(--text); white-space:nowrap; }
.seg-btn.on{ background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight:600; }
.period-stats{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; }
@media print{
  .period-block, .dash-stat{ break-inside: avoid; }
  .seg{ display:none; }
}

/* Збережені фільтри (2.41.0) */
.sb-filter-row{ position:relative; }
.sb-filter-row .sb-item{ padding-right: 26px; }
.sb-filter-del{ position:absolute; right:4px; top:50%; transform:translateY(-50%); margin:0; display:none; }
.sb-filter-row:hover .sb-filter-del{ display:block; }
.sb-filter-del button{ border:none; background:transparent; color: var(--muted); font-size:15px; line-height:1; cursor:pointer; padding:2px 6px; border-radius:6px; }
.sb-filter-del button:hover{ background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
.sb-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.save-filter{ margin: -6px 0 14px; }
.save-filter summary{ list-style:none; cursor:pointer; display:inline-flex; }
.save-filter summary::-webkit-details-marker{ display:none; }
.save-filter-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.save-filter-form input[type=text]{ width: 320px; max-width:100%; }
/* "Повернути як було" (2.41.0) */
.revert-form{ display:block; margin-top:6px; }
.revert-btn{ font-size: 11.5px !important; padding: 3px 9px !important; color: var(--accent) !important; }

/* 2.41.0: кольорові кнопки, які "затер" загальний стиль кнопок 2.39.0 */
#toggleFiltersBtn.active{
  background: color-mix(in srgb, var(--accent) 14%, var(--panel)) !important;
  color: var(--accent) !important; border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
}
.btn.success{ background: var(--on) !important; border-color: var(--on) !important; color:#fff !important; }
.btn.danger{ background: var(--off) !important; border-color: var(--off) !important; color:#fff !important; }


/* =========================================================================
   Тема «Радар» (2.48.0): темно-зелена, як іконка програми. Працює поверх
   темної теми (data-theme="dark") - змінює лише кольори.
   ========================================================================= */
html[data-skin="radar"]{
  --bg:#0e1912; --panel:#15241a; --panel-2:#1b2e21; --border:#2a4431; --text:#e3eee0; --muted:#8aa28c;
  --accent:#2ea043; --accent-active:#3fb950; --accent-2:#f2c230;
  --on:#5ddc7a; --on-dim:#173a22; --off:#ff6b4a; --off-dim:#3d2219;
  --sb-bg: rgba(16,30,20,.96); --sb-border: rgba(93,220,122,.12);
  --field-bg:#182a1d; --field-border:#2f4a35; --hairline: rgba(93,220,122,.10);
  --shadow:0 1px 2px rgba(0,0,0,.35);
}
html[data-skin="radar"] body{ background: var(--bg); }
html[data-skin="radar"] .sb-item.active{ box-shadow: inset 3px 0 0 var(--accent-2); }
html[data-skin="radar"] .sb-brand{ color: var(--accent-2); }
html[data-skin="radar"] h1{ color: #eef6ea; }
html[data-skin="radar"] .sb-count.alert{ background: var(--accent-2); color:#1a1405; }

/* ---------- Розділи «Техніка» / «Персонал» (з 2.49.0) ---------- */
.sb-switch{ display:flex; gap:4px; margin: 0 12px 10px; padding: 3px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--border); }
.sb-switch a{ flex:1; text-align:center; padding: 6px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 650; color: var(--muted); text-decoration:none; }
.sb-switch a:hover{ color: var(--text); }
.sb-switch a.active{ background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.18); }
.home-hero{ text-align:center; margin: 48px 0 28px; }
.home-hero h1{ font-size: 26px; margin: 0 0 6px; font-weight: 800; }
.home-hero .sub{ color: var(--muted); font-size: 14px; }
.home-tiles{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; max-width: 760px; margin: 0 auto 30px; }
.home-tile{ display:flex; flex-direction:column; align-items:center; gap: 10px; padding: 34px 20px 28px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--border); color: var(--text); text-decoration:none; text-align:center;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease; }
.home-tile:hover{ transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); }
.home-tile .home-ico{ width: 64px; height: 64px; border-radius: 18px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--ic) 16%, transparent); color: var(--ic); }
.home-tile .home-ico svg{ width: 34px; height: 34px; }
.home-tile .home-name{ font-size: 20px; font-weight: 800; }
.home-tile .home-desc{ color: var(--muted); font-size: 13px; line-height: 1.45; }
.home-tile .home-stat{ font-size: 12.5px; font-weight: 650; color: var(--muted); margin-top: 4px; }
.home-tile .home-stat b{ color: var(--text); font-size: 15px; }
.home-tile .home-stat .alert{ color: var(--off); }
.home-key{ display:inline-block; margin-top: 6px; font-size: 11.5px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; }

/* ---------- 2.50.0: колір розділу, чиста головна ---------- */
body[data-section="equipment"]{ --sec: #ff9f0a; }
body[data-section="personnel"]{ --sec: #0a84ff; }
html[data-skin="radar"] body[data-section="personnel"]{ --sec: #4cc2ff; }
body[data-section] .sb-item.active{ box-shadow: inset 3px 0 0 var(--sec); }
html[data-skin="radar"] body[data-section] .sb-item.active{ box-shadow: inset 3px 0 0 var(--sec); }
.sb-switch a{ position: relative; }
body[data-section] .sb-switch a.active{ background: color-mix(in srgb, var(--sec) 20%, var(--panel)); color: var(--text); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sec) 45%, transparent); }
.sb-switch a{ white-space: nowrap; }

body[data-bare] .wrap{ max-width: 980px; margin: 0 auto; padding: 0 20px 60px; }
.home-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 16px 0 0; }
.home-brand{ display:flex; align-items:center; gap:8px; font-weight: 800; font-size: 15px; }
.home-brand img{ border-radius: 6px; }
.home-user{ display:flex; align-items:center; gap:10px; }
.home-user-name{ font-weight: 600; font-size: 13.5px; }
.home-hero{ margin-top: 7vh; }
.home-logo{ display:block; margin: 0 auto 18px; border-radius: 22px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.45); }
.home-hero kbd, .home-tile kbd{ display:inline-block; font: 600 11.5px/1 ui-monospace, monospace; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); }
.home-tile[data-sec="equipment"]:hover{ border-color: #ff9f0a; }
.home-tile[data-sec="personnel"]:hover{ border-color: #0a84ff; }
@media (max-width: 600px){
  .home-user-name{ display:none; }
  .home-hero{ margin-top: 30px; }
  .home-logo{ width: 64px; height: 64px; }
}

/* ---------- 2.51.0: бокова панель у стилі macOS (Finder / Системні параметри) ---------- */
body:not([data-section]){ --sec: var(--accent); }
.sidebar{ padding: 0 10px 10px; }
.sb-head{ padding: 20px 8px 10px; }
.sb-brand{ display:flex; align-items:center; gap:8px; color: var(--text); text-decoration:none; font-size: 15px; font-weight: 700; }
.sb-brand img{ border-radius: 5px; }
.sb-clock{ margin: 3px 0 0 28px; font-size: 11.5px; color: var(--muted); }
.sb-switch{ margin: 2px 0 12px; padding: 2px; border-radius: 9px; border: 0; background: color-mix(in srgb, var(--text) 8%, transparent); }
.sb-switch a{ padding: 5px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.sb-switch a.active, body[data-section] .sb-switch a.active{ background: var(--panel); color: var(--sec); box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.06); }
.sb-search{ margin-bottom: 10px; }
.sb-nav{ gap: 1px; }
.sb-item{ gap: 10px; padding: 6px 10px; border-radius: 7px; font-size: 13.5px; font-weight: 450; }
.sb-icon{ color: var(--sec); width: 18px; flex-basis: 18px; }
.sb-icon svg{ width: 16px; height: 16px; }
.sb-item.active, body[data-section] .sb-item.active, html[data-skin="radar"] .sb-item.active, html[data-skin="radar"] body[data-section] .sb-item.active{
  background: color-mix(in srgb, var(--sec) 17%, transparent); box-shadow: none; font-weight: 600; }
.sb-section{ padding: 14px 10px 4px; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: 0; }
.sb-count{ font-size: 12px; color: var(--muted); }
.sb-count.alert{ background: #ff3b30; color: #fff; padding: 0 6px; min-width: 18px; text-align: center; line-height: 18px; font-size: 11px; }
.sb-bottom{ flex: 0 0 auto !important; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--sb-border); overflow: visible !important; }
.sb-foot{ border-top: 0; padding-top: 4px; }

/* ---------- Екран «Керування» - згруповані списки, як у Системних параметрах ---------- */
.set-wrap{ max-width: 680px; }
.set-group-title{ font-size: 12px; font-weight: 600; color: var(--muted); margin: 22px 0 7px 14px; }
.set-group{ background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.set-row{ display:flex; align-items:center; gap: 12px; padding: 9px 14px; color: var(--text); text-decoration: none; font-size: 14px; position: relative; }
.set-row + .set-row::before{ content:""; position:absolute; top:0; left: 52px; right: 0; border-top: 1px solid var(--border); }
.set-row:hover{ background: color-mix(in srgb, var(--text) 5%, transparent); }
.set-ico{ width: 26px; height: 26px; border-radius: 7px; display:flex; align-items:center; justify-content:center; color:#fff; flex: 0 0 26px; }
.set-ico svg{ width: 15px; height: 15px; }
.set-label{ flex: 1; min-width: 0; }
.set-detail{ color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.set-detail.alert{ color: #ff3b30; font-weight: 600; }
.set-chev{ color: var(--muted); opacity: .6; display:flex; }
.set-chev svg{ width: 14px; height: 14px; }
.link-hint{ font-size: 13px; color: var(--muted); padding: 10px 12px; border-radius: 10px; background: var(--panel-2); margin-bottom: 14px; line-height: 1.45; }
.link-hint b{ color: var(--text); }
.link-form{ display:flex; align-items:center; gap: 6px; margin-top: 6px; flex-basis: 100%; }
.link-form select{ max-width: 340px; padding: 5px 30px 5px 9px; font-size: 12.5px; }
.link-form select.guess{ border-color: color-mix(in srgb, #ff9f0a 60%, var(--border)); }
.link-ok{ color: #30d158; font-weight: 700; }
.ref-list li{ flex-wrap: wrap; }
.ref-list li > .link-form{ flex-basis: 100%; margin-top: 2px; }
.card-head{ padding: 14px 18px 6px; font-size: 13px; font-weight: 700; }

/* ---------- 2.51.1: кольорові плитки-іконки, як у «Системних параметрах» ---------- */
.sidebar .sb-icon{ width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; display:inline-flex; align-items:center; justify-content:center;
  background: var(--ic, #8e8e93); color: #fff; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12), 0 1px 1px rgba(0,0,0,.12); }
.sidebar .sb-icon svg{ width: 13px; height: 13px; stroke-width: 2.2; }
.sidebar .sb-item{ padding: 5px 8px; gap: 10px; }
.sidebar .sb-item.active, body[data-section] .sidebar .sb-item.active,
html[data-skin="radar"] .sidebar .sb-item.active, html[data-skin="radar"] body[data-section] .sidebar .sb-item.active{
  background: color-mix(in srgb, var(--text) 11%, transparent); box-shadow: none; }
.sb-switch a.active, body[data-section] .sb-switch a.active{ color: var(--text); }

/* ---------- 2.52.0: «Сховати екран» - на всіх сторінках ---------- */
/* Кнопка "Сховати екран" і екран-заглушка */
.privacy-shield{ position: fixed; inset: 0; z-index: 1000; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(22px) saturate(.6); -webkit-backdrop-filter: blur(22px) saturate(.6); cursor: pointer; }
.privacy-shield[hidden]{ display:none; }
.privacy-box{ display:flex; flex-direction:column; align-items:center; gap: 8px; padding: 26px 34px; border-radius: 16px;
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow); text-align:center; color: var(--muted); font-size: 13px; }
.privacy-box b{ color: var(--text); font-size: 16px; }
.privacy-box svg{ color: var(--sec, var(--accent)); }


/* ---------- 2.52.0: «Користувачі» - лаконічний список ---------- */
.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.user-new{ max-width: 860px; margin-bottom: 16px; }
.user-new:not([open]){ display:none; }
.user-new-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.user-new-grid .field{ margin:0; }
.user-opts{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; margin: 14px 0 8px; }
.seg-btn{ cursor:pointer; user-select:none; }
.seg-btn input{ position:absolute; opacity:0; pointer-events:none; }
.seg-btn:has(input:checked){ background: var(--panel); box-shadow: 0 1px 2px rgba(0,0,0,.18); font-weight: 600; }
.chips{ display:flex; flex-wrap:wrap; gap: 6px; align-items:center; }
.chip-check{ cursor:pointer; user-select:none; }
.chip-check input{ position:absolute; opacity:0; pointer-events:none; }
.chip-check span{ display:inline-flex; align-items:center; gap:6px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); color: var(--muted); background: transparent; transition: background .12s, color .12s; }
.chip-check span::before{ content:""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.chip-check input:checked + span{ background: color-mix(in srgb, #ff9f0a 18%, transparent); border-color: color-mix(in srgb, #ff9f0a 45%, transparent); color: var(--text); }
.chip-check input:checked + span::before{ background: #ff9f0a; border-color: #ff9f0a; }
.chip-check.personnel input:checked + span{ background: color-mix(in srgb, #0a84ff 18%, transparent); border-color: color-mix(in srgb, #0a84ff 45%, transparent); }
.chip-check.personnel input:checked + span::before{ background: #0a84ff; border-color: #0a84ff; }
.chip-check.small span{ padding: 3px 10px; font-size: 12px; }
.chip-check.small input:checked + span{ background: color-mix(in srgb, var(--text) 10%, transparent); border-color: var(--border); }
.chip-check.small input:checked + span::before{ background: var(--text); border-color: var(--text); }
.chip-check input:focus-visible + span{ outline: 2px solid var(--accent); outline-offset: 2px; }

.user-list{ max-width: 860px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.user-row + .user-row{ border-top: 1px solid var(--border); }
.user-row > summary{ display:flex; align-items:center; gap: 12px; padding: 10px 16px; cursor: pointer; list-style: none; }
.user-row > summary::-webkit-details-marker{ display:none; }
.user-row > summary:hover{ background: color-mix(in srgb, var(--text) 4%, transparent); }
.user-row[open] > summary{ background: color-mix(in srgb, var(--text) 6%, transparent); }
.user-main{ display:flex; flex-direction:column; min-width: 0; flex: 1; line-height: 1.25; }
.user-main b{ font-size: 14px; }
.user-main small{ color: var(--muted); font-size: 12px; }
.user-tags{ display:flex; gap: 6px; flex-wrap: wrap; justify-content:flex-end; }
.tag{ font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.tag.admin{ background: color-mix(in srgb, #5e5ce6 20%, transparent); color: #8e8cff; }
.tag.eq{ background: color-mix(in srgb, #ff9f0a 16%, transparent); color: #e08e00; }
.tag.pers{ background: color-mix(in srgb, #0a84ff 16%, transparent); color: #3a9bff; }
.tag.ro{ background: var(--panel-2); color: var(--muted); }
.tag.none{ color: #ff453a; }
.user-chev{ color: var(--muted); font-size: 20px; line-height: 1; transition: transform .15s; }
.user-row[open] .user-chev{ transform: rotate(90deg); }
.user-body{ padding: 6px 16px 14px 56px; }
.set-line{ display:flex; align-items:center; gap: 14px; padding: 7px 0; flex-wrap: wrap; }
.set-key{ width: 130px; flex: 0 0 130px; font-size: 12.5px; color: var(--muted); }
.set-line.disabled{ opacity: .35; pointer-events: none; }
.user-actions{ display:flex; align-items:center; justify-content:space-between; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.pw-form{ display:flex; gap: 6px; }
.pw-form input{ width: 170px; padding: 6px 10px; font-size: 13px; }
.danger-text{ color: #ff453a !important; }
@media (max-width: 700px){
  .user-new-grid{ grid-template-columns: 1fr; }
  .user-body{ padding-left: 16px; }
  .set-key{ width: 100%; flex-basis: 100%; }
  .user-tags{ display:none; }
}
.set-line{ flex-wrap: nowrap; align-items: flex-start; }
.set-line .set-key{ padding-top: 6px; }
.set-line .chips, .set-line .seg{ flex: 0 1 auto; min-width: 0; }
.set-line .chips{ flex: 1 1 auto; }
@media (max-width: 700px){ .set-line{ flex-wrap: wrap; } }
/* 2.52.0: картки на дашборді техніки - клікабельні, як у «Персоналі» */
a.dash-link{ color: var(--text); text-decoration: none; cursor: pointer; transition: transform .12s ease, border-color .15s ease; }
a.dash-link:hover{ transform: translateY(-1px); border-color: var(--accent) !important; }
a.dash-link .dash-stat-label{ color: var(--muted); }

/* ---------- 2.52.0: «Додаткові поля» - лаконічно ---------- */
.cf-new{ max-width: 860px; margin-bottom: 16px; }
.cf-new:not([open]){ display:none; }
.cf-input{ flex: 1 1 auto; max-width: 460px; padding: 7px 10px; font-size: 13.5px; }
.cf-ico{ width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.cf-move{ display:inline-flex; gap: 2px; }
.mini-btn{ width: 26px; height: 24px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--muted);
  font-size: 10px; cursor: pointer; line-height: 1; }
.mini-btn:hover:not([disabled]){ background: color-mix(in srgb, var(--text) 9%, transparent); color: var(--text); }
.mini-btn[disabled]{ opacity: .25; cursor: default; }
.cf-columns{ max-width: 860px; margin-top: 20px; }
.cf-col-title{ cursor: pointer; list-style: none; display:flex; align-items:center; gap: 6px; }
.cf-col-title::-webkit-details-marker{ display:none; }
.cf-columns[open] .cf-col-title .user-chev{ transform: rotate(90deg); }
.col-row{ display:flex; align-items:center; gap: 12px; padding: 8px 16px; }
.col-row + .col-row{ border-top: 1px solid var(--border); }
.col-name{ flex: 1; font-size: 14px; }
.muted-row .col-name{ color: var(--muted); }
.switch-wrap{ display:inline-flex; cursor:pointer; }
.switch-wrap input{ position:absolute; opacity:0; pointer-events:none; }
.switch{ width: 38px; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, transparent); position: relative; flex: 0 0 38px; transition: background .15s; display:inline-block; }
.switch::after{ content:""; position:absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.switch-wrap input:checked + .switch, .switch.on{ background: #30d158; }
.switch-wrap input:checked + .switch::after, .switch.on::after{ transform: translateX(16px); }
.switch.disabled{ opacity: .45; }
.switch-wrap input:focus-visible + .switch{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- 2.53.0: живий попередній перегляд на «Додаткові поля» ---------- */
.cf-layout{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 430px); gap: 22px; align-items:start; max-width: 1400px; }
.cf-main{ min-width: 0; }
.cf-main .user-list, .cf-main .cf-new, .cf-main .cf-columns{ max-width: none; }
.cf-preview{ position: sticky; top: 16px; min-width: 0; }
.pv-card{ background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.pv-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 6px; font-size: 14px; }
.pv-live{ font-size: 11px; font-weight: 700; color: #30d158; display:inline-flex; align-items:center; gap: 5px; }
.pv-live::before{ content:""; width: 7px; height: 7px; border-radius: 50%; background: #30d158; box-shadow: 0 0 0 3px color-mix(in srgb, #30d158 25%, transparent); }
.pv-label{ font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 14px 0 6px; display:flex; justify-content:space-between; gap: 8px; }
.pv-what{ font-weight: 400; opacity: .8; }
.pv-form{ padding: 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.pv-field label{ display:block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.pv-input{ width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 13px; }
.pv-ph{ color: var(--muted); }
.pv-date{ display:flex; justify-content:space-between; color: var(--muted); }
.pv-opts{ display:flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pv-opts span{ font-size: 11px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #bf5af2 16%, transparent); color: #bf5af2; }
.pv-warn{ font-size: 11.5px; color: #ff9f0a; margin-top: 5px; }
.pv-meta{ font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.pv-empty-box{ font-size: 12.5px; color: var(--muted); text-align:center; padding: 10px; }
.pv-filters{ display:flex; flex-wrap: wrap; gap: 5px; }
.pv-chip{ font-size: 11.5px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); color: var(--muted); }
.pv-chip.on{ border-color: #0a84ff; color: var(--text); background: color-mix(in srgb, #0a84ff 14%, transparent); }
.pv-table-wrap{ overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; scroll-behavior: smooth; }
.pv-table{ border-collapse: collapse; font-size: 11.5px; width: max-content; min-width: 100%; }
.pv-table th, .pv-table td{ padding: 6px 9px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.pv-table th{ color: var(--muted); font-weight: 600; background: var(--panel-2); }
.pv-table tr:last-child td{ border-bottom: 0; }
.pv-table .on{ background: color-mix(in srgb, #0a84ff 14%, transparent); }
.pv-table th.on{ color: var(--text); }
.pv-badge{ display:inline-flex; align-items:center; gap: 5px; }
.pv-badge i{ width: 7px; height: 7px; border-radius: 50%; display:inline-block; }
.pv-empty{ color: var(--muted); opacity: .6; }
.pv-demo{ color: var(--muted); font-style: italic; }
.pv-note{ font-size: 11.5px; color: var(--muted); margin-top: 12px; line-height: 1.4; }
.pv-note.warn{ color: #ff9f0a; }
@media (max-width: 1250px){ .cf-layout{ grid-template-columns: 1fr; } .cf-preview{ position: static; order: -1; } }

/* ---------- 2.55.0: «Доповнити з Excel» ---------- */
.fx-grid{ display:grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 18px; align-items:start; }
.fx-map{ position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow:auto; }
.fx-map .set-line{ flex-wrap: wrap; align-items: center; }
.fx-map .set-key{ width: 130px; flex-basis: 130px; padding-top: 0; }
.fx-map .set-key small{ color: var(--muted); font-weight: 400; }
.fx-sum{ margin-bottom: 14px; }
.fx-sum .roll-num small{ font-size: 14px; color: var(--muted); font-weight: 600; }
.fx-apply{ display:flex; align-items:center; gap: 12px; margin-bottom: 14px; }
.fx-list{ padding: 0; margin-bottom: 12px; overflow: hidden; }
.fx-list > summary{ cursor: pointer; list-style: none; }
.fx-list > summary::-webkit-details-marker{ display:none; }
.fx-table{ font-size: 13px; }
.fx-table td{ vertical-align: top; }
.fx-pair{ display:inline-block; margin: 0 12px 2px 0; }
.fx-pair > span:first-child{ color: var(--muted); }
@media (max-width: 1100px){ .fx-grid{ grid-template-columns: 1fr; } .fx-map{ position: static; max-height: none; } }
.fx-sum{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.fx-sum .roll-card{ background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display:flex; flex-direction:column; align-items:center; gap: 6px; text-align:center; }
.fx-sum .roll-card.ok .roll-num{ color: #30d158; }
.fx-sum .roll-num{ font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.fx-sum .roll-label{ font-size: 12px; color: var(--muted); }
.fx-map > .form-section-title:first-of-type{ border-top: 0 !important; padding-top: 0 !important; margin-top: 0 !important; }
.fx-tile{ color: var(--text); text-decoration: none; cursor: pointer; }
.fx-tile:hover{ border-color: #30d158; }
.fx-tile b{ color: #30d158; font-weight: 700; }
.fx-hint{ font-weight: 400; color: var(--muted); font-size: 12px; }
.fx-addbar{ display:flex; flex-wrap: wrap; align-items:flex-end; gap: 10px; padding: 4px 18px 10px; }
.fx-addf{ display:flex; flex-direction:column; gap: 4px; font-size: 11.5px; color: var(--muted); }
.fx-newname{ font-weight: 600; white-space: nowrap; }

/* 2.55.1: логотип-шеврон РЕБ (прозорий фон) - без квадратної тіні */
.home-logo{ border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); width: 110px; height: 110px; }
.sb-brand img{ border-radius: 0 !important; }

/* ===== 2.56.0: розділи техніки ===== */
.secsw{ display:grid; gap:6px; margin: 0 12px 6px; }
.secsw a{ position:relative; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--muted); text-decoration:none;
  transition: background .2s, color .2s, box-shadow .2s; }
.secsw a svg{ width:18px; height:18px; }
.secsw a:hover{ color: var(--text); background: color-mix(in srgb, var(--k) 18%, transparent); }
.secsw a.on{ background: var(--k); color:#fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--k) 45%, transparent); }
.secsw a .rd{ position:absolute; top:-5px; right:-5px; min-width:15px; height:15px; border-radius:8px; background:#ff3b30; color:#fff;
  font: 700 9.5px/15px system-ui, sans-serif; text-align:center; padding: 0 3px; box-shadow: 0 0 0 2px var(--sb-bg, var(--bg)); }
.secname{ margin: 4px 16px 10px; display:flex; align-items:baseline; gap:8px; }
.secname b{ font-size:15px; color: var(--eqc, var(--text)); }
.secname span{ font-size:12px; color: var(--muted); }
.secname kbd{ margin-left:auto; font: 600 10px ui-monospace, monospace; color: var(--muted); border:1px solid var(--border); border-radius:5px; padding: 1px 5px; }
body[data-eqsec] .app-shell{ box-shadow: inset 0 3px 0 var(--eqc); }
body[data-eqsec] .sidebar{ background-image: linear-gradient(180deg, color-mix(in srgb, var(--eqc) 10%, transparent) 0, transparent 260px); }
body[data-eqsec] .sb-item.active{ background: color-mix(in srgb, var(--eqc) 20%, transparent); box-shadow: inset 3px 0 0 var(--eqc); }
body[data-eqsec="all"] .sb-item.active{ background: color-mix(in srgb, var(--text) 11%, transparent); box-shadow: inset 3px 0 0 var(--muted); }

.hero{ margin: 0 -30px 20px; padding: 22px 30px 18px; border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, transparent), transparent); }
.hero-top{ display:flex; align-items:center; gap:14px; }
.hero-ico{ width:46px; height:46px; border-radius:12px; background: var(--c); color:#fff; display:flex; align-items:center; justify-content:center; flex: 0 0 46px; }
.hero-ico svg{ width:24px; height:24px; }
.hero-crumb{ font-size:12px; color: var(--muted); }
.hero-crumb b{ color: var(--c); font-weight:650; }
.hero-h{ font-size:26px; font-weight:800; line-height:1.15; }
.hero-sub{ font-size:13px; color: var(--muted); }
.hero-sub a{ color: inherit; text-decoration: underline dotted; }
.hero-add{ margin-left:auto; background: var(--c) !important; border-color: var(--c) !important; color:#fff !important; background-image:none !important; }
.hero-kpis{ display:flex; gap:30px; margin-top:16px; flex-wrap:wrap; }
.hero-kpis b{ display:block; font-size:22px; font-weight:700; font-variant-numeric: tabular-nums; }
.hero-kpis span{ font-size:12px; color: var(--muted); }
.hero + .page-head{ margin-top: 0; }
.hero + .page-head h1, .hero ~ .page-head h1{ font-size: 20px; }
@media (max-width: 760px){
  .hero{ margin: 0 -16px 16px; padding: 16px 16px 14px; }
  .hero-h{ font-size:22px; } .hero-kpis{ gap:18px; } .hero-kpis b{ font-size:18px; }
}
.num-r{ text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
.muted{ color: var(--muted); }
.to-bar{ display:inline-block; width:64px; height:6px; border-radius:3px; background: color-mix(in srgb, var(--text) 10%, transparent);
  vertical-align:middle; margin-right:8px; overflow:hidden; }
.to-bar i{ display:block; height:100%; border-radius:3px; background:#30d158; }
.to-bar.to-soon i{ background:#ff9f0a; } .to-bar.to-overdue i{ background:#ff453a; }
.to-over{ color:#ff453a; }
.meter-block[hidden]{ display:none !important; }
.sec-ico{ width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:0 0 30px; }
.sec-ico svg{ width:16px; height:16px; }
.sec-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px 14px; margin-bottom: 6px; }
@media (max-width: 900px){ .sec-grid{ grid-template-columns: 1fr 1fr; } }
.swatches{ display:flex; gap:8px; flex-wrap:wrap; }
.swatch input, .icon-pick input{ position:absolute; opacity:0; pointer-events:none; }
.swatch span{ display:block; width:24px; height:24px; border-radius:50%; background: var(--sw); cursor:pointer; box-shadow: 0 0 0 2px transparent; }
.swatch input:checked + span{ box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sw); }
.icon-pick span{ width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--muted); }
.icon-pick span svg{ width:17px; height:17px; }
.icon-pick input:checked + span{ background: var(--accent); color:#fff; }
.svc-card{ margin-bottom:16px; }
.svc-head{ display:flex; align-items:baseline; gap:12px; padding: 14px 18px 8px; }
.svc-head b{ font-size:15px; color: var(--c, var(--text)); }
.svc-head .muted{ font-size:12.5px; }
.svc-form{ display:flex; gap:6px; align-items:center; }
.svc-form input[type=text]{ width:100px; padding:5px 8px; }
body[data-eqsec]:not([data-eqsec="all"]) .page-head .btn.primary{ background: var(--eqc) !important; border-color: var(--eqc) !important; background-image:none !important; color:#fff !important; }

/* ===== 2.57.0: швидка робота зі списком ===== */
.fchips{ display:flex; flex-wrap:wrap; gap:8px; margin: 0 0 14px; align-items:center; }
.fchip{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:550;
  color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); border:1px solid transparent; text-decoration:none; transition: background .15s; }
.fchip:hover{ background: color-mix(in srgb, var(--text) 12%, transparent); }
.fchip i{ width:8px; height:8px; border-radius:50%; }
.fchip .n{ font-size:11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fchip.on{ background: color-mix(in srgb, var(--eqc, var(--accent)) 22%, transparent); border-color: color-mix(in srgb, var(--eqc, var(--accent)) 55%, transparent); }
body[data-eqsec="all"] .fchip.on{ --eqc: var(--accent); }
.fchip.on .n{ color: var(--text); }
.fchip.saved{ color: var(--muted); }
.fchip-sep{ width:1px; height:20px; background: var(--border); margin: 0 4px; }
td.qe{ cursor: pointer; position:relative; }
td.qe:hover{ background: color-mix(in srgb, var(--text) 5%, transparent); }
body[data-role-readonly] td.qe{ cursor: default; }
td.qe.qe-on{ outline: 2px solid var(--eqc, var(--accent)); outline-offset: -4px; border-radius: 8px; }
td.qe.qe-flash{ animation: qeflash 1.2s ease; }
@keyframes qeflash{ 0%{ background: color-mix(in srgb, var(--eqc, var(--accent)) 30%, transparent); } 100%{ background: transparent; } }
.qe-pop{ position:fixed; z-index:200; width:250px; max-height:360px; display:flex; flex-direction:column; background: var(--panel);
  border:1px solid var(--border); border-radius:12px; box-shadow: 0 18px 40px rgba(0,0,0,.45); padding:6px; }
.qe-h{ font-size:11px; color: var(--muted); padding: 4px 10px 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qe-filter{ margin: 0 4px 6px; padding: 6px 9px; font-size:13px; }
.qe-list{ overflow:auto; }
.qe-list a{ display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px; font-size:13.5px; color: var(--text); text-decoration:none; }
.qe-list a:hover{ background: color-mix(in srgb, var(--text) 8%, transparent); }
.qe-list a.on{ background: color-mix(in srgb, var(--eqc, var(--accent)) 20%, transparent); font-weight:600; }
.qe-list a i{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.sh-toast{ position:fixed; left:50%; transform:translateX(-50%); bottom:24px; z-index:300; display:flex; align-items:center; gap:12px;
  background:#2c2c2e; color:#fff; border:1px solid #3a3a3c; border-radius:14px; padding:10px 10px 10px 16px; font-size:13.5px;
  box-shadow: 0 14px 40px rgba(0,0,0,.5); max-width: min(92vw, 640px); animation: toastin .2s ease; }
.sh-toast.err{ border-color:#ff453a; }
.sh-toast.out{ opacity:0; transition: opacity .3s; }
.sh-toast .t-undo{ border:0; cursor:pointer; color:#0a84ff; font-weight:700; padding:6px 10px; border-radius:8px; background: rgba(10,132,255,.18); }
.sh-toast .t-left{ font: 600 11px ui-monospace, monospace; color:#8e8e93; }
.sh-toast .t-x{ border:0; background:transparent; color:#8e8e93; cursor:pointer; font-size:14px; }
@keyframes toastin{ from{ opacity:0; transform: translate(-50%, 8px); } to{ opacity:1; transform: translate(-50%, 0); } }
.bulk-bar{ white-space:nowrap; }

/* Картка справа */
.pn-wrap{ position:fixed; top:0; right:0; bottom:0; width: min(480px, 100vw); z-index:150; background: var(--panel);
  border-left:1px solid var(--border); box-shadow: -20px 0 50px rgba(0,0,0,.35); transform: translateX(105%);
  transition: transform .22s cubic-bezier(.2,.8,.2,1); overflow-y:auto; }
.pn-wrap.open{ transform: translateX(0); }
body.pn-open .main-pane{ padding-right: 480px; }
@media (max-width: 1200px){ body.pn-open .main-pane{ padding-right: 0; } }
.eq-table tr.pn-cur td{ background: color-mix(in srgb, var(--eqc, var(--accent)) 14%, transparent); }
.eq-table tr.pn-cur td:first-child{ box-shadow: inset 3px 0 0 var(--eqc, var(--accent)); }
.pn{ padding: 20px 22px 90px; }
.pn-head{ display:flex; align-items:flex-start; gap:12px; }
.pn-ico{ width:38px; height:38px; border-radius:10px; background: var(--c); color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 38px; }
.pn-ico svg{ width:20px; height:20px; }
.pn-title{ flex:1; min-width:0; }
.pn-title h2{ margin:0; font-size:21px; line-height:1.2; }
.pn-meta{ font-size:12.5px; color: var(--muted); margin-top:2px; }
.pn-nav{ display:flex; gap:4px; }
.pn-btn{ width:30px; height:30px; border-radius:8px; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--muted); font-size:13px; }
.pn-btn:hover{ color: var(--text); }
.pn-status{ margin: 10px 0 14px 50px; display:flex; gap:6px; }
.pn-kv{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 14px; }
.pn-kv span{ display:block; font-size:11.5px; color: var(--muted); }
.pn-kv b{ font-size:14px; font-weight:550; word-break: break-word; }
.pn-notes{ font-size:13.5px; background: color-mix(in srgb, var(--text) 5%, transparent); border-radius:10px; padding:10px 12px; margin-bottom:14px; white-space: pre-wrap; }
.pn-sec{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); margin: 16px 0 8px; }
.pn-kit{ border:1px solid var(--border); border-radius:12px; padding:8px; }
.pn-kit-row{ display:flex; align-items:center; gap:10px; padding:6px; border-radius:8px; }
.pn-kit-row a{ flex:1; color: var(--text); text-decoration:none; }
.pn-kit-row small{ display:block; color: var(--muted); font-size:12px; }
.pn-kit-ico{ width:28px; height:28px; border-radius:8px; color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 28px; }
.pn-kit-ico svg{ width:15px; height:15px; }
.pn-empty{ font-size:13px; padding: 4px 6px 8px; }
.pn-kit-add{ position:relative; margin-top:4px; }
.pn-kit-add input{ width:100%; font-size:13px; padding:7px 10px; }
.pn-kit-results{ position:absolute; left:0; right:0; top:100%; margin-top:4px; z-index:5; background: var(--panel); border:1px solid var(--border);
  border-radius:10px; box-shadow: 0 12px 30px rgba(0,0,0,.4); max-height:240px; overflow:auto; }
.pn-kit-results a{ display:block; padding:8px 10px; color: var(--text); text-decoration:none; font-size:13.5px; }
.pn-kit-results a:hover{ background: color-mix(in srgb, var(--text) 8%, transparent); }
.pn-kit-results small{ display:block; color: var(--muted); font-size:12px; }
.pn-actions{ position:sticky; bottom:0; display:flex; gap:8px; padding: 14px 0 4px; background: linear-gradient(transparent, var(--panel) 30%); margin-top: 18px; }
.pn-actions .btn{ flex:1; justify-content:center; text-align:center; }
.pn-actions .btn.primary{ background: var(--c) !important; border-color: var(--c) !important; background-image:none !important; color:#fff !important; }
/* Хронологія */
.tl{ position:relative; margin-left:6px; padding-left:18px; border-left:2px solid var(--border); }
.tl-e{ position:relative; padding: 0 0 12px; }
.tl-e::before{ content:""; position:absolute; left:-25px; top:4px; width:10px; height:10px; border-radius:50%; background: var(--d, #8e8e93); box-shadow: 0 0 0 3px var(--panel); }
.tl-e b{ font-size:13.5px; font-weight:600; word-break: break-word; }
.tl-e small{ display:block; font-size:12px; color: var(--muted); }
@media (max-width: 760px){
  .pn-wrap{ width:100vw; }
  .pn-kv{ grid-template-columns: 1fr; }
}
body:has(#bulkBar:not([hidden])) .sh-toast{ bottom: 92px; }

/* ===== 2.58.0 ===== */
.rings{ display:grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap:14px; margin-bottom:18px; }
.rings.single{ grid-template-columns: 1fr; }
.ring-card{ display:flex; align-items:center; gap:18px; padding:16px 18px; color: inherit; text-decoration:none; transition: transform .15s, box-shadow .15s; }
.ring-card:hover{ transform: translateY(-1px); }
.ring{ flex: 0 0 112px; color: var(--text); }
.ring-body h3{ margin:0 0 4px; font-size:16px; display:flex; align-items:center; gap:8px; }
.ring-body h3 i{ width:10px; height:10px; border-radius:50%; }
.ring-body h3 .muted{ font-weight:500; font-size:13px; }
.ring-lg{ font-size:12.5px; color: var(--muted); line-height:1.75; }
.ring-lg i{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; }
.ring-lg b{ color: var(--text); font-variant-numeric: tabular-nums; }
.ring-trend{ margin-left:auto; text-align:right; font-size:12px; color: var(--muted); }
.ring-trend b{ display:block; font-size:13px; }
.ring-trend small{ font-size:11.5px; }
@media (max-width: 760px){ .rings{ grid-template-columns: 1fr; } .ring-trend{ display:none; } }

.td-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:16px; }
.td-stats .card{ padding:14px 16px; }
.td-stats b{ display:block; font-size:24px; font-variant-numeric: tabular-nums; }
.td-stats b span{ font-size:14px; color: var(--muted); font-weight:500; }
.td-stats small{ font-size:12px; color: var(--muted); }
.td-cols{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:14px; }
.td-col{ padding:14px 16px; }
.td-col h4{ margin:0 0 6px; font-size:13.5px; display:flex; align-items:center; gap:8px; }
.td-dot{ width:8px; height:8px; border-radius:50%; }
.td-n{ margin-left:auto; font-size:12px; color: var(--muted); }
.td-item{ display:flex; align-items:center; gap:10px; padding:9px 4px; border-top:1px solid var(--border); color: inherit; text-decoration:none; border-radius:6px; }
.td-item:hover{ background: color-mix(in srgb, var(--text) 5%, transparent); }
.td-ico{ width:28px; height:28px; border-radius:8px; color:#fff; display:flex; align-items:center; justify-content:center; flex:0 0 28px; }
.td-ico svg{ width:15px; height:15px; }
.td-txt{ min-width:0; flex:1; }
.td-txt b{ display:block; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.td-txt small{ display:block; font-size:12px; color: var(--muted); }
.td-go{ font-size:12px; color: var(--muted); border:1px solid var(--border); border-radius:7px; padding:3px 8px; white-space:nowrap; }
.td-empty{ font-size:13px; color: var(--muted); padding: 10px 4px; border-top:1px solid var(--border); }
.td-more{ font-size:12px; color: var(--muted); padding-top:8px; }
.badge.st-badge{ gap:5px; }
.badge.st-badge svg{ width:11px; height:11px; stroke-width:3; flex:0 0 11px; }
.badge.st-badge .dot{ display:none; }
.eq-table td, .eq-table th{ font-variant-numeric: tabular-nums; }
.eq-table tfoot td.eq-total{ position:sticky; bottom:0; background: color-mix(in srgb, var(--text) 4%, var(--panel)); font-size:12.5px; color: var(--muted);
  border-top:1px solid var(--border); padding: 10px 14px; z-index:1; }
.eq-table tfoot b{ color: var(--text); }
.eq-table thead th{ position: sticky; top: 0; z-index: 2; background: var(--panel); }
.table-toolbar{ justify-content: space-between !important; align-items:center; gap:10px; }
.seg2{ display:inline-flex; padding:2px; border-radius:9px; background: color-mix(in srgb, var(--text) 7%, transparent); }
.seg2 button{ border:0; background:transparent; font: inherit; font-size:12px; padding:5px 10px; border-radius:7px; color: var(--muted); cursor:pointer; }
.seg2 button.on{ background: var(--panel); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
html[data-density="compact"] .eq-table td{ padding-top:5px; padding-bottom:5px; }
html[data-density="compact"] .eq-table td .btn.small.icon-only{ width:26px; height:26px; }
html[data-density="compact"] .eq-table td.eq-name a{ white-space: nowrap; }
.empty-big{ text-align:center; padding: 44px 20px 48px; max-width: 480px; margin: 0 auto; }
.eb-ico{ width:72px; height:72px; border-radius:20px; margin: 0 auto 16px; display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--eqc, var(--accent)) 18%, transparent); color: var(--eqc, var(--accent)); }
.eb-ico svg{ width:34px; height:34px; }
.empty-big h2{ margin:0 0 6px; font-size:20px; }
.empty-big p{ color: var(--muted); margin: 0 0 18px; font-size:14px; line-height:1.5; }

/* Ctrl+K */
.cmdk{ position:fixed; inset:0; z-index:400; }
.cmdk[hidden]{ display:none; }
.cmdk-dim{ position:absolute; inset:0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.cmdk-box{ position:absolute; left:50%; top: 12vh; transform: translateX(-50%); width: min(640px, calc(100vw - 24px)); background: var(--panel);
  border:1px solid var(--border); border-radius:16px; box-shadow: 0 30px 80px rgba(0,0,0,.55); overflow:hidden; animation: cmdkin .14s ease; }
@keyframes cmdkin{ from{ opacity:0; transform: translate(-50%, -6px) scale(.98); } to{ opacity:1; transform: translate(-50%, 0); } }
.cmdk-in{ display:flex; align-items:center; gap:10px; padding: 14px 16px; border-bottom:1px solid var(--border); color: var(--muted); }
.cmdk-in input{ flex:1; border:0 !important; background:transparent !important; font-size:17px; color: var(--text); outline:none; box-shadow:none !important; padding:0; }
.cmdk kbd{ font: 600 10.5px ui-monospace, monospace; color: var(--muted); border:1px solid var(--border); border-radius:5px; padding:1px 6px; }
.cmdk-list{ max-height: 52vh; overflow:auto; padding-bottom:6px; }
.cmdk-g{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); padding: 10px 16px 4px; }
.cmdk-it{ display:flex; align-items:center; gap:12px; padding: 8px 16px; color: var(--text); text-decoration:none; font-size:14px; }
.cmdk-it.on{ background: color-mix(in srgb, var(--accent) 22%, transparent); }
.cmdk-ico{ width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; flex:0 0 26px; }
.cmdk-t{ min-width:0; }
.cmdk-t small{ color: var(--muted); font-size:12px; margin-left:8px; }
.cmdk-empty{ padding: 22px 16px; color: var(--muted); font-size:14px; text-align:center; }
.cmdk-ft{ display:flex; gap:16px; padding: 9px 16px; border-top:1px solid var(--border); font-size:12px; color: var(--muted); }
.cmdk-ft kbd{ margin-right:4px; }
@media (max-width: 760px){ .cmdk-ft{ display:none; } .cmdk-box{ top: 8px; } }

/* Нижні вкладки на телефоні */
.tabbar{ display:none; }
@media (max-width: 760px){
  .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:120; justify-content:space-around;
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--panel) 92%, transparent);
    backdrop-filter: blur(12px); border-top:1px solid var(--border); }
  .tabbar a{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10.5px; color: var(--muted);
    text-decoration:none; min-width:58px; }
  .tabbar a svg{ width:23px; height:23px; }
  .tabbar a.on{ color: var(--k); }
  .tabbar .rd{ position:absolute; top:-3px; left:50%; margin-left:6px; min-width:16px; height:16px; border-radius:8px; background:#ff3b30; color:#fff;
    font: 700 10px/16px system-ui, sans-serif; text-align:center; padding: 0 4px; font-style:normal; }
  body:has(.tabbar) .wrap{ padding-bottom: 86px; }
  body:has(.tabbar) .bulk-bar{ bottom: 78px; }
  body:has(.tabbar) .sh-toast{ bottom: 84px; }
}
html[data-density="compact"] .eq-table td{ white-space: nowrap; font-size: 13px; }
@media (max-width: 760px){
  .list-actions .btn:not(.primary){ display:none; }
  .list-sub{ display:none; }
  .eq-table td.sel, .eq-table td.num, .eq-table th.sel{ display:none !important; }
  .table-toolbar .seg2{ display:none; }
}
/* 2.58.1: цифри в шапці розділу - клікабельні */
.hero-kpis{ gap: 6px 10px; margin-left: -10px; }
.hero-kpi{ display:block; padding: 6px 10px; border-radius: 10px; color: inherit; text-decoration: none; transition: background .15s; }
.hero-kpi:hover{ background: color-mix(in srgb, var(--c) 16%, transparent); }
.hero-kpi.on{ background: color-mix(in srgb, var(--c) 24%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); }
.hero-kpi:hover span{ color: var(--text); }
/* 2.58.3: «Уся техніка» - іконка-шари з кольорами всіх розділів */
.secsw a.all.on, .hero-ico.all{ background: linear-gradient(135deg, #30d158 0%, #0a84ff 55%, #ff9f0a 100%); color:#fff;
  box-shadow: 0 2px 12px rgba(10,132,255,.35); }
.secsw a.all:not(.on):hover{ background: color-mix(in srgb, #0a84ff 16%, transparent); }
body[data-eqsec="all"] .secname b{ background: linear-gradient(90deg, #30d158, #0a84ff 60%, #ff9f0a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero:has(.hero-ico.all) .hero-add{ background: #0a84ff !important; border-color: #0a84ff !important; }
.hero:has(.hero-ico.all) .hero-crumb b{ color: var(--text); }
/* 2.58.5: Персонал у стилі «Техніки» */
body[data-section="personnel"] .app-shell{ box-shadow: inset 0 3px 0 #0a84ff; }
body[data-section="personnel"] .sidebar{ background-image: linear-gradient(180deg, color-mix(in srgb, #0a84ff 10%, transparent) 0, transparent 260px); }
body[data-section="personnel"] .sb-item.active{ background: color-mix(in srgb, #0a84ff 20%, transparent); box-shadow: inset 3px 0 0 #0a84ff; }
.ring-facts{ display:flex; gap:22px; align-items:flex-end; text-align:center; }
.ring-facts b{ display:block; font-size:20px; color: var(--text); font-variant-numeric: tabular-nums; }
.ring-facts small{ font-size:11.5px; color: var(--muted); }
.ring-go{ font-size:12.5px; color: var(--c, var(--accent)); align-self:center; margin-left:8px; white-space:nowrap; }
@media (max-width: 760px){ .ring-facts{ display:none; } }
/* 2.58.6 */
.eq-table td.eq-name a{ white-space: nowrap; }
.eq-table td.nowrap{ white-space: nowrap; color: var(--muted); }
.miss-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, #ff9f0a 12%, transparent); border:1px solid color-mix(in srgb, #ff9f0a 35%, transparent); font-size:13.5px; }
.miss-bar > span:first-child{ margin-right:auto; }
.miss-list{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; }
.miss-row{ display:grid; grid-template-columns: minmax(120px, 1.3fr) 1fr auto auto; gap:12px; align-items:center; padding:8px 8px;
  border-radius:8px; color: inherit; text-decoration:none; font-size:13.5px; }
.miss-row:hover{ background: color-mix(in srgb, var(--text) 6%, transparent); }
.miss-track{ height:6px; border-radius:3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow:hidden; }
.miss-track i{ display:block; height:100%; background:#ff9f0a; border-radius:3px; }
.miss-n{ color: var(--muted); font-size:12.5px; white-space:nowrap; }
.miss-n b{ color: var(--text); }
.miss-go{ font-size:12px; color: var(--accent); white-space:nowrap; }
.miss-worst summary{ cursor:pointer; margin: 6px 0; }
mark.hl{ background: color-mix(in srgb, #ffd60a 45%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
/* 2.58.7: друк, колонки, сортування, закріплена назва */
.dd{ position:relative; display:inline-block; }
.dd > summary{ list-style:none; cursor:pointer; }
.dd > summary::-webkit-details-marker{ display:none; }
.dd-menu{ position:absolute; z-index:60; top: calc(100% + 6px); right:0; width:320px; background: var(--panel); border:1px solid var(--border);
  border-radius:14px; box-shadow: 0 20px 50px rgba(0,0,0,.45); padding:6px; text-align:left; }
.dd-menu > a{ display:flex; gap:10px; padding:9px 10px; border-radius:9px; color: var(--text); text-decoration:none; font-size:13.5px; align-items:flex-start; }
.dd-menu > a:hover{ background: color-mix(in srgb, var(--eqc, var(--accent)) 16%, transparent); }
.dd-menu small{ display:block; color: var(--muted); font-size:12px; font-weight:400; }
.dd-ic{ width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex:0 0 30px;
  background: color-mix(in srgb, var(--text) 8%, transparent); font-size:15px; }
.tb-left{ display:flex; align-items:center; gap:10px; }
.cols-dd .dd-menu{ left:0; right:auto; width:300px; }
.cols-dd summary.on{ border-color: var(--eqc, var(--accent)); background: color-mix(in srgb, var(--eqc, var(--accent)) 15%, transparent); }
.cols-h{ display:flex; justify-content:space-between; align-items:baseline; padding: 6px 10px 8px; font-size:13px; font-weight:650; }
.cols-h small{ font-weight:500; color: var(--muted); font-size:11.5px; }
.cols-list{ max-height: 360px; overflow:auto; }
.cols-it{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; font-size:13.5px; cursor: grab; user-select:none; margin:0; }
.cols-it:hover{ background: color-mix(in srgb, var(--text) 6%, transparent); }
.cols-it.drag{ opacity:.4; }
.cols-it.over{ box-shadow: inset 0 2px 0 var(--eqc, var(--accent)); }
.cols-it .grip{ color: var(--muted); letter-spacing:-2px; }
.cols-it input.sw{ margin-left:auto; appearance:none; -webkit-appearance:none; width:34px; height:20px; border-radius:10px; position:relative; cursor:pointer;
  background: color-mix(in srgb, var(--text) 18%, transparent); transition: background .15s; flex: 0 0 34px; }
.cols-it input.sw::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition: left .15s; }
.cols-it input.sw:checked{ background: var(--eqc, var(--accent)); }
body[data-eqsec="all"] .cols-it input.sw:checked{ background: var(--accent); }
.cols-it input.sw:checked::after{ left:16px; }
.cols-ft{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding: 8px 10px 4px; border-top:1px solid var(--border); margin-top:6px; font-size:12px; }
.eq-table th.sortable a{ color: inherit; text-decoration:none; white-space:nowrap; }
.eq-table th.sortable .s{ font-size:9px; margin-left:4px; opacity:0; color: var(--muted); transition: opacity .15s; }
.eq-table th.sortable:hover .s{ opacity:.8; }
.eq-table th.sorted{ color: var(--text); }
.eq-table th.sorted .s{ opacity:1; color: var(--eqc, var(--accent)); font-size:10px; }
.eq-table td.eq-name, .eq-table th.th-name{ position: sticky; left: 0; z-index: 1; background: var(--panel); box-shadow: 1px 0 0 var(--border); }
.eq-table thead th.th-name{ z-index: 3; }
.eq-table tr.pn-cur td.eq-name{ background: color-mix(in srgb, var(--eqc, var(--accent)) 14%, var(--panel)); }
@media (max-width: 760px){ .eq-table td.eq-name{ position: static; box-shadow:none; } }

/* ===== 2.58.8: вхід «знак» і головний екран ===== */
body.gate, body.gate-home{ margin:0; min-height:100vh; background:#111113; color:#f2f2f7; overflow-x:hidden;
  --gate-glow: 48,209,88; }
.gate-bg{ position:fixed; inset:0; pointer-events:none;
  background: radial-gradient(circle at 50% 40%, rgba(var(--gate-glow), .16), transparent 38%),
              radial-gradient(circle at 50% 40%, rgba(10,132,255,.10), transparent 62%); }
.gate-grid{ position:fixed; inset:0; pointer-events:none;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 70%); mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 70%); }
.gate-top{ position:fixed; top:20px; left:28px; right:28px; display:flex; align-items:center; gap:10px; font-size:13px; color:#8e8e93; z-index:2; }
.gate-top > span:first-child{ display:flex; align-items:center; gap:10px; }
.gate-top .gate-ver, .gate-top .gate-user{ margin-left:auto; }
.gate-center{ position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 80px 20px 60px; text-align:center; }
.gate-emblem{ position:relative; border:0; background:none; padding:0; cursor:pointer; width:240px; height:280px; display:flex; align-items:center; justify-content:center;
  transition: width .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1); outline:none; }
.gate-emblem img{ width:230px; height:auto; position:relative; z-index:1; transition: width .45s cubic-bezier(.2,.8,.2,1), transform .2s;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,.7)) drop-shadow(0 0 34px rgba(var(--gate-glow), .28)); animation: gateBreath 4.5s ease-in-out infinite; }
.gate-emblem:hover img{ transform: scale(1.03); }
.gate-emblem:focus-visible img{ outline: 2px solid rgba(var(--gate-glow), .7); outline-offset: 8px; border-radius: 20px; }
.gate-ring{ position:absolute; left:50%; top:50%; width:300px; height:300px; margin:-150px 0 0 -150px; border-radius:50%;
  border:2px solid rgba(var(--gate-glow), .35); box-shadow: 0 0 40px rgba(var(--gate-glow), .22) inset; animation: gateRing 4.5s ease-in-out infinite; transition: opacity .3s; }
.gate-ring.r2{ width:370px; height:370px; margin:-185px 0 0 -185px; border-color: rgba(var(--gate-glow), .14); animation-delay: .6s; }
@keyframes gateBreath{ 0%,100%{ filter: drop-shadow(0 20px 50px rgba(0,0,0,.7)) drop-shadow(0 0 22px rgba(var(--gate-glow), .18)); }
  50%{ filter: drop-shadow(0 20px 50px rgba(0,0,0,.7)) drop-shadow(0 0 48px rgba(var(--gate-glow), .45)); } }
@keyframes gateRing{ 0%,100%{ transform: scale(.97); opacity:.7; } 50%{ transform: scale(1.03); opacity:1; } }
.gate-title{ margin: 22px 0 4px; font-size: 32px; letter-spacing: .06em; font-weight: 800; transition: font-size .4s, margin .4s; }
.gate-sub{ color:#8e8e93; font-size:14px; }
.gate-hint{ margin-top: 26px; display:inline-flex; align-items:center; gap:10px; padding: 10px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color:#c7c7cc; font-size:14px; transition: opacity .25s, transform .25s; }
.gate-hint kbd, .gate-home kbd{ font: 600 11px ui-monospace, monospace; border:1px solid #48484a; border-radius:5px; padding:1px 6px; color:#aeaeb2; }
.gate-form{ width: 100%; max-width: 340px; margin-top: 22px; display:flex; flex-direction:column; gap:12px; text-align:left;
  opacity:0; transform: translateY(14px); pointer-events:none; max-height:0; overflow:hidden;
  transition: opacity .35s ease .1s, transform .35s ease .1s, max-height .45s ease; }
.gate-field span{ display:block; font-size:12px; color:#8e8e93; margin: 0 0 5px 4px; }
.gate-field input{ width:100%; padding: 13px 15px; font-size:16px; border-radius:12px; color:#fff; background: rgba(44,44,46,.85);
  border:1px solid rgba(255,255,255,.12); outline:none; transition: border-color .15s, box-shadow .15s; }
.gate-field input:focus{ border-color: rgba(var(--gate-glow), .7); box-shadow: 0 0 0 4px rgba(var(--gate-glow), .15); }
.gate-btn{ margin-top: 4px; padding: 13px; border:0; border-radius:12px; font-size:16px; font-weight:700; color:#fff; cursor:pointer;
  background: linear-gradient(135deg, #1f9e45, #30d158); box-shadow: 0 8px 24px rgba(var(--gate-glow), .3); }
.gate-btn:hover{ filter: brightness(1.08); }
.gate-back{ background:none; border:0; color:#8e8e93; font-size:13px; cursor:pointer; align-self:center; padding:4px; }
.gate-msg{ padding: 10px 12px; border-radius:10px; font-size:13.5px; background: rgba(48,209,88,.12); border:1px solid rgba(48,209,88,.3); color:#9ee6b0; }
.gate-msg.err{ background: rgba(255,69,58,.12); border-color: rgba(255,69,58,.35); color:#ff9a93; }
body.gate.open .gate-emblem{ width:140px; height:150px; }
body.gate.open .gate-emblem img{ width:120px; }
body.gate.open .gate-ring{ opacity:0; }
body.gate.open .gate-title{ font-size:24px; margin-top:12px; }
body.gate.open .gate-hint{ opacity:0; transform: translateY(-6px); pointer-events:none; height:0; margin:0; padding:0; border:0; overflow:hidden; }
body.gate.open .gate-form{ opacity:1; transform:none; pointer-events:auto; max-height: 520px; }
@media (max-width: 600px){
  .gate-emblem{ width:190px; height:220px; } .gate-emblem img{ width:170px; }
  .gate-ring{ width:230px; height:230px; margin:-115px 0 0 -115px; } .gate-ring.r2{ width:280px; height:280px; margin:-140px 0 0 -140px; }
  .gate-title{ font-size:26px; } .gate-top .gate-ver{ display:none; }
}
@media (prefers-reduced-motion: reduce){ .gate-emblem img, .gate-ring{ animation:none; } }

/* Головний екран (вибір розділу) у тому ж стилі */
.gate-home .gate-center{ justify-content:flex-start; padding-top: 14vh; }
.gate-home .gate-emblem{ width:130px; height:140px; cursor:default; }
.gate-home .gate-emblem img{ width:116px; animation-duration: 6s; }
.gate-home .gate-title{ font-size:26px; letter-spacing:0; margin-top:10px; }
.gh-user{ display:flex; align-items:center; gap:10px; }
.gh-user a{ color:#0a84ff; text-decoration:none; }
.gh-tiles{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.gh-tile{ width: 320px; padding: 18px 20px; border-radius:18px; background: rgba(44,44,46,.75); border:1px solid rgba(255,255,255,.08);
  text-align:left; display:flex; gap:14px; align-items:center; color:#f2f2f7; text-decoration:none; backdrop-filter: blur(10px);
  transition: transform .15s, border-color .15s, background .15s; animation: ghIn .45s cubic-bezier(.2,.8,.2,1) both; }
.gh-tile:nth-child(2){ animation-delay: .07s; }
.gh-tile:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.2); background: rgba(58,58,60,.8); }
@keyframes ghIn{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform:none; } }
.gh-ic{ width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; flex:0 0 50px; }
.gh-ic svg{ width:26px; height:26px; }
.gh-name{ font-size:17px; font-weight:700; display:flex; align-items:center; gap:6px; }
.gh-desc{ color:#8e8e93; font-size:12.5px; display:block; }
.gh-r{ margin-left:auto; text-align:right; white-space:nowrap; }
.gh-r b{ font-size:21px; display:block; }
.gh-r small{ color:#8e8e93; font-size:12px; display:block; }
.gh-bad{ color:#ff453a; font-size:12px; font-weight:600; }
.gh-today{ margin-top:16px; display:inline-flex; gap:10px; align-items:center; padding: 10px 16px; border-radius:12px; background: rgba(255,55,95,.12);
  border:1px solid rgba(255,55,95,.3); font-size:13.5px; color:#ffb3c1; text-decoration:none; animation: ghIn .45s ease .14s both; }
.gh-today:hover{ background: rgba(255,55,95,.18); }
.gh-warn{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:2; font-size:12.5px; color:#ffb340; background: rgba(255,159,10,.1);
  border:1px solid rgba(255,159,10,.3); padding: 7px 14px; border-radius:999px; text-decoration:none; white-space:nowrap; max-width: calc(100vw - 24px); overflow:hidden; text-overflow:ellipsis; }
body.gate.open .gate-ring{ animation: none; opacity: 0; visibility: hidden; }
@media (hover: none){ .gate-hint kbd{ display:none; } }
/* 2.58.9: вхід одразу на екрані зі знаком - два прозорі поля, Enter */
.gate .gate-emblem{ cursor: default; }
.gate-login{ margin-top: 24px; width: 100%; max-width: 300px; display:flex; flex-direction:column; gap:10px; align-items:stretch; }
.gate-pill{ width:100%; padding: 11px 18px; border-radius: 999px; text-align:center; font-size: 15px; color:#f2f2f7;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14); outline:none;
  transition: border-color .15s, background .15s, box-shadow .15s; }
.gate-pill::placeholder{ color:#8e8e93; }
.gate-pill:hover{ border-color: rgba(255,255,255,.24); }
.gate-pill:focus{ background: rgba(255,255,255,.07); border-color: rgba(var(--gate-glow), .65); box-shadow: 0 0 0 4px rgba(var(--gate-glow), .12); }
.gate-pill:-webkit-autofill{ -webkit-text-fill-color:#f2f2f7; -webkit-box-shadow: 0 0 0 40px #1b1d1c inset; transition: background-color 9999s; }
.gate-enter{ font-size: 11.5px; color:#636366; text-align:center; margin-top: 2px; }
.gate-err{ font-size: 13px; color:#ff8a80; text-align:center; margin-bottom: 2px; }
.gate-err.ok{ color:#8fe3a8; }
body.gate .gate-login input.gate-pill{ background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important; box-shadow: none !important; color:#f2f2f7 !important; text-align:center; padding: 11px 18px !important; font-size:15px !important; height:auto !important; }
body.gate .gate-login input.gate-pill:hover{ border-color: rgba(255,255,255,.24) !important; }
body.gate .gate-login input.gate-pill:focus{ background: rgba(255,255,255,.07) !important; border-color: rgba(48,209,88,.65) !important;
  box-shadow: 0 0 0 4px rgba(48,209,88,.12) !important; outline: none !important; }

/* 2.59.1: схема розгортання на мапі */
.map-wrap{ display:grid; grid-template-columns: minmax(0,1fr) 360px; gap:16px; align-items:start; }
@media (max-width: 1100px){ .map-wrap{ grid-template-columns: 1fr; } }
.map-card{ padding: 14px 16px 12px; }
.ua-map{ width:100%; height:auto; display:block; }
.ua-map .obl{ fill: color-mix(in srgb, var(--text) 5%, transparent); stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 1; stroke-linejoin: round; transition: fill .15s; }
.ua-map .obl.has{ fill: color-mix(in srgb, var(--mc) calc(var(--lv) * 100%), transparent); stroke: color-mix(in srgb, var(--mc) 70%, var(--text)); cursor: pointer; }
.ua-map .obl.has:hover{ fill: color-mix(in srgb, var(--mc) calc(var(--lv) * 100% + 15%), transparent); }
.ua-map .obl.sel{ stroke: var(--text); stroke-width: 2.5; }
.ua-map .lbl{ cursor:pointer; pointer-events: all; }
.ua-map .lbl .n{ font: 800 26px system-ui, sans-serif; fill: var(--text); paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 3px; }
.ua-map .lbl .t{ font: 600 14px system-ui, sans-serif; fill: var(--text); opacity: .85; paint-order: stroke; stroke: rgba(0,0,0,.5); stroke-width: 2.5px; }
.ua-map .lbl circle{ fill:#ff3b30; stroke: var(--panel); stroke-width: 2; }
.ua-map .lbl g text{ font: 700 11px system-ui, sans-serif; fill:#fff; }
html[data-theme="light"] .ua-map .lbl .n, html[data-theme="light"] .ua-map .lbl .t{ stroke: rgba(255,255,255,.7); }
.map-legend{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; font-size:12px; color: var(--muted); padding-top:8px; }
.map-legend i{ display:inline-block; width:16px; height:10px; border-radius:3px; background: var(--mc); margin-right:6px; vertical-align:middle; }
.map-legend .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.map-legend .sep{ width:1px; height:14px; background: var(--border); }
.map-side{ padding: 16px 16px 18px; max-height: calc(100vh - 140px); overflow:auto; position: sticky; top: 16px; }
.map-side h3{ margin: 0 0 2px; font-size: 17px; }
.map-side .sub{ color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
.ms-row{ display:grid; grid-template-columns: 1fr 90px 34px; gap:10px; align-items:center; padding: 8px 6px; border-top:1px solid var(--border); color: inherit; text-decoration:none; font-size:13.5px; border-radius:6px; }
.ms-row:hover{ background: color-mix(in srgb, var(--text) 5%, transparent); }
.ms-bar{ display:flex; height:6px; border-radius:3px; overflow:hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.ms-bar i{ display:block; height:100%; }
.ms-n{ text-align:right; font-variant-numeric: tabular-nums; font-weight:650; }
.ms-crit{ display:inline-block; min-width:16px; height:16px; border-radius:8px; background:#ff3b30; color:#fff; font: 700 10px/16px system-ui; text-align:center; padding: 0 4px; margin-left:4px; }
.ms-back{ font-size:12.5px; color: var(--accent); text-decoration:none; display:inline-block; margin-bottom:8px; }
.ms-town{ border-top:1px solid var(--border); padding: 8px 2px; }
.ms-town-h{ display:flex; justify-content:space-between; font-size:13.5px; margin-bottom:4px; }
.ms-town-h span{ color: var(--muted); font-size:12px; }
.ms-item{ display:flex; align-items:center; gap:8px; padding: 3px 4px; font-size:13px; color: inherit; text-decoration:none; border-radius:6px; }
.ms-item:hover{ background: color-mix(in srgb, var(--text) 6%, transparent); }
.ms-item i{ width:8px; height:8px; border-radius:50%; flex:0 0 8px; }
.ms-item small{ color: var(--muted); font-size:11.5px; margin-left:auto; }

/* ===== 2.59.1: список на всю ширину, липкі колонки без «латок» ===== */
.wrap{ max-width: none; }
table.eq-table tbody tr{ background: var(--panel); }
.eq-table td.eq-name, .eq-table td.td-act{ background: inherit !important; }
.eq-table td.eq-name, .eq-table th.th-name{ box-shadow: none; transition: box-shadow .15s; }
.table-card.sx-l .eq-table td.eq-name, .table-card.sx-l .eq-table th.th-name{ box-shadow: 8px 0 10px -8px rgba(0,0,0,.55), 1px 0 0 var(--border); }
.eq-table td.td-act, .eq-table th.th-act{ position: sticky; right: 0; z-index: 1; transition: box-shadow .15s; }
.eq-table th.th-act{ background: var(--panel); z-index: 3; }
.table-card.sx-r .eq-table td.td-act, .table-card.sx-r .eq-table th.th-act{ box-shadow: -8px 0 10px -8px rgba(0,0,0,.55), -1px 0 0 var(--border); }
.eq-table td.eq-name a{ font-weight: 600; }
@media (max-width: 760px){ .eq-table td.td-act{ position: static; } }

/* ===== 2.59.2: без інтернету ===== */
.off-grid{ display:grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap:18px; max-width: 1100px; align-items:start; }
@media (max-width: 900px){ .off-grid{ grid-template-columns: 1fr; } }
.off-card{ padding: 20px 22px !important; }
.off-step{ display:flex; gap:14px; align-items:flex-start; margin: 4px 0 16px; }
.off-step > span{ flex:0 0 28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px;
  background: color-mix(in srgb, #5e5ce6 22%, transparent); color:#9d9bff; }
.off-step b{ display:block; font-size:15px; margin-top:3px; }
.off-step small{ display:block; color: var(--muted); margin-top:4px; line-height:1.45; font-size:13px; }
.off-form{ display:flex; gap:10px; margin: -4px 0 20px 42px; flex-wrap:wrap; }
.off-note{ margin: -4px 0 20px 42px; padding: 10px 12px; border-radius:10px; font-size:13.5px; display:flex; gap:8px; align-items:center; }
.off-note svg{ width:16px; height:16px; }
.off-note.ok{ background: rgba(48,209,88,.12); color:#30d158; }
.off-note.warn{ background: rgba(255,159,10,.12); color:#ff9f0a; }
.off-h{ margin:0 0 10px; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color: var(--muted); font-weight:600; }
.off-addr{ display:flex; flex-direction:column; gap:3px; margin-bottom:10px; }
.off-addr code{ font-size:15px; font-weight:600; }
.off-addr small, .off-dev small{ color: var(--muted); font-size:12px; display:block; }
.off-dev{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--border); font-size:13.5px; }
.off-dot{ width:9px; height:9px; border-radius:50%; margin-top:6px; flex:0 0 9px; background:#8e8e93; }
.off-dot.approved{ background:#30d158; } .off-dot.pending{ background:#ff9f0a; } .off-dot.revoked{ background:#ff453a; }

/* ===== 2.60.0: Пальне ===== */
body[data-section="fuel"]{ --sec: #ff9f0a; }
.chip-check.fuel input:checked + span{ background: color-mix(in srgb, #ff9f0a 18%, transparent); border-color: color-mix(in srgb, #ff9f0a 45%, transparent); }
.chip-check.fuel input:checked + span::before{ background: #ff9f0a; border-color: #ff9f0a; }
.tag.fuel{ background: color-mix(in srgb, #ff9f0a 16%, transparent); color: #ffb340; }
.fu-head .btn svg{ width:15px; height:15px; vertical-align:-3px; }
.fu-bar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin: 0 0 14px; }
.fu-deps{ display:flex; gap:6px; flex-wrap:wrap; }
.fu-dep{ display:inline-flex; align-items:center; gap:7px; padding: 7px 12px; border-radius: 999px; background: var(--panel); border:1px solid var(--border);
  color: var(--text); text-decoration:none; font-weight:600; font-size:13.5px; }
.fu-dep small{ color: var(--muted); font-weight:500; }
.fu-dep.on{ background: color-mix(in srgb, #ff9f0a 18%, var(--panel)); border-color: color-mix(in srgb, #ff9f0a 50%, transparent); }
.fu-dot{ width:8px; height:8px; border-radius:50%; background:#8e8e93; }
.fu-dot.ok{ background:#30d158; } .fu-dot.part{ background:#ff9f0a; } .fu-dot.none{ background:#ff453a; }
.fu-date{ display:flex; gap:6px; align-items:center; margin-left:auto; }
.fu-date input[type=date]{ padding: 6px 10px; font-size:14px; }
.fu-date .disabled{ pointer-events:none; opacity:.35; }
.fu-note{ background: rgba(255,159,10,.12); color: #ffb340; border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px; }
.fu-ksp{ padding: 16px 18px !important; margin-bottom: 14px; border-left: 3px solid #ff9f0a !important; }
.fu-ksp-t{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.fu-ksp-t svg{ width:17px; height:17px; color:#ff9f0a; }
.fu-ksp-t .muted{ margin-left:auto; font-size:13px; }
.fu-ksp-g{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items:end; }
.fu-f{ display:flex; flex-direction:column; gap:5px; }
.fu-f > span{ font-size:12px; color: var(--muted); }
.fu-f b{ font-size:17px; padding: 6px 0; }
.fu-big{ font-size:22px !important; color:#ffb340; }
.fu-big.neg, .fu-c.neg{ color:#ff453a !important; }
.fu-form input[type=text]{ font-size:16px; padding: 8px 10px; width:100%; text-align:right; font-variant-numeric: tabular-nums; }
.fu-form.ro input{ opacity:.75; }
.fu-ksp .fu-setf{ display:none; } .fu-ksp .fu-setf.open{ display:flex; }
.fu-settoggle{ margin-top:10px; font-size:12.5px; color: var(--muted); display:inline-flex; gap:5px; align-items:center; }
.fu-settoggle svg{ width:13px; height:13px; }
.fu-list{ padding: 4px 0 !important; }
.fu-row{ display:grid; grid-template-columns: minmax(200px, 1.6fr) 80px 120px 120px 110px 40px; gap: 10px; align-items:center;
  padding: 9px 16px; border-bottom: 1px solid var(--border); }
.fu-row:last-child{ border-bottom: 0; }
.fu-hd{ font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing:.05em; padding-top:10px; padding-bottom:8px; }
.fu-hd span:nth-child(n+2){ text-align:right; }
.fu-name b{ display:block; font-size:14.5px; }
.fu-name small{ color: var(--muted); font-size: 12px; }
.fu-prev-m{ display:none; }
.fu-prev{ text-align:right; color: var(--muted); font-variant-numeric: tabular-nums; }
.fu-in > span, .fu-bal > span{ display:none; }
.fu-bal{ text-align:right; }
.fu-bal b{ font-size:16px; font-variant-numeric: tabular-nums; }
.fu-row.done .fu-bal b{ color:#30d158; }
.fu-row.warn .fu-bal b{ color:#ff9f0a; }
.fu-row.cars{ background: color-mix(in srgb, var(--text) 3%, transparent); }
.fu-tools{ text-align:right; }
.fu-tools .btn svg{ width:14px; height:14px; }
.fu-row .fu-setf{ grid-column: 1 / -1; display:none; gap:10px; align-items:center; font-size:13px; color: var(--muted); }
.fu-row .fu-setf.open{ display:flex; }
.fu-row .fu-setf input{ max-width: 140px; }
.fu-warn{ grid-column: 1 / -1; font-size:12.5px; color:#ff9f0a; display:none; }
.fu-row.warn .fu-warn{ display:block; }
.fu-save{ position: sticky; bottom: 0; z-index: 5; display:flex; justify-content:flex-end; align-items:center; gap: 14px; padding: 12px 4px;
  background: linear-gradient(transparent, var(--bg) 35%); }
.fu-save .btn{ min-width: 160px; font-size: 15px; padding: 10px 18px; }
@media (max-width: 760px){
  .fu-date{ margin-left:0; width:100%; }
  .fu-date input[type=date]{ flex:1; }
  .fu-hd{ display:none; }
  .fu-row{ grid-template-columns: 1fr 1fr 1fr; gap: 8px 10px; padding: 12px 14px; }
  .fu-name{ grid-column: 1 / -1; display:flex; flex-wrap:wrap; align-items:baseline; gap: 2px 10px; }
  .fu-name b{ display:inline; }
  .fu-prev-m{ display:inline; margin-left:auto; color: var(--muted); font-size: 13px; }
  .fu-prev, .fu-tools{ display:none; }
  .fu-in > span, .fu-bal > span{ display:block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
  .fu-bal{ text-align:left; }
  .fu-bal b{ font-size: 20px; display:block; padding-top: 4px; }
  .fu-row .fu-setf{ display:flex; } .fu-row .fu-setf:not(.open){ display:none; }
  .fu-save{ bottom: 64px; }
  .fu-save .btn{ flex:1; }
}
.fu-range{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding: 12px 16px !important; margin-bottom: 14px; }
.fu-range input[type=date]{ padding: 5px 8px; }
.fu-tbl-card{ overflow:auto; max-height: calc(100vh - 230px); }
.fu-tbl{ border-collapse: separate; border-spacing:0; font-size: 13px; font-variant-numeric: tabular-nums; }
.fu-tbl th, .fu-tbl td{ padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.fu-tbl thead th{ position: sticky; top: 0; background: var(--panel); z-index: 2; font-weight:600; }
.fu-tbl thead tr:nth-child(2) th{ top: 31px; font-size: 11px; color: var(--muted); }
.fu-tbl .fu-sticky{ position: sticky; left: 0; background: var(--panel); z-index: 1; min-width: 190px; box-shadow: 1px 0 0 var(--border); }
.fu-tbl thead .fu-sticky{ z-index: 3; }
.fu-tbl td.fu-sticky small{ display:block; color: var(--muted); font-size: 11px; font-weight:400; }
.fu-dh a{ color: inherit; text-decoration: none; }
.fu-dh a:hover{ color: #ffb340; }
.fu-dh, .fu-sh.first, .fu-c.first{ border-left: 1px solid var(--border); }
.fu-c{ text-align:right; }
.fu-c.none{ color: color-mix(in srgb, var(--muted) 55%, transparent); }
.fu-c.bal{ font-weight: 600; }
.fu-c.set, .fu-legend.set{ box-shadow: inset 0 -2px 0 #ff9f0a; }
.fu-legend{ display:inline-block; padding: 0 5px; font-weight:600; }
.fu-legend.neg{ color:#ff453a; }
.fu-ksp-row td{ background: color-mix(in srgb, #ff9f0a 9%, var(--panel)); font-weight:600; }
.fu-tot-row td{ background: color-mix(in srgb, var(--text) 5%, var(--panel)); font-weight:700; border-bottom: 2px solid var(--border); }
.fu-tbl tbody tr:hover td{ background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.fu-setup{ padding: 16px 18px !important; margin-bottom: 14px; }
.fu-setup.off{ opacity: .6; }
.fu-setup-h{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom: 10px; }
.fu-inline{ display:flex; gap:8px; align-items:center; }
.fu-dname{ font-size: 17px; font-weight: 700; padding: 6px 10px; min-width: 260px; }
.fu-prow{ display:grid; grid-template-columns: 28px minmax(150px,1.2fr) minmax(150px,1fr) 170px auto; gap: 8px; align-items:center; padding: 5px 0; border-bottom: 1px solid var(--border); }
.fu-prow.off{ opacity:.5; }
.fu-prow input, .fu-prow select{ padding: 5px 8px; font-size: 13.5px; }
.fu-pn{ color: var(--muted); font-size: 12px; text-align:right; }
.fu-pbtns{ display:flex; gap:4px; }
.fu-padd{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top: 10px; }
.fu-padd input[type=text]{ padding: 6px 10px; min-width: 200px; }
.fu-users{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.fu-lima-list{ display:flex; flex-wrap:wrap; gap: 6px 16px; font-size: 13px; margin-top: 8px; }
@media (max-width: 900px){ .fu-prow{ grid-template-columns: 24px 1fr 1fr; } .fu-prow select, .fu-pbtns{ grid-column: 2 / -1; } }
@media (max-width: 760px){
  .fu-ksp-g{ grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
  .fu-ksp .fu-setf.open{ grid-column: 1 / -1; }
  .fu-ksp-t .muted{ font-size: 12px; }
  .fu-big{ font-size: 20px !important; }
  .fu-f b{ font-size: 16px; }
}

/* ===== 2.60.1: застосунок на телефоні ===== */
.ph-grid{ display:grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: 18px; max-width: 1200px; align-items:start; }
@media (max-width: 980px){ .ph-grid{ grid-template-columns: 1fr; } }
.ph-card{ padding: 20px 22px !important; line-height: 1.55; font-size: 14.5px; }
.ph-card h3{ font-size: 15px; margin: 18px 0 8px; }
.ph-url{ display:flex; flex-wrap:wrap; gap: 8px 12px; align-items:center; padding: 14px 16px; border-radius: 12px;
  background: color-mix(in srgb, #30d158 10%, var(--panel-2)); border: 1px solid color-mix(in srgb, #30d158 30%, transparent); }
.ph-url > span{ width:100%; font-size: 12px; }
.ph-url code{ font-size: 17px; font-weight: 700; word-break: break-all; }
.ph-warn{ width:100%; color:#ff9f0a; }
.ph-steps{ padding-left: 22px; margin: 0; }
.ph-steps li{ margin: 6px 0; }
.ph-steps ul{ padding-left: 18px; margin: 4px 0; }
.ph-share{ display:inline-block; padding: 0 5px; border-radius: 5px; background: var(--panel-2); }
.ph-ok{ color:#30d158; display:inline-flex; gap:4px; align-items:center; font-weight:600; }
.ph-ok svg, .ph-install svg{ width:15px; height:15px; }
.ph-install{ margin-top: 12px; }
/* Режим застосунку (значок на екрані телефона) */
@media (display-mode: standalone){
  .mobile-bar{ padding-top: env(safe-area-inset-top); }
  .sb-foot .sb-menu a[href$="/phone"]{ display:none; }
}
body{ padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* ===== 2.60.2: компактне внесення пального ===== */
.fu-form{ max-width: 960px; }
.fu-ksp{ padding: 10px 14px !important; margin-bottom: 10px; }
.fu-ksp-row{ display:flex; align-items:center; gap: 18px; flex-wrap: wrap; }
.fu-ksp-n{ display:flex; align-items:center; gap:7px; margin-right:auto; font-size:14px; }
.fu-ksp-n svg{ width:15px; height:15px; color:#ff9f0a; }
.fu-ksp-n small{ color: var(--muted); font-size:12px; }
.fu-kf{ display:flex; align-items:center; gap:8px; }
.fu-kf > span{ font-size:12px; color: var(--muted); }
.fu-kf b{ font-size:15px; font-variant-numeric: tabular-nums; }
.fu-kf input[type=text]{ width: 90px !important; padding: 5px 8px !important; font-size: 14px !important; }
.fu-big{ font-size: 17px !important; }
.fu-ksp .fu-setf{ display:none; margin-top: 8px; gap: 10px; align-items:center; font-size: 12.5px; color: var(--muted); }
.fu-ksp .fu-setf.open{ display:flex; }
.fu-ksp .fu-setf input{ width: 100px !important; padding: 5px 8px !important; font-size: 14px !important; }
.fu-row{ grid-template-columns: minmax(0, 1fr) 56px 92px 92px 64px 30px; gap: 8px; padding: 5px 12px; }
.fu-hd{ padding-top: 7px; padding-bottom: 6px; font-size: 10.5px; }
.fu-name{ min-width:0; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }
.fu-name b{ display:inline; font-size: 13.5px; }
.fu-name small{ margin-left: 8px; font-size: 11.5px; }
.fu-form .fu-in input[type=text]{ padding: 4px 8px; font-size: 14px; height: 30px; }
.fu-prev{ font-size: 13px; }
.fu-bal b{ font-size: 14.5px; }
.fu-bal b.isset, .fu-big.isset{ box-shadow: inset 0 -2px 0 #ff9f0a; }
.fu-tools .btn{ width: 26px; height: 26px; padding: 0; opacity: .45; }
.fu-tools .btn:hover, .fu-tools .btn.on, .fu-ksp .fu-settoggle.on{ opacity: 1; color: #ff9f0a; }
.fu-row .fu-setf{ padding: 2px 0 4px; font-size: 12.5px; }
.fu-row .fu-setf input{ max-width: 92px; height: 28px; font-size: 14px; padding: 3px 8px; }
.fu-warn{ font-size: 11.5px; margin-top: -2px; }
.fu-save{ max-width: 960px; padding: 10px 0; }
.fu-save .btn{ min-width: 140px; font-size: 14px; padding: 8px 16px; }
.fu-note{ padding: 8px 12px; font-size: 13px; max-width: 960px; box-sizing: border-box; }
@media (max-width: 760px){
  .fu-ksp-row{ gap: 10px 14px; }
  .fu-ksp-n{ width: 100%; }
  .fu-row{ grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; padding: 8px 12px; }
  .fu-name{ white-space: normal; }
  .fu-form .fu-in input[type=text]{ height: 36px; font-size: 16px; }
  .fu-bal b{ font-size: 18px; padding-top: 2px; }
  .fu-in > span, .fu-bal > span{ font-size: 11px; margin-bottom: 2px; }
}
.fu-head, .fu-bar{ max-width: 960px; }
.fu-form .fu-in input[type=text], .fu-form .fu-row .fu-setf input[type=text]{ height: 28px !important; min-height: 0 !important; padding: 2px 8px !important; font-size: 14px !important; border-radius: 7px; }
.fu-row{ padding-top: 4px; padding-bottom: 4px; }
@media (max-width: 760px){ .fu-form .fu-in input[type=text]{ height: 36px !important; font-size: 16px !important; } }
.fu-tools{ display:flex; justify-content:flex-end; align-items:center; line-height:0; }
.fu-tools .btn{ min-height:0 !important; display:inline-flex; align-items:center; justify-content:center; }
.fu-kf .btn, .fu-ksp-row .fu-settoggle{ width: 26px; height: 26px; padding: 0; min-height: 0; display:inline-flex; align-items:center; justify-content:center; margin-top: 0; }
.fu-ksp-row .fu-settoggle svg{ width: 13px; height: 13px; }
@media (max-width: 760px){ .fu-row .fu-tools{ display:none; } }
.fu-tools{ height: 28px; }
.fu-tools .btn, .fu-ksp-row .fu-settoggle{ margin: 0 !important; }

/* ===== 2.60.3: підказка «додати на екран» ===== */
.ih{ position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 200; display:flex; gap: 12px; align-items:flex-start;
  padding: 14px 40px 14px 14px; border-radius: 16px; background: #2c2c2e; color: #f2f2f7; box-shadow: 0 10px 40px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 520px; margin: 0 auto; }
.ih[hidden]{ display:none; }
.ih img{ border-radius: 11px; flex: 0 0 44px; }
.ih-t b{ display:block; margin-bottom: 3px; }
.ih-t .ih-ios b, .ih-t .ih-and b{ display:inline; }
.ih-t small{ color: #a1a1a6; }
.ih-k{ display:inline-block; min-width: 18px; text-align:center; padding: 0 4px; border-radius: 5px; background: rgba(255,255,255,.12); }
.ih-ios, .ih-and{ display:none; }
.ih.is-ios .ih-ios, .ih.is-android .ih-and{ display:inline; }
.ih-x{ position:absolute; top: 6px; right: 8px; border:0; background:transparent; color:#a1a1a6; font-size: 22px; line-height: 1; padding: 4px 8px; cursor:pointer; }
.ih-btn{ display:block; margin-top: 8px; }
body:has(.tabbar) .ih{ bottom: calc(76px + env(safe-area-inset-bottom)); }
.ih{ font-size: 13px; padding: 10px 36px 10px 12px; gap: 10px; }
.ih img{ width: 36px; height: 36px; flex-basis: 36px; border-radius: 9px; }
body.gate .ih{ top: calc(10px + env(safe-area-inset-top)); bottom: auto; }
/* 2.60.4: внесення пального - на всю ширину */
.fu-form, .fu-head, .fu-bar, .fu-save, .fu-note{ max-width: none; }
@media (min-width: 761px){
  .fu-row{ grid-template-columns: minmax(240px, 2.2fr) minmax(56px, .6fr) minmax(92px, .8fr) minmax(92px, .8fr) minmax(64px, .6fr) 30px; gap: 2px 14px; padding-left: 16px; padding-right: 12px; }
  .fu-in{ display:flex; justify-content:flex-end; }
  .fu-form .fu-in input[type=text]{ max-width: 150px; }
  .fu-hd span:nth-child(3), .fu-hd span:nth-child(4){ padding-right: 4px; }
}

/* ===== 2.60.5: доступ до пального ===== */
.fa-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.fa-card{ padding: 14px 16px !important; }
.fa-h{ display:flex; align-items:center; gap:8px; margin-bottom: 8px; font-size: 15px; }
.fa-h svg{ width:16px; height:16px; color:#ff9f0a; }
.fa-h .muted{ margin-left:auto; font-size: 12.5px; }
.fa-u{ display:flex; align-items:center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.fa-n{ flex:1; min-width:0; }
.fa-n b{ display:block; font-size: 14px; }
.fa-n small{ color: var(--muted); font-size: 12px; }
.fa-warn{ color:#ff9f0a; }
.fa-empty{ padding: 6px 0 10px; font-size: 13px; }
.fa-add{ margin-top: 8px; }
.fa-add summary{ cursor:pointer; color: var(--accent); font-size: 13.5px; font-weight: 600; padding: 4px 0; }
.fa-form{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.fa-form input{ padding: 7px 10px; font-size: 14px; }
.fa-form button{ justify-self:start; }
.fa-exist{ display:flex; gap: 8px; margin-top: 10px; align-items:center; }
.fa-exist select{ flex:1; min-width:0; padding: 5px 8px; font-size: 13px; }

/* 2.60.8: зрозуміліша таблиця пального */
.fu-tbl-card{ width: fit-content; max-width: 100%; }
.fu-tbl{ font-size: 13.5px; }
.fu-tbl thead tr:nth-child(2) th{ font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; }
.fu-tbl .fu-c{ min-width: 64px; padding: 7px 12px; }
.fu-tbl td.fu-sticky{ min-width: 220px; }
.fu-tbl thead .fu-dh{ font-size: 14px; }
.fu-grp td{ background: color-mix(in srgb, #ff9f0a 14%, var(--panel)) !important; color: #ffb340; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; padding-top: 9px; padding-bottom: 9px; }
.fu-dep-row td{ background: color-mix(in srgb, #ff9f0a 7%, var(--panel)); font-weight: 600; }
.fu-dep-row td.fu-sticky small{ font-weight: 400; }
.fu-plus{ color: #30d158; } .fu-minus{ color: #ff9f0a; }
.fu-c.bal{ background-image: linear-gradient(color-mix(in srgb, var(--text) 4%, transparent), color-mix(in srgb, var(--text) 4%, transparent)); }
.fu-tbl .fu-c.set{ box-shadow: none; position: relative; }
.fu-tbl .fu-c.set::after{ content:""; position:absolute; top:6px; right:5px; width:6px; height:6px; border-radius:50%; background:#ff9f0a; }
.fu-legend.set{ box-shadow:none; position: relative; padding-right: 10px; }
.fu-legend.set::after{ content:""; position:absolute; top:1px; right:1px; width:6px; height:6px; border-radius:50%; background:#ff9f0a; }
.fu-tbl thead th{ z-index: 5; }
.fu-tbl thead .fu-sticky{ z-index: 6; }
.fu-tbl .fu-c.set{ z-index: 0; }
/* 2.60.9: разом по всіх КСП */
.fu-grp-all td{ background: color-mix(in srgb, #0a84ff 16%, var(--panel)) !important; color: #64b5ff; }
.fu-all-row td{ background: color-mix(in srgb, #0a84ff 9%, var(--panel)); font-weight: 800; font-size: 14.5px; }
.fu-grand .fu-tot-row td{ border-bottom: 1px solid var(--border); }