/* ═════════ dz5 · фундамент: общие компоненты кабинета в духе kokonut (19.10.2026) ═════════
   Подключается ПОСЛЕДНИМ из стилей (после dz4-lab.css и всех dz-*.css), JS — js/86_dz5-base.js.
   Правило владельца «как встраивать компонент»: kokonut — образец вида; механика (бегунок, волна,
   стопка) — как в образце; цвета, шрифты и подписи — наши; разметка и логика экранов не меняются.

   ⚠️ ВИД меняется ТОЛЬКО под html[data-lab] (проба владельца). Без пробы здесь работают лишь
   исправления ошибок, видимые всем: тост на телефоне над нижней панелью, шаблон «пусто /
   загрузка / ошибка с кнопкой Повторить».

   Компоненты для других разделов (классы — в отчёте 1_фундамент.md):
     .ui-btn (+ .primary | .secondary | .ghost | .danger, размер .sm) — или существующие .btn/.btn.ghost
     .ui-seg  — переключатель «smooth-tab» с бегунком (дети-кнопки, активная .on|.active|aria-pressed)
     .ui-metrics > .ui-metric (.ui-metric-l подпись · .ui-metric-v число · .ui-metric-d дельта .up|.down · .ui-metric-f подвал)
     .ui-state (.ui-state-ico · .ui-state-t · .ui-state-s · .ui-state-act) — uiState('empty'|'loading'|'error', {...})
     .ui-stagger — дети появляются «волной»; .ui-lift — подъём при наведении
   Цвета — только токены кабинета (--lab-c1…c5 — смысловые цвета пробы). */

/* ───────── 0. Исправления для всех (не вид) ───────── */
/* тост на телефоне не закрывает нижнюю панель (#mobTabbar ≈ 64 px + полоска iPhone) */
@media (max-width:768px){
  body.dz2m #pfToast,body.dz2m .toast{bottom:calc(76px + env(safe-area-inset-bottom))!important;max-width:calc(100vw - 32px)!important}
}
/* шаблон состояний — нейтральный базовый вид для всех; в пробе ниже он мягче */
.ui-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:28px 16px;text-align:center;color:var(--muted)}
.ui-state-ico{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;background:var(--panel2);color:var(--muted);margin-bottom:4px}
.ui-state-ico svg{width:20px;height:20px}
.ui-state-t{font-size:14px;font-weight:600;color:var(--ink)}
.ui-state-s{font-size:12.5px;color:var(--muted);max-width:420px;line-height:1.45;overflow-wrap:anywhere}
.ui-state-act{margin-top:8px}
.ui-state.err .ui-state-ico{background:var(--soft-red);color:var(--ink-red)}
.ui-state.load{align-items:stretch;padding:14px 16px}
.ui-state.load .skel{height:12px}
.ui-state.load .skel:nth-child(2n){width:82%}
.ui-state.load .skel:nth-child(3n){width:64%}

/* ───────── 1. Типографика пробы ───────── */
/* все цифры в пробе — равной ширины: колонки и метрики не «пляшут» */
html[data-lab]:not([data-dz-off]) body{font-variant-numeric:tabular-nums}
/* Oswald — только заголовок страницы h1 (и логотип). Всё остальное — Inter 600 обычным регистром */
html[data-lab]:not([data-dz-off]):not(#lab) :is(h2,h3,h4,h5,.stage-title,.kpi-num,.modal-title,.prof-name,.prof-ava,.prof-photo,
  .income-grid .it-num,.gauge-val,.gauge-legend .gl b,.pbar-val,.fn-step .fn-num,.fn-arrow .fn-conv,.moti-fixed-row b,.mini .m-num,
  .quick .q-num,.pr-c-num,.ap-v,.dr-len,.pf-tt,.pf-daybadge,.cl-col-head .cl-cnt,.ocard .o-price,.ocard .o-foot b,.opt .o-price,
  .active-task.lead-look .ll-title,.pf-stagechips.mob-open .sc-head b,.nav-sub .rg-n,.reg-num,.est-row.tot,.mks-v,
  .stat-section-title,.panel-box h3,.estimate h3,.obj-section-head h2,.stat-head h2,.cl-col-head .cl-col-title,.moti h4,.moti-fixed-title,#platform #pfColBtn){
  font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:600;text-transform:none;letter-spacing:-.005em}
html[data-lab]:not([data-dz-off]) [style*="Oswald"]:not(h1){font-family:Inter,system-ui,sans-serif!important;text-transform:none!important}
html[data-lab]:not([data-dz-off]) svg text{font-family:Inter,system-ui,sans-serif}
/* единая шкала: h1 26 · h2 18 · h3 15 · h4 14 (телефон: h1 22) */
html[data-lab]:not([data-dz-off]):not(#lab) :is(.topbar,.tk-head,.dz3o-tt) h1{font-family:Oswald,Inter,sans-serif;font-size:26px;font-weight:600;line-height:1.15;letter-spacing:.005em;text-transform:none}
html[data-lab]:not([data-dz-off]):not(#lab) .main h2{font-size:18px;line-height:1.3}
html[data-lab]:not([data-dz-off]):not(#lab) .main h3{font-size:15px;line-height:1.35;color:var(--ink)}
html[data-lab]:not([data-dz-off]):not(#lab) .main h4{font-size:14px;line-height:1.35}
html[data-lab]:not([data-dz-off]):not(#lab) .stage-title{font-size:13px;letter-spacing:0}
html[data-lab]:not([data-dz-off]):not(#lab) .stat-head h2{font-size:15px;color:var(--ink)}
@media (max-width:768px){
  html[data-lab]:not([data-dz-off]):not(#lab) :is(.topbar,.tk-head,.dz3o-tt) h1{font-size:22px}
}

/* ───────── 2. Кнопки: 4 вида × 2 размера (38 / 32), радиус 8 ─────────
   primary   — .btn (без ghost), .btn.green, .ui-btn.primary
   secondary — .btn.ghost, .ui-btn / .ui-btn.secondary
   ghost     — .btn.ghost.modal-x, .ui-btn.ghost (без рамки, подложка при наведении)
   danger    — .btn.danger, .btn.dz2p-danger, .ui-btn.danger
   размер    — .sm (32 px): в таблицах, строках, плитках; на телефоне всё ≥ 44 px (прежнее правило) */
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn,.ui-btn){
  box-sizing:border-box;min-height:38px;padding:9px 16px;border:1px solid transparent;border-radius:var(--r-md,8px);
  font:600 13.5px/18px Inter,system-ui,sans-serif;letter-spacing:0;text-transform:none;white-space:nowrap;
  transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out,transform .1s ease-out}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn:not(.ghost):not(.lf-saved):not(.lf-dirty),.btn.green,.ui-btn.primary){
  background:var(--gold-fill);color:var(--on-gold);border-color:var(--gold-fill);box-shadow:var(--sh-1)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn:not(.ghost):not(.lf-saved):not(.lf-dirty),.btn.green,.ui-btn.primary):hover:not(:disabled){background:var(--gold-fill-h);border-color:var(--gold-fill-h)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn.ghost,.ui-btn:not(.primary):not(.ghost):not(.danger)){
  background:var(--panel);color:var(--ink);border-color:var(--line);font-weight:500;box-shadow:var(--sh-1)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn.ghost,.ui-btn:not(.primary):not(.ghost):not(.danger)):hover:not(:disabled){background:var(--hover);border-color:var(--line);color:var(--ink)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn.ghost.modal-x,.ui-btn.ghost,.btn.ghost.ui-ghost){
  background:transparent;border-color:transparent;box-shadow:none;color:var(--muted)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn.ghost.modal-x,.ui-btn.ghost,.btn.ghost.ui-ghost):hover:not(:disabled){background:var(--hover);color:var(--ink)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn.danger,.btn.dz2p-danger,.ui-btn.danger,.btn.ghost[style*="--red"]){
  background:var(--panel)!important;color:var(--ink-red)!important;border-color:color-mix(in oklab,var(--red) 40%,var(--line))!important;box-shadow:none}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn.danger,.btn.dz2p-danger,.ui-btn.danger,.btn.ghost[style*="--red"]):hover:not(:disabled){background:var(--soft-red)!important}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn,.ui-btn):active:not(:disabled){transform:scale(.98)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn,.ui-btn):disabled{opacity:.5;box-shadow:none;cursor:default}
/* малый размер 32 px */
html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn.sm,.ui-btn.sm,td .btn,.mt-row .btn,.dz-tile .btn,.modal-bar .btn.modal-x,.pf-hbtn){
  min-height:32px;padding:6px 12px;font-size:13px;line-height:18px}
/* телефон: палец — 44 px, как было в рабочем виде (style.css) */
@media (max-width:768px){
  html[data-lab]:not([data-dz-off]):not(#lab) :is(.btn,.ui-btn):not(.ui-x){min-height:44px}
}
/* крестик «закрыть» — квадрат 32 px */
html[data-lab]:not([data-dz-off]):not(#lab) .ui-x{display:inline-flex;align-items:center;justify-content:center;width:32px;min-width:32px;height:32px;min-height:32px;padding:0!important;
  border-radius:var(--r-md,8px)!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--muted)!important;margin-left:auto;flex:none;font-size:16px;line-height:1}
html[data-lab]:not([data-dz-off]):not(#lab) .ui-x:hover{background:var(--hover)!important;color:var(--ink)!important}
html[data-lab]:not([data-dz-off]):not(#lab) .ui-x svg{width:16px;height:16px}

/* ───────── 3. Переключатели: один вид «smooth-tab» — сегмент с бегунком ─────────
   Бегунок рисует ::after контейнера; js/86 ставит ему --ui-tx/--ui-tw по активной кнопке
   (класс .ui-seg-on на контейнере). Пока JS не успел — активная кнопка подсвечена сама. */
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-seg,.dz-seg,.pf-seg,.dzt-seg,.smm-seg,.dzs-st,.rds-seg,.tk-modes,.cal-modes,.seg:has(> button)){
  position:relative;display:inline-flex;align-items:center;gap:2px;padding:3px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  background:var(--panel2);border:0;border-radius:10px;box-shadow:none;isolation:isolate}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-seg,.dz-seg,.pf-seg,.dzt-seg,.smm-seg,.dzs-st,.rds-seg,.tk-modes,.cal-modes,.seg)::-webkit-scrollbar{display:none}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-seg,.dz-seg,.pf-seg,.dzt-seg,.smm-seg,.dzs-st,.rds-seg,.tk-modes,.cal-modes,.seg) > button{
  position:relative;z-index:1;flex:none;min-height:30px;padding:5px 12px;border:0!important;border-radius:8px;background:transparent!important;box-shadow:none!important;
  color:var(--muted);font:500 13px/20px Inter,system-ui,sans-serif;white-space:nowrap;transition:color .15s ease-out}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-seg,.dz-seg,.pf-seg,.dzt-seg,.smm-seg,.dzs-st,.rds-seg,.tk-modes,.cal-modes,.seg) > button:hover{color:var(--ink)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-seg,.dz-seg,.pf-seg,.dzt-seg,.smm-seg,.dzs-st,.rds-seg,.tk-modes,.cal-modes,.seg) > button:is(.on,.active,.sel,[aria-pressed="true"],[aria-selected="true"]){
  color:var(--ink);font-weight:600}
/* без JS (или до него) — плашка на самой кнопке */
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-seg,.dz-seg,.pf-seg,.dzt-seg,.smm-seg,.dzs-st,.rds-seg,.tk-modes,.cal-modes,.seg):not(.ui-seg-on) > button:is(.on,.active,.sel,[aria-pressed="true"],[aria-selected="true"]){
  background:var(--panel)!important;box-shadow:var(--sh-1)!important}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-seg,.dz-seg,.pf-seg,.dzt-seg,.smm-seg,.dzs-st,.rds-seg,.tk-modes,.cal-modes,.seg).ui-seg-on::after{
  content:"";position:absolute;z-index:0;top:3px;bottom:3px;left:0;width:var(--ui-tw,0);transform:translateX(var(--ui-tx,0));
  border-radius:8px;background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--inset-line);pointer-events:none;
  transition:transform .22s cubic-bezier(.23,1,.32,1),width .22s cubic-bezier(.23,1,.32,1)}
html[data-lab]:not([data-dz-off]):not([data-theme="light"]):not(#lab) :is(.ui-seg,.dz-seg,.pf-seg,.dzt-seg,.smm-seg,.dzs-st,.rds-seg,.tk-modes,.cal-modes,.seg).ui-seg-on::after{background:var(--panel3)}
html[data-lab]:not([data-dz-off]):not([data-theme="light"]):not(#lab) :is(.ui-seg,.dz-seg,.pf-seg,.dzt-seg,.smm-seg,.dzs-st,.rds-seg,.tk-modes,.cal-modes,.seg):not(.ui-seg-on) > button:is(.on,.active,.sel,[aria-pressed="true"]){background:var(--panel3)!important}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-seg,.dz-seg,.pf-seg,.dzt-seg,.smm-seg,.dzs-st,.rds-seg,.tk-modes,.cal-modes,.seg).ui-seg-still::after{transition:none}
/* счётчик внутри вкладки */
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-seg,.dz-seg,.dzt-seg,.smm-seg) > button :is(i,.n){font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted);background:transparent;padding:0 0 0 2px;opacity:1}
/* сегмент на всю ширину (телефон в «Моём дне», «Обучение») — кнопки делят ширину */
@media (max-width:768px){
  html[data-lab]:not([data-dz-off]):not(#lab) :is(.dzt-seg,.dz2m-seg) > button{flex:1 1 0}
}

/* ───────── 4. Карточка показателя «metric-card» ─────────
   Число крупно (Inter 600, равной ширины), подпись мелким серым, дельта чипом. Без цветной полосы слева.
   Новый код: .ui-metrics > .ui-metric; старые плитки ниже приведены к тому же виду. */
.ui-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-metric,.dzc-kpi,.rds-kpi,.dza-kpi,.dz2p-kpi,.income-grid .itile,.kpi){
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:16px 18px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg,12px);box-shadow:var(--sh-1);color:var(--ink);
  transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s ease-out,border-color .2s ease-out}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.dzc-kpi,.rds-kpi)::before{display:none}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-metric-l,.dzc-kpi .l,.rds-kpi .l,.dza-kpi .l,.dz2p-kpi .l,.income-grid .it-lbl,.kpi .kpi-lbl){
  font:500 12.5px/1.35 Inter,system-ui,sans-serif;color:var(--muted);text-transform:none;letter-spacing:0;white-space:normal}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-metric-v,.dzc-kpi>b,.rds-kpi .row b,.dza-kpi>b,.dz2p-kpi b,.income-grid .it-num,.kpi .kpi-num){
  font:600 28px/1.1 Inter,system-ui,sans-serif;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-metric-v,.dzc-kpi>b,.dz2p-kpi b) small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-metric-f,.dzc-kpi .f,.rds-kpi .h,.dza-kpi .f,.dz2p-kpi .f){font-size:12px;line-height:1.4;color:var(--muted)}
html[data-lab]:not([data-dz-off]):not(#lab) .income-grid .itile{align-items:flex-start}
html[data-lab]:not([data-dz-off]):not(#lab) .income-grid .itile.hero{background:var(--soft-gold);border-color:color-mix(in oklab,var(--gold-fill) 25%,var(--line))}
html[data-lab]:not([data-dz-off]):not(#lab) .income-grid .itile.hero .it-num{color:var(--ink-gold)}
html[data-lab]:not([data-dz-off]):not(#lab) .income-grid .itile.hero .it-lbl{color:var(--ink-gold)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-metric.accent){background:var(--soft-gold);border-color:color-mix(in oklab,var(--gold-fill) 25%,var(--line))}
html[data-lab]:not([data-dz-off]):not(#lab) .rds-kpi.on{border-color:var(--gold-fill);box-shadow:0 0 0 3px var(--soft-gold)}
html[data-lab]:not([data-dz-off]):not(#lab) .rds-kpi .bar i{background:var(--gold-fill)}
/* дельта «↑ 12 % к прошлому» */
.ui-metric-d{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font:600 12px/18px Inter,system-ui,sans-serif;background:var(--panel2);color:var(--muted)}
.ui-metric-d.up{background:var(--soft-green);color:var(--ink-green)}
.ui-metric-d.down{background:var(--soft-red);color:var(--ink-red)}
/* подъём при наведении — у кликабельных плиток */
html[data-lab]:not([data-dz-off]):not(#lab) :is(.ui-lift,.rds-kpi,.dza-kpi.dza-k-click,button.ui-metric,.dz3o-card):hover{transform:translateY(-2px);box-shadow:var(--sh-pop)}

/* ───────── 5. Пусто / загрузка / ошибка — вид пробы ───────── */
html[data-lab]:not([data-dz-off]) .ui-state{padding:36px 16px;gap:4px}
html[data-lab]:not([data-dz-off]) .ui-state-ico{width:44px;height:44px;background:var(--panel2);box-shadow:inset 0 0 0 1px var(--line)}
html[data-lab]:not([data-dz-off]) .ui-state.err .ui-state-ico{background:var(--soft-red);box-shadow:none}

/* ───────── 6. Тосты: значок, ✕, стопка до 3, справа внизу; на телефоне над нижней панелью ───────── */
.ui-toasts{position:fixed;right:20px;bottom:20px;z-index:100050;display:flex;flex-direction:column-reverse;gap:8px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.ui-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 12px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);color:var(--ink);box-shadow:var(--sh-pop);font:500 13.5px/1.4 Inter,system-ui,sans-serif;
  animation:uiToastIn .26s cubic-bezier(.23,1,.32,1) both}
.ui-toast.out{animation:uiToastOut .2s ease-in both}
.ui-toast-ico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;background:var(--soft-gold);color:var(--ink-gold)}
.ui-toast-ico svg{width:15px;height:15px}
.ui-toast.bad .ui-toast-ico{background:var(--soft-red);color:var(--ink-red)}
.ui-toast-t{flex:1;min-width:0;overflow-wrap:anywhere}
.ui-toast-x{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;min-width:28px!important;min-height:28px!important;margin:0;padding:0;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}
.ui-toast-x:hover{background:var(--hover);color:var(--ink)}
.ui-toast-x svg{width:14px;height:14px}
@keyframes uiToastIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes uiToastOut{to{opacity:0;transform:translateY(6px) scale(.97)}}
@media (max-width:768px){
  .ui-toasts{left:16px;right:16px;width:auto;bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* ───────── 7. Окна: одна шапка (заголовок Inter 16/600 + ✕ 32 px), радиус 16, мягкое затемнение ───────── */
html[data-lab]:not([data-dz-off]):not([data-theme="light"]):not(#lab){--scrim:rgba(0,0,0,.45)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.modal-ov,.dz2c-ov,.ae-ov,.auc-modal){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.modal-win,.modal,.smm-modal,.fit-modal,.cal-modal,.auc-modal-in){border-radius:var(--r-xl,16px);box-shadow:var(--sh-2);border-color:var(--line)}
html[data-lab]:not([data-dz-off]):not(#lab) :is(.modal-bar,.smm-modal-h,.fit-modal-h,.cal-modal-h){min-height:56px;box-sizing:border-box;padding:10px 12px 10px 20px;gap:10px;border-bottom:1px solid var(--line)}
html[data-lab]:not([data-dz-off]):not(#lab) .modal-title,
html[data-lab]:not([data-dz-off]):not(#lab) :is(.smm-modal-h,.fit-modal-h,.cal-modal-h)>div:first-child>b,
html[data-lab]:not([data-dz-off]):not(#lab) .auc-modal-head{font:600 16px/1.3 Inter,system-ui,sans-serif;color:var(--ink);text-transform:none;letter-spacing:-.005em}
@media (max-width:768px){
  html[data-lab]:not([data-dz-off]):not(#lab) :is(.modal-win,.modal,.smm-modal,.fit-modal,.cal-modal){border-radius:16px 16px 0 0!important}
}

/* ───────── 8. Нативные поля под тему: select со своей стрелкой, флажки цветом акцента ───────── */
html[data-lab]:not([data-dz-off]):not(#lab) select:not([multiple]):not([size]):not(.ui-native){
  -webkit-appearance:none;appearance:none;min-height:34px;padding:6px 30px 6px 10px;border:1px solid var(--line);border-radius:var(--r-md,8px);
  background-color:var(--panel);color:var(--ink);font:inherit;font-size:13.5px;line-height:20px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color .15s ease-out,box-shadow .15s ease-out}
html[data-lab]:not([data-dz-off]):not(#lab) select:not([multiple]):not([size]):not(.ui-native):hover{border-color:color-mix(in oklab,var(--muted) 45%,var(--line))}
html[data-lab]:not([data-dz-off]):not(#lab) select:not([multiple]):not([size]):not(.ui-native):focus{outline:0;border-color:var(--gold-fill);box-shadow:0 0 0 3px var(--soft-gold)}
html[data-lab]:not([data-dz-off]) select option{background:var(--panel);color:var(--ink)}
html[data-lab]:not([data-dz-off]) :is(input[type="checkbox"],input[type="radio"],input[type="range"],progress){accent-color:var(--gold-fill)}
html[data-lab]:not([data-dz-off]):not(#lab) input[type="checkbox"]:not(.dz-toggle):not([class*="sw"]){width:16px;height:16px;cursor:pointer;vertical-align:-3px}

/* ───────── 9. Движение: появление «волной», уважаем prefers-reduced-motion ─────────
   Плитки и карточки показателей въезжают снизу на 6 px с прозрачности, с шагом 40 мс.
   Доска воронки сюда не входит: она перерисовывается живьём, и волна мигала бы. */
@keyframes uiRise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
html[data-lab]:not([data-dz-off]) :is(.ui-stagger,.ui-metrics,.dzc-kpis,.rds-kpis,.dza-kpis,.dz2p-kpis,.income-grid,.dz3o-grid,.dzt-grid) > *{
  animation:uiRise .22s cubic-bezier(.23,1,.32,1) both}
html[data-lab]:not([data-dz-off]) :is(.ui-stagger,.ui-metrics,.dzc-kpis,.rds-kpis,.dza-kpis,.dz2p-kpis,.income-grid,.dz3o-grid,.dzt-grid) > :nth-child(2){animation-delay:.04s}
html[data-lab]:not([data-dz-off]) :is(.ui-stagger,.ui-metrics,.dzc-kpis,.rds-kpis,.dza-kpis,.dz2p-kpis,.income-grid,.dz3o-grid,.dzt-grid) > :nth-child(3){animation-delay:.08s}
html[data-lab]:not([data-dz-off]) :is(.ui-stagger,.ui-metrics,.dzc-kpis,.rds-kpis,.dza-kpis,.dz2p-kpis,.income-grid,.dz3o-grid,.dzt-grid) > :nth-child(4){animation-delay:.12s}
html[data-lab]:not([data-dz-off]) :is(.ui-stagger,.ui-metrics,.dzc-kpis,.rds-kpis,.dza-kpis,.dz2p-kpis,.income-grid,.dz3o-grid,.dzt-grid) > :nth-child(5){animation-delay:.16s}
html[data-lab]:not([data-dz-off]) :is(.ui-stagger,.ui-metrics,.dzc-kpis,.rds-kpis,.dza-kpis,.dz2p-kpis,.income-grid,.dz3o-grid,.dzt-grid) > :nth-child(6){animation-delay:.2s}
html[data-lab]:not([data-dz-off]) :is(.ui-stagger,.ui-metrics,.dzc-kpis,.rds-kpis,.dza-kpis,.dz2p-kpis,.income-grid,.dz3o-grid,.dzt-grid) > :nth-child(n+7){animation-delay:.24s}
html[data-lab]:not([data-dz-off]) :is(.modal-ov.show .modal-win,.modal-ov.show .modal,.smm-modal,.fit-modal,.cal-modal){animation:uiPop .22s cubic-bezier(.23,1,.32,1) both}
@keyframes uiPop{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html[data-lab] *,html[data-lab] *::before,html[data-lab] *::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  .ui-toast,.ui-toast.out{animation:none}
}
/* при смене темы цвета не «переливаются» секунду (js/86 ставит класс на время переключения) */
html.ui-theme-switching *,html.ui-theme-switching *::before,html.ui-theme-switching *::after{transition:none!important}

/* ───────── 10. Выключатель «Звуки интерфейса» в блоке «Лаборатория» ───────── */
.dz5-snd{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-basis:100%;margin-top:6px;padding-top:10px;border-top:1px dashed var(--line)}
.dz5-snd-t{display:flex;flex-direction:column;gap:2px}
.dz5-snd-t b{font-size:13px;color:var(--ink)}
.dz5-snd-t small{font-size:12px;color:var(--muted)}