:root{
  --bg:#14171a; --surface:#1c2126; --surface-2:#242a31; --border:#333b44;
  --text:#ece9e2; --muted:#8b95a1; --orange:#ff7a29; --orange-dim:#4a3421;
  --green:#5fd98a; --green-dim:#1e3327; --red:#ff5c5c; --red-dim:#3a2225; --blue:#5b9bd9;
  /* accent-ink — колір ТЕКСТУ поверх суцільної плашки акцентного кольору
     (кнопки, значок ДЛ, іконка сповіщення): на темних темах це темний
     текст (акцент завжди яскравий), на світлій темі — навпаки, білий.
     orange-border/orange-hover/green-border — дрібні відтінки, що раніше
     були захардкоджені окремими hex-значеннями (не змінювались темою) —
     тепер теж змінні, щоб 2-й і 3-й варіант дизайну (нижче) виглядали
     цілісно, а не з "залишками" кольорів першого варіанту. */
  --accent-ink:#14171a; --orange-border:#6b4020; --orange-hover:#ff8c47; --green-border:#2c5a3f;
}
*{box-sizing:border-box;}
/* Запобіжник: якщо десь на сторінці якийсь елемент раптом стане ширшим за
   екран (довгий рядок у таблиці, майбутня зміна тощо) — раніше через це
   ВЕСЬ сайт ставав горизонтально прокрутним і на телефоні виглядав "не на
   всю ширину" (контент притиснутий ліворуч, порожньо праворуч). Кожна
   таблиця й так має власну прокрутку (.table-wrap{overflow:auto}) — їй
   overflow-x:hidden тут не заважає, а сторінку в цілому захищає. */
html,body{overflow-x:hidden;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',Arial,sans-serif;-webkit-font-smoothing:antialiased;}
/* Смуга прокрутки в темі — за замовчуванням браузер малює світлий системний
   повзунок, який випадає з дизайну. Firefox — через scrollbar-color/-width,
   Chrome/Edge/Safari — через ::-webkit-scrollbar. Застосовано глобально (і
   для .table-wrap теж, бо там своя горизонтальна прокрутка). */
*{scrollbar-color:var(--border) var(--surface); scrollbar-width:thin;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--surface);}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;border:2px solid var(--surface);}
::-webkit-scrollbar-thumb:hover{background:var(--muted);}
.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;}
h1,h2,h3,.disp{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.02em;}
/* Відступи зменшено (в т.ч. нижче по всій сторінці) — щоб влазило більше
   без прокрутки, зберігаючи розбірливість. */
.wrap{max-width:1800px;margin:0 auto;padding:16px 20px 40px;}
.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px;margin-bottom:14px;border-bottom:1px solid var(--border);padding-bottom:12px;}
.top .brand{display:flex;align-items:center;gap:12px;}
.plate{background:var(--orange);color:var(--accent-ink);font-family:'IBM Plex Mono',monospace;font-weight:600;padding:5px 10px;border-radius:4px;font-size:13px;letter-spacing:.05em;}
.top h1{font-size:24px;margin:0;font-weight:600;color:var(--text);}
.top .sub{color:var(--muted);font-size:13px;margin-top:2px;}
.period{color:var(--muted);font-size:13px;text-align:right;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:10px;}
.period select, .period input{background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:6px 10px;font-family:'IBM Plex Mono',monospace;}
.logout{color:var(--muted);font-size:12px;text-decoration:underline;cursor:pointer;background:none;border:none;}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:14px;}
.kpi{background:var(--surface);padding:11px 16px;}
.kpi .lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.kpi .val{font-size:20px;font-weight:600;}
.kpi.profit .val{color:var(--green);}
.kpi.warn .val{color:var(--orange);}
/* Панель вкладок і далі прилипає до верху сторінки під час прокрутки — це
   навігація, зручно мати завжди напохваті. Заголовки таблиць більше НЕ
   прилипають (див. .table-wrap) — раніше координація цих двох окремих
   sticky-елементів і була джерелом давнього бага, тепер конфліктувати
   нема з чим. min-height (не height!) — щоб на вузьких екранах, де вкладки
   переносяться на 2 рядки, панель могла вирости, а не обрізати другий рядок. */
.tabs{display:flex;align-items:center;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--border);flex-wrap:wrap;position:sticky;top:0;z-index:100;background:var(--bg);min-height:40px;box-sizing:border-box;}
.tab{padding:8px 16px;font-family:'Oswald',sans-serif;font-size:14px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;user-select:none;}
.tab.active{color:var(--orange);border-bottom-color:var(--orange);}
.tab:hover{color:var(--text);}
.panel{display:none;}
.panel.active{display:block;}
.alert{background:linear-gradient(135deg,var(--orange-dim),var(--surface));border:1px solid var(--orange-border);border-left:3px solid var(--orange);border-radius:10px;padding:14px 18px;margin-bottom:16px;}
.alert-head{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.alert-head .ico{width:26px;height:26px;border-radius:6px;background:var(--orange);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none;}
.alert-head b{font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:.02em;text-transform:uppercase;}
.alert p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;}
.missing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:12px;}
.missing-item{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;font-size:13px;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-bottom:16px;}
.card-head{padding:11px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;}
.card-head h2{font-size:15px;margin:0;font-weight:500;color:var(--text);}
.card-head .note{font-size:12px;color:var(--muted);}
/* Каскад прибутку — згортається, щоб не займати місце на екрані, коли він
   зараз не потрібен. Стан (згорнуто/розгорнуто) запам'ятовується між
   заходами (localStorage), щоб не доводилось згортати заново щоразу. */
#waterfallCard.collapsed .waterfall-row{display:none;}
#waterfallCard.collapsed .card-head{border-bottom:none;}
/* РАНІШЕ таблиці мали власну обмежену висотою прокрутну "коробку"
   (max-height + прилипаючий заголовок top:0 всередині неї) — окремий
   скрол таблиці ПОВЕРХ звичайного скролу сторінки. За проханням прибрано:
   тепер таблиця просто розгортається на всю довжину, і гортається сторінка
   ЦІЛКОМ, як одна звичайна сторінка, без "подвійного" скролу. thead більше
   НЕ прилипає (не position:sticky) — саме це й було коренем давнього багу
   "рядок ховається під заголовком" (два незалежні sticky-елементи, шапка
   таблиці й панель вкладок, мусили щоразу збігтися пікселем у піксель) —
   без sticky-заголовка в таблиці цей конфлікт просто неможливий. Панель
   вкладок (.tabs) лишається прилипати окремо — це навігація, а не таблиця,
   й ніхто на неї не скаржився. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
/* border-collapse:separate (не collapse!) — просто для однорідного вигляду
   рамок між рядками/колонками. */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
/* Комірки мають white-space:nowrap (нижче) — без цього перевизначення
   таблиця стискається під ширину обгортки замість того, щоб рости і
   вмикати горизонтальну прокрутку в .table-wrap, і зайві колонки просто
   візуально обрізаються без жодного скролбару. */
.table-wrap table{width:auto;min-width:100%;}
thead th{text-align:right;padding:7px 14px;background:var(--surface-2);color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;font-weight:600;border-bottom:1px solid var(--border);white-space:nowrap;}
thead th:first-child, thead th:nth-child(2){text-align:left;}
thead th.sortable{cursor:pointer;user-select:none;}
thead th.sortable:hover{color:var(--text);}
thead th .sort-arrow{display:inline-block;margin-left:4px;color:var(--orange);width:10px;}
tbody td{padding:7px 14px;text-align:right;border-bottom:1px solid var(--border);white-space:nowrap;}
tbody td:first-child, tbody td:nth-child(2){text-align:left;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--surface-2);}
tr.total td{background:var(--surface-2);font-weight:600;border-top:1px solid var(--border);}
/* Підсвітка авто в "Автопарк" після кліку на номер у "Працівниках" (див.
   jumpToVehicle в app.js) — колір з теми, а не жорстко прибитий, щоб
   лишався контрастним у всіх 3 варіантах дизайну. Зникає при кліку де
   завгодно поза цим рядком (document click listener в app.js). */
tbody tr.row-highlight td{background:var(--orange-dim);border-bottom-color:var(--orange-border);}
.plate-link{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;}
.plate-link:hover{color:var(--orange);}
.name{font-weight:600;}
.plate-cell{color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:12px;}
.pos{font-size:11px;color:var(--muted);}
.badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:20px;font-weight:600;letter-spacing:.02em;}
.badge.debt{background:var(--red-dim);color:var(--red);}
.badge.ok{background:var(--green-dim);color:var(--green);}
/* Довідка при наведенні — замінює довгі постійно видимі підказки: маленьке
   коло з "?", повний текст показує браузерний title при наведенні мишкою. */
.note-icon{color:var(--orange);cursor:help;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border:1px solid var(--orange);border-radius:50%;font-size:10px;font-weight:700;line-height:1;margin-left:6px;vertical-align:middle;flex:none;}
.mini-select{background:var(--surface-2);color:var(--text);border:1px solid var(--border);border-radius:4px;font-size:11px;padding:3px 6px;margin-top:5px;display:block;}
.mini-check{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-top:5px;cursor:pointer;}
.mini-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:12px;padding:2px 9px;font-size:10px;cursor:pointer;margin-left:6px;}
.mini-btn:hover{border-color:var(--orange);color:var(--orange);}
.bar-cell{display:flex;align-items:center;gap:8px;justify-content:flex-end;}
.bar-track{width:60px;height:5px;background:var(--surface-2);border-radius:3px;overflow:hidden;}
.bar-fill{height:100%;background:var(--green);}
.foot-note{font-size:12px;color:var(--muted);padding:14px 18px;line-height:1.6;border-top:1px solid var(--border);}
.exp-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;padding:18px;}
.add-form{display:flex;gap:10px;padding:16px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.add-form input, .add-form select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:9px 12px;font-family:'Inter',Arial,sans-serif;font-size:13px;}
.add-form input[type="text"]{flex:2;min-width:180px;}
.add-form select{flex:1;min-width:140px;}
.add-form input[type="number"], .add-form input[type="date"]{width:150px;font-family:'IBM Plex Mono',monospace;}
.add-form button{background:var(--orange);color:var(--accent-ink);border:none;border-radius:6px;padding:9px 16px;font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;}
.add-form button:hover{background:var(--orange-hover);}
.exp-list .row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
.exp-list .row .nm{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.exp-list .row:last-child{border-bottom:none;}
.exp-list .row .barbg{flex:1;height:6px;background:var(--surface-2);border-radius:3px;margin:0 12px;overflow:hidden;}
.exp-list .row .barfg{height:100%;background:var(--blue);}
.exp-side{background:var(--surface-2);border-radius:8px;padding:16px;}
.exp-side h3{font-size:13px;margin:0 0 12px;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0;font-family:'Inter';}
.exp-side .big{font-size:26px;font-weight:600;color:var(--orange);margin-bottom:4px;}
.waterfall-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px;}
.wf-step{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;min-width:150px;}
.wf-step .l{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.wf-step .v{font-size:15px;font-weight:600;}
.wf-final{background:var(--green-dim);border:1px solid var(--green-border);border-radius:8px;padding:10px 16px;min-width:170px;}
.wf-final .l{font-size:10.5px;color:var(--green);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.wf-final .v{font-size:18px;font-weight:700;color:var(--green);}
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:36px;width:340px;}
.login-card h1{font-size:20px;margin:0 0 4px;}
.login-card .sub{color:var(--muted);font-size:13px;margin-bottom:22px;}
.login-card input{width:100%;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:11px 12px;margin-bottom:12px;font-size:14px;}
.login-card button{width:100%;background:var(--orange);color:var(--accent-ink);border:none;border-radius:6px;padding:11px;font-family:'Oswald',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;}
.login-card .err{color:var(--red);font-size:12px;margin-top:10px;min-height:16px;}
@media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr);} table{font-size:12px;} .exp-grid{grid-template-columns:1fr;}}

/* Мобільний телефон — менше бокових відступів (більше корисної ширини на
   маленькому екрані), і верхній рядок (лого + період/кнопки) складається
   у стовпчик замість того, щоб тиснутись в один рядок і "виштовхувати"
   кнопки за межі екрана. */
@media(max-width:700px){
  .wrap{padding:12px 10px 40px;}
  .top{align-items:flex-start;}
  .top h1{font-size:21px;}
  .period{width:100%;justify-content:flex-start;text-align:left;}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  .exp-grid{grid-template-columns:1fr;}
  .modal-box{width:94vw;}
}

.bulk-bar{display:none;align-items:center;gap:10px;padding:10px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);flex-wrap:wrap;}
.bulk-bar.show{display:flex;}
.bulk-bar .cnt{font-size:12px;color:var(--text);font-weight:600;}
.bulk-bar select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;padding:7px 10px;font-size:13px;}
.bulk-bar button{border:none;border-radius:6px;padding:7px 14px;font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;}
.bulk-bar .btn-danger{background:var(--red);color:#fff;}
.bulk-bar .btn-primary{background:var(--orange);color:var(--accent-ink);}
th.chk-col, td.chk-col{width:34px;padding-left:14px;padding-right:0;}
.badge.cat-driver{background:var(--surface-2);color:var(--blue);border:1px solid var(--blue);}
.badge.cat-office{background:var(--surface-2);color:var(--muted);border:1px solid var(--border);}
.badge.cat-booking{background:var(--orange-dim);color:var(--orange);border:1px solid var(--orange);}
.term-badge{background:var(--red-dim);color:var(--red);border-radius:20px;font-size:10px;padding:2px 7px;font-weight:600;display:inline-block;margin-top:5px;}

.modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center;}
.modal-backdrop.show{display:flex;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:10px;width:min(640px,92vw);max-height:80vh;overflow-y:auto;}
.modal-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.modal-head h3{margin:0;font-size:15px;font-weight:500;color:var(--text);}

tr.section-row td{background:var(--surface-2);color:var(--orange);font-family:'Oswald',sans-serif;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600;padding:8px 14px;border-bottom:1px solid var(--border);white-space:nowrap;}

/* Плиточка-перемикач для форм внесення даних (Працівники, Автопарк, АТБ,
   Витрати, Відомості) — форма за замовчуванням схована, щоб не займала
   місце й не заважала одразу бачити таблицю/дані; клік по плиточці
   розгортає форму нижче. Стан НЕ запам'ятовується між сесіями навмисно —
   кожна форма за замовчуванням згорнута при заході на вкладку. */
.tile-btn{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--surface-2);border-bottom:1px solid var(--border);cursor:pointer;user-select:none;font-family:'Oswald',sans-serif;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.02em;color:var(--orange);}
.tile-btn:hover{background:var(--orange-dim);}
.tile-btn .arrow{margin-left:auto;color:var(--muted);font-family:'Inter',Arial,sans-serif;font-size:12px;text-transform:none;letter-spacing:0;}
.collapsible-form{display:none;}
.collapsible-form.show{display:flex;}
/* Варіант для блоків з таблицею всередині (не рядок полів вводу) — display:block, не flex. */
.collapsible-block{display:none;}
.collapsible-block.show{display:block;}

/* Плиточки-ДІЇ (внести запис, додати рейс, завантажити акти тощо) — на
   відміну від .tile-btn вище (яка розгортає щось ПРЯМО НА СТОРІНЦІ, і й
   далі так робить для суто довідкових розгорток типу "Історія завантажених
   актів"), ці плиточки symmetric і клік по них відкриває МОДАЛЬНЕ вікно
   (той самий .modal-backdrop, що й редагування працівника/авто) — сама дія
   ніколи не займає місце на сторінці, поки її не викликали. Колір — той
   самий акцентний помаранчевий, що і решта інтерактивних елементів
   застосунку (assets, tab.active, note-icon) — символізує "це дія", а рамка
   й трохи інший фон (surface-2 з бордером) відрізняють її від карток з
   даними навколо. */
.action-bar{display:flex;flex-wrap:wrap;gap:10px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border);}
.action-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:132px;padding:14px 10px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;cursor:pointer;user-select:none;font-family:'Oswald',sans-serif;font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;color:var(--orange);text-align:center;line-height:1.3;transition:background .15s,border-color .15s;}
.action-tile:hover{background:var(--orange-dim);border-color:var(--orange);}
.action-tile .ic{font-size:20px;line-height:1;}
@media(max-width:900px){.action-tile{width:auto;flex:1;min-width:110px;}}
/* Форма всередині модалки дії — той самий .add-form (поля/кнопка виглядають
   однаково з рештою застосунку), але без нижньої лінії й округлення знизу,
   бо тут вона остання (і єдина) частина модального вікна, а не рядок над таблицею. */
.add-form.in-modal{border-bottom:none;border-radius:0 0 10px 10px;}

/* "Налаштування" (лише власник) — перемикачі модулів (увімкнено на цьому
   сайті взагалі) і список людей з доступом по модулях. Той самий
   .modal-backdrop/.modal-box, що й решта модалок застосунку. */
.toggle{position:relative;display:inline-block;width:38px;height:22px;flex:none;}
.toggle input{opacity:0;width:0;height:0;position:absolute;}
.toggle .slider{position:absolute;inset:0;background:var(--border);border-radius:22px;cursor:pointer;transition:background .15s;}
.toggle .slider:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s;}
.toggle input:checked + .slider{background:var(--orange);}
.toggle input:checked + .slider:before{transform:translateX(16px);}
.module-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);}
.module-row:last-child{border-bottom:none;}
.module-row .lbl{font-size:12.5px;color:var(--text);}
.module-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
@media(max-width:520px){.module-check-grid{grid-template-columns:1fr;}}
.settings-section-title{font-family:'Oswald',sans-serif;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--orange);margin:0 0 8px;}
.user-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.user-row:last-child{border-bottom:none;}
.user-row .who{display:flex;flex-direction:column;gap:2px;}
.user-row .who .uname{font-size:13px;color:var(--text);font-weight:600;}
.user-row .who .mods{font-size:10.5px;color:var(--muted);}
.user-row .acts{display:flex;gap:6px;flex-wrap:wrap;}

/* ---------- Вигляд (варіанти дизайну) — доступно КОЖНІЙ людині, не лише
   власнику: суто особисте налаштування зручності перегляду, зберігається
   в localStorage ЦЬОГО браузера (не на сервері й не в базі — тому в різних
   людей чи на різних пристроях може відрізнятись, це навмисно). Варіант 1
   ("Класична") — це /стандартні/ значення :root вище, лишені без змін.
   Варіанти 2 і 3 — через атрибут data-theme на <html> (виставляється
   інлайн-скриптом у <head> ще ДО першої відмальовки, щоб не було
   "спалаху" не тієї теми при завантаженні сторінки). */
html[data-theme="ocean"]{
  --bg:#0d1620; --surface:#141f2b; --surface-2:#1b2a38; --border:#2c4256;
  --text:#e6edf3; --muted:#87a0b3; --orange:#3fb8e0; --orange-dim:#173a4a;
  --green:#4fd8a0; --green-dim:#123329; --red:#ff6b6b; --red-dim:#3a1f22; --blue:#6fb7ea;
  --accent-ink:#0d1620; --orange-border:#1f5872; --orange-hover:#5cc9ea; --green-border:#1f5c46;
}
html[data-theme="light"]{
  --bg:#f3f5f7; --surface:#ffffff; --surface-2:#eef1f4; --border:#dbe1e7;
  --text:#1c2530; --muted:#5c6b7a; --orange:#6440c9; --orange-dim:#efe9ff;
  --green:#146b3d; --green-dim:#e2f5e9; --red:#b91c1c; --red-dim:#fbe4e4; --blue:#2f6fb0;
  --accent-ink:#ffffff; --orange-border:#a78bfa; --orange-hover:#522fa3; --green-border:#a8dfc0;
}
/* Ширина сторінки (.wrap вище) однакова в УСІХ трьох варіантах — теми
   відрізняються лише кольоровою палітрою (custom properties вище), не
   версткою. Висота таблиць так само не обмежується в жодній темі (сторінка
   гортається цілком, див. .table-wrap вище). */

.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;}
.theme-card{border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;background:var(--surface-2);transition:border-color .15s,box-shadow .15s;user-select:none;}
.theme-card:hover{border-color:var(--orange);}
.theme-card.active{border-color:var(--orange);box-shadow:0 0 0 1px var(--orange);}
.theme-swatch{display:flex;gap:4px;margin-bottom:9px;}
.theme-swatch span{width:22px;height:22px;border-radius:5px;border:1px solid rgba(120,120,120,.25);}
.theme-name{font-size:11.5px;color:var(--text);font-weight:600;line-height:1.3;}
.theme-desc{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.3;}