/* ═══════════════════════════════════════════════════════════════════════════════════════
   DeyDey CRM — вигляд KeyCRM «піксель у піксель» (власник, 09.11.2026).
   Значення виміряні з живого акаунта (docs/keycrm-live/README.md + dumps/*.txt, вікно
   1688×729). Код/CSS KeyCRM не копіюємо — лише виміри. Цей файл підключається ОСТАННІМ
   (index.html), тож перебиває styles.css і css/shop-*.css.

   ── ДОВІДНИК КЛАСІВ (для сторінок B–E) ────────────────────────────────────────────────
   ШАПКА СТОРІНКИ (sticky, 64px, як .key-subheader):
     <div class="k-head">                                  ← рядок шапки (alias: .k-subheader)
       <button class="k-refresh" v-html="kIcons.refresh"></button>   32×32 primary
       <h3 class="k-title">Замовлення</h3>                  15.6px/600 #434349
       <form class="k-search" @submit.prevent>              422×32
         <span class="k-search__icon" v-html="kIcons.search"></span>
         <input placeholder="Швидкий пошук">
         <button type="button" class="k-search__filter" v-html="kIcons.sliders"></button>  (кнопка «фільтр» всередині)
       </form>
       …свої контролі сторінки…  <span class="k-spacer"></span>  <button class="k-btn">+ Додати</button>
     </div>
     <div class="k-content">…</div>   (необов'язково: .view уже має padding 0 20px 20px)
     Іконки: import { kIcons } from '../icons.js' — refresh, search, sliders, link, history,
     print, dots, angleRight, angleDown, arrowLeft, arrowRight, columns, cog, plus, users,
     pencil, trash, eye, file, upload, download, filter, x, copy, external, grip, check.
   «ОБРАТИ СТОВПЧИКИ» (язичок біля правого краю вікна, y=120):
     <div class="k-colchooser" @click="…"><span class="k-colchooser__icon" v-html="kIcons.columns"></span><span class="k-colchooser__text">Обрати стовпчики</span></div>
   КНОПКИ (32px, 12px текст, r4):
     .k-btn (primary #00a6f2) · .k-btn--default (біла, рамка #e3e6eb) · .k-btn--text · .k-btn--danger
     .k-btn--sm (26px) · .k-btn--lg (36px) · .k-btn--icon (квадратна) · .k-btn--outline-white
     .k-btn-group (склеєні кнопки, як дії рядка: 4×26px) · .k-btn-split (кнопка + ▾)
     Старі імена працюють: .k-btn-ghost = default, .k-btn-danger, .k-iconbtn, .k-actions.
   ПОЛЯ:
     .k-input (форми/фільтри: #e6f7ff, 32px) · .k-input--white (біле з рамкою #d3dfe5)
     .k-select (нативний <select> у тому ж стилі; .k-select--plain — прозорий з рамкою #d5d8dc)
     .k-textarea · .k-input-group > .k-input + .k-input-append (#bde8ff / #4c7e99)
     .k-form-item > .k-label (10.4px, фільтри) | .k-label--lg (12px, шухляди/діалоги)
     .k-checkbox: <label class="k-checkbox"><input type="checkbox"><span></span>Текст</label>
     .k-radio:    <label class="k-radio"><input type="radio"><span></span>Текст</label>
     .k-switch:   <label class="k-switch"><input type="checkbox"><span></span></label>  40×20
   СТАТУСИ (чипи груп): <span class="k-status k-status--new">Новий</span>
     групи: --new --agreement --delivery --completed --canceled (+ .k-status--production)
     .k-status--outline (незачеплена група в статус-барі) · .k-status--sm (10px у таблиці)
     .k-status__dot (крапка 7px) · .k-status__count (• 208). Старі .k-chip/.k-pill/.k-st-* лишились.
   ТАБЛИЦІ:
     .k-table  — «картки-рядки» (замовлення/покупці): кожен рядок білий, 46px, проміжок 12px,
                 th 11.7px. tr.is-selected — блакитний, tr.is-expanded — #264785 білий текст.
                 td.k-table__expand (стрілка ›), td.k-table__check.
     .k-eltable — таблиця в порталеті (списки відправок, каталог): th 12px/700 #909399,
                 td 12px #606266, рамки #ebeef5. .k-eltable--stripe.
     .k-portlet (біла картка r4 з тінню) > .k-portlet__head / .k-portlet__body
     .k-card (r8 тінь 0 2px 2px rgba(0,0,0,.08)) — статус-бар, аналітичні картки.
   ПАГІНАЦІЯ (низ списку):
     <div class="k-pagefoot">
       <div class="k-pagination"><button class="k-pagination__btn" disabled>←</button>
         <button class="k-pagination__btn is-active">1</button> … <span class="k-pagination__more">…</span> … <button>→</button></div>
       <div class="k-pagefoot__right"><span class="k-display-text">Відображення 1 - 10 з 120 замовлень</span>
         <select class="k-select k-select--plain k-select--per">…</select><span class="k-display-text">на сторінці</span></div>
     </div>
     Готовий компонент: js/components/KeyPagination.js (props page, perPage, total, noun; emits update:page, update:perPage).
     Старе .k-pager теж перемальоване на ці розміри.
   СПЛИВАЮЧЕ:
     .k-overlay (затемнення #141f33 .45) · .k-popover (r4, рамка #e4e7ed, тінь) · .k-dropdown >
     .k-dropdown__item (+.is-disabled, .is-danger) / .k-dropdown__divider / .k-dropdown__title
     .k-tooltip (темна) · .k-filter-pop (розширений фільтр: 1283px, поля 230px у .k-filter-grid,
     секції .k-divider, футер .k-filter-pop__foot) · .k-drawer (права шухляда r12, відступ 16px;
     .k-drawer__head / __title / __body / __foot; ширина style="width:500px") ·
     .k-dialog (r8, по центру; __head/__body/__foot) — обгортка .k-overlay.k-overlay--center.
   ІНШЕ:
     .k-tabs > .k-tab(.is-active)(.is-danger) — вкладки з синім підкресленням
     .k-divider — заголовок секції на лінії (el-divider). Старе .k-section-title = те саме.
     .k-empty («Немає даних»), .k-muted (#aaa 11px), .k-link, .k-tag, .k-badge (лічильник #f56c6c),
     .k-role-badge (--lead #a0176d, --ops #3598dc), .k-online (#34bfa3), .k-alert--warn,
     .k-avatar (40px коло #d3dfe5), .k-delta--up/--down (аналітика), .k-big (16px/500).
   Змінні: var(--k-*) нижче (--k-primary, --k-navy, --k-text…). Темні/кольорові теми лише
   перевизначають змінні — тож пишіть кольори ЧЕРЕЗ змінні, не хексом.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root{
  /* рейка й бренд */
  --k-navy:#264785;        /* рейка, активна сторінка пагінації, шапка розгорнутого рядка */
  --k-navy-2:#3966ab;      /* активний пункт рейки, фон фляйаута */
  --k-navy-3:#4f7dc4;      /* активне посилання у фляйауті, рамка шапки сповіщень */
  --k-navy-line:#6688cc;   /* рамка кнопки «Інструкції» */
  --k-navy-icon:#ffffff;   /* іконки рейки (у KeyCRM білі) */
  --k-role:#7a8b99;
  /* дії */
  --k-primary:#00a6f2; --k-cyan:#00a6f2; --k-cyan-2:#66caf7; --k-cyan-soft:#e6f7ff;
  --k-primary-hover:#33b8f5;
  /* поверхні */
  --k-bg:#f0f3f5; --k-gap:#f0f3f5; --k-card:#ffffff;
  --k-input:#e6f7ff; --k-input-border:#e6f7ff; --k-search-bg:#f5f8fb; --k-search-border:#d3dfe5;
  --k-append-bg:#bde8ff; --k-append:#4c7e99;
  --k-disabled-bg:#d7e8f0; --k-disabled:#c0c4cc;
  --k-selected:#e6f7ff;   /* виділений рядок */
  /* рамки */
  --k-border:#e3e6eb; --k-border-2:#d5d8dc; --k-border-table:#ebeef5; --k-border-check:#dcdfe6;
  --k-border-pop:#e4e7ed; --k-border-soft:#dee5ed;
  /* текст */
  --k-text:#16171a; --k-text-title:#434349; --k-text-2:#575962; --k-text-3:#606266;
  --k-text-4:#51565a; --k-text-5:#737b80; --k-muted:#909399; --k-muted-2:#aaaaaa;
  --k-placeholder:#979da3; --k-num:#11151f;
  /* семантика */
  --k-danger:#f56c6c; --k-danger-2:#f4516c; --k-neg:#e03031; --k-cancel:#cc5252;
  --k-ok:#468c3f; --k-ok-bg:#baf5b5; --k-linked:#28a745; --k-online:#34bfa3;
  --k-warn:#ffc107; --k-warn-bg:#fef9eb; --k-warn-line:#ffb518; --k-pay:#ffe4bb;
  --k-overlay:rgba(20,31,51,.45); --k-tooltip:#141f33;
  /* форма */
  --k-radius:4px; --k-radius-card:8px; --k-radius-drawer:12px;
  --k-h:32px; --k-h-sm:26px; --k-h-lg:36px;
  --k-shadow:0 2px 2px 0 rgba(0,0,0,.08);
  --k-shadow-portlet:0 1px 20px 1px rgba(69,65,78,.2);
  --k-shadow-pop:0 2px 12px 0 rgba(0,0,0,.1);
  --k-shadow-fly:10px 0 20px 0 rgba(82,63,105,.3);
  --k-shadow-sticky:5px 5px 10px 0 rgba(82,63,105,.2);
  --k-shadow-drawer:0 16px 48px 16px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.12), 0 8px 16px -8px rgba(0,0,0,.16);
  --k-shadow-dialog:0 12px 32px 4px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.08);
  --k-shadow-analytics:0 1px 4px rgba(100,116,139,.1);
  --k-font:Helvetica, Arial, sans-serif;
  --k-font-analytics:'Inter', Helvetica, Arial, sans-serif;
  /* групи статусів (statuses.md) */
  --k-st-new-bg:#c4f5ed; --k-st-new:#3f8c7f;
  --k-st-approval-bg:#f5ebba; --k-st-approval:#998b45;
  --k-st-production-bg:#ffd8a8; --k-st-production:#a67c53;
  --k-st-delivery-bg:#e3e0ff; --k-st-delivery:#7a74b2;
  --k-st-done-bg:#baf5b5; --k-st-done:#468c3f;
  --k-st-cancelled-bg:#ffd3cc; --k-st-cancelled:#cc5252;
}
/* Додаткові теми (у KeyCRM одна світла; наші лишаються на вибір у меню профілю).
   Типова — «classic» = KeyCRM. */
html[data-key-theme="dark"]{
  --k-bg:#14171c; --k-gap:#14171c; --k-card:#1c2027; --k-border:#2c323b; --k-border-2:#2c323b; --k-border-table:#2c323b;
  --k-border-check:#3a414c; --k-border-pop:#2c323b; --k-search-bg:#232933; --k-search-border:#2c323b;
  --k-text:#e8eaee; --k-text-title:#e8eaee; --k-text-2:#c3c7cf; --k-text-3:#c3c7cf; --k-text-4:#aab0ba; --k-num:#e8eaee;
  --k-muted:#8a919c; --k-input:#232933; --k-input-border:#232933; --k-cyan-soft:#1d3346; --k-selected:#1d3346;
  --k-navy:#0f1a33; --k-navy-2:#24407a; --k-navy-3:#2f5296;
}
html[data-key-theme="emerald"]{ --k-navy:#0b3a30; --k-navy-2:#17654f; --k-navy-3:#1f7f64; --k-primary:#12b089; --k-cyan:#12b089; --k-cyan-2:#5fd3b5; --k-cyan-soft:#dcf7ee; --k-input:#e6faf3; --k-input-border:#e6faf3; --k-selected:#dcf7ee; }
html[data-key-theme="violet"]{ --k-navy:#2b1f5c; --k-navy-2:#4a37a0; --k-navy-3:#5d48bd; --k-primary:#7a5af8; --k-cyan:#7a5af8; --k-cyan-2:#a48cfb; --k-cyan-soft:#efeaff; --k-input:#f3f0ff; --k-input-border:#f3f0ff; --k-selected:#efeaff; }
html[data-key-theme="sunset"]{ --k-navy:#5a2318; --k-navy-2:#a3432a; --k-navy-3:#bd5539; --k-primary:#ff5c28; --k-cyan:#ff5c28; --k-cyan-2:#ff8f6b; --k-cyan-soft:#ffece5; --k-input:#fff3ee; --k-input-border:#fff3ee; --k-selected:#ffece5; }

/* ═══ ШАПКА СТОРІНКИ ═══════════════════════════════════════════════════════════════════ */
.k-page{font-family:var(--k-font); color:var(--k-text-2); font-size:13px; line-height:1.5}
/* Шапка «липне» до верху .view (вона і є прокручуваним контейнером) і на прокрутці отримує
   тінь — у KeyCRM статус-бар заїжджає ПІД неї. Ліві/праві мінуси — щоб фон шапки накривав
   увесь рядок, а не лише вміст між відступами .view. */
.k-head, .k-subheader{
  display:flex; align-items:center; flex-wrap:wrap; gap:0; min-height:64px;
  padding:16px 20px; margin:0 -20px; background:var(--k-bg);
  position:sticky; top:0; z-index:102;
}
.k-head.is-stuck, .k-subheader.is-stuck{box-shadow:var(--k-shadow-sticky)}
.k-head > *{margin-right:13px}
.k-head > :last-child{margin-right:0}
.k-head-sep{color:var(--k-muted); margin-right:13px}
.k-refresh{
  width:32px; height:32px; padding:0; border:1px solid var(--k-primary); border-radius:var(--k-radius);
  background:var(--k-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none; margin-right:19.5px !important;
}
.k-refresh:hover{background:var(--k-primary-hover); border-color:var(--k-primary-hover)}
.k-refresh svg{width:18px; height:18px}
.k-title{font:600 15.6px/32px var(--k-font); color:var(--k-text-title); margin:0 24px 0 0 !important; white-space:nowrap}
.k-search{position:relative; width:422px; max-width:100%; height:32px; margin:0 13px 0 0; flex:none}
.k-search input{
  width:100%; height:32px; border:1px solid var(--k-search-border); border-radius:var(--k-radius);
  background:var(--k-search-bg); padding:5px 55px 5px 30px; font:400 13px/30px var(--k-font); color:var(--k-text-3);
  outline:none; box-sizing:border-box;
}
.k-search input::placeholder{color:var(--k-placeholder)}
.k-search input:focus{border-color:var(--k-primary)}
.k-search > svg, .k-search__icon{position:absolute; left:6px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:#a8aaac; display:flex; pointer-events:none}
.k-search__icon svg{width:18px; height:18px}
.k-search__filter{
  position:absolute; right:8px; top:1px; height:30px; width:27px; border:0; border-left:1px solid var(--k-search-border);
  background:transparent; color:var(--k-text-4); display:flex; align-items:center; justify-content:flex-end; padding:0; cursor:pointer;
}
.k-search__filter svg{width:18px; height:18px}
.k-search__filter.is-active, .k-search__filter:hover{color:var(--k-primary)}
.k-spacer{flex:1; margin-right:0 !important}
.k-content{padding:0 0 20px}

/* «Обрати стовпчики»: язичок, що стирчить з правого краю вікна; на наведенні виїжджає текст. */
.k-colchooser{
  position:fixed; right:0; top:120px; z-index:101; height:32px; display:flex; align-items:center;
  background:var(--k-card); border-radius:4px 0 0 4px; box-shadow:var(--k-shadow); cursor:pointer;
  transform:translateX(calc(100% - 32px)); transition:transform .2s ease; color:var(--k-text-2);
}
.k-colchooser:hover{transform:none}
.k-colchooser__icon{width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex:none}
.k-colchooser__icon svg{width:16px; height:16px}
.k-colchooser__text{white-space:nowrap; font:400 13px var(--k-font); margin-right:20px}

/* ═══ КНОПКИ ═══════════════════════════════════════════════════════════════════════════ */
.k-btn{
  height:var(--k-h); padding:0 15px; border:1px solid var(--k-primary); border-radius:var(--k-radius);
  background:var(--k-primary); color:#fff; font:400 12px/1 var(--k-font); display:inline-flex; align-items:center;
  justify-content:center; gap:6px; cursor:pointer; white-space:nowrap; box-sizing:border-box; flex:none;
  transition:background .1s, border-color .1s, color .1s;
}
.k-btn:hover{background:var(--k-primary-hover); border-color:var(--k-primary-hover); filter:none}
.k-btn:disabled, .k-btn.is-disabled{opacity:.5; cursor:not-allowed}
.k-btn svg{width:14px; height:14px}
.k-btn--default, .k-btn-ghost{
  height:var(--k-h); padding:0 15px; border:1px solid var(--k-border); border-radius:var(--k-radius);
  background:var(--k-card); color:var(--k-text-2); font:400 12px/1 var(--k-font); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; box-sizing:border-box;
}
.k-btn--default:hover, .k-btn-ghost:hover{color:var(--k-primary); border-color:var(--k-tint-2, #b3e4fb); background:var(--k-cyan-soft)}
.k-btn--text{background:transparent; border-color:transparent; color:var(--k-primary); padding:0 4px}
.k-btn--text:hover{background:transparent; border-color:transparent; color:var(--k-primary-hover)}
.k-btn--danger, .k-btn-danger{background:var(--k-danger-2); border-color:var(--k-danger-2); color:#fff}
.k-btn--danger:hover, .k-btn-danger:hover{background:#f6738a; border-color:#f6738a}
.k-btn--sm{height:var(--k-h-sm); padding:0 10px; font-size:12px}
.k-btn--lg{height:var(--k-h-lg); padding:0 18px; font-size:13px}
.k-btn--icon{width:var(--k-h); padding:0}
.k-btn--sm.k-btn--icon{width:var(--k-h-sm)}
.k-btn--outline-white{background:transparent; border:1px solid #fff; color:#fff}
.k-btn--outline-white:hover{background:rgba(255,255,255,.12); border-color:#fff}
.k-btn-group, .k-actions{display:inline-flex; vertical-align:middle}
.k-btn-group > *, .k-actions > button{border-radius:0 !important; margin-left:-1px}
.k-btn-group > :first-child, .k-actions > button:first-child{border-radius:var(--k-radius) 0 0 var(--k-radius) !important; margin-left:0}
.k-btn-group > :last-child, .k-actions > button:last-child{border-radius:0 var(--k-radius) var(--k-radius) 0 !important}
.k-btn-group > :only-child{border-radius:var(--k-radius) !important}
.k-actions > button{
  width:26px; height:26px; padding:0; border:1px solid var(--k-border); background:var(--k-card); color:var(--k-text-2);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.k-actions > button:hover{color:var(--k-primary); background:var(--k-cyan-soft); position:relative; z-index:1}
.k-actions svg{width:15px; height:15px}
.k-btn-split{display:inline-flex}
.k-btn-split > .k-btn:first-child, .k-btn-split > .k-btn--default:first-child{border-radius:var(--k-radius) 0 0 var(--k-radius)}
.k-btn-split > .k-btn:last-child, .k-btn-split > .k-btn--default:last-child{border-radius:0 var(--k-radius) var(--k-radius) 0; border-left-color:rgba(255,255,255,.5); padding:0 8px}
.k-iconbtn{
  height:var(--k-h); min-width:var(--k-h); padding:0 8px; border:1px solid var(--k-border); border-radius:var(--k-radius);
  background:var(--k-card); color:var(--k-text-2); display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; position:relative; font:400 12px var(--k-font); box-sizing:border-box;
}
.k-iconbtn:hover, .k-iconbtn.is-active{color:var(--k-primary); border-color:var(--k-tint-2, #b3e4fb)}
.k-iconbtn svg{width:16px; height:16px}
.k-iconbtn .k-badge{position:absolute; top:-6px; right:-6px}

/* ═══ ПОЛЯ ═════════════════════════════════════════════════════════════════════════════ */
.k-input, .k-select, .k-textarea{
  height:var(--k-h); width:100%; box-sizing:border-box; border:1px solid var(--k-input-border); border-radius:var(--k-radius);
  background:var(--k-input); padding:0 12px; font:400 13px var(--k-font); color:var(--k-text-3); outline:none;
  transition:border-color .15s;
}
.k-textarea{height:auto; min-height:64px; padding:6px 12px; line-height:1.5; resize:vertical}
.k-input::placeholder, .k-textarea::placeholder{color:var(--k-disabled)}
.k-input:focus, .k-select:focus, .k-textarea:focus{border-color:var(--k-primary)}
.k-input:disabled, .k-select:disabled, .k-textarea:disabled{background:var(--k-disabled-bg); border-color:var(--k-disabled-bg); color:var(--k-disabled); cursor:not-allowed}
.k-input--white{background:var(--k-card); border-color:var(--k-search-border)}
.k-select{
  appearance:none; -webkit-appearance:none; padding-right:30px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737b80' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:12px;
}
.k-select--plain{background-color:transparent; border-color:var(--k-border-2); padding-left:10px}
.k-select--per{width:60px; padding-right:22px; background-position:right 8px center}
.k-input-group{display:flex; width:100%}
.k-input-group > .k-input{border-radius:var(--k-radius) 0 0 var(--k-radius); flex:1; min-width:0}
.k-input-append{
  display:inline-flex; align-items:center; justify-content:center; min-width:32px; padding:0 10px; box-sizing:border-box;
  background:var(--k-append-bg); color:var(--k-append); border-radius:0 var(--k-radius) var(--k-radius) 0; border:0; cursor:pointer; font:400 13px var(--k-font);
}
.k-input-append svg{width:16px; height:16px}
.k-form-item{display:flex; flex-direction:column; gap:4px; min-width:0}
.k-label{font:400 10.4px/1.4 var(--k-font); color:var(--k-text-4)}
.k-label--lg{font-size:12px}
.k-checkbox, .k-radio{display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:400 13px var(--k-font); color:var(--k-text-3); user-select:none; vertical-align:middle}
.k-checkbox input, .k-radio input{position:absolute; opacity:0; width:0; height:0}
.k-checkbox > span, .k-radio > span{
  width:14px; height:14px; box-sizing:border-box; border:1px solid var(--k-border-check); border-radius:2px; background:var(--k-card);
  position:relative; flex:none; transition:background .15s, border-color .15s;
}
.k-radio > span{border-radius:50%}
.k-checkbox:hover > span, .k-radio:hover > span{border-color:var(--k-primary)}
.k-checkbox input:checked + span, .k-checkbox input:indeterminate + span, .k-radio input:checked + span{background:var(--k-primary); border-color:var(--k-primary)}
.k-checkbox input:checked + span::after{content:''; position:absolute; left:4px; top:1px; width:3px; height:7px; border:solid #fff; border-width:0 1px 1px 0; transform:rotate(45deg)}
.k-checkbox input:indeterminate + span::after{content:''; position:absolute; left:2px; right:2px; top:5px; height:2px; background:#fff}
.k-radio input:checked + span::after{content:''; position:absolute; left:3px; top:3px; width:6px; height:6px; border-radius:50%; background:#fff}
.k-checkbox input:disabled + span{background:#edf2fc; border-color:var(--k-border-check); cursor:not-allowed}
.k-switch{display:inline-flex; align-items:center; cursor:pointer; vertical-align:middle; position:relative}
.k-switch input{position:absolute; opacity:0; width:0; height:0}
.k-switch > span{width:40px; height:20px; border-radius:10px; background:var(--k-border-check); position:relative; transition:background .2s; flex:none}
.k-switch > span::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .2s}
.k-switch input:checked + span{background:var(--k-primary)}
.k-switch input:checked + span::after{left:22px}
.k-switch input:disabled + span{opacity:.6; cursor:not-allowed}

/* ═══ СТАТУСИ ══════════════════════════════════════════════════════════════════════════ */
.k-status{
  display:inline-flex; align-items:center; gap:6px; box-sizing:border-box; height:25px; padding:5px 6px 4px;
  border:1px solid transparent; border-radius:var(--k-radius); font:700 11px/14px var(--k-font); text-transform:uppercase;
  white-space:nowrap; cursor:default; vertical-align:middle; max-width:100%; overflow:hidden; text-overflow:ellipsis;
}
.k-status--sm{height:23px; padding:4px 6px 3px; font-size:10px}
.k-status__dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}
.k-status--outline .k-status__dot{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor}
.k-status__count{margin-left:4px}
.k-status__count::before{content:'•'; margin-right:4px}
.k-status--new{color:var(--k-st-new); background:var(--k-st-new-bg); border-color:var(--k-st-new-bg)}
.k-status--agreement{color:var(--k-st-approval); background:var(--k-st-approval-bg); border-color:var(--k-st-approval-bg)}
.k-status--production{color:var(--k-st-production); background:var(--k-st-production-bg); border-color:var(--k-st-production-bg)}
.k-status--delivery{color:var(--k-st-delivery); background:var(--k-st-delivery-bg); border-color:var(--k-st-delivery-bg)}
.k-status--completed{color:var(--k-st-done); background:var(--k-st-done-bg); border-color:var(--k-st-done-bg)}
.k-status--canceled{color:var(--k-st-cancelled); background:var(--k-st-cancelled-bg); border-color:var(--k-st-cancelled-bg)}
.k-status--outline{background:transparent !important}
/* Старі назви (сторінки до ребілду) */
.k-chip{display:inline-flex; align-items:center; gap:6px; height:25px; padding:5px 6px 4px; box-sizing:border-box; border-radius:var(--k-radius); font:700 11px/14px var(--k-font); text-transform:uppercase; border:1px solid transparent; cursor:pointer; white-space:nowrap}
.k-chip .k-dot, .k-dot{width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block}
.k-st-new{background:var(--k-st-new-bg); color:var(--k-st-new)}
.k-st-approval{background:var(--k-st-approval-bg); color:var(--k-st-approval)}
.k-st-production{background:var(--k-st-production-bg); color:var(--k-st-production)}
.k-st-delivery{background:var(--k-st-delivery-bg); color:var(--k-st-delivery)}
.k-st-done{background:transparent; color:var(--k-st-done); border-color:var(--k-st-done-bg)}
.k-st-done.is-active,.k-pill.k-st-done{background:var(--k-st-done-bg); border-color:var(--k-st-done-bg)}
.k-st-cancelled{background:transparent; color:var(--k-st-cancelled); border-color:var(--k-st-cancelled-bg)}
.k-st-cancelled.is-active,.k-pill.k-st-cancelled{background:var(--k-st-cancelled-bg)}
.k-pill{display:inline-flex; align-items:center; min-height:23px; padding:4px 6px 3px; box-sizing:border-box; border-radius:var(--k-radius); font:700 10px/14px var(--k-font); text-transform:uppercase; max-width:190px}

/* ═══ ТАБЛИЦІ ══════════════════════════════════════════════════════════════════════════ */
/* «Картки-рядки»: кожен рядок — окрема біла картка 46px, між рядками 12px фону. */
.k-table{width:100%; border-collapse:separate; border-spacing:0 12px; margin-top:-12px; font:400 11.7px/15.6px var(--k-font); color:var(--k-text-2)}
.k-table th{font:400 11.7px/13px var(--k-font); color:var(--k-text-2); text-align:left; padding:0 8px; height:24px; white-space:nowrap; vertical-align:middle}
.k-table th.is-sortable{cursor:pointer; user-select:none}
.k-table th.is-sortable:hover{color:var(--k-primary)}
.k-table th .k-sort{display:inline-block; margin-left:4px; font-size:9px; color:var(--k-disabled)}
.k-table th .k-sort.is-on{color:var(--k-primary)}
.k-table td{background:var(--k-card); height:46px; padding:9px 8px; box-sizing:border-box; vertical-align:middle; transition:box-shadow .15s}
.k-table td:first-child{border-radius:4px 0 0 4px}
.k-table td:last-child{border-radius:0 4px 4px 0}
.k-table tbody tr:hover td{box-shadow:0 4px 8px -2px rgba(0,0,0,.1)}
.k-table tr.is-selected td{background:var(--k-selected)}
.k-table tr.is-expanded td{background:var(--k-navy); color:#fff; border-radius:0}
.k-table tr.is-expanded td:first-child{border-radius:4px 0 0 0}
.k-table tr.is-expanded td:last-child{border-radius:0 4px 0 0}
.k-table tr.is-expanded td .k-link{color:#fff}
.k-table tr.k-table__detail td{background:var(--k-card); border:1px solid var(--k-navy); border-top:0; border-radius:0 0 4px 4px; height:auto; padding:16px 20px}
.k-table tr.is-expanded + tr.k-table__detail{transform:translateY(-12px)}
.k-table__expand{width:40px; text-align:center; cursor:pointer; color:var(--k-text-2)}
.k-table__expand svg{width:20px; height:20px; transition:transform .15s}
tr.is-expanded .k-table__expand svg{transform:rotate(90deg)}
.k-table__check{width:40px; text-align:center}
.k-table--clients td{height:58px}
/* Таблиця в порталеті (Element el-table). */
.k-eltable{width:100%; border-collapse:collapse; font:400 12px/1.5 var(--k-font); color:var(--k-text-3); background:var(--k-card)}
.k-eltable th{font:700 12px/23px var(--k-font); color:var(--k-muted); text-align:left; padding:12px 10px; border-bottom:1px solid var(--k-border-table); white-space:nowrap}
.k-eltable td{padding:12px 10px; border-bottom:1px solid var(--k-border-table); vertical-align:middle}
.k-eltable tbody tr:hover td{background:var(--k-dk-fill, #f5f7fa)}
.k-eltable--stripe tbody tr:nth-child(even) td{background:var(--k-dk-fill, #fafafa)}
.k-eltable .k-sub td{background:var(--k-dk-fill, #f5f7fa)}
.k-portlet{background:var(--k-card); border-radius:4px; box-shadow:var(--k-shadow-portlet); margin-bottom:20px}
.k-portlet__head{display:flex; align-items:center; gap:12px; min-height:60px; padding:0 25px; border-bottom:1px solid var(--k-border-table); font:500 15.6px var(--k-font); color:var(--k-text-title)}
.k-portlet__body{padding:20px 25px}
.k-card{background:var(--k-card); border-radius:var(--k-radius-card); box-shadow:var(--k-shadow)}

/* ═══ ПАГІНАЦІЯ ════════════════════════════════════════════════════════════════════════ */
.k-pagefoot{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding-top:2px; min-height:43px}
.k-pagefoot__right{display:flex; align-items:center}
.k-pagination, .k-pager{display:flex; align-items:center; padding:2px 5px; font:500 13px var(--k-font); color:var(--k-dk-text, #303133)}
.k-pagination__btn, .k-pagination__more, .k-pager button{
  min-width:32px; height:32px; box-sizing:border-box; padding:0 4px; margin:0 5px; border:1px solid var(--k-border-2);
  border-radius:var(--k-radius); background:transparent; color:var(--k-num); font:500 13px var(--k-font);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.k-pagination__more{cursor:default; border-color:var(--k-border-2)}
.k-pagination__btn:hover:not(:disabled):not(.is-active), .k-pager button:hover:not(:disabled):not(.is-active){color:var(--k-primary)}
.k-pagination__btn.is-active, .k-pager button.is-active{background:var(--k-navy); border-color:var(--k-navy); color:#fff; cursor:default}
.k-pagination__btn:disabled, .k-pager button:disabled{color:var(--k-disabled); cursor:not-allowed}
.k-pagination__btn svg, .k-pager button svg{width:14px; height:14px}
.k-display-text{font:400 11.7px var(--k-font); color:var(--k-text); margin-right:15px; white-space:nowrap}
.k-pagefoot__right .k-select{margin-right:5px; height:32px; font-size:13px; color:var(--k-text-3)}
.k-pagefoot__right .k-display-text:last-child{margin-right:0}

/* ═══ СПЛИВАЮЧЕ ════════════════════════════════════════════════════════════════════════ */
.k-overlay{position:fixed; inset:0; background:var(--k-overlay); z-index:2000}
.k-overlay--center{display:flex; align-items:flex-start; justify-content:center; padding:15vh 16px 40px; overflow:auto}
.k-popover, .k-dropdown{
  background:var(--k-card); border:1px solid var(--k-border-pop); border-radius:var(--k-radius);
  box-shadow:var(--k-shadow-pop); color:var(--k-text-3); font:400 13px var(--k-font); z-index:2001;
}
.k-popover{padding:12px}
.k-dropdown{padding:10px 0; min-width:150px}
.k-dropdown__item{
  display:flex; align-items:center; gap:8px; width:100%; box-sizing:border-box; padding:0 20px; min-height:36px;
  border:0; background:transparent; color:var(--k-text-3); font:400 14px/36px var(--k-font); text-align:left; cursor:pointer; white-space:nowrap;
}
.k-dropdown__item:hover{background:var(--k-cyan-soft); color:var(--k-primary)}
.k-dropdown__item.is-disabled{color:var(--k-disabled); cursor:not-allowed; background:transparent}
.k-dropdown__item.is-danger{color:var(--k-danger-2)}
.k-dropdown__item svg{width:15px; height:15px}
.k-dropdown__divider{height:1px; background:var(--k-border-table); margin:6px 0}
.k-dropdown__title{padding:4px 20px 6px; font:700 12px var(--k-font); color:var(--k-muted)}
.k-tooltip{background:var(--k-tooltip); color:#fff; border:1px solid var(--k-border-soft); border-radius:4px; padding:6px 12px; font:400 12px/1.2 var(--k-font); z-index:2100; white-space:nowrap; pointer-events:none}
/* Розширений фільтр під пошуком. */
.k-filter-pop{position:absolute; top:calc(100% + 8px); left:0; width:1283px; max-width:calc(100vw - 112px); padding:12px 20px 16px; box-sizing:border-box; z-index:2001}
.k-filter-grid{display:grid; grid-template-columns:repeat(auto-fill, 230px); gap:12px 16px}
.k-filter-pop__foot{display:flex; align-items:center; gap:10px; margin-top:20px}
.k-filter-pop__foot .k-spacer{flex:1}
/* Права шухляда: «плаває» з відступом 16px від країв, r12. */
.k-drawer{
  position:fixed; top:16px; right:16px; bottom:16px; width:500px; max-width:calc(100vw - 32px); z-index:2001;
  background:var(--k-card); border-radius:var(--k-radius-drawer); box-shadow:var(--k-shadow-drawer);
  display:flex; flex-direction:column; overflow:hidden; animation:kDrawerIn .25s ease-out;
}
.k-drawer__head{display:flex; align-items:center; gap:12px; padding:20px 20px 12px}
.k-drawer__title{font:600 16px var(--k-font); color:var(--k-text); margin:0; flex:1}
.k-drawer__close{border:0; background:transparent; cursor:pointer; color:var(--k-muted); width:24px; height:24px; display:flex; align-items:center; justify-content:center; padding:0}
.k-drawer__close:hover{color:var(--k-primary)}
.k-drawer__close svg{width:16px; height:16px}
.k-drawer__body{flex:1; overflow:auto; padding:0 20px 20px}
.k-drawer__foot{display:flex; justify-content:flex-end; gap:10px; padding:12px 20px 20px; border-top:1px solid var(--k-border-table)}
@keyframes kDrawerIn{from{transform:translateX(30px); opacity:0} to{transform:none; opacity:1}}
.k-dialog{background:var(--k-card); border-radius:8px; box-shadow:var(--k-shadow-dialog); width:850px; max-width:100%; display:flex; flex-direction:column}
.k-dialog__head{display:flex; align-items:center; gap:12px; padding:20px 20px 10px; font:600 16px var(--k-font); color:var(--k-text)}
.k-dialog__body{padding:10px 20px 20px; color:var(--k-text-3)}
.k-dialog__foot{display:flex; justify-content:flex-end; gap:10px; padding:10px 20px 20px}

/* ═══ ІНШЕ ═════════════════════════════════════════════════════════════════════════════ */
.k-tabs{display:flex; gap:20px; border-bottom:2px solid var(--k-border-pop); margin-bottom:12px}
.k-tab{position:relative; height:40px; border:0; background:transparent; padding:0; cursor:pointer; font:500 13px/40px var(--k-font); color:var(--k-text-2); white-space:nowrap}
.k-tab:hover{color:var(--k-primary)}
.k-tab.is-active{color:var(--k-primary)}
.k-tab.is-active::after{content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--k-primary)}
.k-tab.is-danger{color:var(--k-danger-2)}
.k-tab.is-danger.is-active::after{background:var(--k-danger-2)}
.k-divider, .k-section-title{display:flex; align-items:center; gap:20px; margin:24px 0 16px; font:500 14px var(--k-font); color:var(--k-text-2)}
.k-divider::before, .k-divider::after, .k-section-title::after{content:''; flex:1; height:1px; background:var(--k-border-pop)}
.k-divider::before{flex:0 0 20px}
.k-divider--left::before{display:none}
.k-empty{text-align:center; padding:40px 0; color:var(--k-muted); font:400 13px var(--k-font)}
.k-muted{color:var(--k-muted-2); font-size:11px}
.k-big{font:500 16px var(--k-font)}
.k-link{color:var(--k-primary); cursor:pointer; text-decoration:none}
.k-link:hover{text-decoration:underline}
.k-tag{display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 8px; border:1px solid var(--k-primary); color:var(--k-primary); border-radius:var(--k-radius); font-size:12px; background:var(--k-card)}
.k-badge{min-width:18px; height:18px; padding:0 6px; box-sizing:border-box; border-radius:9px; background:var(--k-danger); color:#fff; font:700 11px/18px var(--k-font); display:inline-flex; align-items:center; justify-content:center; border:1px solid #fff}
.k-role, .k-role-badge{display:inline-flex; align-items:center; height:16px; padding:0 7px; border-radius:4px; background:var(--k-role); color:#fff; font:700 9.1px var(--k-font)}
.k-role-badge--lead{background:#a0176d}
.k-role-badge--ops{background:#3598dc}
.k-online{display:inline-flex; align-items:center; height:20px; padding:3px 6px; box-sizing:border-box; border-radius:4px; background:var(--k-online); color:#fff; font:400 10.4px var(--k-font)}
.k-alert--warn{background:var(--k-warn-bg); border-left:5px solid var(--k-warn-line); padding:12px 16px; border-radius:4px; color:var(--k-text-2)}
.k-avatar{width:40px; height:40px; border-radius:50%; background:var(--k-search-border); color:#fff; display:inline-flex; align-items:center; justify-content:center; font:500 14px var(--k-font); flex:none; overflow:hidden}
.k-avatar img{width:100%; height:100%; object-fit:cover}
.k-delta--up, .k-delta--down{display:inline-flex; align-items:center; gap:4px; padding:2px 6px; border-radius:4px; font-weight:500}
.k-delta--up{background:#ddfada; color:var(--k-ok)}
.k-delta--down{background:#fadada; color:var(--k-neg)}
@media (max-width:720px){ .k-search{width:100%; margin-right:0} .k-head{margin:0 -12px; padding:12px} .k-filter-pop{width:calc(100vw - 24px)} }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   СТАРІ ТОКЕНИ → KEYCRM. Сторінки, які ще не переписані на .k-*, малюються змінними
   styles.css (--paper, --ink, --visa…). Перекидаємо їх на --k-*, і такі сторінки беруть
   кольори, шрифт і радіуси KeyCRM самі, без правки кожної.
   :root:root:root — щоб перебити :root[data-theme="dark"/"night"] зі styles.css незалежно
   від порядку. !important на --visa* — бо applyAccent() (js/store.js) пише їх ІНЛАЙН-стилем
   на <html>, а інлайн без !important перемагає будь-яке правило з файлу.
   ═══════════════════════════════════════════════════════════════════════════════════════ */
:root:root:root{
  --paper:var(--k-card);
  --paper-2:var(--k-card);
  --sky:var(--k-bg);
  --sky-soft:var(--k-bg);
  --sky-deep:var(--k-gap);
  --sky-line:var(--k-border);
  --ink:var(--k-text);
  --ink-soft:var(--k-text-2);
  --slate:var(--k-text-2);
  --slate-2:var(--k-muted);
  --visa:var(--k-cyan) !important;
  --visa-ink:color-mix(in srgb, var(--k-cyan) 72%, #000) !important;
  --visa-soft:var(--k-cyan-soft) !important;
  --visa-on:#fff !important;
  --stamp:var(--k-danger);
  --stamp-soft:color-mix(in srgb, var(--k-danger) 12%, var(--k-card));
  --good:var(--k-ok);
  --good-soft:color-mix(in srgb, var(--k-ok) 14%, var(--k-card));
  --amber:#c98a1e;
  --amber-soft:color-mix(in srgb, #e6a23c 16%, var(--k-card));
  --radius-lg:8px; --radius-md:6px; --radius-sm:4px;
  --shadow-card:var(--k-shadow);
  --shadow-pop:0 8px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  --font-display:var(--k-font);
  --font-body:var(--k-font);
  --slogan:var(--k-muted);
  /* Ширина рейки — для сторінок, яким треба знати, скільки місця забирає меню. */
  --ks-side-w:72px;
}
html[data-key-theme="dark"]{
  --amber:#e6a23c;
  --shadow-pop:0 10px 30px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  color-scheme:dark;
}
body{font-family:var(--k-font); font-size:13px; line-height:1.5; color:var(--k-text-2); background:var(--k-bg)}
h1,h2,h3,h4{letter-spacing:0}

/* ═══ КАРКАС KEYCRM: рейка 60px з відступом 12px, сторінка #f0f3f5 ═════════════════════
   Виміри — docs/keycrm-live/dumps/sidebar.txt (вікно 1688×729): рейка x=12 y=12 60×705,
   лого 60×60, пункти 40×40 у рядках 46px, перший пункт y=95; дзвіночок/допомога/аватар
   притиснуті донизу; панель-фляйаут x=72 260px на всю висоту. */
.shell{background:var(--k-bg)}
.main{background:transparent}
.view{padding:0 20px 20px}
/* Прокрутка сторінки — системна (на macOS накладна, 0px), як у KeyCRM, де гортається сам
   документ. Наш styles.css малює ::-webkit-scrollbar 10px, і через нього шапка й таблиці були
   на 10px вужчі. Стандартна властивість scrollbar-color вимикає ті псевдоелементи. */
.view{scrollbar-color:rgba(0,0,0,.3) transparent}
/* Сторінки без KeyCRM-шапки (.k-head) мають власний верхній відступ — інакше прилипнуть до краю. */
.view:not(:has(.k-head, .k-subheader)){padding-top:20px}

.rail.ks-side{
  width:60px; flex:none; margin:12px 0 12px 12px; padding:10px 0 10px; box-sizing:border-box;
  background:var(--k-navy); border:0; border-radius:8px; box-shadow:none;
  display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; gap:0;
  position:relative; z-index:1500; overflow:visible; font-family:var(--k-font);
}
.ks-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.ks-list--bottom{padding-bottom:0}
.ks-li{position:relative; height:46px; padding:3px 10px; box-sizing:border-box; display:flex}
.ks-li--logo{height:60px; padding:0; margin:-10px 0 20px}
.ks-li--profile{margin-top:16px}
/* Коротка риска між «?» і аватаром. */
.ks-li--profile::before{content:''; position:absolute; top:-9px; left:50%; width:16px; height:2px; margin-left:-8px; border-radius:1px; background:rgba(255,255,255,.35)}
.ks-logo{width:60px; height:60px; border:0; padding:10px; background:transparent; cursor:pointer; border-radius:12px; display:block; position:relative; box-sizing:border-box}
/* Як у KeyCRM: біле коло ~40px усередині рейки з відступом 10px, а не на всю ширину (власник 09.11: «тут исправь»). */
.ks-logo-mark{width:40px; height:40px; border-radius:10px; display:block; position:relative; overflow:hidden}
.ks-logo-mark svg.dd-mark{width:40px; height:40px; display:block}
.ks-logo-mark > :not(svg.dd-mark){position:absolute}
.ks-item{
  width:40px; height:40px; border-radius:5px; border:0; padding:0; background:transparent; cursor:pointer;
  color:#fff; display:flex; align-items:center; justify-content:center; position:relative; opacity:.85;
  transition:background .2s ease, opacity .2s ease;
}
.ks-item:hover, .ks-item.active{background:var(--k-navy-2); opacity:1}
.ks-item:focus-visible{outline:2px solid var(--k-cyan-2); outline-offset:2px}
.ks-ic{display:flex}
.ks-ic svg{width:20px; height:20px}
/* Лічильник непрочитаних — el-badge KeyCRM (#f56c6c) у правому верхньому куті. */
.ks-item .ks-badge{position:absolute; top:-4px; right:-6px; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:9px; background:var(--k-danger); color:#fff; border:1px solid #fff; font:400 11px/16px var(--k-font); text-align:center}
.ks-uavatar{width:40px; height:40px; border-radius:50%; border:0; padding:0; background:var(--k-search-border); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none}
.ks-uavatar img{width:100%; height:100%; object-fit:cover}
.ks-uavatar svg{width:22px; height:22px; margin-top:4px}
.ks-uavatar--static{cursor:default; margin-right:19.5px}
/* Підказка до пункту без панелі («Завдання»): темна, як tooltip KeyCRM. */
.ks-tip{position:absolute; left:calc(100% + 4px); top:50%; transform:translateY(-50%); background:var(--k-tooltip); color:#fff; border:1px solid var(--k-border-soft); border-radius:4px; padding:6px 12px; font:400 12px/1.2 var(--k-font); white-space:nowrap; pointer-events:none; z-index:5}

/* Затемнення сторінки під панеллю рейки. Нижче рейки (z 1500), тож рейка лишається яскравою. */
.ks-dim{position:fixed; inset:0; background:rgba(20,31,51,.5); z-index:1490; animation:ksDim .2s ease}
@keyframes ksDim{from{opacity:0} to{opacity:1}}

/* Панель (фляйаут) праворуч від рейки. */
.ks-panel{
  position:fixed; left:var(--ks-side-w); top:12px; bottom:12px; width:260px; z-index:1501; box-sizing:border-box;
  background:var(--k-navy-2); border-radius:8px; box-shadow:var(--k-shadow-fly); color:#fff;
  display:flex; flex-direction:column; font:400 13px/1.5 var(--k-font); overflow:hidden;
  animation:ksPanel .2s ease;
}
@keyframes ksPanel{from{opacity:0; transform:translateX(-8px)} to{opacity:1; transform:none}}
.ks-panel-list{list-style:none; margin:0; padding:5px 16px; flex:1; min-height:0; overflow-y:auto}
.ks-panel-head{display:flex; align-items:center; height:56px; padding:4px 0; margin:0 0 12px; box-sizing:border-box; font:700 16px/48px var(--k-font); color:#fff}
.ks-panel-ic{width:40px; height:40px; margin:0 10px 0 2px; display:flex; align-items:center; justify-content:center; flex:none}
.ks-panel-ic svg{width:20px; height:20px}
.ks-panel-list > li:not(.ks-panel-head):not(.ks-panel-sec){padding:4px 0; height:48px; box-sizing:border-box}
.ks-panel-link{
  display:block; position:relative; height:40px; padding:0 12px; border-radius:8px; color:#fff; text-decoration:none;
  font:500 13px/40px var(--k-font); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .15s;
}
.ks-panel-link:hover{background:rgba(79,125,196,.6); color:#fff}
.ks-panel-link.is-active{background:var(--k-navy-3); overflow:visible}
.ks-panel-link.is-active::after{content:''; position:absolute; right:-5px; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:5px; background:#fff}
.ks-panel-sec{display:flex; align-items:center; gap:10px; margin:14px 0 8px; font:700 10px/1.2 var(--k-font); letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.75)}
.ks-panel-sec::after{content:''; flex:1; height:1px; background:rgba(255,255,255,.3)}
.ks-panel-bottom{padding:16px; flex:none}
/* У KeyCRM вміст фляйаута займає 250 з 260px (праві 10px — місце під смугу прокрутки
   .scrollable): посилання 218px, а не 228. */
.ks-panel:not(.ks-panel--profile):not(.ks-panel--notif) > :is(.ks-panel-list, .ks-panel-bottom, .ks-help-body){margin-right:10px}
.ks-panel-instr{
  display:flex; align-items:center; justify-content:center; height:39px; box-sizing:border-box; padding:9px 15px;
  border:1px solid var(--k-navy-line); border-radius:8px; color:#fff; font:400 13px/19px var(--k-font); cursor:pointer; text-decoration:none;
}
.ks-panel-instr:hover{background:rgba(255,255,255,.08)}
.ks-panel-instr span{display:flex; margin-right:5px}
.ks-panel-instr svg{width:16px; height:16px}

/* Допомога */
.ks-panel--help .ks-panel-list{flex:none; overflow:visible}
.ks-help-body{padding:0 16px 16px; display:flex; flex-direction:column; gap:8px; margin-top:-12px}
.ks-help-body .ks-panel-sec{margin:12px 0 4px}
.ks-help-btn{height:34px; border:0; border-radius:4px; color:#fff; font:400 13px var(--k-font); display:flex; align-items:center; justify-content:center; gap:6px; cursor:pointer}
.ks-help-btn span{display:flex}
.ks-help-btn svg{width:15px; height:15px}
.ks-help-btn:hover{filter:brightness(1.08)}
.ks-help-btn--chat{background:#3060a8}
.ks-help-btn--tg{background:#2aabee}
.ks-help-btn--viber{background:#7360f2}
.ks-help-btn--ig{background:#e1306c}
.ks-help-btn--fb{background:#3b82f6}
.ks-help-link{display:flex; align-items:center; gap:6px; color:#fff; font:500 13px var(--k-font); cursor:pointer; padding:6px 0; text-decoration:none}
.ks-help-link:hover{text-decoration:underline}
.ks-help-link span{display:flex}
.ks-help-link svg{width:14px; height:14px}
.ks-help-link .ks-kbd{background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.3); color:#fff}
.ks-help-ver{font-size:11px; opacity:.7; font-weight:400}

/* Меню профілю: 300px, низом до низу рейки. */
.ks-panel--profile{top:auto; width:300px; max-height:calc(100vh - 24px)}
.ks-prof-head{padding:16px; font:400 13px/28px var(--k-font)}
.ks-prof-promo{background:var(--k-primary); border-radius:8px; padding:16px 22px 16px 16px; margin:0 0 16px; font:400 13px/24px var(--k-font); color:#fff}
.ks-prof-promo-btn{display:flex; width:fit-content; align-items:center; height:32px; margin-top:13px; padding:0 15px; border:1px solid #fff; border-radius:4px; background:transparent; color:#fff; font:400 12px var(--k-font); cursor:pointer}
.ks-prof-promo-btn:hover{background:rgba(255,255,255,.12)}
.ks-prof-role{display:inline-block; height:20px; box-sizing:border-box; padding:3px 6px; border-radius:4px; background:#fff; color:#7a8b99; font:500 10.4px/14px var(--k-font); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:top}
.ks-prof-who{display:flex; align-items:center; margin-top:16px}
.ks-prof-name{margin:0; font:500 19.5px/23.4px var(--k-font); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ks-prof-mail{font:400 13px/1.5 var(--k-font); color:#c3d1e6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ks-prof-body{background:rgba(206,225,255,.2); padding:20px; display:flex; flex-direction:column; flex:1; min-height:0; overflow:auto}
.ks-prof-row{display:flex; align-items:center; justify-content:space-between; padding:6.5px 0; font:500 13px var(--k-font); color:#fff}
.ks-prof-online{display:inline-flex; align-items:center; height:20px; box-sizing:border-box; padding:3px 6px; border-radius:4px; background:var(--k-online); color:#fff; font:400 10.4px/14px var(--k-font)}
.ks-prof-online.off{background:#7a8b99}
.ks-prof-switch input:disabled + span{opacity:1; cursor:default}
.ks-prof-switch > span{background:var(--k-cyan-soft)}
.ks-prof-switch input:checked + span{background:var(--k-primary)}
.ks-prof-link{display:block; padding:6.5px 0; color:#fff; font:500 13px/19.5px var(--k-font); cursor:pointer; text-decoration:none}
.ks-prof-link:hover{text-decoration:underline}
.ks-appear-inline{padding:6px 0 4px}
.ks-appear-inline .ks-theme, .ks-appear-inline .ks-bg{font-size:11px}
.ks-prof-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:40px}
.ks-logout{display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 15px; border:1px solid #7297d0; border-radius:4px; background:transparent; color:#fff; font:400 13px var(--k-font); cursor:pointer}
.ks-logout:hover{background:rgba(255,255,255,.08)}
.ks-logout span{display:flex}
.ks-logout svg{width:16px; height:16px}
.ks-lang{position:relative; display:flex; align-items:center; gap:10px; cursor:pointer; font:400 14px var(--k-font); color:#fff; user-select:none}
.ks-flag{display:inline-flex; width:24px; height:16px; border-radius:2px; overflow:hidden; flex:none}
.ks-flag svg{width:24px; height:16px; display:block}
.ks-lang-caret{display:flex}
.ks-lang-caret svg{width:14px; height:14px}
.ks-lang-menu{position:absolute; right:0; bottom:calc(100% + 8px); min-width:110px}
.ks-lang-menu .k-dropdown__item{font-size:13px}

/* Сповіщення: 450px на всю висоту. */
.ks-panel--notif{width:450px}
.ks-notif-head{display:flex; align-items:center; height:76px; box-sizing:border-box; padding:20px 16px 15px; border-bottom:1px solid var(--k-navy-3); flex:none}
.ks-notif-head .ks-panel-ic{margin:0 10px 0 0}
.ks-notif-title{margin:0; font:700 16px var(--k-font); color:#fff}
.ks-notif-count{margin-left:6px; font:400 12px var(--k-font); color:#c4d1e6}
.ks-notif-cog{position:relative}
.ks-notif-cog-btn{width:28px; height:28px; border:0; background:transparent; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0}
.ks-notif-cog-btn svg{width:20px; height:20px}
.ks-notif-menu{position:absolute; right:0; top:calc(100% + 6px); min-width:220px}
.ks-notif-menu .k-dropdown__item{font-size:13px}
.ks-notif-body{padding:10px 16px 16px; flex:1; min-height:0; display:flex; flex-direction:column}
.ks-notif-tabs{display:flex; gap:20px; height:39px; border-bottom:1px solid rgba(255,255,255,.25); flex:none; margin-bottom:8px}
.ks-notif-tab{position:relative; border:0; background:transparent; padding:0; color:#fff; font:500 13px/39px var(--k-font); cursor:pointer; opacity:.85}
.ks-notif-tab.on{opacity:1}
.ks-notif-tab.on::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#fff}
.ks-notif-list{flex:1; min-height:0; overflow-y:auto; margin:0 -8px}
.ks-notif-item{padding:10px 12px 10px 20px; border-radius:8px; cursor:pointer; position:relative}
.ks-notif-item:hover{background:rgba(255,255,255,.08)}
.ks-notif-item.unread::before{content:''; position:absolute; left:8px; top:16px; width:6px; height:6px; border-radius:50%; background:#fff}
.ks-notif-text{font:500 13px/1.4 var(--k-font); color:#fff}
.ks-notif-meta{font:400 11.7px var(--k-font); color:#c4d1e6; margin-top:2px}
.ks-notif-empty{text-align:center; padding:39px; font:400 13px var(--k-font); color:#fff}

/* Попапи, що лишились (телефон, «Хто бачить»). */
.ks-side .pop.ks-pop{top:auto; right:auto; bottom:0; left:calc(100% + 16px); transform-origin:bottom left}
.ks-pop{border-radius:8px}
.ks-pop .pop-head{font-size:14px; padding:12px 16px}
.ks-menu{width:260px; padding-bottom:6px}
.ks-menu-who{display:flex; align-items:center; gap:10px; padding:14px 16px 12px; border-bottom:1px solid var(--k-border)}
.ks-menu-name{font-weight:700; color:var(--k-text); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ks-menu-role{font-size:12px; color:var(--k-muted)}
.ks-menu-item{display:flex; align-items:center; gap:10px; width:100%; border:0; background:transparent; padding:10px 16px; cursor:pointer; text-align:left; font:500 13px var(--k-font); color:var(--k-text-2)}
.ks-menu-item span{display:flex; color:var(--k-muted)}
.ks-menu-item svg{width:17px; height:17px}
.ks-menu-item:hover{background:var(--k-bg); color:var(--k-text)}
.ks-menu-item--danger, .ks-menu-item--danger span{color:var(--k-danger-2)}
.ks-x{border:0; background:transparent; cursor:pointer; color:var(--k-muted); display:flex; padding:4px}
.ks-x svg{width:16px; height:16px}
.ks-kbd{display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:20px; padding:0 5px; border:1px solid var(--k-border); border-radius:4px; background:var(--k-bg); color:var(--k-text-2); font:600 11px var(--k-font)}
.ks-count{min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--k-danger); color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center}

/* «Оформлення»: тема й фон (наші «приколи»; типова тема — classic = KeyCRM). */
.ks-appear{width:330px}
.ks-appear-body{padding:12px 16px 16px}
.ks-appear .k-label{margin-bottom:8px}
.ks-theme-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.ks-theme, .ks-bg{border:1px solid var(--k-border); border-radius:6px; background:var(--k-card); cursor:pointer; padding:6px; display:flex; flex-direction:column; align-items:stretch; gap:6px; font:500 12px var(--k-font); color:var(--k-text-2); text-align:center}
.ks-theme:hover, .ks-bg:hover{border-color:var(--k-cyan-2)}
.ks-theme.on, .ks-bg.on{border-color:var(--k-cyan); box-shadow:0 0 0 1px var(--k-cyan); color:var(--k-text); font-weight:700}
.ks-theme-sw{height:36px; border-radius:4px; position:relative; overflow:hidden; border:1px solid rgba(0,0,0,.06)}
.ks-theme-sw i{position:absolute; left:4px; top:4px; bottom:4px; width:12px; border-radius:3px}
.ks-theme-sw b{position:absolute; right:6px; top:7px; width:26px; height:9px; border-radius:2px}
.ks-bg-row{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.ks-bg-sw{height:36px; border-radius:4px; border:1px solid var(--k-border); background:var(--k-bg)}
.ks-bg--waves .ks-bg-sw{background:radial-gradient(70px 30px at 80% 120%, color-mix(in srgb,var(--k-cyan) 40%,transparent), transparent 70%), radial-gradient(60px 30px at 10% -10%, color-mix(in srgb,var(--k-navy-2) 30%,transparent), transparent 70%), var(--k-bg)}
.ks-bg--grid .ks-bg-sw{background:linear-gradient(rgba(125,145,182,.3) 1px, transparent 1px) 0 0/8px 8px, linear-gradient(90deg, rgba(125,145,182,.3) 1px, transparent 1px) 0 0/8px 8px, var(--k-bg)}
html[data-key-bg="waves"] .shell{
  background:
    radial-gradient(1100px 420px at 85% 108%, color-mix(in srgb,var(--k-cyan) 16%,transparent), transparent 70%),
    radial-gradient(900px 360px at 20% 112%, color-mix(in srgb,var(--k-navy-2) 13%,transparent), transparent 70%),
    radial-gradient(1000px 500px at 100% -10%, color-mix(in srgb,var(--k-cyan) 9%,transparent), transparent 65%),
    var(--k-bg);
}
html[data-key-bg="grid"] .shell{
  background:
    linear-gradient(rgba(125,145,182,.16) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg, rgba(125,145,182,.16) 1px, transparent 1px) 0 0/28px 28px,
    var(--k-bg);
}
/* Фон-«прикол» малюється на .shell — шапка сторінки тоді прозора, щоб не різати його смугою. */
html[data-key-bg="waves"] .k-head, html[data-key-bg="grid"] .k-head{background:transparent}

/* Низький екран: рейка та сама (у KeyCRM нижня група просто ближче до верхньої); якщо
   зовсім не влазить — нижні пункти не налазять на верхні. */
@media (max-height:520px){ .rail.ks-side{overflow-y:auto} }

/* ═══ ТЕЛЕФОН: рейки нема, шапка тонка, нижнє меню темно-синє з ціановим активним ═══════ */
.ks-mtop{gap:10px; background:var(--k-card); border-bottom:1px solid var(--k-border)}
.ks-mtop-logo{width:36px; height:36px; border:0; padding:0; border-radius:50%; overflow:hidden; background:none; flex:none; cursor:pointer}
.ks-mtop-logo svg{width:36px; height:36px}
.ks-mtop-logo{box-shadow:inset 0 0 0 1px var(--k-border)}
.ks-mtop-search{flex:1; min-width:0; height:38px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid var(--k-border); border-radius:var(--k-radius); background:var(--k-bg); color:var(--k-muted); font:400 13.5px var(--k-font); cursor:pointer; text-align:left}
.ks-mtop-search svg{width:16px; height:16px}
.ks-avatar--m .avatar{width:34px; height:34px; box-shadow:none}
.ks-mtop .pop.ks-pop{top:48px; right:0; left:auto; bottom:auto; max-width:calc(100vw - 24px)}
@media (max-width:720px){
  .view{padding:14px 12px calc(76px + env(safe-area-inset-bottom, 0px))}
  .ks-mtop{justify-content:flex-start}
  .mobile-tabs{background:var(--k-navy); border-top:0; box-shadow:0 -4px 18px rgba(16,33,71,.18)}
  .mobile-tab{color:var(--k-navy-icon); font-family:var(--k-font)}
  .mobile-tab.on{color:#fff}
  .mobile-tab.on .mobile-tab-ic{background:var(--k-navy-2); box-shadow:inset 0 -2px 0 var(--k-cyan)}
  .mobile-tab-ic{padding:4px 14px; border-radius:8px}
  .mobile-tab-dot{background:var(--k-danger); box-shadow:0 0 0 2px var(--k-navy)}
  .mobile-more{background:var(--k-card); border-color:var(--k-border); border-radius:10px}
  .mobile-more-item{font-family:var(--k-font); color:var(--k-text-2)}
  .mobile-more-item.on{background:var(--k-cyan-soft); color:var(--k-cyan)}
}

/* Заставка завантаження — знак DeyDey на фоні сторінки KeyCRM. */
#startup-splash{background:var(--k-bg)}
.startup-splash-logo:has(.dd-mark){width:72px; height:72px; border-radius:50%; background:none; box-shadow:0 8px 24px rgba(38,71,133,.25)}
.startup-splash-logo svg.dd-mark{width:72px; height:72px; display:block}

/* Вхід: картка KeyCRM-стилю на фоні сторінки, зверху — рейкова смуга зі знаком DeyDey. */
.dd-login{background:var(--k-bg)}
.dd-login .login-card{max-width:400px; border:0; border-radius:8px; box-shadow:var(--k-shadow-portlet); padding:0 32px 28px; overflow:hidden}
.dd-login-logo{margin:0 -32px 24px; padding:24px 0; background:var(--k-navy); display:flex; justify-content:center}
.dd-login-logo svg{width:60px; height:60px; display:block}
.dd-login .login-title{font:600 15.6px/32px var(--k-font); color:var(--k-text-title); margin-bottom:0}
.dd-login .login-sub{font:400 13px var(--k-font); color:var(--k-text-2); margin-bottom:20px}
.dd-login .field label{font:400 12px var(--k-font); color:var(--k-text-4); margin-bottom:4px; display:block}
.dd-login .field input{height:32px; width:100%; box-sizing:border-box; border:1px solid var(--k-input-border); border-radius:4px; background:var(--k-input); padding:0 12px; font:400 13px var(--k-font); color:var(--k-text-3); outline:none; box-shadow:none}
.dd-login .field input:focus{border-color:var(--k-primary)}
.dd-login .btn-primary{height:36px; border-radius:4px; background:var(--k-primary); border:1px solid var(--k-primary); color:#fff; font:400 13px var(--k-font); box-shadow:none}
.dd-login .btn-primary:hover{background:var(--k-primary-hover)}
.dd-login .hint a{color:var(--k-primary) !important}

/* ═══ ВИГЛЯД І ШРИФТ (власник 09.11) ═══════════════════════════════════════════════════
   html[data-key-view]: classic (типовий, KeyCRM 1:1) | modern (розгорнута панель з підписами).
   html[data-key-font]: шрифт, що діє (ставить applyKeyLook() у js/app.js). Helvetica лишає
   значення KeyCRM без змін. Аналітика KeyCRM має власний Inter — для явно обраного шрифту
   перемикається й вона. */
html[data-key-font="inter"]{--k-font:'Inter', Helvetica, Arial, sans-serif}
html[data-key-font="onest"]{--k-font:'Onest', Helvetica, Arial, sans-serif; --k-font-analytics:var(--k-font)}
html[data-key-font="manrope"]{--k-font:'Manrope', Helvetica, Arial, sans-serif; --k-font-analytics:var(--k-font)}
html[data-key-font="montserrat"]{--k-font:'Montserrat', Helvetica, Arial, sans-serif; --k-font-analytics:var(--k-font)}
/* Поля й кнопки не успадковують шрифт самі — тягнемо їх за сторінкою. */
html:not([data-key-font="helvetica"]) :is(button, input, select, textarea){font-family:inherit}

/* Підписи рейки — лише в «Сучасному». */
.ks-lbl, .ks-sub{display:none}

html[data-key-view="modern"]:root:root:root{--ks-side-w:244px} /* :root:root:root вище тримає 72px */
html[data-key-view="modern"] .rail.ks-side{width:232px; padding:10px 0 8px}
html[data-key-view="modern"] .ks-list:not(.ks-list--bottom){flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.25) transparent}
html[data-key-view="modern"] .ks-li{height:auto; padding:2px 12px; display:block}
html[data-key-view="modern"] .ks-li--logo{height:60px; padding:0; margin:-10px 0 10px; flex:none}
html[data-key-view="modern"] .ks-logo{width:100%; display:flex; align-items:center; gap:12px; text-align:left}
html[data-key-view="modern"] .ks-lbl{display:block; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:left}
html[data-key-view="modern"] .ks-lbl--brand{font:700 16px/1.2 var(--k-font); color:#fff}
html[data-key-view="modern"] .ks-item{width:100%; height:40px; justify-content:flex-start; gap:10px; padding:0 10px; box-sizing:border-box; font:600 14px/40px var(--k-font); color:#fff; opacity:1}
html[data-key-view="modern"] .ks-item.has-sub.active{background:transparent}
html[data-key-view="modern"] .ks-item.has-sub:hover{background:rgba(255,255,255,.08)}
html[data-key-view="modern"] .ks-item .ks-badge{position:static; margin-left:auto}
html[data-key-view="modern"] .ks-sub{display:block; padding:0 0 6px}
html[data-key-view="modern"] .ks-sub-link{display:block; height:36px; padding:0 10px 0 40px; border-radius:5px; color:rgba(255,255,255,.88); font:400 13px/36px var(--k-font); cursor:pointer; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .15s}
html[data-key-view="modern"] .ks-sub-link:hover{background:rgba(255,255,255,.08); color:#fff}
html[data-key-view="modern"] .ks-sub-link.is-active{background:var(--k-navy-2); color:#fff; font-weight:500}
html[data-key-view="modern"] .ks-sub-sec{margin:8px 10px 4px 40px; font:700 10px/1.2 var(--k-font); letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.6)}
html[data-key-view="modern"] .ks-list--bottom{flex:none; border-top:1px solid rgba(255,255,255,.15); padding-top:6px}
html[data-key-view="modern"] .ks-li--profile{display:flex; align-items:center; gap:10px; margin-top:6px; padding:4px 12px 4px 22px}
html[data-key-view="modern"] .ks-li--profile::before{display:none}
html[data-key-view="modern"] .ks-uavatar{width:32px; height:32px}
html[data-key-view="modern"] .ks-uavatar svg{width:18px; height:18px}
html[data-key-view="modern"] .ks-lbl--me{font:500 13px/1.3 var(--k-font); color:#fff; cursor:pointer}
html[data-key-view="modern"] .ks-collapse{height:32px; font-weight:400; font-size:12.5px; color:rgba(255,255,255,.75)}
html[data-key-view="modern"] .ks-collapse .ks-ic{width:20px; justify-content:center; font-size:18px; line-height:1}
html[data-key-view="modern"] .ks-collapse:hover{background:rgba(255,255,255,.08); color:#fff}
html[data-key-view="modern"] .ks-tip{display:none}

/* Вибір вигляду й шрифту в «Оформленні». */
.ks-view-row{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.ks-view-sw{height:36px; border-radius:4px; border:1px solid var(--k-border); background:var(--k-bg); position:relative; overflow:hidden}
.ks-view-sw i{position:absolute; left:4px; top:4px; bottom:4px; width:8px; border-radius:3px; background:var(--k-navy)}
.ks-view--modern .ks-view-sw i{width:26px}
.ks-view-sw s{position:absolute; left:16px; right:6px; top:8px; height:6px; border-radius:2px; background:var(--k-card); text-decoration:none}
.ks-view--modern .ks-view-sw s{left:34px}
.ks-font-row{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.ks-font{height:32px; border:1px solid var(--k-border); border-radius:6px; background:var(--k-card); color:var(--k-text-2); font-size:12.5px; cursor:pointer; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ks-font:hover{border-color:var(--k-cyan-2)}
.ks-font.on{border-color:var(--k-cyan); box-shadow:0 0 0 1px var(--k-cyan); color:var(--k-text); font-weight:700}
.ks-appear-inline .k-label{color:#fff}
.ks-appear-inline .ks-font{font-size:11.5px}

/* ═══ ДОДАТКОВІ ТОКЕНИ ТЕМ ═══════════════════════════════════════════════════════════
   Сторінки пишуть var(--k-dk-fill, #f5f7fa) / var(--k-tint, #e6f6fe) тощо: у «Класичній»
   змінних нема і діє рівно значення KeyCRM після коми; темна й кольорові теми їх задають. */
html[data-key-theme="dark"]{
  --k-dk-fill:#232933; --k-dk-text:#e8eaee; --k-dk-muted:#8a919c;
  --k-tint:#1d3346; --k-tint-2:#2b4a66; --k-tint-3:#4fb8f0;
}
html[data-key-theme="emerald"], html[data-key-theme="violet"], html[data-key-theme="sunset"]{
  --k-tint:color-mix(in srgb, var(--k-primary) 10%, #fff);
  --k-tint-2:color-mix(in srgb, var(--k-primary) 35%, #fff);
  --k-tint-3:var(--k-primary);
}
html[data-key-theme="emerald"]{--k-chart-rgb:18,176,137}
html[data-key-theme="violet"]{--k-chart-rgb:122,90,248}
html[data-key-theme="sunset"]{--k-chart-rgb:255,92,40}

/* Вбудовані сервіси DeyDey (Медіабаїнг, Колл-центр) — js/pages/ShopEmbed.js, 10.11.2026.
   Вікно сервісу займає всю висоту під шапкою: у нього свій скрол, і другий скрол сторінки
   навколо тільки заважав би. */
.emb-page{display:flex;flex-direction:column;min-height:0}
.emb-open{font-size:13px;font-weight:600;color:var(--visa,#1E88E5);text-decoration:none;white-space:nowrap}
.emb-open:hover{text-decoration:underline}
.emb-frame-wrap{position:relative;height:calc(100vh - 130px);min-height:520px;margin-top:10px;
  border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.emb-frame{display:block;width:100%;height:100%;border:0}
.emb-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8a94a6;font-size:14px;pointer-events:none}
@media (max-width:720px){ .emb-frame-wrap{height:calc(100vh - 170px);margin-left:-12px;margin-right:-12px;border-radius:0} }
/* Власник 12.11: при прокрутці шапка має лишатись білою плашкою — рядки не просвічують крізь неї,
   і для фонів «хвилі»/«сітка» теж. */
.k-head.is-stuck,html[data-key-bg] .k-head.is-stuck{background:var(--k-card)!important;box-shadow:0 6px 16px -6px rgba(16,24,40,.18)}