/* Ваха — стилі компонентів. Усі значення — з tokens.json (змінні --…); тут лише будова й стани.
   Продукт: обгортка data-product="sanad|nizam|…" перемикає колір продукту для всього всередині. */

[data-product="vaha"]   { --acc: var(--vaha-acc);   --acc-hover: var(--vaha-acc-hover);   --on-acc: var(--vaha-on-acc);   --acc-tint: var(--vaha-acc-tint);   --acc-text: var(--vaha-acc-text);   --side: var(--vaha-side);   --side-2: var(--vaha-side-2);   --side-ink: var(--vaha-side-ink);   --side-muted: var(--vaha-side-muted);   --mark: var(--vaha-mark); }
[data-product="sanad"]  { --acc: var(--sanad-acc);  --acc-hover: var(--sanad-acc-hover);  --on-acc: var(--sanad-on-acc);  --acc-tint: var(--sanad-acc-tint);  --acc-text: var(--sanad-acc-text);  --side: var(--sanad-side);  --side-2: var(--sanad-side-2);  --side-ink: var(--sanad-side-ink);  --side-muted: var(--sanad-side-muted);  --mark: var(--sanad-mark); }
[data-product="nizam"]  { --acc: var(--nizam-acc);  --acc-hover: var(--nizam-acc-hover);  --on-acc: var(--nizam-on-acc);  --acc-tint: var(--nizam-acc-tint);  --acc-text: var(--nizam-acc-text);  --side: var(--nizam-side);  --side-2: var(--nizam-side-2);  --side-ink: var(--nizam-side-ink);  --side-muted: var(--nizam-side-muted);  --mark: var(--nizam-mark); }
[data-product="dars"]  { --acc: var(--dars-acc);  --acc-hover: var(--dars-acc-hover);  --on-acc: var(--dars-on-acc);  --acc-tint: var(--dars-acc-tint);  --acc-text: var(--dars-acc-text);  --side: var(--dars-side);  --side-2: var(--dars-side-2);  --side-ink: var(--dars-side-ink);  --side-muted: var(--dars-side-muted);  --mark: var(--dars-mark); }
[data-product="hiwar"]   { --acc: var(--hiwar-acc);   --acc-hover: var(--hiwar-acc-hover);   --on-acc: var(--hiwar-on-acc);   --acc-tint: var(--hiwar-acc-tint);   --acc-text: var(--hiwar-acc-text);   --side: var(--hiwar-side);   --side-2: var(--hiwar-side-2);   --side-ink: var(--hiwar-side-ink);   --side-muted: var(--hiwar-side-muted);   --mark: var(--hiwar-mark); }
[data-product="basira"] { --acc: var(--basira-acc); --acc-hover: var(--basira-acc-hover); --on-acc: var(--basira-on-acc); --acc-tint: var(--basira-acc-tint); --acc-text: var(--basira-acc-text); --side: var(--basira-side); --side-2: var(--basira-side-2); --side-ink: var(--basira-side-ink); --side-muted: var(--basira-side-muted); --mark: var(--basira-mark); }
[data-product="muin"] { --acc: var(--muin-acc); --acc-hover: var(--muin-acc-hover); --on-acc: var(--muin-on-acc); --acc-tint: var(--muin-acc-tint); --acc-text: var(--muin-acc-text); --side: var(--muin-side); --side-2: var(--muin-side-2); --side-ink: var(--muin-side-ink); --side-muted: var(--muin-side-muted); --mark: var(--muin-mark); }
[data-product="rafiq"]  { --acc: var(--rafiq-acc);  --acc-hover: var(--rafiq-acc-hover);  --on-acc: var(--rafiq-on-acc);  --acc-tint: var(--rafiq-acc-tint);  --acc-text: var(--rafiq-acc-text);  --side: var(--rafiq-side);  --side-2: var(--rafiq-side-2);  --side-ink: var(--rafiq-side-ink);  --side-muted: var(--rafiq-side-muted);  --mark: var(--rafiq-mark); }

/* ── База ─────────────────────────────────────────────────── */
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 var(--fs-md)/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
.v-root, .v-root *, .pv, .pv *, .pv-stage, .pv-stage *, :where([class^="v-"], [class*=" v-"]), :where([class^="v-"], [class*=" v-"]) * { box-sizing: border-box; }
.v-num { font-variant-numeric: tabular-nums; }
.v-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(button, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.v-icon { flex: none; display: block; }

/* ── Кнопка ───────────────────────────────────────────────── */
.v-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--h-control); padding: 0 var(--space-4); border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 600 var(--fs-md)/1 var(--font-sans); cursor: pointer; white-space: nowrap; box-shadow: var(--elev-1); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); -webkit-tap-highlight-color: transparent; user-select: none; }
.v-btn:hover, .v-btn.is-hover { background: var(--hover); }
.v-btn:active, .v-btn.is-active { transform: translateY(1px) scale(.985); box-shadow: none; }
.v-btn.is-focus { outline: 2px solid var(--acc); outline-offset: 2px; }
.v-btn--primary { background: var(--acc); border-color: transparent; color: var(--on-acc); box-shadow: var(--elev-1), inset 0 1px 0 rgba(255,255,255,.12); }
.v-btn--primary:hover, .v-btn--primary.is-hover { background: var(--acc-hover); }
.v-btn--quiet { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink-2); }
.v-btn--quiet:hover, .v-btn--quiet.is-hover { background: var(--hover); color: var(--ink); }
.v-btn--danger { color: var(--danger-text); }
.v-btn--danger:hover, .v-btn--danger.is-hover { background: var(--danger-bg); }
.v-btn--danger-solid { background: var(--danger-text); border-color: transparent; color: var(--on-danger); }
.v-btn--danger-solid:hover, .v-btn--danger-solid.is-hover { background: var(--danger-text); box-shadow: var(--elev-1), inset 0 0 0 99px rgba(0,0,0,.12); }
.v-btn--sm { height: var(--h-control-sm); padding: 0 var(--space-3); font-size: var(--fs-sm); border-radius: var(--r-sm); gap: 6px; }
.v-btn--lg { height: var(--h-control-lg); padding: 0 20px; font-size: var(--fs-body); border-radius: var(--r-lg); }
.v-btn--block { width: 100%; }
.v-btn:disabled, .v-btn.is-disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }
.v-btn.is-loading { cursor: progress; pointer-events: none; }
.v-btn.is-loading .v-btn__label { opacity: .72; }
.v-btn--icon { width: var(--h-control); padding: 0; }
.v-btn--icon.v-btn--sm { width: var(--h-control-sm); }
.v-btn--icon.v-btn--lg { width: var(--h-control-lg); }
.v-btn__badge { position: absolute; top: -6px; right: -6px; }

.v-btngroup { display: inline-flex; border-radius: var(--r-md); box-shadow: var(--elev-1); }
.v-btngroup > .v-btn { box-shadow: none; border-radius: 0; }
.v-btngroup > .v-btn + .v-btn { margin-left: -1px; }
.v-btngroup > .v-btn:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.v-btngroup > .v-btn:last-child { border-radius: 0 var(--r-md) var(--r-md) 0; }
.v-btngroup > .v-btn:focus-visible { z-index: 1; }

/* ── Клавіша ──────────────────────────────────────────────── */
.v-kbd { display: inline-flex; align-items: center; gap: 1px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--sunken); color: var(--ink-2); font: 500 var(--fs-xs)/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: inset 0 -1px 0 var(--line); }
.v-kbd--on-acc { background: rgba(255,255,255,.18); color: inherit; box-shadow: none; }
[data-theme="dark"] .v-kbd--on-acc { background: rgba(0,0,0,.16); }

/* ── Перемикач (сегменти) ─────────────────────────────────── */
.v-seg { position: relative; display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="dark"] .v-seg { background: var(--surface); }
.v-seg__thumb { position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: var(--r-sm); background: var(--raised); box-shadow: var(--elev-1); transition: transform var(--dur-2) var(--ease-out), width var(--dur-2) var(--ease-out); }
.v-seg__btn { position: relative; z-index: 1; height: 32px; padding: 0 var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); border: none; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: 500 var(--fs-md) var(--font-sans); cursor: pointer; transition: color var(--dur-2) var(--ease-out); white-space: nowrap; }
.v-seg__btn:hover { color: var(--ink); }
.v-seg__btn[aria-checked="true"] { color: var(--ink); }
.v-seg__btn[aria-checked="true"] .v-seg__n { color: var(--acc-text); font-weight: 700; }
.v-seg__n { font-variant-numeric: tabular-nums; }
.v-seg--sm .v-seg__btn { height: 26px; padding: 0 10px; font-size: var(--fs-sm); }

/* ── Вибір варіанта кнопками ──────────────────────────────── */
.v-choice { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.v-choice__opt { display: inline-flex; align-items: center; gap: var(--space-2); height: 36px; padding: 0 var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: 500 var(--fs-md) var(--font-sans); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.v-choice__opt:hover { background: var(--hover); }
.v-choice__opt:active { transform: scale(.98); }
.v-choice__opt[aria-pressed="true"], .v-choice__opt[aria-checked="true"] { background: var(--acc-tint); border-color: var(--acc); color: var(--acc-text); }
.v-choice__opt:disabled { opacity: .45; cursor: not-allowed; }
.v-choice__check { width: 0; overflow: hidden; transition: width var(--dur-2) var(--ease-out); display: inline-flex; }
[aria-pressed="true"] > .v-choice__check, [aria-checked="true"] > .v-choice__check { width: 16px; }

/* ── Поле: підпис, підказка, помилка ──────────────────────── */
.v-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v-field__label { font: 500 var(--fs-sm)/1.4 var(--font-sans); color: var(--ink-2); }
.v-field__req { color: var(--danger-text); margin-left: 2px; }
.v-field__hint { font-size: var(--fs-sm); line-height: 1.45; color: var(--hint); }
.v-field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); line-height: 1.45; color: var(--danger-text); }
.v-field__error .v-icon { margin-top: 2px; }

/* ── Поле вводу ───────────────────────────────────────────── */
.v-input { position: relative; display: flex; align-items: center; gap: var(--space-2); width: 100%; height: var(--h-control); padding: 0 var(--space-3); border-radius: var(--r-md); border: 1px solid var(--field); background: var(--surface); color: var(--ink); font: 400 var(--fs-md) var(--font-sans); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); cursor: text; text-align: left; }
/* Поле, яке замінив скрипт forms.js (сторінки без React), лишається у формі, але не видно */
.v-input[hidden] { display: none; }
.v-input:hover, .v-input.is-hover { border-color: var(--ink-2); }
.v-input:focus-within, .v-input.is-focus, .v-input.is-open { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.v-input.is-invalid { border-color: var(--danger-text); }
.v-input.is-invalid:focus-within, .v-input.is-invalid.is-focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-text) 22%, transparent); }
.v-input.is-disabled { background: var(--sunken); border-color: var(--line); color: var(--hint); cursor: not-allowed; }
.v-input--sm { height: var(--h-control-sm); border-radius: var(--r-sm); font-size: var(--fs-sm); }
.v-input--lg { height: 52px; padding: 0 var(--space-4); border-radius: var(--r-lg); font-size: var(--fs-body); }
.v-input__el { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; color: inherit; font: inherit; padding: 0; }
.v-input__el::placeholder { color: var(--hint); }
.v-input__el:disabled { cursor: not-allowed; }
.v-input__icon { color: var(--hint); }
.v-input__suffix { color: var(--ink-2); font-size: var(--fs-sm); white-space: nowrap; }
.v-input__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-input__value.is-placeholder { color: var(--hint); }
button.v-input { cursor: pointer; }
/* Кнопка-розкривачка на сторінках без React (<details><summary class="v-btn">) — без трикутника браузера */
summary.v-btn { list-style: none; }
summary.v-btn::-webkit-details-marker, summary.v-btn::marker { display: none; content: ''; }
/* Дата з часом без React: календар і час в одному спливному */
.v-cal__time { display: flex; align-items: center; gap: 8px; padding-top: var(--space-2); margin-top: var(--space-2); border-top: 1px solid var(--line); }
.v-cal__time .v-input { width: 104px; }
.v-cal__time .v-btn { margin-left: auto; }
button.v-input:focus-visible { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.v-input--search { background: var(--page); border-color: var(--line-strong); }

.v-textarea { display: flex; flex-direction: column; border-radius: var(--r-md); border: 1px solid var(--field); background: var(--surface); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.v-textarea:hover { border-color: var(--ink-2); }
.v-textarea:focus-within, .v-textarea.is-focus { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.v-textarea.is-invalid { border-color: var(--danger-text); }
.v-textarea.is-disabled { background: var(--sunken); border-color: var(--line); }
.v-textarea__el { min-height: 88px; resize: vertical; padding: 10px var(--space-3); border: none; outline: none; background: transparent; color: var(--ink); font: 400 var(--fs-md)/1.5 var(--font-sans); border-radius: inherit; }
.v-textarea__el::placeholder { color: var(--hint); }
.v-textarea__count { align-self: flex-end; padding: 0 var(--space-3) 6px; font-size: var(--fs-xs); color: var(--hint); font-variant-numeric: tabular-nums; }
.v-textarea__count.is-over { color: var(--danger-text); font-weight: 600; }

/* ── Спливні поверхні: меню, список, календар ─────────────── */
.v-anchor { position: relative; display: inline-flex; }
.v-anchor--block { display: flex; width: 100%; }
.v-anchor--block > * { width: 100%; }
.v-pop { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: max-content; min-width: 100%; background: var(--raised); border-radius: var(--r-md); box-shadow: var(--elev-3), var(--edge); transform-origin: top left; }
.v-pop--end { left: auto; right: 0; transform-origin: top right; }
.v-pop--up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; }
.v-pop.is-enter { animation: v-pop-in var(--dur-2) var(--ease-out) both; }
@keyframes v-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }

.v-menu { padding: 4px; min-width: 220px; max-width: 360px; max-height: 320px; overflow: auto; outline: none; }
.v-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 0 10px; border: none; text-decoration: none; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: 400 var(--fs-md) var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-menu__item .v-icon { color: var(--ink-2); }
.v-menu__item:hover, .v-menu__item.is-active { background: var(--hover); }
.v-menu__item[aria-selected="true"] { color: var(--acc-text); font-weight: 600; }
.v-menu__item[aria-selected="true"] .v-icon { color: var(--acc-text); }
.v-menu__item.is-danger, .v-menu__item.is-danger .v-icon { color: var(--danger-text); }
.v-menu__item.is-danger:hover, .v-menu__item.is-danger.is-active { background: var(--danger-bg); }
.v-menu__item[aria-disabled="true"] { color: var(--hint); cursor: not-allowed; background: transparent; }
.v-menu__item[aria-disabled="true"] .v-icon { color: var(--hint); }
.v-menu__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-menu__desc { display: block; font-size: var(--fs-xs); color: var(--hint); }
.v-menu__end { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--hint); font-size: var(--fs-xs); }
.v-menu__sep { height: 1px; margin: 4px 6px; background: var(--line); }
/* Хто працює — першим рядком меню профілю в шапці: ім'я й стан чи роль, без дії */
.v-menu__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px 6px; }
.v-menu__who-name { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-menu__who-status { font-size: var(--fs-sm); color: var(--ink-2); }
.v-menu__group { padding: 8px 10px 4px; font: 600 var(--fs-xs) var(--font-sans); color: var(--ink-2); }
.v-menu__empty { padding: 14px 10px; color: var(--hint); font-size: var(--fs-sm); text-align: center; }
.v-menu mark, .v-results mark { background: none; color: var(--acc-text); font-weight: 600; }

/* ── Пошук-вибір ──────────────────────────────────────────── */
.v-combo { flex-wrap: wrap; height: auto; min-height: var(--h-control); padding: 3px var(--space-3) 3px 6px; gap: 4px; }
.v-combo .v-input__el { height: 30px; min-width: 48px; padding-left: 6px; }
.v-tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 4px 0 8px; border-radius: var(--r-sm); background: var(--acc-tint); color: var(--acc-text); font: 500 var(--fs-sm)/1 var(--font-sans); }
.v-tag__x { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border: none; border-radius: 5px; background: transparent; color: inherit; cursor: pointer; }
.v-tag__x:hover { background: color-mix(in srgb, var(--acc) 16%, transparent); }

/* ── Прапорець, радіо, перемикач ──────────────────────────── */
.v-check { position: relative; display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font: 400 var(--fs-md)/1.45 var(--font-sans); color: var(--ink); }
.v-check__input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: inherit; }
.v-check__box { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px; border: 1.5px solid var(--field); background: var(--surface); color: var(--on-acc); display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.v-check:hover .v-check__box, .v-check.is-hover .v-check__box { border-color: var(--ink-2); }
.v-check__input:focus-visible + .v-check__box, .v-check.is-focus .v-check__box { outline: 2px solid var(--acc); outline-offset: 2px; }
.v-check__input:checked + .v-check__box, .v-check.is-mixed .v-check__box { background: var(--acc); border-color: var(--acc); }
.v-check__mark { stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset var(--dur-2) var(--ease-out); }
.v-check__input:checked + .v-check__box .v-check__mark, .v-check.is-mixed .v-check__mark { stroke-dashoffset: 0; }
.v-check.is-invalid .v-check__box { border-color: var(--danger-text); }
.v-check.is-disabled { cursor: not-allowed; color: var(--hint); }
.v-check.is-disabled .v-check__box { background: var(--sunken); border-color: var(--line-strong); }
.v-check.is-disabled .v-check__input:checked + .v-check__box { background: var(--line-strong); border-color: var(--line-strong); }
.v-check__text { display: flex; flex-direction: column; }
.v-check__desc { font-size: var(--fs-sm); color: var(--ink-2); }
.v-check--radio .v-check__box { border-radius: 50%; }
.v-check--radio .v-check__input:checked + .v-check__box { background: var(--surface); border-color: var(--acc); border-width: 5.5px; }
.v-check--radio.is-disabled .v-check__input:checked + .v-check__box { background: var(--sunken); border-color: var(--line-strong); }
.v-radiogroup { display: flex; flex-direction: column; gap: 10px; border: none; margin: 0; padding: 0; }
.v-radiogroup--row { flex-direction: row; flex-wrap: wrap; gap: 20px; }

.v-switch { display: inline-flex; align-items: center; gap: 10px; border: none; background: none; padding: 0; color: var(--ink); font: 400 var(--fs-md) var(--font-sans); cursor: pointer; text-align: left; }
.v-switch__track { position: relative; flex: none; width: 36px; height: 22px; border-radius: var(--r-full); background: var(--line-strong); transition: background-color var(--dur-2) var(--ease-out); }
.v-switch__thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 2px rgba(22,24,26,.24); transition: transform var(--dur-2) var(--ease-out), width var(--dur-1) var(--ease-out); }
.v-switch:active .v-switch__thumb { width: 19px; }
.v-switch[aria-checked="true"] .v-switch__track { background: var(--acc); }
.v-switch[aria-checked="true"] .v-switch__thumb { transform: translateX(14px); }
.v-switch[aria-checked="true"]:active .v-switch__thumb { transform: translateX(11px); }
.v-switch:hover .v-switch__track { box-shadow: inset 0 0 0 99px rgba(22,24,26,.06); }
.v-switch:focus-visible { outline: none; }
.v-switch:focus-visible .v-switch__track, .v-switch.is-focus .v-switch__track { outline: 2px solid var(--acc); outline-offset: 2px; }
.v-switch:disabled { cursor: not-allowed; color: var(--hint); }
.v-switch:disabled .v-switch__track { opacity: .45; }
[data-theme="dark"] .v-switch__thumb { background: var(--ink); }
[data-theme="dark"] .v-switch[aria-checked="true"] .v-switch__thumb { background: var(--on-acc); }

/* ── Календар ─────────────────────────────────────────────── */
.v-cal { padding: var(--space-3); width: 280px; user-select: none; }
.v-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.v-cal__title { font: 600 var(--fs-md) var(--font-sans); }
.v-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.v-cal__dow { height: 28px; display: flex; align-items: center; justify-content: center; font: 600 var(--fs-xs) var(--font-sans); color: var(--hint); }
.v-cal__day { position: relative; height: 34px; border: none; background: transparent; color: var(--ink); font: 400 var(--fs-md) var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; border-radius: var(--r-sm); transition: background-color var(--dur-1) var(--ease-out); }
.v-cal__day:hover { background: var(--hover); }
.v-cal__day.is-out { color: var(--hint); }
.v-cal__day.is-today { font-weight: 700; color: var(--acc-text); }
.v-cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.v-cal__day.is-in-range { background: var(--acc-tint); color: var(--acc-text); border-radius: 0; }
.v-cal__day.is-selected { background: var(--acc); color: var(--on-acc); font-weight: 600; }
.v-cal__day.is-range-start { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.v-cal__day.is-range-end { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.v-cal__day.is-range-start.is-range-end { border-radius: var(--r-sm); }
.v-cal__day.is-in-range.is-row-start { border-radius: var(--r-sm) 0 0 var(--r-sm); }
.v-cal__day.is-in-range.is-row-end { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.v-cal__day.is-range-start.is-row-end, .v-cal__day.is-range-end.is-row-start { border-radius: var(--r-sm); }
.v-cal__day.is-selected.is-today::after { background: var(--on-acc); }
.v-cal__day:disabled { color: var(--hint); opacity: .45; cursor: not-allowed; background: transparent; }
.v-cal__foot { display: flex; gap: 6px; padding-top: var(--space-2); margin-top: var(--space-2); border-top: 1px solid var(--line); }
.v-range { display: flex; }
.v-range__presets { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); min-width: 168px; border-right: 1px solid var(--line); }
.v-range__presets .v-menu__item { min-height: 32px; }
.v-times { max-height: 232px; min-width: 120px; }
.v-times .v-menu__item { font-variant-numeric: tabular-nums; justify-content: center; }

/* ── Позначка, лічильник, аватар ──────────────────────────── */
.v-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-full); font: 500 var(--fs-sm)/1 var(--font-sans); white-space: nowrap; background: var(--neutral-bg); color: var(--neutral-text); font-variant-numeric: tabular-nums; }
.v-badge--sm { height: 20px; padding: 0 8px; font-size: var(--fs-xs); gap: 4px; }
.v-badge--success { background: var(--success-bg); color: var(--success-text); }
.v-badge--warning { background: var(--warning-bg); color: var(--warning-text); }
.v-badge--danger  { background: var(--danger-bg);  color: var(--danger-text); }
.v-badge--info    { background: var(--info-bg);    color: var(--info-text); }
.v-badge--hot     { background: var(--hot-bg);     color: var(--hot-text); }
.v-badge--accent  { background: var(--acc-tint);   color: var(--acc-text); }
.v-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink-2); }
.v-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.v-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--acc); color: var(--on-acc); font: 700 var(--fs-xs)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.v-count--neutral { background: var(--neutral-bg); color: var(--neutral-text); }
.v-count--danger { background: var(--danger-text); color: var(--on-danger); }
.v-count--dot { min-width: 8px; width: 8px; height: 8px; padding: 0; }
.v-count.is-bump { animation: v-bump var(--dur-2) var(--ease-spring); }
@keyframes v-bump { 50% { transform: scale(1.18); } }

.v-avatar { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--acc-tint); color: var(--acc-text); font: 600 var(--fs-xs)/1 var(--font-sans); letter-spacing: .01em; }
.v-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.v-avatar--xs { width: 24px; height: 24px; font-size: 10px; }
.v-avatar--lg { width: 40px; height: 40px; font-size: var(--fs-sm); }
.v-avatar--xl { width: 56px; height: 56px; font-size: var(--fs-lg); }
.v-avatar--neutral { background: var(--neutral-bg); color: var(--neutral-text); }
.v-avatar__status { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); background: var(--hint); }
.v-avatar__status--online { background: var(--success-text); }
.v-avatar__status--busy { background: var(--danger-text); }
.v-avatar__status--away { background: var(--warning-text); }
.v-avatar--xs .v-avatar__status { width: 7px; height: 7px; }
.v-avatar--xl .v-avatar__status { width: 12px; height: 12px; right: 1px; bottom: 1px; }
.v-avgroup { display: inline-flex; align-items: center; }
.v-avgroup > .v-avatar { box-shadow: 0 0 0 2px var(--surface); }
.v-avgroup > .v-avatar + .v-avatar { margin-left: -8px; }
.v-avgroup > .v-avatar--xs + .v-avatar--xs { margin-left: -4px; }

/* ── Підказка ─────────────────────────────────────────────── */
.v-tip-anchor { position: relative; display: inline-flex; }
.v-tip { position: absolute; z-index: 60; left: 50%; bottom: calc(100% + 8px); max-width: 260px; width: max-content; padding: 6px 10px; border-radius: var(--r-sm); background: var(--ink); color: var(--page); font: 500 var(--fs-sm)/1.4 var(--font-sans); box-shadow: var(--elev-3); pointer-events: none; opacity: 0; transform: translate(-50%, 4px); transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); transition-delay: 0ms; }
.v-tip--bottom { bottom: auto; top: calc(100% + 8px); transform: translate(-50%, -4px); }
.v-tip-anchor:hover > .v-tip, .v-tip-anchor:focus-within > .v-tip { opacity: 1; transform: translate(-50%, 0); transition-duration: var(--dur-2); transition-delay: 400ms; }
.v-tip.is-open { opacity: 1; transform: translate(-50%, 0); }
.v-tip .v-kbd { margin-left: 6px; background: rgba(255,255,255,.16); color: inherit; box-shadow: none; height: 18px; }
[data-theme="dark"] .v-tip .v-kbd { background: rgba(0,0,0,.12); }

/* ── Вікно, підтвердження, бічна панель ───────────────────── */
.v-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: var(--scrim); }
.v-overlay--contained { position: absolute; }
.v-overlay.is-enter { animation: v-fade var(--dur-2) var(--ease-out) both; }
.v-dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: calc(100% - 16px); background: var(--raised); border-radius: var(--r-xl); box-shadow: var(--elev-4), var(--edge); outline: none; }
.v-dialog--sm { max-width: 420px; }
.v-dialog--lg { max-width: 720px; }
.is-enter > .v-dialog { animation: v-dialog-in var(--dur-3) var(--ease-out) both; }
@keyframes v-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.v-dialog__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: 20px 20px 0 24px; }
.v-dialog__title { flex: 1; margin: 6px 0 0; font: 600 var(--fs-lg)/1.4 var(--font-sans); color: var(--ink); }
.v-dialog__desc { margin: 6px 24px 0; font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); }
.v-dialog__body { padding: var(--space-4) 24px; overflow: auto; }
/* Поля у вікні й картці — з відступом 16 px одне від одного */
.v-dialog__body > .v-field + *, .v-dialog__body > * + .v-field, .v-card__body > .v-field + *, .v-card__body > * + .v-field { margin-top: var(--space-4); }
.v-dialog__foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) 20px 20px; }
.v-dialog__foot--split { justify-content: space-between; }
.v-confirm__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--danger-bg); color: var(--danger-text); }
.v-confirm__icon--default { background: var(--acc-tint); color: var(--acc-text); }

.v-sheet-wrap { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: flex-end; }
.v-sheet-wrap--contained { position: absolute; }
.v-sheet-wrap--clear { pointer-events: none; }
.v-sheet-wrap--clear > .v-sheet { pointer-events: auto; }
.v-sheet__scrim { position: absolute; inset: 0; background: var(--scrim); }
.is-enter > .v-sheet__scrim { animation: v-fade var(--dur-3) var(--ease-out) both; }
.v-sheet { position: relative; display: flex; flex-direction: column; width: 420px; max-width: 100%; height: 100%; background: var(--surface); box-shadow: var(--elev-4); outline: none; }
.v-sheet--wide { width: 560px; }
.is-enter > .v-sheet { animation: v-sheet-in var(--dur-3) var(--ease-out) both; }
@keyframes v-sheet-in { from { transform: translateX(100%); } to { transform: none; } }
.v-sheet__head { display: flex; align-items: center; gap: var(--space-3); min-height: 60px; padding: var(--space-3) var(--space-3) var(--space-3) 20px; border-bottom: 1px solid var(--line); }
.v-sheet__title { flex: 1; margin: 0; font: 600 var(--fs-lg)/1.3 var(--font-sans); }
.v-sheet__sub { display: block; font: 400 var(--fs-sm) var(--font-sans); color: var(--ink-2); margin-top: 2px; }
.v-sheet__body { flex: 1; overflow: auto; padding: 20px; }
.v-sheet__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) 20px; border-top: 1px solid var(--line); background: var(--surface); }

/* ── Вкладки, хлібні крихти, сторінки ─────────────────────── */
.v-tabs { position: relative; display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.v-tabs__tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 2px; border: none; background: none; color: var(--ink-2); font: 500 var(--fs-md) var(--font-sans); cursor: pointer; white-space: nowrap; transition: color var(--dur-1) var(--ease-out); }
.v-tabs__tab:hover { color: var(--ink); }
.v-tabs__tab[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.v-tabs__tab:disabled { color: var(--hint); cursor: not-allowed; }
.v-tabs__tab:focus-visible { outline-offset: -2px; border-radius: var(--r-sm); }
.v-tabs__bar { position: absolute; left: 0; bottom: -1px; height: 2px; border-radius: 2px 2px 0 0; background: var(--acc); transition: transform var(--dur-2) var(--ease-in-out), width var(--dur-2) var(--ease-in-out); }

.v-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-2); }
.v-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.v-crumbs a { color: var(--ink-2); text-decoration: none; border-radius: 4px; padding: 2px 4px; transition: color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.v-crumbs a:hover { color: var(--ink); background: var(--hover); }
.v-crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; padding: 2px 4px; }
.v-crumbs .v-icon { color: var(--line-strong); }

/* Назва запису в списку чи прев'ю — посилання на повну картку: колір продукту, тонке підкреслення */
.v-record-link { font-weight: 500; color: var(--acc-text); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.v-record-link:hover { text-decoration-color: currentColor; }

.v-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); color: var(--ink-2); }
.v-pager__pages { display: flex; align-items: center; gap: 2px; }
.v-pager__page { min-width: 32px; height: 32px; padding: 0 8px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--ink-2); font: 500 var(--fs-sm) var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-pager__page:hover { background: var(--hover); color: var(--ink); }
.v-pager__page[aria-current="page"] { background: var(--acc-tint); color: var(--acc-text); font-weight: 700; }
.v-pager__gap { min-width: 24px; text-align: center; color: var(--hint); }

/* ── Меню продукту ────────────────────────────────────────── */
.v-side { display: flex; flex-direction: column; gap: 2px; width: 244px; min-height: 100%; padding: 18px 12px; background: var(--side); color: var(--side-ink); }
.v-side :focus-visible { outline-color: var(--mark); }
.v-side__brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; }
.v-side__logo { display: block; height: 40px; color: var(--mark); }
.v-side__logo svg { display: block; height: 100%; width: auto; }
.v-side__ua { font: 600 var(--fs-body)/1 var(--font-sans); color: var(--side-bright); }
.v-side__group { padding: 14px 12px 6px; font: 600 var(--fs-xs) var(--font-sans); color: var(--side-muted); }
.v-side__item { position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--side-muted); font: 500 var(--fs-md) var(--font-sans); text-decoration: none; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.v-side__item:hover { background: var(--side-2); color: var(--side-ink); }
.v-side__item[aria-current="page"] { background: var(--side-2); color: var(--side-bright); }
.v-side__item[aria-current="page"] .v-icon { color: var(--mark); }
.v-side__cnt { margin-left: auto; font: 600 var(--fs-xs) var(--font-sans); font-variant-numeric: tabular-nums; }
.v-side__item[aria-current="page"] .v-side__cnt { color: var(--side); background: var(--mark); padding: 1px 7px; border-radius: var(--r-full); }

/* ── Повідомлення в куті, банер ───────────────────────────── */
.v-toaster { position: fixed; z-index: 90; right: var(--space-5); bottom: var(--space-5); display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); pointer-events: none; }
.v-toaster--contained { position: absolute; }
.v-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: var(--space-3); width: 380px; max-width: calc(100vw - 32px); padding: 12px 10px 12px 16px; border-radius: var(--r-lg); background: var(--raised); color: var(--ink); box-shadow: var(--elev-3), var(--edge); font-size: var(--fs-md); }
.v-toast.is-enter { animation: v-toast-in var(--dur-3) var(--ease-spring) both; }
.v-toast.is-leave { animation: v-toast-out var(--dur-2) var(--ease-out) both; }
@keyframes v-toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes v-toast-out { to { opacity: 0; transform: translateX(16px); } }
.v-toast__icon { margin-top: 1px; }
.v-toast__icon--success { color: var(--success-text); }
.v-toast__icon--danger { color: var(--danger-text); }
.v-toast__icon--info { color: var(--info-text); }
.v-toast__icon--warning { color: var(--warning-text); }
.v-toast__text { flex: 1; min-width: 0; padding-top: 1px; }
.v-toast__title { font-weight: 500; line-height: 1.45; }
.v-toast__desc { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.v-toast__actions { display: flex; align-items: center; gap: 2px; margin: -5px 0; }
.v-toast__action { color: var(--acc-text); }

.v-banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: 12px var(--space-3) 12px var(--space-4); border-radius: var(--r-lg); background: var(--info-bg); color: var(--ink); font-size: var(--fs-md); line-height: 1.5; }
.v-banner > .v-icon { margin-top: 2px; color: var(--info-text); }
.v-banner--success { background: var(--success-bg); } .v-banner--success > .v-icon { color: var(--success-text); }
.v-banner--warning { background: var(--warning-bg); } .v-banner--warning > .v-icon { color: var(--warning-text); }
.v-banner--danger  { background: var(--danger-bg); }  .v-banner--danger > .v-icon  { color: var(--danger-text); }
.v-banner--neutral { background: var(--neutral-bg); } .v-banner--neutral > .v-icon { color: var(--neutral-text); }
.v-banner__text { flex: 1; min-width: 0; }
.v-banner__title { font-weight: 600; }
.v-banner__actions { display: flex; align-items: center; gap: var(--space-2); margin: -4px 0; }
.v-banner .v-btn--quiet { color: var(--ink); }
.v-banner .v-btn--quiet:hover { background: rgba(22,24,26,.06); }
[data-theme="dark"] .v-banner .v-btn--quiet:hover { background: rgba(255,255,255,.08); }
.v-banner--page { border-radius: 0; }

/* ── Прогрес, скелетон, крутилка ──────────────────────────── */
.v-progress { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v-progress__head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); color: var(--ink-2); }
.v-progress__val { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }
.v-progress__track { position: relative; height: 6px; border-radius: var(--r-full); background: var(--line); overflow: hidden; }
.v-progress--sm .v-progress__track { height: 4px; }
.v-progress__bar { height: 100%; border-radius: inherit; background: var(--acc); transform-origin: left; transition: width var(--dur-3) var(--ease-out); }
.v-progress--success .v-progress__bar { background: var(--success-text); }
.v-progress--danger .v-progress__bar { background: var(--danger-text); }
.v-progress.is-indeterminate .v-progress__bar { position: absolute; width: 36%; animation: v-indet 1.4s var(--ease-in-out) infinite; }
@keyframes v-indet { from { transform: translateX(-100%); } to { transform: translateX(280%); } }
.v-steps { display: flex; gap: 4px; }
.v-steps__seg { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--line); transition: background-color var(--dur-2) var(--ease-out); }
.v-steps__seg.is-done { background: var(--acc); }

.v-skel { display: block; border-radius: var(--r-sm); background: var(--sunken); animation: v-skel 1.6s ease-in-out infinite; }
.v-skel--text { height: 12px; border-radius: 6px; }
.v-skel--circle { border-radius: 50%; }
@keyframes v-skel { 50% { opacity: .55; } }

.v-spin { animation: v-spin .8s linear infinite; }
@keyframes v-spin { to { transform: rotate(360deg); } }

/* ── Порожній стан, картка ────────────────────────────────── */
.v-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); }
.v-empty__icon { width: 56px; height: 56px; margin-bottom: var(--space-2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--ink-2); }
.v-empty__title { margin: 0; font: 600 var(--fs-lg)/1.4 var(--font-sans); color: var(--ink); }
.v-empty__desc { margin: 0; max-width: 380px; font-size: var(--fs-md); line-height: 1.55; color: var(--ink-2); }
.v-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.v-empty--compact { padding: var(--space-5); }
.v-empty--compact .v-empty__icon { width: 40px; height: 40px; }

.v-card { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); color: var(--ink); text-align: left; }
.v-card--flat { box-shadow: var(--elev-1); }
.v-card--outline { box-shadow: none; border: 1px solid var(--line); }
.v-card--interactive { cursor: pointer; border: none; font: inherit; transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.v-card--interactive:hover { box-shadow: var(--elev-3); transform: translateY(-1px); }
.v-card--interactive:active { transform: none; box-shadow: var(--elev-1); transition-duration: var(--dur-1); }
.v-card--selected { box-shadow: var(--elev-2), inset 0 0 0 2px var(--acc); }
.v-card__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: 18px 20px 0; }
.v-card__titles { flex: 1; min-width: 0; }
.v-card__title { margin: 0; font: 600 var(--fs-lg)/1.4 var(--font-sans); }
.v-card__desc { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.v-card__body { padding: var(--space-4) 20px 20px; }
.v-card__foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) 20px; border-top: 1px solid var(--line); }

@keyframes v-fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .v-pop.is-enter, .v-overlay.is-enter, .is-enter > .v-dialog, .is-enter > .v-sheet, .is-enter > .v-sheet__scrim, .v-toast.is-enter, .v-toast.is-leave { animation: v-fade 150ms linear both; }
  .v-btn:active, .v-btn.is-active, .v-choice__opt:active, .v-card--interactive:hover { transform: none; }
  .v-seg__thumb, .v-tabs__bar, .v-switch__thumb, .v-check__mark, .v-progress__bar { transition-duration: 1ms; }
  .v-skel, .v-count.is-bump { animation: none; }
  .v-progress.is-indeterminate .v-progress__bar { animation-duration: 3s; }
  .v-spin { animation-duration: 1.6s; }
}

/* ── Лише для карток-прикладів (не частина компонентів) ──── */
.pv { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.pv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pv-col { display: flex; flex-direction: column; gap: 12px; }
.pv-cap { font: 600 var(--fs-xs)/1.3 var(--font-sans); color: var(--hint); }
.pv-grid { display: grid; gap: 12px 16px; align-items: center; }
.pv-stage { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--page); box-shadow: inset 0 0 0 1px var(--line); }
.pv-surface { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); padding: 20px; }
.pv-prod { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* ══ Робочі компоненти ══════════════════════════════════════ */

/* ── Таблиця ──────────────────────────────────────────────── */
.v-dt { position: relative; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.v-dt__scroll { overflow-x: auto; }
.v-dt__table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.v-dt__table th { height: 44px; padding: 0 16px; text-align: left; font: 600 var(--fs-xs)/1.3 var(--font-sans); color: var(--ink-2); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); position: sticky; top: 0; z-index: 1; }
.v-dt__table td { height: var(--h-row); padding: 0 16px; border-bottom: 1px solid var(--line); }
.v-dt__table tbody tr { transition: background-color var(--dur-1) var(--ease-out); }
.v-dt__table tbody tr:hover { background: var(--hover); }
.v-dt__table tbody tr:last-child td { border-bottom: none; }
.v-dt__table tr[aria-selected="true"], .v-dt__table tr[aria-selected="true"]:hover { background: var(--acc-tint); }
.v-dt__table tr.is-clickable { cursor: pointer; }
.v-dt__check { width: 44px; padding-right: 0 !important; }
.v-dt__check .v-check { vertical-align: middle; }
.v-dt__sort { display: inline-flex; align-items: center; gap: 4px; margin: 0 -6px; padding: 4px 6px; border: none; border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.v-dt__sort .v-icon { opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.v-dt__sort:hover { background: var(--hover); color: var(--ink); }
.v-dt__sort:hover .v-icon, .v-dt__sort:focus-visible .v-icon, .v-dt__sort.is-on .v-icon { opacity: 1; }
.v-dt__sort.is-on { color: var(--ink); }
.v-dt__bulk { position: absolute; z-index: 2; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px 0 16px; background: var(--acc-tint); border-bottom: 1px solid var(--line); }
.v-dt__bulk.is-enter { animation: v-bulk-in var(--dur-2) var(--ease-out) both; }
@keyframes v-bulk-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.v-dt__bulk-n { font-weight: 600; color: var(--acc-text); white-space: nowrap; }
.v-dt__bulk-actions { display: flex; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; }
.v-dt__foot { padding: 10px 16px; border-top: 1px solid var(--line); }

/* ── Конструктор фільтрів ─────────────────────────────────── */
.v-fb { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--raised); border-radius: var(--r-lg); box-shadow: var(--elev-3), var(--edge); }
.v-fb__head { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.v-fb__rules { display: flex; flex-direction: column; gap: 8px; }
.v-fb__rule { display: grid; grid-template-columns: 40px minmax(140px, 1fr) minmax(120px, .8fr) minmax(140px, 1fr) 32px; gap: 8px; align-items: center; }
.v-fb__join { font: 500 var(--fs-sm) var(--font-sans); color: var(--ink-2); text-align: right; padding-right: 2px; }
.v-fb__novalue { display: block; height: var(--h-control-sm); }
.v-fb__group-wrap { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: start; }
.v-fb__group-wrap > .v-fb__join { padding-top: 10px; }
.v-fb__group { display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 6px; border-radius: var(--r-md); background: var(--sunken); }
.v-fb__group .v-fb__rule { grid-template-columns: 40px minmax(120px, 1fr) minmax(110px, .8fr) minmax(120px, 1fr) 32px; }
.v-fb__group > .v-btn { align-self: flex-start; margin-left: 40px; }
.v-fb__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }

/* ── ⌘K і пошук у шапці ───────────────────────────────────── */
.v-cmd-overlay { align-items: flex-start; padding-top: 10vh; }
.v-cmd-overlay.v-overlay--contained { padding-top: 32px; }
.v-cmd { max-width: 600px; border-radius: var(--r-xl); overflow: hidden; }
.v-cmd__search { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--line); color: var(--hint); }
.v-cmd__input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; color: var(--ink); font: 400 var(--fs-body) var(--font-sans); }
.v-cmd__input::placeholder { color: var(--hint); }
.v-results { padding: 4px 6px 8px; max-height: 360px; overflow: auto; }
.v-results__item { min-height: 42px; }
.v-cmd__foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--hint); }
.v-cmd__foot span { display: inline-flex; align-items: center; gap: 6px; }
.v-gs__pop { padding: 0; min-width: 100%; max-width: none; max-height: none; overflow: hidden; }
.v-gs__all { padding: 6px 8px; border-top: 1px solid var(--line); }

/* ── Канбан ───────────────────────────────────────────────── */
.v-kb { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
.v-kb__col { flex: 0 0 272px; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: var(--r-lg); background: var(--sunken); transition: box-shadow var(--dur-2) var(--ease-out); }
[data-theme="dark"] .v-kb__col { background: var(--surface); }
.v-kb__col.is-over { box-shadow: inset 0 0 0 2px var(--acc); }
.v-kb__head { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 4px; }
.v-kb__title { font: 600 var(--fs-md) var(--font-sans); }
.v-kb__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.v-kb__dot.v-badge--success { color: var(--success-text); } .v-kb__dot.v-badge--warning { color: var(--warning-text); } .v-kb__dot.v-badge--info { color: var(--info-text); } .v-kb__dot.v-badge--danger { color: var(--danger-text); } .v-kb__dot.v-badge--neutral { color: var(--hint); }
.v-kb__list { display: flex; flex-direction: column; gap: 8px; min-height: 56px; }
.v-kb__card { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--elev-1); cursor: grab; transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), opacity var(--dur-1) var(--ease-out); }
.v-kb__card:hover { box-shadow: var(--elev-2); transform: translateY(-1px); }
.v-kb__card:active { cursor: grabbing; }
.v-kb__card.is-dragging { opacity: .4; }
.v-kb__card.is-dropped { animation: v-pop-in var(--dur-2) var(--ease-out); }
.v-kb__card-title { font-weight: 600; line-height: 1.4; }
.v-kb__card-text { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.45; }
.v-kb__card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; }
.v-kb__slot { height: 64px; border-radius: var(--r-md); background: var(--acc-tint); box-shadow: inset 0 0 0 1.5px var(--acc); animation: v-fade var(--dur-1) var(--ease-out); }
.v-kb__empty { display: flex; align-items: center; justify-content: center; height: 64px; border-radius: var(--r-md); color: var(--hint); font-size: var(--fs-sm); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ── Потік подій ──────────────────────────────────────────── */
.v-feed { display: flex; flex-direction: column; gap: 16px; }
.v-feed__list { position: relative; display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.v-feed__list::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px; background: var(--line); }
.v-feed__day { position: relative; padding-left: 44px; font: 600 var(--fs-xs) var(--font-sans); color: var(--hint); }
.v-feed__item { position: relative; display: flex; gap: 12px; align-items: flex-start; }
.v-feed__item.is-new { animation: v-pop-in var(--dur-2) var(--ease-out); }
.v-feed__icon { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--page); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.v-feed__item .v-avatar { box-shadow: 0 0 0 3px var(--page); }
.v-feed__body { flex: 1; min-width: 0; padding-top: 6px; }
.v-feed__event { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: var(--ink-2); line-height: 1.5; }
.v-feed__event b { color: var(--ink); font-weight: 600; }
.v-feed__detail { color: var(--ink); }
.v-feed__time { font-size: var(--fs-xs); color: var(--hint); }
.v-feed__item--comment .v-feed__body { padding-top: 0; }
.v-feed__meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: var(--fs-sm); }
.v-feed__meta span { font-size: var(--fs-xs); color: var(--hint); }
.v-feed__bubble { display: inline-block; max-width: 100%; padding: 10px 14px; border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg); background: var(--surface); box-shadow: var(--elev-1); line-height: 1.5; white-space: pre-wrap; }
.v-mention { padding: 1px 4px; border-radius: 4px; background: var(--acc-tint); color: var(--acc-text); font-weight: 600; }
/* Згадка того, хто читає, — сильніше: суцільний колір продукту */
.v-mention--me { background: var(--acc); color: var(--on-acc); }
.v-msg--mine .v-mention { background: rgba(255,255,255,.2); color: inherit; }
.v-msg--mine .v-mention--me { background: var(--surface); color: var(--acc-text); }
.v-feed__composer { display: flex; gap: 12px; align-items: flex-start; }
.v-feed__composer-bar { display: flex; align-items: center; gap: 8px; padding: 0 8px 8px 12px; }
.v-feed__composer-bar .v-field__hint { flex: 1; }
.v-mentions__el { width: 100%; min-height: 56px; resize: none; }

/* ── Чат ──────────────────────────────────────────────────── */
.v-chat { display: flex; flex-direction: column; gap: 6px; padding: 16px; overflow-y: auto; background: var(--page); }
.v-chat__day { align-self: center; margin: 10px 0 4px; padding: 3px 10px; border-radius: var(--r-full); background: var(--sunken); font: 500 var(--fs-xs) var(--font-sans); color: var(--ink-2); }
.v-chat__system { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 4px 0; font-size: var(--fs-xs); color: var(--hint); }
.v-msg { display: flex; flex-direction: column; gap: 6px; max-width: min(520px, 78%); padding: 9px 14px 7px; border-radius: 16px; font-size: var(--fs-body); line-height: 1.5; }
.v-msg.is-new { animation: v-pop-in var(--dur-2) var(--ease-out); }
.v-msg--mine { align-self: flex-end; background: var(--acc); color: var(--on-acc); border-bottom-right-radius: 6px; }
.v-msg--theirs { align-self: flex-start; background: var(--surface); color: var(--ink); box-shadow: var(--elev-1); border-bottom-left-radius: 6px; }
.v-msg__author { font: 600 var(--fs-xs) var(--font-sans); color: var(--acc-text); }
.v-msg__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.v-msg__meta { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); opacity: .78; font-variant-numeric: tabular-nums; }
.v-msg--theirs .v-msg__meta { color: var(--hint); opacity: 1; }
.v-msg__status.is-read { opacity: 1; }
.v-msg.is-failed { background: var(--danger-bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--danger-text); }
.v-msg.is-failed .v-msg__meta { color: var(--danger-text); opacity: 1; }
.v-msg__retry { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--danger-text); }
.v-msg--mine .v-attach { background: rgba(255,255,255,.14); color: inherit; box-shadow: none; }
[data-theme="dark"] .v-msg--mine .v-attach { background: rgba(0,0,0,.12); }
.v-msg--mine .v-attach__size { color: inherit; opacity: .8; }
.v-chat__more { align-self: center; }
.v-chat mark { padding: 0 2px; border-radius: 3px; background: var(--warning-bg); color: var(--warning-text); }
.v-msg--mine mark { background: var(--surface); color: var(--acc-text); }
/* Переслано, цитата, фото, реакції, «Прочитали» */
.v-msg__fwd { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--hint); }
.v-msg--mine .v-msg__fwd { color: inherit; opacity: .8; }
.v-msg__quote { display: flex; flex-direction: column; gap: 1px; max-width: 100%; padding: 4px 10px; border: none; border-left: 3px solid var(--acc); border-radius: 6px; background: var(--sunken); color: var(--ink-2); font: 400 var(--fs-sm)/1.4 var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-msg__quote:hover { background: var(--hover); }
.v-msg__quote-author { font-weight: 600; font-size: var(--fs-xs); color: var(--acc-text); }
.v-msg__quote-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-msg--mine .v-msg__quote { border-left-color: var(--on-acc); background: rgba(255,255,255,.14); color: inherit; }
.v-msg--mine .v-msg__quote:hover { background: rgba(255,255,255,.22); }
.v-msg--mine .v-msg__quote-author { color: inherit; }
.v-msg__photo { display: block; max-width: 280px; border-radius: var(--r-md); overflow: hidden; line-height: 0; }
.v-msg__photo img { display: block; max-width: 100%; max-height: 240px; object-fit: cover; }
.v-msg__reactions { display: flex; flex-wrap: wrap; gap: 4px; }
.v-reaction { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: none; border-radius: var(--r-full); background: var(--sunken); color: var(--ink); font: 500 var(--fs-xs) var(--font-sans); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-reaction:hover { background: var(--hover); }
.v-reaction[aria-pressed="true"] { background: var(--acc-tint); color: var(--acc-text); box-shadow: inset 0 0 0 1px var(--acc); }
.v-msg--mine .v-reaction { background: rgba(255,255,255,.18); color: inherit; }
.v-msg--mine .v-reaction[aria-pressed="true"] { background: var(--surface); color: var(--acc-text); box-shadow: none; }
.v-msg__readers { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: none; background: none; color: inherit; font: inherit; cursor: default; }
/* Дії з повідомленням — збоку від бульбашки, видно при наведенні чи фокусі */
.v-msg { position: relative; }
.v-msg__actions { position: absolute; top: 2px; display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.v-msg--theirs .v-msg__actions { left: 100%; margin-left: 6px; }
.v-msg--mine .v-msg__actions { right: 100%; margin-right: 6px; }
.v-msg:hover .v-msg__actions, .v-msg__actions:focus-within, .v-msg__actions:has([aria-expanded="true"]) { opacity: 1; }
.v-react-pick { display: flex; gap: 2px; padding: 4px; }
.v-react-pick__item { width: 34px; height: 34px; border: none; border-radius: var(--r-sm); background: transparent; font-size: 18px; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-react-pick__item:hover, .v-react-pick__item:focus-visible { background: var(--hover); }

.v-attach { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 8px 6px 6px; border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: background-color var(--dur-1) var(--ease-out); }
.v-attach:hover { background: var(--hover); }
.v-attach__icon { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--acc-tint); color: var(--acc-text); }
.v-attach__text { display: flex; flex-direction: column; min-width: 0; }
.v-attach__name { font: 500 var(--fs-sm)/1.35 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-attach__size { font-size: var(--fs-xs); color: var(--hint); font-variant-numeric: tabular-nums; white-space: nowrap; }

.v-composer { display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-2); transition: box-shadow var(--dur-2) var(--ease-out); }
.v-composer:focus-within { box-shadow: var(--elev-2), 0 0 0 2px var(--acc); }
.v-composer__notice { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--warning-bg); color: var(--warning-text); font-size: var(--fs-sm); }
.v-composer__input { min-height: 52px; max-height: 200px; resize: vertical; padding: 12px 14px 4px; border: none; outline: none; background: transparent; color: var(--ink); font: 400 var(--fs-body)/1.5 var(--font-sans); }
.v-composer__input::placeholder { color: var(--hint); }
.v-composer__vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 14px 6px; }
.v-composer__vars-label { font-size: var(--fs-xs); color: var(--hint); }
.v-composer__preview { flex-basis: 100%; font-size: var(--fs-sm); color: var(--ink-2); }
.v-composer__bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px; }
/* Підпис каналу й «Надіслати» — завжди в правому краї рядка */
.v-composer__end { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.v-composer__channel { font-size: var(--fs-xs); color: var(--hint); }
.v-composer__notice--drop { background: var(--acc-tint); color: var(--acc-text); }
.v-composer.is-drop { box-shadow: var(--elev-2), 0 0 0 2px var(--acc); }
.v-composer__mode { display: flex; align-items: center; gap: 8px; margin: 8px 8px 0; padding: 4px 4px 4px 10px; border-left: 3px solid var(--acc); border-radius: 6px; background: var(--sunken); color: var(--ink-2); font-size: var(--fs-sm); }
.v-composer__mode-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-composer__mode-text b { color: var(--acc-text); font-weight: 600; }
.v-composer__files { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 8px 0; }
.v-composer__files .is-failed .v-attach__size { color: var(--danger-text); }
.v-composer__rec { display: inline-flex; align-items: center; gap: 6px; }
.v-composer__error { padding: 0 12px 10px; }
.v-tpl { width: 340px; max-height: 300px; }
.v-tpl__search { padding: 4px 4px 6px; }
.v-tpl__item { align-items: flex-start; padding: 8px 10px; }
.v-tpl__item .v-menu__label { white-space: normal; font-weight: 500; }
.v-tpl__item .v-menu__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 400; margin-top: 2px; }

/* ── Завантаження файлів ──────────────────────────────────── */
.v-upload { display: flex; flex-direction: column; gap: 10px; }
.v-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; border-radius: var(--r-lg); border: 1.5px dashed var(--line-strong); background: var(--surface); text-align: center; cursor: pointer; transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.v-drop:hover { border-color: var(--ink-2); }
.v-drop:focus-within { outline: 2px solid var(--acc); outline-offset: 2px; }
.v-drop.is-over { border-color: var(--acc); background: var(--acc-tint); }
.v-drop__icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--ink-2); transition: transform var(--dur-2) var(--ease-out); }
.v-drop.is-over .v-drop__icon { transform: translateY(-3px); color: var(--acc-text); background: var(--surface); }
.v-drop__title { font-weight: 500; }
.v-drop__title u { color: var(--acc-text); text-underline-offset: 3px; }
.v-drop__hint { font-size: var(--fs-sm); color: var(--hint); }
.v-files { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.v-file { display: flex; align-items: center; gap: 12px; padding: 8px 6px 8px 8px; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--elev-1); }
.v-file.is-error { box-shadow: inset 0 0 0 1px var(--danger-text); }
.v-file.is-error .v-attach__icon { background: var(--danger-bg); color: var(--danger-text); }
.v-file__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.v-file__row { display: flex; justify-content: space-between; gap: 12px; }
.v-file__ok { color: var(--success-text); }

/* ── Аудіо ────────────────────────────────────────────────── */
.v-audio { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-1); }
.v-audio__row { display: flex; align-items: center; gap: 12px; }
.v-audio__play { flex: none; width: 38px; height: 38px; border-radius: 50%; border: none; display: inline-flex; align-items: center; justify-content: center; background: var(--acc); color: var(--on-acc); cursor: pointer; box-shadow: var(--elev-1); transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.v-audio__play:hover { background: var(--acc-hover); }
.v-audio__play:active { transform: scale(.94); }
.v-audio__wave { position: relative; flex: 1; min-width: 120px; height: 36px; display: flex; align-items: center; gap: 2px; cursor: pointer; border-radius: 4px; }
.v-audio__bar { flex: 1; min-width: 1px; border-radius: 2px; background: var(--line-strong); transition: background-color var(--dur-1) var(--ease-out); }
.v-audio__bar.is-played { background: var(--acc); }
.v-audio__mark { position: absolute; top: -7px; width: 10px; height: 10px; margin-left: -5px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); background: var(--info-text); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.v-audio__mark:hover { transform: scale(1.3); }
.v-audio__mark.is-warning { background: var(--warning-text); } .v-audio__mark.is-success { background: var(--success-text); } .v-audio__mark.is-danger { background: var(--danger-text); }
.v-audio__time { flex: none; font-size: var(--fs-sm); font-weight: 600; }
.v-audio__time span { color: var(--hint); font-weight: 400; }
.v-audio__list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 8px 0 0; list-style: none; border-top: 1px solid var(--line); }
.v-audio__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 32px; padding: 0 8px; border: none; border-radius: var(--r-sm); background: none; color: var(--ink); font: 400 var(--fs-md) var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-audio__item:hover { background: var(--hover); }
.v-audio__item.is-on { background: var(--acc-tint); }
.v-audio__tc { min-width: 36px; font-weight: 600; color: var(--acc-text); }
.v-audio__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--info-text); flex: none; }
.v-audio__dot.is-warning { background: var(--warning-text); } .v-audio__dot.is-success { background: var(--success-text); } .v-audio__dot.is-danger { background: var(--danger-text); }

/* ── Редактор тексту ──────────────────────────────────────── */
.v-rte { display: flex; flex-direction: column; border-radius: var(--r-md); border: 1px solid var(--field); background: var(--surface); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.v-rte:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); }
.v-rte.is-invalid { border-color: var(--danger-text); }
.v-rte__bar { display: flex; align-items: center; gap: 2px; padding: 4px 8px 4px 4px; border-bottom: 1px solid var(--line); }
.v-rte__bar .v-btn.is-pressed { background: var(--acc-tint); color: var(--acc-text); }
.v-rte__sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.v-rte__count { font-size: var(--fs-xs); color: var(--hint); }
.v-rte__area { min-height: 140px; max-height: 420px; overflow: auto; padding: 12px 14px; outline: none; font: 400 var(--fs-body)/1.6 var(--font-sans); color: var(--ink); }
.v-rte__area:empty::before { content: attr(data-placeholder); color: var(--hint); }
.v-rte__area h3 { margin: 4px 0 6px; font: 600 var(--fs-lg)/1.4 var(--font-sans); }
.v-rte__area p { margin: 0 0 8px; }
.v-rte__area ul, .v-rte__area ol { margin: 0 0 8px; padding-left: 22px; }
.v-rte__area a { color: var(--acc-text); text-underline-offset: 3px; }

/* ── Кроки ────────────────────────────────────────────────── */
.v-stepper { display: flex; margin: 0; padding: 0; list-style: none; }
.v-step { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-right: 12px; }
.v-step__dot { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 600 var(--fs-sm) var(--font-sans); font-variant-numeric: tabular-nums; background: var(--surface); color: var(--hint); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.v-step.is-done .v-step__dot { background: var(--acc); color: var(--on-acc); box-shadow: none; }
.v-step.is-current .v-step__dot { background: var(--acc-tint); color: var(--acc-text); box-shadow: inset 0 0 0 2px var(--acc); }
.v-step__line { position: absolute; top: 13px; left: 36px; right: 8px; height: 2px; border-radius: 1px; background: var(--line); }
.v-step.is-done .v-step__line { background: var(--acc); }
.v-step__text { display: flex; flex-direction: column; min-width: 0; }
.v-step__label { font: 500 var(--fs-md)/1.35 var(--font-sans); color: var(--ink-2); }
.v-step.is-current .v-step__label { color: var(--ink); font-weight: 600; }
.v-step.is-done .v-step__label { color: var(--ink); }
.v-step__desc { font-size: var(--fs-xs); color: var(--hint); }
.v-stepper--v { flex-direction: column; gap: 4px; }
.v-stepper--v .v-step { flex-direction: row; gap: 12px; padding: 0 0 18px; }
.v-stepper--v .v-step__line { top: 32px; bottom: 2px; left: 13px; right: auto; width: 2px; height: auto; }
.v-stepper--v .v-step__text { padding-top: 4px; }

/* ── Мапінг імпорту ───────────────────────────────────────── */
.v-map { display: flex; flex-direction: column; gap: 12px; }
.v-map__table { width: 100%; border-collapse: collapse; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.v-map__table th { height: 40px; padding: 0 14px; text-align: left; font: 600 var(--fs-xs) var(--font-sans); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.v-map__table td { padding: 8px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.v-map__table tr:last-child td { border-bottom: none; }
.v-map__table tr.is-skipped .v-map__col { color: var(--hint); }
.v-map__col { font-weight: 600; }
.v-map__samples { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); color: var(--hint); }
.v-map__arrow { width: 28px; color: var(--hint); padding: 0 !important; }
.v-map__table td:nth-child(3) { width: 34%; }
.v-map__foot { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }

/* ── Календар тижня ───────────────────────────────────────── */
.v-wcal { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.v-wcal__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.v-wcal__title { margin: 0; font: 600 var(--fs-lg)/1.3 var(--font-sans); }
.v-wcal__grid { display: grid; grid-template-columns: 56px repeat(7, minmax(88px, 1fr)); overflow-x: auto; }
.v-wcal__corner { border-bottom: 1px solid var(--line); }
.v-wcal__dayhead { display: flex; align-items: baseline; gap: 6px; padding: 10px 10px 8px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); }
.v-wcal__dayhead b { font-size: var(--fs-lg); font-weight: 600; color: var(--ink); }
.v-wcal__dayhead.is-today b { display: inline-flex; min-width: 28px; height: 28px; padding: 0 4px; align-items: center; justify-content: center; border-radius: var(--r-full); background: var(--acc); color: var(--on-acc); }
.v-wcal__dayhead.is-today { color: var(--acc-text); font-weight: 600; }
.v-wcal__gutter { display: flex; flex-direction: column; }
.v-wcal__gutter span { position: relative; padding-right: 8px; text-align: right; font-size: var(--fs-xs); color: var(--hint); font-variant-numeric: tabular-nums; transform: translateY(-7px); }
.v-wcal__gutter span:first-child { visibility: hidden; }
.v-wcal__col { position: relative; border-left: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px); }
.v-wcal__col.is-weekend, .v-wcal__dayhead.is-weekend { background-color: var(--page); }
.v-wcal__ev { position: absolute; left: 3px; right: 3px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 8px; border: none; border-radius: var(--r-sm); text-align: left; font: inherit; cursor: pointer; overflow: hidden; transition: box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); box-shadow: 0 0 0 2px var(--surface); }
.v-wcal__ev:hover { box-shadow: 0 0 0 2px var(--surface), var(--elev-2); z-index: 2; }
.v-wcal__ev.is-accent { background: var(--acc); color: var(--on-acc); }
.v-wcal__ev.is-info { background: var(--info-bg); color: var(--info-text); }
.v-wcal__ev.is-warning { background: var(--warning-bg); color: var(--warning-text); }
.v-wcal__ev.is-success { background: var(--success-bg); color: var(--success-text); }
.v-wcal__ev.is-neutral { background: var(--neutral-bg); color: var(--neutral-text); }
.v-wcal__ev-title { font: 600 var(--fs-sm)/1.3 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.v-wcal__ev-time { font-size: var(--fs-xs); opacity: .85; white-space: nowrap; }
.v-wcal__ev.is-short { justify-content: center; padding-top: 2px; padding-bottom: 2px; }
.v-wcal__ev.is-short .v-wcal__ev-time { display: none; }
.v-wcal__now { position: absolute; left: -1px; right: 0; height: 2px; background: var(--danger-text); z-index: 3; }
.v-wcal__now::before { content: ""; position: absolute; left: -4px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger-text); }

/* ── Табель ───────────────────────────────────────────────── */
.v-ts { display: flex; flex-direction: column; gap: 10px; }
.v-ts__table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; font-size: var(--fs-md); }
.v-ts__table th, .v-ts__table td { height: 44px; padding: 0 4px; border-bottom: 1px solid var(--line); text-align: center; }
.v-ts__table thead th { height: 48px; font: 500 var(--fs-xs)/1.2 var(--font-sans); color: var(--ink-2); }
.v-ts__table thead th span { display: block; }
.v-ts__table thead th b { font-size: var(--fs-md); color: var(--ink); font-variant-numeric: tabular-nums; }
.v-ts__table thead th.is-today b { color: var(--acc-text); }
.v-ts__table tbody tr:last-child > * { border-bottom: none; }
.v-ts__name { position: sticky; left: 0; z-index: 1; min-width: 190px; padding: 0 12px !important; text-align: left !important; background: var(--surface); border-right: 1px solid var(--line); }
th.v-ts__name { font: 500 var(--fs-md) var(--font-sans); }
tbody .v-ts__name { display: flex; align-items: center; gap: 8px; height: 44px; white-space: nowrap; }
.v-ts__table .is-weekend { background: var(--page); }
.v-ts__cell { width: 100%; height: 34px; min-width: 40px; border: none; border-radius: var(--r-sm); background: transparent; color: var(--ink); font: 500 var(--fs-md) var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-ts__cell:hover { background: var(--hover); }
td.is-short .v-ts__cell { color: var(--warning-text); }
.v-ts__empty { color: var(--hint); }
.v-ts__edit { width: 48px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 22%, transparent); background: var(--surface); color: var(--ink); text-align: center; font: 500 var(--fs-md) var(--font-sans); outline: none; }
.v-ts__total { min-width: 96px; padding: 0 14px !important; text-align: right !important; border-left: 1px solid var(--line); white-space: nowrap; }
.v-ts__total .is-under, .v-ts__total .is-over { display: block; font-size: var(--fs-xs); font-weight: 600; }
.v-ts__total .is-under { color: var(--danger-text); }
.v-ts__total .is-over { color: var(--info-text); }
.v-ts__legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: var(--fs-sm); color: var(--ink-2); }

/* ── Гант ─────────────────────────────────────────────────── */
.v-gantt { display: flex; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.v-gantt__names { flex: none; width: 220px; border-right: 1px solid var(--line); }
.v-gantt__corner { height: 56px; display: flex; align-items: flex-end; padding: 0 14px 8px; font: 600 var(--fs-xs) var(--font-sans); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.v-gantt__name { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-md); white-space: nowrap; overflow: hidden; }
.v-gantt__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.v-gantt__name.is-group { font-weight: 600; }
.v-gantt__scroll { flex: 1; overflow-x: auto; }
.v-gantt__months { display: flex; height: 28px; }
.v-gantt__months span { flex: none; padding: 8px 8px 0; font: 600 var(--fs-xs) var(--font-sans); color: var(--ink-2); border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; }
.v-gantt__days { display: flex; height: 28px; border-bottom: 1px solid var(--line); }
.v-gantt__days span { flex: none; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--hint); font-variant-numeric: tabular-nums; }
.v-gantt__days span.is-today { color: var(--acc-text); font-weight: 700; }
.v-gantt__body { position: relative; }
.v-gantt__we { position: absolute; top: 0; bottom: 0; background: var(--page); }
.v-gantt__rowline { position: absolute; left: 0; right: 0; height: 1px; background: var(--line); }
.v-gantt__deps { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.v-gantt__deps path { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.v-gantt__deps .v-gantt__arrowhead { fill: var(--line-strong); stroke: none; }
.v-gantt__bar { position: absolute; height: 24px; padding: 0; border: none; border-radius: var(--r-sm); background: var(--acc-tint); overflow: hidden; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent); transition: box-shadow var(--dur-1) var(--ease-out); }
.v-gantt__bar:hover { box-shadow: inset 0 0 0 1px var(--acc), var(--elev-2); }
.v-gantt__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc); }
.v-gantt__label.is-low { color: var(--acc-text); }
.v-gantt__label { position: relative; z-index: 1; display: block; padding: 0 8px; font: 600 var(--fs-xs)/24px var(--font-sans); color: var(--on-acc); text-align: left; font-variant-numeric: tabular-nums; }
.v-gantt__bar.is-group { height: 10px; margin-top: 7px; border-radius: 3px; background: var(--ink-2); box-shadow: none; }
.v-gantt__bar.is-group .v-gantt__fill { background: var(--ink); }
.v-gantt__bar.is-danger { background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger-text); }
.v-gantt__bar.is-danger .v-gantt__fill { background: var(--danger-text); }
.v-gantt__diamond, .v-gantt__diamond-s { display: inline-block; width: 14px; height: 14px; transform: rotate(45deg); border-radius: 3px; background: var(--acc); }
.v-gantt__diamond { position: absolute; box-shadow: 0 0 0 2px var(--surface); }
.v-gantt__diamond-s { width: 10px; height: 10px; flex: none; margin: 0 2px; }
.v-gantt__today { position: absolute; top: -28px; bottom: 0; width: 2px; margin-left: -1px; background: var(--acc); z-index: 2; }
.v-gantt__tip { white-space: nowrap; z-index: 5; }

/* ── Показники й графіки ──────────────────────────────────── */
.v-stat { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); min-width: 0; }
.v-stat__label { font-size: var(--fs-sm); color: var(--ink-2); }
.v-stat__row { display: flex; align-items: flex-end; gap: 6px; }
.v-stat__value { font: 600 30px/1.1 var(--font-sans); letter-spacing: -0.02em; }
.v-stat__unit { font-size: var(--fs-md); color: var(--ink-2); padding-bottom: 3px; }
.v-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--ink-2); }
.v-stat__delta.is-good .v-icon, .v-stat__delta.is-good b { color: var(--success-text); }
.v-stat__delta.is-bad .v-icon, .v-stat__delta.is-bad b { color: var(--danger-text); }
.v-stat__hint { font-size: var(--fs-sm); color: var(--hint); }
.v-spark { flex: none; overflow: visible; }
.v-spark__line { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-spark__dot { fill: var(--acc); stroke: var(--surface); stroke-width: 2; }

.v-chart { overflow: hidden; margin: 0; padding: 16px 18px 12px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); min-width: 0; }
.v-chart__head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.v-chart__title { font: 600 var(--fs-md)/1.4 var(--font-sans); }
.v-chart__sub { font-size: var(--fs-sm); color: var(--ink-2); }
.v-chart__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-2); }
.v-chart__legend li { display: inline-flex; align-items: center; gap: 6px; }
.v-chart__key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.v-chart__key.is-line { width: 14px; height: 3px; border-radius: 2px; }
.v-chart__plot { position: relative; }
.v-chart__plot svg { display: block; overflow: visible; }
.v-chart__grid { stroke: var(--line); stroke-width: 1; }
.v-chart__base { stroke: var(--line-strong); stroke-width: 1; }
.v-chart__tick { fill: var(--hint); font: 400 var(--fs-xs) var(--font-sans); font-variant-numeric: tabular-nums; }
.v-chart__value { fill: var(--ink); font: 600 var(--fs-xs) var(--font-sans); }
.v-chart__label { fill: var(--ink-2); font: 500 var(--fs-xs) var(--font-sans); }
.v-chart__bar { transition: opacity var(--dur-1) var(--ease-out); }
.v-chart__plot:hover .v-chart__bar:not(.is-hover) { opacity: .55; }
.v-chart__plot rect:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.v-chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.v-chart__area { fill: var(--acc); opacity: .1; }
.v-chart__dot { stroke: var(--surface); stroke-width: 2; }
.v-chart__cross { stroke: var(--line-strong); stroke-width: 1; }
.v-chart__tip { position: absolute; z-index: 3; min-width: 140px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--raised); box-shadow: var(--elev-3), var(--edge); font-size: var(--fs-sm); pointer-events: none; }
.v-chart__tip-x { margin-bottom: 4px; font-size: var(--fs-xs); color: var(--hint); }
.v-chart__tip-row { display: flex; align-items: center; gap: 8px; }
.v-chart__tip-row span:last-child { color: var(--ink-2); }
.v-chart__table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.v-chart__table th { padding: 6px 8px; font-size: var(--fs-xs); color: var(--ink-2); border-bottom: 1px solid var(--line); }
.v-chart__table td { padding: 6px 8px; border-bottom: 1px solid var(--line); }

/* ── Сповіщення ───────────────────────────────────────────── */
.v-notes { width: 380px; max-width: calc(100vw - 32px); display: flex; flex-direction: column; overflow: hidden; }
.v-notes__head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 4px 16px; }
.v-notes__head h3 { margin: 0; font: 600 var(--fs-lg)/1.3 var(--font-sans); }
.v-notes__tabs { padding: 4px 16px 8px; }
.v-notes__list { max-height: 380px; overflow: auto; padding: 0 6px 6px; }
.v-note { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 10px 28px 10px 10px; border: none; border-radius: var(--r-md); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-note:hover { background: var(--hover); }
.v-note__icon { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--acc-tint); color: var(--acc-text); }
.v-note__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v-note__title { font-size: var(--fs-md); line-height: 1.4; color: var(--ink-2); }
.v-note.is-unread .v-note__title { color: var(--ink); font-weight: 600; }
.v-note__body { font-size: var(--fs-sm); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.v-note__meta { font-size: var(--fs-xs); color: var(--hint); }
.v-note__dot { position: absolute; right: 12px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
.v-notes__foot { padding: 6px 8px; border-top: 1px solid var(--line); }

@media (prefers-reduced-motion: reduce) {
  .v-dt__bulk.is-enter, .v-kb__card.is-dropped, .v-feed__item.is-new, .v-msg.is-new { animation: v-fade 150ms linear both; }
  .v-kb__card:hover, .v-drop.is-over .v-drop__icon { transform: none; }
}

/* ══ Спеціальні компоненти ══════════════════════════════════ */

/* ── Відео з коментарями ──────────────────────────────────── */
.v-video { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
.v-video__frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: #0c0e0d; box-shadow: var(--elev-2); }
.v-video__el { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.v-video__poster { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 20px 24px; text-align: left; color: #ffffff; background: var(--vaha-side); }
[data-product] .v-video__poster { background: var(--side); }
.v-video__poster-title { font: 600 var(--fs-xl)/1.3 var(--font-sans); }
.v-video__poster-sub { font-size: var(--fs-md); color: var(--side-muted, #a2aea6); }
.v-video__big { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding-left: 4px; background: rgba(255,255,255,.92); color: #16181a; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform var(--dur-1) var(--ease-out); }
.v-video__big:hover { transform: scale(1.06); }
.v-video__big:active { transform: scale(.96); }
.v-video__controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 24px 12px 10px; color: #ffffff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.v-video__btn { flex: none; min-width: 32px; height: 32px; padding: 0 6px; border: none; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; background: transparent; color: inherit; font: 600 var(--fs-sm) var(--font-sans); cursor: pointer; }
.v-video__btn:hover { background: rgba(255,255,255,.14); }
.v-video__btn:focus-visible, .v-video__track:focus-visible { outline: 2px solid #ffffff; outline-offset: 1px; }
.v-video__time { flex: none; font-size: var(--fs-sm); }
.v-video__track { position: relative; flex: 1; height: 24px; display: flex; align-items: center; cursor: pointer; border-radius: 4px; }
.v-video__rail { position: relative; flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden; }
.v-video__played { position: absolute; left: 0; top: 0; bottom: 0; background: #ffffff; }
.v-video__chap { position: absolute; top: 10px; width: 2px; height: 4px; margin-left: -1px; background: rgba(0,0,0,.6); }
.v-video__pin { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; padding: 0; border: 2px solid #ffffff; border-radius: 50%; background: var(--acc); cursor: pointer; transition: transform var(--dur-1) var(--ease-out); }
.v-video__pin:hover { transform: scale(1.3); }
.v-video__side { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.v-video__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.v-video__head span { color: var(--hint); font-size: var(--fs-sm); }
.v-video__list { flex: 1; overflow: auto; margin: 0; padding: 6px; list-style: none; }
.v-video__item { display: flex; gap: 10px; width: 100%; padding: 8px; border: none; border-radius: var(--r-sm); background: none; color: var(--ink); font: 400 var(--fs-sm)/1.45 var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-video__item:hover { background: var(--hover); }
.v-video__item.is-on { background: var(--acc-tint); }
.v-video__item.is-new { animation: v-pop-in var(--dur-2) var(--ease-out); }
.v-video__tc { flex: none; min-width: 34px; font-weight: 600; color: var(--acc-text); }
.v-video__text b { font-weight: 600; }
.v-video__add { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }

/* ── Мапа ─────────────────────────────────────────────────── */
.v-map2 { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 12px; }
.v-map2__canvas { position: relative; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-2); overflow: hidden; }
.v-map2__svg { display: block; width: 100%; height: auto; }
.v-map2__grat { stroke: var(--line); stroke-width: 1; }
.v-map2__gl { fill: var(--hint); font: 400 10px var(--font-sans); }
.v-map2__pt { cursor: pointer; outline: none; }
.v-map2__pt circle { fill: var(--acc); fill-opacity: .82; stroke: var(--surface); stroke-width: 2; transition: fill-opacity var(--dur-1) var(--ease-out); }
.v-map2__pt.is-warning circle { fill: var(--warning-text); } .v-map2__pt.is-danger circle { fill: var(--danger-text); }
.v-map2__pt.is-on circle, .v-map2__pt:focus-visible circle { fill-opacity: 1; stroke: var(--ink); }
.v-map2__n { fill: var(--on-acc); font: 700 10px var(--font-sans); pointer-events: none; }
.v-map2__label { fill: var(--ink-2); font: 500 var(--fs-xs) var(--font-sans); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.v-map2__pt.is-on .v-map2__label { fill: var(--ink); font-weight: 600; }
.v-map2__tip { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 2px; margin: 14px 0 0 14px; padding: 8px 10px; border-radius: var(--r-sm); background: var(--raised); box-shadow: var(--elev-3), var(--edge); font-size: var(--fs-sm); pointer-events: none; }
.v-map2__tip span { color: var(--ink-2); }
.v-map2__zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 4px; }
.v-map2__list { margin: 0; padding: 6px; list-style: none; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); max-height: 380px; overflow: auto; }
.v-map2__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); flex: none; }
.v-map2__dot.is-warning { background: var(--warning-text); } .v-map2__dot.is-danger { background: var(--danger-text); }

/* ── Дерево ───────────────────────────────────────────────── */
.v-tree { margin: 0; padding: 6px; list-style: none; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); }
.v-tree__row { position: relative; display: flex; align-items: center; gap: 6px; min-height: 34px; padding-right: 10px; border-radius: var(--r-sm); cursor: pointer; outline: none; transition: background-color var(--dur-1) var(--ease-out); }
.v-tree__row:hover { background: var(--hover); }
.v-tree__row:focus-visible { box-shadow: inset 0 0 0 2px var(--acc); }
.v-tree__row.is-current { background: var(--acc-tint); }
.v-tree__row.is-current .v-tree__label { color: var(--acc-text); font-weight: 600; }
.v-tree__row.is-current .v-tree__icon { color: var(--acc-text); }
.v-tree__guide { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.v-tree__chev { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--hint); border-radius: 4px; transition: transform var(--dur-2) var(--ease-out); }
.v-tree__chev.is-open { transform: rotate(90deg); }
.v-tree__icon { color: var(--ink-2); }
.v-tree__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-tree__count { font-size: var(--fs-xs); color: var(--hint); }
.v-tree .v-check { margin-right: 2px; }

/* ── Редактор вузлів ──────────────────────────────────────── */
.v-nodes { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.v-nodes__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.v-nodes__hint { font-size: var(--fs-sm); color: var(--hint); }
.v-nodes__canvas { position: relative; height: 380px; overflow: auto; background-color: var(--page); background-image: radial-gradient(var(--line-strong) 1px, transparent 1.2px); background-size: 16px 16px; touch-action: none; }
.v-nodes__plane { position: relative; transform-origin: 0 0; }
.v-nodes__edges { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.v-nodes__edge { fill: none; stroke: var(--line-strong); stroke-width: 2; transition: stroke var(--dur-1) var(--ease-out); }
.v-nodes__edge.is-on { stroke: var(--acc); }
.v-nodes__edge.is-draft { stroke: var(--acc); stroke-dasharray: 6 4; }
.v-nodes__arrowhead { fill: var(--line-strong); }
.v-node { position: absolute; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 10px; border-radius: var(--r-md); background: var(--raised); box-shadow: var(--elev-2), var(--edge); cursor: grab; user-select: none; touch-action: none; outline: none; transition: box-shadow var(--dur-1) var(--ease-out); }
.v-node:active { cursor: grabbing; }
.v-node:hover { box-shadow: var(--elev-3), var(--edge); }
.v-node.is-selected, .v-node:focus-visible { z-index: 2; box-shadow: var(--elev-3), 0 0 0 2px var(--acc); }
.v-node__icon { flex: none; width: 34px; height: 34px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--acc-tint); color: var(--acc-text); }
.v-node.is-test .v-node__icon { background: var(--info-bg); color: var(--info-text); }
.v-node.is-start .v-node__icon, .v-node.is-finish .v-node__icon { background: var(--acc); color: var(--on-acc); }
.v-node__text { display: flex; flex-direction: column; min-width: 0; }
.v-node__kind { font-size: var(--fs-xs); color: var(--hint); }
.v-node__title { font: 600 var(--fs-sm)/1.35 var(--font-sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-node__port { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 2px var(--line-strong); }
.v-node__port.is-in { left: -6px; }
.v-node__port.is-out { right: -6px; cursor: crosshair; box-shadow: inset 0 0 0 2px var(--acc); transition: transform var(--dur-1) var(--ease-out); }
.v-node__port.is-out:hover { transform: scale(1.35); background: var(--acc); }

/* ── Конструктор тестів ───────────────────────────────────── */
.v-qb { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.v-qb__q { align-self: stretch; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); }
.v-qb__head { display: flex; align-items: flex-start; gap: 10px; }
.v-qb__n { flex: none; width: 28px; height: 28px; margin-top: 6px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--acc-tint); color: var(--acc-text); font: 700 var(--fs-sm) var(--font-sans); }
.v-qb__opts, .v-qb__text { display: flex; flex-direction: column; gap: 6px; padding-left: 38px; align-items: flex-start; }
.v-qb__opt { align-self: stretch; display: grid; grid-template-columns: 22px 1fr auto 32px; gap: 10px; align-items: center; }
.v-qb__mark { width: 20px; height: 20px; padding: 0; border: 1.5px solid var(--field); background: var(--surface); color: var(--on-acc); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.v-qb__mark.is-radio { border-radius: 50%; } .v-qb__mark.is-check { border-radius: 5px; }
.v-qb__mark.is-on { background: var(--success-text); border-color: var(--success-text); color: var(--surface); }
.v-qb__mark:hover { border-color: var(--success-text); }
.v-qb__foot { display: flex; align-items: center; gap: 8px; padding: 8px 0 0 38px; border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }

/* ── Проходження тесту ────────────────────────────────────── */
.v-quiz { display: flex; flex-direction: column; gap: 14px; max-width: 640px; padding: 22px 24px; background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--elev-2); }
.v-quiz__top { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--ink-2); }
.v-quiz__time { display: inline-flex; align-items: center; gap: 6px; }
.v-quiz__q { margin: 6px 0 0; font: 600 var(--fs-xl)/1.35 var(--font-sans); }
.v-quiz__hint { margin-top: -8px; font-size: var(--fs-sm); color: var(--ink-2); }
.v-quiz__opts { display: flex; flex-direction: column; gap: 8px; }
.v-quiz__opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: 400 var(--fs-body)/1.45 var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.v-quiz__opt:hover { background: var(--hover); }
.v-quiz__opt:active { transform: scale(.995); }
.v-quiz__opt.is-on { border-color: var(--acc); background: var(--acc-tint); }
.v-quiz__opt.is-right { border-color: var(--success-text); background: var(--success-bg); }
.v-quiz__opt.is-wrong { border-color: var(--danger-text); background: var(--danger-bg); }
.v-quiz__opt.is-dim { opacity: .6; }
.v-quiz__key { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--ink-2); font: 600 var(--fs-sm) var(--font-sans); }
.v-quiz__key.is-square { border-radius: var(--r-sm); }
.v-quiz__opt.is-on .v-quiz__key { background: var(--acc); color: var(--on-acc); }
.v-quiz__opt.is-right .v-quiz__key { background: var(--success-text); color: var(--surface); }
.v-quiz__opt.is-wrong .v-quiz__key { background: var(--danger-text); color: var(--surface); }
.v-quiz__nav { display: flex; gap: 8px; padding-top: 4px; }
.v-quiz--result { align-items: center; text-align: center; padding: 32px 24px; }
.v-quiz__medal { width: 64px; height: 64px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.v-quiz__medal.is-ok { background: var(--success-bg); color: var(--success-text); }
.v-quiz__medal.is-bad { background: var(--warning-bg); color: var(--warning-text); }
.v-quiz__score { font-size: var(--fs-xl); color: var(--ink-2); }
.v-quiz__score b { font-size: 48px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
.v-quiz__note { margin: 0; color: var(--ink-2); }

/* ── Матриця доступів ─────────────────────────────────────── */
.v-perm { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.v-perm__scroll { overflow-x: auto; }
.v-perm__table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.v-perm__table th, .v-perm__table td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.v-perm__table thead th { height: 52px; font: 600 var(--fs-sm)/1.3 var(--font-sans); color: var(--ink); white-space: nowrap; }
.v-perm__name { position: sticky; left: 0; z-index: 1; min-width: 200px; text-align: left !important; background: var(--surface); font-weight: 500; }
.v-perm__name span:first-child { display: block; }
.v-perm__note { display: block; font: 400 var(--fs-xs)/1.35 var(--font-sans); color: var(--hint); white-space: normal; }
.v-perm__group th { padding: 14px 12px 6px; text-align: left; font: 600 var(--fs-xs) var(--font-sans); color: var(--ink-2); background: var(--page); }
.v-perm__cell { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 92px; height: 30px; padding: 0 10px; border: none; border-radius: var(--r-full); background: var(--neutral-bg); color: var(--hint); font: 500 var(--fs-sm) var(--font-sans); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out); }
.v-perm__cell:active { transform: scale(.96); }
.v-perm__cell.is-view { background: var(--info-bg); color: var(--info-text); }
.v-perm__cell.is-edit { background: var(--acc-tint); color: var(--acc-text); }
.v-perm__cell:disabled { cursor: not-allowed; opacity: .7; }
.v-perm__cell.is-changed::after { content: ""; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--warning-text); box-shadow: 0 0 0 2px var(--surface); }
.v-perm__cell.is-static { min-width: 0; height: 24px; cursor: default; font-size: var(--fs-xs); }
.v-perm__cell.is-locked { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.v-perm__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.v-perm__legend { display: flex; flex-wrap: wrap; gap: 6px; }
.v-perm__changed { font-size: var(--fs-sm); color: var(--warning-text); font-weight: 600; }

/* ── Журнал аудиту ────────────────────────────────────────── */
.v-audit { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.v-audit__bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.v-audit__list { margin: 0; padding: 0 6px 6px; list-style: none; }
.v-audit__day { padding: 12px 10px 4px; font: 600 var(--fs-xs) var(--font-sans); color: var(--hint); }
.v-audit__row { border-radius: var(--r-sm); }
.v-audit__row.is-open { background: var(--page); }
.v-audit__main { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 4px 10px; border: none; border-radius: var(--r-sm); background: none; color: var(--ink-2); font: 400 var(--fs-md) var(--font-sans); text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-audit__main:disabled { cursor: default; }
.v-audit__main:not(:disabled):hover { background: var(--hover); }
.v-audit__time { flex: none; width: 44px; font-size: var(--fs-sm); color: var(--hint); }
.v-audit__what { flex: 1; min-width: 0; }
.v-audit__what b { color: var(--ink); font-weight: 600; }
.v-audit__obj { color: var(--acc-text); font-weight: 500; }
.v-audit__chev { color: var(--hint); transition: transform var(--dur-2) var(--ease-out); }
.v-audit__chev.is-open { transform: rotate(180deg); }
.v-audit__diff { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; padding: 4px 14px 12px 64px; font-size: var(--fs-sm); }
.v-audit__diff dt { color: var(--ink-2); }
.v-audit__diff dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--hint); }
.v-audit__diff del { padding: 1px 6px; border-radius: 4px; background: var(--danger-bg); color: var(--danger-text); }
.v-audit__diff ins { padding: 1px 6px; border-radius: 4px; background: var(--success-bg); color: var(--success-text); text-decoration: none; }
.v-audit__empty { font-style: italic; }

/* ── Стан інтеграцій ──────────────────────────────────────── */
.v-ints { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.v-int { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); }
.v-int.is-down { box-shadow: var(--elev-2), inset 0 0 0 1px var(--danger-text); }
.v-int__head { display: flex; align-items: center; gap: 12px; }
.v-int__logo { flex: none; width: 38px; height: 38px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; background: var(--sunken); color: var(--ink-2); font: 700 var(--fs-lg) var(--font-sans); }
.v-int__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v-int__titles span { font-size: var(--fs-xs); color: var(--hint); }
.v-int__msg { padding: 8px 10px; border-radius: var(--r-sm); background: var(--danger-bg); color: var(--ink); font-size: var(--fs-sm); }
.v-int.is-degraded .v-int__msg { background: var(--warning-bg); }
.v-int__bars { display: flex; gap: 2px; height: 22px; }
.v-int__bar { flex: 1; border-radius: 2px; background: var(--success-text); opacity: .8; transition: opacity var(--dur-1) var(--ease-out); }
.v-int__bar:hover { opacity: 1; }
.v-int__bar.is-degraded { background: var(--warning-text); } .v-int__bar.is-down { background: var(--danger-text); } .v-int__bar.is-paused { background: var(--line-strong); }
.v-int__legend { display: flex; justify-content: space-between; margin-top: 4px; font-size: var(--fs-xs); color: var(--hint); }
.v-int__foot { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.v-int__checked { font-size: var(--fs-xs); color: var(--hint); }

/* ── Друк ─────────────────────────────────────────────────── */
.v-print { display: flex; flex-direction: column; gap: 12px; }
.v-print__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v-print__desk { display: flex; justify-content: center; padding: 24px; border-radius: var(--r-lg); background: var(--sunken); overflow: auto; }
.v-print__page { flex: none; background: #ffffff; color: #16181a; box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 12px 32px -8px rgba(0,0,0,.2); font-family: var(--font-sans); }
.v-print__page--a4 { width: 595px; min-height: 420px; padding: 36px 40px; font-size: 11px; line-height: 1.45; }
.v-print__page--label { width: 300px; height: 300px; padding: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 11px; border-radius: 4px; }
.v-print__head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 2px solid #16181a; }
.v-print__head h2 { margin: 2px 0; font-size: 18px; font-weight: 700; }
.v-print__org { font-weight: 600; color: #555960; }
.v-print__meta { color: #555960; }
.v-print__table { width: 100%; border-collapse: collapse; }
.v-print__table th { padding: 6px; text-align: left; font-size: 10px; font-weight: 600; color: #555960; border-bottom: 1px solid #16181a; }
.v-print__table td { padding: 8px 6px; border-bottom: 1px solid #cfcfc9; vertical-align: top; }
.v-print__box { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #16181a; border-radius: 3px; }
.v-print__qr { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1.5px dashed #8a8c88; border-radius: 4px; color: #555960; font-size: 9px; }
.v-print__foot { display: flex; justify-content: space-between; margin-top: 28px; color: #555960; }
.v-print__lab-top, .v-print__lab-foot { display: flex; justify-content: space-between; font-weight: 600; }
.v-print__ttn { padding: 8px 0; font-size: 26px; font-weight: 700; letter-spacing: .04em; text-align: center; border-top: 2px solid #16181a; border-bottom: 2px solid #16181a; }
.v-print__lab-body { flex: 1; display: flex; justify-content: space-between; gap: 12px; }
.v-print__lab-body b { display: block; font-size: 14px; margin: 2px 0; }
.v-print__k { font-size: 9px; color: #555960; text-transform: uppercase; letter-spacing: .06em; }

/* ── Порівняння версій ────────────────────────────────────── */
.v-diff { display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.v-diff__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--hint); }
.v-diff__sum { font-size: var(--fs-sm); font-weight: 600; }
.v-diff__sum .is-add { color: var(--success-text); } .v-diff__sum .is-del { color: var(--danger-text); }
.v-diff__cols { display: grid; grid-template-columns: 1fr 1fr; }
.v-diff__cols > .v-diff__col + .v-diff__col { border-left: 1px solid var(--line); }
.v-diff__col { min-width: 0; }
.v-diff__cap { padding: 8px 16px; font: 600 var(--fs-xs) var(--font-sans); color: var(--ink-2); background: var(--page); border-bottom: 1px solid var(--line); }
.v-diff__text { padding: 14px 16px; font: 400 var(--fs-body)/1.7 var(--font-sans); white-space: pre-wrap; }
.v-diff__text del { border-radius: 3px; background: var(--danger-bg); color: var(--danger-text); text-decoration: line-through; text-decoration-thickness: 1px; }
.v-diff__text ins { border-radius: 3px; background: var(--success-bg); color: var(--success-text); text-decoration: none; }
.v-diff__foot { padding: 10px 14px; border-top: 1px solid var(--line); }

@media print {
  body { background: #ffffff; }
  body * { visibility: hidden; }
  .v-print__page, .v-print__page * { visibility: visible; }
  .v-print__page { position: absolute; left: 0; top: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v-video__item.is-new { animation: v-fade 150ms linear both; }
  .v-video__big:hover, .v-video__pin:hover, .v-node__port.is-out:hover { transform: none; }
}

/* ══ Каркас продукту й шапка сторінки ═══════════════════════ */
.v-shell { position: relative; display: flex; height: 100%; min-height: 560px; background: var(--page); color: var(--ink); }
.v-build-version { position: fixed; left: 0; bottom: 0; width: 244px; padding: var(--space-1) var(--space-4); background: var(--side); color: var(--side-muted); font: 400 var(--fs-xs)/1.5 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-shell > .v-build-version { position: absolute; }
/* Каркас — на всю висоту вікна: сторінка, body і корінь застосунку (#app, #root) тягнуться до низу самі */
html:has(.v-shell), html:has(.v-shell) > body, body > :has(> .v-shell) { height: 100%; }
/* У каркасі на висоту вікна блоки сторінки й пункти меню не стискаються — робоча область і меню прокручуються */
.v-shell__main:not(.is-flush) > *, .v-shell > .v-side > * { flex-shrink: 0; }
.v-shell > .v-side { flex: none; height: 100%; min-height: 0; overflow-y: auto; padding-bottom: 26px; } /* знизу — місце під значок версії продукту в лівому нижньому куті */
.v-shell__work { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Шапка: пошук ліворуч, решта — праворуч, профіль завжди останній у правому краї */
.v-shell__top { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 60px; padding: 0 20px 0 28px; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.v-shell__search { width: min(480px, 46%); margin-right: auto; }
.v-shell__me { width: auto; padding: 0 2px; border-radius: var(--r-full); }
.v-shell__main { flex: 1; min-height: 0; overflow: auto; padding: 24px 28px 32px; display: flex; flex-direction: column; gap: 20px; }
.v-shell__main.is-flush { padding: 0; gap: 0; }

.v-ph { display: flex; flex-direction: column; gap: 10px; }
.v-ph__row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.v-ph__titles { flex: 1 1 320px; min-width: 0; }
.v-ph__title { display: flex; align-items: baseline; gap: 10px; margin: 0; font: 600 var(--fs-2xl)/1.15 var(--font-sans); letter-spacing: -0.02em; }
.v-ph__count { font-size: var(--fs-lg); font-weight: 500; color: var(--hint); letter-spacing: 0; }
.v-ph__sub { margin-top: 6px; font-size: var(--fs-md); color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.v-ph__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.v-ph__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Допоміжне для шаблонів сторінок */
/* Тексти й форми — до 720 px завширшки */
.tp-narrow { width: 100%; max-width: 720px; }
.tp-grid { display: grid; gap: 20px; min-height: 0; }
.tp-cols-3 { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr) minmax(260px, 320px); align-items: start; }
.tp-cols-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.tp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: var(--fs-md); }
.tp-kv dt { color: var(--ink-2); }
.tp-kv dd { margin: 0; min-width: 0; }
.tp-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.tp-list > li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.tp-list > li:last-child { border-bottom: none; }
.tp-zone { position: absolute; z-index: 30; padding: 3px 8px; border-radius: var(--r-full); background: var(--ink); color: var(--page); font: 600 var(--fs-xs)/1.3 var(--font-sans); white-space: nowrap; pointer-events: none; }
.tp-inbox { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(260px, 300px); height: 100%; min-height: 0; }
.tp-pane { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--surface); }
.tp-pane:last-child { border-right: none; }
.tp-pane__head .tp-conv__name { font-size: var(--fs-body); }
.tp-pane__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.tp-conv { display: flex; gap: 12px; width: 100%; padding: 12px 16px; border: none; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.tp-conv:hover { background: var(--hover); }
.tp-conv.is-on { background: var(--acc-tint); }
.tp-conv__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-conv__row { display: flex; align-items: center; gap: 8px; }
.tp-conv__name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-conv__time { font-size: var(--fs-xs); color: var(--hint); font-variant-numeric: tabular-nums; }
.tp-conv__last { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Колонки «Переписок»: кожна прокручується сама; пошук над списком, поле відповіді під стрічкою */
.tp-pane__search { flex: none; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.tp-pane__scroll { flex: 1; min-height: 0; overflow-y: auto; }
.tp-pane > .v-chat { flex: 1; min-height: 0; }
.tp-pane__foot { flex: none; padding: 12px; background: var(--page); }
.tp-pane__title { flex: 1 1 140px; min-width: 0; }
.tp-pane__sub { font-size: var(--fs-sm); color: var(--ink-2); }
.tp-pane__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.tp-pane__body { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.tp-person { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; text-align: center; border-bottom: 1px solid var(--line); }
.tp-person__name { font-weight: 600; font-size: var(--fs-lg); }
.tp-person__sub { color: var(--ink-2); }
.tp-subnav { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--elev-2); }
.tp-subnav .v-menu__item { min-height: 38px; }
.tp-subnav .v-menu__item[aria-current="page"] { background: var(--acc-tint); color: var(--acc-text); font-weight: 600; }
.tp-subnav .v-menu__item[aria-current="page"] .v-icon { color: var(--acc-text); }

/* ══ Запасні компоненти ═════════════════════════════════════ */

/* ── Телефон і сума ───────────────────────────────────────── */
.v-phone__cc { flex: none; display: inline-flex; align-items: center; align-self: stretch; padding-right: var(--space-2); border-right: 1px solid var(--line); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.v-input.is-disabled .v-phone__cc { color: var(--hint); }

/* ── Відділення Нової пошти ───────────────────────────────── */
.v-np { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.v-np__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.v-np__bar > .v-input { flex: 1 1 180px; width: auto; }
.v-np__list { max-height: 252px; overflow: auto; padding: 4px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.v-np__item { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border-radius: var(--r-sm); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out); }
.v-np__item > .v-icon { color: var(--ink-2); }
.v-np__item:hover, .v-np__item.is-active { background: var(--hover); }
.v-np__item[aria-selected="true"] { background: var(--acc-tint); }
.v-np__item[aria-selected="true"] .v-np__name, .v-np__item[aria-selected="true"] > .v-icon { color: var(--acc-text); }
.v-np__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v-np__name { font-weight: 600; color: var(--ink); }
.v-np__addr { font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-np__addr mark, .v-keys__row mark { background: none; color: var(--acc-text); font-weight: 600; }
.v-np__end { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: var(--fs-xs); color: var(--hint); white-space: nowrap; }
.v-np__count { font-size: var(--fs-xs); color: var(--hint); }
.v-np--done { flex-direction: row; align-items: center; padding: 10px 10px 10px 14px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.v-np--done > .v-icon { color: var(--acc-text); }
.v-np__sum { flex: 1; min-width: 0; }
.v-np__title { font-weight: 600; }
.v-np__meta { font-size: var(--fs-sm); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Сканування штрихкоду ─────────────────────────────────── */
.v-scan { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.v-scan__box { padding-right: 8px; }
.v-scan__box .v-input__el { font-size: var(--fs-lg); letter-spacing: .02em; }
.v-scan__ready { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--warning-text); white-space: nowrap; }
.v-scan__ready.is-on { color: var(--success-text); }
.v-scan__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.v-scan__res { display: flex; align-items: center; gap: var(--space-3); padding: 12px 16px; border-radius: var(--r-lg); background: var(--success-bg); }
.v-scan__res > .v-icon { color: var(--success-text); }
.v-scan__res--warn { background: var(--warning-bg); }
.v-scan__res--warn > .v-icon { color: var(--warning-text); }
.v-scan__res--unknown { background: var(--danger-bg); }
.v-scan__res--unknown > .v-icon { color: var(--danger-text); }
.v-scan__res.is-new { animation: v-scan-in var(--dur-2) var(--ease-out) both; }
@keyframes v-scan-in { from { opacity: .35; transform: scale(.985); } to { opacity: 1; transform: none; } }
.v-scan__txt { flex: 1; min-width: 0; }
.v-scan__title { font: 600 var(--fs-body)/1.4 var(--font-sans); color: var(--ink); }
.v-scan__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: var(--fs-sm); color: var(--ink-2); }
.v-scan__n { flex: none; font: 700 var(--fs-xl)/1 var(--font-sans); color: var(--ink); }
.v-scan__hist { margin: 0; padding: 0; list-style: none; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.v-scan__hist li { display: flex; align-items: center; gap: var(--space-3); min-height: 36px; padding: 0 12px; font-size: var(--fs-sm); border-bottom: 1px solid var(--line); }
.v-scan__hist li:last-child { border-bottom: none; }
.v-scan__hist li.is-unknown .v-scan__hname { color: var(--danger-text); }
.v-scan__hist li.is-warn .v-scan__hname { color: var(--warning-text); }
.v-scan__time { flex: none; width: 40px; color: var(--hint); }
.v-scan__hname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-scan__code { color: var(--ink-2); }

/* ── Підказка ШІ ──────────────────────────────────────────── */
.v-ai { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--elev-1), inset 0 0 0 1px var(--line); }
.v-ai__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v-ai__mark { color: var(--acc-text); }
.v-ai__title { flex: none; font: 600 var(--fs-sm)/1.3 var(--font-sans); color: var(--ink); }
.v-ai__src { flex: 1; min-width: 0; font-size: var(--fs-xs); color: var(--hint); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-ai__body { display: flex; flex-direction: column; gap: 8px; }
.v-ai__text { white-space: pre-wrap; font-size: var(--fs-md); line-height: 1.55; color: var(--ink); }
.v-ai__note { font-size: var(--fs-xs); line-height: 1.45; color: var(--hint); }
.v-ai__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.v-ai__err { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); }
.v-ai--gone { flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--hint); font-size: var(--fs-sm); }
.v-ai--gone > span { flex: 1; }

/* ── Збережені види ───────────────────────────────────────── */
.v-views { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); min-width: 0; }
.v-views__tabs { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; }
.v-views__tab { display: inline-flex; align-items: center; border-radius: var(--r-md); transition: background-color var(--dur-1) var(--ease-out); }
.v-views__tab:hover { background: var(--hover); }
.v-views__tab.is-on { background: var(--acc-tint); }
.v-views__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: none; border-radius: var(--r-md); background: none; color: var(--ink-2); font: 500 var(--fs-md) var(--font-sans); cursor: pointer; white-space: nowrap; }
.v-views__btn .v-icon { color: var(--hint); }
.v-views__tab.is-on .v-views__btn, .v-views__tab.is-on .v-views__btn .v-icon { color: var(--acc-text); }
.v-views__tab.is-on .v-views__btn { font-weight: 600; }
.v-views__n { color: var(--hint); font-weight: 500; }
.v-views__tab.is-on .v-views__n { color: var(--acc-text); }
.v-views__dirty { width: 7px; height: 7px; border-radius: 50%; background: var(--warning-text); }
.v-views__tab .v-anchor { margin: 0 4px 0 -4px; }
.v-btn--sm.v-views__more { width: 24px; height: 24px; color: var(--acc-text); }
.v-views__end { flex: none; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.v-views__hint { font-size: var(--fs-sm); color: var(--warning-text); white-space: nowrap; }
.v-views__ren .v-input { width: 180px; }
.v-views__pop { width: 300px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.v-views__popfoot { display: flex; justify-content: flex-end; gap: 6px; }

/* ── Редагування в комірці ────────────────────────────────── */
.v-cell { position: relative; display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 32px; margin: 0 -8px; padding: 0 8px; border-radius: var(--r-sm); cursor: text; outline: none; transition: background-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.v-cell::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--success-bg); opacity: 0; pointer-events: none; }
.v-cell > * { position: relative; z-index: 1; }
.v-cell:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); }
.v-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--acc); }
.v-cell.is-saved::after { animation: v-cell-saved 900ms var(--ease-out) both; }
@keyframes v-cell-saved { 0%, 35% { opacity: 1; } to { opacity: 0; } }
.v-cell.is-ro { cursor: default; }
.v-cell.is-ro:hover { background: none; box-shadow: none; }
.v-cell--end { justify-content: flex-end; }
.v-cell__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-cell:not(.v-cell--end) .v-cell__text, .v-cell__empty { flex: 1; }
.v-cell__empty { color: var(--hint); }
.v-cell--end .v-cell__empty { flex: none; }
.v-cell__pen { color: var(--hint); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.v-cell--end .v-cell__pen { order: -1; }
.v-cell:hover .v-cell__pen, .v-cell:focus-visible .v-cell__pen { opacity: 1; }
.v-cell.is-edit { padding: 0; cursor: default; background: none; box-shadow: none; }
.v-cell.is-edit > .v-input { flex: 1; min-width: 96px; }
.v-cell.is-edit > .v-spin { position: absolute; right: 10px; color: var(--ink-2); }
.v-cell__selv { cursor: pointer; outline: none; }
.v-cell__menu { z-index: 90; }
.v-cell__err { position: absolute; z-index: 3; left: 0; bottom: calc(100% + 4px); display: inline-flex; align-items: center; gap: 6px; max-width: 320px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--raised); color: var(--danger-text); font-size: var(--fs-sm); line-height: 1.35; text-align: left; white-space: nowrap; box-shadow: var(--elev-3), var(--edge); }
.v-cell--end .v-cell__err { left: auto; right: 0; }
.v-cell--end .v-input__el { text-align: right; }

/* ── Дві панелі зі зміною ширини ──────────────────────────── */
.v-split { position: relative; display: flex; height: 100%; min-height: 0; }
.v-split__pane { flex: none; min-width: 0; min-height: 0; overflow: auto; }
.v-split__pane--end { flex: 1; }
.v-split__handle { position: relative; z-index: 2; flex: none; width: 1px; background: var(--line); cursor: col-resize; touch-action: none; }
.v-split__handle::before { content: ''; position: absolute; top: 0; bottom: 0; left: -5px; right: -5px; }
.v-split__handle::after { content: ''; position: absolute; top: 0; bottom: 0; left: -1px; width: 3px; background: var(--acc); opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
.v-split__handle:hover::after { opacity: 1; transition-delay: 120ms; }
.v-split__handle:focus-visible { outline: none; }
.v-split__handle:focus-visible::after, .v-split.is-drag .v-split__handle::after { opacity: 1; transition-delay: 0ms; }
.v-split.is-drag { cursor: col-resize; user-select: none; }
.v-split.is-drag .v-split__pane { pointer-events: none; }

/* ── Усі клавіші ──────────────────────────────────────────── */
.v-keys { display: flex; flex-direction: column; gap: var(--space-4); }
.v-keys__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-5) var(--space-6); }
.v-keys__title { margin: 0 0 4px; font: 600 var(--fs-xs)/1.3 var(--font-sans); color: var(--ink-2); }
.v-keys__list { margin: 0; }
.v-keys__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; border-bottom: 1px solid var(--line); }
.v-keys__row:last-child { border-bottom: none; }
.v-keys__row dt { min-width: 0; font-size: var(--fs-md); color: var(--ink); }
.v-keys__row dd { flex: none; display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.v-keys__or { font-size: var(--fs-xs); color: var(--hint); }
.v-keys__foot { margin: 0; font-size: var(--fs-xs); color: var(--hint); }

/* ── Немає зв'язку ────────────────────────────────────────── */
.v-offline { align-items: center; padding-top: 9px; padding-bottom: 9px; }
.v-offline > .v-icon { margin-top: 0; }
.v-banner--neutral > .v-spin { color: var(--neutral-text); }
.v-offline .v-banner__text { display: flex; flex-wrap: wrap; column-gap: 6px; }
.v-offline__text { color: var(--ink-2); }
.v-offline.is-enter { animation: v-offline-in var(--dur-2) var(--ease-out) both; }
@keyframes v-offline-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── Підказки першого запуску ─────────────────────────────── */
.v-coach__ring { position: absolute; z-index: 60; border-radius: var(--r-md); box-shadow: 0 0 0 2px var(--acc), 0 0 0 6px color-mix(in srgb, var(--acc) 22%, transparent); pointer-events: none; }
.v-coach { position: absolute; z-index: 61; width: 300px; padding: 14px 16px 12px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--elev-3), var(--edge); }
.v-coach.is-enter { animation: v-pop-in var(--dur-2) var(--ease-out) both; }
.v-coach__arrow { position: absolute; width: 12px; height: 12px; background: var(--raised); transform: rotate(45deg); }
.v-coach--bottom .v-coach__arrow { top: -6px; margin-left: -6px; }
.v-coach--top .v-coach__arrow { bottom: -6px; margin-left: -6px; }
.v-coach--right .v-coach__arrow { left: -6px; top: 18px; }
.v-coach--left .v-coach__arrow { right: -6px; top: 18px; }
.v-coach__step { font-size: var(--fs-xs); color: var(--hint); }
.v-coach__title { margin-top: 2px; font: 600 var(--fs-body)/1.4 var(--font-sans); color: var(--ink); }
.v-coach__text { margin: 4px 0 12px; font-size: var(--fs-md); line-height: 1.5; color: var(--ink-2); }
.v-coach__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
  .v-scan__res.is-new, .v-offline.is-enter, .v-coach.is-enter { animation: v-fade 150ms linear both; }
  .v-split__handle::after { transition-delay: 0ms; }
}