/* ══ ZERNO на дизайн-системі OKSANA (2026-09-20) ══════════════════════════════════════════════
   Еталон — app.discaf.ua/dyzain-systema; джерело правил — OKSANA frontend/src/ds.css + styles.css :root.
   Розділи:  1 токени · 2 основа · 3 оболонка · 4 примітиви ds-* (порт 1:1) · 5 доповнення ZERNO
             · 6 сумісність зі старими класами · 7 мобільний.
   Правила системи: одна світла тема; Golos Text; текст ≥ 13px (12px лише в бейджах-лічильниках);
   кнопки й поля 36px (sm 32px); ціль тапу ≥ 30px; один primary на екран; рух 120–160мс ease-out.
   Розділ 4 не правити під окрему сторінку — сторінкові стилі живуть у <style> самого шаблону на токенах. */

/* ── 1. Токени ─────────────────────────────────────────────────────────────────────────────── */
:root {
  --bg-app: #F6F3EE; --bg-card: #FFFDF9; --bg-elevated: #F1EDE6; --bg-input: #FFFEFB;
  --brand: #C97A2B; --brand-hover: #B86D22; --brand-active: #A9611C; --brand-muted: rgba(201, 122, 43, 0.12);
  --on-brand: #1E1B24;
  /* бурштин для ТЕКСТУ на папері: сам --brand дає лише ≈3:1, цей — 5.4:1. Заливки й рамки лишаються на --brand. */
  --brand-text: #9A5816;
  --text-primary: #1E1B24; --text-secondary: #4E4959; --text-muted: #77718A;
  --success: #2E7D4F; --success-muted: rgba(46, 125, 79, 0.12);
  --warning: #A66A00; --warning-muted: rgba(166, 106, 0, 0.12);
  --danger: #B23A3A;  --danger-muted: rgba(178, 58, 58, 0.12);
  --info: #2E5FA8;    --info-muted: rgba(46, 95, 168, 0.12);
  --accent-purple: #6D4FC2; --accent-purple-muted: rgba(109, 79, 194, 0.12);
  --border: #E6E0D6; --border-strong: #D6CFC3;
  --shadow-card: 0 2px 12px rgba(30, 27, 36, 0.06);
  --shadow-modal: 0 24px 64px rgba(30, 27, 36, 0.18);
  --ov-2: rgba(30,27,36,0.02); --ov-3: rgba(30,27,36,0.03); --ov-4: rgba(30,27,36,0.04); --ov-5: rgba(30,27,36,0.05);
  --ov-6: rgba(30,27,36,0.06); --ov-7: rgba(30,27,36,0.07); --ov-8: rgba(30,27,36,0.08); --ov-10: rgba(30,27,36,0.10);
  --ov-12: rgba(30,27,36,0.12); --ov-15: rgba(30,27,36,0.15); --ov-20: rgba(30,27,36,0.20); --ov-30: rgba(30,27,36,0.30);
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px;
  --text-xs: 13px; --text-sm: 14px; --text-base: 15px; --text-md: 16px; --text-lg: 17px; --text-xl: 21px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --duration-fast: 120ms; --duration-base: 160ms; --ease-std: cubic-bezier(0.22, 1, 0.36, 1);
  --z-sticky: 10; --z-topbar: 200; --z-dropdown: 300; --z-modal: 400; --z-toast: 500;
  color-scheme: light;
}

/* ── 2. Основа ─────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }  /* ds-modal-backdrop/ds-menu мають display:flex — без цього hidden не ховає */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--text-base); font-weight: 400; line-height: 1.5;
  color: var(--text-primary); background: var(--bg-app); min-height: 100vh;
}
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
::selection { background: rgba(201, 122, 43, 0.25); }
a { color: var(--brand-text); text-decoration: none; }
a:hover { color: var(--brand-active); text-decoration: underline; text-underline-offset: 2px; }
h1 { font-size: var(--text-xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
h2 { font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; margin-bottom: var(--space-4); }
h3 { font-size: var(--text-md); font-weight: 700; line-height: 1.35; }
h4 { font-size: var(--text-base); font-weight: 600; }
small { font-size: var(--text-xs); }
html.ds-modal-open, html.ds-modal-open body { overflow: hidden; }

/* ── 3. Оболонка ───────────────────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  display: flex; align-items: center; gap: var(--space-3);
  height: calc(52px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--space-6) 0;
  background: var(--bg-app); border-bottom: 1px solid var(--border);
}
.topbar-title { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-md); font-weight: 700; letter-spacing: -.01em; color: var(--text-primary); white-space: nowrap; }
.topbar-title:hover { color: var(--text-primary); text-decoration: none; }
.topbar-title .ds-icon { color: var(--brand); }
.topbar-page { font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar-page::before { content: "/"; color: var(--border-strong); margin-right: 10px; }
.topbar-spacer { flex: 1; }
.menu-panel {
  display: none; position: fixed; top: calc(58px + env(safe-area-inset-top, 0px)); right: var(--space-4); z-index: calc(var(--z-dropdown) + 1);
  width: 320px; max-height: calc(100vh - 72px); overflow-y: auto; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal);
}
.menu-panel.open { display: block; animation: ds-pop var(--duration-fast) ease-out; }
@keyframes ds-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu-group { padding: 2px 0 4px; }
.menu-group + .menu-group { border-top: 1px solid var(--border); margin-top: 2px; padding-top: 6px; }
.menu-group-title { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); padding: 6px 12px 2px; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--text-primary); font-size: var(--text-sm); font-weight: 500; }
.menu-item small { font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; text-align: right; }
.menu-item:hover { background: var(--ov-5); color: var(--text-primary); text-decoration: none; }
.menu-item.active { background: var(--brand-muted); color: var(--brand-text); }
.menu-item.active small { color: var(--brand-text); }
.menu-item.logout { color: var(--text-secondary); }
.menu-item.logout:hover { color: var(--danger); background: var(--danger-muted); }
.menu-backdrop { display: none; position: fixed; inset: 0; z-index: var(--z-dropdown); }
.menu-backdrop.open { display: block; }
.container { max-width: 1400px; margin: 0 auto; padding: var(--space-6); }

/* ── 4. Примітиви ds-* — порт OKSANA frontend/src/ds.css (2026-09-19) ─────────────────────────── */
.ds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid transparent; font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .12s ease-out, border-color .12s ease-out, color .12s ease-out; }
.ds-btn--sm { height: 32px; padding: 0 10px; font-weight: 500; }
.ds-btn--primary { background: var(--brand); color: var(--on-brand); }
.ds-btn--primary:hover:not(:disabled) { background: var(--brand-hover); color: var(--on-brand); }
.ds-btn--primary:active:not(:disabled) { background: var(--brand-active); }
.ds-btn--secondary { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-strong); }
.ds-btn--secondary:hover:not(:disabled) { background: var(--bg-elevated); color: var(--text-primary); }
.ds-btn--ghost { background: transparent; color: var(--text-secondary); }
.ds-btn--ghost:hover:not(:disabled) { background: var(--ov-5); color: var(--text-primary); }
.ds-btn--danger { background: var(--bg-card); color: var(--danger); border-color: rgba(178,58,58,.4); }
.ds-btn--danger:hover:not(:disabled) { background: var(--danger-muted); color: var(--danger); }
a.ds-btn:hover { text-decoration: none; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.ds-btn:focus-visible, .ds-iconbtn:focus-visible, .ds-seg-btn:focus-visible, .ds-tab:focus-visible, .ds-chip.is-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ds-spin { animation: ds-spin .8s linear infinite; } @keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-secondary); cursor: pointer; flex: none; transition: background .12s ease-out, color .12s ease-out; }
.ds-iconbtn:hover:not(:disabled) { background: var(--ov-6); color: var(--text-primary); }
.ds-iconbtn--secondary { background: var(--bg-card); border-color: var(--border-strong); }
.ds-iconbtn--danger:hover:not(:disabled) { color: var(--danger); background: var(--danger-muted); }
.ds-iconbtn:disabled { opacity: .45; cursor: not-allowed; }
/* поля */
.ds-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ds-field-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); }
.ds-field-label b { color: var(--danger); font-weight: 600; }
.ds-field-hint { font-size: var(--text-xs); color: var(--text-muted); }
.ds-field-error { font-size: var(--text-xs); color: var(--danger); }
.ds-input { width: 100%; height: 36px; padding: 0 12px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-primary); font: inherit; font-size: var(--text-base); transition: border-color .12s ease-out, box-shadow .12s ease-out; }
.ds-input--sm { height: 32px; padding: 0 10px; font-size: var(--text-sm); }
.ds-input::placeholder { color: var(--text-muted); }
.ds-input:hover:not(:disabled) { border-color: #C9C1B3; }
.ds-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-muted); }
.ds-input:disabled { opacity: .5; cursor: not-allowed; background: var(--bg-elevated); }
.has-error .ds-input { border-color: var(--danger); }
.ds-select { appearance: none; -webkit-appearance: none; padding-right: 30px; text-overflow: ellipsis; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234E4959' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; }
.ds-textarea { height: auto; min-height: 80px; padding: 9px 12px; resize: vertical; line-height: 1.45; }
.ds-search { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; background: var(--bg-input); border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-muted); min-width: 0; width: 100%; flex: none; }
.ds-toolbar-main > .ds-search { flex: 1 1 220px; width: auto; }
.ds-search--sm { height: 32px; }
.ds-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-muted); }
/* у полі лишається ОДИН хрестик і ОДНЕ кільце фокуса: нативний WebKit-хрестик і кільце шару сумісності гасимо в примітиві */
.ds-search input::-webkit-search-cancel-button, .ds-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.ds-search input:focus { outline: none; box-shadow: none; border: none; }
.ds-search input { flex: 1; min-width: 0; height: 100%; border: none; background: none; padding: 0; font: inherit; font-size: var(--text-sm); color: var(--text-primary); outline: none; box-shadow: none; }
/* ціль тапу 30px (у еталоні OKSANA — 17px: padding 2px навколо іконки 13px); відʼємний відступ тримає хрестик біля краю поля */
.ds-search-clear { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; margin-right: -7px; background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0; border-radius: 50%; } .ds-search-clear:hover { color: var(--text-primary); background: var(--ov-6); }
/* перемикач */
.ds-seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); max-width: 100%; }
.ds-seg-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: none; border-radius: 7px; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; white-space: nowrap; text-decoration: none; }
.ds-seg--sm { padding: 2px; } .ds-seg--sm .ds-seg-btn { height: 30px; padding: 0 8px; font-size: var(--text-xs); }
.ds-seg-btn:hover { color: var(--text-primary); text-decoration: none; }
.ds-seg-btn.active { background: var(--bg-card); color: var(--text-primary); box-shadow: 0 1px 2px rgba(30,27,36,.08); }
.ds-seg-count { font-style: normal; font-size: 12px; color: var(--text-muted); }
.ds-seg-btn.active .ds-seg-count { color: var(--brand-text); }
/* чипи, бейджі */
.ds-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-secondary); font: inherit; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; max-width: 100%; text-decoration: none; }
.ds-chip > span { overflow: hidden; text-overflow: ellipsis; }
.ds-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; }
.ds-chip--good { color: var(--success); border-color: rgba(46,125,79,.35); } .ds-chip--good .ds-chip-dot { background: var(--success); }
.ds-chip--bad { color: var(--danger); border-color: rgba(178,58,58,.35); } .ds-chip--bad .ds-chip-dot { background: var(--danger); }
.ds-chip--warn { color: var(--warning); border-color: rgba(166,106,0,.35); } .ds-chip--warn .ds-chip-dot { background: var(--warning); }
.ds-chip--info { color: var(--info); border-color: rgba(46,95,168,.35); } .ds-chip--info .ds-chip-dot { background: var(--info); }
.ds-chip--brand { color: var(--brand-text); border-color: rgba(201,122,43,.4); } .ds-chip--brand .ds-chip-dot { background: var(--brand); }
.ds-chip--muted { color: var(--text-muted); }
.ds-chip.is-toggle { cursor: pointer; height: 30px; } .ds-chip.is-toggle:hover { border-color: #C9C1B3; color: var(--text-primary); text-decoration: none; }
.ds-chip.is-toggle.active { background: var(--brand-muted); border-color: var(--brand); color: var(--brand-text); }
.ds-chip:has(> .ds-chip-x), .ds-chip[role="button"] { height: 30px; }
.ds-chip-x { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 -10px 0 -4px; padding: 0; border: none; background: none; color: inherit; opacity: .7; cursor: pointer; border-radius: 50%; } .ds-chip-x:hover { opacity: 1; background: var(--ov-8); }
.ds-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ov-8); color: var(--text-secondary); font-size: 12px; font-weight: 600; line-height: 1; }
.ds-badge--brand { background: var(--brand); color: var(--on-brand); } .ds-badge--bad { background: var(--danger); color: #FFFEFB; } .ds-badge--warn { background: var(--warning-muted); color: var(--warning); } .ds-badge--good { background: var(--success-muted); color: var(--success); } .ds-badge--info { background: var(--info-muted); color: var(--info); }
/* вкладки */
.ds-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.ds-tabs::-webkit-scrollbar { display: none; }
.ds-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; margin-bottom: -1px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; }
.ds-tab:hover { color: var(--text-primary); text-decoration: none; } .ds-tab.active { color: var(--text-primary); border-bottom-color: var(--brand); }
/* заголовки, тулбар */
.ds-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.ds-section-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.ds-section-title h1, .ds-section-title h2, .ds-section-title h3 { margin: 0; font-size: var(--text-lg); font-weight: 700; letter-spacing: -.01em; }
.ds-section-title h1 { font-size: var(--text-xl); }
.ds-section-sub { font-size: var(--text-xs); color: var(--text-muted); }
.ds-section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.ds-toolbar-main, .ds-toolbar-end { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.ds-toolbar-main { flex: 1 1 320px; } .ds-toolbar-main .ds-input, .ds-toolbar-main .ds-select { width: auto; min-width: 150px; }
/* таблиця */
/* position: relative — скролер стає containing block для всього позиціонованого всередині (прихований підпис у th, меню рядка):
   інакше position:absolute рахується від кореня сторінки, overflow його не обрізає, і весь документ стає ширшим за екран */
.ds-table-wrap { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* підказка «таблиця гортається вбік»: тінь біля краю, доки там є схований вміст. Дві «шторки» їдуть разом із вмістом (local)
     і закривають тінь, коли край досягнуто; самі тіні стоять на місці (scroll). Без JS. */
  background: linear-gradient(to right, var(--bg-card) 40%, transparent) left center / 36px 100% no-repeat local,
              linear-gradient(to left, var(--bg-card) 40%, transparent) right center / 36px 100% no-repeat local,
              radial-gradient(farthest-side at 0 50%, var(--ov-15), transparent) left center / 12px 100% no-repeat scroll,
              radial-gradient(farthest-side at 100% 50%, var(--ov-15), transparent) right center / 12px 100% no-repeat scroll,
              var(--bg-card); }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ds-table th { text-align: left; padding: 9px 12px; background: var(--bg-elevated); border-bottom: 1px solid var(--border); font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.ds-table th.ds-num, .ds-table td.ds-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-th { display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; color: inherit; font: inherit; text-decoration: none; }
.ds-table th:has(> .ds-th.is-sortable) { padding: 0; }
.ds-th.is-sortable { cursor: pointer; width: 100%; min-height: 38px; padding: 9px 12px; }  /* ціль — уся комірка шапки */
.ds-table th.ds-num > .ds-th { justify-content: flex-end; } .ds-th.is-sortable:hover, .is-sorted .ds-th { color: var(--text-primary); text-decoration: none; }
.ds-table :where(td) { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-primary); }  /* :where — щоб .ds-text-* і сторінкові класи на комірці перемагали */
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-table--dense td { padding: 7px 12px; }
.ds-table tr.is-clickable { cursor: pointer; } .ds-table tr.is-clickable:hover td { background: var(--ov-3); }
.ds-table tr.is-clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ds-nowrap { white-space: nowrap; }
.ds-table-empty { text-align: center; color: var(--text-muted); padding: 28px 12px !important; }
.ds-cell-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
/* порожній стан */
.ds-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 36px 16px; text-align: center; color: var(--text-muted); }
.ds-empty strong { color: var(--text-primary); font-weight: 600; } .ds-empty p { margin: 0; max-width: 420px; font-size: var(--text-sm); }
/* модалка */
.ds-modal-backdrop { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(30,27,36,.45); display: flex; align-items: center; justify-content: center; padding: 20px; animation: ds-fade .14s ease-out; }
@keyframes ds-fade { from { opacity: 0 } to { opacity: 1 } }
.ds-modal { display: flex; flex-direction: column; width: 100%; max-height: min(92vh, 900px); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-modal); overflow: hidden; }
.ds-modal:focus { outline: none; }  /* фокус на самому вікні (тач) — без кільця навколо всієї картки */
.ds-modal--sm { max-width: 440px; } .ds-modal--md { max-width: 640px; } .ds-modal--lg { max-width: 900px; } .ds-modal--full { max-width: 1200px; }
.ds-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ds-modal-head h3 { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.ds-modal-body { padding: 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.ds-modal-body > * { flex: 0 0 auto; }
.ds-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--bg-elevated); }
.ds-modal-foot > .ds-btn:first-child:is(.ds-btn--ghost, .ds-btn--secondary):has(~ .ds-btn) { margin-right: auto; }  /* «Скасувати» ліворуч — лише коли праворуч є головна дія; єдина кнопка лишається праворуч */
.ds-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@supports (-webkit-touch-callout: none) { .ds-input, .ds-search input { font-size: 16px; } }
/* меню, смуги-стани */
.ds-menu-wrap { position: relative; display: inline-flex; }
.ds-menu-scrim { position: fixed; inset: 0; z-index: 29; }
.ds-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 232px; display: flex; flex-direction: column; gap: 2px; padding: 5px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-modal); }
.ds-menu--up { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.ds-menu--left { left: 0; right: auto; }
.ds-menu-item { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; border: none; border-radius: var(--radius-sm); background: none; color: var(--text-primary); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; white-space: normal; text-decoration: none; width: 100%; }
.ds-menu-item:hover:not(:disabled) { background: var(--ov-6); color: var(--text-primary); text-decoration: none; }
.ds-menu-item.is-danger { color: var(--danger); } .ds-menu-item.is-danger:hover:not(:disabled) { background: var(--danger-muted); color: var(--danger); }
.ds-menu-item:disabled { opacity: .5; cursor: default; }
.ds-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); font-size: var(--text-sm); }
.ds-banner-icon { flex: none; margin-top: 2px; color: var(--text-muted); }
.ds-banner-body { min-width: 0; flex: 1 1 auto; } .ds-banner-title { font-weight: 600; } .ds-banner-text { color: var(--text-secondary); margin-top: 2px; }
.ds-banner-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; flex: none; }
.ds-banner--warn { border-color: rgba(166,106,0,.35); background: var(--warning-muted); } .ds-banner--warn .ds-banner-icon { color: var(--warning); }
.ds-banner--bad { border-color: rgba(178,58,58,.35); background: var(--danger-muted); } .ds-banner--bad .ds-banner-icon { color: var(--danger); }
.ds-banner--good { border-color: rgba(46,125,79,.35); background: rgba(46,125,79,.08); } .ds-banner--good .ds-banner-icon { color: var(--success); }
.ds-banner--info { border-color: rgba(46,95,168,.3); background: rgba(46,95,168,.06); } .ds-banner--info .ds-banner-icon { color: var(--info); }
/* властивості сутності (картка клієнта, картка замовлення) */
.ds-props { margin: 0; }
.ds-prop { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 3px 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); align-items: start; }
.ds-prop:last-of-type { border-bottom: none; }
.ds-prop > dt { color: var(--text-muted); font-size: var(--text-xs); line-height: 1.5; padding-top: 2px; }
.ds-prop > dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── 5. Доповнення ZERNO (на тих самих токенах; в OKSANA аналогів немає) ────────────────────────── */
.ds-icon { display: inline-block; flex: none; vertical-align: -0.15em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ds-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); }
.ds-card--flush { padding: 0; overflow: hidden; }
.ds-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-4); }
/* показники: число + підпис. Без великих літер і без кольорової смуги збоку — тон несе саме число. */
.ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.ds-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; }
a.ds-stat:hover { border-color: var(--border-strong); background: var(--bg-input); text-decoration: none; color: inherit; }
.ds-stat-value { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-primary); overflow-wrap: anywhere; }
.ds-stat-value small { font-size: var(--text-sm); font-weight: 500; letter-spacing: 0; color: var(--text-muted); }
.ds-stat-label { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.ds-stat-sub { font-size: var(--text-xs); color: var(--text-secondary); margin-top: 2px; }
.ds-stat--good .ds-stat-value { color: var(--success); } .ds-stat--warn .ds-stat-value { color: var(--warning); }
.ds-stat--bad .ds-stat-value { color: var(--danger); } .ds-stat--info .ds-stat-value { color: var(--info); } .ds-stat--brand .ds-stat-value { color: var(--brand-text); }
/* числа й тон тексту */
/* лише табличні цифри. nowrap тут НЕ ставити: клас вішають і на цілі рядки фактів («49 067 532 ₴ · зійшлося 99.8% · …»),
   які на телефоні мусять переноситись; нерозривність — у комірках таблиць (.ds-table td.ds-num) або через .ds-nowrap */
.ds-num { font-variant-numeric: tabular-nums; }
.ds-text-good { color: var(--success); } .ds-text-warn { color: var(--warning); } .ds-text-bad { color: var(--danger); }
.ds-text-info { color: var(--info); } .ds-text-muted { color: var(--text-muted); } .ds-text-secondary { color: var(--text-secondary); }
/* смужка прогресу */
.ds-progress { display: block; height: 4px; border-radius: 2px; background: var(--ov-8); overflow: hidden; }
.ds-progress > i { display: block; height: 100%; border-radius: 2px; background: var(--brand); }
.ds-progress--good > i { background: var(--success); } .ds-progress--warn > i { background: var(--warning); } .ds-progress--bad > i { background: var(--danger); }
/* розгортуваний блок <details> */
.ds-details { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); }
.ds-details > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); border-radius: var(--radius-md); }
.ds-details > summary::-webkit-details-marker { display: none; }
.ds-details > summary::before { content: ""; width: 7px; height: 7px; flex: none; border-right: 1.75px solid var(--text-muted); border-bottom: 1.75px solid var(--text-muted); transform: rotate(-45deg); transition: transform var(--duration-fast) ease-out; }
.ds-details[open] > summary::before { transform: rotate(45deg); }
.ds-details > summary:hover { background: var(--ov-3); }
.ds-details > summary .ds-badge { margin-left: auto; }
.ds-details-body { padding: 4px 14px 14px; }
/* сторінки списку: «21–40 з 87» ліворуч, «Попередні · стор. 2 з 5 · Наступні» праворуч */
.ds-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; padding-top: 10px; font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.ds-pager-nav { display: flex; align-items: center; gap: 6px; }
.ds-pager-page { min-width: 84px; text-align: center; color: var(--text-primary); white-space: nowrap; }
/* прапорці й радіо */
.ds-check { display: inline-flex; align-items: center; gap: 8px; min-height: 30px; font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; }
.ds-check input, input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
/* підказка про клавішу / код */
.ds-code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: var(--text-xs); padding: 1px 5px; border-radius: 4px; background: var(--ov-6); color: var(--text-secondary); }
/* скелет завантаження */
.ds-skeleton { display: block; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--ov-5), var(--ov-10), var(--ov-5)); background-size: 200% 100%; animation: ds-shimmer 1.2s linear infinite; }
@keyframes ds-shimmer { to { background-position: -200% 0; } }
/* тост */
.ds-toasts { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
html.ds-modal-open .ds-toasts { bottom: calc(var(--space-4) + 76px + env(safe-area-inset-bottom, 0px)); }  /* над футером відкритого вікна: кнопки лишаються досяжними */
.ds-toast { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--text-primary); color: #FFFEFB; font-size: var(--text-sm); box-shadow: var(--shadow-modal); animation: ds-pop var(--duration-base) ease-out; }
.ds-toast--bad { background: var(--danger); } .ds-toast--good { background: var(--success); }
.ds-toast-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ds-toast-x { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; margin: -5px -8px -5px 0; border: none; border-radius: 50%; background: none; color: inherit; opacity: .8; cursor: pointer; } .ds-toast-x:hover { opacity: 1; background: rgba(255, 254, 251, 0.16); }
.ds-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* підказка замість нативного title=: на тач-пристроях і з клавіатури title недосяжний, а пояснення методики
   («як рахується вік партії») там саме й живуть. Розмітка — {{ ds.hint('текст') }}; поведінка — ds.js. */
/* видимий знак — 15px, але ціль тапу 30px: відʼємні вертикальні поля не дають рядку тексту стати вищим */
.ds-hint { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -8px -4px; padding: 0; vertical-align: -9px; border: none; border-radius: 50%; background: none; color: var(--text-muted); cursor: help; flex: none; }
.ds-hint:hover, .ds-hint[aria-expanded="true"] { color: var(--brand-text); background: var(--ov-6); }
.ds-hint-pop { position: fixed; z-index: var(--z-dropdown); max-width: min(320px, calc(100vw - 24px)); padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-modal); font-size: var(--text-sm); font-weight: 400; line-height: 1.45; color: var(--text-primary); text-align: left; white-space: normal; text-transform: none; letter-spacing: normal; }
/* липка шапка таблиці: довгі списки без пагінації (журнал продажів, клієнти) не лишаються без підписів колонок */
/* межу малює inset-тінь: при border-collapse рамку схлопнутої комірки малює таблиця, і за липкою шапкою
   вона не їде — шапка з'їжджала б без нижньої лінії */
.ds-table--sticky-head thead th { position: sticky; top: 0; z-index: var(--z-sticky); border-bottom: none; box-shadow: inset 0 -1px 0 var(--border); }
/* Шапка липне до .ds-table-wrap, а не до сторінки: обгортка гортається вбік (overflow-x: auto), тож вона і є
   скролером. Тому липка шапка працює лише в парі з обмеженням висоти. На телефоні вкладений скролер гірший
   за звичайну сторінку — там обмеження знімається, і таблиця просто їде зі сторінкою. */
/* без overscroll-behavior: contain — воно розриває ланцюжок прокрутки: докрутивши таблицю до кінця,
   користувач на ПК лишався б із застиглою сторінкою, доки не відведе курсор убік */
.ds-table-wrap--tall { max-height: min(72vh, 720px); overflow-y: auto; }
/* поле файлу: нативний контрол дає англійський «Choose File» і свою висоту — ховаємо його під підпис-кнопку */
.ds-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ds-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ds-file-name { font-size: var(--text-sm); color: var(--text-secondary); overflow-wrap: anywhere; min-width: 0; }
.ds-file input[type="file"]:focus-visible + .ds-file-btn { outline: 2px solid var(--brand); outline-offset: 2px; }
.ds-file-btn { cursor: pointer; }
/* одиночна плитка показника поза сіткою .ds-stats */
.ds-stat--bare { padding: 0; background: none; border: none; }
/* чип, якому дозволено переноситись: у вузькій картці назва довша за 14 символів інакше йде в три крапки */
.ds-chip--wrap { height: auto; min-height: 28px; padding-top: 4px; padding-bottom: 4px; white-space: normal; }
.ds-chip--wrap > span { overflow: visible; text-overflow: clip; }

/* ── 6. Сумісність: старі класи ZERNO у вигляді DS ──────────────────────────────────────────────
   Поки шаблон не переписано на ds-*, старі .btn / table / .section виглядають так само, як примітиви.
   Усе під :where() — нульова специфічність, тож будь-який ds-клас перемагає без !important. */
:where(.btn) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; background: var(--brand); color: var(--on-brand); border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; font-family: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; transition: background .12s ease-out, border-color .12s ease-out, color .12s ease-out; }
:where(.btn):hover { background: var(--brand-hover); color: var(--on-brand); text-decoration: none; }
:where(.btn-secondary) { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-strong); }
:where(.btn-secondary):hover { background: var(--bg-elevated); color: var(--text-primary); }
:where(.btn-danger) { background: var(--bg-card); color: var(--danger); border-color: rgba(178,58,58,.4); }
:where(.btn-danger):hover { background: var(--danger-muted); color: var(--danger); }
:where(.btn):disabled { opacity: .45; cursor: not-allowed; }
.btn.is-loading, .ds-btn.is-loading { pointer-events: none; opacity: .7; }
.ds-btn.is-loading > .ds-icon { display: none; }  /* спінер стає на місце іконки: ліворуч від тексту, без другого значка */
.btn.is-loading::before, .ds-btn.is-loading::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ds-spin .8s linear infinite; }
:where(table:not(.ds-table)) { width: 100%; border-collapse: separate; border-spacing: 0; margin: var(--space-4) 0; font-size: var(--text-sm); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
:where(table:not(.ds-table) th, table:not(.ds-table) td) { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
:where(table:not(.ds-table) th) { background: var(--bg-elevated); color: var(--text-muted); font-weight: 600; font-size: var(--text-xs); white-space: nowrap; }
:where(table:not(.ds-table) tr:last-child td) { border-bottom: none; }
:where(table:not(.ds-table) tbody tr:hover td) { background: var(--ov-3); }
:where(select, input[type="text"], input[type="number"], input[type="date"], input[type="month"], input[type="search"], input[type="password"], input[type="email"], input[type="tel"], textarea):where(:not(.ds-input)) { background-color: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0 12px; height: 36px; font-family: inherit; font-size: var(--text-sm); transition: border-color .12s ease-out, box-shadow .12s ease-out; }
:where(textarea):where(:not(.ds-input)) { height: auto; min-height: 80px; padding: 9px 12px; line-height: 1.45; }
:where(select, input, textarea):where(:not(.ds-input):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"])):focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-muted); }
:where(input[type="file"]) { color: var(--text-secondary); font-family: inherit; font-size: var(--text-sm); }
:where(input[type="file"])::file-selector-button { height: 32px; margin-right: 10px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
:where(label) { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; }
:where(.form-row) { margin: var(--space-3) 0; }
:where(.section) { margin: 0; padding: var(--space-5); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
:where(.filters) { margin: 0 0 var(--space-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
:where(.card-grid) { display: flex; gap: var(--space-4); flex-wrap: wrap; }
:where(.card-grid > .section) { flex: 1; min-width: min(100%, 280px); }
:where(.msg) { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin: 0 0 var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); font-size: var(--text-sm); animation: ds-pop var(--duration-base) ease-out; }
:where(.msg.success) { border-color: rgba(46,125,79,.35); background: rgba(46,125,79,.08); color: var(--success); }
:where(.msg.error) { border-color: rgba(178,58,58,.35); background: var(--danger-muted); color: var(--danger); }
:where(.mono) { font-family: inherit; font-variant-numeric: tabular-nums; }  /* один шрифт: моноширинність замінено табличними цифрами */
:where(.urgent) { color: var(--danger); font-weight: 600; } :where(.planned) { color: var(--warning); } :where(.normal) { color: var(--success); }
:where(.trend-up) { color: var(--danger); } :where(.trend-down) { color: var(--info); } :where(.trend-stable) { color: var(--text-muted); }
:where(pre) { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.6; }

/* ── 7. Мобільний ──────────────────────────────────────────────────────────────────────────── */
/* iOS Safari: нативні поля дати мають власну внутрішню ширину й розпирають сторінку — знімаємо нативний вигляд. */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; min-height: 36px; }
input[type="date"]::-webkit-date-and-time-value, input[type="month"]::-webkit-date-and-time-value { text-align: left; min-height: 1.3em; }
@media (max-width: 900px) {
  .container { padding: var(--space-3); }
  .topbar { padding-left: var(--space-3); padding-right: var(--space-3); }
  /* стара таблиця сама стає горизонтальним скролером; комірки не переносяться (крім .wrap-cell) */
  .container table:not(.ds-table) { display: block; position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .container table:not(.ds-table) th, .container table:not(.ds-table) td { white-space: nowrap; }
  /* комірка, що переноситься, мусить мати власну ширину: у таблиці-скролері сусіди nowrap стискають її до
     min-content, і назва стає стовпчиком по одному слову. 220px ≈ 3–4 слова в рядку; colspan-рядкам не заважає. */
  :where(.container, .ds-table-wrap .ds-table) td.wrap-cell { white-space: normal; min-width: 220px; }  /* :where — сторінкове правило ширини колонки має перемагати */
  .ds-table-wrap .ds-table td:not(.wrap-cell) { white-space: nowrap; }
  /* iOS зумить сторінку на фокусі поля з font-size < 16px */
  select, input[type="text"], input[type="number"], input[type="search"], input[type="date"], input[type="month"], input[type="password"], input[type="email"], input[type="tel"], textarea, .ds-input, .ds-search input { font-size: 16px; }
  :where(select, input[type="text"], input[type="number"], input[type="search"], input[type="date"], input[type="month"], input[type="password"]):not(.ds-input--sm) { height: 40px; }
  input[type="date"], input[type="month"], input[type="search"] { width: 100%; display: block; }
  form, .range-picker { min-width: 0; max-width: 100%; }
  .btn, .ds-btn:not(.ds-btn--sm) { height: 40px; }
  .ds-search:not(.ds-search--sm) { height: 40px; }
  .ds-seg-btn { height: 36px; }
  .ds-iconbtn { width: 36px; height: 36px; }
  .ds-modal-backdrop { padding: 0; align-items: stretch; }
  .ds-modal { max-width: none; max-height: none; border-radius: 0; border: none; }
  .ds-modal-body { flex: 1 1 auto; }
  .ds-modal-head .ds-iconbtn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--bg-card); color: var(--text-primary); }
  .ds-modal-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* підтвердження (DS.confirm, role=alertdialog) на телефоні лишається карткою: питання з двох рядків на весь екран —
     це порожнеча з кнопками внизу. Повноекранними стають лише вікна зі змістом. В OKSANA такого примітива немає. */
  /* --fit: вікно по висоті вмісту (коротка форма, стан завантаження, помилка) — повний екран лишається для вікон зі змістом */
  .ds-modal-backdrop--dialog, .ds-modal-backdrop--fit { padding: var(--space-4); align-items: center; }
  .ds-modal-backdrop--dialog .ds-modal, .ds-modal-backdrop--fit .ds-modal { max-width: 440px; max-height: calc(100vh - 32px); border-radius: var(--radius-lg); border: 1px solid var(--border); }
  .ds-modal-backdrop--dialog .ds-modal-body, .ds-modal-backdrop--fit .ds-modal-body { flex: 0 1 auto; }
  .ds-modal-backdrop--dialog .ds-modal-foot, .ds-modal-backdrop--fit .ds-modal-foot { padding-bottom: 12px; }
  .ds-modal-backdrop--dialog .ds-modal-foot .ds-btn { flex: 1 1 0; }   /* підтвердження: дві рівні кнопки під великий палець */
  .ds-modal-backdrop--dialog .ds-modal { max-width: 440px; max-height: calc(100vh - 32px); border-radius: var(--radius-lg); border: 1px solid var(--border); }
  .ds-modal-backdrop--dialog .ds-modal-body { flex: 0 1 auto; }
  .ds-modal-backdrop--dialog .ds-modal-foot { padding-bottom: 12px; }
  .ds-modal-backdrop--dialog .ds-modal-foot .ds-btn { flex: 1 1 0; }
  .ds-section-title { flex-wrap: wrap; gap: 2px 10px; }
  .ds-grid-2 { grid-template-columns: 1fr; }
  .ds-toolbar-main .ds-input, .ds-toolbar-main .ds-select { width: 100%; }
  .ds-prop { grid-template-columns: 104px minmax(0, 1fr); }
  .ds-stat-value { font-size: 21px; }
  /* на телефоні липка шапка не варта вкладеного скролера: 238 рядків журналу всередині віконця — гірше,
     ніж звичайна сторінка. Обмеження висоти знімається, шапка просто їде з таблицею. */
  .ds-table-wrap--tall { max-height: none; overflow-y: visible; }
  .ds-table--sticky-head thead th { position: static; }
}
@media (max-width: 640px) {
  .topbar-page { display: none; }
  .menu-panel { left: 8px; right: 8px; width: auto; }
  .menu-item { min-height: 44px; font-size: var(--text-base); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}