/* DeyDey — сучасні поп-апи (власник 13.11.2026: «не адмінка 2008 року, а гарні поп-апи всюди»).
   Еталон — «Написати покупцю» (.ko-msg__*, сесія DeyDey): радіус 16, м'яка тінь, оверлей з розмиттям,
   поля 40–42 px із радіусом 10, фокус-кільце, акцент — колір теми (--k-primary, за замовчуванням #1bb5fb).
   Тут — лише загальне сімейство .overlay/.modal (Фінанси, Налаштування, Задачі, Ролі, Чати, Команда).
   Сторінки Товари/Замовлення/Автоматизація/Покупці мають свої поп-апи — їх веде сесія DeyDey. */

.overlay{background:rgba(15,23,42,.45); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);}
.overlay > .modal{
  background:#fff; border-radius:16px; border:0;
  box-shadow:0 24px 48px -12px rgba(16,24,40,.24), 0 2px 6px rgba(16,24,40,.06);
  color:#101828; overflow:hidden;
  font-family:var(--k-font, inherit);
}
.overlay > .modal > .drawer-head{padding:20px 24px 16px; border-bottom:1px solid #eef1f5; gap:12px;}
.overlay > .modal > .drawer-head :is(h2, h3, .drawer-title){margin:0; font-size:18px; font-weight:700; letter-spacing:-.01em; color:#101828;}
.overlay > .modal > .drawer-head .icon-btn{width:34px; height:34px; border-radius:10px; border:0; background:transparent; color:#98a2b3;}
.overlay > .modal > .drawer-head .icon-btn:hover{background:#f2f4f7; color:#344054;}
.overlay > .modal > .drawer-body{padding:20px 24px;}
.overlay > .modal > .drawer-foot{padding:16px 24px 20px; border-top:0; gap:10px;}

/* Поля всередині поп-апів */
.overlay > .modal .field{margin-bottom:16px;}
.overlay > .modal .field > label, .overlay > .modal label.label, .overlay > .modal .field .label{font-size:13px; font-weight:500; color:#475467; margin-bottom:6px;}
.overlay > .modal :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea){
  min-height:42px; border:1px solid #e3e7ef; border-radius:10px; background:#fff; color:#101828;
  padding:9px 12px; font-size:14px; box-shadow:none; transition:border-color .15s, box-shadow .15s;
}
.overlay > .modal textarea{min-height:96px; line-height:1.5;}
.overlay > .modal :is(input, select, textarea)::placeholder{color:#98a2b3;}
.overlay > .modal :is(input, select, textarea):focus{outline:0; border-color:var(--k-primary, #1bb5fb); box-shadow:0 0 0 4px rgba(27,181,251,.14);}
.overlay > .modal :is(input, select, textarea):disabled{background:#f9fafb; color:#98a2b3;}

/* Кнопки всередині поп-апів: «Скасувати» — біла з рамкою, головна — заливка акцентом */
.overlay > .modal .btn{height:40px; padding:0 16px; border-radius:10px; font-size:14px; font-weight:600; box-shadow:none; transition:background .15s, border-color .15s, transform .1s;}
.overlay > .modal .btn:active{transform:translateY(1px);}
.overlay > .modal :is(.btn-ghost, .btn-outline, .btn-secondary){background:#fff; border:1px solid #e3e7ef; color:#344054;}
.overlay > .modal :is(.btn-ghost, .btn-outline, .btn-secondary):hover{background:#f7f8fa;}
.overlay > .modal .btn-primary{background:var(--k-primary, #1bb5fb); border:1px solid var(--k-primary, #1bb5fb); color:#fff; min-width:120px; justify-content:center;}
.overlay > .modal .btn-primary:hover{filter:brightness(.95);}
.overlay > .modal .btn-primary:disabled{opacity:.45; cursor:not-allowed;}
.overlay > .modal .btn-danger{background:#fff; border:1px solid #fecdca; color:#d92d20;}
.overlay > .modal .btn-danger:hover{background:#fef3f2;}

/* Таблетки/чіпи вибору в поп-апах — як «Швидкі повідомлення» */
.overlay > .modal .pill{border-radius:999px; border:1px solid #e3e7ef; background:#fff; color:#344054; padding:6px 12px; font-size:13px;}
.overlay > .modal .hint{color:#667085;}

/* Вхід поп-апу: легкий підйом замість різкого стрибка */
@keyframes ddpop{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
.overlay > .modal{animation:ddpop .18s cubic-bezier(.16,1,.3,1);}

/* Темна тема (html[data-key-theme="dark"]) */
html[data-key-theme="dark"] .overlay{background:rgba(2,6,23,.6);}
html[data-key-theme="dark"] .overlay > .modal{background:#111827; color:#e5e7eb; box-shadow:0 24px 48px -12px rgba(0,0,0,.6);}
html[data-key-theme="dark"] .overlay > .modal > .drawer-head{border-bottom-color:#1f2937;}
html[data-key-theme="dark"] .overlay > .modal > .drawer-head :is(h2, h3, .drawer-title){color:#f3f4f6;}
html[data-key-theme="dark"] .overlay > .modal :is(input:not([type=checkbox]):not([type=radio]), select, textarea){background:#0b1220; border-color:#263042; color:#e5e7eb;}
html[data-key-theme="dark"] .overlay > .modal :is(.btn-ghost, .btn-outline, .btn-secondary){background:#111827; border-color:#263042; color:#d1d5db;}
html[data-key-theme="dark"] .overlay > .modal .pill{background:#111827; border-color:#263042; color:#d1d5db;}

@media (max-width:640px){
  .overlay > .modal{border-radius:16px 16px 0 0; max-width:100vw; width:100vw !important; margin-top:auto; max-height:92vh;}
  .overlay:has(> .modal){align-items:flex-end;}
}

/* ═══ Єдиний вигляд кнопок у всій CRM (власник 13.11.2026; зразок — «Створити замовлення» в картці покупця):
   заливка #1bb5fb, радіус 12, висота 40, шрифт 600, м'яке світіння, на hover темніше.
   !important тут свідомо: кнопки розкидані по десятку файлів сторінок зі своїми радіусами 4/8/10 і
   специфічністю до трьох класів — інакше «однаково всюди» не досягти без правки кожної сторінки.
   Склеєні кнопки (.k-btn-split, .k-btn-group) лишають свої внутрішні кути — інакше розпадуться.
   :where() — нульова специфічність: правила для склеєних кнопок нижче мусять її перебивати. */
:root{--dd-btn:#1bb5fb; --dd-btn-hover:#0aa3e8; --dd-btn-glow:0 6px 16px -4px rgba(27,181,251,.55);}

/* головні (заливка) */
:where(.btn.btn-primary, .k-btn:not(.k-btn--default):not(.k-btn-ghost):not(.k-btn--text):not(.k-btn--danger):not(.k-btn-danger):not(.k-btn--outline-white), .ddc-btn:not(.plain):not(.caret), .sr-cta){
  height:40px !important; min-height:40px; padding:0 18px !important; border-radius:12px !important;
  font-weight:600 !important; font-size:13.5px !important; line-height:1 !important;
  background:var(--dd-btn) !important; border:1px solid var(--dd-btn) !important; color:#fff !important;
  box-shadow:var(--dd-btn-glow) !important; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:background .15s, box-shadow .15s, transform .1s;
}
:where(.btn.btn-primary, .k-btn:not(.k-btn--default):not(.k-btn-ghost):not(.k-btn--text):not(.k-btn--danger):not(.k-btn-danger):not(.k-btn--outline-white), .ddc-btn:not(.plain):not(.caret), .sr-cta):hover:not(:disabled){
  background:var(--dd-btn-hover) !important; border-color:var(--dd-btn-hover) !important; box-shadow:0 8px 20px -6px rgba(27,181,251,.65) !important;
}
:where(.btn.btn-primary, .k-btn, .ddc-btn, .sr-cta):disabled{opacity:.45; box-shadow:none !important; cursor:not-allowed;}

/* другорядні (рамка) — та сама форма, без заливки й світіння */
:where(.btn.btn-outline, .btn.btn-ghost, .btn.btn-soft, .k-btn--default, .k-btn-ghost, .ddc-btn.plain){
  height:40px !important; min-height:40px; padding:0 16px !important; border-radius:12px !important;
  font-weight:600 !important; font-size:13.5px !important; line-height:1 !important;
  background:#fff !important; border:1px solid #e3e7ef !important; color:#344054 !important; box-shadow:none !important;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:background .15s, border-color .15s;
}
:where(.btn.btn-outline, .btn.btn-ghost, .btn.btn-soft, .k-btn--default, .k-btn-ghost, .ddc-btn.plain):hover:not(:disabled){
  background:#f7f8fa !important; border-color:#cfd5df !important; color:#101828 !important;
}
.ddc-btn.plain.danger-t{color:#d92d20 !important;}

/* «маленькі» btn-sm лишаються 40 — зразок власника («Створити замовлення») сам btn-sm і має бути 40.
   Нижчі (32) лише там, де кнопка стоїть у рядку таблиці чи списку, щоб рядок не роздувався. */
:where(td, tr, li, .k-actions) :where(.btn.btn-sm, .k-btn--sm, .ddc-btn.sm){height:32px !important; min-height:32px; padding:0 12px !important; border-radius:10px !important; font-size:12.5px !important; box-shadow:none !important;}
.k-btn--icon{padding:0 !important; width:40px;}
.k-btn--sm.k-btn--icon{width:32px;}

/* склеєні: внутрішні кути прямі, світіння одне на групу */
.k-btn-split > :is(.k-btn, .k-btn--default):first-child{border-radius:12px 0 0 12px !important;}
.k-btn-split > :is(.k-btn, .k-btn--default):last-child{border-radius:0 12px 12px 0 !important; padding:0 10px !important;}
.k-btn-split > :is(.k-btn, .k-btn--default){box-shadow:none !important;}
/* стрілка ▾ — окрема квадратна половина 40×40 із тонким розділювачем, стрілка по центру (власник: «стрілка з поганими відступами») */
.k-btn-split > .k-btn:last-child:not(:first-child){width:40px !important; min-width:40px; padding:0 !important; justify-content:center !important; border-left:1px solid rgba(255,255,255,.45) !important;}
.k-btn-split > .k-btn:last-child:not(:first-child) > *{margin:0 !important;}
.k-btn-split:has(> .k-btn:not(.k-btn--default)){border-radius:12px; box-shadow:var(--dd-btn-glow);}

html[data-key-theme="dark"] :is(.btn.btn-outline, .btn.btn-ghost, .btn.btn-soft, .k-btn--default, .k-btn-ghost, .ddc-btn.plain){background:var(--k-card, #111827) !important; border-color:var(--k-border, #263042) !important; color:var(--k-text-2, #d1d5db) !important;}

/* ═══ Ролі й доступи: картки ролей і «Команда» (власник 13.11.2026: «не подобаються відступи»).
   Сітка 8 px: внутрішні відступи 20, між елементами 8/12/16, між блоками 24/40. */
.sr-grid{gap:16px !important; margin-top:8px;}
.sr-role{padding:20px !important; border-radius:16px !important; border-color:#e9ecf2 !important; display:flex; flex-direction:column; gap:12px;}
.sr-role__top{margin-bottom:0 !important; gap:12px !important; align-items:flex-start !important;}
.sr-role__top .sr-avatar{width:40px; height:40px; border-radius:12px; flex:none;}
.sr-role__name{gap:4px;}
.sr-role__name b{font-size:15.5px !important; font-weight:700; line-height:1.3;}
.sr-role__name small{font-size:12.5px !important; line-height:1.4; color:#98a2b3 !important;}
.sr-count{flex:none; font-size:12px; font-weight:600; color:#667085; background:#f2f4f7; border-radius:999px; padding:4px 10px;}
/* «Подивитись як ця роль» — тиха кнопка-таблетка замість пунктирної рамки */
.sr-preview{align-self:flex-start; margin:0 !important; height:32px; display:inline-flex; align-items:center; gap:6px; padding:0 12px !important;
  border:1px solid #d6efff !important; border-radius:10px !important; background:#f0f9ff !important; color:#0b8fd0 !important; font:600 12.5px var(--k-font) !important;}
.sr-preview:hover{background:#e0f2fe !important; border-color:#b9e6fe !important;}
.sr-chips{gap:8px !important;}
.sr-chip{font-size:12px !important; font-weight:500; padding:5px 10px !important; border-radius:999px !important; line-height:1.3;}
.sr-role--new{min-height:auto !important; border:1.5px dashed #cfe9f7 !important; background:#fafdff !important; flex-direction:row; font-size:14px;}
.sr-role--new:hover{border-color:#1bb5fb !important; background:#f0f9ff !important;}
.sr-presets{margin-top:16px; gap:8px; display:flex; flex-wrap:wrap; align-items:center;}
.sr-preset{height:32px; padding:0 14px; border-radius:999px; border:1px solid #e3e7ef; background:#fff; font:500 13px var(--k-font); color:#344054; cursor:pointer;}
.sr-preset:hover{border-color:#1bb5fb; color:#0b8fd0; background:#f0f9ff;}

/* Команда: ім'я на всю ширину картки, роль — праворуч, кнопки особистих прав — окремим рядком під іменем */
.sr-teamhead{margin:40px 0 16px !important;}
.sr-teamhead .sr-sub{font-size:18px; font-weight:700;}
.sr-team{gap:12px !important; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)) !important;}
.sr-person{display:grid !important; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:12px 16px !important; padding:16px 20px !important; border-radius:16px !important;}
.sr-person__who{min-width:0;}
.sr-person .sr-rolepick{max-width:200px; justify-self:end;}
.sr-person__more{grid-column:1 / -1; padding-left:48px !important; gap:8px !important;}
.sr-person__more:empty{display:none;}
.sr-person .sr-srcbtn{height:28px; padding:0 12px; border-radius:999px; font-size:12px;}
.sr-srcpick{grid-column:1 / -1;}

/* «Відділи» у «Ролях» (13.11) — картки як у «Команді». */
.sdep-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px;}
.sdep-card{background:#fff; border:1px solid #e9ecf2; border-radius:16px; padding:16px 20px; display:flex; flex-direction:column; gap:6px;}
.sdep-card--click{cursor:pointer; transition:box-shadow .15s;}
.sdep-card--click:hover{box-shadow:0 6px 16px -8px rgba(16,24,40,.22);}
.sdep-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.sdep-top b{font-size:15px; color:#101828;}
.sdep-card small{font-size:12.5px; color:#667085; line-height:1.45;}

/* «Виплати» (13.11): заявки на оплату й реквізити команди. */
.spo .sr-tabs{margin-bottom:16px;}
.spo-badge{margin-left:6px; background:#e5484d; color:#fff; border-radius:999px; padding:1px 7px; font-size:11px; font-weight:700;}
.spo-bar{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:12px;}
.spo-total{font-size:13.5px; color:#475467;}
.spo-total b{color:#101828;}
.spo-empty{background:#fff; border:1px dashed #d0d5dd; border-radius:16px; padding:28px; text-align:center; color:#667085; font-size:14px;}
.spo-list{display:flex; flex-direction:column; gap:10px;}
.spo-row{display:grid; grid-template-columns:minmax(180px, 1.1fr) minmax(240px, 1.6fr) 130px auto; align-items:center; gap:16px; background:#fff; border:1px solid #e9ecf2; border-radius:16px; padding:16px 20px;}
.spo-row.is-paid{background:#f8fdfb;}
.spo-row.is-cancelled{opacity:.55;}
.spo-who{display:flex; flex-direction:column; gap:4px; min-width:0;}
.spo-who b{font-size:15px; color:#101828;}
.spo-who small{font-size:12.5px; color:#98a2b3;}
.spo-req{display:flex; flex-direction:column; gap:6px; min-width:0;}
.spo-rcpt{font-size:12.5px; color:#475467;}
.spo-line{display:flex; align-items:center; gap:8px; min-width:0;}
.spo-kind{flex:none; font-size:12px; font-weight:600; color:#0b8fd0; background:#f0f9ff; border-radius:999px; padding:3px 9px;}
.spo-line code, .sdep-card code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; color:#101828; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.spo-copy{flex:none; border:0; background:transparent; color:#0b8fd0; font-size:12px; font-weight:600; cursor:pointer; padding:2px 6px; border-radius:6px;}
.spo-copy:hover{background:#f0f9ff;}
.spo-warn{font-size:12.5px; color:#b54708;}
.spo-amt{font-size:17px; font-weight:800; color:#101828; text-align:right; white-space:nowrap;}
.spo-act{display:flex; align-items:center; gap:8px; justify-content:flex-end;}
.spo-paid{font-size:13px; font-weight:600; color:#067647;}
.spo-edit-line{display:flex; gap:8px; align-items:center;}
.spo-edit-line select{width:170px; flex:none;}
.spo-edit-line input{flex:1; min-width:0;}
@media (max-width:900px){ .spo-row{grid-template-columns:1fr; } .spo-amt{text-align:left;} .spo-act{justify-content:flex-start;} }

/* «Звіт для арбітражу» (13.11). */
.sab-date{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#475467;}
.sab-date input{width:150px;}
.sab-table-wrap{background:#fff; border:1px solid #e9ecf2; border-radius:16px; overflow:auto;}
.sab-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.sab-table th{position:sticky; top:0; background:#f9fafb; text-align:right; font-weight:600; font-size:12.5px; color:#475467; padding:12px 14px; border-bottom:1px solid #eef0f4; white-space:nowrap;}
.sab-table th:first-child, .sab-table td:first-child{text-align:left;}
.sab-table td{padding:12px 14px; text-align:right; border-bottom:1px solid #f2f4f7; white-space:nowrap;}
.sab-table td small{color:#98a2b3; margin-left:6px;}
.sab-row{cursor:pointer;}
.sab-row:hover, .sab-row.is-open{background:#f0f9ff;}
.sab-row.is-none td:first-child b{color:#b54708;}
.sab-all{font-weight:700; color:#101828;}
.sab-table tfoot td{background:#f9fafb; border-top:1px solid #eef0f4;}
.sab-detail td{background:#fbfcfe; padding:8px 14px 14px; text-align:left; white-space:normal;}
.sab-list{max-height:360px; overflow:auto; display:flex; flex-direction:column; gap:4px;}
.sab-item{display:grid; grid-template-columns:110px 130px 170px 100px 1fr; gap:12px; font-size:12.5px; padding:6px 8px; border-radius:8px; background:#fff;}
.sab-no{font-weight:600; color:#101828;}
.sab-st{color:#0b8fd0;}

/* «Навчання стажерів» (13.11). */
.stt-card{background:#fff; border:1px solid #e9ecf2; border-radius:16px; padding:16px 20px; margin-bottom:12px; display:flex; flex-direction:column; gap:10px;}
.stt-h{margin:24px 0 12px; font-size:17px; font-weight:700;}
.stt-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.stt-q{border-top:1px dashed #e3e7ef; padding-top:10px; display:flex; flex-direction:column; gap:6px;}
.stt-opt{display:flex; align-items:center; gap:8px; padding-left:12px;}
.stt-opt input[type=radio]{accent-color:#12b76a; width:16px; height:16px; flex:none;}
.stt-res{grid-template-columns:minmax(180px,1.1fr) minmax(220px,1.6fr) 110px auto;}
.stt-practice{grid-column:1 / -1; font-size:13.5px; color:#344054; white-space:pre-line; background:#f9fafb; border-radius:10px; padding:10px 12px;}

/* Задачі: «Вибрати всіх» у групі відповідальних (13.11). */
.ddt2-who__grp{display:flex; align-items:center; justify-content:space-between; gap:8px;}
.ddt2-who__all{border:0; background:transparent; color:#0b8fd0; font-size:12px; font-weight:600; cursor:pointer; padding:2px 6px; border-radius:6px; text-transform:none; letter-spacing:0;}
.ddt2-who__all:hover{background:#f0f9ff;}
/* «Відділи» в «Ролях»: корінь сторінки ролей — flex-рядок, тож блок відділів має займати весь рядок, а не стояти збоку від вкладок. */
.sdep{flex:1 1 100%; width:100%; min-width:0;}
.sdep .sr-teamhead{width:100%;}

/* Покупці: «Забрав N з M» завжди окремим рядком під іменем (власник 13.11: «одинаково должно быть» — у коротких
   імен стояло збоку, у довгих переносилось вниз). */
.ko-pick-n{display:block !important; margin:2px 0 0 !important;}
/* Якість роботи — кнопки в спільному стилі CRM (як усюди: висота 40, радіус 12, жирний шрифт). */
.sq .sq-more{height:40px; padding:0 18px; border-radius:12px; font:600 13.5px/1 var(--k-font); border:1px solid #e3e7ef; background:#fff; color:#344054; cursor:pointer;}
.sq .sq-more:hover{background:#f7f8fa;}
.sq .sq-more[style]{background:#1bb5fb; border-color:#1bb5fb; color:#fff; box-shadow:0 6px 16px -4px rgba(27,181,251,.55);}
.sq .sq-more[style]:hover{background:#0aa3e8;}
.sq-seg button{height:36px; border-radius:10px; font-weight:600;}

/* Меню аватара: робочий статус «В роботі / Перерва / Закінчив роботу» (13.11). */
.ks-prof-status{display:flex; gap:6px; padding:4px 0 8px;}
.ks-prof-status button{flex:1; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.08); color:#fff; font:600 12.5px/1 var(--k-font); cursor:pointer;}
.ks-prof-status button:hover{background:rgba(255,255,255,.18);}
.ks-prof-status button.on.is-work{background:#12b76a; border-color:#12b76a;}
.ks-prof-status button.on.is-lunch{background:#f79009; border-color:#f79009;}
.ks-prof-status button.on.is-off{background:#fff; border-color:#fff; color:#344054;}

/* ═══ «Фінанси» як у Finmap (власник 13.11: «раскладку как в финмапе точ в точ»): ліва панель рахунків,
   угорі «Платежі / Аналітика», звіти — плитками. Дочірні елементи сторінки — права колонка, панель — ліва. */
.sfn-page{display:grid; grid-template-columns:250px minmax(0, 1fr); column-gap:20px; align-items:start;}
.sfn-page > *{grid-column:2; min-width:0;}
.sfn-page > .k-head{grid-column:1 / -1;}
.sfn-page > .sfn-side{grid-column:1; grid-row:2 / span 60; align-self:start; position:sticky; top:76px;}
.sfn-side{background:#eef2f9; border-radius:16px; padding:18px 16px; display:flex; flex-direction:column; gap:4px;}
.sfn-side__total{padding-bottom:14px; margin-bottom:10px; border-bottom:1px solid #dfe5ef;}
.sfn-side__total small{display:block; font-size:12px; color:#667085;}
.sfn-side__total b{font-size:26px; font-weight:800; color:#101828; letter-spacing:-.02em;}
.sfn-side__h{font-size:13px; font-weight:700; color:#101828; margin:4px 0 6px;}
.sfn-side__acc{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:8px 6px; border-radius:8px; font-size:13px; color:#475467; cursor:pointer;}
.sfn-side__acc:hover{background:#fff;}
.sfn-side__acc span{display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sfn-side__acc b{font-weight:600; color:#101828; white-space:nowrap;}
.sfn-side__acc b.neg{color:#d92d20;}
.sfn-side__empty{font-size:13px; color:#98a2b3; padding:6px;}
.sfn-side__link{margin-top:10px; border:0; background:transparent; color:#0b8fd0; font:600 12.5px var(--k-font); text-align:left; padding:6px; cursor:pointer;}
.sfn-side .sfn-dot{width:8px; height:8px; border-radius:50%; flex:none;}
/* Кнопки дій угорі — як у Finmap: Дохід / Витрата / Переказ */
.sfn-op{height:40px; padding:0 20px; border-radius:12px; border:0; font:600 14px var(--k-font); cursor:pointer;}
.sfn-op--in{background:#ecfdf3; color:#067647; box-shadow:inset 0 0 0 1px #abefc6;}
.sfn-op--out{background:#fef3f2; color:#b42318; box-shadow:inset 0 0 0 1px #fecdca;}
.sfn-op--tr{background:#f2f4f7; color:#344054; box-shadow:inset 0 0 0 1px #e4e7ec;}
.sfn-op:hover{filter:brightness(.93);}
/* Вкладки-таблетки */
.sfn-tabs{display:flex; gap:6px; flex-wrap:wrap; margin:4px 0 16px;}
.sfn-tab{height:38px; padding:0 18px; border-radius:999px; border:0; background:transparent; color:#667085; font:600 15px var(--k-font); cursor:pointer;}
.sfn-tab:hover{color:#101828;}
.sfn-tab.on{background:#101828; color:#fff;}
.sfn-tab.warn{color:#d92d20;}
.sfn-tab.on.warn{color:#fff;}
/* Плитки «Аналітики» */
.sfn-hub{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px;}
.sfn-tile{background:#fff; border:1px solid #e9ecf2; border-radius:14px; padding:18px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:8px; min-height:140px; font-family:var(--k-font); transition:box-shadow .15s, border-color .15s;}
.sfn-tile:hover{border-color:#cfd5df; box-shadow:0 8px 20px -10px rgba(16,24,40,.25);}
.sfn-tile__i{font-size:22px;}
.sfn-tile b{font-size:15px; color:#101828;}
.sfn-tile small{font-size:12.5px; color:#667085; line-height:1.45;}
.sfn-rep-head{display:flex; align-items:flex-start; gap:14px; margin:0 0 14px;}
.sfn-rep-head h2{margin:0; font-size:24px; font-weight:800; color:#101828;}
.sfn-rep-head small{color:#667085; font-size:13px;}
.sfn-back{width:36px; height:36px; border-radius:10px; border:0; background:transparent; font-size:20px; cursor:pointer;}
.sfn-back:hover{background:#f2f4f7;}
@media (max-width:900px){ .sfn-page{grid-template-columns:1fr;} .sfn-page > *, .sfn-page > .sfn-side{grid-column:1; grid-row:auto; position:static;} }
/* Навчання стажерів: урок із бази знань колл-центру (HTML) у редакторі курсу — прев'ю з прокруткою */
.stt-html{max-height:260px;overflow:auto;border:1px solid #e9ecf2;border-radius:10px;padding:10px 14px;background:#fafbfc;font-size:13.5px;line-height:1.55}
.stt-html h1{font-size:16px;margin:10px 0 4px}.stt-html h2{font-size:15px;margin:10px 0 4px}.stt-html h3{font-size:14px;margin:8px 0 4px}.stt-html p{margin:0 0 6px}
.stt-html table{border-collapse:collapse;font-size:12.5px}.stt-html td,.stt-html th{border:1px solid #e9ecf2;padding:4px 6px}
.stt-scripts{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
.stt-slist{max-height:calc(100vh - 260px);overflow:auto;padding:8px}
.stt-slist button{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:13.5px;padding:7px 10px;border-radius:8px;cursor:pointer;color:#101828}
.stt-slist button:hover{background:#f2f4f7}.stt-slist button.on{background:#e8f6fe;color:#0277bd;font-weight:600}
.stt-html--full{max-height:none;border:0;background:none;padding:0;font-size:14px}
@media (max-width:820px){.stt-scripts{grid-template-columns:1fr}.stt-slist{max-height:300px}}
/* Ролі → Команда: статус людини зараз (В роботі / Перерва / Не в роботі), власник 13.11 */
.sr-opst{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;background:#f2f4f7;color:#667085;white-space:nowrap}
.sr-opst i{width:8px;height:8px;border-radius:50%;background:#98a2b3;flex:none}
.sr-opst small{font-weight:500;opacity:.8}
.sr-opst.is-work{background:#ecfdf3;color:#067647}.sr-opst.is-work i{background:#12b76a;box-shadow:0 0 0 3px rgba(18,183,106,.18)}
.sr-opst.is-lunch{background:#fffaeb;color:#b54708}.sr-opst.is-lunch i{background:#f79009}
.sr-person__txt .sr-opst{margin-top:6px;align-self:flex-start;width:max-content}
/* Навчання стажерів → Курс у вигляді «Навчання» колл-центру (kbc-* з css/cc-e.css) */
.stt .kbc{padding-top:6px}
.stt-addsec{display:flex;gap:10px;margin-top:18px;max-width:560px}
.stt-lf{align-items:center;gap:10px}.stt-lf small{margin-right:auto}
.stt-ord{display:inline-flex;gap:4px}.stt-ord button{width:30px;height:30px;border:1px solid var(--k-border,#e4e7ec);background:var(--k-card,#fff);border-radius:8px;cursor:pointer;color:var(--k-text-2,#475467)}
.stt-ord button:disabled{opacity:.35;cursor:default}
.stt-vid{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000;margin-bottom:18px}.stt-vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.stt-note.is-sub{margin-top:18px;padding:14px 16px;border-radius:12px;background:rgba(27,181,251,.07);font-size:15px}
.stt-edit{display:grid;gap:12px}.stt-edit__row{display:grid;grid-template-columns:260px 1fr;gap:12px}
@media (max-width:760px){.stt-edit__row{grid-template-columns:1fr}.stt-addsec{flex-direction:column}}
.sal-pick{min-width:220px}
.stt-addsec .kbc-btn{flex:none;white-space:nowrap}
.stt-hero{display:flex;justify-content:center;background:#f4f6fa;border-radius:14px;padding:12px;margin:0 0 22px}.stt-hero img{max-height:320px;max-width:100%;object-fit:contain;border-radius:10px}
.stt .kbc-prose hr{border:0;border-top:1px solid var(--k-border,#eaecf0);margin:18px 0}
.stt .kbc-head h1{font-size:22px}
.stt-linkbox{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin:0 0 16px;padding:14px 18px;border:1px solid #b9e6fd;border-radius:14px;background:rgba(27,181,251,.06)}
.stt-linkbox b{display:block;font-size:14.5px}.stt-linkbox small{color:var(--k-text-2,#667085);font-size:12.5px}
.stt-linkbox .spo-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.stt-linkbox code{font-size:12.5px;background:#fff;padding:6px 10px;border-radius:8px;border:1px solid #e4e7ec}
.stt-linkbox a.spo-copy{text-decoration:none}
.sab-range{display:inline-flex}
/* Навчання → Результати → картка стажера */
.stt-det{padding:20px 22px;display:grid;gap:16px}
.stt-det__h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.stt-det__h h2{margin:0;font-size:22px}.stt-det__h small{color:var(--k-text-2,#667085)}
.stt-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.stt-kpis div{background:var(--k-bg,#f4f6fa);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.stt-kpis b{font-size:20px;font-variant-numeric:tabular-nums}.stt-kpis small{color:var(--k-text-2,#667085);font-size:12.5px}
.stt-det-tbl{overflow-x:auto;padding:4px 0}
.stt-det-tbl table{width:100%;border-collapse:collapse;font-size:13.5px}
.stt-det-tbl th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--k-text-2,#667085);padding:10px 16px;border-bottom:1px solid var(--k-border,#eaecf0)}
.stt-det-tbl td{padding:10px 16px;border-bottom:1px solid var(--k-border,#eaecf0);vertical-align:top}
.stt-det-tbl .r{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.stt-det-tbl tr.is-miss td{color:var(--k-placeholder,#98a2b3)}
.stt-det-tbl tr.is-blk td{background:var(--k-bg,#f4f6fa);font-weight:700}
.stt-det-tbl td.is-ok{color:#067647;font-weight:600}.stt-det-tbl td.is-bad{color:#b42318}
/* Тест: картки питань (варіант 1, власник 13.11) */
.stt-qblk{display:grid;gap:12px;margin:0 0 22px}
.stt-qblk__h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stt-qblk__h h3,.stt-qblk__t{margin:0;font-size:18px;font-weight:800;color:var(--k-text,#101828)}
.stt-qblk__t{border:1px solid transparent;background:transparent;border-radius:8px;padding:4px 8px;font-family:inherit;min-width:220px}
.stt-qblk__t:hover,.stt-qblk__t:focus{border-color:var(--k-border,#e4e7ec);background:var(--k-card,#fff);outline:0}
.stt-qblk__a{margin-left:auto;display:flex;gap:8px}
.stt-qc{padding:16px 18px;display:grid;gap:12px}
.stt-qc.is-edit{border-color:#1bb5fb;box-shadow:0 0 0 3px rgba(27,181,251,.14)}
.stt-qc__h{display:flex;align-items:flex-start;gap:12px}.stt-qc__h b{flex:1;font-size:15.5px;line-height:1.4}.stt-qc__h .k-input{flex:1}
.stt-qc__n{width:28px;height:28px;border-radius:8px;background:rgba(27,181,251,.12);color:#0277bd;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.stt-qc__ed{border:0;background:none;cursor:pointer;color:var(--k-text-2,#667085);font-size:16px;padding:2px 6px;border-radius:6px}.stt-qc__ed:hover{background:var(--k-bg,#f2f4f7)}
.stt-qc__opts{display:grid;gap:8px;padding-left:40px}
.stt-qc__o{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--k-border,#e4e7ec);border-radius:12px;font-size:14.5px;background:var(--k-card,#fff)}
.stt-qc__o.is-ok{border-color:#12b76a;background:#ecfdf3;color:#067647;font-weight:600}
.stt-qc__o small{margin-left:auto;font-weight:600;color:#067647}
.stt-qc__o .k-input{flex:1}.stt-qc__o input[type=radio]{width:18px;height:18px;accent-color:#12b76a;flex:none}
.stt-qc__x{border:0;background:none;color:#98a2b3;cursor:pointer;font-size:14px}
.stt-dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--k-border,#d0d5dd);flex:none}
.stt-dot.on{border-color:#12b76a;background:radial-gradient(circle,#12b76a 0 4px,transparent 5px)}
.stt-qc__f{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding-left:40px}
@media (max-width:760px){.stt-qc__opts,.stt-qc__f{padding-left:0}}
/* Тест: вузька колонка по центру, без розтягування на весь екран (власник 13.11: «розтягнуто», «вправо погано») */
.stt-quiz{max-width:920px;margin:0 auto;display:grid;gap:14px}
.stt-quiz .kbc-crumb{margin:0}
.stt-qset{display:grid;grid-template-columns:1fr 180px;gap:12px;align-items:end;padding:16px 18px}
.stt-qset .sr-field{margin:0}
.stt-qblk__h{flex-wrap:nowrap}
.stt .stt-qblk__h input.stt-qblk__t{flex:0 1 auto;width:auto;min-width:0;max-width:60%;border:1px solid transparent !important;background:transparent !important;box-shadow:none !important;padding:4px 8px;height:auto}
.stt .stt-qblk__h input.stt-qblk__t:focus{border-color:#1bb5fb !important;background:var(--k-card,#fff) !important}
.stt-qblk__h .k-muted{white-space:nowrap}
.stt-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
@media (max-width:760px){.stt-qset{grid-template-columns:1fr}.stt-qblk__h{flex-wrap:wrap}}
/* Ролі → «Ще без доступу»: люди колл-центру без входу */
.sr-pend{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px;margin-top:10px}
.sr-pend__i{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px dashed var(--k-border,#d0d5dd);border-radius:14px;background:var(--k-card,#fff)}
.sr-pend__t{flex:1;min-width:0;display:flex;flex-direction:column}.sr-pend__t b{font-size:14px}
.sr-pend__t small{color:var(--k-text-2,#667085);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Навчання → Результати → рейтинг кандидатів */
.stt-rank{padding:16px 0 4px;margin:0 0 18px}
.stt-rank__h{padding:0 16px 10px;display:flex;flex-direction:column;gap:2px}.stt-rank__h b{font-size:16px}.stt-rank__h small{color:var(--k-text-2,#667085);font-size:12.5px}
.stt-score{display:inline-block;min-width:40px;text-align:center;padding:3px 8px;border-radius:8px;font-weight:800}
.stt-score.g{background:#ecfdf3;color:#067647}.stt-score.y{background:#fffaeb;color:#b54708}.stt-score.r{background:#fef3f2;color:#b42318}
.stt-flag{display:inline-block;margin:2px 4px 2px 0;padding:2px 8px;border-radius:999px;font-size:11.5px;font-weight:600;background:#f2f4f7;color:#475467}
.stt-flag.g{background:#ecfdf3;color:#067647}.stt-flag.r{background:#fef3f2;color:#b42318}.stt-flag.y{background:#fffaeb;color:#b54708}.stt-flag.b{background:#e8f6fe;color:#0277bd}
.stt-det-tbl tr.is-top td{background:rgba(18,183,106,.06)}.stt-det-tbl tr.is-low td{background:rgba(217,45,32,.05)}

/* Finmap-кнопки ніжніше (власник 13.11: «дуже строкато, ніжніше колір») */
.sfn-op:hover{filter:none; background-image:linear-gradient(rgba(16,24,40,.04),rgba(16,24,40,.04));}
/* Автоматизація: правило «лише тим, хто в роботі» */
.sst-step-chip--ok{background:#ecfdf3 !important; color:#067647 !important;}
.sst-step-chip--ok b{background:#12b76a !important; color:#fff !important;}
/* Скрипти: технічні характеристики таблицею */
.kbc-prose table.kb-spec{width:auto;min-width:320px;border:1px solid var(--k-border,#eaecf0);border-radius:10px;overflow:hidden}
.kbc-prose table.kb-spec td{padding:8px 14px}.kbc-prose table.kb-spec td:first-child{color:var(--k-text-2,#667085);width:1%;white-space:nowrap;background:var(--k-bg,#f8fafc)}
/* Медіабаїнг → Спенд: три зведення не влазили в 3 колонки (власник 13.11: «спенд підправ візуал»).
   Тепер джерела + типи кабінетів поруч, байєри на всю ширину; таблиці не обрізаються. */
.mb-spgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;align-items:start}
.mb-spgrid > .dda-card:nth-child(3){grid-column:1 / -1}
.mb-spgrid .dda-card{overflow-x:auto}
.mb-spgrid .dda-card-h{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mb-spgrid .dda-card-h h3{white-space:nowrap}
.mb-spgrid .mb-tbl td,.mb-spgrid .mb-tbl th{white-space:nowrap}
.mb-spgrid .mb-nat{display:block}
@media (max-width:1100px){.mb-spgrid{grid-template-columns:1fr !important}}
/* Меню збоку: пункти при прокрутці не «ріжуться» об заокруглений верх панелі — м'яке згасання зверху й знизу */
html[data-key-view="modern"] .ks-list:not(.ks-list--bottom){-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);padding-top:6px}
/* Календар-діапазон: список місяців ліворуч під швидким вибором (власник 13.11) */
.mb-rp-presets{max-height:440px;overflow-y:auto}
.mb-rp-sep{height:1px;background:var(--a-line,#e4e7ec);margin:6px 8px}
.mb-rp-presets .mb-rp-mon{text-transform:capitalize}
.mb-rp-presets .mb-rp-mon.on{background:rgba(27,181,251,.12);color:#1b8fd6;font-weight:600}

/* ShopRangePicker clearable (фільтри Завдань): хрестик скидання поруч із календарем-діапазоном. */
.srp{display:inline-flex; align-items:center; gap:6px; max-width:100%}
.srp--clear .mb-quick{display:none}
.srp-x{border:0; background:#eef2f6; color:#667085; width:26px; height:26px; border-radius:8px; font-size:16px; line-height:1; cursor:pointer; flex:none}
.srp-x:hover{background:#e4e9f0; color:#344054}
.spo-search{display:block; width:320px; max-width:100%; margin:0 0 14px}

/* «Реквізити команди»: кожен реквізит окремим рядком з кнопкою «Копіювати». */
.spo-rq{display:grid; grid-template-columns:1fr auto; grid-template-areas:"k b" "v b"; align-items:center; column-gap:10px; row-gap:2px; padding:8px 10px; border-radius:10px; background:#f8fafc; border:1px solid #eef2f6}
.spo-rq + .spo-rq{margin-top:6px}
.spo-rq__k{grid-area:k; font-size:11.5px; color:#667085}
.spo-rq__v{grid-area:v; font-size:13px; color:#101828; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere}
.spo-rq .spo-copy{grid-area:b; white-space:nowrap}
.spo-copy.is-done{background:#ecfdf3; color:#067647; border-color:#abefc6}

/* Finmap: назви рахунків не обрізаються (власник 13.11 «тут плохо» — «Monobank кар…»): назва переноситься, сума праворуч. */
.sfn-side__acc{align-items:flex-start}
.sfn-side__acc span{white-space:normal; overflow:visible; line-height:1.3; align-items:flex-start}
.sfn-side__acc span .sfn-dot{margin-top:5px; flex:none}
.sfn-side__acc b{flex:none}

/* Finmap: перемикач періоду (власник 13.11 «так себе»): одна спокійна пігулка без рамок між кнопками, обране — білим. */
.sfn-page .shp-toolbar .shp-seg{gap:2px; padding:4px; border:0; border-radius:12px; background:#eef2f6; overflow:visible}
.sfn-page .shp-toolbar .shp-seg button{border:0 !important; border-radius:9px; padding:8px 14px; font:600 13px/1 var(--k-font, inherit); color:#475467; background:transparent; box-shadow:none}
.sfn-page .shp-toolbar .shp-seg button:hover{color:#101828; background:rgba(255,255,255,.6)}
.sfn-page .shp-toolbar .shp-seg button.active{background:#fff; color:#0b8fd0; box-shadow:0 1px 3px rgba(16,24,40,.12)}

/* ══ Фінанси → «Журнал платежів» (13.11): у вигляді картки клієнта — плитки-фільтри, дні, рядки-картки. ══ */
.sfj-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin:4px 0 14px}
.sfj-tile{display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; padding:14px 16px; border-radius:14px; background:#fff; border:1px solid #eaecf0; box-shadow:0 1px 2px rgba(16,24,40,.04); cursor:pointer; transition:border-color .15s, box-shadow .15s}
.sfj-tile:hover{border-color:#d0d5dd; box-shadow:0 4px 12px rgba(16,24,40,.06)}
.sfj-tile.on{border-color:#0b8fd0; box-shadow:0 0 0 3px rgba(11,143,208,.12)}
.sfj-tile__l{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; color:#475467}
.sfj-tile__l i{width:8px; height:8px; border-radius:50%}
.sfj-tile b{font-size:22px; font-weight:800; color:#101828; letter-spacing:-.01em}
.sfj-tile.is-paid b{color:#067647}
.sfj-tile small{font-size:12px; color:#98a2b3}
.sfj-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:14px}
.sfj-search{flex:1; min-width:240px; max-width:460px; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px; background:#fff; border:1px solid #d0d5dd; border-radius:10px; color:#98a2b3}
.sfj-search:focus-within{border-color:#0b8fd0; box-shadow:0 0 0 3px rgba(11,143,208,.12)}
.sfj-search span{display:inline-flex; width:16px}
.sfj-search input{flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:13.5px; color:#101828}
.sfj-sel{height:40px; border:1px solid #d0d5dd; border-radius:10px; padding:0 12px; background:#fff; font:inherit; font-size:13.5px; color:#344054}
.sfj-reset{height:40px; border:0; background:transparent; color:#0b8fd0; font-weight:600; cursor:pointer; padding:0 8px}
.sfj-list{display:flex; flex-direction:column; gap:18px}
.sfj-day{display:flex; flex-direction:column; gap:8px}
.sfj-day__h{display:flex; align-items:baseline; justify-content:space-between; padding:0 4px}
.sfj-day__h span{font-size:13px; font-weight:700; color:#344054; text-transform:capitalize}
.sfj-day__h small{font-size:12px; color:#067647; font-weight:600}
.sfj-row{display:grid; grid-template-columns:52px 4px minmax(0,1fr) auto 150px; align-items:center; gap:14px; padding:12px 16px; background:#fff; border:1px solid #eaecf0; border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,.04)}
.sfj-row:hover{border-color:#d0d5dd}
.sfj-row.is-pending,.sfj-row.is-cancelled{background:#fcfcfd}
.sfj-row__t{font-size:13px; color:#667085; font-variant-numeric:tabular-nums}
.sfj-row__bar{width:4px; height:34px; border-radius:4px}
.sfj-row__main{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0}
.sfj-kind{font-size:11.5px; font-weight:600; color:#3f6212; background:#ecfccb; border-radius:6px; padding:2px 7px}
.sfj-row__main b{font-size:14px; color:#101828}
.sfj-order{font-size:13.5px; font-weight:600; color:#0b8fd0; text-decoration:none; font-variant-numeric:tabular-nums}
.sfj-order:hover{text-decoration:underline}
.sfj-who{font-size:13px; color:#475467}
.sfj-note{flex-basis:100%; font-size:12px; color:#98a2b3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sfj-row__sum{font-size:16px; font-weight:800; color:#101828; white-space:nowrap; font-variant-numeric:tabular-nums}
.sfj-row.is-paid .sfj-row__sum{color:#067647}
.sfj-row.is-pending .sfj-row__sum,.sfj-row.is-cancelled .sfj-row__sum{color:#98a2b3}
.sfj-status{justify-self:end; height:32px; border-radius:999px; border:1px solid color-mix(in srgb, var(--c) 35%, #fff); background:color-mix(in srgb, var(--c) 10%, #fff); color:var(--c); font:600 12.5px/1 inherit; padding:0 12px; cursor:pointer}
.sfj-more{align-self:center; border:1px solid #d0d5dd; background:#fff; border-radius:10px; padding:10px 18px; font-weight:600; color:#344054; cursor:pointer}
.sfj-hint,.sfj-empty span{font-size:12.5px; color:#98a2b3}
.sfj-hint{text-align:center}
.sfj-empty{display:flex; flex-direction:column; align-items:center; gap:6px; padding:48px 16px; background:#fff; border:1px dashed #d0d5dd; border-radius:14px; color:#344054}
.sfj-empty__i{width:40px; height:40px; color:#98a2b3}
@media (max-width: 760px){
  .sfj-row{grid-template-columns:44px 4px minmax(0,1fr) auto; }
  .sfj-status{grid-column:3 / -1; justify-self:start}
}

/* ══ Світла тема (власник 13.11: «если тема меняется — то синее окно тоже»): спливні панелі рейки (меню профілю,
   сповіщення, групи меню) — світлі, як картка клієнта. Темна/нічна тема лишає синій вигляд як був. ══ */
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-panel{background:#fff; color:#101828; border:1px solid #eaecf0; box-shadow:0 16px 40px rgba(16,24,40,.14)}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-panel-head,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-title,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-text,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-empty,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-name,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-row,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-link,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-lang{color:#101828}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-count,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-meta,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-mail{color:#667085}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-panel-sec{color:#98a2b3}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-panel-sec::after{background:#eaecf0}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-panel-link{color:#344054}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-panel-link:hover{background:#f2f4f7; color:#101828}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-panel-link.is-active{background:#e0f2fe; color:#0b6aa2}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-panel-link.is-active::after{background:#0b8fd0}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-head{border-bottom-color:#eaecf0}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-cog-btn,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-tab{color:#344054}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-tab.on::after{background:#0b8fd0}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-item:hover,
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-panel-instr:hover{background:#f2f4f7}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-notif-item.unread::before{background:#0b8fd0}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-head{background:linear-gradient(180deg,#f0f9ff,#fff)}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-role{background:#eef2f6; color:#475467}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-body{background:#f9fafb; border-top:1px solid #eaecf0}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-status button{border-color:#d0d5dd; background:#fff; color:#344054}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-status button:hover{background:#f2f4f7}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-status button.on.is-work{background:#12b76a; border-color:#12b76a; color:#fff}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-status button.on.is-lunch{background:#f79009; border-color:#f79009; color:#fff}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-prof-status button.on.is-off{background:#475467; border-color:#475467; color:#fff}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-logout{border-color:#d0d5dd; color:#344054}
:root:not([data-theme="dark"]):not([data-theme="night"]) .ks-logout:hover{background:#f2f4f7}
/* Навчання: «+ Розділ» у правому куті рядка вкладок (14.11) */
.stt-tabrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.stt-tabrow .sr-tabs{margin:0}
.stt-addsec-btn{flex:none;white-space:nowrap}
.stt-secmodal{max-width:460px}