/* ============================================================================
   "Gradient Mesh Spotlight" -- обраний з 10 напрямків дизайн, зафіксований як
   ОСНОВНИЙ стиль адмінки (2026-09-09, спершу обкатаний на consultants.php).
   Ink+cream замість Apple-блакиті, Bricolage Grotesque на заголовках, Hanken
   Grotesk на тексті -- шрифти підключені глобально в header.php.

   --green/--orange/--red НЕ займані -- вони семантичні (done/warn/danger) на
   десятках сторінок; лайм -- окремий --brand-токен, щоб не повторити баг цієї
   ж сесії (--accent колись збігся з --green на nutrition_texts.php). Сторінки,
   де немає що плутати (як .consultants-page), можуть свідомо перевизначити
   --green під --brand самі, у своєму скоупі -- тут, глобально, це небезпечно.

   Сам "спотлайт"-меш+скляна прозорість карток лишається POINT-в опції для
   окремих сторінок (.consultants-page), а не глобальним -- не встиг ще
   перевірити його на щільних таблицях (nutrition.php, ai_usage.php тощо), і
   вже раз ослаблював його вдвічі на consultants.php через нестрогу перевірку
   на реальній сторінці. Тут -- лише база: кольори, шрифти, форми, тіні. */
:root {
    --font-system: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "SF Pro Text",
                   "Helvetica Neue", Arial, sans-serif;
    --font-display: 'Bricolage Grotesque', var(--font-system);

    /* НЕ чистий --label-primary: якби акцент і звичайний текст були одним кольором,
       посилання б розрізнялись лише на ховері -- цей темно-мохово-зелений явно "інший",
       лишаючись у тій самій палітрі (той самий відтінок, що й --brand-ink нижче). */
    --accent: #3B5E20;
    --accent-tint-bg: rgba(59, 94, 32, 0.08);
    --brand: #C7F464;
    --brand-ink: #35470E;

    --bg-primary: #FBFBF7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F3F2EC;

    --label-primary: #14140F;
    --label-secondary: rgba(20, 20, 15, 0.62);
    --label-tertiary: rgba(20, 20, 15, 0.38);

    --fill-primary: rgba(20, 20, 15, 0.14);
    --fill-secondary: rgba(20, 20, 15, 0.10);
    --fill-tertiary: rgba(20, 20, 15, 0.06);
    --fill-quaternary: rgba(20, 20, 15, 0.04);

    --separator: rgba(20, 20, 15, 0.10);

    /* Семантичні лишаються синьо-зеленою родиною Apple -- НЕ чіпати (див. коментар вище). */
    --green: #34C759; --green-text: #248a3d; --green-bg: rgba(52, 199, 89, 0.14);
    --orange: #FF9500; --orange-text: #9a5a00; --orange-bg: rgba(255, 149, 0, 0.14);
    --red: #FF3B30; --red-text: #b8291f; --red-bg: rgba(255, 59, 48, 0.14);

    /* Стовпчиковий графік (.pls-chart/.pls-bar/..., assets/js/admin-bar-chart.js) -- глобальні, не тільки --pulse-page: компонент
       спільний для кількох сторінок (nutrition_pulse.php, nutrition.php), а reusable-компонент має брати кольори звідси, не з
       page-scoped токенів (пітфол 5 у скілі gradient-mesh-spotlight). Решта --pls-* (good/warn/crit-bg/line) лишаються
       page-scoped на .pulse-page -- їх використовують лише чипи й розмітка самої сторінки "Пульс калорії", не сам графік. */
    --pls-blue: #2a78d6; --pls-grid: #e1e0d9; --pls-baseline: #c3c2b7; --pls-crit: #d03b3b;

    --glass-tint: rgba(255, 255, 255, 0.55);
    --glass-tint-strong: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.65);

    --r-sm: 10px; --r-md: 14px; --r-lg: 22px; --r-xl: 28px;

    --shadow-card: 0 2px 6px rgba(20,20,15,0.05), 0 16px 36px rgba(20,20,15,0.08);
    --shadow-modal: 0 24px 60px rgba(20,20,15,0.18);
    --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.5), 0 8px 30px rgba(20,20,15,0.10);

    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);

    --dur-fast: 140ms;
    --dur-base: 220ms;
    --dur-slow: 380ms;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: none; }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
    margin: 0;
    font-family: var(--font-system);
    background: var(--bg-primary);
    color: var(--label-primary);
    -webkit-font-smoothing: antialiased;
}

/* Ambient wash behind everything -- gives the glass sidebar something to refract.
   Лайм/небо/персик -- та сама "Gradient Mesh Spotlight" палітра, що й на consultants.php. */
.ambient-mesh {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 8% 8%, rgba(199,244,100,0.30), transparent 55%),
        radial-gradient(circle at 92% 12%, rgba(191,227,255,0.30), transparent 55%),
        radial-gradient(circle at 25% 95%, rgba(255,196,158,0.22), transparent 55%);
    filter: blur(80px) saturate(150%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Без цього будь-який компонент зі своїм явним display (flex/grid) переважає стандартну
   поведінку атрибута hidden -- toggle через .hidden=true тоді нічого не ховає (знайдено на
   .rich-editor{display:flex} -- перемикач тексту/фото не ховав блоковий редактор). */
[hidden] { display: none !important; }

::selection { background: var(--accent); color: #fff; }

/* Layout */

.layout { display: flex; min-height: 100vh; }

/* Плаваюча док-панель (06.10): .sidebar резервує 76px, сама панель висить на 10px від країв і показує лише іконки.
   Назви -- у підказці .dock-tip, режими -- у спливній .dock-pop (обидві живуть у body: див. admin-dock.js). */
.sidebar { width: 76px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; z-index: 60; }
.sidebar-panel {
    position: absolute; top: 10px; bottom: 10px; left: 10px; width: 56px;
    background: var(--glass-tint-strong);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(20, 20, 15, 0.08);
    overflow-x: hidden;
    overflow-y: auto; /* запас на низький екран: панель гортається, але без смуги */
    scrollbar-width: none;
}
.sidebar-panel::-webkit-scrollbar { display: none; }
.sidebar-in { min-height: 100%; padding: 12px 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sidebar-in > * { flex-shrink: 0; }

/* Бренд-блок: фото Олі -- вона обличчя продукту; ім'я й посада -- у підказці */
.sidebar-brand { margin-bottom: 4px; }
.sidebar-brand-avatar { width: 32px; height: 32px; font-size: 13px; }
.sidebar-brand-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.sidebar-brand-text { display: none; }

.mode-switch {
    display: flex; gap: 2px; padding: 3px;
    background: var(--fill-tertiary); border-radius: var(--r-md);
}
.mode-wrap { margin: 4px 0 2px; }
.sidebar-panel .mode-switch { display: none; }
.mode-cur {
    width: 30px; height: 24px; border-radius: 7px; cursor: pointer;
    background: var(--label-primary); color: var(--brand); font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.dock-pop { position: fixed; z-index: 200; width: 230px; background: var(--bg-secondary); border: 1px solid var(--separator); box-shadow: 0 8px 28px rgba(20, 20, 15, 0.16); }
.dock-tip {
    position: fixed; z-index: 200; padding: 5px 9px; border-radius: 7px; pointer-events: none; white-space: nowrap;
    background: var(--label-primary); color: #fff; font-size: 12px; font-weight: 500;
    opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard);
}
.dock-tip.on { opacity: 1; }
.mode-switch-btn {
    flex: 1; text-align: center; padding: 7px 4px; border-radius: calc(var(--r-md) - 3px);
    font-size: 13px; font-weight: 600; color: var(--label-secondary);
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.mode-switch-btn:hover { text-decoration: none; }
.mode-switch-btn:active { transform: scale(0.97); }
.mode-switch-btn.active { background: var(--bg-secondary); color: var(--label-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* Групи розділяє тонка риска; назву групи видно лише в коді сторінки, на екрані її нема */
.nav-group-label { width: 24px; height: 1px; margin: 6px 0; padding: 0; overflow: hidden; font-size: 0; background: var(--separator); }
.nav-group { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.nav-chip {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    border-radius: 11px;
    color: var(--label-secondary);
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav-chip-l { display: flex; align-items: center; }
.nav-chip-l span:last-child { display: none; }
.nav-chip-ic { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.nav-chip-ic svg { width: 20px; height: 20px; }
.nav-chip:hover { background: var(--fill-tertiary); text-decoration: none; }
.nav-chip.active { background: var(--brand); color: var(--brand-ink); }

.nav-badge-count {
    position: absolute; top: -2px; right: -3px;
    background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 3px;
}

.sidebar .logout {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 34px; margin-top: auto; border-radius: 11px;
    color: var(--red-text);
    opacity: 0.85;
}
.sidebar .logout span:last-child { display: none; }
.sidebar .logout:hover { opacity: 1; background: var(--fill-tertiary); text-decoration: none; }

.main {
    flex: 1;
    /* min-width:0 обов'язково -- без нього флекс-елемент за умовчанням не стискається вужче за
       min-content свого вмісту (той самий паттерн, що вже є в .person-main/.consultant-row-main
       нижче в цьому файлі, просто не був застосований тут). Коли одна картка на сторінці має
       достатньо широкий вміст (напр. рядок кнопки з кількома нестискуваними іконками),
       .main розтягується ширше за .layout -- і вся сторінка отримує горизонтальну прокрутку.
       Перевірено наживо: без цього .main рахувався в 2000px при вʼюпорті 1905px. */
    min-width: 0;
    padding: 30px 40px;
    max-width: 1040px;
    background: var(--bg-primary);
}

.main.main-full {
    max-width: none;
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Typography scale */

.main h2 {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
    color: var(--label-primary);
}

.main h3 {
    font-size: 20px;
    line-height: 25px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--label-primary);
}

p { line-height: 1.5; }

.muted { color: var(--label-secondary); font-size: 15px; }

/* Заголовок сторінки -- іконка-бейдж + h2/опис в один рядок, замість голого <h2>. Колір бейджа
   іде від var(--accent)/var(--accent-tint-bg), тож на сторінках зі своїм скопованим акцентом
   (напр. .ntx-page) він сам підхоплює той колір -- нічого дублювати не треба. Спершу з'явився на
   nutrition_texts.php, тепер спільний компонент для будь-якої сторінки. */
.page-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.page-header-icon {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-tint-bg); color: var(--accent);
}
.page-header-icon svg { width: 22px; height: 22px; }
.page-header h2 { margin: 0 0 4px; }
.page-header .muted { max-width: 640px; margin: 0; }

/* Cards */

.card {
    background: var(--bg-secondary);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: 18px 20px;
    margin-bottom: 16px;
    animation: fadeSlideUp var(--dur-slow) var(--ease-out-soft) both;
}

/* Stats */

.stats { display: flex; gap: 16px; flex-wrap: wrap; }
.stat { flex: 1; min-width: 180px; }
.stat .value {
    font-size: 34px;
    line-height: 41px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--label-primary);
}
.stat .label {
    font-size: 13px;
    color: var(--label-secondary);
    font-weight: 500;
}

/* Tables -- styled as an inset-grouped list */

table { width: 100%; border-collapse: collapse; }

th {
    text-align: left;
    padding: 0 8px 10px;
    color: var(--label-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 1px solid var(--separator);
}

td {
    text-align: left;
    padding: 10px 8px;
    font-size: 14px;
    border-bottom: 1px solid var(--separator);
}

tr:last-child td { border-bottom: none; }

tbody tr { transition: background-color var(--dur-fast) var(--ease-standard); }
tbody tr:hover td { background: var(--fill-quaternary); }

/* Панель пошуку/фільтра над таблицею (assets/js/admin-table.js) */
.table-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.table-toolbar input[type=search] { max-width: 260px; margin: 0; }

/* Колонка з числами -- вирівняні цифри в стовпчик і по правому краю (стандарт для фінансових
   таблиць: суми різної довжини інакше не зіставити оком -- $4.20 під $412.00 виглядає хаотично
   зліва, але одразу читається, коли розряди вирівняні по правому краю одне під одним). */
.num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Друга приглушена строка під основним текстом комірки таблиці (напр. @юзернейм під іменем). */
.cell-sub { display: block; font-size: 12px; color: var(--label-secondary); margin-top: 1px; }

.model-code {
    font-family: ui-monospace, "SF Mono", monospace; font-size: 12px;
    background: var(--fill-tertiary); color: var(--label-primary);
    padding: 3px 8px; border-radius: var(--r-sm);
}

th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--label-primary); }
th.sortable .sort-arrow { display: inline-block; margin-left: 4px; font-size: 9px; opacity: 0.3; transition: opacity var(--dur-fast) var(--ease-standard); }
th.sortable.sort-asc .sort-arrow, th.sortable.sort-desc .sort-arrow { opacity: 1; color: var(--accent); }
th.sortable.sort-asc .sort-arrow::before { content: '▲'; }
th.sortable.sort-desc .sort-arrow::before { content: '▼'; }
th.sortable:not(.sort-asc):not(.sort-desc) .sort-arrow::before { content: '▲'; }

/* Badges */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
}
.badge.active { background: var(--green-bg); color: var(--green-text); }
.badge.paused { background: var(--orange-bg); color: var(--orange-text); }
.badge.finished { background: var(--fill-secondary); color: var(--label-secondary); }
.badge.danger { background: var(--red-bg); color: var(--red-text); }

/* Статус-крапка -- легша альтернатива .badge для щільних таблиць (кольорова крапка сигналізує
   статус, сам текст лишається нейтральним, не строкатим -- як статус-колонка в типових SaaS-
   таблицях: колір несе крапка, а не заливка всього тексту). */
.status-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--label-primary); }
.status-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--label-tertiary); }
.status-dot.active::before { background: var(--green); }
.status-dot.paused::before { background: var(--orange); }
.status-dot.danger::before { background: var(--red); }

/* Мапа збоїв (admin/failure_map.php) -- рядок-перевірка з кольоровою смугою зліва за статусом. */
.check-row {
    background: var(--bg-secondary); border: 1px solid var(--fill-secondary); border-left: 4px solid var(--fill-secondary);
    border-radius: var(--r-md); padding: 12px 16px; margin-bottom: 8px;
}
.check-row.ok { border-left-color: var(--green); }
.check-row.warn { border-left-color: var(--orange); }
.check-row.danger { border-left-color: var(--red); }
.check-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.check-row-title { font-weight: 700; font-size: 14px; }
.check-row-source { font-family: ui-monospace, "SF Mono", monospace; font-size: 11px; color: var(--label-secondary); margin-top: 2px; }
.check-row-detail { font-size: 13px; color: var(--label-secondary); margin-top: 6px; }
.check-row-detail b { color: var(--label-primary); font-weight: 600; }
.check-category { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--label-secondary); margin: 24px 0 10px; }
.check-category:first-child { margin-top: 0; }
button.badge { transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); }
button.badge:hover { opacity: 0.85; }
button.badge:active { transform: scale(0.95); }

/* Forms */

form.stacked label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--label-secondary);
    margin: 16px 0 6px;
}

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=time], input[type=search], textarea, select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid transparent;
    background: var(--fill-tertiary);
    border-radius: var(--r-sm);
    font-size: 15px;
    font-family: inherit;
    color: var(--label-primary);
    transition: background-color 0.15s var(--ease-standard), box-shadow 0.15s var(--ease-standard);
}

input:focus, textarea:focus, select:focus {
    outline: none;
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px var(--accent-tint-bg), inset 0 0 0 1px var(--accent);
}

/* Кастомний select (assets/js/admin-select.js) -- нативний <select> лишається в DOM (hidden, для
   value/form submit), поверх нього рендериться цей керований компонент, бо popup-список нативного
   select неможливо стилізувати CSS однаково в усіх браузерах -- звідси "різний UI" зі скріншота. */
.csel { position: relative; }
.csel-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 14px; border: 1px solid transparent; background: var(--fill-tertiary);
    border-radius: var(--r-sm); font-size: 15px; font-family: inherit; color: var(--label-primary);
    cursor: pointer; text-align: left; margin: 0; height: auto;
    transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.csel-trigger:hover { opacity: 1; background: var(--fill-secondary); }
.csel-trigger:active { transform: none; }
.csel-trigger.open, .csel-trigger:focus-visible {
    outline: none; background: var(--bg-secondary);
    box-shadow: 0 0 0 3px var(--accent-tint-bg), inset 0 0 0 1px var(--accent);
}
.csel-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csel-chevron { width: 14px; height: 14px; flex-shrink: 0; color: var(--label-tertiary); transition: transform var(--dur-fast) var(--ease-standard); }
.csel-trigger.open .csel-chevron { transform: rotate(180deg); }

.csel-list {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
    margin: 0; padding: 6px;
    background: var(--bg-secondary); border-radius: var(--r-md); box-shadow: var(--shadow-modal);
    border: 1px solid var(--glass-border);
    animation: popIn var(--dur-fast) var(--ease-out-soft) both;
}
/* .up -- замало місця знизу (JS міряє й додає клас): список росте вгору від тригера замість вниз. */
.csel-list.up { top: auto; bottom: calc(100% + 6px); }
.csel-scroll { max-height: 268px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; --fade: 18px; }
.csel-scroll::-webkit-scrollbar { display: none; }
.csel-option {
    padding: 9px 12px; border-radius: calc(var(--r-sm) - 2px); font-size: 14px; color: var(--label-primary);
    cursor: pointer; transition: background-color var(--dur-fast) var(--ease-standard);
}
.csel-group { padding: 8px 12px 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--label-tertiary); }
.csel-option:hover, .csel-option.hl { background: var(--fill-tertiary); }
.csel-option.sel { background: var(--accent-tint-bg); color: var(--accent); font-weight: 600; }

/* Кастомний календар (assets/js/admin-date.js) -- та сама мова, що й .csel вище: глобальні
   токени, не --lime/--ink зі .schedule-page, бо компонент сайтвайд, не лише для цієї сторінки. */
.cdate { position: relative; }
.cdate-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 11px 14px; border: 1px solid transparent; background: var(--fill-tertiary);
    border-radius: var(--r-sm); font-size: 15px; font-family: inherit; color: var(--label-primary);
    cursor: pointer; text-align: left; margin: 0; height: auto;
    transition: background-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.cdate-trigger:hover { background: var(--fill-secondary); }
.cdate-trigger.open, .cdate-trigger:focus-visible {
    outline: none; background: var(--bg-secondary);
    box-shadow: 0 0 0 3px var(--accent-tint-bg), inset 0 0 0 1px var(--accent);
}
.cdate-trigger-label.placeholder { color: var(--label-tertiary); }
.cdate-trigger svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--label-tertiary); }

.cdate-pop {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 260px;
    background: var(--bg-secondary); border-radius: var(--r-md); box-shadow: var(--shadow-modal);
    border: 1px solid var(--glass-border); padding: 12px;
    animation: popIn var(--dur-fast) var(--ease-out-soft) both;
}
.cdate-pop.up { top: auto; bottom: calc(100% + 6px); }
.cdate-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cdate-month { font-size: 13.5px; font-weight: 700; color: var(--label-primary); text-transform: capitalize; }
.cdate-nav {
    width: 26px; height: 26px; border: none; border-radius: 50%; background: var(--fill-tertiary);
    color: var(--label-secondary); display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0; margin: 0;
}
.cdate-nav:hover { background: var(--fill-secondary); }
.cdate-nav svg { width: 12px; height: 12px; }
.cdate-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cdate-weekdays { margin-bottom: 4px; }
.cdate-weekdays span { text-align: center; font-size: 10.5px; font-weight: 700; color: var(--label-tertiary); text-transform: uppercase; }
.cdate-day {
    aspect-ratio: 1; border: none; border-radius: 50%; background: none; color: var(--label-primary);
    font-size: 13px; font-family: inherit; cursor: pointer; padding: 0; margin: 0; height: auto;
    display: flex; align-items: center; justify-content: center;
}
.cdate-day:hover { background: var(--fill-tertiary); }
.cdate-day.is-today { color: var(--accent); font-weight: 700; }
.cdate-day.is-sel { background: var(--accent); color: #fff; font-weight: 700; }
.cdate-day.cdate-pad { visibility: hidden; cursor: default; }
.cdate-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--separator); text-align: center; }
.cdate-today {
    background: none; border: none; height: auto; padding: 4px; margin: 0;
    color: var(--accent); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.cdate-today:hover { opacity: 0.75; }

/* .csel/.cdate JS toggles this on the nearest backdrop-filter ancestor while their popup/list is
   open (admin-select.js, admin-date.js): backdrop-filter creates its own stacking context, so a
   popup's z-index only wins against siblings *inside that same glass card* -- a later glass card
   in the DOM (e.g. the next panel down) paints over it regardless of how high that z-index is.
   Raising the whole card above its siblings while open is what actually fixes it. */
.has-open-popover { position: relative; z-index: 50; }

textarea { min-height: 110px; resize: vertical; line-height: 1.45; }

label input[type=checkbox] { width: auto; margin-right: 6px; vertical-align: middle; }

/* Buttons -- filled / tinted / gray / danger */

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 22px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    margin-top: 18px;
    transition: transform 0.15s var(--ease-standard), opacity 0.15s var(--ease-standard);
}
button:hover, .btn:hover { opacity: 0.88; text-decoration: none; }
button:active, .btn:active { transform: scale(0.97); }

.btn-secondary {
    background: var(--fill-secondary);
    color: var(--label-primary);
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    margin-top: 0;
}

.btn-danger {
    background: var(--red-bg);
    color: var(--red-text);
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    margin-top: 0;
}

.btn-primary-sm {
    background: var(--accent);
    color: #fff;
    height: 36px;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    margin-top: 0;
}

/* Компактна текстова "кнопка" для щільних рядків таблиці (кілька дій в одній комірці) --
   .btn-secondary/.btn-danger заскладні (висота 36px, паддінги) для такого місця. */
.link-btn {
    background: none; border: none; padding: 0; margin: 0 8px 0 0; height: auto;
    font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; font-family: inherit;
}
.link-btn:hover { text-decoration: underline; opacity: 1; }
.link-btn.danger { color: var(--red-text); }
.table-wrap { overflow-x: auto; }

/* Тижневий розклад (consultant_schedule.php) -- клік на день тижня розкриває його прямо на
   місці (додати/прибрати вікно), без окремої форми-селектора десь унизу картки. */
.weekday-rule { border-bottom: 1px solid var(--separator); padding: 10px 0; }
.weekday-rule:last-of-type { border-bottom: none; }
.weekday-rule summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    cursor: pointer; list-style: none; padding: 2px 0;
}
.weekday-rule summary::-webkit-details-marker { display: none; }
.weekday-rule-name { font-weight: 600; font-size: 14px; }
.weekday-rule-summary { font-size: 12px; color: var(--label-secondary); text-align: right; }
.weekday-rule-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0 0 4px; font-size: 13px; }
.weekday-add-form { display: flex; align-items: center; gap: 6px; padding: 10px 0 0 4px; flex-wrap: wrap; }
.weekday-add-form input[type=time] { width: auto; flex: 1 1 90px; margin: 0; }
.weekday-add-form span { color: var(--label-tertiary); }
.weekday-add-form button { height: 32px; padding: 0 12px; font-size: 12px; margin: 0; flex-shrink: 0; }

.error { color: var(--red-text); font-size: 14px; margin: 8px 0; }

.notice {
    background: var(--green-bg);
    color: var(--green-text);
    padding: 12px 16px;
    border-radius: var(--r-md);
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 500;
}

/* Login (glass sheet floating over the ambient wash) */

.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.login-box {
    width: 340px;
    padding: 32px;
    background: var(--glass-tint-strong);
    backdrop-filter: blur(34px) saturate(190%);
    -webkit-backdrop-filter: blur(34px) saturate(190%);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-glass), var(--shadow-modal);
}

.login-box h2 { text-align: center; font-family: var(--font-display); }

/* Chart */

.weight-chart { width: 100%; height: auto; }

/* KPI stat cards (dashboard summary row) */

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi-card {
    background: var(--bg-secondary);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
    animation: fadeSlideUp var(--dur-slow) var(--ease-out-soft) both;
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-modal); }
.kpi-grid .kpi-card:nth-child(1) { animation-delay: 0ms; }
.kpi-grid .kpi-card:nth-child(2) { animation-delay: 40ms; }
.kpi-grid .kpi-card:nth-child(3) { animation-delay: 80ms; }
.kpi-grid .kpi-card:nth-child(4) { animation-delay: 120ms; }
.kpi-card .kpi-icon {
    width: 36px; height: 36px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-tint-bg); color: var(--accent); margin-bottom: 4px;
}
.kpi-card.warn .kpi-icon { background: var(--orange-bg); color: var(--orange-text); }
.kpi-card.danger .kpi-icon { background: var(--red-bg); color: var(--red-text); }
.kpi-card.ok .kpi-icon { background: var(--green-bg); color: var(--green-text); }
.kpi-card .kpi-icon svg { width: 18px; height: 18px; }
.kpi-card .kpi-value { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-card .kpi-label { font-size: 13px; color: var(--label-secondary); font-weight: 500; }

/* Avatar (initial circle) */

.avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-tint-bg); color: var(--accent);
    font-weight: 700; font-size: 15px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.avatar.lg { width: 56px; height: 56px; font-size: 20px; }

/* Person row -- list item with avatar, used in priority/at-risk/roster lists */

.person-row {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 4px; border-bottom: 1px solid var(--separator);
    transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.person-row:last-child { border-bottom: none; }
.person-row .person-main { flex: 1; min-width: 0; }
.person-row .person-name { display: block; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.person-row .person-meta { display: block; font-size: 13px; color: var(--label-secondary); margin-top: 1px; }

a.person-row { text-decoration: none; color: inherit; border-radius: var(--r-md); }
a.person-row:hover { background: var(--fill-quaternary); text-decoration: none; }
a.person-row:active { transform: scale(0.99); }

/* 7-day tracker: compact dots showing programme adherence at a glance */

.day-tracker { display: flex; gap: 4px; }
.day-dot {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--fill-tertiary); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.day-dot.done { background: var(--green); }
.day-dot.missed { background: var(--orange); }
.day-dot.future { background: var(--fill-quaternary); }
.day-dot.today { box-shadow: 0 0 0 2px var(--accent); }

/* Горизонтальний степер (nutrition_view.php, "Воронка дзвінка") -- 4 кроки лінією з крапками
   замість окремих абзаців: одразу видно, на якому кроці учасниця зараз. */
.stepper { display: flex; align-items: flex-start; margin: 4px 0 16px; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.step-dot {
    width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--fill-tertiary); color: var(--label-tertiary); font-size: 12px; font-weight: 700;
    border: 2px solid var(--bg-secondary); z-index: 1;
}
.step.done .step-dot { background: var(--green); color: #fff; }
.step.current .step-dot { background: var(--accent); color: #fff; }
.step-line { position: absolute; top: 13px; left: 50%; width: 100%; height: 2px; background: var(--fill-tertiary); z-index: 0; }
.step.done .step-line { background: var(--green); }
.step:last-child .step-line { display: none; }
.step-label { font-size: 11px; font-weight: 600; color: var(--label-secondary); margin-top: 8px; line-height: 1.3; }
.step.done .step-label, .step.current .step-label { color: var(--label-primary); }
.step-meta { font-size: 10.5px; color: var(--label-tertiary); margin-top: 2px; }
.stepper-cta { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.stepper-cta form { margin: 0; }

/* Inline macro/calorie compliance bar */

.metric-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.metric-bar-row:last-child { margin-bottom: 0; }
.metric-bar-label { width: 76px; flex-shrink: 0; font-size: 13px; color: var(--label-secondary); }
.metric-bar-track { flex: 1; height: 8px; border-radius: 999px; background: var(--fill-tertiary); overflow: hidden; }
.metric-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width var(--dur-slow) var(--ease-out-soft); }
.metric-bar-fill.over { background: var(--orange); }
.metric-bar-value { width: 92px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* "Пульс калорії" (admin/nutrition_pulse.php) -- структура й графіки 1:1 з артефакту-звіту, який
   затвердила користувачка: великий показник, смуга плиток, стовпчикові SVG-графіки з осями й
   підказками, воронка кроками, нумерований список дій. Усі класи з префіксом pls-, а кольори
   даних -- page-scoped токени --pls-* на обгортці (текст і картки лишаються глобальними). */
.pulse-page {
    /* --pls-blue/-grid/-baseline/-crit -- промовлені в :root (глобальні, графік спільний, див. коментар там). */
    --pls-good: #0ca30c; --pls-good-bg: #e7f7e4;
    --pls-warn: #9a5a00; --pls-warn-bg: #fdf1da;
    --pls-crit-bg: #fbe9e8;
    --pls-line: rgba(11, 11, 11, .10);
}
.pls-sections { column-count: 1; column-gap: 24px; }
@media (min-width: 1040px) { .pls-sections { column-count: 2; } }
.pls-sections > .pls-sec { break-inside: avoid; page-break-inside: avoid; }
.pulse-page .pls-lead { margin: 4px 0 22px; max-width: 64ch; color: var(--label-secondary); font-size: 14px; line-height: 1.55; }
.pls-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 28px; margin-bottom: 14px; }
.pls-hero-figure { font-family: var(--font-display); font-weight: 800; font-size: clamp(52px, 8vw, 80px); line-height: .95; color: var(--pls-crit); flex-shrink: 0; }
.pls-hero-text { flex: 1; min-width: 240px; max-width: 48ch; }
.pls-hero-text .h-label { font-size: 16.5px; font-weight: 700; margin-bottom: 6px; line-height: 1.4; }
.pls-hero-text .h-sub { font-size: 13.5px; color: var(--label-secondary); line-height: 1.55; }

.pls-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; background: var(--pls-line); border: 1px solid var(--pls-line); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.pls-tile { background: var(--bg-secondary); padding: 16px 16px 15px; min-width: 0; }
.pls-tile .t-label { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--label-tertiary); text-transform: uppercase; margin-bottom: 8px; }
.pls-tile .t-value { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pls-tile .t-value small { font-family: var(--font-system); font-size: 14px; font-weight: 600; color: var(--label-tertiary); }
.pls-tile .t-sub { font-size: 12px; color: var(--label-secondary); margin-top: 5px; line-height: 1.4; }

.pls-sec { margin-top: 34px; }
.pls-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.pls-head h3 { margin: 0; font-family: var(--font-display); font-size: 19px; font-weight: 800; }
.pls-idx { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--label-tertiary); }
.pls-sec-lead { margin: 6px 0 14px; font-size: 14px; color: var(--label-secondary); }
.pls-take { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pls-line); font-size: 14px; color: var(--label-secondary); line-height: 1.6; }
.pls-take b { color: var(--label-primary); font-weight: 700; }
.pls-tiles + .pls-take, .pls-funnel + .pls-take { margin-top: 14px; }

.pls-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px 4px 8px; border-radius: 999px; white-space: nowrap; margin-bottom: 8px; }
.pls-chip svg { width: 13px; height: 13px; flex: none; }
.pls-chip.crit { background: var(--pls-crit-bg); color: var(--pls-crit); }
.pls-chip.warn { background: var(--pls-warn-bg); color: var(--pls-warn); }
.pls-chip.good { background: var(--pls-good-bg); color: var(--pls-good); }

/* Заголовки таблиць у вузькій колонці (2 колонки, "Звідки приходять", "Витрати на рекламу") -- th.num
   глобально nowrap (щоб цифри не рвались), але довгі підписи типу "Реєстрацій (наша БД)" самі й
   розтягують таблицю під горизонтальний скрол. Заголовкам дозволяємо перенос по словах; сирі цифри
   в td.num лишаються nowrap (глобальне правило) -- рветься лише текст підпису, не значення. */
.pulse-page .table-wrap table { table-layout: fixed; }
.pulse-page th { white-space: normal; }
.pulse-page td { overflow-wrap: break-word; }
.pulse-page td.num { white-space: normal; }

/* Блок витрат на рекламу: смуга з курсом і кнопкою, дві плитки (витрачено / ціна підписника), список кабінетів. Кнопка -- звичайна .btn-secondary, як в інших блоках адмінки. */
.pls-ads-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.pls-ads-rate { font-size: 13px; color: var(--label-secondary); }
.pls-ads-rate b { color: var(--label-primary); }
.pls-ads-rate a { color: var(--accent); font-weight: 600; text-decoration: none; }
.pls-ads-rate a:hover { text-decoration: underline; }
.pls-ads-refresh { margin: 0; }
.pls-ads-refresh button { margin: 0; gap: 6px; }
.pls-ads-refresh button svg { width: 14px; height: 14px; }
.pls-ads-list { list-style: none; margin: 0; padding: 0; }
.pls-ads-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 2px; border-top: 1px solid var(--pls-line); }
.pls-ads-row:first-child { border-top: none; }
.pls-ads-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.pls-ads-who .muted, .pls-ads-nums .muted { font-size: 12px; overflow-wrap: anywhere; }
.pls-ads-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; min-width: 0; }
.pls-ads-sum { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pls-ads-sum small { font-size: 11.5px; font-weight: 600; color: var(--label-tertiary); font-variant-numeric: tabular-nums; }
.pls-ads-nums b { font-family: var(--font-display); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pls-ads-row .pls-chip { margin: 0; white-space: normal; text-align: left; }

.pls-chart-wrap { position: relative; }
svg.pls-chart { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--font-system); }
.pls-bar { fill: var(--pls-blue); cursor: pointer; }
.pls-bar:hover, .pls-bar:focus { outline: none; fill: var(--label-primary); }
.pls-bar.crit { fill: var(--pls-crit); }
.pls-line-pct { fill: none; stroke: var(--orange); stroke-width: 2; stroke-linejoin: round; }
.pls-line-dot { fill: var(--orange); stroke: var(--bg-secondary); stroke-width: 1.5; cursor: pointer; }
.pls-line-dot:hover, .pls-line-dot:focus { outline: none; fill: var(--label-primary); }
.pls-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: -4px 0 10px; font-size: 12px; color: var(--label-secondary); }
.pls-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pls-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--pls-blue); }
.pls-legend-dot.pct { background: var(--orange); }
.pls-bar-cohort { fill: var(--label-tertiary); font-size: 10.5px; text-anchor: middle; }
.pls-ads-chart .pls-bar-cohort { font-size: 9px; letter-spacing: -.02em; } /* під 30 днями: двозначне число вміщається в слот ~13px */
.pls-bar-cohort.crit { fill: var(--pls-crit); font-weight: 700; }
.pls-ads-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--label-secondary); }
.pls-ads-note b { color: var(--label-primary); }
.pls-bar-value { fill: var(--label-primary); font-size: 12px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.pls-axis-label { fill: var(--label-secondary); font-size: 11.5px; text-anchor: middle; }
.pls-gridline { stroke: var(--pls-grid); stroke-width: 1; }
.pls-baseline { stroke: var(--pls-baseline); stroke-width: 1; }
.pls-tooltip { position: fixed; pointer-events: none; z-index: 60; background: var(--label-primary); color: var(--bg-secondary); font-size: 12.5px; font-weight: 600; padding: 7px 10px; border-radius: 8px; box-shadow: var(--shadow-modal); opacity: 0; transform: translate(-50%, -100%); transition: opacity .1s; white-space: nowrap; }
.pls-tooltip.show { opacity: 1; }
.pls-charts-2 { display: flex; flex-direction: column; gap: 14px; }

.pls-funnel { display: flex; flex-wrap: wrap; gap: 2px; background: var(--pls-line); border: 1px solid var(--pls-line); border-radius: 14px; overflow: hidden; }
.pls-f-step { flex: 1; min-width: 110px; background: var(--bg-secondary); padding: 16px 14px; text-align: center; }
.pls-f-step .f-val { font-family: var(--font-display); font-weight: 800; font-size: 24px; font-variant-numeric: tabular-nums; }
.pls-f-step .f-lbl { font-size: 11px; color: var(--label-tertiary); margin-top: 4px; line-height: 1.4; }

/* Воронка Пульсу (.pls-fun): стовпці ink, з'єднання lime, втрати персикові; вигляд узгоджено макетом «А». Кнопки задають СВОЇ height/padding/margin (глобальна button їх інакше нав'язує). */
.pls-fun { --f-ink: #14140F; --f-lime: #C7F464; --f-peach-hot: #FF9E66; --f-red: #B3402A; }
.pls-fun-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.pls-fun-lbl { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--label-tertiary); }
.pls-fun-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pls-fun-chip { height: 30px; padding: 0 12px; margin: 0; border-radius: 999px; border: 1px solid var(--pls-line); background: var(--bg-secondary); color: var(--label-primary); font: 600 12px var(--font-system); cursor: pointer; display: inline-flex; align-items: center; }
.pls-fun-chip.is-on { background: var(--f-ink); color: var(--f-lime); border-color: var(--f-ink); }
.pls-fun-sel { width: 190px; }
.pls-fun-date { width: 150px; }
.pls-fun-dash { color: var(--label-tertiary); }
.pls-fun-chart { overflow-x: auto; margin-top: 4px; transition: opacity .15s; }
.pls-fun-chart svg { min-width: 620px; display: block; }
.pls-fun-chart.is-loading { opacity: .45; }
.pls-fun-band { fill: var(--f-lime); opacity: .5; }
.pls-fun-bar-rect { fill: var(--f-ink); }
.pls-fun-step { cursor: pointer; outline: none; }
.pls-fun-step.is-sel .pls-fun-bar-rect, .pls-fun-step:focus-visible .pls-fun-bar-rect { stroke: var(--f-lime); stroke-width: 3; }
.pls-fun-v { font: 700 13px var(--font-system); fill: var(--label-primary); }
.pls-fun-l { font: 500 10.5px var(--font-system); fill: var(--label-secondary); }
.pls-fun-gap { cursor: pointer; }
.pls-fun-x { font: 600 12px var(--font-system); fill: var(--f-red); }
.pls-fun-x.is-hot { font-weight: 800; fill: var(--f-ink); }
.pls-fun-hot { fill: var(--f-peach-hot); }
.pls-fun-p { font: 500 10px var(--font-system); fill: var(--label-tertiary); }
.pls-fun-div { stroke: var(--label-tertiary); stroke-width: 1; stroke-dasharray: 3 4; opacity: .7; }
.pls-fun-side { margin-top: 6px; font-size: 13px; color: var(--label-secondary); line-height: 1.5; }
.pls-fun-side b { color: var(--label-primary); }
.pls-fun-dp { margin-top: 14px; padding: 14px 16px; border: 1px solid var(--pls-line); border-radius: 14px; background: var(--bg-secondary); }
.pls-fun-dt { font-size: 14px; }
.pls-fun-dl { margin: 4px 0 8px; font-weight: 700; color: var(--f-red); }
.pls-fun-dn { font-size: 12.5px; color: var(--label-tertiary); margin-bottom: 6px; }
.pls-fun-dr { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--pls-line); font-size: 14px; }
.pls-fun-dr b { font-variant-numeric: tabular-nums; }
.pls-fun-go { height: 32px; padding: 0 14px; margin: 10px 0 0; border: 0; border-radius: 999px; background: var(--f-ink); color: var(--f-lime); font: 600 12px var(--font-system); cursor: pointer; }
.pls-fun-people { margin-top: 10px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; --fade: 22px; }
.pls-fun-people::-webkit-scrollbar { display: none; }
.pls-fun-person { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--pls-line); color: var(--label-primary); text-decoration: none; font-size: 14px; }
.pls-fun-person:hover span { text-decoration: underline; }
.pls-fun-person small { color: var(--label-tertiary); font-size: 12px; text-align: right; }
.pls-fun-empty { margin: 14px 0 0; color: var(--label-secondary); font-size: 14px; }
@media (max-width: 560px) { .pls-fun-sel { width: 100%; } }

.pls-reco-list { display: flex; flex-direction: column; gap: 2px; background: var(--pls-line); border: 1px solid var(--pls-line); border-radius: 16px; overflow: hidden; }
.pls-reco { background: var(--bg-secondary); padding: 18px 20px; display: flex; gap: 16px; }
.pls-reco-num { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--label-tertiary); flex: none; width: 28px; }
.pls-reco-body { min-width: 0; }
.pls-reco-body h4 { margin: 0 0 5px; font-size: 15px; font-weight: 700; }
.pls-reco-body p { margin: 0; font-size: 13.5px; color: var(--label-secondary); line-height: 1.6; }
.pls-reco-body .ev { margin-top: 8px; font-size: 12px; color: var(--label-tertiary); }
.pls-foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--pls-grid); font-size: 12px; color: var(--label-tertiary); line-height: 1.7; }
@media (max-width: 520px) {
    .pls-hero { flex-direction: column; align-items: flex-start; }
    .pls-reco { flex-direction: column; gap: 6px; }
    .pls-reco-num { width: auto; }
}

/* Profile info grid (gender/age/height/... key-value pairs) */

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 14px; }
.info-grid .info-item .info-label { font-size: 11px; color: var(--label-secondary); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; }
.info-grid .info-item .info-value { font-size: 14px; font-weight: 600; }

/* Day-by-day progress timeline (detail page) */

.day-timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; }
.day-entry {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 14px; border-radius: var(--r-md); background: var(--fill-quaternary);
    transition: background-color var(--dur-fast) var(--ease-standard);
}
.day-entry:hover { background: var(--fill-tertiary); }
.day-entry.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.day-entry .day-num {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; background: var(--bg-secondary);
}
.day-entry .day-num.done { background: var(--green); color: #fff; }
.day-entry .day-num.missed { background: var(--red-bg); color: var(--red-text); }
.day-entry .day-num.future { opacity: 0.4; }
.day-entry .day-info { flex: 1; min-width: 0; }
.day-entry .day-date { font-size: 12px; color: var(--label-secondary); }
.day-entry .day-kcal { font-size: 14px; font-weight: 600; }
.day-entry .day-extra { font-size: 12px; color: var(--label-secondary); white-space: nowrap; }

/* Щоденник харчування на особовій картці (admin/nutrition_view.php, вкладка "Харчування"):
   тези для розмови зверху, далі день за днем -- сума з ціллю, під нею кожна страва з БЖВ. */
.fd-facts { margin: 0 0 16px; padding: 14px 18px; background: var(--fill-quaternary); border-radius: var(--r-md); }
.fd-facts h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--label-secondary); }
.fd-facts ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.65; }
.fd-facts li b { font-weight: 700; }
.fd-facts li.warn { list-style-type: "! "; color: var(--orange-text); }
.fd-facts li.warn b { color: var(--orange-text); }
.fd-day { border: 1px solid var(--fill-secondary); border-radius: var(--r-md); margin-bottom: 12px; overflow: hidden; background: var(--bg-secondary); }
.fd-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.fd-day-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 16px; background: var(--fill-quaternary); }
.fd-day-title { font-weight: 700; font-size: 14px; }
.fd-day-sub { font-size: 12px; color: var(--label-secondary); font-variant-numeric: tabular-nums; }
.fd-day-totals { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.fd-avg { margin: 0 0 16px; }
.fd-avg h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--label-secondary); }
.fd-avg h4 .muted { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.fd-avg .fd-table-wrap { border: 1px solid var(--fill-secondary); border-radius: var(--r-md); }
.fd-table-wrap { overflow-x: auto; }
.fd-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.fd-table th { padding: 9px 10px; font-size: 11px; border-bottom: 1px solid var(--separator); white-space: nowrap; }
.fd-table td { padding: 8px 10px; font-size: 13.5px; vertical-align: top; }
.fd-table th:first-child, .fd-table td:first-child { padding-left: 16px; }
.fd-table th:last-child, .fd-table td:last-child { padding-right: 16px; }
.fd-table th.n, .fd-table td.n { text-align: right; width: 58px; white-space: nowrap; }
.fd-table td.t { width: 54px; color: var(--label-secondary); white-space: nowrap; }
.fd-table td.por { color: var(--label-secondary); white-space: nowrap; }
.fd-table td.dish { font-weight: 600; min-width: 180px; overflow-wrap: anywhere; }
.fd-table td.dish small { display: block; font-weight: 400; font-size: 12px; color: var(--label-secondary); margin-top: 1px; }
.fd-table td.warn { color: var(--orange-text); font-weight: 700; }
.fd-table tr.unconfirmed td { opacity: .55; }
.fd-table tfoot td { border-top: 1px solid var(--separator); border-bottom: none; font-weight: 700; background: var(--fill-quaternary); }
.fd-tech { margin-top: 18px; }
.fd-tech summary { cursor: pointer; font-size: 13px; color: var(--label-secondary); margin-bottom: 10px; }
@media (max-width: 640px) {
    .fd-day-totals { margin-left: 0; }
}

/* Quote card (day-0 intention) */

.quote-card {
    background: var(--accent-tint-bg);
    border-radius: var(--r-lg);
    padding: 18px 22px;
    font-style: italic;
    font-size: 15px;
    margin-bottom: 20px;
}
.quote-card .quote-cite { display: block; font-style: normal; font-size: 12px; color: var(--label-secondary); margin-top: 6px; }

.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title h3 { margin: 0; }

.empty-row { padding: 24px 0; text-align: center; color: var(--label-tertiary); font-size: 14px; }

/* Двоколонковий layout для сторінок деталей (nutrition_view.php) -- використовує весь екран
   замість вузької .main колонки з порожнім простором праворуч. */
.detail-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.detail-main { display: flex; flex-direction: column; gap: 16px; }
.detail-sidebar { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.detail-main > .card, .detail-sidebar > .card, .detail-sidebar > .quote-card { margin-bottom: 0; }
@media (max-width: 900px) {
    .detail-grid { grid-template-columns: 1fr; }
    .detail-sidebar { position: static; }
}

/* Консультант / Денна ціль БЖВ / Профіль -- поруч в один ряд у ширшій лівій колонці замість
   вузьких карток одна під одною в сайдбарі (той сайдбар тепер лише для Повідомлень, нижче). */
.triple-col-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .triple-col-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .triple-col-row { grid-template-columns: 1fr; } }

/* Повідомлення -- єдина картка в правій колонці, розтягнута на всю висоту екрана (не лише
   висоту свого вмісту): сама колонка займає viewport, картка всередині -- flex, тред скролиться
   у своєму просторі, а поле вводу завжди лишається видимим унизу. */
.messages-sidebar { height: calc(100vh - 40px); }
.messages-sidebar > .card { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.messages-sidebar .chat-thread { flex: 1 1 auto; max-height: none; min-height: 0; }
@media (max-width: 900px) { .messages-sidebar { height: auto; } }

/* Вкладка "День N" (nutrition_texts.php): два блоки один під одним на всю ширину, вбудовані тексти зверху, власні повідомлення дня
   під ними. Раніше стояли поруч (2/3 і 1/3), і під нижчим блоком лишалась порожнеча на всю різницю висот (до 1900px). */
.day-column-side { margin-bottom: 0; }

/* Чат-панель адмін <-> учасниця */

.chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; margin-bottom: 14px; padding-right: 4px; }
.chat-bubble { max-width: 85%; padding: 10px 14px; border-radius: var(--r-md); font-size: 14px; line-height: 1.4; }
.chat-bubble.admin { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.participant { align-self: flex-start; background: var(--fill-tertiary); border-bottom-left-radius: 4px; }
/* .bot -- автоматичні повідомлення бота (nutrition_message_log), не те, що адмін сама набрала --
   той самий бік, що й .admin, але візуально приглушеніший, з міткою "бот", щоб не сплутати. */
.chat-bubble.bot { align-self: flex-end; background: var(--fill-secondary); color: var(--label-primary); border-bottom-right-radius: 4px; }
.chat-bubble-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--label-tertiary); margin-bottom: 2px; }
.chat-bubble .chat-time { display: block; font-size: 10px; opacity: 0.7; margin-top: 4px; }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea { min-height: 44px; margin: 0; }
.chat-form button { margin: 0; height: 44px; flex-shrink: 0; }

/* Icon button (edit/delete on list rows) -- compact, labeled via aria-label/title since it's icon-only */

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; margin: 0; flex-shrink: 0;
    background: var(--fill-tertiary); color: var(--label-secondary);
    border: none; border-radius: 50%;
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--fill-secondary); opacity: 1; }
.icon-btn.danger { color: var(--red-text); }
.icon-btn.danger:hover { background: var(--red-bg); }
.icon-btn:disabled { opacity: 0.35; cursor: default; pointer-events: none; }

/* Пагінація під таблицею (assets/js/admin-table.js, <table data-paginate="20">) -- сама вставляється
   JS-ом одразу після .table-wrap, ховається сама, коли рядків менше за розмір сторінки. */
.table-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
.table-pager-info { font-size: 12.5px; color: var(--label-secondary); font-variant-numeric: tabular-nums; }

/* Toggle switch (replaces raw checkboxes for on/off settings) */

.toggle-row { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 6px; }

/* Перемикач увімк/вимк прямо в комірці таблиці (nutrition.php) -- <form> лише носій для
   auto-submit onchange, візуально не повинен займати місце понад сам .toggle. */
.status-toggle-form { margin: 0; }
.toggle-row .toggle-label { font-size: 13px; font-weight: 600; color: var(--label-secondary); }
.toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle-track {
    width: 44px; height: 26px; border-radius: 999px; background: var(--fill-secondary);
    position: relative; transition: background-color 0.15s var(--ease-standard);
}
.toggle-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.15s var(--ease-standard);
}
.toggle input:checked + .toggle-track { background: var(--green); }
.toggle input:checked + .toggle-track::after { transform: translateX(18px); }
.toggle input:focus-visible + .toggle-track { box-shadow: 0 0 0 3px var(--accent-tint-bg); }

/* Photo picker -- click the circular preview to choose a new file, camera badge signals it's tappable */

.photo-picker { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; margin: 4px 0 6px; }
.photo-picker input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-picker-preview {
    position: relative; width: 84px; height: 84px; border-radius: 50%; overflow: hidden;
    background: var(--accent-tint-bg); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 700;
}
.photo-picker-preview img { width: 100%; height: 100%; object-fit: cover; }
.photo-picker-badge {
    position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-secondary);
}
.photo-picker-badge svg { width: 13px; height: 13px; }
.photo-picker-hint { font-size: 12px; color: var(--label-secondary); }

/* Пікер дня (1-7) для розсилки за днями -- ряд пігулок замість number input */
.pill-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.pill-btn {
    height: 40px; min-width: 40px; padding: 0 14px; border-radius: 999px;
    background: var(--fill-tertiary); color: var(--label-secondary); font-weight: 600; font-size: 14px;
    border: none; cursor: pointer; margin: 0; font-family: inherit;
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.pill-btn:hover { background: var(--fill-secondary); opacity: 1; }
.pill-btn:active { transform: scale(0.94); }
.pill-btn.active { background: var(--accent); color: #fff; }

/* Сегментований перемикач (напр. тип повідомлення: текст/фото/відео) */
.segmented { display: flex; gap: 4px; padding: 4px; background: var(--fill-tertiary); border-radius: var(--r-md); }
.segmented-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding: 0 12px; border-radius: calc(var(--r-md) - 3px); border: none; font-family: inherit;
    background: transparent; color: var(--label-secondary); font-weight: 600; font-size: 14px; cursor: pointer; margin: 0;
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.segmented-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.segmented-btn:hover { opacity: 1; color: var(--label-primary); }
.segmented-btn.active { background: var(--bg-secondary); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,0.12); }

/* Дропзона для медіа-файлів (розсилка за днями) */
.file-dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    padding: 28px 16px; border: 2px dashed var(--separator); border-radius: var(--r-md);
    background: var(--fill-quaternary); cursor: pointer; text-align: center; position: relative;
    transition: border-color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.file-dropzone:hover, .file-dropzone.drag { border-color: var(--accent); background: var(--accent-tint-bg); }
.file-dropzone svg { width: 26px; height: 26px; color: var(--label-tertiary); }
.file-dropzone-hint { font-size: 13px; color: var(--label-secondary); }
.file-dropzone.has-file svg, .file-dropzone.has-file .file-dropzone-hint { color: var(--accent); }
.file-dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.form-row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.form-row > div { flex: 1; min-width: 180px; }

/* @username field with a fixed "@" prefix inside the input */

.input-prefix-group { display: flex; align-items: center; background: var(--fill-tertiary); border-radius: var(--r-sm); overflow: hidden; }
.input-prefix-group:focus-within { background: var(--bg-secondary); box-shadow: 0 0 0 3px var(--accent-tint-bg), inset 0 0 0 1px var(--accent); }
.input-prefix-group span { padding: 0 0 0 14px; color: var(--label-tertiary); font-size: 15px; }
.input-prefix-group input { background: none; box-shadow: none !important; padding-left: 4px; }
.input-prefix-group input:focus { background: none; }

/* Rich Message візуальний блоковий редактор (assets/js/rich-editor.js), 2026-редизайн.
   Тип блока читається з типографіки (h3 великий жирний, цитата з акцентною смугою, підпис
   маленький сірий) -- без постійної uppercase-етикетки на кожному блоці (це той самий "eyebrow
   spam", проти якого застерігає taste-skill: підпис над КОЖНИМ блоком з 1-2 реченнями -- шум,
   не інформація). Керування (перетягнути/видалити) виринає в кутку лише на ховері/фокусі. */
.rich-editor { display: flex; flex-direction: column; }
.rich-toolbar {
    display: flex; align-items: center; gap: 4px; margin-bottom: 10px; padding: 6px;
    background: var(--fill-quaternary); border-radius: var(--r-md);
}
.rich-toolbar-btn {
    height: 32px; min-width: 32px; padding: 0 10px; margin: 0; border: none; font-family: inherit;
    background: var(--bg-secondary); color: var(--label-primary); border-radius: var(--r-sm);
    font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.05);
    transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.rich-toolbar-btn:hover { background: var(--fill-secondary); opacity: 1; }
.rich-toolbar-btn:active { transform: scale(0.94); }
.rich-toolbar-btn-format { font-weight: 800; width: 32px; }
.rich-toolbar-sep { width: 1px; align-self: stretch; background: var(--separator); margin: 2px 4px; }

/* "+ Блок" -- один компактний перемикач з меню замість пʼяти окремих кнопок підряд у панелі. */
.rich-add-wrap { position: relative; }
.rich-add-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0 12px 0 9px; }
.rich-add-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.rich-add-menu {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 172px;
    background: var(--bg-secondary); border-radius: var(--r-md); box-shadow: var(--shadow-modal);
    padding: 6px; display: flex; flex-direction: column; gap: 1px;
    animation: popIn var(--dur-fast) var(--ease-out-soft) both;
}
.rich-add-menu button {
    display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; margin: 0;
    border: none; background: none; border-radius: var(--r-sm); font-family: inherit;
    font-size: 14px; font-weight: 600; color: var(--label-primary); text-align: left; cursor: pointer;
}
.rich-add-menu button:hover { background: var(--fill-tertiary); }
.rich-add-menu button svg { width: 15px; height: 15px; color: var(--label-tertiary); flex-shrink: 0; }

.rich-blocks { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; }
.rich-block {
    position: relative; background: var(--bg-primary); border: 1px solid transparent;
    border-radius: var(--r-md); padding: 10px 40px 10px 12px;
    transition: border-color var(--dur-fast) var(--ease-standard);
}
.rich-block:hover, .rich-block:focus-within { border-color: var(--separator); }
.rich-block.dragging { opacity: 0.4; }
.rich-block.drag-over { border-color: var(--accent); border-style: dashed; }

.rich-block-controls {
    position: absolute; top: 6px; right: 6px; display: flex; gap: 2px;
    opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard);
}
.rich-block:hover .rich-block-controls, .rich-block:focus-within .rich-block-controls { opacity: 1; }
.rich-block-controls button {
    width: 22px; height: 22px; border: none; background: none; color: var(--label-tertiary);
    border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.rich-block-controls button svg { width: 13px; height: 13px; }
.rich-block-controls button:hover { background: var(--fill-secondary); color: var(--label-primary); }
.rich-block-controls .rich-block-del:hover { color: var(--red); }
.rich-block-controls .rich-block-drag { cursor: grab; }
.rich-block-controls .rich-block-drag:active { cursor: grabbing; }

.rich-block-content {
    min-height: 1.4em; outline: none; font-size: 15px; line-height: 1.5; color: var(--label-primary);
}
.rich-block-content:empty::before { content: "Текст…"; color: var(--label-tertiary); }
.rich-block-h3 .rich-block-content { font-size: 18px; font-weight: 700; }
.rich-block-blockquote .rich-block-content { padding: 6px 10px; border-left: 3px solid var(--accent); background: var(--accent-tint-bg); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.rich-block-footer .rich-block-content { font-size: 12px; color: var(--label-secondary); }

.rich-table-grid { display: flex; flex-direction: column; gap: 4px; }
.rich-table-row { display: flex; gap: 4px; align-items: stretch; }
.rich-table-cell {
    flex: 1; min-width: 0; outline: none; font-size: 14px; padding: 6px 8px;
    background: var(--fill-tertiary); border-radius: var(--r-sm);
}
.rich-table-cell-header { font-weight: 700; }
.rich-table-cell:empty::before { content: "…"; color: var(--label-tertiary); }
.rich-table-row-del {
    width: 22px; flex-shrink: 0; border: none; background: none; color: var(--label-tertiary);
    border-radius: var(--r-sm); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.rich-table-row-del svg { width: 12px; height: 12px; }
.rich-table-row-del:hover { background: var(--fill-secondary); color: var(--red); }
.rich-table-add-row { margin-top: 6px; }

/* Картки-тексти (nutrition_texts.php) -- 4 колонки на широких екранах, звужується на менших. Колонки «газетою», а не рядами:
   у сітці з рядами кожен рядок рівнявся за найвищою карткою, і під нижчими лишались дірки (до 480px на вкладці «Інше»).
   Тут кожна картка стоїть одразу під попередньою у своїй колонці. Колонки при першому показі вирівнює браузер, а далі їх фіксує
   скрипт унизу nutrition_texts.php: перша картка кожної колонки отримує .is-col-start (break-before: column). Без цього картка,
   що виросла під час редагування (обрали «Фото», додали блок, набрали текст), перекидала б інші в сусідню колонку просто під рукою. */
.texts-grid { column-count: 4; column-gap: 16px; }
.texts-grid > .texts-card { break-inside: avoid; margin-bottom: 16px; }
.texts-grid > .is-col-start { break-before: column; }
.texts-card label { margin-top: 0; }
.texts-card textarea { min-height: 130px; }
@media (max-width: 1500px) { .texts-grid { column-count: 3; } }
@media (max-width: 1100px) { .texts-grid { column-count: 2; } }
@media (max-width: 700px) { .texts-grid { column-count: 1; } }

/* Шапка картки учасниці (nutrition_view.php) -- аватар + ім'я + статуси + тижневий трекер в один ряд,
   стати (день/стрік/ккал/записи) рядком нижче замість окремих kpi-card -- значно компактніше. */
.profile-header { padding: 14px 20px; }
.profile-header-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.profile-header-main { flex: 1; min-width: 200px; }
.profile-header-name { margin: 0 0 4px; font-size: 19px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.profile-header-username { font-size: 13px; font-weight: 400; color: var(--label-secondary); }
/* Мітка бота (nutrition_bot_tag) у списку й картці: спокійна, не акцентна -- сірий текст у тонкій рамці, без заливки. */
.bot-tag { display: inline-block; font-family: inherit; font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: 0; padding: 3px 7px; border: 1px solid var(--separator); border-radius: 99px; color: var(--label-secondary); background: transparent; vertical-align: 1px; white-space: nowrap; }
.nut-page .bot-tag, .nutv-page .bot-tag { color: var(--ink-faint); border-color: var(--line); }
.profile-header-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.client-stats { display: flex; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--separator); }
.client-stat {
    flex: 1; text-align: center; padding: 0 8px; border-right: 1px solid var(--separator);
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.client-stat:last-child { border-right: none; }
.client-stat-value {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 19px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.client-stat-value svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.client-stat-value.ok svg { color: var(--green); }
.client-stat-label { font-size: 11px; color: var(--label-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Таби для важких секцій нижче (assets/js/admin-tabs.js) -- одна видима панель замість
   послідовності кількох повновисотних карток одна під одною. */
.tabs-nav { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--separator); flex-wrap: wrap; }
.tab-btn {
    padding: 9px 14px; border: none; background: transparent; font-family: inherit;
    font-size: 14px; font-weight: 600; color: var(--label-secondary); cursor: pointer;
    margin: 0; height: auto; border-radius: 0; position: relative;
    transition: color var(--dur-fast) var(--ease-standard);
}
.tab-btn:hover { opacity: 1; color: var(--label-primary); }
.tab-btn.active { color: var(--accent); }
.tab-btn.active::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }

/* Двоколонковий ряд для парних карток помірної висоти (аналіз консультанта + графік ваги). min-width:0
   на дітях обов'язковий -- інакше грід-трек з 1fr все одно не стискається вужче за min-content дитини
   (класична пастка CSS Grid), і широка таблиця (Джерела) забирає собі майже всю ширину ряду, лишаючи
   сусідній картці кілька пікселів замість чесних 50/50 (перевірено наживо на nutrition.php). */
.two-col-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.two-col-row > * { min-width: 0; }
@media (max-width: 900px) { .two-col-row { grid-template-columns: 1fr; } }

/* nutrition.php: «Джерела» (таблиця на 10 колонок) і «Спроби запису на розбір» у пропорції 3 до 2, щоб джерелам було де розгорнутись.
   Окремий клас, а не зміна .two-col-row: цей самий ряд ще використовує nutrition_view.php, там потрібні рівні половини.
   Правило стоїть після базового з тією самою специфічністю і переб'є його, тому згортання в одну колонку повторено тут. Згортається вже на
   1100px, а не на 900px, як .two-col-row: при 3 до 2 менша картка на вужчому екрані стає тіснішою за 300px, і підписи в ній ідуть у 3-4 рядки. */
.nut-row-sources { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; }
@media (max-width: 1100px) { .nut-row-sources { grid-template-columns: minmax(0, 1fr); } }

/* Права колонка «Джерел» (nutrition.php): «Спроби запису на розбір» + графік приєднань один під одним,
   а не окремим рядком нижче -- «Джерела» зліва завжди вища (десяток рядків таблиці). align-items:stretch
   на .nut-row-sources (переб'є базовий .two-col-row) розтягує саму колонку до висоти «Джерел», а тут
   останню картку (графік) -- flex:1, щоб саме вона з'їдала різницю висот, а не лишала порожнє тло збоку. */
.nut-col-stack { display: flex; flex-direction: column; }
/* margin-bottom НЕ обнуляти на останній картці -- вона таки має власний зовнішній відступ до "Усі учасниці" нижче,
   так само як ліва картка "Джерела" має свій. Обнуляла тут одного разу -- зовнішній відступ після всього ряду
   зник узагалі (юзерка спіймала на проді, скріншот в упор показує картки, що торкаються). */
.nut-col-stack .card:last-child { flex: 1; display: flex; flex-direction: column; }
/* pls-chart-wrap лишається block (не flex): висота йде flex:1 від картки, а сам <svg> вимірює цю висоту й виставляє
   собі viewBox під неї (nutrition.php, adminBarChart) -- звичайний width:100%/height:auto тоді дає точний розмір
   без спотворення (не через CSS-розтяг, бо той тягнув би внутрішні відступи графіка нерівномірно по осях). */
.nut-col-stack .card:last-child .pls-chart-wrap { flex: 1; min-height: 0; }

/* Компактний список нічного аналізу консультанта -- легший за day-timeline (там зайва вага для
   короткого тексту+статусу): дата-чіп + бейдж в один рядок, текст нижче. */
.insight-list { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; padding-right: 2px; }
.insight-item { padding: 10px 12px; border-radius: var(--r-md); background: var(--fill-quaternary); }
.insight-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.insight-date { font-size: 11px; font-weight: 700; color: var(--label-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.insight-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--label-primary); }

/* Consultant list row */

.consultant-list { display: flex; flex-direction: column; }
.consultant-row {
    padding: 12px 10px;
    border-radius: var(--r-md); border-bottom: 1px solid var(--separator);
    transition: background-color var(--dur-fast) var(--ease-standard);
}
.consultant-row:last-child { border-bottom: none; }
.consultant-row:hover { background: var(--fill-quaternary); }
.consultant-row-top { display: flex; align-items: center; gap: 14px; }
.consultant-row-photo { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.consultant-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.consultant-row-name { font-weight: 600; font-size: 15px; }
.consultant-row-meta { font-size: 13px; color: var(--label-secondary); margin-top: 1px; }
.consultant-row-actions { display: flex; gap: 6px; }

.link-copy-row { margin: 10px 0 2px 62px; }
.link-copy-label { display: block; font-size: 12px; color: var(--label-secondary); margin-bottom: 5px; }
.link-copy-field { display: flex; gap: 6px; }
.link-copy-field input {
    flex: 1; min-width: 0; font-size: 13px; font-family: ui-monospace, monospace;
    padding: 7px 10px; border-radius: var(--r-sm); border: 1px solid var(--separator);
    background: var(--fill-quaternary); color: var(--label-primary);
}
.link-copy-field .btn-secondary { flex-shrink: 0; }

/* ============================================================================
   nutrition_texts.php -- Gradient Mesh Spotlight (Aurora Evolved меш + Glassmorphism
   картки), 2026-09-09+. Замінює попередній легкий "taste-skill" тінт (лише --accent,
   2026-09-08) повним склом+мешем, як на consultants.php/consultant_schedule.php --
   АЛЕ поверх ІСНУЮЧИХ спільних класів (.card/.tabs/.segmented/.badge/.file-dropzone/
   .rich-editor), не нових .ntx-*: сторінка має багато завʼязаного на ці класи JS
   (drag-drop, rich-editor, перемикачі типу) -- переписувати розмітку під нові назви
   класів заради самого лише вигляду зайвий ризик. Свідомо НЕ займаю глобальний
   button/.btn тут: на цій сторінці забагато підвидів кнопки (.badge-як-кнопка,
   .segmented-btn, .tab-btn, кнопки rich-editor.js) з власними height/padding --
   широке перевизначення зачепило б і їх (той самий клас багів, що й pitfall #1 у
   скілі, тільки джерело колізії -- моє ж власне нове правило, не глобальне). Займаю
   точково: mesh/скло-картки/таби (вузько прицілені селектори, безпечно) -- кнопки й
   поля лишаються на вже коректному глобальному --accent (мохово-зелений, той самий
   GMS-токен, що описаний у скілі). */
.ntx-page { position: relative; }
.ntx-page {
    --ink: #14140F; --ink-soft: rgba(20,20,15,.62); --ink-faint: rgba(20,20,15,.38);
    --lime: #C7F464; --lime-ink: #35470E; --line: rgba(20,20,15,.10);
    --panel: rgba(255,255,255,.88); --field: rgba(20,20,15,.035); --r: 20px;
    /* Вихід до країв і відступи ті самі, що в .nut-page: без них вміст стояв за 28px від сайдбару й правого краю (це лише відступ
       .main), а меш був обрізаний рамкою вмісту замість того, щоб іти до самих стін. overflow: clip, не hidden, як і в .nutv-page. */
    margin: -22px -28px; padding: 32px 40px 60px; min-height: 100vh; overflow: clip; background: #FBFBF7;
}
.ntx-mesh {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(circle at 8% 4%, rgba(199,244,100,.20), transparent 50%),
        radial-gradient(circle at 94% 2%, rgba(191,227,255,.16), transparent 50%),
        radial-gradient(circle at 55% 14%, rgba(255,196,158,.14), transparent 55%);
    filter: blur(65px) saturate(130%);
    mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 46%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 46%);
}
.ntx-content { position: relative; z-index: 1; }

.ntx-page .page-header-icon { background: var(--ink); color: var(--lime); }
.ntx-page h2 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.ntx-page .muted { color: var(--ink-soft); }

/* Таби: pill-навігація на кремовому треку, ink+lime активний стан замість
   акцентного кольору -- безпечно точково (лише #dayTabs .tab-btn, не всі кнопки). */
.ntx-page #dayTabs .tabs-nav {
    border-bottom: none; padding: 4px; background: var(--field); border-radius: var(--r-md);
    margin-bottom: 20px;
}
.ntx-page #dayTabs .tab-btn {
    display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft);
    padding: 8px 14px; border-radius: calc(var(--r-md) - 3px);
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.ntx-page #dayTabs .tab-btn:hover { background: rgba(20,20,15,.05); color: var(--ink); }
.ntx-page #dayTabs .tab-btn.active { background: var(--ink); color: var(--lime); box-shadow: none; }
.ntx-page #dayTabs .tab-btn.active::after { content: none; }
.ntx-page .tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9999px;
    background: rgba(20,20,15,.08); color: var(--ink-soft);
    font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ntx-page #dayTabs .tab-btn.active .tab-count { background: rgba(199,244,100,.25); color: var(--lime); }

.ntx-page .table-toolbar input[type=search] {
    max-width: 340px; background: var(--field); border: 1px solid var(--line); color: var(--ink);
}
.ntx-page .table-toolbar input[type=search]::placeholder { color: var(--ink-faint); }
.ntx-page .table-toolbar input[type=search]:focus {
    outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(199,244,100,.45);
}

.text-field-timing { font-size: 12px; margin: 4px 0 10px; }

/* Картки -- скло замість суцільного білого. Дві картки на день (вбудовані/власні) і жменька
   карток-текстів усередині -- усі одним і тим самим .card, тому одне правило вкриває все. */
.ntx-page .card {
    background: var(--panel); backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(20,20,15,.06); border-radius: var(--r);
    box-shadow: 0 2px 6px rgba(20,20,15,.05), 0 16px 36px rgba(20,20,15,.08);
}
/* Картка-текст і картка власного повідомлення (.ntx-msg нижче) сидять УСЕРЕДИНІ вже скляної
   батьківської .card -- другий backdrop-filter поверх першого читається каламутно (і зайвий
   stacking-context, див. pitfall #8 у скілі, якщо колись з'явиться попап тут) -- тому напівпрозоре
   тло без власного blur. */
.ntx-page .texts-card {
    background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: 14px;
    transition: box-shadow var(--dur-base) var(--ease-standard);
}
.ntx-page .texts-card:hover {
    box-shadow: 0 2px 4px rgba(20,20,15,.04), 0 10px 24px rgba(20,20,15,.06);
}
.ntx-page .section-title h3 { font-family: var(--font-display); color: var(--ink); }
.ntx-page .notice { background: rgba(199,244,100,.24); color: var(--lime-ink); }
.ntx-page .notice.ntx-notice-fail { background: var(--red-bg); color: var(--red-text); }

/* Мітка "Кнопка" над полем-підписом кнопки (render_text_field, NUTRI_BUTTON_KEYS) -- відрізняє
   підпис кнопки від тексту повідомлення в чат, щоб "хочу бачити всі кнопки" читалось з першого
   погляду по сторінці, не лише з підпису label. */
/* Шапка картки-тексту (render_text_field): кнопки (перемикач, тест) плавають праворуч поверх заголовка, тож його перші рядки обтікають їх, а решта йде на
   всю ширину. Колонка поруч стискала довгий заголовок до ~110px (12 рядків) і лишала порожню смугу під кнопками. */
.ntx-page .texts-card { padding: 15px 16px 14px; }
.ntx-field-head::after { content: ''; display: block; clear: both; }
.ntx-field-ctl { float: right; display: flex; align-items: center; gap: 6px; margin: 0 0 4px 12px; }
.ntx-field-title { font-size: 14px; font-weight: 600; line-height: 1.38; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.ntx-page .text-field-timing { margin: 8px 0 0; font-size: 12px; line-height: 1.4; }
/* Рядок «коли надсилається» одразу обрізається до трьох рядків (одним CSS, щоб сторінка не стрибала після завантаження); скрипт (ntxClampTimings) лише
   позначає клікабельними ті, що справді обрізані, клік розгортає (.is-open). Короткі рядки клямп не чіпає. */
.ntx-page .text-field-timing:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ntx-page .text-field-timing.is-clamped { cursor: pointer; }
.ntx-page .text-field-timing.is-clamped:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* «Змінні» одним рядком плашок замість абзацу дрібного тексту; з поясненнями -- розгортаються (details). Display ставимо лише на summary, не на details
   (пітфол 9 у скілі). */
.ntx-vars { margin: 8px 0 0; }
.ntx-vars summary, .ntx-vars-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ntx-vars summary { cursor: pointer; list-style: none; }
.ntx-vars summary::-webkit-details-marker { display: none; }
.ntx-vars summary::marker { content: ""; }
.ntx-vars-label { margin-right: 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); }
.ntx-vars code {
    padding: 3px 6px; border-radius: 6px; background: var(--field); border: 1px solid var(--line);
    font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-soft);
}
.ntx-vars summary svg { width: 12px; height: 12px; margin: 0 4px 0 -4px; flex-shrink: 0; color: var(--ink-faint); transition: transform var(--dur-fast) var(--ease-standard); }
.ntx-vars[open] summary svg { transform: rotate(180deg); }
.ntx-vars summary:hover .ntx-vars-label { color: var(--ink); }
.ntx-vars dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 5px 10px; margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.ntx-vars dt, .ntx-vars dd { margin: 0; }
.ntx-vars-raw { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }

/* Поля картки-тексту без зайвого повітря: поле тексту росте за вмістом (раніше мінімум 130px навіть для одного рядка), перемикач типу й панель редактора
   нижчі, дропзона рядком. Точково по класах (.segmented-btn, .rich-toolbar, .file-dropzone) під .texts-card, не по всіх button, див. пітфол 12. */
.ntx-page .texts-card textarea { min-height: 56px; field-sizing: content; max-height: 420px; margin-top: 10px; }
.ntx-page .texts-card .text-media-row textarea { margin-top: 8px; }
/* Картинка чи відео в картці тексту: блок над редактором (як у Telegram: медіа зверху, текст під ним) і лічильник підпису під ним. */
.ntx-page .texts-card .ntx-msg-field { margin: 10px 0 8px; }
.ntx-page .texts-card .ntx-caption-meter { margin: 6px 0 0; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.ntx-page .texts-card .ntx-caption-meter.is-over { color: var(--red-text); font-weight: 700; }
.ntx-page .texts-card .segmented { margin: 10px 0 8px; padding: 3px; gap: 3px; border-radius: 10px; }
.ntx-page .texts-card .segmented-btn { height: 28px; padding: 0 8px; gap: 5px; border-radius: 8px; font-size: 12.5px; }
.ntx-page .texts-card .segmented-btn svg { width: 14px; height: 14px; }
.ntx-page .texts-card .segmented-btn { min-width: 0; white-space: nowrap; }
/* Вузьке вікно: картка ~200px, три кнопки зі значками не влазять -- лишаємо самі підписи. */
@media (max-width: 900px) { .ntx-page .texts-card .segmented-btn svg { display: none; } .ntx-page .texts-card .segmented-btn { padding: 0 4px; } }
.ntx-page .texts-card .rich-toolbar { margin-bottom: 8px; padding: 4px; }
.ntx-page .texts-card .rich-toolbar-btn { height: 28px; min-width: 28px; }
.ntx-page .texts-card .rich-toolbar-btn-format { width: 28px; }
.ntx-page .texts-card .file-dropzone { flex-direction: row; gap: 10px; padding: 12px 14px; text-align: left; }
.ntx-page .texts-card .file-dropzone svg { width: 20px; height: 20px; }
.ntx-page .texts-card .ntx-buttons { margin-top: 10px; padding-top: 10px; }
.ntx-btn-tag {
    display: inline-flex; align-items: center; gap: 4px; background: var(--ink); color: var(--lime);
    border-radius: 999px; padding: 2px 8px 2px 7px; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; margin: 0 6px 4px 0; vertical-align: middle;
}
/* Кнопка "Тест" -- окремо від button/.btn (не задіює глобальну висоту 44px/пілюлю), компактна
   іконка+підпис, щоб не конкурувати вагою з головною кнопкою "Зберегти" картки/форми. */
.ntx-test-btn {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    height: 28px; padding: 0 10px; margin: 0; border: 1px solid var(--line); border-radius: 999px;
    background: rgba(255,255,255,.6); color: var(--ink-soft); font-size: 12px; font-weight: 600;
    font-family: inherit; cursor: pointer;
}
.ntx-test-btn svg { width: 12px; height: 12px; }
.ntx-test-btn:hover { border-color: var(--ink); color: var(--ink); opacity: 1; }

/* Перемикач "активне/вимкнено" одного bot_text-повідомлення (render_text_field(),
   NUTRI_TOGGLEABLE_KEYS) -- та сама механіка (реальний track+knob, той самий принцип
   is-on-клас-через-onchange, не input:checked ~ ...) що вже є в .cst-toggle
   (admin/consultants.php), лише вдвічі компактніша й у ряд з .ntx-btn-tag/.ntx-test-btn
   у шапці картки замість повноширинного поля -- тут це один з кількох елементів у рядку,
   не єдине поле поруч з інпутом. .ntx-page вище вже оголошує ті самі --ink/--lime/--line, що
   й .consultants-page, тож ці токени резолвляться тут коректно без власної копії. */
.ntx-toggle {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; cursor: pointer;
    height: 28px; padding: 0 10px; margin: 0; border: 1px solid var(--line); border-radius: 999px;
    background: rgba(255,255,255,.6);
}
.ntx-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ntx-toggle-state { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.ntx-toggle.is-on .ntx-toggle-state { color: var(--lime-ink); }
.ntx-toggle-track {
    flex-shrink: 0; width: 28px; height: 16px; border-radius: 999px;
    background: rgba(20,20,15,.15); position: relative; transition: background-color .15s;
}
.ntx-toggle-track::after {
    content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
    border-radius: 50%; background: #fff; transition: transform .15s;
}
.ntx-toggle.is-on .ntx-toggle-track { background: var(--lime); }
.ntx-toggle.is-on .ntx-toggle-track::after { transform: translateX(12px); background: var(--ink); }
/* Сам checkbox прихований, тож без цього кільця клавіатурою не видно, де фокус. */
.ntx-toggle:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(199,244,100,.45); }

/* Секція "Кнопки під повідомленням" -- render_message_buttons_section() у nutrition_texts.php.
   .ntx-button-item -- звичайний div (НЕ form -- лежить усередині великої форми "Зберегти
   тексти"/картки повідомлення, вкладений form там невалідний і браузер його просто відкидає,
   перевірено наживо). Кожна дія (зберегти/вище/нижче/видалити/додати) -- onclick, що читає
   сусідні .ntx-btn-label/.ntx-btn-url/.ntx-btn-samerow і шле через JS-побудований окремий
   <form> (ntxSubmitAction() у <script> нижче по файлу). */
.ntx-buttons { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.ntx-buttons-label {
    display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); margin-bottom: 8px;
}
.ntx-button-item { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.ntx-button-item input.ntx-btn-label, .ntx-button-item input.ntx-btn-url {
    width: auto; padding: 7px 10px; font-size: 12.5px; border-radius: 8px;
    background: var(--field); border: 1px solid var(--line); color: var(--ink);
}
.ntx-button-item input.ntx-btn-label { flex: 1 1 90px; min-width: 0; }
.ntx-button-item input.ntx-btn-url { flex: 2 1 140px; min-width: 0; font-family: ui-monospace, monospace; font-size: 11.5px; }
.ntx-samerow {
    display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--ink-faint);
    white-space: nowrap; cursor: pointer; flex-shrink: 0;
}
.ntx-samerow input { width: auto; margin: 0; }

.ntx-iconbtn {
    /* padding:0/margin:0 обов'язково -- інакше глобальний button{height:44px;padding:0
       22px;margin-top:18px} розтягує цю маленьку кругову кнопку (той самий баг, що вже
       описаний у скілі gradient-mesh-spotlight, пітфол 1 -- .cst-iconbtn на consultants.php). */
    width: 26px; height: 26px; padding: 0; margin: 0; border-radius: 50%; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    background: rgba(20,20,15,.06); color: var(--ink-soft);
}
.ntx-iconbtn svg { width: 12px; height: 12px; }
.ntx-iconbtn:hover { background: var(--ink); color: var(--lime); opacity: 1; }
.ntx-iconbtn.danger:hover { background: #B8291F; color: #fff; }

.ntx-add-btn {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    height: 28px; padding: 0 10px; margin: 0; border: none; border-radius: 999px;
    background: var(--ink); color: var(--lime); font-size: 12px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.ntx-add-btn svg { width: 12px; height: 12px; }
.ntx-add-btn:hover { opacity: .88; }

/* Кнопка, вже прикріплена кодом (NUTRI_BUILTIN_BUTTONS у nutrition_texts.php) -- підпис
   редагується (клік по тексту -> input+зберегти), URL лише описаний текстом (рахується кодом,
   не редагується тут). min-width:0/overflow:hidden на .ntx-builtin-btn-note обов'язково --
   довгий опис у нестискному рядку розсунув би сітку так само, як уже було (див. скіл
   gradient-mesh-spotlight, пітфол 17). */
.ntx-builtin-button { background: rgba(199,244,100,.12); border-radius: 8px; padding: 4px 8px; margin: -4px -8px 6px; }
.ntx-builtin-btn-text {
    font-size: 12.5px; font-weight: 700; color: var(--ink); cursor: pointer; padding: 3px 7px;
    border-radius: 6px; border: 1px dashed transparent; flex-shrink: 0;
}
.ntx-builtin-btn-text:hover { border-color: var(--line); background: rgba(255,255,255,.6); }
.ntx-builtin-btn-note {
    font-size: 11px; color: var(--ink-faint); font-style: italic;
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* У вузькій колонці рядок "підпис + посилання + дії" не вміщається в один ряд -- переносимо, а не даємо
   вилізти за край картки. Дії (поруч, зберегти, вище, нижче, видалити) -- одна група, що переноситься
   цілою й притискається праворуч: інакше остання іконка лишається сама на окремому рядку. */
.ntx-page .ntx-button-item { flex-wrap: wrap; }
.ntx-page .ntx-button-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; margin-left: auto; }
/* Головні кнопки "Зберегти тексти" в лівій колонці -- ink+lime, як і в решти елементів цієї сторінки
   (активна вкладка, "Додати", мітка "Кнопка"). Змінюється лише колір: розмір лишається глобальним. */
.ntx-page .tab-panel form > button[type=submit] { background: var(--ink); color: var(--lime); }

/* ============================================================================
   Власні повідомлення дня (nutrition_texts.php, render_message_card()): шапка (час, скільки
   оброблено, перемикач), текст, картинка чи відео, підвал (зберегти/тест/видалити) і під ним кнопки
   повідомлення. Усе під .ntx-page -- токени --ink/--lime/--line існують лише там. Кнопки тут -- власні
   класи з ЯВНИМИ height/padding/margin, а не широке .ntx-page button: глобальне
   button{height:44px;padding:0 22px;margin-top:18px} інакше розтягує їх (скіл gradient-mesh-spotlight,
   пітфол 1), а на цій сторінці ще й купа інших видів кнопок (rich-редактор, вкладки, сегменти). */
.ntx-page .ntx-msg-intro { margin: -4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

.ntx-page .ntx-msg {
    min-width: 0; margin-bottom: 12px; padding: 14px 16px;
    background: rgba(255,255,255,.55); border: 1px solid var(--line); border-radius: 14px;
    transition: box-shadow var(--dur-base) var(--ease-standard);
}
.ntx-page .ntx-msg:hover { box-shadow: 0 2px 4px rgba(20,20,15,.04), 0 10px 24px rgba(20,20,15,.06); }
.ntx-page .ntx-msg.is-off { background: rgba(255,255,255,.32); border-style: dashed; }

/* Сітка, а не flex-wrap: середня колонка (скільки вже оброблено) стискається з трикрапкою, а перемикач
   завжди лишається справа в тому самому рядку -- у вузькій колонці він інакше падав на рядок нижче. */
.ntx-page .ntx-msg-head {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-bottom: 12px;
}
/* Вибір дня («перенести на інший день»): підмінений .csel тієї ж висоти й форми, що й пілюля часу поруч. */
.ntx-page .ntx-msg-day { display: block; margin: 0; }
.ntx-page .ntx-msg-day .csel-trigger { height: 30px; padding: 0 10px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.ntx-page .ntx-msg-day .csel-option { font-size: 13px; }
.ntx-page .ntx-msg-time {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; padding: 0 10px 0 9px;
    border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.6); cursor: text;
}
.ntx-page .ntx-msg-time svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-faint); }
.ntx-page .ntx-msg-time input[type=time] {
    width: 62px; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none;
    font-size: 13px; font-weight: 700; color: var(--ink);
}
/* Нативна іконка годинника поля не потрібна -- ліворуч уже є наша; сам пікер клікабельний (просто невидимий). */
.ntx-page .ntx-msg-time input[type=time]::-webkit-calendar-picker-indicator { opacity: 0; width: 4px; }
.ntx-page .ntx-msg-time:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(199,244,100,.45); }
.ntx-page .ntx-msg-sent {
    display: flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap;
    font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft);
}
.ntx-page .ntx-msg-sent svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ink-faint); }
.ntx-page .ntx-msg-sent span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ntx-page .ntx-msg-toggle { grid-column: 4; }

.ntx-page .ntx-msg-field { min-width: 0; margin-bottom: 12px; }
.ntx-page .ntx-msg-label {
    display: block; margin: 0 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .03em; color: var(--ink-faint);
}
.ntx-page .ntx-msg-caption { min-height: 96px; font-size: 14px; }
.ntx-page .ntx-msg-note { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-faint); }

.ntx-page .ntx-msg-media {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 8px;
    background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: 12px;
}
.ntx-page .ntx-msg-thumb {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 52px; height: 52px; overflow: hidden; border-radius: 9px; background: var(--field); color: var(--ink-soft);
    transition: opacity var(--dur-fast) var(--ease-standard);
}
.ntx-page .ntx-msg-thumb:hover { opacity: .85; }
.ntx-page .ntx-msg-thumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ntx-page .ntx-msg-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ntx-page .ntx-msg-thumb svg { width: 22px; height: 22px; }
.ntx-page .ntx-msg-media-info { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.ntx-page .ntx-msg-media-info strong { font-size: 13px; color: var(--ink); }
.ntx-page .ntx-msg-media-info span {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    font-size: 12px; color: var(--ink-faint);
}
.ntx-page .ntx-msg-media.is-removing .ntx-msg-thumb { opacity: .4; filter: grayscale(1); }
.ntx-page .ntx-msg-media.is-removing .ntx-msg-media-info { opacity: .5; text-decoration: line-through; }

.ntx-page .ntx-msg-remove {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; height: 28px; margin: 0; padding: 0 10px;
    border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.6);
    font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.ntx-page .ntx-msg-remove input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.ntx-page .ntx-msg-remove svg { width: 12px; height: 12px; }
.ntx-page .ntx-msg-remove:hover { border-color: var(--red-text); color: var(--red-text); }
.ntx-page .ntx-msg-remove.is-on { border-color: transparent; background: var(--red-bg); color: var(--red-text); }
.ntx-page .ntx-msg-remove:focus-within { box-shadow: 0 0 0 3px rgba(199,244,100,.45); }

/* Дропзона -- та сама спільна .file-dropzone, лише компактним рядком (значок + два рядки тексту) замість
   високого блока по центру: у вузькій колонці зайва висота дорого коштує. */
.ntx-page .ntx-msg-drop {
    flex-direction: row; justify-content: flex-start; gap: 12px; margin: 0; padding: 12px 14px; text-align: left;
    background: var(--field); border: 1.5px dashed var(--line); border-radius: 12px;
}
.ntx-page .ntx-msg-drop:hover, .ntx-page .ntx-msg-drop.drag { border-color: var(--ink); background: rgba(199,244,100,.16); }
.ntx-page .ntx-msg-drop:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(199,244,100,.45); }
.ntx-page .ntx-msg-drop svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--ink-faint); }
.ntx-page .ntx-msg-drop-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ntx-page .ntx-msg-drop .file-dropzone-hint { font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.ntx-page .ntx-msg-drop-sub { font-size: 11.5px; color: var(--ink-faint); }
.ntx-page .ntx-msg-drop.has-file { border-style: solid; border-color: var(--lime-ink); background: rgba(199,244,100,.22); }
.ntx-page .ntx-msg-drop.has-file svg, .ntx-page .ntx-msg-drop.has-file .file-dropzone-hint { color: var(--lime-ink); }

.ntx-page .ntx-msg-foot {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.ntx-page .ntx-msg-save {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    height: 32px; margin: 0; padding: 0 16px; border: none; border-radius: 999px;
    background: var(--ink); color: var(--lime); font-size: 13px; font-weight: 700; cursor: pointer;
}
.ntx-page .ntx-msg-foot .ntx-test-btn { height: 32px; padding: 0 12px; }
.ntx-page .ntx-msg-foot .ntx-iconbtn { width: 32px; height: 32px; }
.ntx-page .ntx-msg-foot .ntx-iconbtn svg { width: 14px; height: 14px; }
.ntx-page .ntx-msg-del { margin-left: auto; }

/* "Додати повідомлення" -- рядок із пунктирною рамкою, під яким розкривається така сама картка. Не
   ставимо display на сам <details> (пітфол 9 у скілі), лише на його <summary>. */
.ntx-page .ntx-msg-new { margin-top: 4px; }
.ntx-page .ntx-msg-new > summary {
    display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; list-style: none; cursor: pointer;
    border: 1.5px dashed var(--line); border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--ink);
    transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.ntx-page .ntx-msg-new > summary::-webkit-details-marker { display: none; }
.ntx-page .ntx-msg-new > summary::marker { content: ""; }
.ntx-page .ntx-msg-new > summary svg { width: 14px; height: 14px; flex-shrink: 0; }
.ntx-page .ntx-msg-new > summary:hover { border-color: var(--ink); background: rgba(199,244,100,.16); }
.ntx-page .ntx-msg-new > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ntx-page .ntx-msg-new[open] > summary { margin-bottom: 10px; border-style: solid; background: rgba(199,244,100,.16); }
.ntx-page .ntx-msg-form { margin-bottom: 0; }

/* Власні повідомлення дня лежать у тих самих колонках «газетою», що й картки-тексти (.texts-grid вище): кожне під попереднім, без дірок,
   колонки фіксує той самий скрипт (.is-col-start). Не більше 3 колонок: картка повідомлення (час, лічильник, перемикач, редактор, медіа)
   вужча за ~380px тисне й розповзається. */
.ntx-page .ntx-msg-grid { column-count: 3; column-gap: 16px; }
.ntx-page .ntx-msg-grid > .ntx-msg, .ntx-page .ntx-msg-grid > .ntx-msg-new { break-inside: avoid; margin: 0 0 16px; }
.ntx-page .ntx-msg-grid > .is-col-start { break-before: column; }
@media (max-width: 1500px) { .ntx-page .ntx-msg-grid { column-count: 2; } }
@media (max-width: 1100px) { .ntx-page .ntx-msg-grid { column-count: 1; } }

/* Вибір великого відео зі сховища Telegram у картці повідомлення (render_message_tg_picker()): підмінений .csel (assets/js/
   admin-select.js) + кругла кнопка «Оновити». Глобальний .csel-trigger має 15px і великі поля -- тут картка компактна, тож
   те саме, але дрібніше; лише в цьому рядку, решта сторінок не зачеплена. min-width:0 на .csel обов'язково: довгий підпис
   відео (дата, розмір, назва) інакше розсуває рядок за край картки. */
.ntx-page .ntx-msg-tg { margin-top: 12px; }
.ntx-page .ntx-msg-sublabel { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.ntx-page .ntx-msg-tg-row { display: flex; align-items: center; gap: 8px; }
.ntx-page .ntx-msg-tg-row .csel { flex: 1 1 auto; min-width: 0; }
.ntx-page .ntx-msg-tg-row .csel-trigger { padding: 8px 12px; font-size: 13px; }
.ntx-page .ntx-msg-tg-row .csel-option { font-size: 13px; }
.ntx-page .ntx-msg-refresh { width: 34px; height: 34px; }
.ntx-page .ntx-msg-refresh svg { width: 15px; height: 15px; }
.ntx-page .ntx-msg-refresh.is-loading svg { animation: ntx-spin .8s linear infinite; }
@keyframes ntx-spin { to { transform: rotate(360deg); } }

/* Блок «Велике відео з Telegram» над вкладками (render_tg_panel()): згорнутий рядок зі статусом, усередині -- підключені
   акаунти й код підключення. Це <details> у скляній .card; display ставимо лише на <summary>, не на сам details (пітфол 9 у
   скілі gradient-mesh-spotlight). Картка без власних полів: відступи -- у шапки й тіла, щоб summary клікався на всю ширину. */
.ntx-page .ntx-tg { padding: 0; margin-bottom: 16px; }
.ntx-page .ntx-tg-head { display: flex; align-items: center; gap: 10px; padding: 12px 20px; }
.ntx-page details.ntx-tg > summary { cursor: pointer; list-style: none; border-radius: var(--r); }
.ntx-page details.ntx-tg > summary::-webkit-details-marker { display: none; }
.ntx-page details.ntx-tg > summary::marker { content: ""; }
.ntx-page details.ntx-tg > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ntx-page .ntx-tg-head > svg:first-child {
    box-sizing: border-box; flex-shrink: 0; width: 30px; height: 30px; padding: 7px; border-radius: 50%;
    background: var(--ink); color: var(--lime);
}
.ntx-page .ntx-tg-head > svg:last-child {
    flex-shrink: 0; width: 16px; height: 16px; color: var(--ink-faint);
    transition: transform var(--dur-fast) var(--ease-standard);
}
.ntx-page details.ntx-tg[open] > summary > svg:last-child { transform: rotate(180deg); }
.ntx-page .ntx-tg-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.ntx-page .ntx-tg-chip {
    display: inline-flex; align-items: center; height: 24px; margin-left: auto; padding: 0 10px; border-radius: 999px;
    background: rgba(20,20,15,.06); color: var(--ink-soft); font-size: 12px; font-weight: 700; white-space: nowrap;
}
.ntx-page .ntx-tg-chip.is-on { background: rgba(199,244,100,.4); color: var(--lime-ink); }
.ntx-page .ntx-tg-body { padding: 2px 20px 18px; }
.ntx-page .ntx-tg-note { max-width: 74ch; margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.ntx-page .ntx-tg-off { padding: 14px 20px 6px; }
.ntx-page .ntx-tg-off .ntx-tg-head { padding: 0 0 8px; }
.ntx-page .ntx-tg-off .ntx-tg-note { margin-bottom: 8px; }
.ntx-page .ntx-tg-item {
    display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 8px 10px;
    background: rgba(255,255,255,.6); border: 1px solid var(--line); border-radius: 12px;
}
.ntx-page .ntx-tg-item form { margin: 0; }
.ntx-page .ntx-tg-avatar {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    background: var(--field); font-size: 13px; font-weight: 700; color: var(--ink);
}
.ntx-page .ntx-tg-who { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; font-size: 13px; }
.ntx-page .ntx-tg-who strong { color: var(--ink); overflow-wrap: anywhere; }
.ntx-page .ntx-tg-who span { font-size: 12px; color: var(--ink-faint); }
.ntx-page .ntx-tg-empty { margin: 0 0 10px; font-size: 13px; color: var(--ink-faint); }
.ntx-page .ntx-tg-connect { margin: 10px 0 0; }
.ntx-page .ntx-tg-connect .ntx-add-btn { height: 32px; padding: 0 14px; font-size: 13px; }
.ntx-page .ntx-tg-connect .ntx-add-btn svg { width: 14px; height: 14px; }
.ntx-page .ntx-tg-codebox {
    margin-top: 14px; padding: 14px 16px; background: rgba(199,244,100,.14);
    border: 1px solid rgba(53,71,14,.18); border-radius: 14px;
}
.ntx-page .ntx-tg-code {
    display: inline-block; margin: 2px 0 10px; padding: 8px 16px; border-radius: 12px; background: var(--ink); color: var(--lime);
    font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: .14em;
    font-variant-numeric: tabular-nums; user-select: all;
}
.ntx-page .ntx-tg-open {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; margin: 0; padding: 0 16px; border-radius: 999px;
    background: var(--ink); color: var(--lime); font-size: 13px; font-weight: 700; text-decoration: none;
    transition: opacity var(--dur-fast) var(--ease-standard);
}
.ntx-page .ntx-tg-open svg { width: 14px; height: 14px; flex-shrink: 0; }
.ntx-page .ntx-tg-open:hover { opacity: .88; text-decoration: none; }

/* ============================================================================
   nutrition.php -- взяли за основу той самий прийом, що й .ntx-page: лише
   переозначення --accent/--accent-tint-bg, решта дизайн-системи (світлий фон,
   SF Pro, скляний сайдбар, м'які тіні/анімації з :root) лишається як є --
   це і Є "Apple macOS UI" мова, тож нема сенсу її переписувати.

   Перша версія цієї сторінки була experiment у зовсім іншу, темну tactical-
   telemetry мову (industrial-brutalist-ui skill) -- користувачу не сподобалось
   ("хочу світлу тему з плавним стилем, Apple UI для macOS"), тож повернули
   картки/рядки-учасниць на стандартні .card + .section-title + .person-row +
   .badge (ті самі компоненти, що й решта адмінки), і лишили тільки один
   акцентний indigo -- легкий підпис розділу, як кольорові піктограми в
   macOS System Settings, не окрема візуальна мова. */
.nut-page {
    --accent: #5E5CE6;
    --accent-tint-bg: rgba(94, 92, 230, 0.14);
}

/* KPI-картки: іконка+підпис одним рядком зверху, велике число нижче (референс-скрін SaaS-
   дашборду) замість "іконка / число / підпис" стовпчиком за замовчуванням деінде в адмінці.
   Обгортка .kpi-card-head існує лише в розмітці nutrition.php -- інші сторінки з .kpi-card
   (ai_usage.php) її не мають, тому це не чіпає їхній вигляд. */
.nut-page .kpi-card-head { display: flex; align-items: center; gap: 8px; }
.nut-page .kpi-icon { margin-bottom: 0; width: 30px; height: 30px; flex-shrink: 0; }
.nut-page .kpi-icon svg { width: 15px; height: 15px; }
.nut-page .kpi-label { text-transform: uppercase; letter-spacing: 0.03em; font-size: 11px; font-weight: 700; }
.nut-page .kpi-value { font-size: 32px; }

/* Таби-фільтри статусу поруч із пошуком у тулбарі таблиці -- той самий .tabs-nav/.tab-btn
   компонент, що й скрізь в адмінці, лише без нижньої лінії-роздільника (тут вона зайва,
   тулбар не має власного бордера знизу). */
.nut-page .table-toolbar { flex-wrap: wrap; }
.nut-page .table-toolbar .tabs-nav { margin: 0; border-bottom: none; }

/* Списки "потребують контакту" і "ризик втрати" живуть у попапах (.nut-modal нижче), не на сторінці
   напряму. Кожен список показує перші 10 рядків, решта -- прокруткою; точну висоту ставить скрипт
   у nutrition.php, 640px -- запас без нього. */
.nut-scroll { position: relative; max-height: 640px; overflow-y: auto; }
/* Той самий єдиний вигляд прокрутки, що й у .cst-modal-body: без смуги, край тане (клас scroll-fade на списку). */
.nut-scroll, .nut-modal-panel { scrollbar-width: none; -ms-overflow-style: none; }
.nut-scroll { --fade: 18px; } /* рядки списку високі й щільні: край, що тане, вужчий, щоб десятий рядок лишався читабельним */
.nut-scroll::-webkit-scrollbar, .nut-modal-panel::-webkit-scrollbar { display: none; }
.nut-risk-sub { margin: -6px 0 10px; font-size: 13px; color: var(--label-secondary); }

/* КРІ-тайл, що відкриває попап (Чекають на контакт / Ризик втрати клієнта) -- справжній <button>,
   не div, заради нативної клавіатурної доступності. Глобальний button{padding:0 22px;height:44px;
   margin-top:18px} інакше розчавив би багаторядковий вміст картки й додав зайвий відступ (та сама
   пастка, що вже описана в скілі gradient-mesh-spotlight, пітфол 1) -- .kpi-card сам задає padding
   і фон (вища специфічність класу за елемент), та height і margin явно скидаємо лише тут. */
.nut-page button.kpi-card {
    width: 100%; height: auto; margin: 0; border: none; text-align: left; font: inherit; color: inherit; cursor: pointer;
}

/* Попап (<dialog>) для списків вище -- той самий структурний прийом, що й .cst-modal на
   consultants.php (прозорий dialog на весь viewport, flex-центрування, клік по фону = клік по
   самому dialog), але на глобальних токенах: ця сторінка не входить у "Gradient Mesh Spotlight"
   ребілд і не має власних --ink/--lime/--panel. display:flex лише під [open] -- та сама причина,
   що й у .cst-modal (пітфол 9 скіла): без цього застереження клас перебиває нативний
   dialog:not([open]){display:none}. */
.nut-modal:not([open]) { display: none; }
.nut-modal[open] {
    margin: 0; padding: 24px; border: none; background: transparent;
    width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
    display: flex; align-items: center; justify-content: center;
}
.nut-modal::backdrop { background: rgba(20,20,15,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.nut-modal-panel {
    width: 560px; max-width: 100%; max-height: 88vh; overflow-y: auto;
    background: var(--bg-secondary); border-radius: var(--r-lg); box-shadow: var(--shadow-modal);
    padding: 22px 24px 20px; animation: fadeSlideUp var(--dur-slow) var(--ease-out-soft) both;
}
.nut-modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nut-modal-head h3 { margin: 0; flex: 1; }
.nut-modal-close { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .nut-modal-panel { animation: none; } }
@media (max-width: 560px) { .nut-modal[open] { padding: 12px; } .nut-modal-panel { padding: 18px 16px 16px; } }

/* Підсумковий рядок таблиці джерел -- той самий прийом, що й .fd-table tfoot у nutrition_view.php. */
.nut-page table tfoot td { border-top: 1px solid var(--separator); border-bottom: none; font-weight: 700; background: var(--fill-quaternary); }

/* ============================================================================
   consultants.php -- "Gradient Mesh Spotlight", повний рибілд "з нуля" (2026-09-09).
   Перша спроба перевикористовувала спільні компоненти (.card/.badge/.toggle/
   .icon-btn/.detail-grid) і лише перефарбовувала їх токенами -- вийшло схоже,
   але НЕ той самий макет: спільний .consultant-row кладе аватар+ім'я в один
   горизонтальний рядок, а в затвердженому мокапі профіль -- вертикальний стек
   (аватар зверху, ім'я під ним, мета нижче, бейдж, дії, посилання). Тому тут
   усе на власних .cst-* класах, без жодного успадкування від спільних правил
   адмінки -- точне відтворення мокапу, не близька апроксимація. */
.consultants-page {
    --ink: #14140F;
    --ink-soft: rgba(20, 20, 15, 0.62);
    --ink-faint: rgba(20, 20, 15, 0.38);
    --lime: #C7F464;
    --lime-ink: #35470E;
    --line: rgba(20, 20, 15, 0.10);
    --panel: rgba(255, 255, 255, 0.88);
    --field: rgba(20, 20, 15, 0.035);
    --r: 22px;

    position: relative;
    margin: -22px -28px;
    padding: 32px 40px 60px;
    min-height: 100vh;
    overflow: hidden;
    background: #FBFBF7;
    color: var(--ink);
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}
/* Ослаблено втричі проти сирих значень мокапу + mask-image гасить до прозорого на
   середині сторінки -- в компактному демо (~550px) повна сила читалась як м'який
   спалах, розтягнута на реальну min-height:100vh сторінку вона зливалась у каламутну
   пляму й топила картки (перевірено наживо, довелось відкочувати). */
.consultants-mesh {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 12% 10%, rgba(199, 244, 100, 0.20), transparent 50%),
        radial-gradient(circle at 90% 5%, rgba(191, 227, 255, 0.18), transparent 50%),
        radial-gradient(circle at 50% 55%, rgba(255, 196, 158, 0.12), transparent 55%);
    filter: blur(70px) saturate(130%);
    mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 62%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 62%);
}
.consultants-content { position: relative; z-index: 1; }

.consultants-page h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 0.98;
    margin: 0 0 10px; color: var(--ink);
}
.consultants-page .cst-intro { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 26px; }
.consultants-page .cst-intro a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--lime); }
/* .cst-error тепер рендериться всередині .cst-modal (форма не зберіглась -- людина й так
   дивиться туди), а не на верхньому рівні сторінки. */
.cst-error { color: #B8291F; font-size: 14px; margin: 0 0 14px; }

.cst-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
.cst-head-row h2 { margin: 0; }
.cst-add-btn {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    background: var(--ink); color: var(--lime); border: none; border-radius: 999px;
    padding: 13px 22px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700;
    font-size: 14px; text-decoration: none; white-space: nowrap;
}
.cst-add-btn:hover { opacity: 0.88; text-decoration: none; }
.cst-add-btn svg { width: 16px; height: 16px; }

/* Картки на всю ширину, без сусідньої форми -- auto-fill сам підбирає кількість колонок
   під ширину екрана, без окремих @media-зупинок. Форма додавання/редагування -- .cst-modal
   нижче, окремий простір (dialog), не колонка цієї сітки. */
.cst-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; align-items: start; margin-top: 26px; }
.cst-empty-shell { grid-column: 1 / -1; }

.cst-panel-shell {
    background: var(--panel);
    backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(20,20,15,0.06);
    border-radius: var(--r);
    box-shadow: 0 2px 6px rgba(20,20,15,0.05), 0 16px 36px rgba(20,20,15,0.08);
    padding: 26px;
}
.cst-empty { font-size: 14px; color: var(--ink-faint); text-align: center; padding: 20px 0; }

/* Картка консультанта (2026-09-20, компактна): зверху особа -- аватар, ім'я, посада; під нею смуга з
   ніком, статусом і діями (редагувати, видалити); далі налаштування двома однаковими рядками-
   посиланнями (.cst-setrow); внизу посилання для розсилки, кожне -- один рядок (.cst-link).
   Раніше все йшло окремими блоками з роздільниками й займало ~775px, тепер ~400px. */
.cst-panel { padding: 20px; }
.cst-top { display: flex; align-items: center; gap: 12px; }
.cst-who { flex: 1; min-width: 0; }
.cst-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
.cst-status { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font-size: 13px; }

.cst-avatar, .cst-avatar-photo {
    width: 56px; height: 56px; border-radius: 18px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; object-fit: cover;
}
.cst-avatar { background: var(--ink); color: var(--lime); font-family: 'Bricolage Grotesque', sans-serif; font-size: 21px; font-weight: 700; }

.cst-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; margin: 0; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cst-meta { font-size: 12.5px; line-height: 1.35; color: var(--ink-soft); margin-top: 3px; }
.cst-handle { color: var(--ink); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--lime); }
.cst-handle:hover { border-bottom-color: var(--ink); }

.cst-badge {
    display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
    padding: 5px 12px; border-radius: 999px; background: var(--lime); color: var(--lime-ink);
    margin: 0;
}
.cst-badge.off { background: var(--field); color: var(--ink-faint); }
.cst-status .cst-badge { font-size: 11px; padding: 4px 10px; }

.cst-actions { display: flex; gap: 6px; margin: 0; flex-shrink: 0; }
.cst-iconbtn {
    /* padding:0 обов'язково -- інакше глобальний "button, .btn" (padding: 0 22px) не
       влазить у явний width:30px при box-sizing:border-box, і браузер розтягує рамку
       під padding, стискаючи svg-дитину до 0 (перевірено наживо -- саме тому іконка
       видалення показувалась порожнім колом). margin:0 так само обов'язково -- та сама
       глобальна "button, .btn" має margin-top:18px, і <button> (кнопка "Видалити", в
       формі) успадковує це, а <a> (кнопка "Редагувати") -- ні, бо не елемент button.
       Звідси 18px різниці по вертикалі між ними (перевірено наживо: 395.78 vs 413.78). */
    width: 30px; height: 30px; padding: 0; margin: 0; border-radius: 50%; border: none; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(20,20,15,0.06); color: var(--ink);
}
.cst-iconbtn svg { width: 14px; height: 14px; }
.cst-iconspace { flex: none; width: 30px; height: 30px; }
.cst-iconbtn:hover { background: var(--ink); color: var(--lime); }
.cst-iconbtn.danger:hover { background: #B8291F; color: #fff; }
.cst-iconbtn.is-editing { background: var(--ink); color: var(--lime); box-shadow: 0 0 0 3px rgba(199,244,100,0.4); }

.cst-linkrow { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.cst-linkrow-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 8px; }
.cst-linkfield { display: flex; gap: 6px; }
.cst-linkfield input {
    flex: 1; min-width: 0; height: 36px; margin: 0; border: 1px solid var(--line); background: var(--field); border-radius: 10px;
    padding: 0 11px; font-size: 12px; color: var(--ink-soft); font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.cst-copybtn {
    /* height:36px явно -- без цього дістається глобальний button{height:44px} і кнопка
       вища за поле поруч (те саме джерело, що й баг з іконками вище). */
    flex-shrink: 0; height: 36px; margin: 0; border: none; background: var(--ink); color: var(--lime); border-radius: 10px;
    padding: 0 14px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.cst-copybtn:hover { opacity: 0.85; }
/* Тиха версія тієї ж кнопки -- для дій, які не мають кидатись в очі (відкріпити канал): рамка замість
   заливки, а червоний лише при наведенні, як у .cst-iconbtn.danger. */
.cst-copybtn.is-quiet { background: var(--field); color: var(--ink); border: 1px solid var(--line); }
.cst-copybtn.is-quiet:hover { background: #B8291F; border-color: #B8291F; color: #fff; opacity: 1; }

/* Налаштування консультанта -- рядки-посилання однакового вигляду: іконка, назва, стисле значення
   під нею й стрілка. Наведення -- ink із lime, як у решти посилань-кнопок сторінки. */
.cst-sets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.cst-setrow {
    display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; margin: 0; padding: 8px 12px;
    border: 1px solid var(--line); background: var(--field); border-radius: 12px;
    color: var(--ink); text-decoration: none;
}
.cst-setrow:hover { background: var(--ink); color: var(--lime); text-decoration: none; }
.cst-setrow-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(20,20,15,0.06); color: var(--ink);
}
.cst-setrow-icon.is-on, .cst-setrow:hover .cst-setrow-icon { background: var(--lime); color: var(--lime-ink); }
.cst-setrow-icon svg { width: 16px; height: 16px; }
.cst-setrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cst-setrow-title { font-size: 13px; font-weight: 700; line-height: 1.3; }
.cst-setrow-sub { font-size: 12px; line-height: 1.35; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-setrow:hover .cst-setrow-sub { color: rgba(199,244,100,0.75); }
.cst-setrow.is-warn .cst-setrow-sub { color: #B8291F; }
.cst-setrow.is-warn:hover .cst-setrow-sub { color: #FFB4AC; }
.cst-setrow-go { flex-shrink: 0; display: inline-flex; color: var(--ink-faint); }
.cst-setrow-go svg { width: 14px; height: 14px; }
.cst-setrow:hover .cst-setrow-go { color: var(--lime); }
.cst-note { font-size: 12px; line-height: 1.5; color: var(--ink-faint); margin: 0; }

/* Посилання для розсилки: персональне й за джерелами -- один список, кожне посилання один рядок
   «назва (і кошик, якщо його можна видалити), Копіювати». Кнопка «Копіювати» завжди крайня справа --
   там само, де «Додати» в рядку нового джерела, тож усі кнопки стоять рівно. Саме посилання не
   показується (його однаково не прочитати, воно обрізається) -- лише в підказці й у буфері. */
.cst-links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
/* Ринок реклами (ads_market.php): поради картками. Токени сторінки беруться з .consultants-page. */
.mkt-panel { margin: 0 0 18px; }
.mkt-h { margin: 0 0 12px; font-family: var(--font-display); font-size: 18px; }
.mkt-sum { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14px; line-height: 1.55; }
.mkt-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.mkt-offer { padding: 14px; border: 1px solid var(--line); background: var(--field); border-radius: 14px; }
.mkt-offer-title { display: block; font-size: 13.5px; }
.mkt-quote { margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: rgba(199,244,100,0.22); color: var(--lime-ink); font-size: 13.5px; line-height: 1.5; font-weight: 600; }
.mkt-why { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.mkt-len { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-faint); }
.mkt-sub { margin: 16px 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); }
.mkt-ch { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mkt-ch li { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.mkt-ch a { font-weight: 700; overflow-wrap: anywhere; }
.mkt-ch-title { color: var(--ink-soft); overflow-wrap: anywhere; }
.mkt-ch-subs { color: var(--ink-faint); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkt-bots { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.mkt-bots li { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr); gap: 4px 12px; font-size: 13px; line-height: 1.5; }
.mkt-bots span { color: var(--ink-soft); }
@media (max-width: 640px) { .mkt-ch li, .mkt-bots li { grid-template-columns: minmax(0, 1fr); } }
.cst-botpick-field { margin: 14px 0 10px; }
.cst-link .cst-actions { align-items: center; }
.cst-link-count { min-width: 28px; margin-right: 4px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.cst-modal-foot .cst-addlink-form { margin: 0; }
/* Боти консультантки: рядок на бота, нік ліворуч, скільки людей праворуч (на всю ширину картки, а не в вузькій колонці біля аватарки). */
.cst-bots { display: grid; gap: 4px; margin-top: 12px; }
.cst-bot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; line-height: 1.35; }
.cst-bot a { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-bot span { flex: none; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
/* Боти у формі консультантки: картки з меню «три крапки». Кнопки перебивають глобальне button (висота 44, відступ зверху 18, паддінги). */
.cst-botcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.cst-botcard { position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); }
.cst-botcard-av { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.cst-botcard.is-main .cst-botcard-av { background: var(--ink); color: var(--lime); }
.cst-botcard-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cst-botcard-text b { font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-botcard-text span { font-size: 12px; color: var(--ink-soft); }
.cst-botcard-flag { display: none; color: var(--red) !important; }
.cst-botcard.is-removing .cst-botcard-flag { display: block; }
.cst-botcard.is-removing .cst-botcard-count { display: none; }
.cst-botcard.is-removing .cst-botcard-av, .cst-botcard.is-removing .cst-botcard-text b { opacity: .5; }
.cst-botcard.is-removing .cst-botcard-text b { text-decoration: line-through; }
.cst-botcard .cst-botcard-menubtn { flex: none; width: 30px; height: 30px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cst-botcard .cst-botcard-menubtn:hover { background: rgba(20, 20, 15, 0.07); color: var(--ink); }
.cst-botcard-menubtn svg { width: 18px; height: 18px; }
.cst-botmenu { position: absolute; z-index: 30; right: 8px; top: calc(100% - 14px); min-width: 210px; padding: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 6px rgba(20, 20, 15, .06), 0 14px 30px rgba(20, 20, 15, .14); }
.cst-botmenu a, .cst-botmenu button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: auto; min-height: 34px; margin: 0; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.cst-botmenu a:hover, .cst-botmenu button:hover { background: var(--field); }
.cst-botmenu svg { width: 15px; height: 15px; flex: none; }
.cst-botmenu .cst-botmenu-danger { color: var(--red); }
.cst-botmenu-note { display: block; padding: 7px 10px; font-size: 12px; line-height: 1.35; color: var(--ink-faint); }
.cst-botcard-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; height: auto; margin: 0; padding: 10px 12px; border: 1px dashed rgba(20, 20, 15, .25); border-radius: 14px; background: transparent; color: var(--ink-soft); font-size: 13px; font-weight: 600; text-align: left; cursor: pointer; }
.cst-botcard-add:hover { border-color: var(--ink-soft); color: var(--ink); }
.cst-botcard-add svg { width: 16px; height: 16px; flex: none; }
.cst-botcard-add small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-faint); }
.cst-bottoken { margin-top: 12px; }
.cst-bottoken[hidden] { display: none; }
.cst-field .cst-bottoken-cancel { height: auto; margin: 0; padding: 0; border: 0; background: none; color: var(--ink-soft); font-size: 12px; font-weight: 500; text-decoration: underline; cursor: pointer; }
.cst-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; }
.cst-link-label { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cst-link-name { min-width: 0; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cst-addlink-form input[type=text] { flex: 1; min-width: 0; }

/* Форма (у .cst-modal) */
.cst-photo-picker { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; margin: 0 0 18px; }
.cst-photo-picker input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cst-photo-preview {
    position: relative; width: 72px; height: 72px; border-radius: 20px; overflow: hidden;
    background: var(--ink); color: var(--lime);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 700;
}
.cst-photo-preview img { width: 100%; height: 100%; object-fit: cover; }
.cst-photo-badge {
    position: absolute; right: -2px; bottom: -2px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--lime); color: var(--lime-ink); display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--panel);
}
.cst-photo-badge svg { width: 12px; height: 12px; }
.cst-photo-hint { font-size: 12px; color: var(--ink-faint); }

.cst-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; margin-bottom: 14px; }
/* Форма консультанта (консультанти.php): ширша панель, фото поруч з іменем, поля парами -- щоб форма не росла вниз. Підпис фото лишається для скрінрідера, але не займає рядка. */
.cst-modal-panel.cst-wide { width: 640px; }
.cst-identity { display: grid; grid-template-columns: auto 1fr 1fr; gap: 12px; align-items: end; margin-bottom: 14px; }
.cst-identity .cst-photo-picker { margin: 0; }
.cst-identity .cst-photo-preview { width: 56px; height: 56px; border-radius: 16px; font-size: 22px; }
.cst-identity .cst-photo-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cst-identity .cst-field { margin-bottom: 0; }
.cst-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cst-field .cst-label-row label.cst-inline-check { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 400; color: var(--ink-soft); cursor: pointer; }
.cst-field .cst-inline-check input { width: 16px; height: 16px; padding: 0; margin: 0; border-radius: 4px; }
.cst-modal-panel.cst-wide .cst-field textarea { min-height: 58px; }
@media (max-width: 560px) { .cst-identity { grid-template-columns: auto 1fr; } .cst-identity .cst-field:last-child { grid-column: 1 / -1; } .cst-row2 { grid-template-columns: 1fr; } }
.cst-row2 .cst-field { margin-bottom: 0; }

.cst-field { margin-bottom: 14px; }
/* Підпис поля -- лише звичайні label, НЕ перемикач: .cst-toggle теж <label> усередині .cst-field, а
   ".cst-field label" (0,1,1) сильніша за ".cst-toggle" (0,1,0) і мовчки віддавала перемикачу
   display:block та відступ знизу -- доріжка стискалась у нуль, чорна кулька висіла посеред поля, а
   підписи сусідніх полів роз'їжджались по висоті (пітфол 3, той самий механізм, що з button). */
.cst-field label:not(.cst-toggle) { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; }
.cst-field input, .cst-field textarea {
    width: 100%; font-family: inherit; border: 1px solid var(--line); background: var(--field);
    border-radius: 12px; padding: 10px 13px; font-size: 14px; color: var(--ink);
}
.cst-field textarea { min-height: 72px; resize: vertical; }
.cst-field input:focus, .cst-field textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.cst-prefix-group { display: flex; align-items: center; background: var(--field); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.cst-prefix-group span { padding: 0 0 0 13px; color: var(--ink-faint); font-size: 14px; }
.cst-prefix-group input { border: none; background: none; padding-left: 4px; }
.cst-prefix-group input:focus { background: none; border: none; }
.cst-prefix-group:focus-within { border-color: var(--ink); }

/* Перемикач як поле: рамка, фон і висота (40px) такі самі, як в інпута поруч, тому пара полів у рядку
   читається як два поля однакової ваги, а не "інпут і сирота". input[type=checkbox] у селекторі --
   інакше глобальне "label input[type=checkbox]" (width:auto; margin-right) перебиває розміри. */
.cst-toggle {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; height: 40px; margin: 0; box-sizing: border-box; cursor: pointer;
    border: 1px solid var(--line); background: var(--field); border-radius: 12px; padding: 0 13px;
}
.cst-toggle input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.cst-toggle-state { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
/* .is-on -- клас на .cst-toggle (перемикається інлайновим onchange у розмітці), НЕ
   input:checked ~ .cst-toggle-track. На живому деплої останнє давало "заклинений" lime
   background-color, що не повертався назад на сірий після зняття чекбокса -- підтверджено
   через .matches(): CSS-двигун коректно переставав матчити :checked-правило, а
   getComputedStyle все одно повертав lime (тільки для властивості з transition; сусідній
   .cst-toggle-state.color без transition оновлювався миттєво й правильно). Явний клас
   обходить це повністю -- той самий підхід, що й closeCstModal() замість dialog "close". */
.cst-toggle.is-on .cst-toggle-state { color: var(--lime-ink); }
.cst-toggle-track { flex-shrink: 0; width: 40px; height: 24px; border-radius: 999px; background: rgba(20,20,15,0.15); position: relative; transition: background-color .15s; }
.cst-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.cst-toggle.is-on .cst-toggle-track { background: var(--lime); }
.cst-toggle.is-on .cst-toggle-track::after { transform: translateX(16px); background: var(--ink); }

.cst-submit {
    width: 100%; height: 44px; margin: 4px 0 0; padding: 0 13px; background: var(--ink); color: var(--lime); border: none; border-radius: 12px;
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 14.5px; cursor: pointer;
}
.cst-submit:hover { opacity: 0.9; }

/* Видимий фокус із клавіатури -- один вигляд для всіх кнопок, посилань і полів-перемикачів сторінки:
   2px ink із відступом (як системне кільце, але однакове в усіх браузерах). Поля вводу мають власний
   стан фокусу вище (рамка ink і білий фон). Перемикач і вибір фото ховають справжній input, тож
   кільце малюється на їхній обгортці, коли фокус на input прийшов саме з клавіатури. */
.consultants-page :is(a, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cst-toggle:has(input:focus-visible), .cst-photo-picker:has(input:focus-visible) .cst-photo-preview { outline: 2px solid var(--ink); outline-offset: 2px; }
.cst-modal-panel:focus { outline: none; }

/* Попап (<dialog>) -- окремий центрований простір для форми, не шторка збоку (2026-09-13,
   свідома зміна: раніше .cst-drawer-inner фіксувалась до правого краю на всю висоту, тепер
   .cst-modal-panel -- компактна картка по центру екрана). dialog сам займає весь viewport
   (прозорий, без рамки) і через flex центрує видиму картку -- звідси й "клік по фону = клік по
   dialog безпосередньо" в JS (ціль кліку -- сам dialog, не нащадок .cst-modal-panel).

   display:flex ОБОВ'ЯЗКОВО лише під [open] -- без цього застереження клас .cst-modal
   (специфічність 0,1,0) перебиває нативний UA-стиль "dialog:not([open]){display:none}"
   (0,0,1 з псевдокласом) і показує попап взагалі завжди, навіть коли showModal() ще не
   викликали -- перевірено наживо на цій самій сторінці (gradient-mesh-spotlight, пітфол 9),
   той самий ризик лишається й для нової розмітки. */
.cst-modal:not([open]) { display: none; }
.cst-modal[open] {
    margin: 0; padding: 24px; border: none; background: transparent;
    width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
    display: flex; align-items: center; justify-content: center;
}
.cst-modal::backdrop { background: rgba(20,20,15,0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
/* ЄДИНИЙ СКРОЛ ПОПАПІВ (25.09, вимога: один скрол, без некрасивої смуги): панель сама НЕ гортається (overflow: hidden), шапка (.cst-modal-head)
   і низ (.cst-modal-foot) стоять на місці, гортається лише .cst-modal-body, а його висоту віддає flex (min-height: 0), без жодних
   підрахунків скриптом. Смуга прокрутки прихована (як у застосунку), про "є ще нижче" каже край, що м'яко тане (assets/js/admin-scrollfade.js
   ставить data-fade на елемент із класом scroll-fade). Раніше overflow-y: auto був на самій панелі, і нативна смуга вилазила за
   заокруглений кут. Будь-який новий попап (dialog.cst-modal) будується так само. */
.cst-modal-panel {
    width: 520px; max-width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden;
    background: var(--panel); backdrop-filter: blur(28px) saturate(170%); -webkit-backdrop-filter: blur(28px) saturate(170%);
    border: 1px solid rgba(20,20,15,0.08); border-radius: 26px;
    box-shadow: 0 28px 70px rgba(20,20,15,0.24), 0 6px 18px rgba(20,20,15,0.1);
    padding: 0; animation: cstModalIn 0.24s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes cstModalIn { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.cst-modal-head { display: flex; align-items: center; gap: 12px; flex: none; padding: 30px 30px 18px; }
.cst-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 30px 26px; scrollbar-width: none; -ms-overflow-style: none; }
.cst-modal-body::-webkit-scrollbar { display: none; }
.cst-modal-foot { flex: none; padding: 14px 30px 26px; border-top: 1px solid var(--line); }
.cst-modal-foot .cst-submit { margin: 0; }
/* Край, що тане: показуємо лише там, де справді є що гортати (скрипт ставить data-fade = top, bottom чи both). */
.scroll-fade[data-fade="bottom"] { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 34px)), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 34px)), transparent); }
.scroll-fade[data-fade="top"] { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade, 34px)); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade, 34px)); }
.scroll-fade[data-fade="both"] { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade, 34px), #000 calc(100% - var(--fade, 34px)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade, 34px), #000 calc(100% - var(--fade, 34px)), transparent); }
.cst-modal-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 50%; background: var(--lime); color: var(--lime-ink);
}
.cst-modal-icon svg { width: 18px; height: 18px; }
.cst-modal-head h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700; margin: 0; flex: 1; }
.cst-modal-close {
    width: 30px; height: 30px; padding: 0; margin: 0; border: none; border-radius: 50%; flex-shrink: 0;
    background: rgba(20,20,15,0.06); color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.cst-modal-close svg { width: 13px; height: 13px; }
.cst-modal-close:hover { background: var(--ink); color: var(--lime); }
@media (prefers-reduced-motion: reduce) { .cst-modal-panel { animation: none; } }
@media (max-width: 560px) {
    .cst-modal[open] { padding: 12px; }
    .cst-modal-panel { border-radius: 20px; }
    .cst-modal-head { padding: 24px 20px 14px; }
    .cst-modal-body { padding: 4px 20px 20px; }
    .cst-modal-foot { padding: 12px 20px 20px; }
}

/* Кнопка-посилання в попапі каналів («Оновити список»). Явні height і margin, як у решти кнопок цієї
   сторінки: це посилання, тож глобальне button-правило його не чіпає, але поруч стоять справжні
   button, і висоти мають збігатись. */
.cst-textslink {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 12px 0 0; padding: 0 14px;
    box-sizing: border-box; border-radius: 10px; border: 1px solid var(--line); background: var(--field);
    color: var(--ink); font-size: 12.5px; font-weight: 700; text-decoration: none;
}
.cst-textslink:hover { background: var(--ink); color: var(--lime); text-decoration: none; }

/* Список чатів, де є бот (попап ?channels=ID на consultants.php): у вузьку картку він не влазить, тож
   живе в .cst-modal, як і форма консультанта. Рядок списку -- поле з тим самим фоном і рамкою, що
   .cst-linkfield, кнопки -- .cst-copybtn цієї ж сторінки. Підключений зараз канал підсвічено lime. */
.cst-chan-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.cst-chan-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); background: var(--field); border-radius: 12px; }
.cst-chan-item.is-current { background: rgba(199,244,100,0.18); border-color: rgba(53,71,14,0.28); }
.cst-chan-item form { margin: 0; flex-shrink: 0; }
.cst-chan-pick { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; margin: 0; cursor: pointer; }
.cst-chan-pick input[type=radio] { width: 18px; height: 18px; margin: 0; padding: 0; flex: none; accent-color: var(--ink); }
.cst-chan-pick .cst-chan-title, .cst-chan-pick .cst-chan-sub { display: block; }
.cst-chan-item .cst-badge { flex-shrink: 0; }
.cst-chan-info { flex: 1; min-width: 0; }
.cst-chan-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.cst-chan-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; line-height: 1.4; }
.cst-chan-sub.is-warn { color: #B8291F; }
.cst-chan-note, .cst-chan-hint { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; }
.cst-chan-hint { font-size: 12px; color: var(--ink-faint); margin-top: 14px; }

/* ============================================================================
   consultant_texts.php -- свої тексти й картинки одного консультанта. Той самий каркас, що
   consultants.php: обгортка .consultants-page дає токени й меш, тут лише власні класи з
   префіксом ctx. Кожне повідомлення -- <details> (згорнутий, поки нічого не замінено), усередині
   одна форма без вкладених форм; "Зберегти" і "Повернути загальний" -- дві submit-кнопки
   з різним value. Стан вибору картинки -- явний атрибут data-mode і клас is-on, не :checked. */
.ctx-back {
    display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px;
    font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
.ctx-back:hover { color: var(--ink); text-decoration: none; }
.ctx-back svg { width: 12px; height: 12px; transform: rotate(90deg); }

.ctx-who { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; }
.ctx-who-photo { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.ctx-who-initial {
    display: flex; align-items: center; justify-content: center; background: var(--ink); color: var(--lime);
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 17px;
}
.ctx-who-name { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-weight: 700; }
.ctx-who-meta { font-size: 12.5px; color: var(--ink-soft); }
.ctx-ok {
    display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px;
    background: var(--lime); color: var(--lime-ink); font-size: 13.5px; font-weight: 700;
}

.ctx-group { max-width: 900px; margin-bottom: 18px; padding: 22px 26px; }
.ctx-group-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; }

.ctx-item { border-top: 1px solid var(--line); }
.ctx-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.ctx-item summary::-webkit-details-marker { display: none; }
.ctx-item-title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; }
.ctx-item .cst-badge { margin-top: 0; white-space: nowrap; }
/* Позначка "показується загальна картинка": у цього повідомлення є картинка, а консультантка ще не задала свою. */
.ctx-general-pic { flex-shrink: 0; font-size: 11.5px; font-weight: 600; color: var(--ink-faint); white-space: nowrap; }
.ctx-caret { display: inline-flex; flex-shrink: 0; color: var(--ink-faint); transition: transform .15s; }
.ctx-caret svg { width: 14px; height: 14px; }
.ctx-item[open] .ctx-caret { transform: rotate(180deg); }
.ctx-when { font-size: 12.5px; color: var(--ink-faint); margin: -4px 0 12px; }

.ctx-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 8px; }
.ctx-default { background: var(--field); border-radius: 14px; padding: 12px 14px; margin: 0 0 16px; }
.ctx-default .ctx-label { margin-bottom: 6px; }
.ctx-default-body { display: flex; gap: 12px; align-items: flex-start; }
.ctx-default-body p { margin: 0; min-width: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); overflow-wrap: anywhere; }
.ctx-thumb { width: 72px; height: 72px; flex-shrink: 0; border-radius: 12px; object-fit: contain; background: rgba(20,20,15,0.05); }
.ctx-hint { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--ink-faint); }

.ctx-media { margin: 0 0 16px; }
.ctx-opts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }

/* ============================================================================
   nutrition.php -- "Gradient Mesh Spotlight" (2026-09-23), узгоджений глобальний
   дизайн адмінки (той самий, що на consultants.php і consultant_schedule.php).
   НЕ bespoke-ребілд з нуля: ця сторінка вже має багато готового JS (сортування й
   пошук у таблиці -- assets/js/admin-table.js, попапи -- openNutModal у самому
   nutrition.php, day-tracker, перемикачі), тож іде шляхом, який сам скіл описує
   саме для таких сторінок -- лишаємо всі наявні класи (.card/.kpi-card/.badge/
   .avatar/.toggle/...) і структуру, перефарбовуємо ЇХ під .nut-page замість
   перейменування розмітки. Семантичні кольори (--green/--orange/--red на бейджах,
   day-dot, toggle) НЕ чіпаємо -- лайм тут окремий бренд-акцент, не заміна їм.
   ============================================================================ */
.nut-page {
    --ink: #14140F; --ink-soft: rgba(20,20,15,0.62); --ink-faint: rgba(20,20,15,0.38);
    --lime: #C7F464; --lime-ink: #35470E; --line: rgba(20,20,15,0.10);
    --panel: rgba(255,255,255,0.88); --field: rgba(20,20,15,0.035); --r: 22px;
    position: relative; margin: -22px -28px; padding: 32px 40px 60px;
    min-height: 100vh; overflow: hidden; background: #FBFBF7; color: var(--ink);
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}
.nut-mesh {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 10% 8%, rgba(199, 244, 100, 0.20), transparent 50%),
        radial-gradient(circle at 92% 4%, rgba(191, 227, 255, 0.18), transparent 50%);
    filter: blur(70px) saturate(130%);
    mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 55%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 55%);
}
/* Обгортка для ВСЬОГО контенту, крім .nut-mesh -- не ".nut-page > *" (той самий клас-селектор,
   що й у .nut-mesh, рівна специфічність, і залежно від порядку в файлі один правило "position"
   переб'є інше) -- та сама причина, що й .consultants-content/.schedule-content/.ntx-content
   на інших GMS-сторінках. Перевірено наживо: без цієї обгортки .nut-mesh рахував свою висоту
   як 0 (position з'їжджав на relative), і мешу не було видно взагалі. */
.nut-content { position: relative; z-index: 1; }

.nut-page h2, .nut-page h3, .nut-page .kpi-value { font-family: 'Bricolage Grotesque', sans-serif; letter-spacing: -0.01em; color: var(--ink); }
.nut-page .muted { color: var(--ink-soft); }
.nut-page .page-header-icon { background: var(--ink); color: var(--lime); }

.nut-page .kpi-card, .nut-page .card, .nut-page .nut-modal-panel {
    background: var(--panel); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(20,20,15,0.06); border-radius: var(--r);
    box-shadow: 0 2px 6px rgba(20,20,15,.05), 0 16px 36px rgba(20,20,15,.08);
}
.nut-page .kpi-card:hover { box-shadow: 0 4px 10px rgba(20,20,15,.06), 0 20px 44px rgba(20,20,15,.1); }
/* Дві плитки з чотирьох -- справжні <button> (відкривають попап), не div: глобальний
   button{height:44px;padding:0 22px;margin-top:18px} інакше розчавив би багаторядковий
   вміст картки (той самий пітфол 1 зі скіла) -- .kpi-card сам задає padding/фон (клас
   переважає елемент), height/margin/text-align/шрифт скидаємо явно лише тут. */
.nut-page button.kpi-card { width: 100%; height: auto; margin: 0; border: 1px solid rgba(20,20,15,0.06); text-align: left; font: inherit; color: inherit; cursor: pointer; }
/* Клікабельні числа в таблицях "Джерела"/"Спроби запису" (openNutModal) -- та сама причина, що й
   .kpi-card вище: скидаємо ВСЕ, що задає глобальний button{}, лишаючи цифру візуально такою ж, як
   була звичайним текстом, з підказкою-курсором і підкресленням при наведенні. */
.nut-page button.num-link { height: auto; margin: 0; padding: 0; border: none; border-radius: 0; background: none; font: inherit; font-variant-numeric: tabular-nums; color: inherit; cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--ink-faint); text-underline-offset: 3px; }
.nut-page button.num-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.nut-page .kpi-card .kpi-icon { background: var(--field); color: var(--ink); }
.nut-page .kpi-card.ok .kpi-icon { background: var(--green-bg); color: var(--green-text); }
.nut-page .kpi-card.warn .kpi-icon { background: var(--orange-bg); color: var(--orange-text); }
.nut-page .kpi-card.danger .kpi-icon { background: var(--red-bg); color: var(--red-text); }
.nut-page .kpi-label { color: var(--ink-faint); }

.nut-page table th { color: var(--ink-faint); border-bottom: 1px solid var(--line); }
.nut-page table td { border-bottom: 1px solid var(--line); }
.nut-page table tbody tr:hover td { background: var(--field); }
.nut-page table tfoot td { background: var(--field); border-top: 1px solid var(--line); border-bottom: none; }
.nut-page .empty-row { color: var(--ink-faint); }

.nut-page .avatar { background: var(--ink); color: var(--lime); }
.nut-page .person-row { border-bottom: 1px solid var(--line); }
.nut-page a.person-row:hover { background: var(--field); }
.nut-page .person-row .person-meta { color: var(--ink-soft); }
.nut-page .cell-sub { color: var(--ink-faint); }
.nut-page .nut-risk-sub { color: var(--ink-soft); }

.nut-page .table-toolbar input[type=search] { background: var(--field); border: 1px solid var(--line); color: var(--ink); }
.nut-page .tabs-nav { border-bottom: 1px solid var(--line); }
.nut-page .tab-btn.active { color: var(--ink); }
.nut-page .tab-btn.active::after { background: var(--lime); }

.nut-page .nut-modal-close { background: rgba(20,20,15,0.06); color: var(--ink); }
.nut-page .nut-modal-close:hover { background: var(--ink); color: var(--lime); }
.nut-page .nut-modal-panel { box-shadow: 0 28px 70px rgba(20,20,15,0.24), 0 6px 18px rgba(20,20,15,0.1); }
.nut-page .day-dot.today { box-shadow: 0 0 0 2px var(--ink); }

/* Ростер "Усі учасниці" -- ім'я досі мало ту саму вагу, що звичайний текст комірки (усюди
   інде на сторінці, .person-row/.person-name, ім'я -- 600 і 15px, тут же губилось поруч зі
   статусом/тегами); "Активна" і "Тиждень" -- перемикач і сім крапок сиділи притиснуті до
   лівого краю комірки, а не по центру, як решта компактних елементів у таблиці; крапки
   тижня -- ті самі 20px, що й на особовій картці (nutv-page), не менші 18px тут-таки. */
#allProfilesTable td:nth-child(2) a { font-weight: 600; font-size: 15px; }
#allProfilesTable td:nth-child(4), #allProfilesTable td:nth-child(5) { text-align: center; }
#allProfilesTable .day-tracker { justify-content: center; }
#allProfilesTable .day-dot { width: 20px; height: 20px; }
#allProfilesTable .day-dot.done, #allProfilesTable .day-dot.missed { box-shadow: 0 1px 2px rgba(20,20,15,.15); }
/* .cst-toggle базово -- поле форми 40px з рамкою й фоном (nutrition_warmup.php, для картки налаштувань);
   у клітинці таблиці досить голого трека+повзунка, той самий підхід, що й .wu-step-on.cst-toggle там-таки. */
#allProfilesTable .cst-toggle { display: inline-flex; width: auto; height: 24px; padding: 0; border: none; background: none; }
.ctx-opt {
    position: relative; display: inline-flex; align-items: center; height: 36px; margin: 0; padding: 0 14px;
    box-sizing: border-box; border-radius: 999px; border: 1px solid var(--line); background: var(--field);
    font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.ctx-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ctx-opt.is-on { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.ctx-photo { display: flex; align-items: center; gap: 12px; }
.ctx-media:not([data-mode="photo"]) .ctx-photo { display: none; }
.ctx-file { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; min-width: 0; cursor: pointer; }
.ctx-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ctx-file-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 10px;
    background: rgba(20,20,15,0.06); color: var(--ink); font-size: 12.5px; font-weight: 700;
}
.ctx-file-btn svg { width: 14px; height: 14px; }
.ctx-file:hover .ctx-file-btn { background: var(--ink); color: var(--lime); }
.ctx-file-name { font-size: 12px; color: var(--ink-faint); overflow-wrap: anywhere; }

.ctx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.ctx-save, .ctx-reset {
    height: 40px; margin: 0; padding: 0 20px; border-radius: 12px; cursor: pointer;
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 14px;
}
.ctx-save { background: var(--ink); color: var(--lime); border: none; }
.ctx-save:hover { opacity: 0.9; }
.ctx-reset { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.ctx-reset:hover { color: #B8291F; border-color: #B8291F; }
@media (max-width: 560px) { .ctx-group { padding: 18px 16px; } .ctx-default-body { flex-direction: column; } }

/* ============================================================================
   consultant_schedule.php -- Gradient Mesh Spotlight, той самий каркас/токени, що
   .consultants-page. Свої класи з префіксами sch і sched -- не перевикористовує
   cst-класи, ті заскоуплені під consultants.php і нічого не значать поза ним.

   Увага при редагуванні цього блоку коментарів: попередня версія цього коментаря
   писала два імена класів через зірочку й похилу риску одне за одним без пробілу,
   і ці два символи поруч самі стали закриваючим маркером коментаря в CSS --
   решта тексту коментаря виявилась вже поза коментарем і зламала наступний
   селектор .schedule-page, через що браузер відкинув усе його тіло (зниклі
   --токени, прозорі картки, лаймові вікна без кольору). Той самий клас бага вже
   траплявся раніше в цьому файлі (див. git log). Тримай зірочку й похилу риску
   подалі одна від одної в CSS-коментарях. */
.schedule-page {
    --ink: #14140F; --ink-soft: rgba(20,20,15,0.62); --ink-faint: rgba(20,20,15,0.38);
    --lime: #C7F464; --lime-ink: #35470E; --line: rgba(20,20,15,0.10);
    --panel: rgba(255,255,255,0.88); --field: rgba(20,20,15,0.035); --r: 20px;
    position: relative; margin: -22px -28px; padding: 32px 40px 60px;
    min-height: 100vh; overflow: hidden; background: #FBFBF7; color: var(--ink);
    font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
}
.schedule-mesh {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 10% 8%, rgba(199, 244, 100, 0.20), transparent 50%),
        radial-gradient(circle at 92% 4%, rgba(191, 227, 255, 0.18), transparent 50%);
    filter: blur(70px) saturate(130%);
    mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 55%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 55%);
}
.schedule-content { position: relative; z-index: 1; }
.schedule-page .sch-intro { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 22px; }
.schedule-page .sch-intro a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--lime); }

.sch-picker { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; }
.sch-picker label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.sch-picker select { width: auto; border: 1px solid var(--line); background: var(--field); border-radius: 10px; padding: 8px 12px; font-size: 13.5px; color: var(--ink); font-family: inherit; }
/* Той самий керований .csel, що й у .sch-add-window вище -- select тут теж підміняється. */
.sch-picker .csel { width: auto; min-width: 220px; max-width: 320px; }
.sch-picker .csel-trigger {
    width: auto; height: auto; margin: 0; padding: 8px 12px; font-size: 13.5px;
    border: 1px solid var(--line); background: var(--field); border-radius: 10px; color: var(--ink);
}

.sch-panel-shell {
    background: var(--panel);
    backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(20,20,15,0.06);
    border-radius: var(--r);
    box-shadow: 0 2px 6px rgba(20,20,15,0.05), 0 16px 36px rgba(20,20,15,0.08);
    padding: 24px 26px;
}
.sch-panel-shell h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15.5px; font-weight: 700; margin: 0 0 4px; }
.sch-panel-note { font-size: 12px; color: var(--ink-faint); margin: 0 0 10px; line-height: 1.5; }
.sch-count { display: inline-flex; font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.sch-panel-head { margin-bottom: 16px; }
.sch-week-nav { display: flex; align-items: center; gap: 14px; margin: 6px 0 10px; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; }
.sch-week-nav .link-btn { padding: 0; }

.sched-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.sched-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.sched-legend-swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
.sched-legend-swatch.avail { background: rgba(199,244,100,0.35); border: 1px dashed rgba(53,71,14,0.45); }
.sched-legend-swatch.booked { background: var(--lime); }
.sched-legend-swatch.blocked {
    background-image: repeating-linear-gradient(135deg, rgba(184,41,31,0.35) 0, rgba(184,41,31,0.35) 2px, transparent 2px, transparent 5px);
    border: 1px solid rgba(184,41,31,0.3);
}

/* Один ряд, 3 колонки: "Хто записався" (вузько, зі скролом) -- календар (широко) --
   заблоковані дати + налаштування вікон, стовпчиком (.sch-col3). Без align-items:start, щоб
   грід за замовчуванням (stretch) розтягнув перший стовпець під ту саму висоту, що й календар. */
.sch-row1 { display: grid; grid-template-columns: 300px minmax(0,1fr) 300px; gap: 20px; }
.sch-col3 { display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 1300px) {
    .sch-row1 { grid-template-columns: 300px minmax(0,1fr); }
    .sch-col3 { grid-column: 1 / -1; flex-direction: row; }
    .sch-col3 > .sch-panel-shell { flex: 1; }
}
@media (max-width: 900px) {
    .sch-row1 { grid-template-columns: 1fr; }
    .sch-col3 { flex-direction: column; }
}

.sch-booked-list { display: flex; flex-direction: column; min-height: 0; }
.sch-booked-list h3 { flex-shrink: 0; }
.sch-booked-filter { flex-shrink: 0; margin: 4px 0 10px; }
/* max-height власний, не залежний від grid stretch сусідньої колонки (раніше розтягувався лише
   на ширину ≥900px, де "Хто записався"/календар -- сусіди в одному рядку грід; нижче 900px
   .sch-row1 стає одноколонковим, сусіда для stretch нема, і список просто ріс углиб сторінки).
   Той самий рецепт, що .nut-scroll -- max-height + прихована смуга + край, що тане замість неї
   (assets/js/admin-scrollfade.js ставить data-fade, маски -- загальні .scroll-fade[data-fade=...]). */
.sch-booked-scroll { flex: 1 1 auto; min-height: 0; max-height: 480px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: none; -ms-overflow-style: none; }
.sch-booked-scroll::-webkit-scrollbar { display: none; }
.sch-booked-row { padding: 10px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.sch-booked-row:first-child { border-top: none; }
.sch-booked-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.sch-booked-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; }
.sch-booked-name { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--lime); overflow-wrap: anywhere; }
.sch-booked-nick { font-size: 11px; color: var(--ink-faint); text-decoration: none; }
.sch-booked-nick:hover { color: var(--ink-soft); text-decoration: underline; }
.sch-booked-meta { color: var(--ink-soft); font-size: 11.5px; }
.sch-booked-actions { margin-top: 6px; display: flex; gap: 6px; }
.sch-booked-actions form { margin: 0; display: block; }
/* Кругла кнопка-іконка дії над записом: свої height, padding і margin (глобальна button їх задає, див. скіл GMS), підказка в title. */
.sch-act {
  width: 30px; height: 30px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid rgba(20, 20, 15, 0.08);
  background: rgba(255, 255, 255, 0.7); color: var(--label-secondary); box-shadow: none;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s;
}
.sch-act svg { width: 15px; height: 15px; display: block; }
.sch-act:hover { background: var(--fill-secondary); color: var(--label-primary); opacity: 1; }
.sch-act-ok:hover { background: var(--green-bg); color: var(--green-text); }
.sch-act-bad:hover { background: var(--red-bg); color: var(--red-text); }
.sch-act.is-on { background: var(--green-bg); color: var(--green-text); border-color: transparent; }
/* Позначка «в особисті» в рядку запису: підтверджена консультанткою, лише натиснула кнопку, ще не писала */
.sch-booked-dm { margin-top: 2px; font-size: 11.5px; }
.sch-dm { font-weight: 700; }
.sch-dm-ok { color: var(--green-text); }
.sch-dm-click { color: var(--orange-text); }
.sch-dm-none { color: var(--red-text); }

/* Тижневий календар: колонка з годинами + 7 днів поточного тижня. Два шари поверх годинної
   сітки -- .sched-avail (блідий, щотижневий шаблон, редагується) і .sched-window (суцільний
   лайм, реальне бронювання цього тижня, лише для перегляду -- дії (відмітити/звільнити)
   лишаються у списку "Хто записався" зліва). */
.sched-cal { display: grid; grid-template-columns: 46px repeat(7, 1fr); gap: 1px; background: var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.sched-cal-corner, .sched-cal-hd {
    background: rgba(255,255,255,0.7); font-size: 11px; font-weight: 700; text-align: center;
    padding: 8px 2px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em;
}
.sched-cal-hd-date { display: block; font-size: 9.5px; font-weight: 600; text-transform: none; color: var(--ink-faint); margin-top: 1px; letter-spacing: 0; }
/* Сьогодні -- та сама заливка-акцент, що бейджі/обраний рядок у попапах (lime bg + lime-ink text),
   а не окремий новий колір. Колонка нижче лишається білою з ЛЕГКИМ лаймовим відтінком -- суцільний
   лайм на всю висоту сітки конкурував би з пігулками вікон/бронювань усередині. */
.sched-cal-hd.is-today { background: var(--lime); color: var(--lime-ink); }
.sched-cal-hd.is-today .sched-cal-hd-date { color: var(--lime-ink); }
.sched-cal-col.is-today { background-color: rgba(199,244,100,.10); }
.sched-cal-times { background: rgba(255,255,255,0.5); }
.sched-cal-time {
    height: 32px; font-size: 10px; color: var(--ink-faint); text-align: right; padding: 0 6px;
    display: flex; align-items: flex-start; justify-content: flex-end; line-height: 1;
    transform: translateY(-5px);
}
.sched-cal-col {
    position: relative; background: #fff;
    background-image: repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 32px);
}
/* Заблокований день -- діагональна штриховка ДРУГИМ шаром фону поверх годинних ліній
   (два background-image через кому: перший малюється зверху, другий -- під ним). */
.sched-cal-col.is-blocked {
    background-image:
        repeating-linear-gradient(135deg, rgba(184,41,31,0.10) 0, rgba(184,41,31,0.10) 3px, transparent 3px, transparent 9px),
        repeating-linear-gradient(to bottom, var(--line) 0, var(--line) 1px, transparent 1px, transparent 32px);
}
.sched-cal-empty {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    font-size: 10px; color: var(--ink-faint); white-space: nowrap;
}
/* .sched-avail -- <a>, не <div>: весь блок є кліком на редагування/видалення (форма нижче,
   #sch-window-form), а не тільки маленька кнопка -- звідси cursor/text-decoration override. */
.sched-avail {
    position: absolute; left: 3px; right: 3px; min-height: 18px; z-index: 1;
    background: rgba(199,244,100,0.35); border: 1px dashed rgba(53,71,14,0.45);
    color: var(--lime-ink); border-radius: 8px;
    font-size: 10px; font-weight: 700; padding: 3px 5px;
    display: flex; align-items: center;
    overflow: hidden; cursor: pointer; text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.sched-avail:hover { background: rgba(199,244,100,0.55); border-color: var(--lime-ink); text-decoration: none; }
.sched-avail.is-editing { background: var(--lime); border-style: solid; box-shadow: 0 0 0 2px rgba(53,71,14,0.35); }
/* Закрита версія вікна на минулих днях: лише історія, без кліку й підсвітки. */
.sched-avail.is-retired { cursor: default; pointer-events: none; }
.sched-window {
    position: absolute; left: 3px; right: 3px; min-height: 18px; z-index: 2;
    background: var(--lime); color: var(--lime-ink); border-radius: 8px;
    box-shadow: 0 1px 3px rgba(20,20,15,0.18);
    font-size: 10px; font-weight: 700; padding: 3px 5px;
    display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sched-window > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Лінія поточного часу -- той самий червоний, що вже позначає "заблоковано"/danger по всій адмінці
   (#B8291F), не новий колір: universally впізнавана мова "зараз" з будь-якого календаря, і водночас
   явно інша форма (тонка лінія + крапка), ніж діагональне штрихування .is-blocked, тож "сьогодні
   заблоковано" й "зараз" не плутаються, навіть коли обидва в одній колонці. top/display рахує JS
   (setInterval у <script> сторінки) -- display:none за замовчуванням, щоб до першого tick() лінія не
   блимала на top:0. */
.sched-now-line { position: absolute; left: 0; right: 0; z-index: 4; pointer-events: none; border-top: 2px solid #B8291F; display: none; }
.sched-now-dot { position: absolute; left: -4px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #B8291F; box-shadow: 0 0 0 2px #fff; }
.sched-now-time { position: absolute; right: 2px; top: -15px; font-size: 9px; font-weight: 700; line-height: 14px; color: #B8291F; background: #fff; padding: 0 3px; border-radius: 4px; }

/* Форми "Заблокувати дату" / "Налаштування вікон" -- підписані поля стовпчиком, та сама мова,
   що й .cst-field на consultants.php (label зверху, повноширинний контрол), а не самі поля
   впритул без підпису -- вузька 300px колонка не мала де це прочитати. */
.sch-add-window, .sch-add-block { display: flex; flex-direction: column; gap: 12px; }
.sch-field label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 5px; }
.sch-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sch-field-row .sch-field { margin: 0; }

/* Глобальне input[type=time]{width:100%} (admin.css, форми) інакше розтягує кожне поле
   на весь рядок і ламає flex-wrap у стовпчик -- тут явно фіксована ширина замість 100%. */
.sch-add-window select, .sch-add-window input, .sch-add-block input {
    width: 100%; border: 1px solid var(--line); background: var(--field); border-radius: 10px;
    padding: 9px 11px; font-size: 13.5px; color: var(--ink); font-family: inherit;
}
/* <select>/<input type=date> тут підмінюються керованими .csel/.cdate (assets/js/admin-select.js,
   admin-date.js) -- самі input/select лишаються в DOM прихованими, стилізувати потрібно видиму
   заміну, не їх. */
.sch-add-window .csel, .sch-add-block .cdate { width: 100%; }
.sch-add-window .csel-trigger, .sch-add-block .cdate-trigger {
    width: 100%; height: auto; margin: 0; padding: 9px 11px; font-size: 13.5px;
    border: 1px solid var(--line); background: var(--field); border-radius: 10px; color: var(--ink);
}
/* height:auto -- інакше глобальний button{height:44px} (той самий винуватець, що й раніше)
   робить кнопку помітно вищою за поля поруч, хоч padding в обох однаковий.
   [type=submit] обов'язково -- без нього цей самий "button" ловив і кнопки, які admin-select.js/
   admin-date.js вставляють у ЦЮ Ж форму (.csel-trigger, .cdate-trigger, .cdate-nav, .cdate-day),
   перебиваючи їхній власний вигляд ink+lime пігулкою й ламаючи розмір/форму (звідси чорний
   квадрат замість тригера дати й гігантські чорні кружечки навігації місяця). */
.sch-add-window button[type=submit], .sch-add-block button[type=submit] {
    width: 100%; height: auto; border: none; background: var(--ink); color: var(--lime); border-radius: 10px;
    padding: 11px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; margin: 4px 0 0;
}
.sch-add-window button[type=submit]:hover, .sch-add-block button[type=submit]:hover { opacity: 0.88; }
.sch-add-block { margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line); }

.sch-blocked-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.sch-blocked-row:first-of-type { border-top: none; }

.sch-edit-actions[hidden] { display: none; }
.sch-edit-actions { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }

/* Позначка «накладка» у списку записів (сама плашка підключення тепер на nutrition_settings.php, .nset-sch-flash). */
.sch-clash { color: var(--red-text); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ============================================================================
   nutrition_view.php -- Gradient Mesh Spotlight (2026-09-24), узгоджений глобальний дизайн адмінки. Обгортка
   class="nut-page nutv-page": токени, скляні картки, таби, таблиці й аватар беруться з блоку nutrition.php вище
   (.nut-page), тут лише те, чого там нема -- шапка учасниці, графік ваги, "Профіль" з ручними правками, воронка, чат --
   і виправлення під цю сторінку. Як і на nutrition.php: лишаємо наявні класи й розмітку та перефарбовуємо їх під
   обгорткою (сторінка з готовим JS: таби, сортування таблиці, вибір консультанта). Семантичні кольори (--green,
   --orange, --red на бейджах, днях, барах) НЕ чіпаємо -- лайм тут окремий бренд-акцент, не заміна їм.
   ============================================================================ */

/* overflow: clip, а не hidden з .nut-page: hidden робить обгортку скрол-контейнером, і чат-колонка (position: sticky) перестала б
   липнути до вікна. Меш так само обрізається по краях сторінки. */
.nut-page.nutv-page { overflow: clip; }
.nutv-page .card { padding: 22px 24px; }

/* Верхній рядок: назад до списку + ручна відправка картки в канал */
.nutv-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 18px; }
.nutv-topbar form { margin: 0; }
.nutv-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.nutv-back:hover { color: var(--ink); text-decoration: none; }
.nutv-back svg { width: 13px; height: 13px; transform: rotate(180deg); }
.nutv-btn-ghost {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 18px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.nutv-btn-ghost svg { width: 14px; height: 14px; }
.nutv-btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--lime); opacity: 1; }

/* Заголовок картки: іконка + назва, справа за потреби ще щось */
.nutv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.nutv-card-head h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 17px; }
.nutv-card-head h3 svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--ink); }
.nutv-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; }
.nutv-tab-lead { margin: 0 0 14px; font-size: 13px; line-height: 1.5; }

/* Шапка учасниці: ім'я великим, під ним статуси, справа тиждень крапками, нижче -- плитки зі статистикою */
.nutv-page .profile-header { padding: 22px 24px 20px; }
.nutv-page .profile-header-top { gap: 16px; }
.nutv-page .profile-header-name { margin: 0 0 6px; font-size: 26px; font-weight: 800; }
.nutv-page .profile-header-username { font-family: 'Hanken Grotesk', sans-serif; font-size: 14px; font-weight: 500; color: var(--ink-faint); }
.nutv-page .day-dot { width: 20px; height: 20px; }
.nutv-page .client-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 18px; padding-top: 0; border-top: none; }
.nutv-page .client-stat { align-items: center; padding: 13px 8px 11px; gap: 4px; border-right: none; border-radius: 16px; background: var(--field); }
.nutv-page .client-stat-value { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 800; }
.nutv-page .client-stat-value svg { color: var(--ink); }
.nutv-page .client-stat-value.ok svg { color: var(--green); }
.nutv-page .client-stat-label { max-width: 100%; white-space: normal; text-align: center; font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-faint); }
.nutv-page .client-stat-label a { color: inherit; }
/* Вужче -- шість колонок: три плитки зверху по дві колонки, дві знизу по три, тож обидва ряди повні */
@media (max-width: 1180px) {
    .nutv-page .client-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .nutv-page .client-stat { grid-column: span 2; }
    .nutv-page .client-stat:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 640px) {
    .nutv-page .client-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nutv-page .client-stat, .nutv-page .client-stat:nth-child(n+4) { grid-column: auto; }
    .nutv-page .client-stat:last-child { grid-column: 1 / -1; }
}

/* Графік ваги (assets/js/admin-weight-chart.js -- порт графіка з Mini App): Факт суцільною, План пунктиром до цілі */
.nutv-weight-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.nutv-stat { display: flex; flex-direction: column; gap: 1px; }
.nutv-stat small { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.nutv-stat b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; color: var(--ink); }
.nutv-weight { display: flex; flex-direction: column; }
.wc { --wc-plan: rgba(20, 20, 15, 0.5); flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.wc:empty { min-height: 190px; }
.wc-plot { min-width: 0; }
.wc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wc-svg text { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; }
.wc-ref { stroke: rgba(20, 20, 15, 0.2); stroke-width: 1; stroke-dasharray: 3 4; }
.wc-fact { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.wc-plan { fill: none; stroke: var(--wc-plan); stroke-width: 2.5; stroke-dasharray: 6 4; stroke-linecap: round; }
.wc-dot { fill: var(--lime); stroke: var(--ink); stroke-width: 1.5; }
.wc-val { fill: var(--ink); font-size: 11px; font-weight: 700; }
.wc-target { fill: var(--ink-soft); font-size: 12px; font-weight: 800; }
.wc-axis { fill: var(--ink-faint); font-size: 10px; }
.wc-legend { display: flex; flex-wrap: wrap; gap: 18px; margin: 10px 0 0; }
.wc-legend-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.wc-legend-line { display: inline-block; width: 24px; height: 0; border-top: 3px solid var(--ink); border-radius: 2px; }
.wc-legend-plan { border-top-style: dashed; border-top-color: var(--wc-plan); }
.wc-caption { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.wc-caption b { color: var(--ink); font-weight: 700; }
.wc-warn { color: var(--orange-text); }
/* Порожній стан по центру картки, навіть коли вона розтягнута до висоти сусіднього блоку з профілем */
.wc-empty { margin: auto; max-width: 34ch; padding: 30px 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ink-faint); }

/* Таби: підпис, день за днем, аналіз, щоденник харчування */
.nutv-page .tabs-nav { gap: 4px; margin-bottom: 18px; }
.nutv-page .tab-btn { padding: 9px 12px; font-size: 14.5px; white-space: nowrap; }
.nutv-page .day-timeline { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.nutv-page .day-entry { border-radius: 16px; background: var(--field); }
.nutv-page .day-entry:hover { background: rgba(20, 20, 15, 0.06); }
.nutv-page .day-entry.is-today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.nutv-page .day-entry .day-num { background: #fff; font-family: 'Bricolage Grotesque', sans-serif; }
.nutv-page .day-entry .day-num.done { background: var(--green); }
.nutv-page .day-entry .day-num.missed { background: var(--red-bg); }
.nutv-page .day-entry .day-date, .nutv-page .day-entry .day-extra { color: var(--ink-soft); }
.nutv-page .insight-list { gap: 10px; }
.nutv-page .insight-item { padding: 12px 14px; border-radius: 16px; background: var(--field); }
.nutv-page .insight-date { color: var(--ink-faint); }
.nutv-page .insight-text { color: var(--ink); }
.nutv-page .fd-facts { padding: 16px 20px; border-radius: 16px; background: var(--field); }
.nutv-page .fd-facts h4, .nutv-page .fd-avg h4 { color: var(--ink-faint); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; }
.nutv-page .fd-avg .fd-table-wrap { border: 1px solid var(--line); border-radius: 16px; }
.nutv-page .fd-day { border: 1px solid var(--line); border-radius: 18px; background: transparent; }
.nutv-page .fd-day.is-today { box-shadow: inset 0 0 0 1.5px var(--ink); }
.nutv-page .fd-day-head { background: var(--field); }
.nutv-page .fd-day-sub, .nutv-page .fd-table td.t, .nutv-page .fd-table td.por, .nutv-page .fd-table td.dish small { color: var(--ink-soft); }
.nutv-page .fd-table th { color: var(--ink-faint); border-bottom: 1px solid var(--line); }
.nutv-page .fd-table tfoot td { background: var(--field); border-top: 1px solid var(--line); }
.nutv-page .fd-tech summary { color: var(--ink-soft); font-weight: 600; }
.nutv-page .fd-tech code { font-size: 12px; }

/* Консультант | Денна ціль: дві однакової висоти картки поруч */
.nutv-row { align-items: stretch; }
.nutv-consultant form { margin: 0; }
/* Шкала на всю ширину картки, а підпис і значення над нею: в один рядок (як було) шкала в вузькій картці стискалась до рисочки */
.nutv-page .metric-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; row-gap: 6px; margin-bottom: 14px; }
.nutv-page .metric-bar-row:last-child { margin-bottom: 0; }
.nutv-page .metric-bar-label { grid-area: 1 / 1; width: auto; color: var(--ink-soft); font-weight: 600; }
.nutv-page .metric-bar-value { grid-area: 1 / 2; width: auto; color: var(--ink); white-space: nowrap; }
.nutv-page .metric-bar-track { grid-area: 2 / 1 / 3 / 3; height: 9px; background: var(--field); }
.nutv-page .metric-bar-fill { background: var(--ink); }
.nutv-page .metric-bar-fill.over { background: var(--orange); }
/* Вибір консультанта -- той самий керований .csel, що й на consultant_schedule.php (.sch-picker): поле однієї висоти й вигляду з полями нижче */
.nutv-consultant .csel-trigger { height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink); font-weight: 600; }
.nutv-consultant .csel-trigger:hover { background: rgba(20, 20, 15, 0.06); }
.nutv-consultant .csel-trigger.open, .nutv-consultant .csel-trigger:focus-visible { border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.45); }

/* Верхній ряд: динаміка ваги ліворуч, профіль праворуч, картки однакової висоти. Вужче за 1360px -- один під одним */
.nutv-row-top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.nutv-page .nutv-row-top > .card { padding: 20px 22px; }
@media (max-width: 1360px) { .nutv-row-top { grid-template-columns: minmax(0, 1fr); } }

/* Профіль: компактно. Підсумок дрібними чипами (довгий підпис переноситься, а не розпирає картку), нижче ручні правки --
   сітка з підписом над рядком "поле + кнопка-іконка", усі поля й кнопки однакової висоти */
.nutv-profile .nutv-card-head { margin-bottom: 10px; }
.nutv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; }
.nutv-chip { display: inline-flex; align-items: center; max-width: 100%; min-height: 26px; box-sizing: border-box; padding: 3px 10px; border-radius: 999px; background: var(--field); font-size: 12px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.nutv-chip a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-faint); text-underline-offset: 3px; }
.nutv-edit-title { margin: 0 0 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
/* flex-wrap, а не грід: у вузькій картці по два в ряд, у широкій усі чотири, і жодне поле не розтягується на пів картки */
.nutv-edit-grid { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.nutv-edit { flex: 1 1 128px; min-width: 0; max-width: 200px; margin: 0; }
.nutv-edit label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.nutv-edit-row { display: flex; align-items: stretch; gap: 6px; }
.nutv-page .nutv-edit-row input {
    flex: 1 1 0; width: auto; min-width: 0; height: 36px; margin: 0; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.nutv-page .nutv-edit-row input:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.45); }
.nutv-set-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; margin: 0; padding: 0; box-sizing: border-box;
    border: none; border-radius: 10px; background: var(--ink); color: var(--lime); cursor: pointer;
}
.nutv-set-btn svg { width: 16px; height: 16px; }
.nutv-set-btn:hover { opacity: 0.9; }
.nutv-set-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.6); }

/* Дні щоденника харчування: смужка вкладок (стрілки лише коли всі не вміщаються), під нею один день. Крапка на вкладці -- відхилення від цілі за калоріями */
.fd-days { margin: 0 0 6px; }
.fd-strip-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 12px; }
/* width: 0 разом з flex-grow -- смужка займає лише вільне місце й НЕ передає ширину своїх вкладок предкам. Без цього 20 вкладок роздували
   грід-колонку .detail-grid (1fr на екранах до 900px) до 2000px */
.fd-strip { position: relative; flex: 1 1 0; width: 0; min-width: 0; display: flex; gap: 6px; padding: 2px; overflow-x: auto; scrollbar-width: none; }
.fd-strip::-webkit-scrollbar { display: none; }
.nutv-page .fd-tab {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    height: 46px; min-width: 88px; margin: 0; padding: 0 14px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 14px; background: var(--field); color: var(--ink);
    font-family: inherit; text-align: left; cursor: pointer;
}
.nutv-page .fd-tab:hover { background: rgba(20, 20, 15, 0.06); }
.nutv-page .fd-tab.active { border-color: var(--ink); background: var(--ink); color: var(--lime); }
.nutv-page .fd-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.6); }
.fd-tab-day { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.fd-tab-date { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.fd-tab.active .fd-tab-date { color: rgba(199, 244, 100, 0.72); }
.fd-tab-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(20, 20, 15, 0.22); }
.fd-tab.active .fd-tab-dot { background: rgba(255, 255, 255, 0.4); }
.fd-tab .fd-tab-dot.ok { background: var(--green); }
.fd-tab .fd-tab-dot.warn { background: var(--orange); }
.fd-tab .fd-tab-dot.bad { background: var(--red); }
.nutv-page .fd-arrow {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; margin: 0; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); cursor: pointer;
}
.nutv-page .fd-arrow[hidden] { display: none; }
.nutv-page .fd-arrow:disabled { opacity: 0.35; cursor: default; }
.nutv-page .fd-arrow:not(:disabled):hover { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.fd-arrow svg { width: 13px; height: 13px; }
.fd-arrow.prev svg { transform: rotate(180deg); }
.fd-pane[hidden] { display: none; }

/* Намір, який вона написала в день 0 */
.nutv-page .quote-card {
    padding: 22px 26px; border: 1px solid rgba(20, 20, 15, 0.06); border-radius: var(--r); background: var(--panel);
    box-shadow: 0 2px 6px rgba(20, 20, 15, 0.05), 0 16px 36px rgba(20, 20, 15, 0.08);
    font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; font-style: normal; line-height: 1.45; color: var(--ink);
}
.nutv-page .quote-card .quote-cite { margin-top: 10px; font-family: 'Hanken Grotesk', sans-serif; font-size: 12.5px; color: var(--ink-faint); }

/* Воронка дзвінка: крок пройдено -- чорна крапка з лаймовою галочкою, поточний -- лаймова з обводкою */
.nutv-page .step-dot { border-color: #fff; background: var(--field); color: var(--ink-faint); }
.nutv-page .step.done .step-dot { background: var(--ink); color: var(--lime); }
.nutv-page .step.current .step-dot { background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 2px var(--ink); }
.nutv-page .step-line { background: var(--line); }
.nutv-page .step.done .step-line { background: var(--ink); }
.nutv-page .step-label { color: var(--ink-soft); }
.nutv-page .step.done .step-label, .nutv-page .step.current .step-label { color: var(--ink); }
.nutv-page .step-meta { color: var(--ink-faint); }
.nutv-page .stepper-cta .btn-secondary, .nutv-page .stepper-cta .btn-primary-sm { height: 40px; padding: 0 20px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.nutv-page .stepper-cta .btn-secondary { background: var(--field); color: var(--ink); }
.nutv-page .stepper-cta .btn-primary-sm { background: var(--ink); color: var(--lime); }
.nutv-page .stepper-cta .link-btn { color: var(--ink-soft); }
.nutv-page .cell-sub { color: var(--ink-faint); }

/* Чат: її повідомлення світлі, наші (консультантка) чорні з лаймом, автоматичні бота -- лаймовий відтінок з міткою "бот" */
.nutv-page .chat-bubble { border-radius: 16px; }
.nutv-page .chat-bubble.admin { background: var(--ink); color: var(--lime); border-bottom-right-radius: 5px; }
.nutv-page .chat-bubble.participant { background: var(--field); color: var(--ink); border-bottom-left-radius: 5px; }
.nutv-page .chat-bubble.bot { background: rgba(199, 244, 100, 0.3); color: var(--ink); border-bottom-right-radius: 5px; }
.nutv-page .chat-bubble-label { color: var(--ink-faint); }
.nutv-page .chat-form { align-items: center; }
.nutv-page .chat-form textarea { border: 1px solid var(--line); border-radius: 14px; background: var(--field); color: var(--ink); }
.nutv-page .chat-form textarea:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.45); }
.nutv-page .chat-form button { flex: 0 0 44px; width: 44px; padding: 0; border-radius: 50%; background: var(--ink); color: var(--lime); }

/* Швидкі відповіді в листуванні (nutrition_view.php, варіант А): кнопка зі списком над полем + попап керування. Кнопки перебивають глобальне button (висота, відступ, заокруглення). */
.nutv-page .qr { margin: 0 0 8px; }
.nutv-page .qr-trig {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 38px; margin: 0 0 8px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.nutv-page .qr-trig:hover, .nutv-page .qr-trig.is-open { border-color: var(--ink); background: #fff; }
.nutv-page .qr-trig span { display: flex; align-items: center; gap: 7px; }
.nutv-page .qr-trig svg { width: 15px; height: 15px; flex: none; }
.nutv-page .qr-pop { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 0 0 8px; }
.nutv-page .qr-search { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px; height: 40px; border-bottom: 1px solid var(--line); color: var(--ink-faint); }
.nutv-page .qr-search svg { width: 14px; height: 14px; flex: none; }
.nutv-page .qr-search input { flex: 1; width: auto; height: 38px; margin: 0; padding: 0; border: none; background: none; color: var(--ink); font: inherit; font-size: 13px; box-shadow: none; }
.nutv-page .qr-search input:focus { outline: none; }
.nutv-page .qr-list { max-height: 220px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; --fade: 18px; }
.nutv-page .qr-list::-webkit-scrollbar { display: none; }
.nutv-page .qr-it { display: block; width: 100%; height: auto; margin: 0; padding: 9px 12px; border: none; border-radius: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
.nutv-page .qr-it:hover, .nutv-page .qr-it:focus-visible { background: var(--field); outline: none; }
.nutv-page .qr-it b { display: block; font-size: 13px; font-weight: 600; }
.nutv-page .qr-it small { display: block; font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutv-page .qr-empty { margin: 0; padding: 14px 12px; font-size: 13px; color: var(--ink-soft); }
.nutv-page .qr-ft { display: flex; border-top: 1px solid var(--line); }
.nutv-page .qr-ft button { flex: 1; display: flex; align-items: center; gap: 6px; height: 40px; margin: 0; padding: 0 12px; border: none; border-radius: 0; background: none; color: var(--lime-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.nutv-page .qr-ft button + button { flex: 0 0 46px; justify-content: center; padding: 0; border-left: 1px solid var(--line); color: var(--ink); }
.nutv-page .qr-ft button:hover { background: var(--field); }
.nutv-page .qr-ft svg { width: 14px; height: 14px; flex: none; }
.nutv-page .qr-mlist { margin-bottom: 4px; }
.nutv-page .qr-mrow { display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.nutv-page .qr-mmain { flex: 1; min-width: 0; }
.nutv-page .qr-mmain b { display: block; font-size: 14px; font-weight: 600; }
.nutv-page .qr-mmain small { display: block; font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nutv-page .qr-mbtn { flex: none; display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.nutv-page .qr-mbtn:hover { background: var(--ink); color: var(--lime); }
.nutv-page .qr-mbtn svg { width: 15px; height: 15px; }
.nutv-page .qr-mbtn.is-armed { padding: 0 12px; background: #B8291F; border-color: #B8291F; color: #fff; }
.nutv-page .qr-i { display: flex; }
.nutv-page .qr-var { height: 28px; margin: 0 8px 0 0; padding: 0 11px; border: 1px dashed var(--ink-faint); border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.nutv-page .qr-var:hover { border-color: var(--ink); }
.nutv-page .qr-varhint { font-size: 12px; color: var(--ink-faint); }
.nutv-page .qr-foot #qrFootForm:not([hidden]) { display: flex; justify-content: flex-end; gap: 8px; }
.nutv-page .qr-ghost { height: 44px; margin: 0; padding: 0 18px; border: none; border-radius: 999px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.nutv-page .qr-ghost:hover { background: var(--field); }
.nutv-page .chat-form button:hover { opacity: 0.9; }

/* ============================================================================
   nutrition_settings.php -- Gradient Mesh Spotlight на обгортці .nut-page (токени, меш і скляні картки беремо звідти) + .nset-page.
   Компактно: кожне налаштування це один рядок «назва й підказка | поле», картки складаються в 1-3 колонки без порожнин.
   Глобальні label, input, select, textarea і button мають свої розміри й відступи, тож усе тут задано явно (пітфоли 1-3 скіла).
   overflow: clip замість hidden з .nut-page, бо hidden ламає sticky (панель збереження).
   ============================================================================ */
.nut-page.nset-page { overflow: clip; }
.nset-sectors { column-count: 1; column-gap: 16px; }
@media (min-width: 1101px) { .nset-sectors { column-count: 2; } }
@media (min-width: 1500px) { .nset-sectors { column-count: 3; } }
/* Колонки задані вручну: PHP ставить nset-br2 і nset-br3 на першу картку нової колонки. Коли браузер вирівнює висоту колонок сам,
   розкритий промпт чи блок «Як підключити» перекидає картки в іншу колонку просто під курсором (перевірено наживо). */
@media (min-width: 1101px) and (max-width: 1499px) { .nset-sectors > .nset-br2 { break-before: column; } }
@media (min-width: 1500px) { .nset-sectors > .nset-br3 { break-before: column; } }

.nset-page .nset-card { margin: 0 0 16px; padding: 14px 16px 6px; border-radius: 18px; }
.nset-sectors > .nset-card { break-inside: avoid; page-break-inside: avoid; }
.nset-card-head { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.nset-card-head h3 { margin: 0; font-size: 15px; }
.nset-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px; background: var(--ink); color: var(--lime); }
.nset-ico svg { width: 15px; height: 15px; }

.nset-note { margin: 2px 0 6px; font-size: 12px; line-height: 1.45; color: var(--ink-soft); }
.nset-note a { color: var(--ink); font-weight: 600; }
.nset-fold { margin: 0 0 4px; }
.nset-fold > summary { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.nset-fold > summary::-webkit-details-marker { display: none; }
.nset-fold > summary svg { width: 12px; height: 12px; transition: transform 0.15s; }
.nset-fold[open] > summary svg { transform: rotate(180deg); }
.nset-fold > summary:focus-visible, .nset-prompt > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.nset-sub { margin: 12px 0 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); }

.nset-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 14px; margin: 0; padding: 9px 0; border-top: 1px solid var(--line); }
:is(.nset-card-head, .nset-note, .nset-fold, .nset-sub) + .nset-row { border-top: none; }
.nset-row-wide { grid-template-columns: minmax(0, 1fr); }
.nset-row-toggle { cursor: pointer; }
.nset-row-toggle .toggle { margin: 0; }
.nset-page .toggle-track { background: rgba(20, 20, 15, 0.16); }
.nset-text { min-width: 0; }
.nset-title { display: block; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink); }
.nset-hint { display: block; margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--ink-soft); }
.nset-def { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; background: rgba(20, 20, 15, 0.06); font-variant-numeric: tabular-nums; white-space: nowrap; }
.nset-hint > .nset-def:first-child { margin-left: 0; }

.nset-ctl { min-width: 0; }
.nset-row:not(.nset-row-wide) .nset-ctl { width: 96px; }
.nset-page .nset-ctl input, .nset-page .nset-ctl select, .nset-page .nset-ctl .csel-trigger {
    width: 100%; height: 36px; margin: 0; padding: 0 10px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.nset-page .nset-ctl input[type=text] { font-weight: 500; }
.nset-page .nset-ctl input[type=number] { text-align: right; -moz-appearance: textfield; appearance: textfield; }
.nset-page .nset-ctl input[type=number]::-webkit-inner-spin-button, .nset-page .nset-ctl input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.nset-page .nset-ctl input::placeholder { color: var(--ink-faint); font-weight: 400; }
.nset-page .nset-ctl input:focus, .nset-page .nset-ctl .csel-trigger:focus-visible, .nset-page .nset-ctl .csel-trigger.open,
.nset-page .nset-prompt textarea:focus {
    outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.45);
}
.nset-page .nset-ctl textarea {
    width: 100%; min-height: 72px; margin: 0; padding: 8px 10px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.4; resize: vertical;
}
.nset-page .nset-ctl textarea::placeholder { color: var(--ink-faint); font-weight: 400; }
.nset-page .nset-ctl textarea:focus {
    outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(199, 244, 100, 0.45);
}

/* Блоки програми (замочки): компактний блок на два рядки - іконка, назва й перемикач, під ними опис. */
.nset-blocks { display: flex; flex-direction: column; gap: 6px; }
.nset-block { display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 4px 6px; align-items: center; padding: 6px; border-radius: 12px; background: var(--field, rgba(20,20,15,0.035)); }
.nset-block select, .nset-block input[type=text] { width: 100%; height: 32px; padding: 0 8px; font-size: 12.5px; }
.nset-block .nset-block-text { grid-column: 1 / -1; }
.nset-block .csel { width: 100%; }
.nset-block .csel-trigger { height: 32px; padding: 0 10px; font-size: 12.5px; margin: 0; }
.nset-block-add { height: 30px; margin: 6px 6px 0 0; padding: 0 12px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--label-primary); border: 1px dashed var(--separator); box-shadow: none; }
.nset-block-add svg { width: 14px; height: 14px; }
.nset-ads-list { list-style: none; margin: 0 0 4px; padding: 0; }
.nset-ads-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.nset-ads-item:first-child { border-top: none; }
.nset-ads-who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.nset-ads-who strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.nset-ads-source { font-size: 11.5px; color: var(--ink-soft); }
.nset-ads-mask { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: rgba(20, 20, 15, 0.06); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.nset-ads-del { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.nset-ads-del:hover { background: rgba(224, 62, 62, 0.12); color: #b3261e; }
.nset-ads-del svg { width: 14px; height: 14px; }
.nset-ads-add { margin-top: 8px; padding-top: 4px; border-top: 1px solid var(--line); }
.nset-ads-submit { margin-top: 10px; height: 36px; padding: 0 18px; }

.nset-prompt { border-top: 1px solid var(--line); }
.nset-note + .nset-prompt { border-top: none; }
.nset-prompt > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-radius: 6px; cursor: pointer; list-style: none; }
.nset-prompt > summary::-webkit-details-marker { display: none; }
.nset-prompt > summary svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--ink-soft); transition: transform 0.15s; }
.nset-prompt[open] > summary svg { transform: rotate(180deg); }
.nset-prompt-body { padding: 0 0 12px; }
.nset-prompt-body .nset-hint { margin: 0 0 6px; }
.nset-page .nset-prompt textarea {
    display: block; width: 100%; min-height: 0; margin: 0; padding: 10px 12px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink);
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5;
}

.nset-flash { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 9px 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600; }
.nset-flash svg { flex: 0 0 auto; width: 16px; height: 16px; }
.nset-flash.ok { background: rgba(199, 244, 100, 0.28); color: var(--lime-ink); }
.nset-flash.bad { background: var(--red-bg); color: var(--red-text); }


/* Коротка плашка «Збережено» угорі вікна: перемикач зберігається сам, і людина має побачити, що це сталось. */
.nset-toast {
    position: fixed; left: 50%; top: 18px; z-index: 30; transform: translateX(-50%); padding: 9px 18px; border-radius: 999px;
    background: var(--ink); color: var(--lime); font-size: 13.5px; font-weight: 700; box-shadow: 0 8px 24px rgba(20, 20, 15, 0.25);
    animation: nsetToastIn 0.18s ease-out;
}
@keyframes nsetToastIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .nset-toast { animation: none; } }
/* Загальне підтвердження дії без перезавантаження (assets/js/admin-toast.js, adminToast()): глобальні токени, працює на будь-якій сторінці. */
.admin-toast {
    position: fixed; left: 50%; top: 18px; z-index: 60; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 9px 18px; border-radius: 999px;
    background: #14140F; color: var(--brand); font-size: 13.5px; font-weight: 700; box-shadow: 0 8px 24px rgba(20, 20, 15, 0.25);
    animation: nsetToastIn 0.18s ease-out;
}
.admin-toast.is-bad { background: var(--red-text); color: #fff; }
@media (prefers-reduced-motion: reduce) { .admin-toast { animation: none; } }

.nset-savebar {
    position: sticky; bottom: 14px; z-index: 6; display: flex; justify-content: flex-end; margin: 0; padding: 10px 12px; border-radius: 18px;
    background: var(--panel); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(20, 20, 15, 0.06); box-shadow: 0 2px 6px rgba(20, 20, 15, 0.05), 0 16px 36px rgba(20, 20, 15, 0.08);
}
.nset-save {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; margin: 0; padding: 0 22px; box-sizing: border-box;
    border: none; border-radius: 999px; background: var(--ink); color: var(--lime); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.nset-save svg { width: 16px; height: 16px; }
.nset-save:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ============================================================================
   nutrition_warmup.php («Догрів») -- Gradient Mesh Spotlight на обгортці .consultants-page (токени, меш, геометрія 40px і
   компоненти .cst-panel-shell, .cst-field, .cst-toggle, .cst-modal, .cst-cards, .ctx-opt, .ctx-file беремо звідти, як і
   consultant_texts.php) + .wu-page для свого. Кнопки .wu-btn мають явні height, padding і margin (скіл, пітфол 1).
   ============================================================================ */
.wu-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wu-h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; }
.wu-note { font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px; }
.wu-hint { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: 8px 0 14px; }
.wu-warn { color: #B8291F; font-weight: 700; }

.wu-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; margin: 0; padding: 0 16px; box-sizing: border-box;
    border: 1px solid var(--ink); border-radius: 10px; background: var(--ink); color: var(--lime);
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.wu-btn svg { width: 14px; height: 14px; }
.wu-btn:hover { opacity: 0.88; }
.wu-btn.is-quiet { background: var(--field); border-color: var(--line); color: var(--ink); }
.wu-btn.is-quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--lime); opacity: 1; }
.wu-btn.is-small { height: 30px; padding: 0 12px; font-size: 12px; }
.wu-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Показники зверху: рівні скляні плитки, скільки влізе в рядок. */
.wu-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 18px; }
.wu-kpi {
    display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px;
    background: var(--panel); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(20,20,15,0.06); box-shadow: 0 2px 6px rgba(20,20,15,0.05), 0 10px 24px rgba(20,20,15,0.06);
}
.wu-kpi-num { font-family: 'Bricolage Grotesque', sans-serif; font-size: 28px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wu-kpi-label { font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.wu-kpi.is-good .wu-kpi-num { color: var(--lime-ink); }

.wu-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; margin: 0 0 22px; }
/* Права колонка: «Кому писати» і «Ручна розсилка» одна під одною (обидві про те, кому писати); таблиця людей -- на всю ширину. */
.wu-stack { display: grid; gap: 18px; min-width: 0; }
.wu-people { margin-top: 22px; }
@media (max-width: 1180px) { .wu-cols { grid-template-columns: minmax(0, 1fr); } }

/* Серія: перемикач, два числа, кроки рядками. */
.wu-config { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.wu-config .cst-row2 { margin-bottom: 12px; }
.wu-steps { display: grid; gap: 8px; margin: 0 0 10px; }
.wu-steps > .wu-btn { justify-self: start; margin-top: 4px; }
.wu-step {
    display: grid; grid-template-columns: 28px 104px minmax(0, 1fr) auto auto; align-items: center; gap: 8px;
    padding: 8px 10px; border: 1px solid var(--line); background: var(--field); border-radius: 14px;
}
.wu-step.is-off { opacity: 0.6; }
.wu-step-no {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--ink); color: var(--lime); font-family: 'Bricolage Grotesque', sans-serif; font-size: 13px; font-weight: 700;
}
.wu-step-days { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.wu-step-days input {
    width: 62px; height: 36px; margin: 0; padding: 0 8px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
    background: #fff; font-family: inherit; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.wu-step-days input:focus { outline: none; border-color: var(--ink); }
.wu-step-kind { min-width: 0; }
.wu-step-on.cst-toggle { width: auto; height: 36px; padding: 0 8px; background: #fff; }
.wu-step-meta { grid-column: 2 / -1; font-size: 12px; color: var(--ink-faint); }
.wu-addstep { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px 8px 46px; border: 1px dashed var(--line); border-radius: 14px; }
@media (max-width: 560px) {
    .wu-step { grid-template-columns: 28px minmax(0, 1fr) auto; }
    .wu-step-kind { grid-column: 2 / -1; }
    .wu-addstep { grid-template-columns: minmax(0, 1fr); padding-left: 10px; }
}

/* Сітка «вік × скільки скинути». */
.wu-seg-wrap { overflow-x: auto; }
.wu-seg { border-collapse: separate; border-spacing: 6px; margin: 0 -6px; }
.wu-seg th { border: none; padding: 0 4px; font-size: 11px; color: var(--ink-faint); text-align: center; white-space: nowrap; }
.wu-seg th[scope="row"] { text-align: left; }
.wu-seg td { border: none; padding: 0; }
.wu-cell {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 64px; justify-content: center;
    padding: 8px 6px; border-radius: 14px; background: var(--field); border: 1px solid var(--line); text-align: center;
}
.wu-cell-n { font-family: 'Bricolage Grotesque', sans-serif; font-size: 24px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wu-cell-cov { font-size: 11px; line-height: 1.3; color: var(--ink-faint); }
.wu-cell.is-ok { background: rgba(199, 244, 100, 0.26); border-color: rgba(53, 71, 14, 0.2); }
.wu-cell.is-ok .wu-cell-cov { color: var(--lime-ink); font-weight: 600; }
.wu-cell.is-gap { background: var(--orange-bg); border-color: rgba(154, 90, 0, 0.18); }
.wu-cell.is-gap .wu-cell-cov { color: var(--orange-text); font-weight: 600; }

/* Бібліотека історій. */
.wu-lib-head { margin: 4px 0 0; }
/* stretch, а не start, як у .cst-cards: картки в ряду однієї висоти, і кнопки дій (margin-top:auto) стоять на одному рівні. */
.wu-cards { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-items: stretch; }
.wu-empty-add { margin-top: 14px; }
.wu-item { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 20px; }
.wu-item.is-off { opacity: 0.62; }
.wu-item-top { display: flex; flex-wrap: wrap; gap: 6px; }
.wu-item-title { margin: 0; }
.wu-tags, .wu-names { display: flex; flex-wrap: wrap; gap: 6px; }
.wu-tag {
    display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: 999px; box-sizing: border-box;
    border: 1px solid var(--line); background: var(--field); font-size: 11.5px; font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
a.wu-tag:hover { background: var(--ink); border-color: var(--ink); color: var(--lime); text-decoration: none; }
.wu-item-body { display: flex; gap: 12px; align-items: flex-start; }
.wu-item-body .ctx-thumb { width: 64px; height: 64px; object-fit: cover; }
.wu-item-text {
    margin: 0; min-width: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); white-space: pre-line; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.wu-stats { margin: 0; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.wu-stats b { color: var(--ink); }
.wu-item-actions { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.wu-item-actions form { margin: 0; }

/* Ручна розсилка. */
.wu-manual .cst-row2 { margin-bottom: 12px; }
.wu-preview { margin: 16px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--field); border: 1px solid var(--line); display: grid; gap: 10px; }
.wu-preview-n { margin: 0; font-size: 14px; }
.wu-preview-n b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; }
.wu-preview .wu-hint { margin: 0; }
.wu-preview form { margin: 0; }
.wu-queue { margin: 16px 0 0; display: grid; gap: 6px; }
.wu-queue-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; font-size: 13px; }

/* Хто зараз у догріві. */
.wu-table-wrap { overflow-x: auto; }
.wu-table th { color: var(--ink-faint); border-bottom: 1px solid var(--line); white-space: nowrap; }
.wu-table td { border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: top; }
.wu-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wu-table a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--lime); }
.wu-table td:first-child { min-width: 150px; }
.wu-plan { font-size: 12.5px; color: var(--ink-soft); min-width: 200px; }
.wu-plan.is-due { color: var(--lime-ink); font-weight: 700; }
.wu-plan.is-warn { color: var(--orange-text); font-weight: 600; }
.wu-plan.is-muted { color: var(--ink-faint); }

/* Форма історії в попапі. */
.wu-modal-panel { width: 600px; }
.wu-modal-panel .ctx-opts { margin-bottom: 16px; }
.wu-modal-panel .cst-row2 { margin-bottom: 12px; }
.wu-media { display: grid; gap: 12px; margin: 0 0 16px; }
.wu-media-cur { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.wu-mediabox, .wu-thumblink { display: inline-flex; flex-shrink: 0; }
.wu-mediabox .ctx-thumb, .wu-thumblink .ctx-thumb { object-fit: cover; }
.wu-mediatile {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 72px; height: 72px; box-sizing: border-box;
    border-radius: 12px; background: var(--field); border: 1px solid var(--line); color: var(--ink-soft);
}
.wu-mediatile svg { width: 24px; height: 24px; }
.wu-item-body .wu-mediatile { width: 64px; height: 64px; }
.wu-media-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 150px; }
.wu-media-info strong { font-size: 13px; }
.wu-media-info span { font-size: 12px; color: var(--ink-faint); overflow-wrap: anywhere; }
.wu-tgpick { margin: 0; }
.wu-tgpick a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--lime); }
.wu-chip { gap: 5px; }
.wu-chip svg { width: 12px; height: 12px; }
.wu-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.wu-check input { width: auto; margin: 0; }

/* Файли сайту (admin/site_files.php) -- ті самі GMS-токени/меш/відступи, що й .ntx-page. */
.sfx-page { position: relative; }
.sfx-page {
    --ink: #14140F; --ink-soft: rgba(20,20,15,.62); --ink-faint: rgba(20,20,15,.38);
    --lime: #C7F464; --lime-ink: #35470E; --line: rgba(20,20,15,.10);
    --panel: rgba(255,255,255,.88); --field: rgba(20,20,15,.035); --r: 20px;
    margin: -22px -28px; padding: 32px 40px 60px; min-height: 100vh; overflow: clip; background: #FBFBF7;
}
.sfx-mesh {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(circle at 8% 4%, rgba(199,244,100,.20), transparent 50%),
        radial-gradient(circle at 94% 2%, rgba(191,227,255,.16), transparent 50%),
        radial-gradient(circle at 55% 14%, rgba(255,196,158,.14), transparent 55%);
    filter: blur(65px) saturate(130%);
    mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 46%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 46%);
}
.sfx-content { position: relative; z-index: 1; }
.sfx-page .page-header-icon { background: var(--ink); color: var(--lime); }
.sfx-page h2 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.sfx-page .muted { color: var(--ink-soft); }
.sfx-page .muted code { background: rgba(20,20,15,.06); border-radius: 4px; padding: 1px 5px; font-size: 12.5px; }
.sfx-page .card {
    background: var(--panel); backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(20,20,15,.06); border-radius: var(--r);
    box-shadow: 0 2px 6px rgba(20,20,15,.05), 0 16px 36px rgba(20,20,15,.08);
    padding: 24px 26px;
}

.sfx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 13px; }
.sfx-crumb { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.sfx-crumb svg { width: 13px; height: 13px; }
.sfx-crumb:hover { color: var(--ink); }
.sfx-crumb.active { color: var(--ink); }
.sfx-crumb-sep { display: inline-flex; color: var(--ink-faint); }
.sfx-crumb-sep svg { width: 10px; height: 10px; }

.sfx-toolbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-bottom: 20px; }
.sfx-upload-form { flex: 1 1 320px; min-width: 0; }
.sfx-dropzone { height: 100%; box-sizing: border-box; }
.sfx-mkdir-form { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.sfx-mkdir-input { width: 200px; height: 36px; margin: 0; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font-family: inherit; font-size: 13.5px; }
.sfx-mkdir-input::placeholder { color: var(--ink-faint); }
.sfx-mkdir-input:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(199,244,100,.45); }
.sfx-mkdir-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 16px;
    border: none; border-radius: 10px; background: var(--ink); color: var(--lime);
    font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.sfx-mkdir-btn svg { width: 14px; height: 14px; }
.sfx-mkdir-btn:hover { opacity: .88; }

.sfx-list { list-style: none; margin: 0; padding: 0; }
.sfx-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.sfx-item:first-child { border-top: none; }
.sfx-item-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
a.sfx-item-main:hover .sfx-item-name { color: var(--lime-ink); text-decoration: underline; }
.sfx-item-icon { flex: 0 0 auto; display: inline-flex; color: var(--ink-faint); }
.sfx-item-icon svg { width: 18px; height: 18px; }
.sfx-item-icon-folder { color: var(--lime-ink); }
.sfx-item-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sfx-item-name { font-size: 13.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sfx-item-url { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-soft); text-decoration: none; overflow-wrap: anywhere; }
.sfx-item-url:hover { color: var(--lime-ink); text-decoration: underline; }
.sfx-item-size { flex: 0 0 auto; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sfx-item-del { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: 0; padding: 0; border: none; border-radius: 50%; background: none; color: var(--ink-soft); cursor: pointer; }
.sfx-item-del:hover { background: rgba(224, 62, 62, 0.12); color: #b3261e; }
.sfx-item-del svg { width: 14px; height: 14px; }

/* Ролі й доступи (admin/roles.php) -- ті самі GMS-токени/меш/відступи, що й .sfx-page/.ntx-page.
   Редагування ролі лишається інлайн (2 перемикачі сторінок -- замало для окремого попапу), а
   користувача -- в dialog.cst-modal (той самий компонент/CSS, що й admin/consultants.php та
   admin/nutrition_warmup.php: обидві сторінки використовують ідентичні токени --ink/--lime/--panel/
   --field під власною обгорткою, тож .cst-modal/.cst-field/.cst-toggle/.cst-submit/.cst-iconbtn/
   .cst-badge/.cst-add-btn перевикористовуються тут НАПРЯМУ, без дублю CSS під rls-* назвами --
   раніше форма ролі й користувача (роль + консультанти + пароль) тіснились одна поряд з іншою в
   одному рядку списку й розповзались переносами; тепер рядок користувача показує лише
   ім'я/бейдж/консультантів + дві іконки (редагувати -> попап, видалити), решта -- всередині попапу,
   так само як консультант.php виносить форму в dialog замість колонки сітки). */
.rls-page { position: relative; }
.rls-page {
    --ink: #14140F; --ink-soft: rgba(20,20,15,.62); --ink-faint: rgba(20,20,15,.38);
    --lime: #C7F464; --lime-ink: #35470E; --line: rgba(20,20,15,.10);
    --panel: rgba(255,255,255,.88); --field: rgba(20,20,15,.035); --r: 20px;
    margin: -22px -28px; padding: 32px 40px 60px; min-height: 100vh; overflow: clip; background: #FBFBF7;
}
.rls-mesh {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(circle at 8% 4%, rgba(199,244,100,.20), transparent 50%),
        radial-gradient(circle at 94% 2%, rgba(191,227,255,.16), transparent 50%),
        radial-gradient(circle at 55% 14%, rgba(255,196,158,.14), transparent 55%);
    filter: blur(65px) saturate(130%);
    mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 46%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 46%);
}
.rls-content { position: relative; z-index: 1; }
.rls-page .page-header-icon { background: var(--ink); color: var(--lime); }
.rls-page h2 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.rls-page .muted { color: var(--ink-soft); }
.rls-page .card {
    background: var(--panel); backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(20,20,15,.06); border-radius: var(--r);
    box-shadow: 0 2px 6px rgba(20,20,15,.05), 0 16px 36px rgba(20,20,15,.08);
    padding: 24px 26px;
}
/* Видимий фокус із клавіатури для іконок/посилань попапу -- та сама пара правил, що
   .consultants-page :is(a,button):focus-visible / .cst-toggle:has(...), просто під власною
   обгорткою сторінки (це правило само по собі глобальне лише в консультантів, не сайтвайд). */
.rls-page :is(a, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .rls-grid { grid-template-columns: 1fr; } }

/* Роль -- картка-рядок (фон + радіус), а не суцільний список із тонкою рискою зверху: раніше назва
   ролі, перемикачі сторінок і дії Зберегти/Видалити просто йшли одне під одним без візуального
   контейнера й губились серед сусідніх ролей. */
.rls-role-list { display: flex; flex-direction: column; gap: 10px; }
.rls-role-row { background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.rls-role-top { display: flex; align-items: center; gap: 10px; }
/* input.rls-role-name (не просто .rls-role-name) -- інакше глобальне "input[type=text]{border:1px
   solid transparent}" (специфічність 0,1,1: тип+атрибут) переважає над самим лише класом (0,1,0) і
   тихо ховає рамку поля -- назва ролі виглядала голим текстом без жодних меж поля (перевірено наживо
   getComputedStyle: borderColor поверталось прозорим, доки рамка не отримала елемент у селекторі). */
input.rls-role-name {
    flex: 1 1 auto; min-width: 0; height: 36px; margin: 0; padding: 0 12px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink);
    font-family: inherit; font-size: 14px; font-weight: 700;
}
input.rls-role-name:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(199,244,100,.45); }
.rls-role-pages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rls-page-toggle .ntx-toggle-state { white-space: nowrap; }
.rls-role-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.rls-btn-sm {
    height: 32px; margin: 0; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--ink); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.rls-btn-sm:hover { border-color: var(--ink); }

.rls-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 16px;
    border: none; border-radius: 10px; background: var(--ink); color: var(--lime);
    font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.rls-btn svg { width: 14px; height: 14px; }
.rls-btn:hover { opacity: .88; }

.rls-newrole-form { display: flex; gap: 10px; margin-top: 14px; }
.rls-newrole-form input {
    flex: 1; height: 36px; margin: 0; padding: 0 12px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 13.5px;
}
.rls-newrole-form input:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(199,244,100,.45); }

/* Користувач -- та сама картка-рядок, що роль вище, замість суцільного списку з рискою. */
.rls-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rls-item { display: flex; align-items: center; gap: 10px; background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 10px 16px; }
.rls-item-main { flex: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.rls-item-name { font-size: 14px; font-weight: 700; color: var(--ink); }
.rls-item-sub { flex-basis: 100%; font-size: 11.5px; color: var(--ink-soft); }
.rls-badge { display: inline-flex; padding: 2px 9px; border-radius: 999px; background: #fff; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.rls-badge-owner { background: var(--lime); color: var(--lime-ink); }
.rls-item-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }

/* Розкривний чекбокс-список консультантів (rls_render_consultant_picker()), тепер лише всередині
   .cst-modal-body -- той самий візуальний рецепт, що .cst-field input (рамка/фон/радіус/розмір
   шрифту), щоб пара "звичайне поле + цей picker" в одному попапі читалась як однакові поля.
   details/summary -- чекбокси всередині НЕ закривають його при кожному кліку, на відміну від .csel,
   що й потрібно для множинного вибору. */
.rls-multiselect { position: relative; width: 100%; }
.rls-multiselect summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 10px 13px; margin: 0;
    border: 1px solid var(--line); border-radius: 12px; background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 14px;
}
.rls-multiselect summary::-webkit-details-marker { display: none; }
.rls-multiselect summary::after {
    content: ''; flex-shrink: 0; width: 8px; height: 8px; margin-left: 4px;
    border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
    transform: rotate(45deg); transition: transform .15s;
}
.rls-multiselect[open] summary::after { transform: rotate(-135deg); }
.rls-multiselect[open] summary { border-color: var(--ink); }
.rls-multiselect-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rls-multiselect-list {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
    margin: 0; padding: 6px;
    background: #fff; border-radius: 12px; box-shadow: 0 16px 36px rgba(20,20,15,.16);
    border: 1px solid var(--line); animation: popIn var(--dur-fast) var(--ease-out-soft) both;
}
/* .up -- замало місця знизу (JS міряє й додає клас, roles.php <script>): список росте вгору від
   тригера, той самий прийом, що .csel-list.up. Це поле -- останнє перед кнопкою "Додати" в попапі,
   а сам .cst-modal-panel має overflow:hidden -- список, що росте вниз, обрізався об нижній край
   попапу (не про viewport, JS звіряє з найближчим предком, що реально стриже вміст: .cst-modal-body
   чи .cst-modal-panel), і був повністю невидимий під низом картки. */
.rls-multiselect-list.up { top: auto; bottom: calc(100% + 6px); }
/* Гортається внутрішня частина, рамка (тінь, обводка) лишається цілою: без смуги, край тане (scroll-fade), як у .csel-scroll. */
.rls-multiselect-scroll { max-height: 228px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; --fade: 18px; }
.rls-multiselect-scroll::-webkit-scrollbar { display: none; }
/* Не чекбокс-квадрат (перша спроба вийшла "жахливо", живий відгук 2026-09-30) -- сам рядок підсвічується
   лаймом і бере жирне накреслення, коли обраний, з галочкою праворуч, той самий рецепт, що вже є в
   .csel-option.sel (обраний варіант у звичайному select -- підсвічений фон + жирний текст) і admin_icon('check')
   (та сама іконка-галочка, що й скрізь у застосунку -- нічого нового не малювалось). Інпут лишається в DOM
   для сабміту форми, просто візуально прихований (та сама техніка, що .cst-toggle/.ntx-toggle input). */
.rls-multiselect-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; margin: 0; }
.rls-multiselect-item:hover { background: var(--field); }
.rls-multiselect-item input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.rls-multiselect-item-text { overflow: hidden; text-overflow: ellipsis; }
.rls-multiselect-item-check { display: inline-flex; flex-shrink: 0; color: var(--lime-ink); opacity: 0; }
.rls-multiselect-item-check svg { width: 15px; height: 15px; }
.rls-multiselect-item:has(input:checked) { background: rgba(199,244,100,.35); font-weight: 700; }
.rls-multiselect-item:has(input:checked) .rls-multiselect-item-check { opacity: 1; }
.rls-multiselect-item:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }

/* ===== Живі ефіри (admin/live_broadcasts.php) =====
   Сторінка на .consultants-page + .lvb-page: картки, попап, перемикач і поля -- готові .cst-* компоненти. Тут лише те, чого в них немає:
   рядки розкладу (день тижня + година + «прибрати») і чотири лічильники воронки. */
.lvb-sched { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.4; }
.lvb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; }
.lvb-stat { overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--field); font-size: 11.5px; line-height: 1.25; color: var(--ink-soft); }
.lvb-stat b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; line-height: 1.1; color: var(--ink); }
.lvb-days { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.lvb-day { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; }
.lvb-day-name { font-size: 13.5px; font-weight: 700; color: var(--ink); }

/* Чат ефіру: список питань і повідомлень у попапі (admin/live_broadcasts.php) */
.lvb-chat-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
.lvb-chat-row { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border: 1px solid var(--line); background: var(--field); border-radius: 12px; }
.lvb-chat-row form { margin: 0; flex-shrink: 0; }
.lvb-chat-row .cst-iconbtn { margin: 0; }
.lvb-chat-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; overflow-wrap: anywhere; }
.lvb-chat-answer { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-faint); }

/* Цифри воронки на картці ефіру клікабельні (відкривають список людей): кнопка з тим самим виглядом, що й плитка. Усі властивості глобальної button задані явно. */
button.lvb-stat { height: auto; margin: 0; border: none; text-align: left; font: inherit; font-size: 11.5px; line-height: 1.25; cursor: pointer; }
button.lvb-stat b { display: block; }
button.lvb-stat.is-link:hover { background: rgba(199,244,100,.35); }
.lvb-people-modal .cst-modal-body { padding-top: 4px; }
.lvb-people-modal .person-row { border-bottom: 1px solid var(--line); }

/* Розклад консультацій: запис з адмінки і перенесення записів (admin/consultant_schedule.php) */
.sch-booked-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.sch-booked-head h3 { margin: 0; }
.sch-add-booking {
    display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; margin: 0; padding: 0 12px;
    border: none; border-radius: 999px; background: var(--ink); color: var(--lime);
    font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sch-add-booking svg { width: 13px; height: 13px; }
.sch-add-booking:hover { opacity: 0.88; }
.sched-window.is-movable { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.sched-window.is-dragging { cursor: grabbing; z-index: 6; box-shadow: 0 6px 18px rgba(20,20,15,0.32); outline: 2px solid var(--ink); }
/* Минуле в календарі: сіра накладка поверх шаблону (z-index 2 -- над вікнами прийому, але першою в DOM, тож зустрічі з тим самим z-index лежать над нею; pointer-events:none -- вікна прийому під нею лишаються клікабельними) і сірі зустрічі, що вже були. */
.sched-cal-past { position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: none; background: rgba(226,226,220,0.72); }
.sched-window[data-slot-id] { cursor: pointer; }
.sched-window.is-movable { cursor: grab; }
.sched-window.is-past { background: #CFCFC8; color: #6B6B63; box-shadow: none; }
.sched-window.is-selected { z-index: 5; outline: 2px solid var(--ink); outline-offset: 1px; box-shadow: 0 4px 12px rgba(20,20,15,0.28); }
.sched-window:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.sched-legend-swatch.past { background: #CFCFC8; }
/* Виділена зустріч у списку: лаймова підкладка, що виходить за рядок на 6px (box-shadow не рухає сусідів) і вміщується в поля скролу. */
.sch-booked-row.is-selected { background: rgba(199,244,100,0.3); box-shadow: 0 0 0 6px rgba(199,244,100,0.3); border-radius: 8px; }
.sch-booked-row.is-selected, .sch-booked-row.is-selected + .sch-booked-row { border-top-color: transparent; }
.sch-move-who { margin: 0 0 16px; font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sch-pick-list { max-height: 230px; overflow-y: auto; margin-top: 8px; scrollbar-width: none; -ms-overflow-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.sch-pick-list::-webkit-scrollbar { display: none; }
.sch-pick-list .empty-row { padding: 14px; margin: 0; }
/* .cst-field label (0,2,1) інакше робить рядок блоковим і задає йому підпис-стиль, тому селектор не слабший */
.cst-field label.sch-pick-row, .sch-pick-row { display: flex; align-items: center; gap: 12px; margin: 0; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; position: relative; font-size: 14px; font-weight: 400; color: var(--ink); }
.sch-pick-row:last-of-type { border-bottom: none; }
.sch-pick-row[hidden] { display: none; }
.sch-pick-row input, .cst-field .sch-pick-row input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; }
.sch-pick-row .person-main { flex: 1; min-width: 0; }
.sch-pick-row .person-name { display: block; font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.sch-pick-row .person-meta { display: block; font-size: 12px; color: var(--ink-faint); }
.sch-pick-row:hover { background: rgba(199,244,100,.22); }
.sch-pick-row.is-selected { background: var(--lime); }
.sch-pick-row.is-selected .person-meta { color: var(--lime-ink); }
.sch-pick-row:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: -2px; }
#schPickHint.is-bad { color: #B8291F; font-weight: 600; }
.pls-ads .pls-tile .t-value small { display: inline-block; white-space: nowrap; }
/* Блок реклами живе в колонці розділів «Пульсу», як і решта: мінімум тексту, плитки, графік, а список кабінетів лише коли їх більше одного. */
.pls-ads-chart-title { font-weight: 700; font-size: 13px; }
.pls-ads-chart-head { font-size: 13px; }
.pls-ads-list { margin-top: 6px; }
.pls-ads-chart { margin: 0 0 6px; }
.pls-ads-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 0 0 8px; font-size: 13.5px; }
.pls-ads-legend { margin: 6px 0 4px; }
.pls-ads-legend .pls-legend { margin: 0; justify-content: center; }
.pls-axis-label.pls-axis-line { fill: var(--orange); }

/* ===== Бекап (admin/backup.php): той самий GMS-рецепт, що й «Ролі й доступи» (rls-*), під власною обгорткою сторінки.
   Кнопка й поля мають власні висоту/відступи/ширину (глобальні button{height:44px;margin-top:18px} та input{width:100%} їх інакше змінили б). */
.bkp-page { position: relative; }
.bkp-page {
    --ink: #14140F; --ink-soft: rgba(20,20,15,.62); --ink-faint: rgba(20,20,15,.38);
    --lime: #C7F464; --lime-ink: #35470E; --line: rgba(20,20,15,.10);
    --panel: rgba(255,255,255,.88); --field: rgba(20,20,15,.035); --r: 20px;
    margin: -22px -28px; padding: 32px 40px 60px; min-height: 100vh; overflow: clip; background: #FBFBF7;
}
.bkp-mesh {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background:
        radial-gradient(circle at 8% 4%, rgba(199,244,100,.20), transparent 50%),
        radial-gradient(circle at 94% 2%, rgba(191,227,255,.16), transparent 50%),
        radial-gradient(circle at 55% 14%, rgba(255,196,158,.14), transparent 55%);
    filter: blur(65px) saturate(130%);
    mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 46%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 20%, transparent 46%);
}
.bkp-content { position: relative; z-index: 1; }
.bkp-page .page-header-icon { background: var(--ink); color: var(--lime); }
.bkp-page h2 { font-family: var(--font-display); color: var(--ink); letter-spacing: -0.01em; }
.bkp-page .muted { color: var(--ink-soft); }
.bkp-page .card {
    background: var(--panel); backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(20,20,15,.06); border-radius: var(--r);
    box-shadow: 0 2px 6px rgba(20,20,15,.05), 0 16px 36px rgba(20,20,15,.08);
    padding: 24px 26px;
}
.bkp-page :is(a, button, input):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.bkp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 1100px) { .bkp-grid { grid-template-columns: 1fr; } }
.bkp-last { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); }
.bkp-last.is-old { color: #8a4b00; }
.bkp-checks { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bkp-checks li { display: flex; align-items: flex-start; gap: 10px; background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-size: 13px; color: var(--ink); }
.bkp-check-ico { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.bkp-check-ico svg { width: 11px; height: 11px; }
.bkp-checks li.ok .bkp-check-ico { background: var(--lime); color: var(--lime-ink); }
.bkp-checks li.bad { border-color: rgba(190,40,40,.35); }
.bkp-checks li.bad .bkp-check-ico { background: #c0392b; color: #fff; }
.bkp-fix { font-size: 12px; color: var(--ink-soft); }
.bkp-code { display: block; margin-top: 4px; padding: 7px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 12px; word-break: break-all; user-select: all; }
.bkp-field { margin-bottom: 14px; }
.bkp-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px; }
.bkp-field input[type=password] {
    display: block; width: 100%; height: 40px; margin: 0; padding: 0 13px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 14px;
}
.bkp-field input[type=password]:focus { outline: none; border-color: var(--ink); background: #fff; box-shadow: 0 0 0 3px rgba(199,244,100,.45); }
.bkp-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; margin: 4px 0 0; padding: 0 20px;
    border: none; border-radius: 12px; background: var(--ink); color: var(--lime);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.bkp-btn svg { width: 16px; height: 16px; }
.bkp-btn:hover { opacity: .88; }
.bkp-btn:disabled { opacity: .45; cursor: not-allowed; }
.bkp-note, .bkp-sub { margin: 12px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.bkp-list, .bkp-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; color: var(--ink); }
.bkp-steps { margin-top: 16px; }
.bkp-page code { font-size: 12px; background: var(--field); padding: 1px 6px; border-radius: 6px; }
.bkp-page .bkp-code { background: #fff; padding: 7px 10px; }

/* ===== Програма (admin/program.php): та сама обгортка .consultants-page, що й в «Живих ефірів» (токени, мешл, попап .cst-modal),
   плюс власні фільтри й таблиця. Кнопки мають власні висоту/відступи (глобальні button{height:44px;margin-top:18px} їх інакше змінили б). */
.prg-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.prg-chip {
    display: inline-flex; align-items: center; gap: 8px; height: 36px; margin: 0; padding: 0 14px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink);
    font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.prg-chip:hover { border-color: var(--ink); text-decoration: none; }
.prg-chip.is-on { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.prg-chip-n { font-size: 12px; font-weight: 700; opacity: .65; font-variant-numeric: tabular-nums; }
.prg-panel { padding: 8px 8px 12px; }
.prg-scroll { overflow-x: auto; }
.prg-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.prg-table th { text-align: left; padding: 12px 16px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--line); }
.prg-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14px; color: var(--ink); }
.prg-table tbody tr:last-child td { border-bottom: none; }
.prg-name { font-weight: 700; color: var(--ink); text-decoration: none; }
.prg-name:hover { text-decoration: underline; }
.prg-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-soft); }
.prg-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--field); color: var(--ink-soft); }
.prg-badge.is-ok { background: var(--lime); color: var(--lime-ink); }
.prg-badge.is-unl { background: rgba(191,227,255,.55); color: #1d4b73; }
.prg-badge.is-soon { background: rgba(255,196,158,.6); color: #7a3b0e; }
.prg-badge.is-ended { background: rgba(20,20,15,.08); color: var(--ink-soft); }
.prg-act { text-align: right; white-space: nowrap; width: 1%; }
.prg-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; margin: 0; padding: 0 14px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink);
    font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.prg-btn svg { width: 14px; height: 14px; }
.prg-btn:hover { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.prg-who { margin: 0 0 18px; font-size: 14px; color: var(--ink-soft); }
.prg-who b { color: var(--ink); font-size: 15px; }
.prg-form { margin: 0 0 18px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
.prg-form-end { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.prg-form[hidden] { display: none; }
.prg-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 42px; margin: 4px 0 0; padding: 0 16px; box-sizing: border-box;
    border: none; border-radius: 12px; background: var(--ink); color: var(--lime);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.prg-submit svg { width: 15px; height: 15px; }
.prg-submit:hover { opacity: .9; }
.prg-submit.is-danger { background: transparent; color: #B8291F; border: 1px solid rgba(184,41,31,.35); }
.prg-submit.is-danger:hover { background: #B8291F; color: #fff; opacity: 1; }
.prg-pkg-row { display: grid; grid-template-columns: 1fr 84px auto 34px 34px; align-items: center; gap: 8px; margin: 0 0 8px; }
.prg-pkg-row input[type=text], .prg-pkg-row input[type=number] {
    width: 100%; height: 38px; margin: 0; padding: 0 11px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px;
    background: var(--field); color: var(--ink); font-family: inherit; font-size: 14px;
}
.prg-pkg-row input:focus { outline: none; border-color: var(--ink); background: #fff; }
.prg-pkg-on { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.prg-pkg-on input { width: 16px; height: 16px; margin: 0; }
.prg-pkg-row.is-new { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.prg-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; padding: 0; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 50%; background: var(--field); color: var(--ink); cursor: pointer;
}
.prg-iconbtn svg { width: 14px; height: 14px; }
.prg-iconbtn:hover { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.prg-iconbtn.is-danger:hover { background: #B8291F; border-color: #B8291F; color: #fff; }
.prg-iconbtn.is-lime { background: var(--lime); color: var(--lime-ink); border-color: transparent; }
.prg-page :is(a, button, input, select):focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.prg-head-btn { margin: 0; height: auto; cursor: pointer; }
@media (max-width: 560px) { .prg-pkg-row { grid-template-columns: 1fr 70px 34px 34px; } .prg-pkg-on { display: none; } }

/* ============================================================================
   «Воронка повідомлень» (admin/message_flow.php, стиль В: етапи чорним із лаймом).
   Схема читає налаштування й стан текстів (includes/nutrition_flow.php). Токени ці самі, що й на інших GMS-сторінках: беруться з .consultants-page.
   ============================================================================ */
.flow-page .flow-warn { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border: 1px solid #EF9F27; border-radius: 14px; background: #FAEEDA; color: #412402; font-size: 13px; line-height: 1.5; }
.flow-page .flow-warn svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: #854F0B; }
.flow-page .flow-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 20px; }
.flow-page .flow-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-soft); }
.flow-page .flow-legend span { display: inline-flex; align-items: center; gap: 6px; }
.flow-page .flow-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.flow-page .flow-sw-off { background: #E4E3DC; }
.flow-page .flow-stats { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); }
.flow-page .flow-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.flow-page .flow-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.flow-page .flow-track { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: rgba(20,20,15,0.16); transition: background-color .15s; }
.flow-page .flow-track:after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s; }
.flow-page .flow-switch input:checked + .flow-track { background: var(--ink); }
.flow-page .flow-switch input:checked + .flow-track:after { transform: translateX(14px); background: var(--lime); }
.flow-page .flow-switch input:focus-visible + .flow-track { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Теги «чим запускається»: ті самі кольори в легенді й на картках. */
.flow-page .flow-tag-cron { background: #E1F5EE; color: #085041; }
.flow-page .flow-tag-react { background: #EEEDFE; color: #3C3489; }
.flow-page .flow-tag-points { background: #FAEEDA; color: #633806; }
.flow-page .flow-tag-staff { background: #E6E5DF; color: #444441; }

.flow-page .flow-st { margin: 0 0 32px; }
.flow-page .flow-hd { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 16px; background: var(--ink); color: var(--lime); font-size: 15px; }
.flow-page .flow-hd b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.flow-page .flow-hd small { margin-left: auto; font-size: 12px; font-weight: 400; opacity: 0.7; }
.flow-page .flow-num { display: flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); font-size: 12.5px; font-weight: 700; }
.flow-page .flow-st.is-off .flow-hd { background: #4A4A42; color: #D5D5C8; }

.flow-page .flow-rw { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 38px; padding: 0 6px; }
.flow-page .flow-cd { position: relative; display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.flow-page .flow-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--ink); color: var(--lime); }
.flow-page .flow-ic svg { width: 16px; height: 16px; }
.flow-page .flow-q { font-size: 16px; font-weight: 700; }
.flow-page .flow-body { flex: 1; min-width: 0; }
.flow-page .flow-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; }
.flow-page .flow-title b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.flow-page .flow-body p { margin: 5px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.flow-page .flow-chip { padding: 1px 8px; border-radius: 999px; background: var(--field); color: var(--ink-soft); font-size: 11px; }
.flow-page .flow-tag { padding: 1px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
.flow-page .flow-off { padding: 1px 8px; border-radius: 999px; background: #FAECE7; color: #993C1D; font-size: 11px; font-weight: 600; }
.flow-page .flow-hd .flow-off { margin-left: 0; }
.flow-page .flow-cd.is-off { background: #F2F2EC; opacity: 0.62; }
.flow-page .flow-cd.q { background: var(--lime); border-color: var(--lime); }
.flow-page .flow-cd.q .flow-body p { color: var(--lime-ink); }
.flow-page .flow-yes span { display: inline-block; padding: 0 7px; border-radius: 999px; background: var(--ink); color: var(--lime); font-size: 11px; font-weight: 700; }
.flow-page .flow-keys { display: none; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.flow-page .flow-root.show-keys .flow-keys { display: flex; }
.flow-page .flow-keys code { padding: 1px 6px; border-radius: 6px; background: var(--field); color: var(--ink-soft); font-size: 10.5px; }
.flow-page .flow-keys code.is-off { color: #993C1D; text-decoration: line-through; }

/* Стрілка вниз від картки «основного шляху» до наступної. */
.flow-page .flow-main { position: relative; }
.flow-page .flow-main .flow-cd { z-index: 1; }
.flow-page .flow-main:after { content: ""; position: absolute; left: 29px; top: 16px; bottom: -10px; border-left: 1.5px solid var(--ink); }
.flow-page .flow-main:before { content: ""; position: absolute; left: 25px; bottom: -17px; border: 4px solid transparent; border-top: 7px solid var(--ink); border-bottom: 0; }
.flow-page .flow-st > .flow-rw:last-child > .flow-main:after { bottom: -25px; }
.flow-page .flow-st > .flow-rw:last-child > .flow-main:before { bottom: -32px; }
.flow-page .flow-rw.is-last > .flow-main:after, .flow-page .flow-rw.is-last > .flow-main:before { display: none; }

/* Гілка «ні»: пунктирний стовбур праворуч від розвилки й коралові картки. */
.flow-page .flow-no { position: relative; display: flex; flex-direction: column; }
.flow-page .flow-no:before { content: ""; position: absolute; left: -20px; top: 38px; bottom: 38px; border-left: 1.5px dashed #D85A30; }
.flow-page .flow-no:after { content: ""; position: absolute; left: -38px; top: 38px; width: 18px; border-top: 1.5px dashed #D85A30; }
.flow-page .flow-nb { position: relative; }
.flow-page .flow-nb:before { content: ""; position: absolute; left: -20px; top: 38px; width: 20px; border-top: 1.5px dashed #D85A30; }
.flow-page .flow-nb:first-child:after { content: "ні"; position: absolute; left: -38px; top: 19px; width: 18px; text-align: center; color: #993C1D; font-size: 11px; font-weight: 700; }
.flow-page .flow-nb .flow-cd { border-color: #D85A30; background: #FAECE7; }
.flow-page .flow-nb .flow-cd.is-off { background: #F1EDEA; }
.flow-page .flow-nb .flow-ic { background: #993C1D; color: #FAECE7; }
.flow-page .flow-nb .flow-cd:after, .flow-page .flow-nb .flow-cd:before { display: none; }

.flow-page .flow-loop { display: flex; align-items: center; gap: 10px; margin: 0 6px; padding: 11px 16px; border-radius: 16px; background: var(--ink); color: var(--lime); font-size: 13px; }
.flow-page .flow-loop svg { width: 16px; height: 16px; flex: none; }

@media (max-width: 820px) {
    .flow-page .flow-rw { grid-template-columns: 1fr; }
    .flow-page .flow-no { margin-left: 22px; }
    .flow-page .flow-no:before, .flow-page .flow-no:after, .flow-page .flow-nb:before { display: none; }
    .flow-page .flow-nb:first-child:after { content: "ні, тоді:"; position: static; display: block; width: auto; margin: 8px 0 -8px 2px; text-align: left; }
    .flow-page .flow-stats { margin-left: 0; }
}

/* ============================================================================
   Магазин (admin/shop_settings.php та наступні shop_*): сторінки на .consultants-page, тут лише те, чого там нема.
   ============================================================================ */
.shop-page .shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; margin-top: 22px; }
.shop-page .shop-h { margin: 0 0 14px; font-size: 16px; }
.shop-page .shop-note { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.shop-page .cst-botcards { margin-bottom: 14px; }
.shop-page .shop-bot-actions { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.shop-page .shop-link { height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: underline; cursor: pointer; }
.shop-page .shop-link:hover { opacity: 0.7; }
.shop-page .shop-link-danger { color: #B8291F; }
.shop-page .shop-token-form { margin-top: 14px; }
.shop-page .shop-token-form[hidden] { display: none; }

/* Магазин: товари (admin/shop_products.php) */
.shop-page .shop-head-actions { display: flex; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }
.shop-page .shop-ghost-btn { display: inline-flex; align-items: center; gap: 8px; height: auto; margin: 0; padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap; cursor: pointer; }
.shop-page .shop-ghost-btn:hover { background: var(--field); }
.shop-page .shop-ghost-btn svg { width: 16px; height: 16px; }
.shop-page .shop-filterbar { max-width: 320px; margin: 18px 0 0; }
.shop-page .shop-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; align-items: start; margin-top: 18px; }
.shop-page .shop-pgrid .cst-empty-shell { grid-column: 1 / -1; }
.shop-page .shop-pcard { display: flex; flex-direction: column; overflow: hidden; background: var(--panel); border: 1px solid rgba(20,20,15,0.06); border-radius: 18px; box-shadow: 0 2px 6px rgba(20,20,15,0.05), 0 12px 28px rgba(20,20,15,0.06); cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.shop-page .shop-pcard[hidden] { display: none; }
.shop-page .shop-pcard:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(20,20,15,0.06), 0 18px 34px rgba(20,20,15,0.1); }
.shop-page .shop-pcard.is-hidden { opacity: 0.62; }
.shop-page .shop-pcard:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shop-page .shop-pimg { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; background: var(--field); color: var(--ink-faint); }
.shop-page .shop-pimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-page .shop-pimg svg { width: 34px; height: 34px; opacity: 0.45; }
.shop-page .shop-pbody { padding: 12px 14px 14px; }
.shop-page .shop-pname { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-page .shop-pprice { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.shop-page .shop-pprice b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; }
.shop-page .shop-pprice s { font-size: 12.5px; color: var(--ink-faint); }
.shop-page .shop-ptags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.shop-page .shop-ptags span { padding: 2px 9px; border-radius: 999px; background: var(--field); color: var(--ink-soft); font-size: 11.5px; font-weight: 600; }
.shop-page .shop-ptags .is-hit { background: var(--lime); color: var(--lime-ink); }
.shop-page .shop-ptags .is-warn { background: #FAECE7; color: #993C1D; }
.shop-page .shop-toggles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shop-page .shop-toggles .cst-field { margin-bottom: 14px; }
@media (max-width: 640px) { .shop-page .shop-toggles { grid-template-columns: 1fr; } }
.shop-page .shop-varrow { display: grid; grid-template-columns: minmax(0, 1fr) 96px auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.shop-page .cst-field .shop-varstock { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.shop-page .shop-varstock input { width: 16px; height: 16px; padding: 0; margin: 0; border-radius: 4px; }
.shop-page .shop-iconbtn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--field); color: var(--ink-soft); cursor: pointer; }
.shop-page .shop-iconbtn:hover { background: rgba(20,20,15,0.09); }
.shop-page .shop-iconbtn svg { width: 14px; height: 14px; }
.shop-page .shop-iconbtn.is-sure { background: #FAECE7; color: #993C1D; }
.shop-page .shop-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.shop-page .shop-photo { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--field); }
.shop-page .shop-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-page .shop-photo-main { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font-size: 11px; font-weight: 700; }
.shop-page .shop-photo-first { position: absolute; left: 6px; bottom: 6px; height: auto; margin: 0; padding: 2px 8px; border: 0; border-radius: 999px; background: rgba(20,20,15,0.72); color: #fff; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.shop-page .shop-photo-del { position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(20,20,15,0.72); color: #fff; cursor: pointer; }
.shop-page .shop-photo-del svg { width: 12px; height: 12px; }
.shop-page .shop-photo-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 1; height: auto; width: 100%; margin: 0; padding: 0; border: 1.5px dashed var(--line); border-radius: 12px; background: none; color: var(--ink-soft); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.shop-page .shop-photo-add:hover { background: var(--field); }
.shop-page .shop-photo-add svg { width: 18px; height: 18px; }
.shop-page .shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shop-page .shop-foot .cst-submit { width: auto; min-width: 190px; margin: 0 0 0 auto; padding: 0 28px; }
.shop-page .shop-catrow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.shop-page .shop-catrow input, .shop-page .shop-catadd input { width: 100%; font-family: inherit; font-size: 14px; color: var(--ink); border: 1px solid var(--line); background: var(--field); border-radius: 12px; padding: 9px 12px; }
.shop-page .shop-catrow input:focus, .shop-page .shop-catadd input:focus { outline: none; border-color: var(--ink); background: #fff; }
.shop-page .shop-catcount { min-width: 22px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-faint); }
.shop-page .shop-catadd { display: flex; gap: 8px; margin-top: 14px; }
.shop-page .shop-catadd .shop-ghost-btn { padding: 9px 18px; }

/* Магазин: цілі й набори (admin/shop_goals.php) */
.shop-page .shop-ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; align-items: start; margin-top: 22px; }
.shop-page .shop-ggrid .cst-empty-shell { grid-column: 1 / -1; }
.shop-page .shop-gcard { background: var(--panel); border: 1px solid rgba(20,20,15,0.06); border-radius: 22px; box-shadow: 0 2px 6px rgba(20,20,15,0.05), 0 16px 36px rgba(20,20,15,0.08); padding: 20px; }
.shop-page .shop-gcard.is-hidden { opacity: 0.66; }
.shop-page .shop-ghead { display: flex; align-items: center; gap: 12px; }
.shop-page .shop-gicon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 14px; background: var(--ink); color: var(--lime); }
.shop-page .shop-gicon svg { width: 20px; height: 20px; }
.shop-page .shop-gtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.shop-page .shop-gtext b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 17px; }
.shop-page .shop-gtext span { font-size: 12.5px; color: var(--ink-soft); }
.shop-page .shop-gcard .shop-ptags { margin: 10px 0 0; }
.shop-page .shop-sets { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 12px; }
.shop-page .shop-sets .shop-note { margin: 0; }
.shop-page .shop-setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; transition: background .12s ease; }
.shop-page .shop-setrow:hover { background: var(--field); }
.shop-page .shop-setrow:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.shop-page .shop-setrow.is-hidden { opacity: 0.6; }
.shop-page .shop-setname, .shop-page .shop-setprice { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.shop-page .shop-setprice { align-items: flex-end; text-align: right; flex-shrink: 0; }
.shop-page .shop-setname b { font-size: 14px; font-weight: 600; }
.shop-page .shop-setname span, .shop-page .shop-setprice span { font-size: 12px; color: var(--ink-soft); }
.shop-page .shop-setprice b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 15px; }
.shop-page .shop-setprice span { color: #3F6212; font-weight: 600; }
.shop-page .shop-iconpick { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-page .shop-iconopt { position: relative; margin: 0; cursor: pointer; }
.shop-page .cst-field .shop-iconopt { display: block; margin: 0; }
.shop-page .shop-iconopt input { position: absolute; opacity: 0; width: 1px; height: 1px; padding: 0; margin: 0; }
.shop-page .shop-iconopt span { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--field); color: var(--ink-soft); }
.shop-page .shop-iconopt span svg { width: 22px; height: 22px; }
.shop-page .shop-iconopt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.shop-page .shop-iconopt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.shop-page .shop-pick { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.shop-page .shop-pickrow { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.shop-page .shop-pickrow:last-child { border-bottom: 0; }
.shop-page .shop-pickrow.is-on { background: rgba(199,244,100,0.18); }
.shop-page .cst-field .shop-pickname { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; min-width: 0; }
.shop-page .shop-pickname input { width: 16px; height: 16px; padding: 0; margin: 0; flex-shrink: 0; border-radius: 4px; }
.shop-page .shop-pickname span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-page .shop-pickprice { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.shop-page .cst-field input.shop-pickqty { width: 64px; padding: 6px 8px; text-align: center; }
.shop-page .shop-sum { display: flex; align-items: center; min-height: 42px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); font-size: 13.5px; font-weight: 600; color: var(--ink); }

/* Магазин: заявки (admin/shop_orders.php) */
.shop-page .shop-ofilter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.shop-page .shop-ofilter .shop-filterbar { margin: 0; flex: 0 1 280px; }
.shop-page .shop-osearch { flex: 1 1 240px; max-width: 360px; font-family: inherit; font-size: 14px; color: var(--ink); border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px 13px; }
.shop-page .shop-osearch:focus { outline: none; border-color: var(--ink); }
.shop-page .shop-otable-shell { margin-top: 16px; padding: 8px; }
.shop-page .shop-otable { display: flex; flex-direction: column; }
.shop-page .shop-orow { display: grid; grid-template-columns: 64px minmax(0, 1fr) 92px 110px 128px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; cursor: pointer; transition: background .12s ease; }
.shop-page .shop-orow[hidden] { display: none; }
.shop-page .shop-orow:hover { background: var(--field); }
.shop-page .shop-orow:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.shop-page .shop-onum { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; }
.shop-page .shop-obuyer { display: flex; flex-direction: column; min-width: 0; }
.shop-page .shop-obuyer b { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-page .shop-obuyer span { font-size: 12.5px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-page .shop-odate { font-size: 12.5px; color: var(--ink-soft); }
.shop-page .shop-osum { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; text-align: right; }
.shop-page .shop-ostatus { justify-self: end; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--field); color: var(--ink-soft); }
.shop-page .shop-ostatus.is-new { background: var(--lime); color: var(--lime-ink); }
.shop-page .shop-ostatus.is-confirmed { background: #E6F1FB; color: #0C447C; }
.shop-page .shop-ostatus.is-shipped { background: #FAEEDA; color: #633806; }
.shop-page .shop-ostatus.is-done { background: #EAF3DE; color: #27500A; }
.shop-page .shop-ostatus.is-cancelled { background: #FAECE7; color: #993C1D; }
@media (max-width: 760px) {
    .shop-page .shop-orow { grid-template-columns: 56px minmax(0, 1fr) auto; }
    .shop-page .shop-odate, .shop-page .shop-osum { display: none; }
}
.shop-page .shop-ocard { padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; margin-bottom: 16px; }
.shop-page .shop-orows { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; }
.shop-page .shop-orows span, .shop-page .shop-ocomment span { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-faint); }
.shop-page .shop-orows b { font-size: 14px; font-weight: 600; word-break: break-word; }
.shop-page .shop-orows a { color: var(--ink); }
.shop-page .shop-ocomment { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--field); font-size: 14px; white-space: pre-line; }
.shop-page .shop-oitems { margin: 14px 0 0; padding: 0; list-style: none; }
.shop-page .shop-oitems li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.shop-page .shop-oitems small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); white-space: pre-line; }
.shop-page .shop-ototal { display: flex; justify-content: space-between; margin-top: 10px; font-size: 15px; }
.shop-page .shop-ototal b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 18px; }
.shop-page .shop-statuspick { display: flex; flex-wrap: wrap; gap: 8px; }
.shop-page .shop-statusopt { position: relative; margin: 0; cursor: pointer; }
.shop-page .cst-field .shop-statusopt { display: block; margin: 0; }
.shop-page .shop-statusopt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; }
.shop-page .shop-statusopt span { display: inline-flex; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.shop-page .shop-statusopt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.shop-page .shop-statusopt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.shop-page .cst-field .shop-check { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer; }
.shop-page .shop-check input { width: 16px; height: 16px; padding: 0; margin: 0; flex-shrink: 0; border-radius: 4px; }

.shop-page .shop-grid .shop-wide { grid-column: 1 / -1; }
.shop-page .shop-savebtn { width: auto; min-width: 200px; padding: 0 28px; }