/* =====================================================================
   Plerdy UI kit v1 — plerdy-kit.css  (UK0b, _analysis/uikit_plerdy.md §3)
   Окремий файл, НЕ частина бандла admin_main. Підключається в 3 layout-ах
   (admin, adminfirst, shared_dashboard_layer) одразу після admin_main.min.css.

   1. Токени --pl-*  (§3.4)              — завжди активні, нічого не змінюють.
   2. .pi / .pi-12/16/20/24, .status-dot — нові класи, на старі не впливають.
   3. Mask-шар для p_icon                — ТІЛЬКИ під html.pl-kit.
      Відкат шару = прибрати клас pl-kit з <html> у layout-і.

   Принцип шару (крок 1 — візуально нейтральний):
   - моно-гліф .p_icon_<name> малюється як mask-image + background-color:
     currentColor, а color дорівнює нинішньому кольору SVG-файла;
   - маска = public/images/icon/pl/20/<name>.svg, якщо геометрія ідентична
     (той самий path і viewBox), інакше — нинішній моно-файл (не новий малюнок);
   - 3b: на кожен селектор theme-plerdy.css — змінні --pk-mask / --pk-color;
   - 3d: «активація» (маска + background-image:none) групами :is() з
     однаковою специфічністю, що й у правил теми, під :where(html.pl-kit):
     шар виграє в теми порядком (файл після бандла), а модульні контекстні
     оверрайди з вищою специфічністю — не перебиває; модульні CSS, що
     вантажаються пізніше, — через html.pl-kit;
   - 3e: color окремим правилом html.pl-kit … (сильніше за загальні `.x i{color}`);
   - --pl-legacy-* = нинішні значення, яких немає в ядрі §3.4. UK2+: перевести
     на ядро. Шукати: grep "pl-legacy".
   Виключення (шар їх не чіпає): .p_icon_mask (своя маска), new_close_btn*,
   .close, .icon_question, .icon_list, .tool-info, .search_w_icon, інлайновий
   style="background…", перемикачі пристроїв редактора попапа, lock у
   .block-ux; класи p_icon_report / p_icon_undo (локальні Blade-оверрайди з
   загальним селектором), багатоколірні й ілюстрації (question_mark*,
   export_google, pdf_file, jimmy_*, bar_chart, state_sadness, cat_info),
   p_icon_number, p_icon_ref_down.
   Шляхи url() — абсолютні від кореня сайту, як у theme-plerdy.css.
   ===================================================================== */

/* ---------- 1. Токени (§3.4) ---------- */
:root {
    --pl-brand: #1474E3;
    --pl-brand-hover: #006DCA;
    --pl-brand-bg: #EAF2FD;
    --pl-ink: #191B23;
    --pl-muted: #6C6E79;
    --pl-muted-2: #8A8E9B; /* лише іконки/плейсхолдери, 3.3:1 */
    --pl-subtle: #C4C7CF;
    --pl-line: #E0E3E6;
    --pl-surface: #F4F5F9;
    --pl-bg: #FFFFFF;
    --pl-success: #0A7E22;
    --pl-success-bg: #ECFBCD;
    --pl-warn: #9F6A00;
    --pl-warn-bg: #FFF6E6;
    --pl-danger: #C74952; /* рішення №1: єдиний червоний */
    --pl-danger-bg: #FFF1F0;
    --pl-link: var(--pl-brand); /* рішення №6: #2F6FED у модулях переходить сюди під час міграції модулів */
    --pl-icon-12: 12px;
    --pl-icon-16: 16px;
    --pl-icon-20: 20px;
    --pl-icon-24: 24px;
    --pl-radius-sm: 4px;
    --pl-radius: 8px; /* модалки теж 4 (рішення власника 13.10); --pl-radius 8 у компонентах v1 не використовується */
    --pl-radius-pill: var(--pl-radius-sm); /* §3.3, вибір UK0b: pill статусу 4px (як більшість бейджів у модулях) */

    /* R3 — кольори ДАНИХ (uikit_plerdy.md §3.4). Значення = локальні копії в модулях
       (heatmaps-pd-new.css, events-report.css, converssion3/show_page_c, revenue) — тепер їх можна прибрати. */
    --pl-dev-desktop: #1474E3;
    --pl-dev-mobile: #007C65;
    --pl-dev-tablet: #9F6A00;
    --pl-chart-1: #1474E3;
    --pl-chart-2: #007C65;
    --pl-chart-3: #9F6A00;
    --pl-chart-4: #C74952;
    --pl-chart-5: #44546F;
    --pl-chart-6: #8A8E9B;
    /* R6b-KIT-DRP: другий колір даних «період порівняння» (календар LRF, поле «Порівняти з»). Бурштин = --pl-star,
       не --pl-warn: це не попередження, а друга серія; заливка напівпрозора, бо лягає поверх --pl-brand-bg основного діапазону. */
    --pl-compare: #E3A008;
    --pl-compare-bg: rgba(255, 208, 0, .28);
    --pl-compare-ring: 0 0 0 2px rgba(227, 160, 8, .3);

    /* UC0 — компонентні токени (_analysis/uikit_components_plan.md §2.2). Значення взяті з коду,
       нових кольорів немає, крім --pl-row-hover (уже є в popup-reports/funnel). */
    --pl-font: Roboto, Arial, sans-serif;
    --pl-font-mono: SFMono-Regular, Menlo, Consolas, monospace;
    --pl-page-bg: #EAECEE;                /* фон сторінки кабінету (body/.page-main) */
    --pl-row-hover: #FAFBFC;              /* hover рядка таблиці */
    --pl-brand-active: #044792;           /* :active primary (уже в theme-plerdy) */
    --pl-border-input: var(--pl-muted-2); /* 3.3:1 — WCAG 1.4.11 */
    --pl-focus-outline: 2px solid var(--pl-brand);
    --pl-focus-ring: 0 0 0 2px rgba(20,116,227,.25);
    --pl-danger-ring: 0 0 0 2px rgba(199,73,82,.25);
    --pl-shadow-overlay: 0 6px 20px rgba(25,27,35,.12);
    --pl-shadow-modal: 0 20px 60px rgba(25,27,35,.28);
    --pl-backdrop: rgba(25,27,35,.45);
    --pl-star: #E3A008;                   /* K1: «вибране» увімкнено (.pl-star, значення з sites-mgmt.css .sm-star) */
    --pl-star-hover: #C98C00;             /* K1: hover увімкненої зірки */
    --pl-radius-round: 999px;             /* лише switch, avatar, dot */
    --pl-warn-line: #D9A441;              /* CHD0: пунктир внутрішньої нотатки (.pl-msg--note, .pl-composer.is-note) */
    --pl-warn-ring: 0 0 0 2px rgba(159,106,0,.2); /* CHD0: фокус поля нотатки (тон --pl-warn) */
    --pl-h-sm: 28px; --pl-h-compact: 32px; --pl-h-md: 36px; --pl-h-tab: 40px;
    --pl-space-1: 4px; --pl-space-2: 8px; --pl-space-3: 12px; --pl-space-4: 16px;
    --pl-space-5: 20px; --pl-space-6: 24px; --pl-space-8: 32px; --pl-space-12: 48px;
    --pl-gutter: 15px;                    /* виняток 4-сітки: Bootstrap-3 гутер */
    --pl-gap-head: 16px;                  /* .p-head → контент */
    --pl-gap-section: 20px;               /* між блоками: фільтр-бар → KPI → картки */
    --pl-gap-toolbar: 12px;               /* між контролами в тулбарі */
    --pl-gap-tile: 8px;                   /* між KPI-картками */
    --pl-pad-card: 20px; --pl-pad-card-dense: 16px; --pl-pad-kpi: 12px;
    --pl-modal-s: 480px; --pl-modal-m: 640px; --pl-modal-l: 900px;
    --pl-drawer-s: 440px; --pl-drawer-m: 720px; --pl-drawer-l: 960px;

    /* Legacy: нинішні кольори SVG-файлів p_icon, яких немає в ядрі.
       Тримають mask-шар нейтральним; UK2+ — замінити на ядро і видалити. */
    --pl-legacy-red: #EE505A;     /* UK2+ → --pl-danger  (_red, error, stop_red, player_red, staus-failed) */
    --pl-legacy-navy: #001E41;    /* UK2+ → --pl-ink     (close, desktop, mobile) */
    --pl-legacy-success: #00C192; /* UK2+ → --pl-success (success, staus-checked) */
    --pl-legacy-green: #009F81;   /* UK2+ → --pl-success (26/arrow_green, 32/done) */
    --pl-legacy-warn: #FAAD14;    /* UK2+ → --pl-warn    (warning) */
    --pl-legacy-info: #2BB3FF;    /* UK2+ → --pl-brand   (information, staus-info) */
    --pl-legacy-violet: #5D78FF;  /* UK2+ → --pl-brand   (share у стані «поширено»; Metronic, ban-list §3.5) */
    --pl-legacy-grey: #919191;    /* UK2+ → --pl-muted-2 (tooltip, 32/menu) */
    --pl-legacy-slate: #6B6C7E;   /* UK2+ → --pl-muted   (two_arrows) */
}

/* ---------- 2. Спрайт-іконки і status-dot ---------- */
/* <svg class="pi pi-16" aria-hidden="true"><use href="/public/images/icon/pl/sprite.svg?v=…#pi-delete-16"/></svg>
   Рідний бокс: 12 — chevron/sort/delta; 16 — інлайн; 20 — дефолт; 24 — плеєр. */
.pi {
    display: inline-block;
    flex: none;
    width: var(--pl-icon-20);
    height: var(--pl-icon-20);
    fill: currentColor;
    vertical-align: middle;
}
.pi-12 { width: var(--pl-icon-12); height: var(--pl-icon-12); }
.pi-16 { width: var(--pl-icon-16); height: var(--pl-icon-16); vertical-align: -0.2em; }
.pi-20 { width: var(--pl-icon-20); height: var(--pl-icon-20); }
.pi-24 { width: var(--pl-icon-24); height: var(--pl-icon-24); }

/* Статус у щільній таблиці / легенді (§3.2): 8px, завжди поруч із текстом. */
.status-dot {
    display: inline-block;
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--pl-muted-2);
    vertical-align: middle;
}
.status-dot--ok { background-color: var(--pl-success); }
.status-dot--warn { background-color: var(--pl-warn); }
.status-dot--error { background-color: var(--pl-danger); }
.status-dot--neutral { background-color: var(--pl-muted-2); }

/* ---------- 3. Mask-шар p_icon (тільки html.pl-kit) ---------- */
/* 3a. Позиція/повтор маски = background-position/repeat базового .p_icon.
       Без .p_icon елемент лишається з дефолтами маски (0 0, repeat) — як і фон. */
:where(html.pl-kit) :where(.p_icon, .p_icon-26, .p_icon-32, .p_icon-48, .p_icon-64, .p_icon-126):where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) {
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-origin: padding-box;
    mask-origin: padding-box;
}

/* 3b. Змінні гліфа: --pk-mask (форма) і --pk-color (нинішній колір файла).
       Селектори = theme-plerdy.css 1:1 (+ модульні --settings / --download_white / --connect_white),
       тож порядок специфічності між ними той самий. Самі по собі нічого не малюють. */
:where(html.pl-kit) .p_icon_plus { --pk-mask: url('/public/images/icon/pl/20/add.svg?v=20261013r3'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_plus_blue { --pk-mask: url('/public/images/icon/pl/20/add.svg?v=20261013r3'); --pk-color: var(--pl-brand-hover); }
:where(html.pl-kit) .p_icon_plus_red { --pk-mask: url('/public/images/icon/pl/20/add.svg?v=20261013r3'); --pk-color: var(--pl-legacy-red); }
:where(html.pl-kit) .p_icon_arrow { --pk-mask: url('/public/images/icon/20/arrow_white.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_arrow_blue { --pk-mask: url('/public/images/icon/20/arrow_blue.svg'); --pk-color: var(--pl-brand-hover); }
:where(html.pl-kit) .p_icon_arrow_red { --pk-mask: url('/public/images/icon/20/arrow_red.svg'); --pk-color: var(--pl-legacy-red); }
:where(html.pl-kit) .p_icon_plus_black { --pk-mask: url('/public/images/icon/pl/20/add.svg?v=20261013r3'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_arrow_black { --pk-mask: url('/public/images/icon/20/arrow_black.svg'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_delete_grey { --pk-mask: url('/public/images/icon/pl/20/delete.svg?v=20261013r3'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_delete_red { --pk-mask: url('/public/images/icon/pl/20/delete.svg?v=20261013r3'); --pk-color: var(--pl-legacy-red); }
:where(html.pl-kit) .p_icon_compare { --pk-mask: url('/public/images/icon/20/compare.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_close { --pk-mask: url('/public/images/icon/pl/20/close.svg?v=20261013r3'); --pk-color: var(--pl-legacy-navy); }
:where(html.pl-kit) .p_icon_refresh { --pk-mask: url('/public/images/icon/pl/20/refresh.svg?v=20261013r3'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_refresh_b { --pk-mask: url('/public/images/icon/pl/20/refresh.svg?v=20261013r3'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_copy_white { --pk-mask: url('/public/images/icon/20/copy_white.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_refresh_grey { --pk-mask: url('/public/images/icon/pl/20/refresh.svg?v=20261013r3'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_info { --pk-mask: url('/public/images/icon/20/info.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_copy_all { --pk-mask: url('/public/images/icon/20/copy_all.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_calendar { --pk-mask: url('/public/images/icon/pl/20/calendar.svg?v=20261013r3'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_filter { --pk-mask: url('/public/images/icon/pl/20/filter.svg?v=20261013r3'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_calendar_white { --pk-mask: url('/public/images/icon/20/calendar_white.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_schedule { --pk-mask: url('/public/images/icon/20/schedule.svg'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_search { --pk-mask: url('/public/images/icon/pl/20/search.svg?v=20261013r3'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_calendar-white { --pk-mask: url('/public/images/filter/calendar-white.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_lock { --pk-mask: url('/public/images/new/lock.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_success { --pk-mask: url('/public/images/icon/20/success.svg'); --pk-color: var(--pl-legacy-success); }
:where(html.pl-kit) .p_icon_warning { --pk-mask: url('/public/images/icon/20/warning.svg'); --pk-color: var(--pl-legacy-warn); }
:where(html.pl-kit) .p_icon_information { --pk-mask: url('/public/images/icon/20/information.svg'); --pk-color: var(--pl-legacy-info); }
:where(html.pl-kit) .p_icon_error { --pk-mask: url('/public/images/icon/20/error.svg'); --pk-color: var(--pl-legacy-red); }
:where(html.pl-kit) .p_icon_arrow_downward { --pk-mask: url('/public/images/icon/20/arrow_downward.svg'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_content_copy { --pk-mask: url('/public/images/icon/pl/20/copy.svg?v=20261013r3'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_share { --pk-mask: url('/public/images/icon/pl/20/share.svg?v=20261013r3'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_play_arrow { --pk-mask: url('/public/images/icon/pl/20/play.svg?v=20261013r3'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_colors { --pk-mask: url('/public/images/icon/20/colors.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_preview { --pk-mask: url('/public/images/icon/20/preview.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_edit { --pk-mask: url('/public/images/icon/pl/20/edit.svg?v=20261013r3'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_flag { --pk-mask: url('/public/images/icon/20/flag.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_settings { --pk-mask: url('/public/images/icon/20/settings.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_settings_blue { --pk-mask: url('/public/images/icon/20/settings-blue.svg'); --pk-color: var(--pl-brand-hover); }
:where(html.pl-kit) .p_icon_settings_black { --pk-mask: url('/public/images/icon/pl/20/settings.svg?v=20261013r3'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_insertLink { --pk-mask: url('/public/images/icon/20/insertLink.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_contact_pae { --pk-mask: url('/public/images/icon/20/contact_pae.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_tune { --pk-mask: url('/public/images/icon/pl/20/tune.svg?v=20261013r3'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_tooltip { --pk-mask: url('/public/images/icon/20/tooltip.svg'); --pk-color: var(--pl-legacy-grey); }
:where(html.pl-kit) .p_icon_link { --pk-mask: url('/public/images/icon/20/link.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_link_white { --pk-mask: url('/public/images/icon/20/link_white.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_compare_blue { --pk-mask: url('/public/images/icon/20/compare_blue.svg'); --pk-color: var(--pl-brand-hover); }
:where(html.pl-kit) .p_icon_save { --pk-mask: url('/public/images/icon/20/save.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_format_size { --pk-mask: url('/public/images/icon/20/format_size.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_format { --pk-mask: url('/public/images/icon/20/format.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_height { --pk-mask: url('/public/images/icon/20/height.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_width { --pk-mask: url('/public/images/icon/20/width.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_tune_white { --pk-mask: url('/public/images/icon/pl/20/tune.svg?v=20261013r3'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_report_white { --pk-mask: url('/public/images/icon/20/report_white.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_pause_white { --pk-mask: url('/public/images/icon/20/pause_white.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_done_white { --pk-mask: url('/public/images/icon/20/done_white.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_player_red { --pk-mask: url('/public/images/icon/20/player_red.svg'); --pk-color: var(--pl-legacy-red); }
:where(html.pl-kit) .p_icon_player_black { --pk-mask: url('/public/images/icon/20/player_black.svg'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_two_arrows { --pk-mask: url('/public/images/icon/20/two_arrows.svg'); --pk-color: var(--pl-legacy-slate); }
:where(html.pl-kit) .p_icon_stop_red { --pk-mask: url('/public/images/icon/20/stop_red.svg'); --pk-color: var(--pl-legacy-red); }
:where(html.pl-kit) .p_icon_person_add { --pk-mask: url('/public/images/icon/20/person_add.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_sheet { --pk-mask: url('/public/images/icon/20/sheet.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_thumb_down { --pk-mask: url('/public/images/icon/20/thumb_down.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_thumb_up { --pk-mask: url('/public/images/icon/20/thumb_up.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_support { --pk-mask: url('/public/images/icon/20/support.svg'); --pk-color: var(--pl-brand-hover); }
:where(html.pl-kit) .p_icon_support_agent { --pk-mask: url('/public/images/icon/20/support_agent.svg'); --pk-color: var(--pl-brand-hover); }
:where(html.pl-kit) .p_icon_player { --pk-mask: url('/public/images/icon/20/player.svg'); --pk-color: var(--pl-brand-hover); }
:where(html.pl-kit) .p_icon_instagram { --pk-mask: url('/public/images/icon/20/instagram.svg'); --pk-color: var(--pl-brand-hover); }
:where(html.pl-kit) .p_icon_menu_book { --pk-mask: url('/public/images/icon/20/menu_book.svg'); --pk-color: var(--pl-brand-hover); }
:where(html.pl-kit) .p_icon_close_gray { --pk-mask: url('/public/images/icon/20/close_gray.svg'); --pk-color: var(--pl-muted-2); }
:where(html.pl-kit) .p_icon_check_blue { --pk-mask: url('/public/images/icon/20/check_blue.svg'); --pk-color: var(--pl-brand); }
:where(html.pl-kit) .p_icon_radius { --pk-mask: url('/public/images/icon/20/radius.svg'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_brush { --pk-mask: url('/public/images/icon/20/brush.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_screen { --pk-mask: url('/public/images/icon/20/screen.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_settings_grey { --pk-mask: url('/public/images/icon/pl/20/settings.svg?v=20261013r3'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_cut_photo { --pk-mask: url('/public/images/icon/20/cut_photo.svg'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_ordered_list { --pk-mask: url('/public/images/icon/20/ordered_list.svg'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_add_photo { --pk-mask: url('/public/images/icon/20/add_photo.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_spacing_left { --pk-mask: url('/public/images/icon/20/spacing_left.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_spacing_right { --pk-mask: url('/public/images/icon/20/spacing_right.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_spacing_top { --pk-mask: url('/public/images/icon/20/spacing_top.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_spacing_bottom { --pk-mask: url('/public/images/icon/20/spacing_bottom.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_data_usage { --pk-mask: url('/public/images/icon/20/data_usage.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_play_arrow_black { --pk-mask: url('/public/images/icon/pl/20/play.svg?v=20261013r3'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .p_icon_groups { --pk-mask: url('/public/images/icon/20/groups.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_devices { --pk-mask: url('/public/images/icon/pl/20/devices.svg?v=20261013r3'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon_desktop { --pk-mask: url('/public/images/new_admin/desk.svg'); --pk-color: var(--pl-legacy-navy); }
:where(html.pl-kit) .p_icon_mobile { --pk-mask: url('/public/images/new_admin/mob.svg'); --pk-color: var(--pl-legacy-navy); }
:where(html.pl-kit) .p_icon_power { --pk-mask: url('/public/images/icon/20/power.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon_apply_w { --pk-mask: url('/public/images/icon/20/done_white.svg'); --pk-color: var(--pl-bg); }
:where(html.pl-kit) .p_icon-26.p_icon_arrow_red { --pk-mask: url('/public/images/icon/26/arrow_red.svg'); --pk-color: var(--pl-legacy-red); }
:where(html.pl-kit) .p_icon-26.p_icon_arrow_green { --pk-mask: url('/public/images/icon/26/arrow_green.svg'); --pk-color: var(--pl-legacy-green); }
:where(html.pl-kit) .p_icon-32.p_icon_play { --pk-mask: url('/public/images/icon/32/play.svg'); --pk-color: var(--pl-brand); }
:where(html.pl-kit) .p_icon-32.p_icon_play_circle { --pk-mask: url('/public/images/icon/32/play_circle.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon-32.p_icon_menu { --pk-mask: url('/public/images/icon/32/menu.svg'); --pk-color: var(--pl-legacy-grey); }
:where(html.pl-kit) .p_icon-32.p_icon_done { --pk-mask: url('/public/images/icon/32/done.svg'); --pk-color: var(--pl-legacy-green); }
:where(html.pl-kit) .p_icon.p_icon_shered_black { --pk-mask: url('/public/images/icon/pl/20/share.svg?v=20261013r3'); --pk-color: var(--pl-ink); }
:where(html.pl-kit) .checked_shered .p_icon.p_icon_shered_black { --pk-mask: url('/public/images/icon/pl/20/share.svg?v=20261013r3'); --pk-color: var(--pl-legacy-violet); }
:where(html.pl-kit) .p_icon.p_icon_notifications { --pk-mask: url('/public/images/icon/20/notifications.svg'); --pk-color: var(--pl-muted); }
:where(html.pl-kit) .p_icon.p_icon--staus-checked { --pk-mask: url('/public/images/icon/20/status_checked.svg'); --pk-color: var(--pl-legacy-success); }
:where(html.pl-kit) .p_icon.p_icon--staus-info { --pk-mask: url('/public/images/icon/20/status_info.svg'); --pk-color: var(--pl-legacy-info); }
:where(html.pl-kit) .p_icon.p_icon--staus-failed { --pk-mask: url('/public/images/icon/20/status_failed.svg'); --pk-color: var(--pl-legacy-red); }
html.pl-kit .p_icon.p_icon--settings { --pk-mask: url('/public/images/icon/pl/20/settings.svg?v=20261013r3'); --pk-color: var(--pl-ink); }
html.pl-kit .p_icon.p_icon--download_white { --pk-mask: url('/public/images/icon/20/download_white.svg'); --pk-color: var(--pl-bg); }
html.pl-kit .p_icon.p_icon--connect_white { --pk-mask: url('/public/images/connect_w.svg'); --pk-color: var(--pl-bg); }

/* 3c. Стан «поширено»: модулі міняли background-image на share_blue — тепер це колір.
       (:hover/:active-підмін background-image у p_icon у CSS і <style> Blade немає.) */
:where(html.pl-kit) .p_icon_share.checked_shared { --pk-mask: url('/public/images/icon/pl/20/share.svg?v=20261013r3'); --pk-color: var(--pl-legacy-violet); }

/* 3d. Активація: маска з --pk-mask, фон = currentColor. */
/* theme-plerdy.css / бандл, специфічність 0,1,0 */
:where(html.pl-kit) :is(
    .p_icon_plus,
    .p_icon_plus_blue,
    .p_icon_plus_red,
    .p_icon_arrow,
    .p_icon_arrow_blue,
    .p_icon_arrow_red,
    .p_icon_plus_black,
    .p_icon_arrow_black,
    .p_icon_delete_grey,
    .p_icon_delete_red,
    .p_icon_compare,
    .p_icon_close,
    .p_icon_refresh,
    .p_icon_refresh_b,
    .p_icon_copy_white,
    .p_icon_refresh_grey,
    .p_icon_info,
    .p_icon_copy_all,
    .p_icon_calendar,
    .p_icon_filter,
    .p_icon_calendar_white,
    .p_icon_schedule,
    .p_icon_search,
    .p_icon_calendar-white,
    .p_icon_lock,
    .p_icon_success,
    .p_icon_warning,
    .p_icon_information,
    .p_icon_error,
    .p_icon_arrow_downward,
    .p_icon_content_copy,
    .p_icon_share,
    .p_icon_play_arrow,
    .p_icon_colors,
    .p_icon_preview,
    .p_icon_edit,
    .p_icon_flag,
    .p_icon_settings,
    .p_icon_settings_blue,
    .p_icon_settings_black,
    .p_icon_insertLink,
    .p_icon_contact_pae,
    .p_icon_tune,
    .p_icon_tooltip,
    .p_icon_link,
    .p_icon_link_white,
    .p_icon_compare_blue,
    .p_icon_save,
    .p_icon_format_size,
    .p_icon_format,
    .p_icon_height,
    .p_icon_width,
    .p_icon_tune_white,
    .p_icon_report_white,
    .p_icon_pause_white,
    .p_icon_done_white,
    .p_icon_player_red,
    .p_icon_player_black,
    .p_icon_two_arrows,
    .p_icon_stop_red,
    .p_icon_person_add,
    .p_icon_sheet,
    .p_icon_thumb_down,
    .p_icon_thumb_up,
    .p_icon_support,
    .p_icon_support_agent,
    .p_icon_player,
    .p_icon_instagram,
    .p_icon_menu_book,
    .p_icon_close_gray,
    .p_icon_check_blue,
    .p_icon_radius,
    .p_icon_brush,
    .p_icon_screen,
    .p_icon_settings_grey,
    .p_icon_cut_photo,
    .p_icon_ordered_list,
    .p_icon_add_photo,
    .p_icon_spacing_left,
    .p_icon_spacing_right,
    .p_icon_spacing_top,
    .p_icon_spacing_bottom,
    .p_icon_data_usage,
    .p_icon_play_arrow_black,
    .p_icon_groups,
    .p_icon_devices,
    .p_icon_desktop,
    .p_icon_mobile,
    .p_icon_power,
    .p_icon_apply_w
):where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) {
    -webkit-mask-image: var(--pk-mask);
    mask-image: var(--pk-mask);
    background-image: none;
    background-color: currentColor;
}
/* theme-plerdy.css / бандл, специфічність 0,2,0 */
:where(html.pl-kit) :is(
    .p_icon-26.p_icon_arrow_red,
    .p_icon-26.p_icon_arrow_green,
    .p_icon-32.p_icon_play,
    .p_icon-32.p_icon_play_circle,
    .p_icon-32.p_icon_menu,
    .p_icon-32.p_icon_done,
    .p_icon.p_icon_shered_black,
    .p_icon.p_icon_notifications,
    .p_icon.p_icon--staus-checked,
    .p_icon.p_icon--staus-info,
    .p_icon.p_icon--staus-failed,
    .p_icon_share.checked_shared
):where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) {
    -webkit-mask-image: var(--pk-mask);
    mask-image: var(--pk-mask);
    background-image: none;
    background-color: currentColor;
}
/* theme-plerdy.css / бандл, специфічність 0,3,0 */
:where(html.pl-kit) :is(
    .checked_shered .p_icon.p_icon_shered_black
):where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) {
    -webkit-mask-image: var(--pk-mask);
    mask-image: var(--pk-mask);
    background-image: none;
    background-color: currentColor;
}
/* модульні CSS (вантажаться після kit), специфічність 0,2,0 */
html.pl-kit :is(
    .p_icon.p_icon--settings,
    .p_icon.p_icon--download_white,
    .p_icon.p_icon--connect_white
):where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) {
    -webkit-mask-image: var(--pk-mask);
    mask-image: var(--pk-mask);
    background-image: none;
    background-color: currentColor;
}
/* модульні CSS (вантажаться після kit), специфічність 0,4,0 */
html.pl-kit :is(
    .share-btn.checked_shered .p_icon.p_icon_shered_black
):where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) {
    -webkit-mask-image: var(--pk-mask);
    mask-image: var(--pk-mask);
    background-image: none;
    background-color: currentColor;
}

/* 3e. Колір = --pk-color (нинішній колір файла). Окремим сильним правилом. */
html.pl-kit :is(
    .p_icon_plus,
    .p_icon_plus_blue,
    .p_icon_plus_red,
    .p_icon_arrow,
    .p_icon_arrow_blue,
    .p_icon_arrow_red,
    .p_icon_plus_black,
    .p_icon_arrow_black,
    .p_icon_delete_grey,
    .p_icon_delete_red,
    .p_icon_compare,
    .p_icon_close,
    .p_icon_refresh,
    .p_icon_refresh_b,
    .p_icon_copy_white,
    .p_icon_refresh_grey,
    .p_icon_info,
    .p_icon_copy_all,
    .p_icon_calendar,
    .p_icon_filter,
    .p_icon_calendar_white,
    .p_icon_schedule,
    .p_icon_search,
    .p_icon_calendar-white,
    .p_icon_lock,
    .p_icon_success,
    .p_icon_warning,
    .p_icon_information,
    .p_icon_error,
    .p_icon_arrow_downward,
    .p_icon_content_copy,
    .p_icon_share,
    .p_icon_play_arrow,
    .p_icon_colors,
    .p_icon_preview,
    .p_icon_edit,
    .p_icon_flag,
    .p_icon_settings,
    .p_icon_settings_blue,
    .p_icon_settings_black,
    .p_icon_insertLink,
    .p_icon_contact_pae,
    .p_icon_tune,
    .p_icon_tooltip,
    .p_icon_link,
    .p_icon_link_white,
    .p_icon_compare_blue,
    .p_icon_save,
    .p_icon_format_size,
    .p_icon_format,
    .p_icon_height,
    .p_icon_width,
    .p_icon_tune_white,
    .p_icon_report_white,
    .p_icon_pause_white,
    .p_icon_done_white,
    .p_icon_player_red,
    .p_icon_player_black,
    .p_icon_two_arrows,
    .p_icon_stop_red,
    .p_icon_person_add,
    .p_icon_sheet,
    .p_icon_thumb_down,
    .p_icon_thumb_up,
    .p_icon_support,
    .p_icon_support_agent,
    .p_icon_player,
    .p_icon_instagram,
    .p_icon_menu_book,
    .p_icon_close_gray,
    .p_icon_check_blue,
    .p_icon_radius,
    .p_icon_brush,
    .p_icon_screen,
    .p_icon_settings_grey,
    .p_icon_cut_photo,
    .p_icon_ordered_list,
    .p_icon_add_photo,
    .p_icon_spacing_left,
    .p_icon_spacing_right,
    .p_icon_spacing_top,
    .p_icon_spacing_bottom,
    .p_icon_data_usage,
    .p_icon_play_arrow_black,
    .p_icon_groups,
    .p_icon_devices,
    .p_icon_desktop,
    .p_icon_mobile,
    .p_icon_power,
    .p_icon_apply_w,
    .p_icon-26.p_icon_arrow_red,
    .p_icon-26.p_icon_arrow_green,
    .p_icon-32.p_icon_play,
    .p_icon-32.p_icon_play_circle,
    .p_icon-32.p_icon_menu,
    .p_icon-32.p_icon_done,
    .p_icon.p_icon_shered_black,
    .checked_shered .p_icon.p_icon_shered_black,
    .p_icon.p_icon_notifications,
    .p_icon.p_icon--staus-checked,
    .p_icon.p_icon--staus-info,
    .p_icon.p_icon--staus-failed,
    .p_icon.p_icon--settings,
    .p_icon.p_icon--download_white,
    .p_icon.p_icon--connect_white,
    .p_icon_share.checked_shared
):where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) {
    color: var(--pk-color);
}

/* 3f. Розмір маски = background-size там, де модулі його задають
       (дефолт маски auto = рідний розмір файла, як у background-size: inherit/auto). */
html.pl-kit .p_alert .p_icon_close:where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)),
html.pl-kit .p_icon.p_icon-16.p_icon_close:where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) { -webkit-mask-size: 17.7778px; mask-size: 17.7778px; } /* 16px від 18-бокса close.svg = 17.78px від 20-бокса pl/close */
html.pl-kit .p_icon.p_icon-16:not(.p_icon_close):where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) { -webkit-mask-size: 16px; mask-size: 16px; } /* lost-revenue-finder.css */
html.pl-kit .list-ab .p_icon:where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) { -webkit-mask-size: 16px; mask-size: 16px; }
html.pl-kit .list-ab .p_icon.p_icon_sheet:where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) { -webkit-mask-size: 24px; mask-size: 24px; } /* ab_testing/create.blade.php */
html.pl-kit .p_icon_share.checked_shared:where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) { -webkit-mask-size: 24px; mask-size: 24px; }
html.pl-kit .inside_video:nth-child(2) .p_icon-32.p_icon_play:where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) { -webkit-mask-size: 38px; mask-size: 38px; }
html.pl-kit #menu1 .pf-rules--opts > .row_checked > .p_icon_info:where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) { -webkit-mask-size: 16px; mask-size: 16px; } /* popup-builder.css */
html.pl-kit .page_report_receive .right-sidebar .tab__2666 .parsing_table .p_icon_info:where(:not(.p_icon_mask, .new_close_btn, .new_close_btn1, .close, .icon_question, .icon_list, .tool-info, .search_w_icon, [style*="background"], .wrapper-preview-btns .p_icon, .pf-vid-devices .p_icon, .block-ux .p_btn-danger .p_icon_lock)) { -webkit-mask-size: 14px; mask-size: 14px; } /* seo_report_receive.blade.php */

/* ---------- 4. Компоненти UK1 (resources/views/components/pl/*, <x-p-icon>) ----------
   Класи нові (pl-*), на наявну розмітку не впливають і не залежать від html.pl-kit. */

/* Прихований текст для читачів екрана (status без тексту, опис info-tip). */
.pl-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 4a. Дельта: колір за змістом метрики (good|bad|neutral), знак — текстом. */
.pl-delta {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--pl-muted);
}
.pl-delta--good { color: var(--pl-success); }
.pl-delta--bad { color: var(--pl-danger); }
.pl-delta--neutral { color: var(--pl-muted); }
.pl-delta--badge {
    padding: 0 4px;
    border-radius: var(--pl-radius-pill);
    font-size: 12px;
    line-height: 16px;
    background-color: var(--pl-surface);
}
.pl-delta--badge.pl-delta--good { background-color: var(--pl-success-bg); }
.pl-delta--badge.pl-delta--bad { background-color: var(--pl-danger-bg); }

/* 4b. Статус: гліф 16 / точка 8 кольору статусу + текст --pl-ink. */
.pl-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--pl-ink);
}
.pl-status .pi { vertical-align: 0; }
.pl-status--ok .pl-status__ic { color: var(--pl-success); }
.pl-status--warn .pl-status__ic { color: var(--pl-warn); }
.pl-status--error .pl-status__ic { color: var(--pl-danger); }
.pl-status--neutral .pl-status__ic { color: var(--pl-muted-2); }

/* 4c. Інфо-підказка: кнопка 16 з hit-area 28 (::before), один механізм tooltip (Bootstrap). */
.pl-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--pl-muted-2);
    cursor: help;
    vertical-align: -0.2em;
    line-height: 0;
}
.pl-tip::before {
    content: "";
    position: absolute;
    inset: -6px;
}
.pl-tip:hover,
.pl-tip:focus-visible,
.pl-tip[aria-describedby^="tooltip"] { color: var(--pl-ink); }
.pl-tip:focus { outline: none; }
.pl-tip:focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 2px; }
.pl-tip .pi { vertical-align: 0; }
.tooltip.pl-tooltip { font-family: inherit; font-size: 13px; line-height: 18px; }
.tooltip.pl-tooltip.in { opacity: 1; }
.tooltip.pl-tooltip .tooltip-inner {
    max-width: 280px;
    padding: 6px 8px; /* R3: один вигляд (бриф §4): 13/18, padding 6×8, r4, стрілка, відступ від тригера 8 */
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-ink);
    color: var(--pl-bg);
    text-align: left;
    white-space: normal;
}
.tooltip.pl-tooltip.top .tooltip-arrow { border-top-color: var(--pl-ink); }
.tooltip.pl-tooltip.bottom .tooltip-arrow { border-bottom-color: var(--pl-ink); }
.tooltip.pl-tooltip.left .tooltip-arrow { border-left-color: var(--pl-ink); }
.tooltip.pl-tooltip.right .tooltip-arrow { border-right-color: var(--pl-ink); }

/* 4d. Закрити: кнопка 32, pi-close 20; сіра → hover ink + підкладка. */
.pl-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background: transparent;
    color: var(--pl-muted);
    cursor: pointer;
    line-height: 0;
    transition: color .15s, background-color .15s;
}
.pl-close:hover { color: var(--pl-ink); background-color: var(--pl-surface); }
.pl-close:active { color: var(--pl-ink); background-color: var(--pl-line); }
.pl-close:focus { outline: none; }
.pl-close:focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 2px; }
.pl-close:disabled { color: var(--pl-subtle); background: transparent; cursor: not-allowed; }

/* 4e. Порожній стан: card (ілюстрація 96 + текст + дія) | bar (рядок без ілюстрації). */
.pl-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 16px;
    text-align: center;
    color: var(--pl-muted);
}
.pl-empty__img { display: block; width: 96px; height: 96px; }
.pl-empty__body { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.pl-empty__title { margin: 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--pl-ink); }
.pl-empty__text { margin: 0; font-size: 14px; line-height: 20px; color: var(--pl-muted); }
.pl-empty__body:empty { display: none; }
.pl-empty__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pl-empty--bar {
    flex-direction: row;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    text-align: left;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-surface);
}
.pl-empty--bar .pl-empty__body { max-width: none; }
.pl-empty--bar .pl-empty__title { font-size: 14px; line-height: 20px; }
.pl-empty--bar .pl-empty__act { justify-content: flex-end; }
/* TS6: CTA порожнього стану (card) — 36, як .p_btn_large (рішення власника 14.10), навіть якщо модуль поставив голий .p_btn.
   bar лишає 28: це смуга в таблиці / над нею, сусідні контроли 28 (специфікація /ui: «action 36 | action 28»).
   Вага (0,2,0) = .p_btn.p_btn_large; гілка під html.pl-kit, як 6a. Іконкові — квадрат 36 (як 6b). */
:where(html.pl-kit:not(.pl-kit-noc)) :where(.pl-empty:not(.pl-empty--bar) > .pl-empty__act) .p_btn:not(.p_btn_icon) {
    min-height: var(--pl-h-md);
    padding: 0 12px;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
}
:where(html.pl-kit:not(.pl-kit-noc)) :where(.pl-empty:not(.pl-empty--bar) > .pl-empty__act) .p_btn_icon.p_btn_icon.p_btn_icon {
    min-width: var(--pl-h-md);
    min-height: var(--pl-h-md);
    padding: 0;
}
:where(html.pl-kit:not(.pl-kit-noc)) :where(.pl-empty:not(.pl-empty--bar) > .pl-empty__act) .p_btn:not(.p_btn_icon).is-loading:has(> :is(.p_icon, .pi):first-child)::after { left: 14px; }

/* ---------- 5. Foundations (UC0, _analysis/uikit_components_plan.md §2.3.5) ----------
   Нові класи типографіки. Нічого глобально не перефарбовують (ні body, ні h1–h6). */
.pl-h2 { margin: 0; font-family: var(--pl-font); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--pl-ink); }
.pl-h3 { margin: 0; font-family: var(--pl-font); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--pl-ink); }
.pl-label { font-family: var(--pl-font); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--pl-muted); text-transform: none; letter-spacing: 0; }
.pl-text-2 { font-family: var(--pl-font); font-size: 13px; line-height: 20px; color: var(--pl-muted); }
.pl-caption { font-family: var(--pl-font); font-size: 12px; line-height: 16px; color: var(--pl-muted); }
.pl-code {
    font-family: var(--pl-font-mono);
    font-size: 13px;
    line-height: 20px;
    color: var(--pl-ink);
    background-color: var(--pl-surface);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    padding: 8px 12px;
}
.pl-num { font-variant-numeric: tabular-nums; }

/* 5b. Код (13.10, «Збір даних» QA3): токен у рядку (.pl-code-token) і блок (.pl-codeblock). Без рамки, surface, моно 13/20.
   admin_main дає code{border:1px solid #e1e1e1;box-shadow:…} і pre code{white-space:pre-wrap} — тут усе перебито.
   Підсвітки синтаксису немає. Копіювання — JS сторінки; стан .is-copied (copy → check, success, 1500 мс). */
.pl-code-token { display: inline-flex; align-items: center; gap: var(--pl-space-1); max-width: 100%; min-width: 0; vertical-align: middle; }
.pl-code-token > code {
    display: block; min-width: 0; margin: 0;
    padding: var(--pl-space-1) var(--pl-space-2);
    border: 0; border-radius: var(--pl-radius-sm); box-shadow: none;
    background-color: var(--pl-surface); color: var(--pl-ink);
    font: 400 13px/20px var(--pl-font-mono);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    -webkit-user-select: all; user-select: all;
}
.pl-codeblock { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--pl-space-2); min-width: 0; }
.pl-codeblock__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pl-space-2) var(--pl-space-3); min-width: 0; }
.pl-codeblock__head > .p-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pl-codeblock__head > .p-seg::-webkit-scrollbar { display: none; }
.pl-codeblock__head > .p-seg > :is(a, button) { flex: none; }
.pl-codeblock__title { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--pl-muted); }
.pl-codeblock__copy { margin-left: auto; }
.pl-codeblock__body {
    margin: 0; max-height: 320px; overflow: auto;
    padding: var(--pl-space-3) var(--pl-space-4);
    border: 0; border-radius: var(--pl-radius-sm); box-shadow: none;
    background-color: var(--pl-surface); color: var(--pl-ink);
    font: 400 13px/20px var(--pl-font-mono);
    white-space: pre; word-break: normal; overflow-wrap: normal; tab-size: 4;
}
.pl-codeblock__body > code { display: block; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; color: inherit; font: inherit; white-space: inherit; }
.pl-codeblock__body:focus { outline: none; }
.pl-codeblock__body:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; }
.pl-codeblock--wrap .pl-codeblock__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.pl-copy__done { display: none; }
.is-copied > .pl-copy__idle { display: none; }
.is-copied > .pl-copy__done { display: inline-block; }
/* R6-KIT-DRP: подвоєний .is-copied (0,3,0) — інакше колір варіанта кнопки (:is(.p_btn):is(.p_btn-secondary) 0,2,0, розділ 6 нижче) лишав текст ink. */
:is(.pl-icon-btn, .p_btn).is-copied.is-copied, :is(.pl-icon-btn, .p_btn).is-copied.is-copied .pi { color: var(--pl-success); }
.pl-copy__txt { display: inline-grid; }
.pl-copy__txt > span { grid-area: 1 / 1; }
.pl-copy__txt > span + span, .is-copied .pl-copy__txt > span:first-child { visibility: hidden; }
.is-copied .pl-copy__txt > span + span { visibility: visible; }
/* 5c. R6-KIT-DRP: поле «скопіювати значення» (посилання спільного доступу, ключ): .pl-copy-field > .pl-input[readonly] +
   .p_btn.p_btn-secondary.p_btn_large з .pl-copy__idle/.pl-copy__done + .pl-copy__txt. Висоти 36 і 36, gap 8; поле стискається
   з ellipsis, кнопка — ні. Клік у поле виділяє значення (JS сторінки). Еталон — /ui#kit-ov-share, LRF #modalShareLink. */
.pl-copy-field { display: flex; align-items: center; gap: var(--pl-space-2); min-width: 0; }
.pl-copy-field > .pl-input { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; }
.pl-copy-field > .p_btn { flex: none; }

/* ---------- 6. Компоненти: кнопки (UC1a, _analysis/uikit_components_plan.md §2.1, §2.3.2) ----------
   Глобальне перефарбування legacy-кнопок бандла (theme-plerdy.css .p_btn*) — ТІЛЬКИ під
   :where(html.pl-kit:not(.pl-kit-noc)): клас pl-kit-noc на <html> вимикає компонентний шар,
   лишаючи токени й mask-шар іконок. :where() не додає специфічності, тож модульні CSS, що
   вантажаться пізніше або мають сильніший селектор, і далі виграють (їх мігрують етапи UC4–UC11).
   `.p_btn_icon` у розмітці буває БЕЗ `.p_btn` (30+ місць) — тому база :is(.p_btn, .p_btn_icon).
   Висота — min-height: дворядкова кнопка росте, а не обрізається; модульні height лишаються.
   Нові класи .pl-icon-btn / .pl-count (не legacy) від html.pl-kit не залежать, як компоненти UK1. */

/* 6a. Розмір sm 28 (дефолт .p_btn) і md 36 (.p_btn_large) */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon) {
    min-height: var(--pl-h-sm);
    padding: 0 8px;
    gap: 6px;
    font-family: var(--pl-font);
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    border-radius: var(--pl-radius-sm);
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
}
/* «Довідка» та інші tertiary_large: components.css:79830 знімає вертикальний padding через
   !important, і кнопка мала 27px. min-height 36 повертає висоту без !important-війни. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn_large {
    min-height: var(--pl-h-md);
    padding: 0 12px;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
}

/* 6b. Icon-only — квадрат 28 / 36. Подвоєний клас: перебити бандл
   `.p_btn_icon.p_btn-primary.p_btn_large` (0,3,0, padding 8) і dark 36×28. */
:where(html.pl-kit:not(.pl-kit-noc)) .p_btn_icon.p_btn_icon.p_btn_icon {
    min-width: var(--pl-h-sm);
    min-height: var(--pl-h-sm);
    padding: 0;
    gap: 0;
}
:where(html.pl-kit:not(.pl-kit-noc)) .p_btn_icon.p_btn_icon.p_btn_large {
    min-width: var(--pl-h-md);
    min-height: var(--pl-h-md);
    padding: 0;
}

/* 6c. Варіанти: спокій. :focus без :focus-visible = спокій (бандл малював :focus як :active,
   і кнопка після кліку мишею лишалась «залиплою» темною). */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-primary {
    --pl-btn-c: var(--pl-bg);
    background: var(--pl-brand);
    border: 1px solid var(--pl-brand);
    color: var(--pl-bg);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon):is(.p_btn-light, .p_btn-secondary) {
    --pl-btn-c: var(--pl-ink);
    background: var(--pl-bg);
    border: 1px solid var(--pl-border-input);
    color: var(--pl-ink);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-tertiary {
    --pl-btn-c: var(--pl-link);
    background: transparent;
    border: 1px solid transparent;
    color: var(--pl-link);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-danger {
    --pl-btn-c: var(--pl-danger);
    background: var(--pl-bg);
    border: 1px solid var(--pl-danger);
    color: var(--pl-danger);
}
/* K1 .p_btn-warn — дзеркало danger у жовтому: дія, що відвертає наслідок (ліміт 80%, план закінчується),
   а не видалення. У бандлі цього класу немає — без !important; поза pl-kit (pl-kit-noc) кнопка без кольору. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-warn {
    --pl-btn-c: var(--pl-warn);
    background: var(--pl-bg);
    border: 1px solid var(--pl-warn);
    color: var(--pl-warn);
}

/* 6d. hover / active. Disabled виключено тут, а не перебито пізніше: стан disabled один. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-primary:not(:disabled, .disabled, [aria-disabled="true"]):hover {
    background: var(--pl-brand-hover);
    border-color: var(--pl-brand-hover);
    color: var(--pl-bg);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-primary:not(:disabled, .disabled, [aria-disabled="true"]):active {
    background: var(--pl-brand-active);
    border-color: var(--pl-brand-active);
    color: var(--pl-bg);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon):is(.p_btn-light, .p_btn-secondary):not(:disabled, .disabled, [aria-disabled="true"]):hover {
    background: var(--pl-surface);
    border-color: var(--pl-border-input);
    color: var(--pl-ink);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon):is(.p_btn-light, .p_btn-secondary):not(:disabled, .disabled, [aria-disabled="true"]):active {
    background: var(--pl-line);
    border-color: var(--pl-border-input);
    color: var(--pl-ink);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-tertiary:not(:disabled, .disabled, [aria-disabled="true"]):hover {
    background: var(--pl-surface);
    border-color: transparent;
    color: var(--pl-brand-hover);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-tertiary:not(:disabled, .disabled, [aria-disabled="true"]):active {
    background: var(--pl-surface);
    border-color: transparent;
    color: var(--pl-brand-active);
}
/* !important лише в danger: бандл малює hover/focus/active danger через !important
   (theme-plerdy.css .p_btn-danger:not(:disabled):hover / :focus / :active → #fa938b / #f87c73 і білий текст). */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-danger:not(:disabled, .disabled, [aria-disabled="true"]):focus {
    background: var(--pl-bg) !important;
    color: var(--pl-danger) !important;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-danger:not(:disabled, .disabled, [aria-disabled="true"]):hover {
    background: var(--pl-danger-bg) !important;
    border-color: var(--pl-danger);
    color: var(--pl-danger) !important;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-danger:not(:disabled, .disabled, [aria-disabled="true"]):active {
    background: var(--pl-danger-bg) !important;
    border-color: var(--pl-danger);
    box-shadow: inset 0 0 0 1px var(--pl-danger);
    color: var(--pl-danger) !important;
}
/* K1 .p_btn-warn hover / active — як danger (фон-tint, active = подвійна рамка), без !important (бандл warn не знає). */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-warn:not(:disabled, .disabled, [aria-disabled="true"]):hover {
    background: var(--pl-warn-bg);
    border-color: var(--pl-warn);
    color: var(--pl-warn);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-warn:not(:disabled, .disabled, [aria-disabled="true"]):active {
    background: var(--pl-warn-bg);
    border-color: var(--pl-warn);
    box-shadow: inset 0 0 0 1px var(--pl-warn);
    color: var(--pl-warn);
}

/* 6e. Іконка в secondary: бандл «фарбував» її opacity .7 (ban-list) → колір muted, hover ink.
   Через --pk-color mask-шару (3e малює color: var(--pk-color) сильним правилом). Кольорові
   гліфи (_white/_blue/_red) лишаються своїми. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-secondary .p_icon {
    opacity: 1;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-secondary .p_icon:not([class*="_white"], [class*="_blue"], [class*="_red"], .p_icon_number) {
    --pk-color: var(--pl-muted);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn-secondary:not(:disabled, .disabled, [aria-disabled="true"]):is(:hover, :active) .p_icon:not([class*="_white"], [class*="_blue"], [class*="_red"], .p_icon_number) {
    --pk-color: var(--pl-ink);
}

/* 6f. Focus з клавіатури: ring 2px brand з offset 2 (бандл: outline:0 на всіх .p_btn). */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon):focus-visible {
    outline: var(--pl-focus-outline);
    outline-offset: 2px;
}

/* 6g. Disabled — один стан для :disabled / .disabled / [aria-disabled=true], без opacity
   (бандл: .3 і .5). pointer-events:none у .disabled з бандла лишається (поведінка не змінюється).
   TS3: :not(.is-loading) — disabled + is-loading (кнопку блокують на час запиту) лишає вигляд варіанта
   (primary = brand + білий спінер), інакше білий спінер стояв на --pl-surface і був невидимий.
   :where — щоб специфічність 6g лишилась (0,2,0) і модульні disabled-правила не програли каскад. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon):is(:disabled, .disabled, [aria-disabled="true"]):where(:not(.is-loading)) {
    opacity: 1;
    background: var(--pl-surface);
    border: 1px solid var(--pl-line);
    color: var(--pl-muted-2);
    box-shadow: none;
    cursor: not-allowed;
}
/* !important: mask-шар 3e фарбує іконку правилом (0,4,1); у disabled іконка завжди muted-2
   (§2.1: у кнопці --pl-muted-2, а не --pl-subtle, бо 1.5:1 на сірому не читається). */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon):is(:disabled, .disabled, [aria-disabled="true"]) :is(.p_icon, .pi) {
    opacity: 1;
    color: var(--pl-muted-2) !important;
}

/* 6h. Loading: .is-loading — спінер 16 currentColor замість іконки, ширина не змінюється
   (іконка visibility:hidden тримає місце; без іконки ховається текст, спінер — по центру). */
@keyframes pl-spin { to { transform: rotate(360deg); } }
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).is-loading {
    position: relative;
    opacity: 1; /* TS3: disabled + is-loading виведено з 6g — бандлова opacity .3/.5 для :disabled не повертається */
    pointer-events: none;
    cursor: progress;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).is-loading > :is(.p_icon, .pi) {
    visibility: hidden;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).is-loading::after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 8px);
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid var(--pl-btn-c, currentColor);
    border-right-color: transparent;
    border-radius: 50%;
    animation: pl-spin .8s linear infinite;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).is-loading:has(> :is(.p_icon, .pi):first-child)::after { left: 8px; }
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_btn, .p_btn_icon).p_btn_large.is-loading:has(> :is(.p_icon, .pi):first-child)::after { left: 14px; }
:where(html.pl-kit:not(.pl-kit-noc)) .p_btn.is-loading:not(:has(> :is(.p_icon, .pi))) {
    color: transparent;
}

/* 6i. .pl-icon-btn — icon-only ghost: дії рядка, шапки карток, топбари.
   28 (дефолт, гліф 16) / --compact 32 / --md 36 (гліф 20). aria-label + title з langDb обовʼязкові. */
.pl-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: var(--pl-h-sm);
    height: var(--pl-h-sm);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background: transparent;
    color: var(--pl-muted);
    cursor: pointer;
    line-height: 0;
    text-decoration: none;
    transition: color .15s, background-color .15s;
}
.pl-icon-btn--compact { width: var(--pl-h-compact); height: var(--pl-h-compact); }
.pl-icon-btn--md { width: var(--pl-h-md); height: var(--pl-h-md); }
.pl-icon-btn:hover { color: var(--pl-ink); background-color: var(--pl-surface); text-decoration: none; }
.pl-icon-btn:active { color: var(--pl-ink); background-color: var(--pl-line); }
.pl-icon-btn:focus { outline: none; }
.pl-icon-btn:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; }
.pl-icon-btn--danger:hover { color: var(--pl-danger); } /* кошик у списку: сірий, червоніє на hover */
.pl-icon-btn:is(:disabled, .disabled, [aria-disabled="true"]) { color: var(--pl-subtle); background: transparent; cursor: not-allowed; }
.pl-icon-btn .pi { vertical-align: 0; }

/* 6i-2. K1 .pl-star — перемикач «вибране» (список сайтів у шапці, таблиці сайтів): кнопка 24×24 r4, гліф
   pi-star-16 / pi-star-fill-16 (гліф міняє розмітка/JS разом з aria-pressed). Спокій --pl-subtle, hover
   --pl-surface + --pl-muted; [aria-pressed=true] --pl-star, hover --pl-star-hover. aria-label + title з langDb
   (sm_fav_add / sm_fav_remove). Кнопка окрема від вибору рядка — клік не вибирає сайт.
   .sm-star (sites-mgmt.css) — той самий вигляд, кандидат на аліас .pl-star. */
.pl-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background: transparent;
    color: var(--pl-subtle);
    cursor: pointer;
    line-height: 0;
    vertical-align: middle;
    transition: color .15s, background-color .15s;
}
.pl-star:hover { background-color: var(--pl-surface); color: var(--pl-muted); }
.pl-star[aria-pressed="true"] { color: var(--pl-star); }
.pl-star[aria-pressed="true"]:hover { color: var(--pl-star-hover); }
.pl-star:focus { outline: none; }
.pl-star:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; }
.pl-star:is(:disabled, [aria-disabled="true"]) { background: transparent; cursor: not-allowed; }
.pl-star .pi { vertical-align: 0; }

/* 6j. .pl-count — лічильник у табі / кнопці (аліаси в модулях: .cnt, .dp-tab__cnt, p_icon_number). */
.pl-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-surface);
    color: var(--pl-muted);
    font-family: var(--pl-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
/* .pl-count--on — «є значення» поза вкладками (напр. кількість форм у рядку /admin/report_receive): brand-tint. */
.pl-count--on {
    background-color: var(--pl-brand-bg);
    color: var(--pl-brand);
}
/* TS3: лічильник АКТИВНОЇ вкладки — ink (рішення власника D1, як .p-tabs .on .cnt у p-controls.css
   і .dp-tab.is-on .cnt у detect-pages.css); раніше тут був brand-tint — два правила суперечили. */
:is(.on, [aria-selected="true"], [aria-current="page"]) > .pl-count {
    background-color: var(--pl-ink);
    color: var(--pl-bg);
}

/* ---------- 7. Форми (UC1b, §2.1, §2.3.6) ----------
   Нові класи .pl-* — без html.pl-kit. Перефарбування legacy (.form-control, .p_input_line,
   .nice-select, select2, .daterangepicker, .p_input_checkbox/radio, .p_switch) — під
   :where(html.pl-kit:not(.pl-kit-noc)): колір, radius, focus, шрифт. ВИСОТИ legacy-полів
   глобально НЕ змінюються (форми з фіксованими висотами) — висоту дає опт-ін клас .pl-input /
   .pl-select або модульний етап. */

/* 7a. Поле .pl-input (+ textarea.pl-input) */
.pl-input {
    display: block;
    width: 100%;
    height: var(--pl-h-md);
    padding: 0 12px;
    border: 1px solid var(--pl-border-input);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    box-shadow: none;
    font-family: var(--pl-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--pl-ink);
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.pl-input--compact { height: var(--pl-h-compact); }
.pl-input--sm { height: var(--pl-h-sm); font-size: 13px; }
textarea.pl-input { height: auto; min-height: 72px; padding: 8px 12px; resize: vertical; }
.pl-input--mono { font-family: var(--pl-font-mono); font-size: 13px; }
.pl-input--search, .pl-input--date { padding-left: 36px; } /* іконка pi-search / pi-calendar 16 ліворуч (x=12) — у розмітці */
/* .pl-input-icon — обгортка «іконка в полі» (UC1c): <div class="pl-input-icon"><x-p-icon name="search" size="16"/><input class="pl-input pl-input--search"></div>.
   Іконка 16 стоїть на x=12, 20 — на x=8 (поле резервує padding-left 36 через --search/--date); клік проходить крізь іконку.
   Ширину обгортка не задає: у блоці вона на всю ширину, у .pl-filterbar — за вмістом/flex-ом контексту. */
.pl-input-icon { position: relative; display: block; min-width: 0; }
.pl-input-icon > .pi { position: absolute; left: 12px; top: 50%; margin-top: -8px; color: var(--pl-muted); pointer-events: none; }
.pl-input-icon > .pi-20 { left: 8px; margin-top: -10px; }
.pl-input-icon > .pi:has(~ .pl-input:disabled) { color: var(--pl-subtle); }
/* CHD0: очищення пошуку (патерн SEO .seo-search-clear) — <button class="pl-icon-btn pl-input-icon__clear"> після input.
   Ховається, коли поле порожнє: [hidden] з JS або :placeholder-shown (тому input з placeholder). */
.pl-input-icon:has(> .pl-input-icon__clear) > .pl-input { padding-right: 32px; }
.pl-input-icon > .pl-input-icon__clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.pl-input-icon > .pl-input-icon__clear[hidden],
.pl-input-icon > .pl-input:placeholder-shown ~ .pl-input-icon__clear { display: none; }
.pl-input::placeholder { color: var(--pl-muted-2); opacity: 1; }
.pl-input:focus { border-color: var(--pl-brand); box-shadow: var(--pl-focus-ring); }
.pl-input:is(.is-invalid, [aria-invalid="true"]) { border-color: var(--pl-danger); }
.pl-input:is(.is-invalid, [aria-invalid="true"]):focus { box-shadow: var(--pl-danger-ring); }
.pl-input:is(:disabled, [readonly]) { background-color: var(--pl-surface); border-color: var(--pl-line); color: var(--pl-muted); box-shadow: none; }
.pl-input:disabled { cursor: not-allowed; }
.pl-field { display: flex; flex-direction: column; min-width: 0; }
.pl-field > .pl-label { margin-bottom: 6px; }
.pl-hint { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--pl-muted); }
.pl-error { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--pl-danger); }
.pl-counter { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--pl-muted); font-variant-numeric: tabular-nums; }
/* .pl-field__foot — рядок під полем (UC1c): підказка/помилка ліворуч, .pl-counter праворуч (flex, щоб margin-left:auto працював).
   Сумісність: .pl-hint, який уже містить .pl-counter, теж стає flex-рядком. */
.pl-field__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-top: 4px; }
.pl-field__foot > :is(.pl-hint, .pl-error) { margin-top: 0; min-width: 0; }
.pl-field__foot > .pl-counter { flex: none; }
/* 7c. .pl-form-row — поля в ряд, кнопка дії на лінії поля (label над полем). flex-start, а не flex-end:
   .pl-error / .pl-hint під полем не зсувають кнопку. Відступ кнопки = .pl-label (16) + відступ label (6). */
.pl-form-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--pl-space-3); }
.pl-form-row > .pl-field { flex: 1 1 240px; }
.pl-form-row > :is(.p_btn, .pl-form-row__actions) { flex: none; margin-top: 22px; }
.pl-form-row__actions { display: flex; gap: var(--pl-space-2); }
/* Ширини поля: у рядку — межа гнучкої основи, поза рядком — max-width. */
.pl-field--xs { flex: 0 1 120px; max-width: 120px; }
.pl-field--s { flex: 0 1 240px; max-width: 240px; }
.pl-field--m { flex: 0 1 360px; max-width: 360px; }
.pl-field--l { flex: 0 1 480px; max-width: 480px; }
.pl-form-row > .pl-field--xs { flex: 0 1 120px; }
.pl-form-row > .pl-field--s { flex: 0 1 240px; }
.pl-form-row > .pl-field--m { flex: 0 1 360px; }
.pl-form-row > .pl-field--l { flex: 0 1 480px; }
@media (max-width: 640px) {
    .pl-form-row > .pl-field, .pl-form-row > [class*="pl-field--"] { flex-basis: 100%; max-width: none; }
    .pl-form-row > :is(.p_btn, .pl-form-row__actions) { margin-top: 0; }
}
.pl-hint:has(> .pl-counter) { display: flex; justify-content: space-between; gap: 8px; }

/* 7b. Legacy-поля: .form-control (Bootstrap/Metronic, 9 різних :focus), .p_input_line, .p_textarea_line.
   Висота .form-control (34/38) лишається. readonly legacy-полів не сірішає: це часто тригери
   date-picker-а (readonly = вигляд спокою); сірий readonly — лише в .pl-input. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.form-control, .p_input_line input, .p_input_line #password_del, .p_textarea_line textarea) {
    border-color: var(--pl-border-input);
    border-radius: var(--pl-radius-sm);
    color: var(--pl-ink);
    font-family: var(--pl-font);
}
:where(html.pl-kit:not(.pl-kit-noc)) .form-control {
    box-shadow: none;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.form-control, .p_input_line input, .p_textarea_line textarea)::placeholder {
    color: var(--pl-muted-2);
    opacity: 1;
}
/* Один focus замість 9 legacy-правил (Bootstrap-блакитний, сірий, Metronic-сині — §2.3.6 «Focus-legacy»).
   (0,2,0) у :is() перебиває `.has-error .form-control:focus` і подібні (0,2,0) порядком. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.form-control, .p_input_line input, .p_input_line #password_del, .p_textarea_line textarea):is(:focus, :focus:active) {
    border-color: var(--pl-brand);
    box-shadow: var(--pl-focus-ring);
    outline: 0;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.form-control, .p_input_line input, .p_textarea_line textarea):is(.is-invalid, .p_input_invalid, [aria-invalid="true"]) {
    border-color: var(--pl-danger);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.form-control, .p_input_line input, .p_textarea_line textarea):is(.is-invalid, .p_input_invalid, [aria-invalid="true"]):focus {
    box-shadow: var(--pl-danger-ring);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.form-control, .p_input_line input, .p_textarea_line textarea):disabled {
    background-color: var(--pl-surface);
    border-color: var(--pl-line);
    color: var(--pl-muted);
    box-shadow: none;
}

/* 7c. Select .pl-select — оболонка для nice-select (простий вибір) і select2 (пошук / мульти).
   Повна шкура (висота 36, шеврон pi-chevron-down 16 маскою, поворот у .open) — опт-ін:
   клас .pl-select на .nice-select (або на обгортці). Legacy .nice-select без класу отримує лише
   колір, radius, focus і список-меню: у бандлі/модулях 36 різних оверрайдів стрілки :after
   (розміри 4–10px, власні SVG), тому глобальна заміна стрілки зламала б їх. */
.nice-select.pl-select,
.pl-select .nice-select {
    float: none;
    display: inline-flex;
    align-items: center;
    height: var(--pl-h-md);
    min-height: 0;
    padding: 0 32px 0 12px;
    border: 1px solid var(--pl-border-input);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    font-family: var(--pl-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--pl-ink);
}
.nice-select.pl-select--compact, .pl-select--compact .nice-select { height: var(--pl-h-compact); }
.nice-select.pl-select--sm, .pl-select--sm .nice-select { height: var(--pl-h-sm); font-size: 13px; padding-right: 28px; }
.nice-select.pl-select::after,
.pl-select .nice-select::after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 10px;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 0;
    background: currentColor;
    color: var(--pl-muted);
    -webkit-mask: url('/public/images/icon/pl/16/chevron-down.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/chevron-down.svg?v=20261013r3') center / 16px 16px no-repeat;
    transform: none;
    transition: transform .15s;
}
.nice-select.pl-select.open::after,
.pl-select .nice-select.open::after { transform: rotate(180deg); }
.nice-select.pl-select .current,
.pl-select .nice-select .current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nice-select.pl-select .list .option.selected,
.pl-select .nice-select .list .option.selected { padding-right: 32px; position: relative; }
.nice-select.pl-select .list .option.selected::after,
.pl-select .nice-select .list .option.selected::after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 10px;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
}

/* Legacy nice-select: рамка/radius/колір/focus. */
:where(html.pl-kit:not(.pl-kit-noc)) .nice-select {
    border-color: var(--pl-border-input);
    border-radius: var(--pl-radius-sm);
    color: var(--pl-ink);
    font-family: var(--pl-font);
}
:where(html.pl-kit:not(.pl-kit-noc)) .nice-select:is(:focus, .open) {
    border-color: var(--pl-brand);
    box-shadow: var(--pl-focus-ring);
    outline: 0;
}
:where(html.pl-kit:not(.pl-kit-noc)) .nice-select.disabled {
    background-color: var(--pl-surface);
    border-color: var(--pl-line);
    color: var(--pl-muted-2);
}
/* Список nice-select = .pl-menu: r4, рамка line, тінь overlay, padding 4, пункт 32. */
:where(html.pl-kit:not(.pl-kit-noc)) .nice-select .list {
    margin-top: 4px;
    padding: 4px;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    box-shadow: var(--pl-shadow-overlay);
}
:where(html.pl-kit:not(.pl-kit-noc)) .nice-select .option {
    min-height: var(--pl-h-compact);
    padding: 6px 12px;
    border-radius: var(--pl-radius-sm);
    font-size: 14px;
    line-height: 20px;
    color: var(--pl-ink);
}
:where(html.pl-kit:not(.pl-kit-noc)) .nice-select .option:is(:hover, .focus, .selected.focus) {
    background-color: var(--pl-surface);
}
:where(html.pl-kit:not(.pl-kit-noc)) .nice-select .option.selected {
    color: var(--pl-brand);
    font-weight: 500;
}
:where(html.pl-kit:not(.pl-kit-noc)) .nice-select .option.disabled {
    color: var(--pl-muted-2);
    background-color: transparent;
}

/* select2 v3 (бандл: plugins/select2/select2.css) і v4 (assets/global/css/select2.min.css):
   ті самі значення — рамка, radius, focus, список-меню, теги мульти = badge neutral. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.select2-container .select2-choice, .select2-container-multi .select2-choices, .select2-container--default .select2-selection) {
    border-color: var(--pl-border-input);
    border-radius: var(--pl-radius-sm);
    background-image: none;
    background-color: var(--pl-bg);
    box-shadow: none;
    color: var(--pl-ink);
    font-family: var(--pl-font);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.select2-container-active .select2-choice, .select2-container-active .select2-choices, .select2-dropdown-open .select2-choice, .select2-container--focus .select2-selection, .select2-container--open .select2-selection) {
    border-color: var(--pl-brand);
    box-shadow: var(--pl-focus-ring);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.select2-drop, .select2-container--default .select2-dropdown, .select2-dropdown) {
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    box-shadow: var(--pl-shadow-overlay);
    font-family: var(--pl-font);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.select2-results .select2-highlighted, .select2-container--default .select2-results__option--highlighted[aria-selected]) {
    background-color: var(--pl-surface);
    color: var(--pl-ink);
}
:where(html.pl-kit:not(.pl-kit-noc)) .select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: transparent;
    color: var(--pl-brand);
    font-weight: 500;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.select2-search input, .select2-search-field input, .select2-container--default .select2-search--dropdown .select2-search__field) {
    border-color: var(--pl-border-input);
    border-radius: var(--pl-radius-sm);
    font-family: var(--pl-font);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.select2-container-multi .select2-choices .select2-search-choice, .select2-container--default .select2-selection--multiple .select2-selection__choice) {
    margin-top: 4px;
    padding: 2px 6px 2px 20px;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background-image: none;
    background-color: var(--pl-surface);
    box-shadow: none;
    color: var(--pl-muted);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
}

/* select2 в оболонці .pl-select (UC1c): та сама висота, що в nice-select (36 / --compact 32 / --sm 28), шеврон pi-chevron-down 16
   замість спрайта select2.png. Опт-ін, як і nice-select: legacy select2 поза .pl-select лишається з бандловою висотою. */
.pl-select { --pl-s2-h: var(--pl-h-md); }
.pl-select--compact { --pl-s2-h: var(--pl-h-compact); }
.pl-select--sm { --pl-s2-h: var(--pl-h-sm); }
.pl-select .select2-container .select2-choice {
    height: var(--pl-s2-h);
    padding: 0 0 0 12px;
    line-height: calc(var(--pl-s2-h) - 2px);
    font-size: 14px;
}
.pl-select--sm .select2-container .select2-choice { font-size: 13px; }
.pl-select .select2-container .select2-choice > .select2-chosen { margin-right: 32px; }
.pl-select .select2-container .select2-choice .select2-arrow { width: 32px; border-left: 0; border-radius: 0 var(--pl-radius-sm) var(--pl-radius-sm) 0; background: none; }
.pl-select .select2-container .select2-choice .select2-arrow b {
    position: absolute;
    top: calc(50% - 8px);
    right: 10px;
    width: 16px;
    height: 16px;
    background: var(--pl-muted);
    -webkit-mask: url('/public/images/icon/pl/16/chevron-down.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/chevron-down.svg?v=20261013r3') center / 16px 16px no-repeat;
    transition: transform .15s;
}
.pl-select .select2-dropdown-open .select2-choice .select2-arrow b { transform: rotate(180deg); }
.pl-select .select2-container-multi .select2-choices { min-height: var(--pl-s2-h); padding: 0 8px 0 4px; }
.pl-select .select2-container-multi .select2-choices .select2-search-field input { height: calc(var(--pl-s2-h) - 10px); margin: 4px 0; padding: 0 4px; font-family: var(--pl-font); font-size: 14px; color: var(--pl-ink); }
/* select2 v4 */
.pl-select .select2-container--default .select2-selection--single { height: var(--pl-s2-h); }
.pl-select .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 12px; padding-right: 32px; line-height: calc(var(--pl-s2-h) - 2px); font-size: 14px; color: var(--pl-ink); }
.pl-select .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(var(--pl-s2-h) - 2px); width: 32px; }
.pl-select .select2-container--default .select2-selection--single .select2-selection__arrow b { display: none; }
.pl-select .select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    right: 10px;
    width: 16px;
    height: 16px;
    background: var(--pl-muted);
    -webkit-mask: url('/public/images/icon/pl/16/chevron-down.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/chevron-down.svg?v=20261013r3') center / 16px 16px no-repeat;
}
.pl-select .select2-container--default .select2-selection--multiple { min-height: var(--pl-s2-h); }

/* 7d. Date range picker. Тригер = .pl-input + pi-calendar 16 ліворуч (.pl-input--date) — у розмітці модуля.
   Поповер .daterangepicker — ГЛОБАЛЬНО (R6-KIT-DRP, 15.10): і локальний форк
   public/assets/date_range_picker (.daterangepicker--v1: дашборд, Session Replay, Heatmaps, Events, Funnels, Forms),
   і CDN-версія на LRF (з «Порівняти з»). Розкладку, позицію, зсув від тригера (translateY / margin модулів),
   opensleft/right/center і drop-up НЕ чіпаємо — лише шкура.
   Префікс P = html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) (1,3,1): :not(#id) дає вагу id,
   тож kit перебиває модульні class-правила (LRF (0,6,1), form-analytics, heatmaps) без латок у модулях;
   !important — лише там, де !important стоїть у бандлі (components.css: border:none, ranges li bg/border,
   td.in-range radius, td.off.ends.active bg, applyBtn bg-image/display, cancelBtn bg-image/font-size).
   Рубильник pl-kit-noc вимикає весь блок.
   Колір вибору = brand (вибір значення, як .pl-menu is-selected), НЕ ink: ink — лише навігаційні вибори
   (таб, сегмент, крок; рішення 13.10). */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) {
    border: 1px solid var(--pl-line) !important;
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    box-shadow: var(--pl-shadow-overlay);
    font-family: var(--pl-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--pl-ink);
}
/* Трикутник-«хвостик» до тригера — не kit (поповери kit без стрілки). */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x)::before,
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x)::after { content: none; display: none; }

/* Пресети = .pl-menu: padding 4, пункт 32, 0 12, r4, 14/20; hover surface; вибраний brand 500 + pi-check 16,
   без заливки і без смуги. Роздільник із календарем — --pl-line. */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .ranges ul {
    padding: 4px;
    border-right-color: var(--pl-line);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .ranges li {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--pl-h-compact);
    margin: 0;
    padding: 0 12px;
    border: 0 !important;
    border-radius: var(--pl-radius-sm) !important;
    outline: none;
    background: transparent !important;
    font: 400 14px/20px var(--pl-font);
    color: var(--pl-ink);
    transition: background-color .15s;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .ranges li:hover {
    background: var(--pl-surface) !important;
    color: var(--pl-ink);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .ranges li.active {
    color: var(--pl-brand);
    font-weight: 500;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .ranges li.active::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-color: currentColor;
    -webkit-mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
}

/* Календар: місяць 14/20 600; дні тижня 12/16 500 muted; клітинка 32×32, 13/20, r4. */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table :is(th, td) {
    height: 32px;
    padding: 0;
    border: 0 !important;
    border-radius: var(--pl-radius-sm);
    font-family: var(--pl-font);
    font-size: 13px;
    line-height: 20px;
    vertical-align: middle;
    text-align: center;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table td,
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table th:not(.month) {
    min-width: 32px;
    width: 32px;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table th.month {
    font-size: 14px;
    font-weight: 600;
    color: var(--pl-ink);
    cursor: default;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table thead tr:last-child th {
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--pl-muted);
    cursor: default;
}
/* Стрілки місяців = ghost icon-button 32 + pi-chevron-left/right 20 маскою з набору спрайта
   (замість CSS-«галочки» з рамок бандла і chevron_down.svg LRF; i.fa старої версії бібліотеки — теж). */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table :is(th.prev, th.next) {
    color: var(--pl-ink);
    background: transparent;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table :is(th.prev, th.next).available:hover {
    background-color: var(--pl-surface);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table :is(th.prev, th.next) > :is(span, i) {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    transform: none !important;
    color: inherit; /* бібліотека: .prev span{color:#fff} — інакше currentColor = білий гліф */
    background-color: currentColor !important;
    background-image: none !important;
    font-size: 0;
    vertical-align: middle;
    -webkit-mask: url('/public/images/icon/pl/20/chevron-left.svg?v=20261013r3') center / 20px 20px no-repeat;
    mask: url('/public/images/icon/pl/20/chevron-left.svg?v=20261013r3') center / 20px 20px no-repeat;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table th.next > :is(span, i) {
    -webkit-mask-image: url('/public/images/icon/pl/20/chevron-right.svg?v=20261013r3');
    mask-image: url('/public/images/icon/pl/20/chevron-right.svg?v=20261013r3');
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table :is(th.prev, th.next) > i::before { content: none; }

/* Дні. Порядок важливий (однакова вага): звичайний → hover → діапазон → кінці → інший місяць → недоступний. */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) td.available {
    background-color: transparent;
    background-image: none;
    color: var(--pl-ink);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) td.available:not(.in-range, .active):hover {
    background-color: var(--pl-surface);
    color: var(--pl-ink);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) td.in-range,
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) td.in-range:hover {
    background-color: var(--pl-brand-bg);
    background-image: none;
    border-radius: 0 !important;
    color: var(--pl-ink);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) td:is(.active, .start-date, .end-date),
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) td:is(.active, .start-date, .end-date):hover {
    background-color: var(--pl-brand);
    background-image: none;
    border-radius: var(--pl-radius-sm) !important;
    color: var(--pl-bg);
    pointer-events: auto;
}
/* Дні сусіднього місяця: без підсвітки вибору — діапазон уже видно в «своєму» місяці
   (бандл фарбував їх #E5E5E5/#999 з !important, kit — дублював brand-bg). */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) td.off,
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) td.off:is(.in-range, .start-date, .end-date, .active) {
    background-color: transparent !important;
    background-image: none !important;
    border-radius: var(--pl-radius-sm) !important;
    color: var(--pl-muted-2);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) td.off.available:hover {
    background-color: var(--pl-surface) !important;
}
/* Недоступні (поза min/max): --pl-subtle, без закреслення, без hover. */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) td.disabled {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--pl-subtle);
    text-decoration: none;
    cursor: not-allowed;
}

/* Футер: підсумок 12/16 muted; Apply = kit primary 36 з pi-check 20; Cancel = .pl-close 32 у куті. */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-buttons { border-top-color: var(--pl-line); }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-selected {
    font: 400 12px/16px var(--pl-font);
    color: var(--pl-muted);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .applyBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: var(--pl-h-md);
    min-height: var(--pl-h-md);
    padding: 0 12px;
    border: 1px solid var(--pl-brand);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-brand);
    background-image: none !important;
    box-shadow: none;
    font: 500 14px/20px var(--pl-font);
    color: var(--pl-bg);
    text-shadow: none;
    transition: background-color .15s, border-color .15s;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .applyBtn::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    background-image: none;
    -webkit-mask: url('/public/images/icon/pl/20/check.svg?v=20261013r3') center / 20px 20px no-repeat;
    mask: url('/public/images/icon/pl/20/check.svg?v=20261013r3') center / 20px 20px no-repeat;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .applyBtn:not(:disabled):is(:hover, :focus) {
    border-color: var(--pl-brand-hover);
    background-color: var(--pl-brand-hover);
    color: var(--pl-bg);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .applyBtn:not(:disabled):active {
    border-color: var(--pl-brand-active);
    background-color: var(--pl-brand-active);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .applyBtn:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .applyBtn:disabled {
    border-color: var(--pl-line);
    background-color: var(--pl-surface);
    color: var(--pl-muted-2);
    opacity: 1;
    cursor: not-allowed;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .cancelBtn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: var(--pl-radius-sm);
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none;
    color: var(--pl-muted);
    font-size: 0 !important;
    line-height: 0;
    transition: color .15s, background-color .15s;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .cancelBtn::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url('/public/images/icon/pl/20/close.svg?v=20261013r3') center / 20px 20px no-repeat;
    mask: url('/public/images/icon/pl/20/close.svg?v=20261013r3') center / 20px 20px no-repeat;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .cancelBtn:hover {
    background-color: var(--pl-surface) !important;
    color: var(--pl-ink);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .cancelBtn:active {
    background-color: var(--pl-line) !important;
    color: var(--pl-ink);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .cancelBtn:focus { outline: none; }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) :is(.drp-buttons, .range_inputs) .cancelBtn:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; }

/* ---------- R6b-KIT-DRP: 7d-cmp. Порівняння періодів у календарі («Порівняти з») ----------
   Розмітку будує JS сторінки (LRF: public/js/lost-revenue-finder.js; еталон — /ui#kit-dr-compare), бібліотека не форкнута:
     .drp-ranges-wrap > .ranges + .drp-compare > .row > label.opt.toggle(input[type=checkbox] + .slider + текст)
                                                     + label.opt.radio-toggle(input[type=radio] + текст) × N
     .drp-right-wrap  > .drp-calendar-right-wrap(.drp-calendar.left + .right) + .drp-buttons(.drp-selected-inputs > .range.cur-range | .range.cmp-range
                        > input.cmp-input.cur|.cmp + .dash + input) + cancel + apply
   Дні порівняння — класи td.cmp-in-range / .cmp-start / .cmp-end (isCustomDate бібліотеки). Колір — --pl-compare (токени в :root).
   Перемикач = kit switch S 28×16; опції = пункти .pl-menu з відступом під текст перемикача (48), вибрана — brand 500 + pi-check 16;
   поля дат = .pl-input 36 (рамка — колір серії: основний brand, порівняння --pl-compare); id у селекторах kit немає. */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .row { display: flex; flex-direction: column; margin: 0; padding: 0 4px; }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--pl-h-compact);
    margin: 0;
    padding: 0 12px;
    border-radius: var(--pl-radius-sm);
    font: 400 14px/20px var(--pl-font);
    color: var(--pl-ink);
    cursor: pointer;
    transition: background-color .15s;
}
/* input лишається у фокус-порядку (було display:none — перемикач не діставався з клавіатури) */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt > input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt:not(:has(> input:disabled)):hover { background-color: var(--pl-surface); }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt:has(> input:focus-visible) { outline: var(--pl-focus-outline); outline-offset: -2px; }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt.toggle .slider {
    position: relative;
    flex: none;
    width: 28px;
    height: 16px;
    margin: 0;
    border-radius: var(--pl-radius-round);
    background-color: var(--pl-subtle);
    transition: background-color .15s;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt.toggle .slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: var(--pl-radius-round);
    background-color: var(--pl-bg);
    transition: transform .15s;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt.toggle > input:checked + .slider { background-color: var(--pl-brand); }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt.toggle > input:checked + .slider::before { transform: translateX(12px); }
/* опції залежать від перемикача: текст на одній осі з його підписом (12 + 28 + 8) */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt.radio-toggle { padding-left: 48px; }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt.radio-toggle:has(> input:disabled) { color: var(--pl-muted-2); font-weight: 400; cursor: not-allowed; }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt.radio-toggle:has(> input:checked:not(:disabled)) { color: var(--pl-brand); font-weight: 500; }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-compare .opt.radio-toggle:has(> input:checked:not(:disabled))::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-color: currentColor;
    -webkit-mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
}
/* Поля дат основного й порівняльного періоду. */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-selected-inputs .range .dash { color: var(--pl-muted); opacity: 1; }
/* R6d-KIT-DRP: поля-слоти (варіант А, _analysis/lrf_cmp_inputs_ux.md). Значення — дата з назвою місяця за мовою UI,
   тому ширина 150: найдовше з 10 мов при 14px — es «30 de sept. de 2026» 123 px (pt 115, ua «30 листоп. 2026» 104,
   ru «30 сент. 2026 г.» 101, jp 98) + padding 12+12 + рамки. Висота 32 (= .pl-input--compact: поля в поповері, kit §7).
   Колір серії — --cmp-c (основний brand / порівняння --pl-compare). Стани за пріоритетом: disabled > invalid > активний слот
   (.is-active або :focus: рамка серії 2px = 1px + inset 1px, ring серії, фон білий) > hover > спокій (рамка серії на 45%,
   щоб активний слот читався без фокуса). */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input {
    --cmp-c: var(--pl-brand);
    --cmp-ring: var(--pl-focus-ring);
    box-sizing: border-box;
    width: 150px;
    height: var(--pl-h-compact);
    margin: 0;
    padding: 0 12px; /* R6c-KIT-DRP: = .pl-input; поля текстові, нативної іконки немає */
    border: 1px solid var(--pl-border-input);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    box-shadow: none;
    font: 400 14px/20px var(--pl-font);
    color: var(--pl-ink);
    text-overflow: ellipsis;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input.cmp { --cmp-c: var(--pl-compare); --cmp-ring: var(--pl-compare-ring); }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input:is(.cur, .cmp) {
    border-color: var(--cmp-c);
    border-color: color-mix(in srgb, var(--cmp-c) 45%, var(--pl-bg));
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input:is(.cur, .cmp):hover { border-color: var(--cmp-c); }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input:is(.cur, .cmp):is(.is-active, :focus) {
    border-color: var(--cmp-c);
    background-color: var(--pl-bg);
    box-shadow: inset 0 0 0 1px var(--cmp-c), var(--cmp-ring);
}
/* R6c: помилка (= .pl-input[aria-invalid]) перемагає серію й активний слот; placeholder = kit. */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input:is(.is-invalid, [aria-invalid="true"]),
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input:is(.is-invalid, [aria-invalid="true"]):hover { border-color: var(--pl-danger); box-shadow: none; }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input:is(.is-invalid, [aria-invalid="true"]):is(.is-active, :focus) { border-color: var(--pl-danger); box-shadow: inset 0 0 0 1px var(--pl-danger), var(--pl-danger-ring); }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input:disabled,
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input:disabled:is(.is-active, :focus, :hover) { border-color: var(--pl-line); background-color: var(--pl-surface); box-shadow: none; color: var(--pl-muted); cursor: not-allowed; }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .cmp-input::placeholder { color: var(--pl-muted-2); opacity: 1; }
/* R6d-KIT-DRP: підпис рядка = .pl-label (12/16 600 muted) + крапка-легенда 8 кольору серії; над рядком полів (див. ≥990). */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-selected-inputs .cmp-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font: 600 12px/16px var(--pl-font);
    color: var(--pl-muted);
    white-space: nowrap;
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-selected-inputs .cmp-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: var(--pl-radius-round);
    background-color: var(--pl-brand);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-selected-inputs .cmp-dot.cmp { background-color: var(--pl-compare); }
/* Дні періоду порівняння: заливка --pl-compare-bg поверх будь-якого фону (inset-тінь лягає й на brand-bg основного діапазону),
   кінці — ще кільце 2px --pl-compare; дні сусіднього місяця не підсвічуються (як і основний діапазон, 7d). */
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table td.cmp-in-range { box-shadow: inset 0 0 0 9999px var(--pl-compare-bg); }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table td.cmp-in-range:not(.active, .start-date, .end-date, .cmp-start, .cmp-end) { border-radius: 0 !important; }
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table td:is(.cmp-start, .cmp-end) {
    border-radius: var(--pl-radius-sm) !important;
    box-shadow: inset 0 0 0 2px var(--pl-compare), inset 0 0 0 9999px var(--pl-compare-bg);
}
html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .calendar-table td.off:is(.cmp-in-range, .cmp-start, .cmp-end) { box-shadow: none; }
/* Розкладка варіанта з порівнянням (≥ 990, як у LRF; вужче — модуль). Ті самі значення, що в lost-revenue-finder.css,
   тут — щоб еталон /ui виглядав так само без CSS модуля. */
@media (min-width: 990px) {
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x):has(> .drp-right-wrap) { padding: 0 40px 0 0; }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-ranges-wrap {
        display: flex;
        flex-direction: column;
        gap: 8px;
        float: left;
        width: max-content;
        min-width: 206px;
        padding: 12px 0;
        border-right: 0; /* R6c-KIT-DRP: роздільник — на .drp-right-wrap (див. нижче) */
    }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-ranges-wrap .ranges { float: none; width: 100%; margin: 0; border-bottom: 1px solid var(--pl-line); }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-ranges-wrap .ranges ul { width: 100%; border: 0; }
    /* R6c-KIT-DRP: роздільник колонок — border-left правої частини, а не border-right колонки пресетів. Колонка пресетів — float,
       і вона на всю висоту лише тоді, коли контейнер flex (LRF ставить це інлайном у JS); без того лінія обривалась на 361 з 392 px.
       Права частина завжди найвища, тож її лінія — на всю висоту поповера в будь-якому контексті (LRF, /ui). */
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-right-wrap { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 20px; border-left: 1px solid var(--pl-line); }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-calendar-right-wrap { display: flex; flex-direction: row; gap: 8px; }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-calendar-right-wrap .drp-calendar { display: block; float: none; padding: 0; border: 0; }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-calendar-right-wrap .calendar-table { padding: 0; border: 0; }
    /* R6d-KIT-DRP: підписи над рядками полів — збоку не влазять (підпис 39–85 px + 2 поля 150 + Apply 137 > 456 px футера).
       Щоб поповер виріс ≤ 20 px: поля 32 (compact), між рядками 4, футер без верхнього відступу (його дає gap 8 правої частини),
       тире з відступами 4; Apply — по нижньому краю останнього рядка, без зайвого margin-left 8 від LRF. */
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-right-wrap .drp-buttons { display: flex; flex-direction: row; align-items: flex-end; justify-content: flex-end; gap: 12px; padding: 0; border: 0; line-height: 20px; }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-right-wrap .drp-buttons .applyBtn { margin: 0; }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-selected-inputs { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-selected-inputs .range { display: grid; grid-template-columns: auto auto auto; align-items: center; column-gap: 4px; row-gap: 2px; }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-selected-inputs .range[style*="display: none"] { display: none; }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-selected-inputs .range > .cmp-label { grid-column: 1 / -1; }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-selected-inputs .range .dash { display: block; }
    html.pl-kit:not(.pl-kit-noc) .daterangepicker:not(#pl-drp-x) .drp-right-wrap .drp-buttons .cancelBtn { position: absolute; top: 4px; right: 4px; }
}
/* ---------- /R6b-KIT-DRP ---------- */

/* 7e. Checkbox .pl-checkbox (нативний input) і legacy .p_input_checkbox / .p_input_radio (uniform). */
.pl-checkbox {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid var(--pl-border-input);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    cursor: pointer;
    vertical-align: -0.2em;
    position: relative;
}
.pl-checkbox:checked { background-color: var(--pl-brand); border-color: var(--pl-brand); }
.pl-checkbox:checked::after {
    content: "";
    position: absolute;
    inset: -1px;
    background-color: var(--pl-bg);
    -webkit-mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
}
.pl-checkbox:focus { outline: none; }
.pl-checkbox:focus-visible { box-shadow: var(--pl-focus-ring); border-color: var(--pl-brand); }
.pl-checkbox:disabled { background-color: var(--pl-surface); border-color: var(--pl-line); cursor: not-allowed; }
.pl-checkbox:disabled:checked { background-color: var(--pl-subtle); border-color: var(--pl-subtle); }
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_input_checkbox .checker span, .p_input_radio .radio span):not(.checked),
:where(html.pl-kit:not(.pl-kit-noc)) .p_input_checkbox > input[type=checkbox]:not(:checked)::before {
    border-color: var(--pl-border-input);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_input_checkbox .checker, .p_input_radio .radio).focus span {
    box-shadow: var(--pl-focus-ring);
}
:where(html.pl-kit:not(.pl-kit-noc)) .p_input_checkbox > input[type=checkbox]:focus-visible::before {
    box-shadow: var(--pl-focus-ring);
}

/* 7f. Switch .p_switch: M 36×20, S 28×16, pill (виняток), off-трек --pl-subtle, on --pl-brand.
   !important: бандл задає трек `.p_switch .checker span{background:#E5E5E5!important}`. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_switch .checker span, .p_slider) {
    background-color: var(--pl-subtle) !important;
    border-radius: var(--pl-radius-round);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.p_switch .checker span.checked, input:checked + .p_slider) {
    background-color: var(--pl-brand) !important;
}
:where(html.pl-kit:not(.pl-kit-noc)) .p_switch .checker.focus span {
    box-shadow: var(--pl-focus-ring);
}
/* CHD0: .is-busy — тумблер з автозбереженням на час запиту: не клікається, приглушений; input теж disabled.
   Після відповіді клас знімається; помилка — відкат стану + тост. */
.p_switch.is-busy { pointer-events: none; opacity: .6; }

/* ---------- 8. Таблиці й пейджер (UC1b, §2.1, §2.3.7) ---------- */

/* 8a. .pl-table — еталон Revenue. Межі рядків, без zebra; th 40 nowrap 12/16 600 ink на surface. */
.pl-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--pl-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--pl-ink);
    background-color: var(--pl-bg);
}
.pl-table > thead > tr > th {
    height: 40px;
    padding: 0 12px;
    border-bottom: 1px solid var(--pl-line);
    background-color: var(--pl-surface);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--pl-ink);
    text-align: left;
    text-transform: none;
    white-space: nowrap;
    vertical-align: middle;
}
.pl-table > tbody > tr > td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--pl-line);
    vertical-align: middle;
}
.pl-table > tbody > tr:hover > td { background-color: var(--pl-row-hover); }
.pl-table :is(th, td).pl-num, .pl-table :is(th, td).is-num { text-align: right; font-variant-numeric: tabular-nums; }
.pl-table td.is-date { color: var(--pl-muted); }
.pl-table td.is-trunc { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-table--dense > tbody > tr > td { padding: 6px 12px; font-size: 13px; line-height: 18px; }
.pl-table tr.is-total > td, .pl-table > tfoot > tr > td { background-color: var(--pl-surface); font-weight: 600; }
.pl-table td.is-actions { width: 1%; white-space: nowrap; text-align: right; }
.pl-table td.is-actions .pl-icon-btn + .pl-icon-btn { margin-left: 4px; }
.pl-table td.is-empty { padding: 12px; }
/* R3: бандл admin_main має `table>tbody>tr>td{padding:4px 8px!important}` (0,0,4), `#ajax table>tbody>tr>td{2px 4px!important}`
   і `… #home table.table th:first-child{padding-right:5px!important}` (1,3,2) — вони перебивали td, --dense і першу th,
   модулі латали локально. !important тут — лише проти тих !important. `:not(#pl-kit-x)` (id, якого немає) додає
   специфічності (1,0,0), щоб виграти і в id-правил бандла; порядок зберігає ієрархію base 10/12 → dense 6/12 → is-empty 12. */
html.pl-kit .pl-table:not(#pl-kit-x) > thead > tr > th { padding: 0 12px !important; }
html.pl-kit .pl-table:not(#pl-kit-x) > tbody > tr > td { padding: 10px 12px !important; }
html.pl-kit .pl-table--dense:not(#pl-kit-x) > tbody > tr > td { padding: 6px 12px !important; }
html.pl-kit .pl-table:not(#pl-kit-x) > tbody > tr > td.is-empty { padding: 12px !important; }
/* Сортування — <button> у th. */
.pl-th-sort {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.pl-th-sort .pi { color: var(--pl-muted-2); }
.pl-th-sort[aria-sort="ascending"], .pl-th-sort[aria-sort="descending"],
th[aria-sort="ascending"] .pl-th-sort, th[aria-sort="descending"] .pl-th-sort { font-weight: 600; }
:is(.pl-th-sort[aria-sort="ascending"], .pl-th-sort[aria-sort="descending"], th[aria-sort="ascending"] .pl-th-sort, th[aria-sort="descending"] .pl-th-sort) .pi { color: var(--pl-brand); }
.pl-th-sort:focus { outline: none; }
.pl-th-sort:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; border-radius: 2px; }
.pl-table th .pl-tip { margin-left: 4px; }
/* Запасний варіант для 7+ числових колонок: горизонтальний скрол із тінню-індикатором праворуч. */
.pl-table-wrap {
    overflow-x: auto;
    background:
        linear-gradient(90deg, var(--pl-bg) 30%, rgba(255,255,255,0)) left / 24px 100% no-repeat local,
        linear-gradient(270deg, var(--pl-bg) 30%, rgba(255,255,255,0)) right / 24px 100% no-repeat local,
        linear-gradient(90deg, rgba(25,27,35,.08), rgba(25,27,35,0)) left / 8px 100% no-repeat scroll,
        linear-gradient(270deg, rgba(25,27,35,.08), rgba(25,27,35,0)) right / 8px 100% no-repeat scroll;
}
.pl-table-wrap > .pl-table { background-color: transparent; }

/* 8b. Пейджер .pl-pager: кнопки 32×32 r4 13/500 ink, активна = brand-tint + край + brand 600.
   Перефарбування .site-pagination (13 view), .m-datatable__pager, MDB .pagination .page-link. */
.pl-pager {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    font-family: var(--pl-font);
    font-size: 13px;
    line-height: 18px;
    color: var(--pl-muted);
}
.pl-pager__nav { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pl-pager__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background: transparent;
    font: 500 13px/18px var(--pl-font);
    color: var(--pl-ink);
    text-decoration: none;
    cursor: pointer;
}
.pl-pager__btn:hover { background-color: var(--pl-surface); color: var(--pl-ink); text-decoration: none; }
.pl-pager__btn:is(.is-active, [aria-current="page"]) { background-color: var(--pl-brand-bg); box-shadow: inset 0 0 0 1px var(--pl-brand); color: var(--pl-brand); font-weight: 600; }
.pl-pager__btn:is(:disabled, .is-disabled, [aria-disabled="true"]) { background: transparent; color: var(--pl-muted-2); cursor: not-allowed; }
.pl-pager__btn:focus { outline: none; }
.pl-pager__btn:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; }

/* Legacy .site-pagination / .m-datatable__pager: 22–30px кружечки → 32×32 r4.
   !important лише там, де бандл сам має !important: `.site-pagination .active_p{background:#1474e3!important;color:#fff!important}`
   і `.m-datatable__pager-link--disabled{opacity:.5!important}`. waves-ефект вимкнено (pointer-events на .waves-ripple). */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) :is(.btn.move_to_page, .m-datatable__pager-link) {
    min-width: var(--pl-h-compact);
    height: var(--pl-h-compact);
    padding: 0 6px;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background-color: transparent;
    box-shadow: none;
    font-family: var(--pl-font);
    font-size: 13px;
    line-height: var(--pl-h-compact);
    font-weight: 500;
    color: var(--pl-ink);
    transition: color .15s, background-color .15s;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) :is(.btn.move_to_page, .m-datatable__pager-link):hover {
    background-color: var(--pl-surface);
    color: var(--pl-ink) !important;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) :is(.btn.move_to_page, .m-datatable__pager-link):is(.active_p, .m-datatable__pager-link--active) {
    background-color: var(--pl-brand-bg) !important;
    box-shadow: inset 0 0 0 1px var(--pl-brand);
    color: var(--pl-brand) !important;
    font-weight: 600;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) .m-datatable__pager-link.m-datatable__pager-link--disabled {
    opacity: 1 !important;
    background-color: transparent;
    color: var(--pl-muted-2);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) .btn.move_to_page + .btn { margin-left: 4px; }
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) .waves-ripple { display: none; }
/* prev/next: шрифтова la-angle-* → маска pi-chevron-left/right 20 (до міграції partial-ів у UC3).
   Бандл фіксує їх 22×22 правилом (0,4,2) з `min-width:22px!important` — тому селектор (0,5,1)
   і !important лише на min-width. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link:is(.m-datatable__pager-link--prev, .m-datatable__pager-link--next) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pl-h-compact);
    min-width: var(--pl-h-compact) !important;
    height: var(--pl-h-compact);
    padding: 0;
    border-radius: var(--pl-radius-sm);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) .m-datatable__pager-nav > li > .m-datatable__pager-link.m-datatable__pager-link:is(.m-datatable__pager-link--prev, .m-datatable__pager-link--next).m-datatable__pager-link--disabled {
    background-color: transparent;
    color: var(--pl-muted-2);
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) :is(.m-datatable__pager-link--prev, .m-datatable__pager-link--next) > i.la {
    display: none;
}
/* UC1c: partial-и пагінації (pagination, _ajax, _first, _comments) уже віддають <svg class="pi"> pi-chevron-left/right 20 → маска ::after
   для них прибрана (було два шеврони). Маска лишається ЛИШЕ як fallback для ще не мігрованих пейджерів з <i class="la"> (paginator.blade.php,
   heatmaps/_pages_table, events/_pager, seo/index, sales3 / top_pages3 / scroll_map / number_click): UC12 прибере її разом з останнім la-пейджером. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) :is(.m-datatable__pager-link--prev, .m-datatable__pager-link--next):not(:has(> svg.pi))::after {
    content: "";
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url('/public/images/icon/pl/20/chevron-left.svg?v=20261013r3') center / 20px 20px no-repeat;
    mask: url('/public/images/icon/pl/20/chevron-left.svg?v=20261013r3') center / 20px 20px no-repeat;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) .m-datatable__pager-link--next:not(:has(> svg.pi))::after {
    -webkit-mask-image: url('/public/images/icon/pl/20/chevron-right.svg?v=20261013r3');
    mask-image: url('/public/images/icon/pl/20/chevron-right.svg?v=20261013r3');
}
/* per-page select у пейджері — 32 (один рядок = одна висота); рамка — як у поля
   (бандл: `.v-datatable__pager-info .nice-select` 28 / #E5E5E5). */
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) .nice-select {
    border-color: var(--pl-border-input);
    height: var(--pl-h-compact);
    line-height: 30px;
    font-size: 13px;
}
:where(html.pl-kit:not(.pl-kit-noc)) :is(.site-pagination, .m-datatable__pager) :is(.control-label, .v-datatable__pager-info, .m-datatable__pager-detail) {
    font-family: var(--pl-font);
    font-size: 13px;
    color: var(--pl-muted);
}
/* Laravel/MDB-пагінація .pagination .page-link (admin/pagination*.blade.php, `page-item--round`).
   Бандл: `.page-item.page-item--round .page-link{20×20, r50%, min-width:20px!important}`,
   `.pagination>li>a{min-width:28px!important}`, `.pagination>.active>span{background:#1474e3!important}` —
   тому подвоєний .page-link (0,4,0) і !important лише на min-width та кольорах активної.
   Стрілки «‹ ›» — картинка n_arrow_black.svg із прозорим текстом (бандл, !important) — лишаються,
   лише отримують ту саму клітинку 32; заміна на pi-chevron — UC3 у partial-ах. */
:where(html.pl-kit:not(.pl-kit-noc)) .pagination > .page-item > .page-link.page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: var(--pl-h-compact) !important;
    height: var(--pl-h-compact);
    padding: 0 6px;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background-color: transparent;
    box-shadow: none;
    font: 500 13px/18px var(--pl-font);
    color: var(--pl-ink);
}
:where(html.pl-kit:not(.pl-kit-noc)) .pagination > .page-item:not(.active, .disabled) > .page-link.page-link:hover {
    background-color: var(--pl-surface);
    color: var(--pl-ink);
}
:where(html.pl-kit:not(.pl-kit-noc)) .pagination > .page-item.active > .page-link.page-link {
    background-color: var(--pl-brand-bg) !important;
    box-shadow: inset 0 0 0 1px var(--pl-brand);
    color: var(--pl-brand) !important;
    font-weight: 600;
}
:where(html.pl-kit:not(.pl-kit-noc)) .pagination > .page-item:is([aria-label*="Next"], [aria-label*="Previous"]) > .page-link.page-link {
    color: transparent;
}
:where(html.pl-kit:not(.pl-kit-noc)) .pagination .waves-ripple { display: none; }

/* 8c. «Завантажити ще» = p_btn-light sm 28 по центру, без іконки. */
.pl-load-more { display: flex; justify-content: center; margin-top: 16px; }

/* ---------- 9. Бейджі й картки (UC1b, §2.3.8–9) ---------- */

/* 9a. .pl-badge (аліас .rv-tag — revenue.css вантажиться пізніше і лишається головним для Revenue). */
.pl-badge,
.rv-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-surface);
    color: var(--pl-muted);
    font-family: var(--pl-font);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
}
.pl-badge--neutral { background-color: var(--pl-surface); color: var(--pl-muted); }
.pl-badge--success { background-color: var(--pl-success-bg); color: var(--pl-success); }
.pl-badge--warn { background-color: var(--pl-warn-bg); color: var(--pl-warn); }
.pl-badge--danger { background-color: var(--pl-danger-bg); color: var(--pl-danger); }
.pl-badge--brand { background-color: var(--pl-brand-bg); color: var(--pl-brand); } /* лише «new» */
/* K1 .pl-badge--sm — бейдж 16 усередині рядка 14/20 (пункт меню, назва): не росте висота рядка. Комбінується з --brand («new»). */
.pl-badge--sm { height: 16px; padding: 0 4px; font-size: 11px; line-height: 16px; }
/* Metronic .badge: r4, 500, Roboto. Розмір (11px) і radius (12px) бандл тримає через !important
   (`.badge{font-size:11px!important;border-radius:12px!important}`) — без !important-війни не
   перебиваються: лишаються до модульних етапів (заміна на .pl-badge). */
:where(html.pl-kit:not(.pl-kit-noc)) .badge {
    border-radius: var(--pl-radius-sm);
    font-family: var(--pl-font);
    font-weight: 500;
}

/* 9b. .pl-card — фон білий, рамка line, r4, без тіні, padding 20 (--dense 16).
   Аліаси з §2.3.8, у яких немає власних конфліктних правил: .box_23. Решта (.pk-card, .ev-block,
   .hm-block, .source-section, .pf-panel, .mon-trend-wrap) — у модульних етапах. */
.pl-card,
.box_23 {
    background-color: var(--pl-bg);
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    box-shadow: none;
    padding: var(--pl-pad-card);
}
.pl-card--dense { padding: var(--pl-pad-card-dense); }
.pl-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.pl-card__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-card__sub { font-size: 12px; line-height: 16px; color: var(--pl-muted); }
.pl-card__actions { display: flex; align-items: center; gap: 8px; flex: none; }
.pl-card__section { border-top: 1px solid var(--pl-line); padding-top: 20px; margin-top: 20px; }
/* AI-мітка: нейтральний бейдж «AI» без гліфа. */
.pl-badge--ai { background-color: var(--pl-surface); color: var(--pl-muted); }

/* ---------- 10. Оверлеї (UC1b, §2.1, §2.3.10) ---------- */

/* 10a. Модалка .pl-modal: шкура для Bootstrap .modal-dialog/.modal-content ЛИШЕ з класом .pl-modal
   (на .modal або на .modal-dialog). S 480 / M 640 / L 900, r4, тінь modal. */
.pl-modal .modal-dialog,
.modal-dialog.pl-modal { width: var(--pl-modal-m); max-width: calc(100vw - 32px); margin: 24px auto; }
:is(.pl-modal--s .modal-dialog, .modal-dialog.pl-modal--s) { width: var(--pl-modal-s); }
:is(.pl-modal--l .modal-dialog, .modal-dialog.pl-modal--l) { width: var(--pl-modal-l); }
:is(.pl-modal, .modal-dialog.pl-modal) .modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    border: 0;
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    box-shadow: var(--pl-shadow-modal);
    font-family: var(--pl-font);
    color: var(--pl-ink);
}
:is(.pl-modal, .modal-dialog.pl-modal) :is(.modal-header, .pl-modal__head) { padding: 20px 56px 0 20px; border: 0; }
:is(.pl-modal, .modal-dialog.pl-modal) :is(.modal-title, .pl-modal__title) { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--pl-ink); }
:is(.pl-modal, .modal-dialog.pl-modal) :is(.modal-body, .pl-modal__body) { padding: 20px; overflow-y: auto; font-size: 14px; line-height: 20px; }
:is(.pl-modal, .modal-dialog.pl-modal) :is(.modal-footer, .pl-modal__foot) { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--pl-line); }
:is(.pl-modal, .modal-dialog.pl-modal) .modal-footer > :is(.p_btn, .btn) + :is(.p_btn, .btn) { margin-left: 0; } /* TS3: + .btn — Bootstrap .modal-footer .btn + .btn { margin-left: 5px } */
/* TS3: clearfix Bootstrap (.modal-footer::before/::after { content: " "; display: table }) у flex-футері — це порожні
   flex-елементи: ::after + gap 8 зсував кнопки на 8px лівіше від краю. Flex clearfix не потрібен. */
:is(.pl-modal, .modal-dialog.pl-modal) :is(.modal-footer, .pl-modal__foot)::before,
:is(.pl-modal, .modal-dialog.pl-modal) :is(.modal-footer, .pl-modal__foot)::after { content: none; }
/* TS6: кнопки у футері kit-модалки — 36, як .p_btn_large (рішення власника 14.10, варіант Б: конвенція «форма / модалка /
   дровер / p-head → p_btn_large» + страховка в kit для кнопок, які малює JS або забули позначити). Лише .pl-modal — legacy-модалки
   не чіпаються. Контекст у :where, тож вага = .p_btn.p_btn_large (0,2,0): модульне правило, що перебило б сам клас p_btn_large,
   перебиває й це. Висота — min-height, як у 6a. Іконкові — квадрат 36 (як 6b, (0,3,0)). */
:where(html.pl-kit:not(.pl-kit-noc)) :where(.pl-modal, .modal-dialog.pl-modal) :where(.modal-footer, .pl-modal__foot) .p_btn:not(.p_btn_icon) {
    min-height: var(--pl-h-md);
    padding: 0 12px;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
}
:where(html.pl-kit:not(.pl-kit-noc)) :where(.pl-modal, .modal-dialog.pl-modal) :where(.modal-footer, .pl-modal__foot) .p_btn_icon.p_btn_icon.p_btn_icon {
    min-width: var(--pl-h-md);
    min-height: var(--pl-h-md);
    padding: 0;
}
/* TS6: спінер у кнопці з іконкою — на місці іконки при padding 12 (як 6h для .p_btn_large). */
:where(html.pl-kit:not(.pl-kit-noc)) :where(.pl-modal, .modal-dialog.pl-modal) :where(.modal-footer, .pl-modal__foot) .p_btn:not(.p_btn_icon).is-loading:has(> :is(.p_icon, .pi):first-child)::after { left: 14px; }
:is(.pl-modal, .modal-dialog.pl-modal) .pl-close { position: absolute; top: 12px; right: 12px; }
.modal-backdrop.pl-backdrop, .pl-modal ~ .modal-backdrop { background-color: var(--pl-backdrop); }
.modal-backdrop.pl-backdrop.in { opacity: 1; }
/* Власний Bootstrap-backdrop (дописується в <body>, тож сусідній селектор .pl-modal ~ .modal-backdrop не спрацьовує):
   під html.pl-kit це rgba(25,27,35,.45) з бандловою анімацією .fade → .in/.show; JS-хук `addClass('pl-backdrop')` не потрібен. */
/* !important лише тому, що бандл сам має `.modal-backdrop, .modal-backdrop.fade.in { background-color: #333 !important }`; `.no_bg` (прозорий фон) не чіпаємо. */
html.pl-kit:not(.pl-kit-noc) .modal-backdrop.modal-backdrop:not(.no_bg) { background-color: var(--pl-backdrop) !important; }
:where(html.pl-kit:not(.pl-kit-noc)) :is(.modal-backdrop.in, .modal-backdrop.show) { opacity: 1; }
/* Модалка без Bootstrap (структурний еталон .mdl-box). */
.pl-modal-box {
    position: relative;
    width: var(--pl-modal-m);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    box-shadow: var(--pl-shadow-modal);
    font-family: var(--pl-font);
    color: var(--pl-ink);
}
.pl-modal-box--s { width: var(--pl-modal-s); }
.pl-modal-box--l { width: var(--pl-modal-l); }
.pl-modal-box > .pl-close { position: absolute; top: 12px; right: 12px; }

/* 10b. Drawer .pl-drawer: праворуч, 440 / 720 / 960, r0, тінь modal, head як у модалки, footer sticky. */
.pl-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    width: var(--pl-drawer-m);
    max-width: 100vw;
    border-radius: 0;
    background-color: var(--pl-bg);
    box-shadow: var(--pl-shadow-modal);
    font-family: var(--pl-font);
    color: var(--pl-ink);
}
.pl-drawer--s { width: var(--pl-drawer-s); }
.pl-drawer--l { width: var(--pl-drawer-l); }
.pl-drawer--help { background-color: var(--pl-page-bg); }
.pl-drawer__head { position: relative; flex: none; padding: 20px 56px 16px 20px; }
.pl-drawer__head > .pl-close { position: absolute; top: 12px; right: 12px; }
.pl-drawer__title { margin: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--pl-ink); }
.pl-drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px 20px; }
.pl-drawer__foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 16px 20px; border-top: 1px solid var(--pl-line); background-color: var(--pl-bg); }
.pl-backdrop { position: fixed; inset: 0; z-index: 1040; background-color: var(--pl-backdrop); }

/* 10c. Меню .pl-menu (аліас .rv-dd__panel — revenue.css пізніше і лишається головним для Revenue). */
.pl-menu,
.rv-dd__panel {
    min-width: 200px;
    max-width: 320px;
    padding: 4px;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    box-shadow: var(--pl-shadow-overlay);
    font-family: var(--pl-font);
}
.pl-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--pl-h-compact);
    padding: 0 12px;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background: transparent;
    font: 400 14px/20px var(--pl-font);
    color: var(--pl-ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.pl-menu__item:hover { background-color: var(--pl-surface); color: var(--pl-ink); text-decoration: none; }
.pl-menu__item:focus { outline: none; }
.pl-menu__item:focus-visible { outline: var(--pl-focus-outline); outline-offset: -2px; }
.pl-menu__item:is(.is-selected, [aria-checked="true"], [aria-selected="true"]) { color: var(--pl-brand); font-weight: 500; }
.pl-menu__item:is(.is-selected, [aria-checked="true"], [aria-selected="true"])::after {
    content: "";
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-color: currentColor;
    -webkit-mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
}
/* HV16 .pl-menu--check — меню вибору з колонкою під галочку: у КОЖНОГО пункту праворуч порожній слот 16 (::after),
   видимий (маска check, currentColor) лише в is-selected / aria-checked / aria-selected. Хвости (.tail, #id) і все,
   що стоїть після тексту, у всіх рядках на одній вертикалі. Без модифікатора поведінка .pl-menu не змінюється. */
.pl-menu--check .pl-menu__item::after { content: ""; flex: none; width: 16px; height: 16px; margin-left: auto; }
.pl-menu--check .pl-menu__item .tail { flex: none; margin-left: auto; font: 400 12px/16px var(--pl-font); color: var(--pl-muted); }
.pl-menu--check .pl-menu__item:has(> .tail)::after { margin-left: 0; } /* .tail уже притиснутий праворуч — слот одразу за ним */
.pl-menu__item--danger { color: var(--pl-danger); }
.pl-menu__item--danger:hover { color: var(--pl-danger); }
.pl-menu__item:is(:disabled, .is-disabled, [aria-disabled="true"]) { color: var(--pl-muted-2); background: transparent; cursor: not-allowed; }
.pl-menu__sep { height: 1px; margin: 4px 0; background-color: var(--pl-line); }
/* K1 [aria-current="page"] — «де я зараз» у навігаційному меню (не вибір значення, тому не brand, як is-selected):
   текст ink 600 + check 16 ink праворуч; фон прозорий, hover як у звичайного пункту. */
.pl-menu__item[aria-current="page"] { color: var(--pl-ink); font-weight: 600; background-color: transparent; }
.pl-menu__item[aria-current="page"]:hover { background-color: var(--pl-surface); }
.pl-menu__item[aria-current="page"]::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    background-color: var(--pl-ink);
    -webkit-mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/check.svg?v=20261013r3') center / 16px 16px no-repeat;
}
/* K1 .pl-menu__item--2l — пункт у два рядки (меню застосунків): іконка-плитка 32 + назва 14/20 + опис 12/16 в 1 рядок.
   8 + 20 + 16 + 8 = 52: висота однакова з бейджем і без (бейдж у назві — лише .pl-badge--sm 16).
   Розмітка: .pl-menu__item.pl-menu__item--2l > .pl-menu__ico(> .pi-16) + .pl-menu__txt(> .pl-menu__title + .pl-menu__desc). */
.pl-menu__item--2l { min-height: 52px; padding: 8px 12px; gap: 12px; align-items: center; }
.pl-menu__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-surface);
    color: var(--pl-ink);
}
.pl-menu__ico .pi { width: 16px; height: 16px; vertical-align: 0; }
/* HV16 плитка --2l за патерном мега-меню продуктів сайту (plerdy-site-kit.css .ps-mm__item / .ps-mm__ic):
   спокій — плитка --pl-brand-bg, гліф --pl-brand; hover / focus-visible пункту — плитка --pl-brand, гліф --pl-bg,
   фон рядка --pl-surface, текст лишається ink (опис --pl-muted). Поточний (aria-current) — плитка заливкою, як у hover,
   + назва 600 + check ink праворуч (K1). Вимкнений — плитка --pl-surface, гліф --pl-muted-2. Нових кольорів нема. */
.pl-menu__item--2l .pl-menu__ico { background-color: var(--pl-brand-bg); color: var(--pl-brand); transition: background-color .15s, color .15s; }
.pl-menu__item--2l:is(:hover, :focus-visible, [aria-current="page"]) .pl-menu__ico { background-color: var(--pl-brand); color: var(--pl-bg); }
.pl-menu__item--2l:is(:disabled, .is-disabled, [aria-disabled="true"]) .pl-menu__ico { background-color: var(--pl-surface); color: var(--pl-muted-2); }
.pl-menu__txt { display: grid; flex: 1 1 auto; min-width: 0; }
.pl-menu__title { display: flex; align-items: center; gap: 6px; min-width: 0; font: 500 14px/20px var(--pl-font); color: inherit; } /* inherit = ink (danger/disabled пункт лишається своїм) */
.pl-menu__item[aria-current="page"] .pl-menu__title { font-weight: 600; }
.pl-menu__desc { display: block; overflow: hidden; font: 400 12px/16px var(--pl-font); color: var(--pl-muted); white-space: nowrap; text-overflow: ellipsis; }

/* 10d. Поповер .pl-popover: як меню, padding 16, заголовок 14/600, поля всередині --compact 32. */
.pl-popover {
    min-width: 240px;
    max-width: 360px;
    padding: 16px;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    box-shadow: var(--pl-shadow-overlay);
    font-family: var(--pl-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--pl-ink);
}
.pl-popover__title { margin: 0 0 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--pl-ink); }
.pl-popover__foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.pl-popover .pl-input { height: var(--pl-h-compact); }

/* 10e. Tooltip — один механізм (Bootstrap). Шкура .tooltip-inner глобально під pl-kit:
   ink, білий 13/18, padding 6 8 (R3, бриф раунду 3 §4), r4, max 280, без рамки й тіні.
   Відступ від тригера = BS3 padding 5 + margin 3 = 8 (не чіпаємо), стрілка 10×5 по центру тригера. */
:where(html.pl-kit:not(.pl-kit-noc)) .tooltip {
    font-family: var(--pl-font);
    font-size: 13px;
    line-height: 18px;
}
:where(html.pl-kit:not(.pl-kit-noc)) .tooltip .tooltip-inner {
    max-width: 280px;
    padding: 6px 8px;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-ink);
    box-shadow: none;
    color: var(--pl-bg);
    font-size: 13px;
    line-height: 18px;
}
:where(html.pl-kit:not(.pl-kit-noc)) .tooltip.top .tooltip-arrow { border-top-color: var(--pl-ink); }
:where(html.pl-kit:not(.pl-kit-noc)) .tooltip.bottom .tooltip-arrow { border-bottom-color: var(--pl-ink); }
:where(html.pl-kit:not(.pl-kit-noc)) .tooltip.left .tooltip-arrow { border-left-color: var(--pl-ink); }
:where(html.pl-kit:not(.pl-kit-noc)) .tooltip.right .tooltip-arrow { border-right-color: var(--pl-ink); }
/* R3: legacy-варіанти бандла мали ще 5 виглядів (сірий #595959 r2 + тінь; білий з рамкою
   `.p_tooltip + .tooltip`, `.p_icon--with-tooltip + .tooltip`; padding 12 + рамка
   `.text-wrap_with_tooltip`, `.table-section--new-tooltip`…) з селекторами до (0,4,0).
   Тут — лише ШКУРА (фон, колір, рамка, тінь, radius, шрифт, padding) з (0,4,2), без !important:
   ширина / max-width / text-align / white-space лишаються модульними (там бувають таблиці й списки).
   Правила з #id (`#code_bad_my_site .tooltip`) сильніші й лишаються модулям. Рубильник pl-kit-noc діє. */
html.pl-kit:not(.pl-kit-noc) body .tooltip > .tooltip-inner {
    padding: 6px 8px;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background: var(--pl-ink);
    box-shadow: none;
    color: var(--pl-bg);
    font-family: var(--pl-font);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}
/* Стрілка — один трикутник BS3 10×5 (варіанти бандла малювали повернутий квадрат 8×8 з сірою
   рамкою: `.text-wrap_with_tooltip .tooltip.top .tooltip-arrow` — це KPI-картки, `.start_test_wrapper…`). */
html.pl-kit:not(.pl-kit-noc) body .tooltip > .tooltip-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    background: none;
    transform: none;
}
html.pl-kit:not(.pl-kit-noc) body .tooltip.top > .tooltip-arrow { border-width: 5px 5px 0; border-top-color: var(--pl-ink); }
html.pl-kit:not(.pl-kit-noc) body .tooltip.bottom > .tooltip-arrow { border-width: 0 5px 5px; border-bottom-color: var(--pl-ink); }
html.pl-kit:not(.pl-kit-noc) body .tooltip.left > .tooltip-arrow { border-width: 5px 0 5px 5px; border-left-color: var(--pl-ink); }
html.pl-kit:not(.pl-kit-noc) body .tooltip.right > .tooltip-arrow { border-width: 5px 5px 5px 0; border-right-color: var(--pl-ink); }

/* 10f. Toast (toastr): білий, рамка line, r4, тінь overlay, статус-іконка 16 кольору рівня (маска
   pi-status-* у ::before) + текст ink 14, без кольорових заливок. Селектор #toast-container > div (1,0,1)
   перебиває кольорові фони .toast-success/-error/… (0,1,0); PNG-іконки toastr
   (#toast-container>.toast-info{background-image}, 1,1,0) знімає окреме правило > div.toast (1,1,1). */
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container > div {
    width: 360px;
    max-width: calc(100vw - 32px);
    margin: 0 0 8px;
    padding: 12px 16px 12px 40px;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    background-image: none;
    background-position: 14px 14px;
    box-shadow: var(--pl-shadow-overlay);
    color: var(--pl-ink);
    opacity: 1;
    font-family: var(--pl-font);
    font-size: 14px;
    line-height: 20px;
}
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container > div.toast { background-image: none; }
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container > div:hover { box-shadow: var(--pl-shadow-overlay); opacity: 1; }
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container > div::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;
    width: 16px;
    height: 16px;
    background-color: var(--pl-muted-2);
    -webkit-mask: url('/public/images/icon/pl/16/status-neutral.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/status-neutral.svg?v=20261013r3') center / 16px 16px no-repeat;
}
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container > .toast-success::before { background-color: var(--pl-success); -webkit-mask-image: url('/public/images/icon/pl/16/status-ok.svg?v=20261013r3'); mask-image: url('/public/images/icon/pl/16/status-ok.svg?v=20261013r3'); }
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container > .toast-warning::before { background-color: var(--pl-warn); -webkit-mask-image: url('/public/images/icon/pl/16/status-warn.svg?v=20261013r3'); mask-image: url('/public/images/icon/pl/16/status-warn.svg?v=20261013r3'); }
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container > .toast-error::before { background-color: var(--pl-danger); -webkit-mask-image: url('/public/images/icon/pl/16/status-error.svg?v=20261013r3'); mask-image: url('/public/images/icon/pl/16/status-error.svg?v=20261013r3'); }
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container > .toast-info::before { background-color: var(--pl-brand); -webkit-mask-image: url('/public/images/icon/pl/16/info.svg?v=20261013r3'); mask-image: url('/public/images/icon/pl/16/info.svg?v=20261013r3'); }
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container .toast-title { font-weight: 500; color: var(--pl-ink); }
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container .toast-message { color: var(--pl-ink); }
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container .toast-message a { color: var(--pl-link); }
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container .toast-close-button { color: var(--pl-muted); text-shadow: none; opacity: 1; }
:where(html.pl-kit:not(.pl-kit-noc)) #toast-container .toast-progress { background-color: var(--pl-brand); opacity: .4; }

/* 10g. Notice .pl-notice: r4, padding 12 16, без рамки, фон рівня, текст ink 14/20,
   іконка pi-status-* 16 кольору рівня, дія праворуч. */
.pl-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-brand-bg);
    font-family: var(--pl-font);
    font-size: 14px;
    line-height: 20px;
    color: var(--pl-ink);
}
.pl-notice > .pi:first-child { flex: none; margin-top: 2px; color: var(--pl-brand); }
.pl-notice__body { flex: 1 1 auto; min-width: 0; }
.pl-notice__act { flex: none; margin-left: auto; align-self: center; }
.pl-notice--info { background-color: var(--pl-brand-bg); }
.pl-notice--warn { background-color: var(--pl-warn-bg); }
.pl-notice--warn > .pi:first-child { color: var(--pl-warn); }
.pl-notice--danger { background-color: var(--pl-danger-bg); }
.pl-notice--danger > .pi:first-child { color: var(--pl-danger); }
.pl-notice--success { background-color: var(--pl-success-bg); }
.pl-notice--success > .pi:first-child { color: var(--pl-success); }

/* ---------- 11. Фільтр-бар і стани (UC1b, §2.3.11–12, §2.3.3) ---------- */

/* 11a. .pl-filterbar: зліва направо, gap 12, контроли 36, «Застосувати» primary останньою;
   праворуч (margin-left:auto) — експорт і штамп даних. Ніколи не центрувати.
   Аліаси .sr-filterbar/.sr-filter-row/.pf-filters/.rv-filters — модульні CSS вантажаться пізніше
   і перебивають однакову специфічність; тут лише вирівнювання і gap під pl-kit. */
.pl-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--pl-gap-toolbar);
    margin-bottom: var(--pl-gap-section);
}
.pl-filterbar__search { flex: 1 1 200px; max-width: 320px; }
.pl-filterbar__end { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pl-filterbar__stamp { font-size: 12px; line-height: 16px; color: var(--pl-muted); }
:where(html.pl-kit:not(.pl-kit-noc)) :is(.sr-filterbar, .sr-filter-row, .pf-filters, .rv-filters) {
    justify-content: flex-start;
    gap: var(--pl-gap-toolbar);
}

/* 11b. ЛОАДЕР — ОДИН стандарт (R4, рішення власника 13.10: «прелоадер один»).
   Що вибирати:
   - дія кнопки            → .p_btn.is-loading (6h), ширина не змінюється;
   - інлайн (рядок, поле)  → .pl-loader: .pl-spinner--16 + текст 13/18 muted;
   - блок/панель порожня   → .pl-loader.pl-loader--block (спінер 24, по центру, min-h 120);
   - панель з даними       → .pl-loading поверх (білий 72 %, спінер 32 + текст), хост — .pl-loading-host;
   - уся сторінка          → .pl-loading.pl-loading--page (fixed). Legacy #preloader / #preloader11 = те саме (11e);
   - відома форма даних    → скелетон (.pl-skeleton--line / --row / --block у .pl-skeleton-rows).
   Кільце 2px brand з прозорою чвертю, 0.8s linear — однакове в усіх розмірах 12/16/20/24/32 (і в 6h).
   Текст лоадера — лише langDb: у Blade translate::langDb('pl_loading'); у CSS-only call-site-ах
   var(--pl-t-loading) — layout-и кладуть туди той самий ключ (admin, adminfirst, shared_dashboard_layer).
   Без gif, без кольорових кружків, без «Loading» у CSS content. Прогрес — смуга 4px, прямі кути (R4: смуги без radius). */
.pl-spinner {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: var(--pl-brand);
    animation: pl-spin .8s linear infinite;
    vertical-align: middle;
}
.pl-spinner--12 { width: 12px; height: 12px; }
.pl-spinner--16 { width: 16px; height: 16px; }
.pl-spinner--24 { width: 24px; height: 24px; }
.pl-spinner--32 { width: 32px; height: 32px; }
.pl-spinner--ink { color: var(--pl-ink); }
.pl-spinner--muted { color: var(--pl-muted-2); }
.pl-loader {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font: 400 13px/18px var(--pl-font);
    color: var(--pl-muted);
}
.pl-loader--block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-height: 120px;
    padding: var(--pl-space-6);
    text-align: center;
}
.pl-loader--block > .pl-spinner { width: 24px; height: 24px; }
.pl-loading-host { position: relative; }
.pl-loading {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, .72);
    font: 400 13px/18px var(--pl-font);
    color: var(--pl-muted);
    cursor: progress;
}
.pl-loading > .pl-spinner { width: 32px; height: 32px; }
.pl-loading[hidden] { display: none; }
.pl-loading--page { position: fixed; z-index: 100000; }
@keyframes pl-pulse { 50% { opacity: .6; } }
.pl-skeleton {
    display: block;
    min-height: 16px;
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-surface);
    animation: pl-pulse 1.2s ease-in-out infinite;
}
.pl-skeleton--line { min-height: 12px; height: 12px; }
.pl-skeleton--row { min-height: 44px; height: 44px; }
.pl-skeleton--block { min-height: 120px; }
.pl-skeleton-rows { display: flex; flex-direction: column; gap: 8px; }
.pl-skeleton-rows > .pl-skeleton--line:nth-child(3n+1) { width: 72%; }
.pl-skeleton-rows > .pl-skeleton--line:nth-child(3n+2) { width: 100%; }
.pl-skeleton-rows > .pl-skeleton--line:nth-child(3n) { width: 48%; }
.pl-progress { height: 4px; border-radius: 0; background-color: var(--pl-line); overflow: hidden; }
.pl-progress__bar { height: 100%; border-radius: 0; background-color: var(--pl-brand); transition: width .3s; }
@media (prefers-reduced-motion: reduce) {
    .pl-spinner, .pl-skeleton { animation-duration: 2.4s; }
}

/* 11b-2. Штамп даних .pl-meta-stamp (вигляд = .pl-filterbar__stamp, плюс стани й дії; еталон #gx-stamp на GSC, .seo-stamp у SEO):
   «звідки і наскільки свіжі дані» — «дані до <b>дати</b>», «синхронізовано …», дія-посилання.
   12/16 muted, значення <b> ink 600 tabular-nums, роздільник « · » — текстом; праворуч у тулбарі (margin-left:auto,
   text-align:right) або окремим рядком під тулбаром (--start). Застереження («дані з затримкою ~3 дні») —
   x-pl.info-tip у кінці, не нативний title. Стан: .pl-meta-stamp__bad (danger), спінер .pl-spinner--12. */
.pl-meta-stamp {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0 4px;
    margin-left: auto;
    max-width: 60ch;
    font: 400 12px/16px var(--pl-font);
    color: var(--pl-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.pl-meta-stamp--start { margin-left: 0; justify-content: flex-start; text-align: left; }
.pl-meta-stamp b, .pl-meta-stamp strong { font-weight: 600; color: var(--pl-ink); }
.pl-meta-stamp__bad { color: var(--pl-danger); }
.pl-meta-stamp__act {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--pl-link);
    cursor: pointer;
    text-decoration: none;
}
.pl-meta-stamp__act:hover { color: var(--pl-brand-hover); text-decoration: underline; }
.pl-meta-stamp__act:focus { outline: none; }
.pl-meta-stamp__act:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; }
.pl-meta-stamp .pl-spinner { width: 12px; height: 12px; }
.pl-meta-stamp .pl-tip { margin-left: 2px; }

/* 11e. Legacy-лоадери → вигляд kit (R4). Лише CSS під html.pl-kit, JS-хуки (show/hide, display, id) не чіпаються.
   (1) #preloader / #preloader11 (усі 3 layout-и: перехід між сторінками, AJAX) і будь-які .preloader-dots
       (≈60 view: графіки, попап новин, дашборд) — 10 кольорових кружків + «Loading» з бандла
       → кільце 32 brand + текст var(--pl-t-loading) (langDb). Кружки ховаються, коробка лишається своєю
       (позиція/розмір у модулях різні; static-варіанти → relative), кільце absolute по центру через margin, без transform (transform зайнятий обертом).
   (2) gif-лоадери <img …loader.gif | loading.gif | loading-spinner-grey.gif | preload_gif> → content: анімований SVG
       того ж кільця (браузер замінює вміст img); оверлей .loader > img.image (api_mail, export, tools/datatables)
       — білий 72 % + кільце 32 + текст.
   (3) blockUI (Metronic.blockUI / App.blockUI) і modalmanager .loading-spinner (смугаста progress-bar) → кільце. */
:where(html.pl-kit:not(.pl-kit-noc)) :is(#preloader, #preloader11) { background-color: rgba(255, 255, 255, .72); }
:where(html.pl-kit:not(.pl-kit-noc)) .preloader-dots { background-image: none !important; }
:where(html.pl-kit:not(.pl-kit-noc)) .preloader-dots > .preloader--dot { display: none !important; }
:where(html.pl-kit:not(.pl-kit-noc)) :is(.preloader-dots--marg, .dropdawn_news_container .preloader-dots) { position: relative; } /* static-варіанти бандла: стають containing block для кільця, місце в потоці те саме */
:where(html.pl-kit:not(.pl-kit-noc)) .preloader-dots::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    box-sizing: border-box;
    border: 2px solid var(--pl-brand);
    border-right-color: transparent;
    border-radius: 50%;
    animation: pl-spin .8s linear infinite;
}
:where(html.pl-kit:not(.pl-kit-noc)) .preloader-dots > .preloader--text {
    position: absolute;
    top: calc(50% + 24px);
    left: 50%;
    right: auto;
    width: 280px;
    margin: 0 0 0 -140px;
    padding: 0;
    font: 400 13px/18px var(--pl-font);
    color: var(--pl-muted);
    text-align: center;
}
:where(html.pl-kit:not(.pl-kit-noc)) .preloader-dots > .preloader--text::after {
    content: var(--pl-t-loading, "");
    font-weight: 400;
    animation: none;
}
:where(html.pl-kit:not(.pl-kit-noc)) img:is([src*="/loader.gif"], [src*="/loading.gif"], [src*="loading-spinner-grey.gif"], [src*="preload_gif"]) {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='none' stroke='%231474E3' stroke-width='2' stroke-dasharray='70.7 23.6'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 16 16' to='360 16 16' dur='.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
    width: 24px;
    height: 24px;
    vertical-align: middle;
    object-fit: contain;
}
:where(html.pl-kit:not(.pl-kit-noc)) .loader:has(> img.image[src*="/loader.gif"]) { background-color: rgba(255, 255, 255, .72); opacity: 1; }
:where(html.pl-kit:not(.pl-kit-noc)) .loader > img.image[src*="/loader.gif"] { width: 32px; height: 32px; }
:where(html.pl-kit:not(.pl-kit-noc)) .loader:has(> img.image[src*="/loader.gif"])::after {
    content: var(--pl-t-loading, "");
    position: absolute;
    left: 0;
    right: 0;
    top: calc(46% + 44px);
    font: 400 13px/18px var(--pl-font);
    color: var(--pl-muted);
    text-align: center;
}
:where(html.pl-kit:not(.pl-kit-noc)) .blockUI.blockOverlay { background-color: #fff !important; opacity: .72 !important; }
:where(html.pl-kit:not(.pl-kit-noc)) .blockUI .loading-message {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    box-shadow: var(--pl-shadow-overlay);
    font: 400 13px/18px var(--pl-font);
    color: var(--pl-muted);
}
:where(html.pl-kit:not(.pl-kit-noc)) .blockUI .block-spinner-bar > div { display: none; }
:where(html.pl-kit:not(.pl-kit-noc)) :is(.blockUI .block-spinner-bar, .loading-spinner)::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    box-sizing: border-box;
    border: 2px solid var(--pl-brand);
    border-right-color: transparent;
    border-radius: 50%;
    animation: pl-spin .8s linear infinite;
}
:where(html.pl-kit:not(.pl-kit-noc)) .loading-spinner::before { width: 32px; height: 32px; }
:where(html.pl-kit:not(.pl-kit-noc)) .loading-spinner > .progress { display: none; }
@media (prefers-reduced-motion: reduce) {
    :where(html.pl-kit:not(.pl-kit-noc)) :is(.preloader-dots, .blockUI .block-spinner-bar, .loading-spinner)::before { animation-duration: 2.4s; }
}

/* 11c. Рядок вибору .pl-option (аліас .pk-type), картка-вибір .pl-choice (аліас .ab-card),
   вертикальна навігація .pl-nav-v (api_mail). Вибране = surface + ink-край 2px (рішення власника 13.10: активні акценти чорні).
   R4 (власник, п. 2): акцентні смуги (ліва в .pl-nav-v, нижня в .p-tabs) — прямі, 2px, ink, без radius і без «пігулок». */
.pl-option {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--pl-h-md);
    padding: 0 12px;
    border: 1px solid var(--pl-subtle);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    font: 400 14px/20px var(--pl-font);
    color: var(--pl-ink);
    cursor: pointer;
    text-align: left;
}
.pl-option:hover { border-color: var(--pl-muted-2); }
.pl-option:is(.is-selected, .on, [aria-checked="true"], [aria-pressed="true"]) {
    background-color: var(--pl-brand-bg);
    border-color: var(--pl-brand);
    box-shadow: inset 0 0 0 1px var(--pl-brand);
    color: var(--pl-brand);
    font-weight: 600;
}
.pl-option:focus { outline: none; }
.pl-option:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; }
.pl-choice {
    display: block;
    padding: 16px;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    background-color: var(--pl-bg);
    color: var(--pl-ink);
    cursor: pointer;
    text-align: left;
}
.pl-choice:hover { border-color: var(--pl-muted-2); }
.pl-choice:is(.is-selected, .on, [aria-checked="true"], [aria-pressed="true"]) { background-color: var(--pl-brand-bg); border-color: var(--pl-brand); }
.pl-choice:focus { outline: none; }
.pl-choice:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; }
.pl-nav-v { display: flex; flex-direction: column; gap: 2px; width: 320px; margin: 0; padding: 0; list-style: none; }
.pl-nav-v__item {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    border-radius: 0; /* R4: пункт несе ліву акцентну смугу — прямі кути, інакше inset-смуга загинається по radius */
    font: 400 14px/20px var(--pl-font);
    color: var(--pl-ink);
    text-decoration: none;
}
.pl-nav-v__item img, .pl-nav-v__item .pi { flex: none; width: 20px; height: 20px; }
.pl-nav-v__item:hover { background-color: var(--pl-surface); color: var(--pl-ink); text-decoration: none; }
.pl-nav-v__item:is(.is-active, [aria-current="page"], [aria-selected="true"]) { background-color: var(--pl-surface); color: var(--pl-ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--pl-ink); }
/* R4: нижня смуга активного пункту глобального меню шапки (бандл: 2px #1474E3, radius 2) — пряма. Колір лишається
   brand: це навігація, а не таб сторінки (§2.3.3). Інших смуг із radius kit-скан на 5 сторінках не знайшов. */
html.pl-kit:not(.pl-kit-noc) .new_style_menu .m-header-menu .m-menu__nav > .m-menu__item.m-menu__item--tabs.m-menu__item--active-tab::after { border-radius: 0; }
.pl-nav-v__item:focus { outline: none; }
.pl-nav-v__item:focus-visible { outline: var(--pl-focus-outline); outline-offset: -2px; }

/* 11d. .pl-dl — список «назва → значення» (деталі сутності, рейки). */
.pl-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 16px; margin: 0; font-family: var(--pl-font); font-size: 14px; line-height: 20px; }
.pl-dl > dt { margin: 0; font-weight: 400; color: var(--pl-muted); }
.pl-dl > dd { margin: 0; min-width: 0; color: var(--pl-ink); overflow-wrap: anywhere; }

/* R3: legacy `.nav-tabs1`. Бандл-JS (admin_main.js: click на `.nav-tabs1 li`) вішає `.active_tab_li`, а бандл-CSS
   фарбує його `#c3e1f9 !important` — блакитна плашка на будь-якому `.nav-tabs1` (SEO settings, GSC settings_json).
   Активний стан таба — підкреслення (p-controls.css), не заливка. Медіа-таби редактора попапа (#pf-media-tabs)
   мають свій вигляд у popup-builder.css — їх не чіпаємо. */
html.pl-kit:not(.pl-kit-noc) .nav-tabs1:not(#pf-media-tabs) .active_tab_li { background-color: transparent !important; }

/* ---------- 12. UC1c: follow-ups після UC2/UC3 ---------- */

/* 12a. Шапка сторінки: посилання в .p-head__meta (крихти, пов'язана сутність) — muted, hover ink, без підкреслення.
   .p-head__crumbs — слот крихт partial-а page_head: перед рештою мети; роздільник = chevron-right 16 --pl-subtle (не currentColor, щоб hover посилання його не міняв). */
.p-head__meta a { color: var(--pl-muted); text-decoration: none; }
.p-head__meta a:hover { color: var(--pl-ink); text-decoration: none; }
.p-head__meta a:focus { outline: none; }
.p-head__meta a:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; border-radius: 2px; }
.p-head__crumbs { display: inline-flex; align-items: center; margin-right: 12px; vertical-align: top; }
.p-head__crumbs > * { display: inline-flex; align-items: center; }
.p-head__crumbs > :not(:last-child)::after {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin: 0 2px;
    background-color: var(--pl-subtle);
    -webkit-mask: url('/public/images/icon/pl/16/chevron-right.svg?v=20261013r3') center / 16px 16px no-repeat;
    mask: url('/public/images/icon/pl/16/chevron-right.svg?v=20261013r3') center / 16px 16px no-repeat;
}

/* 12b. Порожній стан зі слотом (widgets/empty_state → x-pl.empty-state): факти / плитки / кнопки .pl-es* лежать у .pl-empty__act —
   колонкою замість рядка. Модифікатор .pl-empty__act--col для нових користувачів; .pl-es — для наявного partial-а (вага (0,3,1) як було в layout-<style>). */
html.pl-kit .pl-es .pl-empty__act,
.pl-empty__act--col { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: 0; }
html.pl-kit .pl-es .pl-empty__act > .pl-es__actions:first-child { margin-top: 12px; }

/* 12c. Список сайтів у шапці (.user_site_lists = nice-select): 36 / r4 / рамка поля / focus-ring; випадний список r4 + тінь overlay.
   Класу .pl-select на ньому немає (шкура додала б другий шеврон поверх бандлового), тому значення задано тут. */
html.pl-kit .wrapp_select_site .nice-select.user_site_lists {
    height: var(--pl-h-md); line-height: 34px; border-color: var(--pl-border-input); border-radius: var(--pl-radius-sm);
}
html.pl-kit .wrapp_select_site .nice-select.user_site_lists:hover,
html.pl-kit .wrapp_select_site .nice-select.user_site_lists.open { background: var(--pl-surface); }
html.pl-kit .wrapp_select_site .nice-select.user_site_lists:focus-visible { border-color: var(--pl-brand); box-shadow: var(--pl-focus-ring); outline: 0; }
html.pl-kit .wrapp_select_site .nice-select .list { border-radius: var(--pl-radius-sm); box-shadow: var(--pl-shadow-overlay); }

/* ---------- 13. N1–N5: компоненти сторінки «Тариф і оплата» (PR2, _analysis/billing_redesign_stages.md) ----------
   Лише додавання; наявні правила вище не змінені. Вибрані стани — за round 4: ink + прямі смуги. */

/* 13a. N1 .pl-progress--warn / --danger: колір заповнення за станом ліміту (базова смуга — brand). Клас стоїть на .pl-progress. */
.pl-progress--warn .pl-progress__bar { background-color: var(--pl-warn); }
.pl-progress--danger .pl-progress__bar { background-color: var(--pl-danger); }
/* K1 .pl-progress--xs — міні-смуга 4px для лічильника в рядку (шапка: «1,240 / 2,000 pageviews»). Ширину дає
   контейнер (напр. обгортка 48px); display:block — щоб працювало й на <span> усередині посилання/flex-рядка. */
.pl-progress--xs { display: block; width: 100%; min-width: 0; height: 4px; }
.pl-progress--xs .pl-progress__bar { display: block; }

/* 13b. N2 .sr-kpi--meter: KPI-картка ліміту = .sr-kpi + .pl-progress + рядок дії .sr-act.
   База .sr-kpi живе в kpi-cards.css (.sr-kpis .sr-kpi, 0,2,0) і може підключитись після kit — тому селектори з .sr-kpis .sr-kpi.sr-kpi--meter. */
.sr-kpis .sr-kpi.sr-kpi--meter { min-height: 0; }
.sr-kpi.sr-kpi--meter .sr-val small { font-size: 14px; font-weight: 400; color: var(--pl-muted); }
.sr-kpi.sr-kpi--meter .pl-progress { margin-top: auto; }
.sr-kpi.sr-kpi--meter .sr-act { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; min-height: 28px; }
.sr-kpis .sr-kpi.sr-kpi--meter.is-warn { border-color: var(--pl-warn); }
.sr-kpis .sr-kpi.sr-kpi--meter.is-full { border-color: var(--pl-danger); }
.sr-kpi.sr-kpi--meter.is-off .sr-val { color: var(--pl-muted-2); }

/* 13c. N3 .pl-nav-v__item--2l: пункт вертикальної навігації у два рядки (назва + статус), від 56px.
   Вибраний пункт — як у .pl-nav-v__item: --pl-surface + пряма ліва смуга 2px --pl-ink (правило 11c). Елемент може бути <button>. */
.pl-nav-v__item--2l {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center;
    width: 100%; height: auto; min-height: 56px; padding: 8px 12px;
    border: 0; background-color: transparent; text-align: left; cursor: pointer;
}
.pl-nav-v__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-nav-v__sub { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--pl-muted); }
.pl-nav-v__group { display: flex; justify-content: space-between; padding: 12px 12px 4px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--pl-muted); }

/* 13d. N4 .pl-dl--row: «назва → значення» в рядок (факти сутності під заголовком картки). Розмітка: <dl class="pl-dl pl-dl--row"><div><dt>…</dt><dd>…</dd></div>…</dl>. */
.pl-dl--row { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.pl-dl--row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pl-dl--row > div > dt { margin: 0; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--pl-muted); }
.pl-dl--row > div > dd { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--pl-ink); overflow-wrap: anywhere; }

/* 13e. N5 .pl-plan / .pl-plans: картка плану = .pl-choice + ціна + .pl-dl специфікації; сітка 3 колонки (1 колонка до 1000px). */
.pl-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pl-plan { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.pl-plan__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 20px; }
.pl-plan__name { font-size: 16px; line-height: 24px; font-weight: 600; }
.pl-plan__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pl-plan__price b { font-size: 24px; line-height: 32px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-plan__price s { color: var(--pl-muted); }
.pl-plan .pl-dl { font-size: 13px; line-height: 18px; gap: 4px 12px; grid-template-columns: 1fr auto; }
.pl-plan .pl-dl > dd { text-align: right; font-variant-numeric: tabular-nums; }
.pl-plan:disabled { cursor: default; background-color: var(--pl-surface); border-color: var(--pl-line); }
@media (max-width: 1000px) { .pl-plans { grid-template-columns: 1fr; } }

/* 14a. SR3 .pl-link / .pl-link--pop: посилання за призначенням (рішення власника 14.10: «не очевидно, що куди клікати, де попап і де посилання»).
   .pl-link — навігація (інша сторінка / розділ): колір --pl-link + тонке СУЦІЛЬНЕ підкреслення завжди (1px, відступ 3px, колір підкреслення — 60% від --pl-link).
   .pl-link--pop — відкриває шар на цій самій сторінці (поповер / drawer / меню), не переходить: ПУНКТИРНЕ підкреслення, cursor pointer; можна на <a> і на <button>
   (кнопку скидаємо: border / background / padding / font). .pl-link--ink — варіант для «текстових» значень (часовий пояс): текст --pl-ink, підкреслення від --pl-ink.
   Hover: повний колір підкреслення (currentColor) + текст --pl-brand-hover; :active — --pl-brand-active; focus-visible — кільце як у кіті (--pl-focus-outline, offset 2px).
   Нові класи, глобальні a / button не чіпаємо. Класи працюють і поодинці (.pl-link--pop без .pl-link). Підкреслення малюється на інлайн-тексті: для a з іконкою-flex підкреслення ставити на внутрішній <span>.
   Специфічність a.pl-link:hover / button.pl-link--pop (0,2,1 / 0,1,1) перебиває `a:hover { text-decoration: none }` бандла. */
.pl-link,
.pl-link--pop {
    --pl-lk-c: var(--pl-link);
    color: var(--pl-lk-c);
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(20, 116, 227, .6);
    text-decoration-color: color-mix(in srgb, var(--pl-lk-c) 60%, transparent);
    cursor: pointer;
}
.pl-link--pop { text-decoration-style: dotted; }
.pl-link--ink { --pl-lk-c: var(--pl-ink); text-decoration-color: rgba(25, 27, 35, .6); text-decoration-color: color-mix(in srgb, var(--pl-lk-c) 60%, transparent); }
/* <button class="pl-link--pop">: скидання кнопки до рядка тексту. */
button.pl-link,
button.pl-link--pop {
    display: inline;
    height: auto; min-height: 0; margin: 0; padding: 0;
    border: 0; border-radius: 2px; background: transparent; box-shadow: none;
    font: inherit; letter-spacing: inherit; text-align: inherit; text-transform: none;
    -webkit-appearance: none; appearance: none;
}
.pl-link:hover, a.pl-link:hover, button.pl-link:hover,
.pl-link--pop:hover, a.pl-link--pop:hover, button.pl-link--pop:hover {
    color: var(--pl-brand-hover);
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    background: transparent;
}
.pl-link:active, a.pl-link:active, button.pl-link:active,
.pl-link--pop:active, a.pl-link--pop:active, button.pl-link--pop:active { color: var(--pl-brand-active); text-decoration-line: underline; background: transparent; }
.pl-link:focus-visible, .pl-link--pop:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; border-radius: 2px; text-decoration-color: currentColor; }
.pl-link:focus:not(:focus-visible), .pl-link--pop:focus:not(:focus-visible) { outline: 0; }
/* aria-expanded=true (шар відкрито) — підкреслення лишається пунктирним, але повного кольору: видно, який елемент відкрив шар. */
.pl-link--pop[aria-expanded="true"] { text-decoration-color: currentColor; }

/* ---------- 15. Auth & onboarding (AU0, _analysis/auth_redesign_stages.md, мокап auth_redesign_mockup.html v4) ----------
   Нові класи без html.pl-kit (як компоненти UK1/UC1b): наявні правила kit не змінюються.
   .pl-chips / .pl-chip — поле з кількома email (запрошення); ≠ .p-chips (фільтри списку з p-controls.css). */

/* 15a. .p_btn--block — кнопка на всю ширину картки/форми. */
.p_btn--block { width: 100%; justify-content: center; }

/* 15b. .pl-divider--text — «або email»: лінія --pl-line з підписом посередині. */
.pl-divider--text { display: flex; align-items: center; gap: 12px; color: var(--pl-muted); font-size: 12px; line-height: 16px; }
.pl-divider--text::before,
.pl-divider--text::after { content: ""; flex: 1; height: 1px; background: var(--pl-line); }

/* 15c. .pl-password — поле пароля + кнопка показу справа.
   <div class="pl-password"><input class="pl-input" type="password" autocomplete="current-password">
   <button class="pl-password__toggle" type="button" aria-label="…" aria-pressed="false">pi-visibility-16 | pi-visibility-off-16</button></div> */
.pl-password { position: relative; }
.pl-password .pl-input { padding-right: 44px; }
.pl-password__toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--pl-radius-sm);
    background: transparent;
    color: var(--pl-muted);
    cursor: pointer;
}
.pl-password__toggle:hover { background: var(--pl-surface); color: var(--pl-ink); }
.pl-password__toggle:focus { outline: none; }
.pl-password__toggle:focus-visible { outline: var(--pl-focus-outline); outline-offset: 0; }

/* 15d. .pl-strength — сила пароля: 4 сегменти + текст; data-v 0 (порожньо) … 4. */
.pl-strength { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.pl-strength__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; flex: 1; }
.pl-strength__bars i { height: 4px; background: var(--pl-line); }
.pl-strength[data-v="1"] i:nth-child(-n+1) { background: var(--pl-danger); }
.pl-strength[data-v="2"] i:nth-child(-n+2) { background: var(--pl-warn); }
.pl-strength[data-v="3"] i:nth-child(-n+3) { background: var(--pl-success); }
.pl-strength[data-v="4"] i { background: var(--pl-success); }
.pl-strength__txt { font-size: 12px; line-height: 16px; color: var(--pl-muted); min-width: 64px; text-align: right; }

/* 15e. .pl-otp — 6 клітинок коду (2FA). input.pl-input — щоб висота 52 перебила контекстну висоту поля (.au .pl-input 40). */
.pl-otp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.pl-otp > input.pl-input { height: 52px; padding: 0; text-align: center; font: 500 22px/28px var(--pl-font-mono); }

/* 15f. .pl-field__ok — успіх під полем («Паролі збігаються»): pi-status-ok-16 + текст. */
.pl-field__ok { margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--pl-success); display: flex; gap: 4px; align-items: center; }

/* 15g. .pl-chips / .pl-chip — кілька значень в одному полі (кома / пробіл / Enter / вставка списку); невалідне — .is-invalid. */
.pl-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 36px; padding: 4px 6px; border: 1px solid var(--pl-border-input); border-radius: var(--pl-radius-sm); background: var(--pl-bg); cursor: text; }
.pl-chips:focus-within { border-color: var(--pl-brand); box-shadow: var(--pl-focus-ring); }
.pl-chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 4px 0 8px; border-radius: var(--pl-radius-sm); background: var(--pl-surface); font-size: 13px; }
.pl-chip.is-invalid { background: var(--pl-danger-bg); color: var(--pl-danger); }
.pl-chip button { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; color: var(--pl-muted); cursor: pointer; }
.pl-chip button:hover { background: var(--pl-line); color: var(--pl-ink); }
.pl-chip button:focus { outline: none; }
.pl-chip button:focus-visible { outline: var(--pl-focus-outline); outline-offset: 0; }
.pl-chip button .pi { width: 12px; height: 12px; }
.pl-chips input { flex: 1; min-width: 120px; height: 26px; border: 0; outline: none; padding: 0; font: 400 14px/20px var(--pl-font); color: var(--pl-ink); background: transparent; }

/* ---------- 16. IV8: голос, аватар, «Стежити» (сторінка «Ідеї», _analysis/ideas_ux_v2_2026-10-15.md §6.1) ----------
   Нові класи без html.pl-kit (як .pl-star / UK1), крім .pl-follow — це модифікатор .p_btn і живе там же, де .p_btn (:where(html.pl-kit…)).
   Лише токени --pl-*; єдиний літерал — рамка pressed-голосу #B9D3F6 (токена brand-line у кіті немає; кандидат на --pl-brand-line). */

/* 16a. .pl-vote — кнопка голосу 52×56 r4: pi-delta-up-16 над числом (еталон .ide-vote у мокапі).
   aria-pressed = «ви проголосували»; :disabled / [aria-disabled] = голосування ще не відкрите або закрите (title з причиною);
   .is-loading — спінер 16 на місці гліфа, клік ігнорується (pointer-events), число не зсувається.
   --sm — 28 в рядок (гліф + число) для компактних списків і модалки «Схожі ідеї». */
.pl-vote {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: 52px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius-sm);
    background: var(--pl-bg);
    color: var(--pl-ink);
    font: 600 16px/20px var(--pl-font);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, color .15s;
}
.pl-vote .pi { flex: none; color: var(--pl-muted); margin-bottom: -2px; }
.pl-vote:not(:disabled, [aria-disabled="true"], .is-loading, [aria-pressed="true"]):hover { border-color: var(--pl-muted-2); }
.pl-vote:not(:disabled, [aria-disabled="true"], .is-loading, [aria-pressed="true"]):hover .pi { color: var(--pl-ink); }
.pl-vote:focus { outline: none; }
.pl-vote:focus-visible { outline: var(--pl-focus-outline); outline-offset: 2px; }
.pl-vote[aria-pressed="true"] { background: var(--pl-brand-bg); border-color: #B9D3F6; color: var(--pl-brand); }
.pl-vote[aria-pressed="true"] .pi { color: var(--pl-brand); }
.pl-vote[aria-pressed="true"]:not(:disabled, [aria-disabled="true"], .is-loading):hover { border-color: var(--pl-brand); }
.pl-vote:is(:disabled, [aria-disabled="true"]) { background: var(--pl-surface); border-color: var(--pl-surface); color: var(--pl-muted); cursor: default; }
.pl-vote:is(:disabled, [aria-disabled="true"]) .pi { color: var(--pl-subtle); }
.pl-vote.is-loading { pointer-events: none; cursor: progress; }
.pl-vote.is-loading .pi { visibility: hidden; }
/* Спінер на місці гліфа: контент 16 − 2 + 20 = 34 у 54 (без рамки) → гліф із top 10. */
.pl-vote.is-loading::after {
    content: "";
    position: absolute;
    top: 10px;
    left: calc(50% - 8px);
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pl-spin .8s linear infinite;
}
.pl-vote--sm {
    flex-direction: row;
    gap: 4px;
    width: auto;
    min-width: 52px;
    height: var(--pl-h-sm);
    padding: 0 8px;
    font-size: 13px;
    line-height: 18px;
}
.pl-vote--sm .pi { margin-bottom: 0; }
.pl-vote--sm.is-loading::after { top: calc(50% - 8px); left: 7px; }

/* 16b. .pl-avatar — ініціали в колі (патерн .hd-ava у header-v5.css): 24 дефолт, --32; --team — команда Plerdy.
   Можна з <img> усередині (object-fit cover). Декоративний: поруч завжди імʼя текстом, тому aria-hidden="true". */
.pl-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    overflow: hidden;
    border-radius: var(--pl-radius-round);
    background: var(--pl-surface);
    color: var(--pl-muted);
    font: 600 10px/1 var(--pl-font);
    letter-spacing: 0;
    -webkit-user-select: none;
    user-select: none;
}
.pl-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-avatar--32 { width: 32px; height: 32px; font-size: 12px; }
.pl-avatar--team { background: var(--pl-brand); color: var(--pl-bg); }

/* 16c. .pl-follow — перемикач «Стежити / Ви стежите» = .p_btn.p_btn-tertiary + aria-pressed + pi-notifications-16.
   off: --pl-muted, hover --pl-ink на --pl-surface; on (aria-pressed=true): --pl-brand, hover --pl-brand-hover.
   disabled (6g) і .is-loading (6h) — від .p_btn: правила нижче не діють на disabled без .is-loading, а --pl-btn-c дає колір спінера. */
:where(html.pl-kit:not(.pl-kit-noc)) .p_btn.p_btn-tertiary.pl-follow:is(:not(:disabled, .disabled, [aria-disabled="true"]), .is-loading) {
    --pl-btn-c: var(--pl-muted);
    color: var(--pl-muted);
}
:where(html.pl-kit:not(.pl-kit-noc)) .p_btn.p_btn-tertiary.pl-follow:not(:disabled, .disabled, [aria-disabled="true"], .is-loading):is(:hover, :active) {
    background: var(--pl-surface);
    color: var(--pl-ink);
}
:where(html.pl-kit:not(.pl-kit-noc)) .p_btn.p_btn-tertiary.pl-follow[aria-pressed="true"]:is(:not(:disabled, .disabled, [aria-disabled="true"]), .is-loading) {
    --pl-btn-c: var(--pl-brand);
    color: var(--pl-brand);
}
:where(html.pl-kit:not(.pl-kit-noc)) .p_btn.p_btn-tertiary.pl-follow[aria-pressed="true"]:not(:disabled, .disabled, [aria-disabled="true"], .is-loading):is(:hover, :active) {
    background: var(--pl-surface);
    color: var(--pl-brand-hover);
}

/* ---------- 17. FL30: компоненти сторінок Form Analytics (/admin/forms, /admin/forms/analytics) у кіті ----------
   _analysis/forms_tool_launch_stages.md FL30 (ui_audit_list §4 / FU12, ui_audit_report §4 / FR16).
   Значення взято 1:1 з живих правил form-analytics.css після FL11–FL29 і переведено на токени.
   Сторінки форм поки малюють ці компоненти модульними класами під .fa-page (аліаси — у коментарі кожного блоку):
   цей розділ їх НЕ перебиває (нові імена pl-*), перевести сторінки на pl-класи — окремим етапом після FL21.
   Нові класи без html.pl-kit (як UK1/UC1b/15): наявні правила kit не змінюються. Виняток — 17h (див. там). */

/* 17a. .pl-cell-bar — смужка-метр у клітинці таблиці (аліас .fl-crbar, колонка CR списку форм):
   трек 75×5 r5 --pl-line, заливка --pl-brand, значення праворуч від смужки, gap 6, без кольорових порогів. */
.pl-cell-bar { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pl-cell-bar__t { flex: none; width: 75px; height: 5px; border-radius: 5px; background-color: var(--pl-line); overflow: hidden; }
.pl-cell-bar__t > span { display: block; height: 100%; border-radius: 5px; background-color: var(--pl-brand); }

/* 17b. Двоярусна клітинка (аліаси .fl-list .nm > a / .u / .main / .sub): назва 600 ink з ellipsis (посилання → hover brand),
   значення 14/20, підрядок 12/140% --pl-muted з переносом; --trunc — підрядок в один рядок з ellipsis (URL).
   td.is-name: max-width 0 — ellipsis в auto-таблиці (ширину колонці дає th, а не min-content довгої назви). */
.pl-table td.is-name { max-width: 0; }
.pl-cell__title { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--pl-ink); text-decoration: none; }
a.pl-cell__title:hover { color: var(--pl-brand); text-decoration: none; }
.pl-cell__main { display: block; font-size: 14px; line-height: 20px; }
.pl-cell__main.is-muted { color: var(--pl-muted-2); }
.pl-cell__sub { display: block; margin-top: 4px; font-size: 12px; line-height: 140%; color: var(--pl-muted); white-space: normal; }
.pl-cell__sub--trunc { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 17c. tr.pl-table__fold — згорнутий рядок «ще N … — показати» в кінці таблиці (аліас tr.fl-nv-more):
   13px --pl-muted, переноситься (на вузькому екрані не стискається в слово-на-рядок), дія = button.pl-link--pop (розгортає на місці). */
.pl-table > tbody > tr.pl-table__fold > td { font-size: 13px; color: var(--pl-muted); white-space: normal; text-align: left; max-width: none; }

/* 17d. tr.pl-table__group — групувальний рядок таблиці (аліас .fr-table tr.fr-grp): td colspan, p 8 12, фон #F7F8FA,
   12/18 600 --pl-muted; назва групи b ink; __meta 400 через 8; __note окремим рядком 400 mt 2.
   padding з !important і :not(#pl-kit-x) — так само, як td у 8a (бандл admin_main має !important на td).
   .pl-table--sticky — шапка липка під header-v5 (top 105, як «Усі поля» звіту форми). */
html.pl-kit .pl-table:not(#pl-kit-x) > tbody > tr.pl-table__group > td,
.pl-table > tbody > tr.pl-table__group > td { padding: 8px 12px !important; background-color: #F7F8FA; font-size: 12px; line-height: 18px; font-weight: 600; color: var(--pl-muted); }
.pl-table > tbody > tr.pl-table__group > td b { font-weight: 600; color: var(--pl-ink); }
.pl-table__group-meta { margin-left: 8px; font-weight: 400; }
.pl-table__group-note { display: block; margin-top: 2px; font-weight: 400; }
.pl-table--sticky > thead > tr > th { position: sticky; top: 105px; z-index: 2; }

/* 17e. .pl-table-note — примітка-методологія під таблицею (аліас .fo-note): mt 12, 12px / 1.55, --pl-muted, b ink 600. */
.pl-table-note { margin-top: 12px; font-size: 12px; line-height: 1.55; color: var(--pl-muted); }
.pl-table-note b { font-weight: 600; color: var(--pl-ink); }

/* 17f. .pl-term — термін з пунктирним підкресленням і тултіпом на слові (аліаси .fl-dotted / .fr-dotted).
   Тултіп — той самий Bootstrap + data-container="body" + data-template з .pl-tooltip (10e), без ⓘ. */
.pl-term { border-bottom: 1px dashed var(--pl-subtle); cursor: help; }

/* 17g. .pl-row-act — текстова дія рядка + меню ⋯ в одній клітинці (аліас .fl-act + details.fo-menu):
   flex праворуч, gap 4; «Звіт» = p_btn p_btn-light (28), ⋯ = summary.pl-icon-btn 28 + pi-more 16, меню = .pl-menu.
   Відкрите ⋯ — ink на --pl-surface. Позицію меню (вниз або вгору, якщо знизу не влізає; position:fixed, щоб не різав
   overflow таблиці) ставить JS сторінки (foMenuPlace у forms/index.blade.php), клас .is-up. __meta — пояснення під роздільником. */
.pl-row-act { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.pl-row-act > details { display: flex; align-items: center; }
.pl-row-act summary.pl-icon-btn { list-style: none; }
.pl-row-act summary.pl-icon-btn::-webkit-details-marker { display: none; }
.pl-row-act details[open] > summary.pl-icon-btn { color: var(--pl-ink); background-color: var(--pl-surface); }
.pl-menu__meta { padding: 6px 12px 4px; font-size: 12px; line-height: 16px; color: var(--pl-muted); white-space: normal; }

/* 17h. Активний фільтр у .pl-filterbar (аліаси .fl-sel.on / .fl-q.on / .fl-country.on; D-FL20 → нейтральний ink, не червоний:
   червоний у kit = помилка / видалення). Клас .on — як у .p-chip.on / .p-seg .on. Фокус поля лишається brand (:not(:focus)).
   Діє на наявні .pl-filterbar: grep 16.10 — .pl-select.on / .pl-input.on є лише на сторінках форм (там той самий ink). */
.pl-filterbar .nice-select.pl-select.on,
.pl-filterbar .pl-select.on .nice-select,
.pl-filterbar .pl-select.on .select2-selection,
.pl-filterbar .pl-input.on:not(:focus) { border-color: var(--pl-ink); }

/* 17i. .pl-verdict — «вердикт звіту» поверх .pl-notice (аліас .fa-verdict): заголовок-висновок 14/20 600 + речення з цифрами
   14/20 ink + дія праворуч (по центру блоку); тон = модифікатор .pl-notice (success / warn / danger / info);
   колір тону ЛИШЕ в числах-результатах b.pl-verdict__res, назва проблемного поля лишається ink 600.
   --neutral (мало даних) — іконка --pl-muted. ≤767: дія під текстом на осі тексту (16 + gap 8 = 24). */
.pl-notice.pl-verdict { flex-wrap: wrap; align-items: center; }
.pl-notice.pl-verdict > .pi:first-child { align-self: flex-start; margin-top: 2px; }
.pl-verdict__t { flex: 1 1 320px; min-width: 0; }
.pl-verdict__h { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--pl-ink); }
.pl-verdict__s { display: block; margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--pl-ink); }
.pl-verdict__s b { font-weight: 600; color: var(--pl-ink); }
.pl-notice--danger .pl-verdict__s b.pl-verdict__res { color: var(--pl-danger); }
.pl-notice--warn .pl-verdict__s b.pl-verdict__res { color: var(--pl-warn); }
.pl-notice--success .pl-verdict__s b.pl-verdict__res { color: var(--pl-success); }
.pl-verdict .pl-notice__act { display: flex; align-items: center; gap: 4px; }
.pl-notice.pl-verdict--neutral > .pi:first-child { color: var(--pl-muted); }
@media (max-width: 767px) {
    .pl-verdict__t { flex: 1 1 calc(100% - 24px); }
    .pl-verdict .pl-notice__act { margin-left: 24px; }
}

/* 17j. .pl-issues — картка інсайтів / проблем (аліаси .rv-notices / .rv-nt: Revenue, Forms .rv-pb, SEO .page_seo_analysis — 3 копії).
   Вигляд кіта = Forms після FL23 (усе на токенах, кратне 4): картка 1px line r4; голова p 12 16 на --pl-surface, 12/16 muted,
   назва 14/20 600 ink, лічильник 20 r4 12/16 600 на --pl-line; рядок p 12 16, gap 8, 14/20 muted, заголовок b ink 600 окремим рядком,
   іконка pi-status-* 16 кольору тону, тон = ліва риска 3px (inset); дії праворуч по центру, gap 8 (p_btn-light 28 + pi-play 16, ⓘ поруч).
   Revenue / SEO не переведені (13/19; тон Revenue = тінт фону, R4-FRA) — уніфікація окремим етапом, див. спец-таблицю в кіті. */
.pl-issues { overflow: hidden; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-sm); background-color: var(--pl-bg); font-family: var(--pl-font); }
.pl-issues__head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--pl-line); background-color: var(--pl-surface); font-size: 12px; line-height: 16px; color: var(--pl-muted); }
.pl-issues__head b { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--pl-ink); }
.pl-issues__n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pl-radius-sm); background-color: var(--pl-line); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--pl-ink); }
.pl-issue { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; font-size: 14px; line-height: 20px; color: var(--pl-muted); }
.pl-issue + .pl-issue { border-top: 1px solid var(--pl-line); }
.pl-issue b { font-weight: 600; color: var(--pl-ink); }
.pl-issue__b { flex: 1; min-width: 0; }
.pl-issue__b > b:first-child { display: block; }
.pl-issue__ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--pl-muted); }
.pl-issue__go { flex: none; align-self: center; display: flex; align-items: center; gap: 8px; }
.pl-issue--warn { box-shadow: inset 3px 0 0 var(--pl-warn); }
.pl-issue--good { box-shadow: inset 3px 0 0 var(--pl-success); }
.pl-issue--bad { box-shadow: inset 3px 0 0 var(--pl-danger); }
.pl-issue--warn .pl-issue__ic { color: var(--pl-warn); }
.pl-issue--good .pl-issue__ic { color: var(--pl-success); }
.pl-issue--bad .pl-issue__ic { color: var(--pl-danger); }
@media (max-width: 760px) {
    .pl-issue { flex-wrap: wrap; }
    .pl-issue__b { flex: 1 1 calc(100% - 24px); }
    .pl-issue__go { align-self: flex-start; flex-wrap: wrap; margin-left: 24px; }
}

/* 17k. .pl-kpi-drop — відсів між кроками воронки в KPI-картці (аліас .fl-kpi-drop; D-FL26): перший рядок .sr-note
   «−13.7% від кроку вище», без стрілки, muted tabular; ≥25% — .is-bad (--pl-danger 500). Це НЕ x-pl.delta:
   той означає «зміна до попереднього періоду». */
.sr-kpi .pl-kpi-drop { display: block; color: var(--pl-muted); font-variant-numeric: tabular-nums; }
.sr-kpi .pl-kpi-drop.is-bad { color: var(--pl-danger); font-weight: 500; }

/* 17l. .pl-rankbar — рядок-рейтинг «назва · бар · N · %» (аліас .fr-gu, «Де здаються»): grid 1fr / 90 / 64, gap 12, p 6 0,
   14/20 ink, клік (role=button, tabindex 0); hover і .is-selected — назва brand; бар 4 px r0 як .pl-progress:
   заливка --pl-danger, --warn → --pl-warn, --low → --pl-subtle; число праворуч tabular, «· 28%» 12 muted. */
.pl-rankbar { display: grid; grid-template-columns: minmax(0, 1fr) 90px 64px; align-items: center; gap: 12px; padding: 6px 0; font-size: 14px; line-height: 20px; color: var(--pl-ink); cursor: pointer; outline: 0; }
.pl-rankbar:hover .pl-rankbar__name,
.pl-rankbar.is-selected .pl-rankbar__name { color: var(--pl-brand); }
.pl-rankbar:focus-visible { border-radius: var(--pl-radius-sm); box-shadow: inset 0 0 0 2px #9EC5F5; }
.pl-rankbar__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-rankbar__t { height: 4px; border-radius: 0; background-color: var(--pl-line); overflow: hidden; }
.pl-rankbar__t > span { display: block; height: 100%; border-radius: 0; background-color: var(--pl-danger); }
.pl-rankbar__t--warn > span { background-color: var(--pl-warn); }
.pl-rankbar__t--low > span { background-color: var(--pl-subtle); }
.pl-rankbar__c { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-rankbar__c small { margin-left: 2px; font-size: 12px; color: var(--pl-muted); }

/* 17m. .pl-snap — кадр сторінки з оверлеями (аліаси .fs-*, «Форма на сайті»): сцена #EAECEE r4 (min 220), кадр білий з тінню,
   рамки полів 2px r4 за рівнем (--bad danger / --warn warn / --none subtle dashed / .is-selected brand + кільце),
   мітки (pin) 12/16 на білому 1px line r4, число b 13/600 кольору рівня, підрядок small 12 muted (--compact — без нього),
   легенда 12 muted зі зразками 14×10; лоадер — kit .pl-loader--block + .pl-spinner--24 поверх сцени (фон сцени .85).
   Координати рамок і міток ставить JS сторінки (з rrweb-кадру), тут — лише вигляд. */
.pl-snap { position: relative; min-height: 220px; overflow: hidden; border-radius: var(--pl-radius-sm); background-color: #EAECEE; }
.pl-snap__view { position: absolute; overflow: hidden; background-color: var(--pl-bg); box-shadow: 0 1px 3px rgba(25, 27, 35, .08); pointer-events: none; }
.pl-snap__fz { position: absolute; box-sizing: border-box; border: 2px solid transparent; border-radius: var(--pl-radius-sm); background: transparent; cursor: pointer; }
.pl-snap__fz:hover { border-color: var(--pl-brand); box-shadow: var(--pl-focus-ring); }
.pl-snap__fz--bad { border-color: var(--pl-danger); }
.pl-snap__fz--warn { border-color: var(--pl-warn); }
.pl-snap__fz--none { border-color: var(--pl-subtle); border-style: dashed; }
.pl-snap__fz.is-selected { border-color: var(--pl-brand); box-shadow: 0 0 0 3px rgba(20, 116, 227, .15); }
.pl-snap__fz--bad.is-selected { border-color: var(--pl-danger); box-shadow: 0 0 0 3px rgba(199, 73, 82, .18); }
.pl-snap__pin { position: absolute; display: block; box-sizing: border-box; margin: 0; padding: 5px 8px; border: 1px solid var(--pl-line); border-radius: var(--pl-radius-sm); background-color: var(--pl-bg); box-shadow: 0 1px 3px rgba(25, 27, 35, .06); font: 12px/16px var(--pl-font); color: var(--pl-ink); text-align: left; cursor: pointer; }
.pl-snap__pin:hover { border-color: var(--pl-brand); }
.pl-snap__pin b { font-size: 13px; font-weight: 600; }
.pl-snap__pin small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; color: var(--pl-muted); }
.pl-snap__pin--bad b { color: var(--pl-danger); }
.pl-snap__pin--warn b { color: var(--pl-warn); }
.pl-snap__pin--none { border-style: dashed; color: var(--pl-muted-2); }
.pl-snap__pin.is-selected { border-color: var(--pl-brand); }
.pl-snap__pin--compact { padding: 3px 7px; white-space: nowrap; }
.pl-snap__pin--compact small { display: none; }
.pl-snap__pin:focus-visible, .pl-snap__fz:focus-visible { outline: 2px solid var(--pl-brand); outline-offset: 1px; }
.pl-snap__loading { position: absolute; inset: 0; z-index: 2; align-items: center; background-color: rgba(234, 236, 238, .85); }
.pl-snap__loading[hidden] { display: none; }
.pl-snap__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 12px; font-size: 12px; color: var(--pl-muted); }
.pl-snap__legend:empty { display: none; }
.pl-snap__legend i { display: inline-block; box-sizing: border-box; width: 14px; height: 10px; margin-right: 6px; border: 2px solid var(--pl-subtle); border-radius: 2px; vertical-align: middle; }
.pl-snap__legend i.is-bad { border-color: var(--pl-danger); }
.pl-snap__legend i.is-warn { border-color: var(--pl-warn); }
.pl-snap__legend i.is-none { border-style: dashed; }
/* ---------- 18. Messaging (CHD0, _analysis/chat_stages.md; еталон — мокап chat_redesign_mockup_v1.html §1 + v1.1/v1.2) ----------
   Робочий простір переписки: чат, а також інбокс ідей / коментарів. Лише токени --pl-*; демо — /ui#kit-messaging. */

/* 18a. .pl-split — 3 панелі на всю висоту, кожна скролиться сама: __pane · __head · __body · __foot. */
.pl-split { display: grid; grid-template-columns: 320px minmax(0, 1fr) 320px; height: calc(100vh - 290px); min-height: 560px; background: var(--pl-bg); border: 1px solid var(--pl-line); border-radius: var(--pl-radius-sm); overflow: hidden; }
.pl-split__pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pl-split__pane + .pl-split__pane { border-left: 1px solid var(--pl-line); }
.pl-split__head { flex: none; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 10px 16px; border-bottom: 1px solid var(--pl-line); box-sizing: border-box; }
.pl-split__body { flex: 1; overflow: auto; min-height: 0; }
.pl-split__foot { flex: none; border-top: 1px solid var(--pl-line); }
/* 18a′. Вузькі екрани (D8, CHQ7). Панелі: перша — список, друга — основна, .pl-split__pane--aside — бічна (контекст).
   ≤ 1180: бічна ховається і відкривається як .pl-drawer праворуч (.pl-split.is-aside-open + наступний сусід .pl-backdrop);
   кнопка відкриття — .pl-split__aside-btn (видима лише ≤ 1180). ≤ 900: одна колонка — список або основна (.is-main),
   кнопка «Назад» — .pl-split__back (видима лише ≤ 900). Стан класів і backdrop веде JS сторінки. */
.pl-split .pl-split__aside-btn, .pl-split .pl-split__back, .pl-split + .pl-backdrop { display: none; }
@media (max-width: 1180px) {
    .pl-split { grid-template-columns: 320px minmax(0, 1fr); }
    .pl-split > .pl-split__pane--aside { display: none; }
    .pl-split .pl-split__aside-btn { display: inline-flex; }
    .pl-split.is-aside-open > .pl-split__pane--aside { display: flex; position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050; width: var(--pl-drawer-s); max-width: 100vw; border: 0; background: var(--pl-bg); box-shadow: var(--pl-shadow-modal); }
    .pl-split.is-aside-open > .pl-split__pane--aside > .pl-split__body { border-radius: 0; }
    .pl-split.is-aside-open + .pl-backdrop { display: block; }
}
@media (max-width: 900px) {
    .pl-split { grid-template-columns: minmax(0, 1fr); }
    .pl-split > .pl-split__pane + .pl-split__pane { border-left: 0; }
    .pl-split:not(.is-main) > .pl-split__pane:nth-child(2),
    .pl-split.is-main > .pl-split__pane:first-child { display: none; }
    .pl-split .pl-split__back { display: inline-flex; }
}

/* 18b. .pl-conv — елемент списку розмов: аватар · імʼя + час · текст + лічильник · __meta. .is-selected · .is-unread. */
.pl-conv { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--pl-line); cursor: pointer; position: relative; }
.pl-conv:hover { background: var(--pl-surface); }
.pl-conv.is-selected { background: var(--pl-surface); box-shadow: inset 3px 0 0 var(--pl-ink); }
.pl-conv[hidden] { display: none; }
.pl-conv__av { grid-row: span 3; align-self: start; height: 32px; }
.pl-conv__name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-conv.is-unread .pl-conv__name, .pl-conv.is-unread .pl-conv__text { color: var(--pl-ink); font-weight: 500; }
.pl-conv__time { color: var(--pl-muted); font-size: 12px; line-height: 20px; white-space: nowrap; }
.pl-conv__text { grid-column: 2; color: var(--pl-muted); font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-conv__meta { grid-column: 2 / span 2; display: flex; align-items: center; gap: 12px; color: var(--pl-ink); font-size: 13px; line-height: 18px; }
.pl-conv__meta span { display: inline-flex; align-items: center; gap: 4px; }
.pl-conv__meta .pi { color: var(--pl-muted); }
.pl-conv__meta .is-warn { color: var(--pl-warn); font-weight: 500; }
.pl-conv .pl-count { justify-self: end; }

/* 18c. .pl-avatar__presence — точка 10 px на аватарі 24/32 у .pl-avatar-wrap: .is-on = --pl-success, інакше --pl-subtle. */
.pl-avatar-wrap { position: relative; display: inline-flex; }
.pl-avatar__presence { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--pl-bg); background: var(--pl-subtle); box-sizing: border-box; }
.pl-avatar__presence.is-on { background: var(--pl-success); }

/* 18d. .pl-thread > .pl-msg — in (відвідувач) · --out (команда) · --note (внутрішня нотатка) · --first (початок серії) · .is-sending. */
.pl-thread { display: flex; flex-direction: column; gap: 4px; padding: 16px 24px 24px; }
.pl-msg { display: flex; flex-direction: column; max-width: 72%; align-self: flex-start; }
.pl-msg--out { align-self: flex-end; align-items: flex-end; }
.pl-msg__b { padding: 8px 12px; border-radius: 8px; background: var(--pl-surface); color: var(--pl-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.pl-msg--out .pl-msg__b { background: var(--pl-brand-bg); }
.pl-msg--note .pl-msg__b { background: var(--pl-warn-bg); border: 1px dashed var(--pl-warn-line); }
.pl-msg__meta { display: flex; gap: 6px; align-items: center; margin-top: 2px; color: var(--pl-muted); font-size: 12px; line-height: 16px; }
.pl-msg + .pl-msg:not(.pl-msg--out) .pl-msg__meta:empty { display: none; }
.pl-msg--first { margin-top: 12px; }
.pl-msg.is-sending .pl-msg__meta { font-style: italic; }

/* 18e. .pl-event — системний рядок таймлайну (тригер, призначення, закриття); день — наявний .pl-divider--text. */
.pl-event { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0; color: var(--pl-muted); font-size: 12px; line-height: 16px; text-align: center; }
.pl-event b { color: var(--pl-ink); font-weight: 500; }

/* 18f. .pl-typing — «друкує…»: три крапки; aria-label з langDb. */
.pl-typing { display: inline-flex; gap: 3px; padding: 10px 12px; border-radius: 8px; background: var(--pl-surface); align-self: flex-start; }
.pl-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--pl-muted-2); animation: plTyping 1.2s infinite; }
.pl-typing i:nth-child(2) { animation-delay: .2s; }
.pl-typing i:nth-child(3) { animation-delay: .4s; }
@keyframes plTyping { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pl-typing i { animation: none; opacity: .6; } }

/* 18g. .pl-composer — поле відповіді: __mode (p-seg) · __box (textarea autogrow 64–200 + __bar) · __hint.
   .is-note — режим внутрішньої нотатки (тон --pl-warn). «Надіслати» disabled, поки поле порожнє. */
.pl-composer { padding: 12px 16px 16px; }
.pl-composer__box { border: 1px solid var(--pl-border-input); border-radius: var(--pl-radius-sm); background: var(--pl-bg); }
.pl-composer__box:focus-within { border-color: var(--pl-brand); box-shadow: var(--pl-focus-ring); }
.pl-composer textarea { display: block; width: 100%; min-height: 64px; max-height: 200px; padding: 10px 12px; border: 0; outline: 0; resize: none; font: inherit; color: var(--pl-ink); background: transparent; box-sizing: border-box; }
.pl-composer__bar { display: flex; align-items: center; gap: 4px; padding: 4px 8px 8px; }
.pl-composer__bar .p_btn-primary { margin-left: auto; }
.pl-composer__hint { margin-top: 6px; color: var(--pl-muted); font-size: 12px; line-height: 16px; display: flex; justify-content: space-between; }
.pl-composer__mode { display: inline-flex; gap: 0; margin-bottom: 8px; }
.pl-composer.is-note .pl-composer__box { background: var(--pl-warn-bg); border-style: dashed; border-color: var(--pl-warn-line); }
.pl-composer.is-note .pl-composer__box:focus-within { box-shadow: var(--pl-warn-ring); }

/* 18h. .pl-swatches — вибір кольору: role=radiogroup, .pl-swatch[role=radio][aria-checked] + власний HEX (.pl-input). */
.pl-swatches { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* CHF4: flex:none — порожній <button> із flex:0 1 auto стискався до 0 на вузькій ширині; край — border (не inset box-shadow),
   кільце вибраного 2px ink з прозорим відступом 2px від краю (inset −5px від padding-box = −1 border −2 gap −2 ring). */
.pl-swatch { flex: none; box-sizing: border-box; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(25, 27, 35, .16); cursor: pointer; position: relative; padding: 0; }
.pl-swatch[hidden] { display: none; }
.pl-swatch[aria-checked="true"]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--pl-ink); pointer-events: none; }
.pl-swatch:focus-visible { outline: var(--pl-focus-outline); outline-offset: 4px; }
.pl-swatches .pl-input { width: 112px; }
.pl-swatches .pl-input.is-selected:not(:focus):not(.is-invalid) { border-color: var(--pl-ink); } /* CHF4: власний HEX (не з набору) вибрано — як кільце свотча */

/* 18i. .pl-hours — рядок розкладу «день + з — до»: label з .pl-checkbox · time · __dash · time · __off (вихідний). */
.pl-hours { display: grid; grid-template-columns: 120px 120px 16px 120px 1fr; gap: 8px 12px; align-items: center; }
.pl-hours .pl-input { width: 120px; }
.pl-hours > label { display: flex; align-items: center; gap: 8px; height: 36px; margin: 0; font-weight: 400; line-height: 20px; }
.pl-hours > label > input.pl-checkbox { margin: 0; flex: none; }
.pl-hours__dash { text-align: center; color: var(--pl-muted); }
.pl-hours__off { color: var(--pl-muted); }