/* ============================ ДИЗАЙН-СИСТЕМА ============================
   Единые значения и компоненты программы. Каждый компонент описан здесь один раз —
   страницы не переопределяют его вид, только раскладку (где стоит, какой ширины).
   Витрина всех компонентов — /ui.html. */

/* цвета, шрифты, тени — светлая тема и тёмная */
:root{
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* light palette — Snap Lab brand (orange / deep blue / pale gray / white) */
  --bg:#eef6f5;
  --surface:#ffffff;
  --surface-2:#e4f4f3;
  --surface-3:#d7ebe9;
  --border:#cee2e0;
  --border-strong:#b4d2ce;
  --text:#011d2b;
  --text-2:#37535c;
  --muted:#6a848a;
  --accent:#ff5d00;
  --accent-fg:#ffffff;
  --accent-soft:#ffe6d6;
  --ok:#1a7f37;
  --ok-soft:#daf0e0;
  --warn:#9a7400;
  --warn-soft:#f6edcf;
  --crit:#c92a2a;
  --crit-soft:#fadedd;
  --dept-pp:#2f6b7d;
  --dept-mont:#7a6a5a;
  --dept-ai:#6d5f86;
  --shadow:0 1px 2px rgba(1,29,43,.06),0 10px 26px -14px rgba(1,29,43,.20);
  --scrim:rgba(3,20,29,.4);
  --radius:10px;
  --field:#edf3f2;
  --field-border:#c6dcd9;
}
:root[data-theme="dark"]{
  --bg:#01141d;
  --surface:#04202e;
  --surface-2:#082a3a;
  --surface-3:#0e3446;
  --border:#1a4356;
  --border-strong:#2c5c72;
  --text:#eef6f5;
  --text-2:#a7c1c7;
  --muted:#75939b;
  --accent:#ff5d00;
  --accent-fg:#ffffff;
  --accent-soft:#3a1c0b;
  --ok:#46c76a;
  --ok-soft:#0f2c1b;
  --warn:#e0a83a;
  --warn-soft:#33280f;
  --crit:#ff6b6b;
  --crit-soft:#3a1719;
  --dept-pp:#6fb7c9;
  --dept-mont:#c6ac8b;
  --dept-ai:#b6a0d6;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 36px -18px rgba(0,0,0,.7);
  --scrim:rgba(0,0,0,.56);
  --field:#0a2836;
  --field-border:#2b5468;
}

:root{
  /* скругления: маленькое (метки, поля), обычное (кнопки, карточки), большое (окна, панели), круг */
  --r-s:8px;
  --r-m:12px;
  --r-l:18px;
  --r-full:999px;
  /* форма кнопок с текстом — меняется одним значением */
  --r-btn:var(--r-full);

  /* высоты управляющих элементов: обычная и маленькая */
  --h-m:40px;
  --h-s:32px;

  /* размеры шрифта */
  --fs-xs:12px;
  --fs-s:13px;
  --fs-m:14px;
  --fs-l:16px;
  --fs-xl:20px;
  --fs-2xl:28px;

  /* отступы — шаг 4px */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;

  --ease-ui:cubic-bezier(.4,0,.2,1);
  /* тень карточки: обычная и при наведении на нажимаемую */
  --sh-card:0 1px 2px rgba(1,29,43,.06),0 10px 24px -18px rgba(1,29,43,.22);
  --sh-card-hover:0 2px 4px rgba(1,29,43,.08),0 18px 34px -20px rgba(1,29,43,.32);
  --accent-hover:#f25800;
}

/* тёмная тема по настройке системы, пока пользователь не выбрал тему сам */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#01141d;
    --surface:#04202e;
    --surface-2:#082a3a;
    --surface-3:#0e3446;
    --border:#1a4356;
    --border-strong:#2c5c72;
    --text:#eef6f5;
    --text-2:#a7c1c7;
    --muted:#75939b;
    --accent:#ff5d00;
    --accent-fg:#ffffff;
    --accent-soft:#3a1c0b;
    --ok:#46c76a;
    --ok-soft:#0f2c1b;
    --warn:#e0a83a;
    --warn-soft:#33280f;
    --crit:#ff6b6b;
    --crit-soft:#3a1719;
    --dept-pp:#6fb7c9;
    --dept-mont:#c6ac8b;
    --dept-ai:#b6a0d6;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 14px 36px -18px rgba(0,0,0,.7);
    --scrim:rgba(0,0,0,.56);
    --field:#0a2836;
    --field-border:#2b5468;
  }
}

/* ================= Поведение всех нажимаемых элементов =================
   Одно на всю программу: кнопки, кнопки-иконки, выпадающие фильтры, вкладки-переключатели, пункты меню.
   • Серое / светлое / прозрачное при наведении заливается оранжевым градиентом (как оранжевая кнопка), текст белый.
   • Оранжевое при наведении чуть светлеет.
   • Кнопки при наведении чуть приподнимаются, при нажатии слегка сжимаются.
   Заливка — слой ::before с плавным появлением (градиент сам по себе плавно не меняется). */
:root{
  --grad:linear-gradient(180deg,#ff7a2e 0%,#ff5d00 100%);
  --grad-hover:linear-gradient(180deg,#ff8f4d 0%,#ff6a14 100%);
  --grad-crit:linear-gradient(180deg,#ef5a5a 0%,#c92a2a 100%);
  --t-ui:.2s var(--ease-ui);
}
.btn,.linkbtn,.fin-link,.gb-plink,.rt2-add,.pjs-add,.lf-add,.tck-add-btn,.wr-more,.rvq-more,.se-all,.pjx-setbudget,.toast-act,.pay-hist-pgb,.ibtn,.iconbtn,.att-cal-nav,.rc-nav,.loc-nav,.pjx-arr,.pay-hist-x,.x-del,.lf-x,.exq-itemx,.wz-filectl-x,.xbtn,.sfg-edit,.pjv-edit,.fin-acc-ed,.tp-pen,.filter,.dd-trigger,.att-cal-trig,.rc-trig,.seg__b,.tp-tabs .proj-tab,.exq-seg-opt,.navi,.nav-item,.kb-cat{position:relative;isolation:isolate}
.btn::before,.linkbtn::before,.fin-link::before,.gb-plink::before,.rt2-add::before,.pjs-add::before,.lf-add::before,.tck-add-btn::before,.wr-more::before,.rvq-more::before,.se-all::before,.pjx-setbudget::before,.toast-act::before,.pay-hist-pgb::before,.ibtn::before,.iconbtn::before,.att-cal-nav::before,.rc-nav::before,.loc-nav::before,.pjx-arr::before,.pay-hist-x::before,.x-del::before,.lf-x::before,.exq-itemx::before,.wz-filectl-x::before,.xbtn::before,.sfg-edit::before,.pjv-edit::before,.fin-acc-ed::before,.tp-pen::before,.filter::before,.dd-trigger::before,.att-cal-trig::before,.rc-trig::before,.seg__b::before,.tp-tabs .proj-tab::before,.exq-seg-opt::before,.navi::before,.nav-item::before,.kb-cat::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad);opacity:0;transition:opacity var(--t-ui);pointer-events:none;
}
/* наведение: заливка оранжевым */
.btn:hover::before,.linkbtn:hover::before,.fin-link:hover::before,.gb-plink:hover::before,.rt2-add:hover::before,.pjs-add:hover::before,.lf-add:hover::before,.tck-add-btn:hover::before,.wr-more:hover::before,.rvq-more:hover::before,.se-all:hover::before,.pjx-setbudget:hover::before,.toast-act:hover::before,.pay-hist-pgb:hover::before,.ibtn:hover::before,.iconbtn:hover::before,.att-cal-nav:hover::before,.rc-nav:hover::before,.loc-nav:hover::before,.pjx-arr:hover::before,.pay-hist-x:hover::before,.x-del:hover::before,.lf-x:hover::before,.exq-itemx:hover::before,.wz-filectl-x:hover::before,.xbtn:hover::before,.sfg-edit:hover::before,.pjv-edit:hover::before,.fin-acc-ed:hover::before,.tp-pen:hover::before,.filter:hover::before,.dd-trigger:hover::before,.att-cal-trig:hover::before,.rc-trig:hover::before,
.seg__b:not(.on):hover::before,.tp-tabs .proj-tab:not(.on):hover::before,.exq-seg-opt:not(.on):hover::before,.navi:not(.on):hover::before,.nav-item:not(.active):hover::before,.kb-cat:not(.on):hover::before{opacity:1}
.btn:hover,.linkbtn:hover,.fin-link:hover,.gb-plink:hover,.rt2-add:hover,.pjs-add:hover,.lf-add:hover,.tck-add-btn:hover,.wr-more:hover,.rvq-more:hover,.se-all:hover,.pjx-setbudget:hover,.toast-act:hover,.pay-hist-pgb:hover,.ibtn:hover,.iconbtn:hover,.att-cal-nav:hover,.rc-nav:hover,.loc-nav:hover,.pjx-arr:hover,.pay-hist-x:hover,.x-del:hover,.lf-x:hover,.exq-itemx:hover,.wz-filectl-x:hover,.xbtn:hover,.sfg-edit:hover,.pjv-edit:hover,.fin-acc-ed:hover,.tp-pen:hover,.filter:hover,.dd-trigger:hover,.att-cal-trig:hover,.rc-trig:hover,.seg__b:hover,.tp-tabs .proj-tab:hover,.exq-seg-opt:hover,.navi:hover,.nav-item:hover,.kb-cat:hover{color:#fff;border-color:transparent}
.btn:hover .ico,.linkbtn:hover .ico,.fin-link:hover .ico,.gb-plink:hover .ico,.rt2-add:hover .ico,.pjs-add:hover .ico,.lf-add:hover .ico,.tck-add-btn:hover .ico,.wr-more:hover .ico,.rvq-more:hover .ico,.se-all:hover .ico,.pjx-setbudget:hover .ico,.toast-act:hover .ico,.pay-hist-pgb:hover .ico,.ibtn:hover .ico,.iconbtn:hover .ico,.att-cal-nav:hover .ico,.rc-nav:hover .ico,.loc-nav:hover .ico,.pjx-arr:hover .ico,.pay-hist-x:hover .ico,.x-del:hover .ico,.lf-x:hover .ico,.exq-itemx:hover .ico,.wz-filectl-x:hover .ico,.xbtn:hover .ico,.sfg-edit:hover .ico,.pjv-edit:hover .ico,.fin-acc-ed:hover .ico,.tp-pen:hover .ico,.filter:hover .ico,.dd-trigger:hover .ico,.att-cal-trig:hover .ico,.rc-trig:hover .ico,.navi:hover .ico,.nav-item:hover .ico,.kb-cat:hover .ico{color:#fff}
/* оранжевое изначально: при наведении — светлее */
.btn--primary::before,.ibtn--primary::before{background:var(--grad-hover)}
.btn--danger::before,.btn--crit::before,.btn--dcrit::before{background:var(--grad-crit)}
/* кнопки приподнимаются при наведении и сжимаются при нажатии */
.btn,.linkbtn,.fin-link,.gb-plink,.rt2-add,.pjs-add,.lf-add,.tck-add-btn,.wr-more,.rvq-more,.se-all,.pjx-setbudget,.toast-act,.pay-hist-pgb,.ibtn,.iconbtn,.att-cal-nav,.rc-nav,.loc-nav,.pjx-arr,.pay-hist-x,.x-del,.lf-x,.exq-itemx,.wz-filectl-x,.xbtn,.sfg-edit,.pjv-edit,.fin-acc-ed,.tp-pen,.filter,.dd-trigger,.att-cal-trig,.rc-trig{transition:color var(--t-ui),border-color var(--t-ui),transform var(--t-ui)}
.btn:hover,.linkbtn:hover,.fin-link:hover,.gb-plink:hover,.rt2-add:hover,.pjs-add:hover,.lf-add:hover,.tck-add-btn:hover,.wr-more:hover,.rvq-more:hover,.se-all:hover,.pjx-setbudget:hover,.toast-act:hover,.pay-hist-pgb:hover,.ibtn:hover,.iconbtn:hover,.att-cal-nav:hover,.rc-nav:hover,.loc-nav:hover,.pjx-arr:hover,.pay-hist-x:hover,.x-del:hover,.lf-x:hover,.exq-itemx:hover,.wz-filectl-x:hover,.xbtn:hover,.sfg-edit:hover,.pjv-edit:hover,.fin-acc-ed:hover,.tp-pen:hover,.filter:hover,.dd-trigger:hover,.att-cal-trig:hover,.rc-trig:hover{transform:translateY(-1px)}
.btn:active,.linkbtn:active,.fin-link:active,.gb-plink:active,.rt2-add:active,.pjs-add:active,.lf-add:active,.tck-add-btn:active,.wr-more:active,.rvq-more:active,.se-all:active,.pjx-setbudget:active,.toast-act:active,.pay-hist-pgb:active,.ibtn:active,.iconbtn:active,.att-cal-nav:active,.rc-nav:active,.loc-nav:active,.pjx-arr:active,.pay-hist-x:active,.x-del:active,.lf-x:active,.exq-itemx:active,.wz-filectl-x:active,.xbtn:active,.sfg-edit:active,.pjv-edit:active,.fin-acc-ed:active,.tp-pen:active,.filter:active,.dd-trigger:active,.att-cal-trig:active,.rc-trig:active,
.seg__b:active,.tp-tabs .proj-tab:active,.exq-seg-opt:active,.navi:active,.nav-item:active,.kb-cat:active{transform:scale(.97);transition-duration:.08s}
.btn:focus-visible,.linkbtn:focus-visible,.fin-link:focus-visible,.gb-plink:focus-visible,.rt2-add:focus-visible,.pjs-add:focus-visible,.lf-add:focus-visible,.tck-add-btn:focus-visible,.wr-more:focus-visible,.rvq-more:focus-visible,.se-all:focus-visible,.pjx-setbudget:focus-visible,.toast-act:focus-visible,.pay-hist-pgb:focus-visible,.ibtn:focus-visible,.iconbtn:focus-visible,.att-cal-nav:focus-visible,.rc-nav:focus-visible,.loc-nav:focus-visible,.pjx-arr:focus-visible,.pay-hist-x:focus-visible,.x-del:focus-visible,.lf-x:focus-visible,.exq-itemx:focus-visible,.wz-filectl-x:focus-visible,.xbtn:focus-visible,.sfg-edit:focus-visible,.pjv-edit:focus-visible,.fin-acc-ed:focus-visible,.tp-pen:focus-visible,.filter:focus-visible,.dd-trigger:focus-visible,
.seg__b:focus-visible,.tp-tabs .proj-tab:focus-visible,.exq-seg-opt:focus-visible,.navi:focus-visible,.nav-item:focus-visible,.kb-cat:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .btn,.linkbtn,.fin-link,.gb-plink,.rt2-add,.pjs-add,.lf-add,.tck-add-btn,.wr-more,.rvq-more,.se-all,.pjx-setbudget,.toast-act,.pay-hist-pgb,.ibtn,.iconbtn,.att-cal-nav,.rc-nav,.loc-nav,.pjx-arr,.pay-hist-x,.x-del,.lf-x,.exq-itemx,.wz-filectl-x,.xbtn,.sfg-edit,.pjv-edit,.fin-acc-ed,.tp-pen,.filter,.dd-trigger,.att-cal-trig,.rc-trig,.seg__b,.tp-tabs .proj-tab,.exq-seg-opt,.navi,.nav-item,.kb-cat{transform:none!important}
}

/* ---------------- Кнопка с текстом ----------------
   .btn                — серая, обычное действие (старые .btn--edit и .btn--ghost — то же самое)
   .btn--primary       — оранжевая, главное действие на экране
   .btn--text          — без фона, второстепенное («Отмена», «Открыть»)
   .btn--danger        — красная, удалить / отклонить (старые .btn--crit, .btn--dcrit — то же)
   .btn--sm            — маленькая (в строках таблиц, карточках)
   .btn--block         — на всю ширину */
.btn,.linkbtn,.fin-link,.gb-plink,.rt2-add,.pjs-add,.lf-add,.tck-add-btn,.wr-more,.rvq-more,.se-all,.pjx-setbudget,.toast-act,.pay-hist-pgb{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  height:var(--h-m);padding:0 var(--sp-4);border:0;border-radius:var(--r-btn);
  background:var(--surface-3);color:var(--text);
  font:600 var(--fs-m)/1 var(--font-body);white-space:nowrap;text-decoration:none;cursor:pointer;
}
.btn:disabled,.linkbtn:disabled,.fin-link:disabled,.gb-plink:disabled,.rt2-add:disabled,.pjs-add:disabled,.lf-add:disabled,.tck-add-btn:disabled,.wr-more:disabled,.rvq-more:disabled,.se-all:disabled,.pjx-setbudget:disabled,.toast-act:disabled,.pay-hist-pgb:disabled,.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn .ico,.linkbtn .ico,.fin-link .ico,.gb-plink .ico,.rt2-add .ico,.pjs-add .ico,.lf-add .ico,.tck-add-btn .ico,.wr-more .ico,.rvq-more .ico,.se-all .ico,.pjx-setbudget .ico,.toast-act .ico,.pay-hist-pgb .ico{width:18px;height:18px;flex:none;transition:color var(--t-ui)}
.btn--primary{background:var(--grad);color:var(--accent-fg)}
.btn--primary .ico{color:currentColor}
.btn--text{background:none;color:var(--text-2)}
.btn--danger,.btn--crit,.btn--dcrit{background:var(--crit-soft);color:var(--crit)}
.btn--sm{height:var(--h-s);padding:0 var(--sp-3);font-size:var(--fs-s);gap:6px}
.btn--sm .ico{width:16px;height:16px}
.btn--block{display:flex;width:100%}

/* ---------------- Круглая кнопка-иконка ----------------
   .ibtn (старое .iconbtn) — светлая (тема, уведомления, стрелки, крестик)
   .ibtn--primary      — оранжевая («Создать»)
   .ibtn--ghost        — прозрачная (меню, карандаш)
   .ibtn--sm           — маленькая
   Подпись для экранного диктора — aria-label. */
.ibtn,.iconbtn,.att-cal-nav,.rc-nav,.loc-nav,.pjx-arr,.pay-hist-x,.x-del,.lf-x,.exq-itemx,.wz-filectl-x,.xbtn,.sfg-edit,.pjv-edit,.fin-acc-ed,.tp-pen{
  display:inline-grid;place-items:center;flex:none;
  width:var(--h-m);height:var(--h-m);padding:0;border:1px solid var(--border);border-radius:var(--r-full);
  background:var(--surface);color:var(--text-2);cursor:pointer;
}
.ibtn:disabled,.iconbtn:disabled,.att-cal-nav:disabled,.rc-nav:disabled,.loc-nav:disabled,.pjx-arr:disabled,.pay-hist-x:disabled,.x-del:disabled,.lf-x:disabled,.exq-itemx:disabled,.wz-filectl-x:disabled,.xbtn:disabled,.sfg-edit:disabled,.pjv-edit:disabled,.fin-acc-ed:disabled,.tp-pen:disabled{opacity:.45;pointer-events:none}
.ibtn .ico,.iconbtn .ico,.att-cal-nav .ico,.rc-nav .ico,.loc-nav .ico,.pjx-arr .ico,.pay-hist-x .ico,.x-del .ico,.lf-x .ico,.exq-itemx .ico,.wz-filectl-x .ico,.xbtn .ico,.sfg-edit .ico,.pjv-edit .ico,.fin-acc-ed .ico,.tp-pen .ico{width:18px;height:18px;transition:color var(--t-ui)}
.ibtn--primary{border-color:transparent;background:var(--grad);color:var(--accent-fg)}
.ibtn--ghost,.iconbtn.menu-toggle{border-color:transparent;background:none}
.ibtn--sm{width:var(--h-s);height:var(--h-s)}
.ibtn--sm .ico{width:16px;height:16px}
/* счётчик на иконке (уведомления) */
.ibtn .dot,.iconbtn .dot{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-full);background:var(--accent);color:#fff;font:700 11px/18px var(--font-body);text-align:center}
/* без числа — просто точка: есть непрочитанное */
.ibtn .dot:empty,.iconbtn .dot:empty{top:5px;right:5px;min-width:0;width:10px;height:10px;padding:0;border:2px solid var(--surface)}

/* ---------------- Переключатель с плашкой ----------------
   <div class="seg"><i class="seg__pill"></i><button class="seg__b on">Все <b>3</b></button>…</div>
   (старое: .tp-tabs > .tp-pill + .proj-tab). Плашку двигает JS: ширина/высота и translate под активный пункт. */
.seg,.tp-tabs,.exq-seg{
  position:relative;display:inline-flex;align-items:center;gap:2px;
  height:var(--h-m);padding:4px;border:0;border-radius:var(--r-full);background:var(--surface-2);
}
.seg__pill,.tp-tabs > .tp-pill,.exq-seg > .tp-pill{position:absolute;top:0;left:0;z-index:0;border-radius:var(--r-full);background:var(--grad);transition:transform .3s var(--ease-ui),width .3s var(--ease-ui)}
.seg__b,.tp-tabs .proj-tab,.exq-seg-opt{
  z-index:1;display:inline-flex;align-items:center;gap:6px;
  height:100%;margin:0;padding:0 var(--sp-4);border:0;border-radius:var(--r-full);background:none;
  color:var(--text-2);font:600 var(--fs-s)/1 var(--font-body);white-space:nowrap;cursor:pointer;transition:color var(--t-ui),transform var(--t-ui);
}
.seg__b.on,.tp-tabs .proj-tab.on{color:var(--accent-fg)}
.seg__b b,.seg__b i,.tp-tabs .proj-tab b,.tp-tabs .proj-tab i{font-style:normal;font-weight:700;opacity:.75}
.seg--sm{height:var(--h-s);padding:3px}
.seg--sm .seg__b{padding:0 var(--sp-3);font-size:var(--fs-xs)}

/* ---------------- Выпадающий фильтр ----------------
   <button class="filter">Все отделы <svg class="ico">…</svg></button> (старое .dd-trigger); .filter.on — фильтр выбран */
.filter,.dd-trigger,.att-cal-trig,.rc-trig{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  height:var(--h-m);padding:0 var(--sp-3) 0 var(--sp-4);border:1px solid var(--field-border);border-radius:var(--r-full);
  background:var(--field);color:var(--text);font:600 var(--fs-s)/1 var(--font-body);white-space:nowrap;cursor:pointer;
}
.filter .ico,.dd-trigger .ico,.att-cal-trig .ico,.rc-trig .ico{width:16px;height:16px;color:var(--muted);transition:color var(--t-ui)}
.filter.on{border-color:var(--accent);background:var(--accent-soft)}
.dd-trigger.bad{border-color:var(--crit)}
/* «⋮» — меню действий в строке: выглядит как прозрачная маленькая кнопка-иконка */
.dd-trigger.tm-kb{width:var(--h-s);height:var(--h-s);padding:0;justify-content:center;border-color:transparent;background:none}
.dd-trigger.tm-kb .ico{width:18px;height:18px;color:var(--text-2)}
.dd-trigger.tm-kb:hover .ico{color:#fff}
.dd-trigger .dd-val{color:inherit;transition:color var(--t-ui)}
.dd-trigger .chev{transition:color var(--t-ui),transform var(--t-ui)}
.dd-trigger:hover .dd-val,.dd-trigger:hover .chev,.dd--ph .dd-trigger:hover .dd-val{color:#fff}

/* ---------------- Пункт бокового меню ----------------
   Один для главного меню (.nav-item) и для разделов (.kb-cat в базе знаний).
   <a class="navi on"><svg class="ico">…</svg><span>Проекты</span><b class="navi__n">4</b></a> */
.navi,.nav-item,.kb-cat{
  display:flex;flex:0 1 auto;align-items:center;gap:var(--sp-3);width:100%;
  /* в боковом меню пункты могут чуть сжаться, чтобы все поместились без прокрутки */
  height:var(--h-m);min-height:var(--h-s);padding:0 var(--sp-3);border:0;border-radius:var(--r-s);background:none;
  color:var(--text-2);font:500 var(--fs-m)/1 var(--font-body);text-align:left;text-decoration:none;cursor:pointer;
  transition:color var(--t-ui),transform var(--t-ui);
}
.navi .ico,.nav-item .ico,.kb-cat .ico{width:18px;height:18px;flex:none;transition:color var(--t-ui)}
.navi span,.nav-item > span:not(.count),.kb-cat > span:not(.badge){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navi__n,.nav-item .count,.kb-cat .badge{min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-full);background:var(--surface-3);color:var(--text-2);font:700 var(--fs-xs)/22px var(--font-body);text-align:center;transition:background var(--t-ui),color var(--t-ui)}
.navi.on,.nav-item.active,.kb-cat.on{background:var(--grad);color:var(--accent-fg)}
.navi.on .ico,.nav-item.active .ico,.kb-cat.on .ico{color:var(--accent-fg)}
.navi.on .navi__n,.nav-item.active .count,.kb-cat.on .badge,
.navi:hover .navi__n,.nav-item:hover .count,.kb-cat:hover .badge{background:rgba(255,255,255,.25);color:#fff}

/* ---------------- Поле ввода ----------------
   .in — текст, число, дата, textarea, select. Высота как у кнопки, мягкая серая заливка.
   Наведение — граница темнее, фокус — оранжевая граница и мягкое кольцо. .bad — ошибка. */
.in,.kb-catnew,.sfg-in,.sfg-sel,.wz-dc-time input,.tm-combo input{
  display:block;width:100%;height:var(--h-m);padding:0 var(--sp-4);
  border:1px solid transparent;border-radius:var(--r-m);background:var(--field);color:var(--text);
  font:500 var(--fs-m)/1.3 var(--font-body);outline:none;
  transition:border-color var(--t-ui),box-shadow var(--t-ui),background var(--t-ui);
}
textarea.in{height:auto;min-height:96px;padding:var(--sp-3) var(--sp-4);line-height:1.45;resize:vertical}
select.in,.sfg-sel{appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236a848a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center}
.in::placeholder,.kb-catnew::placeholder,.sfg-in::placeholder,.wz-dc-time input::placeholder,.tm-combo input::placeholder{color:var(--muted);font-weight:400}
.in:hover,.kb-catnew:hover,.sfg-in:hover,.sfg-sel:hover,.wz-dc-time input:hover,.tm-combo input:hover{border-color:var(--border-strong)}
.in:focus-visible,.kb-catnew:focus-visible,.sfg-in:focus-visible,.sfg-sel:focus-visible,.search input:focus-visible,.kb-search input:focus-visible,.fin-search input:focus-visible{outline:none}
.in:focus,.kb-catnew:focus,.sfg-in:focus,.sfg-sel:focus,.wz-dc-time input:focus,.tm-combo input:focus{border-color:var(--accent);background-color:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.in:disabled,.in[readonly]{opacity:.6;cursor:default}
.in.bad,.in.bad:focus{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.in.mono{font-family:var(--font-mono)}

/* выпадающий список в форме (.dd без .dd--flt) — выглядит как поле: прямоугольник, стрелка справа */
.dd:not(.dd--flt) > .dd-trigger:not(.tm-kb){
  width:100%;justify-content:space-between;padding:0 var(--sp-3) 0 var(--sp-4);
  border-color:transparent;border-radius:var(--r-m);font-weight:500;font-size:var(--fs-m);
}
.dd .dd-val{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd--ph .dd-val{color:var(--muted)}

/* ---------------- Поиск ----------------
   Обёртка .search (.kb-search, .fin-search) со значком лупы и полем внутри — таблетка как у фильтров. */
.search,.kb-search,.fin-search{
  display:flex;align-items:center;gap:var(--sp-2);height:var(--h-m);padding:0 var(--sp-4);
  border:1px solid transparent;border-radius:var(--r-full);background:var(--field);color:var(--muted);
  transition:border-color var(--t-ui),box-shadow var(--t-ui),background var(--t-ui);
}
.search:hover,.kb-search:hover,.fin-search:hover{border-color:var(--border-strong)}
.search:focus-within,.kb-search:focus-within,.fin-search:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.search .ico,.kb-search .ico,.fin-search .ico{width:16px;height:16px;flex:none}
.search input,.kb-search input,.fin-search input{
  flex:1;min-width:0;height:100%;padding:0;border:0;background:none;outline:none;box-shadow:none;
  color:var(--text);font:500 var(--fs-m)/1 var(--font-body);
}
.search input::placeholder,.kb-search input::placeholder,.fin-search input::placeholder{color:var(--muted);font-weight:400}
/* подсказка горячей клавиши внутри поиска («/») */
.search kbd,.kb-search kbd{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-s);background:var(--surface-3);color:var(--muted);font:600 var(--fs-xs)/1 var(--font-mono)}

/* ---------------- Метка статуса ----------------
   Не нажимается. .tag (старое .tmark) — белая таблетка с тонкой обводкой, серый текст, оранжевый значок.
   .tag--accent — мягкая оранжевая (старые .mt-tag, .pjs-st); .tag--hot — оранжевый градиент («Горит»). */
.tag,.tmark,.mt-tag,.pjs-st,.db-kpi-badge,.tkm-st{
  display:inline-flex;align-items:center;gap:4px;flex:none;height:22px;padding:0 8px;
  border:0;border-radius:var(--r-full);background:var(--surface);color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--border);
  font:700 var(--fs-xs)/1 var(--font-body);font-style:normal;white-space:nowrap;
}
.tag .ico,.tmark .ico{width:13px;height:13px;flex:none;color:var(--accent)}
.tag i,.tmark i{font-style:normal}
.tmark:has(.ico){padding-left:6px}
.tag--accent,.mt-tag,.pjs-st{background:var(--accent-soft);color:var(--accent);box-shadow:none}
.tag--hot,.tmark--hot{background:var(--grad);color:#fff;box-shadow:none}
.tag--hot .ico,.tmark--hot .ico,.tmark--hot i{color:#fff}
.tmark--del .ico{color:var(--crit)}
/* на оранжевой (выбранной) карточке проекта */
.pjc.on .tmark{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.pjc.on .tmark .ico{color:#fff}

/* ---------------- Чип выбора ----------------
   Нажимается: вариант ответа, категория, причина. Серая таблетка 32; выбранный (.on) — оранжевый градиент.
   Наведение и нажатие — как у всех кнопок. Старые: .ap-chip, .pjf-chip, .mult-pill, .aex-chip, .pjv-chip, .kb-catp, .wz-pill. */
.chip,.ap-chip,.pjf-chip,.mult-pill,.aex-chip,.pjv-chip,.kb-catp,.wz-pill{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:6px;flex:none;
  height:var(--h-s);padding:0 var(--sp-3);border:0;border-radius:var(--r-full);background:var(--surface-3);color:var(--text-2);
  font:600 var(--fs-s)/1 var(--font-body);white-space:nowrap;cursor:pointer;box-shadow:none;
  transition:color var(--t-ui),transform var(--t-ui);
}
.chip::before,.ap-chip::before,.pjf-chip::before,.mult-pill::before,.aex-chip::before,.pjv-chip::before,.kb-catp::before,.wz-pill::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad);opacity:0;transition:opacity var(--t-ui);pointer-events:none;
}
.chip:hover::before,.ap-chip:hover::before,.pjf-chip:hover::before,.mult-pill:hover::before,.aex-chip:hover::before,.pjv-chip:hover::before,.kb-catp:hover::before,.wz-pill:hover::before,
.chip.on::before,.ap-chip.on::before,.pjf-chip.on::before,.mult-pill.on::before,.aex-chip.on::before,.kb-catp.on::before,.wz-pill.on::before{opacity:1}
.chip:hover,.ap-chip:hover,.pjf-chip:hover,.mult-pill:hover,.aex-chip:hover,.pjv-chip:hover,.kb-catp:hover,.wz-pill:hover,
.chip.on,.ap-chip.on,.pjf-chip.on,.mult-pill.on,.aex-chip.on,.kb-catp.on,.wz-pill.on{color:#fff}
.chip:hover,.ap-chip:hover,.pjf-chip:hover,.mult-pill:hover,.aex-chip:hover,.pjv-chip:hover,.kb-catp:hover,.wz-pill:hover{transform:translateY(-1px)}
.chip:active,.ap-chip:active,.pjf-chip:active,.mult-pill:active,.aex-chip:active,.pjv-chip:active,.kb-catp:active,.wz-pill:active{transform:scale(.97);transition-duration:.08s}
.chip .ico,.ap-chip .ico,.pjf-chip .ico,.pjv-chip .ico,.wz-pill .ico{width:15px;height:15px;flex:none}

/* ---------------- Счётчик ----------------
   Маленькая цифра рядом с заголовком или в пункте меню. .cnt (старые .badge, .pjx-cnt, .me-cnt, .loc-cnt …);
   .cnt--accent — оранжевый, .cnt--crit — красный. */
.cnt,.badge,.pjx-cnt,.me-cnt,.loc-cnt,.ab-cnt,.db-cnt,.pjh-count,.pay-hist-count{
  display:inline-grid;place-items:center;flex:none;min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-full);background:var(--surface-3);color:var(--text-2);
  font:700 var(--fs-xs)/1 var(--font-body);font-style:normal;white-space:nowrap;box-shadow:none;
}
.cnt--accent{background:var(--accent-soft);color:var(--accent)}
.cnt--crit{background:var(--crit-soft);color:var(--crit)}
.kb-cat .badge,.nav-item .count{min-width:22px;height:22px}

/* ---------------- Поле суммы ----------------
   .pf-amt — крупное поле денег с подписью валюты справа (Финансы, выплаты). Цвета и фокус — как у поля ввода. */
.pf-amt{
  display:flex;align-items:center;height:54px;min-width:0;
  border:1px solid transparent;border-radius:var(--r-m);background:var(--field);
  transition:border-color var(--t-ui),box-shadow var(--t-ui),background var(--t-ui);
}
.pf-amt:hover{border-color:var(--border-strong)}
.pf-amt:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.pf-amt:has(input.bad){border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.pf-amt input{flex:1;min-width:0;height:100%;padding:0 8px 0 var(--sp-4);border:0;background:none;outline:none;color:var(--text);
  font:700 24px/1 var(--font-body);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.pf-amt input::placeholder{color:var(--muted);font-weight:600}
.pf-amt input:focus-visible{outline:none}
.pf-amt input:disabled{opacity:.6}
.pf-amt input.bad{color:var(--crit)}
.pf-amt em{padding-right:var(--sp-4);color:var(--muted);font:600 var(--fs-s)/1 var(--font-body);font-style:normal}

/* ---------------- Счётчик «− 30 сек +» ----------------
   .wz-stepper — рамка как у поля ввода, кнопки «−/+» внутри наводятся оранжевым, как все кнопки. */
.wz-stepper{
  display:inline-flex;align-items:center;gap:2px;height:var(--h-m);padding:0 4px;overflow:hidden;
  border:1px solid transparent;border-radius:var(--r-m);background:var(--field);
  transition:border-color var(--t-ui),box-shadow var(--t-ui);
}
.wz-stepper:hover{border-color:var(--border-strong)}
.wz-stepper--in:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.wz-stepper--in.bad{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}
.wz-stepper button{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:var(--r-s);background:none;color:var(--text-2);cursor:pointer;transition:background var(--t-ui),color var(--t-ui)}
.wz-stepper button:hover{background:var(--grad);color:#fff}
.wz-stepper button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------------- Заголовок и текст документа (база знаний) ----------------
   Крупные поля редактора — заливка, наведение и фокус как у поля ввода. */
.kb-title,.kb-body,.site-ln-name{
  width:100%;border:1px solid transparent;border-radius:var(--r-m);background:var(--field);color:var(--text);outline:none;
  transition:border-color var(--t-ui),box-shadow var(--t-ui),background var(--t-ui);
}
.kb-title{height:52px;padding:0 var(--sp-4);font:700 var(--fs-xl)/1.2 var(--font-display)}
.kb-body{min-height:220px;padding:var(--sp-3) var(--sp-4);font:400 var(--fs-m)/1.55 var(--font-body);resize:vertical}
.site-ln-name{height:var(--h-m);padding:0 var(--sp-4);font:500 var(--fs-m)/1 var(--font-body)}
.kb-title::placeholder,.kb-body::placeholder,.site-ln-name::placeholder{color:var(--muted);font-weight:400}
.kb-title:hover,.kb-body:hover,.site-ln-name:hover{border-color:var(--border-strong)}
.kb-title:focus,.kb-body:focus,.site-ln-name:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.kb-title:focus-visible,.kb-body:focus-visible,.site-ln-name:focus-visible{outline:none}
.kb-title.bad{border-color:var(--crit);box-shadow:0 0 0 3px var(--crit-soft)}

/* поле-рамка настроек (число + единица внутри): .sf-ctl — как поле ввода */
.sf-ctl{display:flex;align-items:center;gap:6px;height:var(--h-m);padding:0 var(--sp-3);border:1px solid transparent;border-radius:var(--r-m);background:var(--field);transition:border-color var(--t-ui),box-shadow var(--t-ui),background var(--t-ui)}
.sf-ctl:hover{border-color:var(--border-strong)}
.sf-ctl:focus-within{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.sf-ctl > input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:none;background:none;color:var(--text);font:600 var(--fs-m)/1 var(--font-display);font-variant-numeric:tabular-nums}
.wz-dc-time input{width:92px}

/* ---------------- Карточка ----------------
   .card — белая панель: скругление 18, мягкая тень, без рамки. Внутренние отступы задаёт сама страница.
   Нажимаемая карточка (проект, счёт, сотрудник) при наведении чуть поднимается и тень становится глубже.
   .card--inset — серый вложенный блок внутри панели (мини-статистика). */
.card,.pj-card,.fin-card,.pjc,.fin-acc,.mf-hero,.tm-card,.kb-main,.pwa-card,.att-card,.pay-todo,.fin-sec,.mf-sec,.sfg-cell{
  background:var(--surface);border:0;border-radius:var(--r-l);box-shadow:var(--sh-card);
}
.card--click,.pjc,.fin-acc,.tm-card,.sfg-cell--edit{cursor:pointer;transition:transform var(--t-ui),box-shadow var(--t-ui)}
.card--click:hover,.pjc:hover,.fin-acc:hover,.tm-card:hover,.sfg-cell--edit:hover{transform:translateY(-2px);box-shadow:var(--sh-card-hover)}
.card--click:active,.pjc:active,.fin-acc:active,.tm-card:active{transform:scale(.99);transition-duration:.08s}
.card--inset,.kp-stats{background:var(--surface-2);border:0;border-radius:var(--r-m);box-shadow:none}
:root[data-theme="dark"]{--sh-card:0 1px 2px rgba(0,0,0,.4),0 12px 28px -18px rgba(0,0,0,.7);--sh-card-hover:0 2px 4px rgba(0,0,0,.45),0 20px 36px -20px rgba(0,0,0,.8)}

/* ---------------- Окно (модалка) ----------------
   Все окна — одна рамка: белый фон, скругление 24, без обводки, глубокая мягкая тень.
   Подложка — затемнение с лёгким размытием. Раскладка внутри (шапка, тело, низ с кнопками) — у самих окон. */
:root{--r-xl:24px;--sh-modal:0 1px 2px rgba(1,29,43,.08),0 40px 80px -30px rgba(1,29,43,.45)}
:root[data-theme="dark"]{--sh-modal:0 0 0 1px var(--border),0 40px 90px -24px rgba(0,0,0,.85)}
.modal-bg{background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal,.wm{background:var(--surface);border:0;border-radius:var(--r-xl);box-shadow:var(--sh-modal)}
.modal-head{border-bottom:0}
/* выбор даты внутри формы (окна, мастер) — как поле ввода, а не таблетка-фильтр */
:is(.modal,.wm,.kb-f,.wz-f) .att-cal-trig{width:100%;justify-content:space-between;border-color:transparent;border-radius:var(--r-m);font-weight:500;font-size:var(--fs-m)}
.att-cal-trig.bad{border-color:var(--crit)}

/* ---------------- Шапка страницы ----------------
   Заголовок страницы везде один: 46px, жирность 700, одинаковое расстояние от верхней панели. */
.db-hero-t h1,.page-head h1{font:700 46px/1.1 var(--font-display);letter-spacing:-.03em}
@media (min-width:1024px){
  :root .main .page{padding-top:26px}
  :root .main .db-heroc.db-merged{padding-top:14px}
}

/* ---------------- Строка списка ----------------
   Сетка колонок у каждого списка своя. Общее: нажимаемая строка (ссылка, кнопка, role=button, onclick)
   при наведении слегка подсвечивается одним и тем же фоном — без сдвигов и теней. */
:is(.mt-r,.row,.exq-hist-row,.notif-row,.pay-todo-row,.pay-hist-row,.pay-sh-row,.db-r,.gb-row,.mf-r,.exq-mdrow,.tmm-row,.atn-r,.fin-tr,.site-tr,.viewas-row,.wk-row,.kc-r,.me-r,.dvm-r,.gs-r,.rt2-row,.ed-r,.tck-r,.att-tr,.nc):is(a,button,[role="button"],[onclick]){transition:background var(--t-ui)}
:is(.mt-r,.row,.exq-hist-row,.notif-row,.pay-todo-row,.pay-hist-row,.pay-sh-row,.db-r,.gb-row,.mf-r,.exq-mdrow,.tmm-row,.atn-r,.fin-tr,.site-tr,.viewas-row,.wk-row,.kc-r,.me-r,.dvm-r,.gs-r,.rt2-row,.ed-r,.tck-r,.att-tr,.nc):is(a,button,[role="button"],[onclick]):hover{background:var(--surface-2);cursor:pointer}

/* ---------------- Выпадающее меню ----------------
   Открытый список выпадающего фильтра или поля (.dd-menu с пунктами .dd-opt).
   Белая плашка со скруглением 16 и тенью; пункт 38 — наведение оранжевым, как у всех кнопок; выбранный — оранжевый текст и галочка. */
.dd-menu{padding:6px;border:0;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--border),0 24px 48px -20px rgba(1,29,43,.35)}
.dd-opt{position:relative;isolation:isolate;display:flex;align-items:center;width:100%;height:38px;padding:0 var(--sp-3);border:0;border-radius:10px;background:none;
  color:var(--text);font:600 var(--fs-s)/1 var(--font-body);text-align:left;cursor:pointer;transition:color var(--t-ui)}
.dd-opt::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--grad);opacity:0;transition:opacity var(--t-ui)}
.dd-opt:hover::before,.dd-opt:focus-visible::before{opacity:1}
.dd-opt:hover,.dd-opt:focus-visible{color:#fff;outline:0}
.dd-opt.on{color:var(--accent)}
.dd-opt.on:hover{color:#fff}
.dd-opt.on .ck{display:block;margin-left:auto;width:16px;height:16px}
.dd-opt .ico{flex:none}

/* ---------------- Всплывающее уведомление (тост) ----------------
   Полупрозрачная белая плашка со скруглением 18, обводкой и тенью; без цветных свечений. */
.toast{border:0;border-radius:var(--r-l);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px var(--border),0 24px 48px -18px rgba(1,29,43,.4)}

/* ---------------- Заголовок таблицы / списка ----------------
   Подписи колонок везде одинаковые: 12px, полужирный, серый, без капса. */
.table th,.sf-tbl th,.att-table th,.pay-sh-head,.pay-hist-head,.exq-hist-head,.wr-head,.tp-ph--head{
  color:var(--muted);font:600 var(--fs-xs)/1.3 var(--font-body);text-transform:none;letter-spacing:0}

/* ---------------- Пустое состояние ----------------
   «Новых запросов нет», «Документов пока нет» и т.п. — по центру, серым, 13px; значок над текстом — серый. */
.empty,.fin-empty,.pj3-empty,.mf-empty,.exq-detail-empty,.tt-empty,.pjb-empty,.pay-sh-empty,.nps-empty,.wz-sd-empty,.pjv-empty,.pay-run-empty,.notif-empty{
  color:var(--muted);font:500 var(--fs-s)/1.5 var(--font-body);text-align:center;letter-spacing:0}
:is(.empty,.fin-empty,.pj3-empty,.mf-empty,.exq-detail-empty,.tt-empty,.pjb-empty,.pay-sh-empty,.nps-empty,.wz-sd-empty,.pjv-empty,.pay-run-empty,.notif-empty) .ico{color:var(--muted);opacity:.7}

/* ---------------- Аватарка ----------------
   Кружок с инициалами: одна заливка и один цвет текста везде; размер задаёт место, где она стоит. */
.avatar{background:var(--surface-3);color:var(--text-2);border:0;box-shadow:none;font-weight:700;font-family:var(--font-body)}

/* ---------------- Двойники, сведённые к компонентам выше ----------------
   Стрелки «‹ ›» календарей и каруселей — маленькая светлая кнопка-иконка;
   крестики «удалить/закрыть» и карандаши «изменить» — маленькая прозрачная кнопка-иконка. */
.att-cal-nav,.rc-nav,.loc-nav,.pjx-arr{width:var(--h-s);height:var(--h-s);font-size:16px;line-height:1}
.pay-hist-x,.x-del,.lf-x,.exq-itemx,.wz-filectl-x,.xbtn,.sfg-edit,.pjv-edit,.fin-acc-ed,.tp-pen{width:var(--h-s);height:var(--h-s);border-color:transparent;background:none}
:is(.pay-hist-x,.x-del,.lf-x,.exq-itemx,.wz-filectl-x,.xbtn,.sfg-edit,.pjv-edit,.fin-acc-ed,.tp-pen) svg{width:16px;height:16px}
/* текстовые кнопки-ссылки («+ Новый счёт», «Ещё», «Добавить») — оранжевый текст без фона, маленькие;
   наведение — оранжевая заливка, как у всех кнопок. Новое — .btn.btn--link */
.btn--link,.linkbtn,.fin-link,.gb-plink,.rt2-add,.pjs-add,.lf-add,.tck-add-btn,.wr-more,.rvq-more,.se-all,.pjx-setbudget,.toast-act{
  height:var(--h-s);padding:0 var(--sp-3);background:none;color:var(--accent);font-size:var(--fs-s);gap:6px}
:is(.btn--link,.linkbtn,.fin-link,.gb-plink,.rt2-add,.pjs-add,.lf-add,.tck-add-btn,.wr-more,.rvq-more,.se-all,.pjx-setbudget,.toast-act) .ico{width:16px;height:16px}
/* «Предыдущая / Следующая» в истории — маленькая серая кнопка */
.pay-hist-pgb{height:var(--h-s);padding:0 var(--sp-3);font-size:var(--fs-s)}

/* ---------------- Переключатель вкл/выкл ----------------
   Один на всю программу: дорожка 34×20, белый кружок; включённый — оранжевый градиент.
   Старые разметки: label.sw-f > input + .sw-i и button.sw-tgl > i. */
.sw-i,.sw-tgl > i{position:relative;display:inline-block;flex:none;width:34px;height:20px;border-radius:var(--r-full);background:color-mix(in srgb,var(--text) 16%,var(--surface));transition:background var(--t-ui)}
.sw-i::after,.sw-tgl > i::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .22s var(--ease-ui)}
label.sw-f > input:checked + .sw-i,.sw-tgl.on > i{background:var(--grad)}
label.sw-f > input:checked + .sw-i::after,.sw-tgl.on > i::after{transform:translateX(14px)}
label.sw-f > input:focus-visible + .sw-i,.sw-tgl:focus-visible > i{outline:2px solid var(--accent);outline-offset:2px}
.sw-tgl{display:inline-flex;align-items:center;gap:8px;height:var(--h-m);padding:0 4px;border:0;background:none;color:var(--text-2);font:600 var(--fs-s)/1 var(--font-body);cursor:pointer}
.sw-tgl.on{color:var(--text)}

/* низ окна расхода — с внутренними отступами, как тело окна */
.exq-new-foot{display:flex;justify-content:flex-end;gap:var(--sp-2);flex-wrap:wrap;padding:0 26px 22px}

/* окна простого создания (проект, задача, ТЗ) */
.cr-kinds{display:flex;flex-wrap:wrap;gap:6px}
.cr-files{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cr-file{gap:4px;padding-right:4px}
.cr-file a{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.cr-time{display:flex;align-items:center;gap:6px}
.cr-time em{font-style:normal;color:var(--muted)}
.cr-modal textarea.in{min-height:110px}
.pjv-tztext{white-space:pre-wrap}