/* ==========================================================================
   Pomnix — дизайн-система (редизайн 2026-08)
   Все классы с префиксом pmx-, чтобы не конфликтовать с Tailwind на старых
   страницах, пока они не переведены. Источник истины по токенам — этот файл.
   ========================================================================== */

/* ── Базовый сброс ──────────────────────────────────────────────────────────
   Раньше это давал preflight Tailwind. Когда CDN убрали, вместе с ним ушёл и
   `box-sizing: border-box` — карточка с padding стала шире своего max-width и
   на телефоне вылезала за экран. Держим свой минимум, чтобы не зависеть от
   чужого фреймворка. */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
img, video { display: block; max-width: 100%; }
svg { display: block; }
/* Иконка часто стоит внутри подписи («🍷 Спирт за период») — блочная уводит текст на новую строку */
.pmx-i { display: inline-block; vertical-align: -0.15em; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }

:root {
  /* Эмодзи-шрифт в хвосте обязателен: свои шрифты грузятся локально и эмодзи
     в них нет, а без запасного браузер рисует обрубки — в примерах реплик
     бота «📉» превращалось в чёрный уголок. */
  --pmx-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --pmx-font: 'Golos Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
  --pmx-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji';
}

/* Мелкие подписи по всему сайту сидели на самом бледном сером (.30) — с боя
   пришло «фокус дня не видно». Текстовые ступени подняты, а заливки, рамки и
   точки графиков уехали в отдельный --pmx-line: им бледность как раз нужна. */
/* ── Токены: светлая тема (по умолчанию) ── */
:root, :root[data-theme="light"] {
  --pmx-bg: #f5f6f8;
  --pmx-surface: #ffffff;
  --pmx-raised: #ffffff;
  --pmx-ink: #17191c;
  --pmx-ink2: rgba(23, 25, 28, .66);
  --pmx-ink3: rgba(23, 25, 28, .56);
  --pmx-ink4: rgba(23, 25, 28, .44);
  --pmx-line: rgba(23, 25, 28, .30);
  --pmx-hair: rgba(23, 25, 28, .075);
  --pmx-soft: rgba(23, 25, 28, .05);
  --pmx-acc: #0e8f5f;
  --pmx-acc-ink: #0b6b48;
  --pmx-acc-soft: rgba(14, 143, 95, .10);
  --pmx-acc-contrast: #ffffff;
  --pmx-warn: #b7791f;
  --pmx-bad: #b3423a;
  --pmx-card-shadow: none;
  --pmx-seg-glow: none;
  --pmx-shadow: 0 14px 34px -18px rgba(23, 25, 28, .25);
}

/* ── Токены: тёмная тема ── */
:root[data-theme="dark"] {
  --pmx-bg: #0f1113;
  --pmx-surface: #1a1e22;
  --pmx-raised: #23282d;
  --pmx-ink: #e9ebed;
  --pmx-ink2: rgba(233, 235, 237, .66);
  --pmx-ink3: rgba(233, 235, 237, .55);
  --pmx-ink4: rgba(233, 235, 237, .42);
  --pmx-line: rgba(233, 235, 237, .27);
  --pmx-hair: rgba(233, 235, 237, .07);
  --pmx-soft: rgba(233, 235, 237, .06);
  --pmx-acc: #3ac88f;
  --pmx-acc-ink: #5ad3a2;
  --pmx-acc-soft: rgba(58, 200, 143, .13);
  --pmx-acc-contrast: #0a1210;
  --pmx-warn: #d9a441;
  --pmx-bad: #e2716a;
  --pmx-card-shadow: none;
  --pmx-seg-glow: 0 0 14px -4px rgba(58, 200, 143, .55);
  --pmx-shadow: 0 14px 34px -18px rgba(0, 0, 0, .6);
}

/* ── Основа ── */
html { overflow-x: hidden; }
body.pmx {
  background: var(--pmx-bg);
  color: var(--pmx-ink);
  font-family: var(--pmx-font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
.pmx :where(a) { color: inherit; text-decoration: none; }  /* :where() = нулевая специфичность,
   иначе базовое правило перебивает цвет кнопок-ссылок (.pmx-btn и т.п.) */
.pmx :where(button) { font: inherit; }
.pmx :focus-visible { outline: 2px solid var(--pmx-acc); outline-offset: 2px; border-radius: 6px; }
.pmx-num { font-variant-numeric: tabular-nums; }
.pmx-mono { font-family: var(--pmx-mono); font-variant-numeric: tabular-nums; }
.pmx-i { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; flex: none; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .pmx-up { opacity: 0; transform: translateY(10px); animation: pmx-up .5s cubic-bezier(.2,.7,.2,1) forwards; }
  @keyframes pmx-up { to { opacity: 1; transform: none; } }
  .pmx-d1 { animation-delay: .04s } .pmx-d2 { animation-delay: .1s } .pmx-d3 { animation-delay: .16s }
  .pmx-d4 { animation-delay: .22s } .pmx-d5 { animation-delay: .3s }  .pmx-d6 { animation-delay: .38s }
}

/* ── Шапка ── */
.pmx-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--pmx-bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pmx-hair);
}
.pmx-nav { max-width: 1120px; margin: 0 auto; padding: 0 20px; height: 58px; display: flex; align-items: center; gap: 20px; }
.pmx-brand { font-weight: 900; font-size: 17px; letter-spacing: -.02em; display: inline-flex; align-items: center; }
.pmx-brand i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pmx-acc); margin-left: 3px; transition: transform .3s; }
.pmx-brand:hover i { transform: scale(1.5); }
.pmx-tabs { display: none; gap: 4px; }
.pmx-tabs a { padding: 7px 13px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--pmx-ink2); transition: background .15s, color .15s; white-space: nowrap; }
.pmx-tabs a:hover { color: var(--pmx-ink); }
.pmx-tabs a.on { background: var(--pmx-surface); color: var(--pmx-ink); }
.pmx-end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pmx-iconbtn { position: relative; color: var(--pmx-ink3); background: none; border: none; cursor: pointer; display: flex; padding: 4px; border-radius: 8px; transition: color .15s, background .15s; }
.pmx-iconbtn:hover { color: var(--pmx-ink); background: var(--pmx-soft); }
.pmx-iconbtn.has-dot::after { content: ''; position: absolute; top: 1px; right: 1px; width: 6px; height: 6px; border-radius: 50%; background: var(--pmx-acc); }
.pmx-ava { width: 30px; height: 30px; border-radius: 50%; background: var(--pmx-surface); border: 1px solid var(--pmx-hair); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: var(--pmx-ink2); }

/* ── Каркас страницы ── */
.pmx-wrap { max-width: 1120px; margin: 0 auto; padding: 26px 20px 110px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 48px; }
.pmx-wrap > main { min-width: 0; }
.pmx-rail { display: none; }
.pmx-msg { background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); border-radius: 14px; padding: 11px 16px; font-size: 14px; font-weight: 600; margin-bottom: 14px; }

/* ── Карточка ── */
.pmx-card { background: var(--pmx-surface); border: 1px solid var(--pmx-hair); box-shadow: var(--pmx-card-shadow); border-radius: 18px; }

/* ── Навигация по дню ── */
.pmx-kick { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--pmx-ink2); flex-wrap: wrap; }
.pmx-kick .pmx-step { color: var(--pmx-ink4); background: none; border: none; cursor: pointer; padding: 2px 7px; border-radius: 8px; transition: background .15s, color .15s; }
.pmx-kick .pmx-step:hover { background: var(--pmx-soft); color: var(--pmx-ink2); }
@media (max-width: 560px) { .pmx-kick .pmx-now { display: none; } }
.pmx-kick .pmx-now { margin-left: 4px; font-family: var(--pmx-mono); font-size: 11px; color: var(--pmx-ink4); }
.pmx-scope { margin-left: auto; display: flex; gap: 2px; background: var(--pmx-soft); border-radius: 10px; padding: 2px; }
.pmx-scope a { font-size: 12.5px; font-weight: 600; color: var(--pmx-ink3); padding: 4px 11px; border-radius: 8px; transition: all .15s; }
.pmx-scope a.on { background: var(--pmx-raised); color: var(--pmx-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ── Блок «фокус дня» (якорь + вторичные метрики) ── */
.pmx-focus { margin-top: 18px; padding: 0; position: relative; z-index: 5; }  /* над соседями, чтобы поповер фокуса был поверх */  /* padding — у внутренних блоков, иначе поповер режется */
.pmx-focus .pmx-hero { padding: 18px 20px 0; }
.pmx-hero .pmx-lab { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pmx-ink2); display: flex; align-items: center; gap: 10px; }
.pmx-hero .pmx-lab .pmx-change { letter-spacing: .02em; text-transform: none; font-size: 12px; font-weight: 700; color: var(--pmx-acc-ink); }
.pmx-hero .pmx-big { font-size: 52px; font-weight: 900; letter-spacing: -.04em; line-height: 1.02; margin-top: 2px; }
.pmx-hero .pmx-big small { font-size: 20px; font-weight: 700; color: var(--pmx-ink4); letter-spacing: -.02em; margin-left: 2px; }
.pmx-hero .pmx-big small.unit { margin-left: 8px; letter-spacing: 0; }
.pmx-hero .pmx-cap { margin-top: 10px; font-size: 13.5px; color: var(--pmx-ink2); }
.pmx-hero .pmx-cap b { color: var(--pmx-ink); font-weight: 700; }

.pmx-daybar { margin-top: 16px; display: flex; gap: 2.5px; height: 10px; }
.pmx-daybar span { border-radius: 5px; background: var(--pmx-soft); }
.pmx-daybar .seg { background: var(--pmx-acc); box-shadow: var(--pmx-seg-glow); transition: filter .15s; }
.pmx-daybar .seg:hover { filter: brightness(1.12); }
.pmx-daybar .rest { flex: 1; }
.pmx-daybar-legend { display: flex; gap: 16px; margin-top: 9px; font-size: 12px; color: var(--pmx-ink3); flex-wrap: wrap; }
.pmx-daybar-legend b { color: var(--pmx-ink2); font-family: var(--pmx-mono); font-weight: 500; font-size: 11.5px; }
.pmx-daybar-legend .dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--pmx-acc); margin-right: 6px; vertical-align: 1px; }
.pmx-daybar-legend .dot.ghost { background: var(--pmx-soft); outline: 1px solid var(--pmx-hair); }

.pmx-strip { display: flex; gap: 0; margin: 16px 0 0; border-top: 1px solid var(--pmx-hair); border-radius: 0 0 17px 17px; overflow: hidden; overflow-x: auto; scrollbar-width: none; }
.pmx-strip::-webkit-scrollbar { display: none; }
.pmx-strip .cell { flex: 1; min-width: 112px; border-left: 1px solid var(--pmx-hair); padding: 12px 16px 14px; transition: background .15s; }
.pmx-strip .cell:first-child { border-left: none; }
.pmx-strip .cell:hover { background: var(--pmx-soft); }
.pmx-strip .l { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pmx-ink2); }
.pmx-strip .v { font-size: 16px; font-weight: 800; margin-top: 2px; white-space: nowrap; }
.pmx-strip .v small { font-size: 11px; font-weight: 500; color: var(--pmx-ink4); font-family: var(--pmx-mono); }
.pmx-strip .bar { height: 2.5px; border-radius: 2px; background: var(--pmx-soft); margin-top: 9px; overflow: hidden; }
.pmx-strip .bar i { display: block; height: 100%; border-radius: 2px; background: var(--pmx-line); }
.pmx-strip .bar i.ok { background: var(--pmx-acc); }
/* На телефоне четыре ячейки по 112 px не помещаются в карточку и уезжали в
   боковую прокрутку — причём полоса прокрутки скрыта, так что четвёртая
   метрика просто пропадала из виду. Раскладываем сеткой 2×2; линии рисует
   просвет между ячейками, а не рамки, иначе на стыках получается двойная. */
@media (max-width: 620px) {
  .pmx-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--pmx-hair); overflow: hidden; }
  .pmx-strip .cell { min-width: 0; border-left: none; background: var(--pmx-surface); }
  /* Нечётная последняя осталась бы одна в ряду с пустой половиной рядом */
  .pmx-strip .cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── Реплика Помникса ── */
.pmx-moment { margin-top: 22px; background: var(--pmx-acc-soft); border-radius: 18px; padding: 16px 18px; display: flex; gap: 13px; align-items: flex-start; }
.pmx-moment .av { width: 30px; height: 30px; border-radius: 50%; background: var(--pmx-acc); color: var(--pmx-acc-contrast); display: flex; align-items: center; justify-content: center; flex: none; font-weight: 900; font-size: 14px; box-shadow: var(--pmx-seg-glow); }
.pmx-moment .who { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pmx-acc-ink); }
.pmx-moment p { font-size: 14px; color: var(--pmx-ink2); margin-top: 3px; line-height: 1.55; }
.pmx-moment p b { color: var(--pmx-ink); font-weight: 700; }
.pmx-btn { margin-top: 11px; display: inline-flex; align-items: center; gap: 8px; background: var(--pmx-acc); color: var(--pmx-acc-contrast); border: none; border-radius: 12px; padding: 9px 15px; font-size: 13px; font-weight: 700; cursor: pointer; transition: transform .12s, filter .15s; }
.pmx-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.pmx-btn:active { transform: translateY(0) scale(.98); }

/* ── Заголовок секции ── */
.pmx-sec { margin: 28px 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--pmx-ink3); display: flex; align-items: baseline; gap: 10px; }
.pmx-sec .more { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--pmx-acc-ink); }

/* ── «Осталось сегодня» ── */
.pmx-todo { padding: 6px 16px; }
.pmx-todo .row { display: flex; align-items: center; gap: 13px; padding: 11px 0; }
.pmx-todo .row + .row { border-top: 1px solid var(--pmx-hair); }
.pmx-todo .ring { width: 22px; height: 22px; border-radius: 50%; border: 1.8px solid var(--pmx-line); flex: none; display: flex; align-items: center; justify-content: center; transition: all .18s cubic-bezier(.3,.7,.4,1.4); color: transparent; background: none; cursor: pointer; padding: 0; }
.pmx-todo .ring:hover { border-color: var(--pmx-acc); }
.pmx-todo .ring.done { background: var(--pmx-acc); border-color: var(--pmx-acc); color: var(--pmx-acc-contrast); }
.pmx-todo .ring svg { width: 12px; height: 12px; stroke-width: 3; }
.pmx-todo .t { font-weight: 600; font-size: 14.5px; }
.pmx-todo .d { font-size: 12.5px; color: var(--pmx-ink3); }
.pmx-todo .streak { font-size: 11.5px; font-weight: 700; color: var(--pmx-warn); margin-left: 7px; font-family: var(--pmx-mono); }
/* Действие в строке дела: у воды это ссылка, у плана — кнопка формы. Выглядеть
   они должны одинаково, поэтому браузерные умолчания кнопки сбрасываем здесь. */
.pmx-todo .go { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--pmx-ink4);
  background: none; border: none; padding: 4px 2px; margin-right: -2px; font-family: inherit;
  cursor: pointer; white-space: nowrap; }
.pmx-todo .row:hover .go { color: var(--pmx-acc-ink); }
.pmx-todo .go:hover { color: var(--pmx-acc-ink); }
/* Вся строка — зона отметки, поэтому и курсор, и подсветка на всю строку */
.pmx-todo .row[data-row-toggle] { cursor: pointer; }
.pmx-todo .row[data-row-toggle]:hover .ring { border-color: var(--pmx-acc); }
.pmx-todo .row[data-row-toggle]:not(.done):hover .t { color: var(--pmx-acc-ink); }
/* Группы: добавки, привычки, вода — иначе список читается как одна каша */
.pmx-todo .group + .group { margin-top: 6px; border-top: 1px solid var(--pmx-hair); }
.pmx-todo .cap { padding: 11px 0 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pmx-ink3); }
.pmx-todo .group .row:first-of-type { border-top: none; }
.pmx-todo .body { min-width: 0; }
/* Закрытое дело остаётся в списке, но не мозолит глаза */
.pmx-todo .row.done .t, .pmx-todo .row.done .d { color: var(--pmx-line); }
.pmx-todo .row.done .t { text-decoration: line-through; text-decoration-color: var(--pmx-line); }
.pmx-todo .row.done .mark small { opacity: .7; }
/* Кружки справа — по одному на приём; вид строки один и тот же у всех дел */
.pmx-todo .marks { margin-left: auto; display: flex; align-items: flex-start; gap: 12px; flex: none; }
.pmx-todo .mark { display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 0; }
.pmx-todo .mark small { font-size: 10px; color: var(--pmx-ink4); line-height: 1; }
.pmx-todo .row[data-row-toggle] { cursor: pointer; }
.pmx-todo .row[data-row-toggle]:hover .ring { border-color: var(--pmx-acc); }
.pmx-todo .row[data-row-toggle]:not(.done):hover .t { color: var(--pmx-acc-ink); }
.pmx-empty { padding: 18px 16px; font-size: 13.5px; color: var(--pmx-ink3); }

/* ── Хроника дня (нить) ── */
.pmx-feed { position: relative; padding: 4px 18px; }
.pmx-feed::before { content: ''; position: absolute; left: 90.75px; top: 14px; bottom: 28px; width: 1.5px; background: var(--pmx-hair); }
/* Нить тянется между записями — в пустом дне ей не за что цепляться */
.pmx-feed.bare::before { display: none; }
.pmx-feed .row { position: relative; display: grid; grid-template-columns: 44px 33px 1fr auto; gap: 0 13px; align-items: center; padding: 12.5px 0; }
.pmx-feed time { font-size: 11px; font-weight: 500; color: var(--pmx-ink4); font-family: var(--pmx-mono); }
.pmx-feed .ic { position: relative; z-index: 1; width: 33px; height: 33px; border-radius: 11px; background: var(--pmx-soft); color: var(--pmx-ink3); display: flex; align-items: center; justify-content: center; outline: 3px solid var(--pmx-surface); }
.pmx-feed .ic .pmx-i { width: 16px; height: 16px; }
.pmx-feed .ic.done { background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
.pmx-feed .t { font-weight: 700; font-size: 14.5px; }
.pmx-feed .d { font-size: 12.5px; color: var(--pmx-ink3); margin-top: 1px; }
.pmx-feed .val { text-align: right; font-family: var(--pmx-mono); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.pmx-feed .val small { display: block; font-size: 11px; color: var(--pmx-ink4); font-weight: 500; }
.pmx-feed .ok { color: var(--pmx-acc); font-weight: 700; }
.pmx-feed .now-row { display: grid; grid-template-columns: 44px 1fr; gap: 0 13px; align-items: center; padding: 2px 0; }
.pmx-feed .now-row time { color: var(--pmx-acc-ink); font-weight: 600; }
.pmx-feed .now-line { position: relative; height: 1.5px; background: var(--pmx-acc); opacity: .5; border-radius: 1px; }
.pmx-feed .now-line::before { content: ''; position: absolute; left: 12.5px; top: -3.25px; width: 8px; height: 8px; border-radius: 50%; background: var(--pmx-acc); }
.pmx-feed .row.ghost .ic { background: transparent; border: 1.5px dashed var(--pmx-line); color: var(--pmx-line); }
.pmx-feed .row.ghost .t { color: var(--pmx-ink3); font-weight: 600; }
.pmx-feed .row.ghost .val { color: var(--pmx-acc-ink); font-weight: 600; }
/* Миниатюра — ссылка на полноразмерное фото, поэтому размеры на обёртке, а
   картинка заполняет её целиком: иначе 33-пиксельная колонка сетки поедет */
.pmx-feed .thumb { display: block; width: 33px; height: 33px; border-radius: 11px; overflow: hidden; outline: 3px solid var(--pmx-surface); position: relative; z-index: 1; cursor: zoom-in; }
.pmx-feed .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pmx-feed .thumb:hover { outline-color: var(--pmx-acc); }

/* ── Тихие показатели ── */
.pmx-quiet { padding: 6px 16px; }
.pmx-quiet .row { display: flex; align-items: center; gap: 12px; padding: 11.5px 0; font-size: 13.5px; }
.pmx-quiet .row + .row { border-top: 1px solid var(--pmx-hair); }
.pmx-quiet .row .pmx-i { width: 16px; height: 16px; color: var(--pmx-line); }
.pmx-quiet .lab { color: var(--pmx-ink2); font-weight: 600; }
.pmx-quiet .val { margin-left: auto; font-weight: 700; text-align: right; }
.pmx-quiet .val small { display: block; margin-top: 2px; color: var(--pmx-ink4);
  font-weight: 500; font-size: 12px; }

/* ── Подвал ── */
.pmx-footer { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--pmx-hair); display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--pmx-ink4); font-weight: 600; flex-wrap: wrap; }
.pmx-footer .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pmx-acc); }
.pmx-footer b { color: var(--pmx-acc-ink); font-weight: 700; }
.pmx-footer .pmx-mono { font-size: 11px; }

/* ── Нижняя навигация (мобайл / Mini App) ── */
.pmx-bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: color-mix(in srgb, var(--pmx-bg) 88%, transparent);
  backdrop-filter: blur(14px); border-top: 1px solid var(--pmx-hair);
  display: flex; padding: 6px 10px calc(10px + env(safe-area-inset-bottom));
}
.pmx-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 2px; font-size: 10.5px; font-weight: 700; color: var(--pmx-ink4); border-radius: 12px; }
.pmx-bottomnav a.on { color: var(--pmx-acc-ink); }
.pmx-bottomnav .pmx-i { width: 21px; height: 21px; }

/* ── Каталог разделов ── */
/* minmax(0,1fr), иначе длинное название распирает колонку и сетка вылезает за экран */
.pmx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 430px) { .pmx-grid { grid-template-columns: minmax(0, 1fr); } }
.pmx-mcard { position: relative; padding: 16px 17px 15px; display: flex; flex-direction: column; transition: transform .15s, border-color .15s, box-shadow .2s; }
/* Карточка с открытым попапом поднимается над соседями, иначе он обрезается */
.pmx-mcard.picking { z-index: 30; }
.pmx-mcard:hover { transform: translateY(-2px); border-color: var(--pmx-line); box-shadow: var(--pmx-shadow); }
.pmx-mcard .top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pmx-mcard .mic { width: 36px; height: 36px; border-radius: 12px; background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); display: flex; align-items: center; justify-content: center; }
.pmx-mcard .name { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.pmx-mcard .pin { white-space: nowrap; margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pmx-acc-ink); background: var(--pmx-acc-soft); border-radius: 99px; padding: 3px 8px; }
.pmx-mcard .pin.off { color: var(--pmx-ink4); background: var(--pmx-soft); }
.pmx-mcard .big { font-size: 24px; font-weight: 900; letter-spacing: -.03em; }
.pmx-mcard .big small { margin-left: 5px; font-size: 13px; font-weight: 600;
  letter-spacing: 0; color: var(--pmx-ink4); }
.pmx-mcard .sub { font-size: 12.5px; color: var(--pmx-ink3); margin-top: 2px; min-height: 19px; }
.pmx-mcard .viz { margin-top: 12px; height: 14px; padding-right: 26px; display: flex; align-items: flex-end; }
.pmx-mcard .viz:empty { height: 0; margin: 0; }
.pmx-mcard .go { position: absolute; right: 14px; bottom: 13px; color: var(--pmx-line); font-weight: 700; transition: color .15s, transform .15s; }
/* Ссылка растянута под содержимым: кликается вся карточка, но переключатель
   режима лежит выше и перехватывает свои клики сам.

   Содержимое лежит НАД ссылкой (иначе попап режима оказывался под цифрами),
   поэтому мышь оно не ловит: без этого клик по названию или по крупной цифре
   упирался в них и никуда не вёл — открыть раздел удавалось только с пустого
   места, и было непонятно, куда жать. Обратно события возвращаем ровно тем,
   кто сам на них отвечает: переключателю режима и ручке перетаскивания. */
.pmx-mcard .hit { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.pmx-mcard > *:not(.hit):not(.go) { position: relative; z-index: 1; pointer-events: none; }
.pmx-mcard .badge, .pmx-mcard .grip { pointer-events: auto; }
/* Шапка с открытым попапом — над цифрами своей карточки: блоки лежат на одном
   слое, и цифры, идущие в разметке ниже, рисовались поверх попапа. Со стороны
   это выглядело так, будто он полупрозрачный. */
.pmx-mcard.picking > .top { z-index: 5; }
.pmx-mcard .go { z-index: 1; }
/* Бейдж режима в шапке карточки: значок вместо трёх кнопок внизу — те
   занимали половину карточки, хотя это статус, а не действие */
/* Не relative: попап должен мерить ширину по шапке карточки, а не по значку */
.pmx-mcard .badge { margin-left: auto; }
.pmx-mcard .badge > button { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--pmx-soft); border: none; border-radius: 50%; cursor: pointer; color: var(--pmx-ink3); transition: background .15s, color .15s; padding: 0; }
.pmx-mcard .badge > button .pmx-i { width: 13px; height: 13px; }
.pmx-mcard .badge > button:hover { background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
.pmx-mcard .badge > button.today { background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
.pmx-mcard .badge > button.off { color: var(--pmx-ink4); }
/* Попап открывается влево: бейдж стоит у правого края карточки */
/* Попап ложится на всю ширину карточки: узкий оставлял её цифры выглядывать
   сбоку, и это читалось как просвечивание. Тень сильнее обычной — иначе слой
   поверх белой карточки не отличить от самой карточки. */
.pmx-mcard .badge .pmx-menu { top: calc(100% + 8px); left: 0; right: 0; width: auto; padding: 5px;
  box-shadow: 0 18px 40px -14px rgba(23, 25, 28, .30), 0 2px 8px -2px rgba(23, 25, 28, .12); }
:root[data-theme="dark"] .pmx-mcard .badge .pmx-menu { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .75), 0 0 0 1px rgba(233, 235, 237, .10); }
.pmx-mcard .badge .pmx-menu button { align-items: flex-start; text-align: left; padding: 7px 9px; font-size: 13px; }
.pmx-mcard .badge .pmx-menu button small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--pmx-ink3); line-height: 1.3; }
.pmx-mcard .badge .pmx-menu button.on small { color: var(--pmx-acc-ink); opacity: .8; }
/* Ручка перетаскивания — только там, где перетаскивание вообще работает:
   на тач-экранах её нет, иначе это обещание, которого интерфейс не держит */
/* Тащат за ручку, а не за карточку: у карточки курсор ссылки, «хватайка»
   живёт только на точечках. Бледная в покое, она проявляется, когда мышь на
   карточке, — предложение переставить не должно спорить с содержимым */
.pmx-mcard .grip { display: none; color: var(--pmx-line); font-size: 15px; cursor: grab;
    padding: 0 2px; opacity: .55; transition: opacity .15s, color .15s; }
.pmx-mcard:hover .grip { opacity: 1; }
.pmx-mcard .grip:hover { color: var(--pmx-ink3); }
.pmx-mcard .grip:active { cursor: grabbing; }
.pmx-mcard .top > .grip:not(:last-child), .pmx-mcard .badge + .grip { margin-left: 6px; }
.pmx-mcard .top > .name + .grip { margin-left: auto; }
.pmx-grid.draggable .pmx-mcard .grip { display: inline; }
.pmx-grid.draggable .pmx-mcard.dragging { opacity: .5; cursor: grabbing; }
.pmx-mcard:hover .go { color: var(--pmx-acc-ink); transform: translateX(2px); }
.pmx-mcard.soon { border-style: dashed; background: transparent; }
.pmx-mcard.soon .mic { background: var(--pmx-soft); color: var(--pmx-line); }
.pmx-mcard.soon .name { color: var(--pmx-ink3); }
.pmx-bar1 { width: 100%; height: 3px; border-radius: 2px; background: var(--pmx-soft); overflow: hidden; }
.pmx-bar1 i { display: block; height: 100%; border-radius: 2px; background: var(--pmx-acc); }
.pmx-dots { display: flex; gap: 5px; }
.pmx-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--pmx-acc); }
.pmx-dots i.off { background: var(--pmx-soft); box-shadow: inset 0 0 0 1px var(--pmx-hair); }
.pmx-wk { display: flex; gap: 3.5px; width: 100%; }
.pmx-wk i { flex: 1; border-radius: 2px; background: var(--pmx-acc); height: 10px; }
.pmx-wk i.off { background: var(--pmx-soft); }

/* ── Десктоп ── */
@media (min-width: 760px) {
  .pmx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
@media (min-width: 1024px) {
  .pmx-tabs { display: flex; }
  .pmx-wrap { padding-top: 34px; padding-bottom: 40px; }
  .pmx-wrap:has(.pmx-rail) { grid-template-columns: minmax(0, 1fr) 300px; }
  .pmx-rail { display: block; }
  .pmx-rail .box { padding: 16px 18px; margin-bottom: 16px; }
  .pmx-rail .pmx-sec { margin-top: 0; }
  .pmx-rail .pmx-todo, .pmx-rail .pmx-quiet { padding: 0; }
  .pmx-mobile-only { display: none !important; }
  .pmx-bottomnav { display: none; }
  .pmx-hero .pmx-big { font-size: 64px; }
}

/* ── Вход ── */
.pmx-auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 20px; gap: 18px; }
.pmx-auth .box { width: 100%; max-width: 400px; padding: 30px 28px 26px; }
.pmx-auth .logo { font-size: 26px; font-weight: 900; letter-spacing: -.03em; display: flex; align-items: center; justify-content: center; }
.pmx-auth .logo i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pmx-acc); margin-left: 4px; }
.pmx-auth .tagline { text-align: center; font-size: 13.5px; color: var(--pmx-ink3); margin-top: 4px; }
.pmx-auth .steps { margin-top: 22px; background: var(--pmx-acc-soft); border-radius: 14px; padding: 14px 16px; font-size: 13.5px; color: var(--pmx-ink2); line-height: 1.7; }
.pmx-auth .steps b { color: var(--pmx-acc-ink); font-weight: 700; }
.pmx-auth .steps code { font-family: var(--pmx-mono); font-size: 12.5px; background: var(--pmx-surface); border-radius: 6px; padding: 1px 6px; }
.pmx-auth .tg { margin-top: 16px; width: 100%; justify-content: center; }
.pmx-auth .sep { display: flex; align-items: center; gap: 12px; margin: 22px 0 16px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pmx-ink4); }
.pmx-auth .sep::before, .pmx-auth .sep::after { content: ''; flex: 1; height: 1px; background: var(--pmx-hair); }
.pmx-field { width: 100%; background: var(--pmx-bg); border: 1px solid var(--pmx-hair); border-radius: 12px; padding: 11px 14px; font-family: var(--pmx-font); font-size: 14.5px; color: var(--pmx-ink); margin-bottom: 9px; transition: border-color .15s, background .15s; }
.pmx-field::placeholder { color: var(--pmx-line); }
.pmx-field:focus { outline: none; border-color: var(--pmx-acc); background: var(--pmx-surface); }
.pmx-btn-block { width: 100%; justify-content: center; margin-top: 4px; }
.pmx-alert { background: color-mix(in srgb, var(--pmx-bad) 12%, transparent); color: var(--pmx-bad); border-radius: 12px; padding: 10px 14px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
/* Пояснение, а не ошибка: происхождение цифр краснотой пугать не должно */
.pmx-alert.info { background: color-mix(in srgb, var(--pmx-warn) 10%, transparent); color: var(--pmx-warn); }
.pmx-auth .foot { font-size: 12px; color: var(--pmx-ink4); font-weight: 600; display: flex; gap: 8px; align-items: center; }
.pmx-btn-neutral { background: var(--pmx-ink); color: var(--pmx-bg); }

/* ── Переключатель фокуса дня ── */
.pmx-focus-pick { position: relative; }
.pmx-focus-pick .pmx-change { cursor: pointer; background: none; border: none; padding: 2px 6px; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--pmx-acc-ink); letter-spacing: .02em; text-transform: none; }
.pmx-focus-pick .pmx-change:hover { background: var(--pmx-acc-soft); }
.pmx-menu { text-transform: none; letter-spacing: normal; position: absolute; top: 26px; left: 0; z-index: 50; width: 240px; padding: 6px; background: var(--pmx-raised); border: 1px solid var(--pmx-hair); border-radius: 14px; box-shadow: var(--pmx-shadow); }
.pmx-menu .head { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pmx-ink3); padding: 6px 10px 5px; }
.pmx-menu button { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--pmx-ink2); }
.pmx-menu button:hover { background: var(--pmx-soft); color: var(--pmx-ink); }
.pmx-menu button.on { background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
.pmx-menu button .tick { margin-left: auto; opacity: 0; font-weight: 800; }
.pmx-menu button.on .tick { opacity: 1; }
.pmx-hero .pmx-bigtext { font-size: 44px; font-weight: 900; letter-spacing: -.035em; line-height: 1.06; margin-top: 4px; }
/* Поповер настройки экрана: фокус и метрики в одном списке, поэтому шире и с
   собственной прокруткой — на телефоне он занимает почти весь экран */
.pmx-menu.wide { width: min(430px, calc(100vw - 24px)); max-height: min(78vh, 560px); overflow-y: auto; }
.pmx-menu.wide .pmx-checks { max-height: none; overflow: visible; }
.pmx-menu.wide .pmx-checks label { padding: 8px 9px; }

/* «Крупно» и «Рядом» — два разных вопроса, поэтому стоят колонками, а не одним
   списком подряд: девять метрик в столбик занимали весь экран, и второй список
   уезжал под нижний край — понять, что он там есть, было нельзя. */
.pmx-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4px; }
.pmx-pick .col:nth-child(3) { border-left: 1px solid var(--pmx-hair); padding-left: 5px; }
.pmx-pick .pmx-menu-note, .pmx-pick .pmx-save { grid-column: 1 / -1; }
.pmx-pick .pmx-save { width: 100%; margin: 8px 0 2px; }
/* Кнопка держится у нижнего края: на телефоне список длиннее поповера, и
   «Сохранить» пряталось под сгибом — казалось, что сохранять нечем */
.pmx-pick .pmx-save { position: sticky; bottom: 0; box-shadow: 0 -8px 12px -8px var(--pmx-raised), 0 0 0 6px var(--pmx-raised); }

/* На телефоне две колонки списков рядом не помещаются — там они друг под
   другом, а поповер прижат правым краем к карточке, иначе он вылезает за
   экран и вся страница начинает ездить вбок */
@media (max-width: 620px) {
  .pmx-menu.wide { left: auto; right: 0; width: min(392px, calc(100vw - 48px)); }
  .pmx-pick { grid-template-columns: minmax(0, 1fr); }
  .pmx-pick .col:nth-child(3) { border-left: none; padding-left: 0; margin-top: 6px; border-top: 1px solid var(--pmx-hair); padding-top: 5px; }
  .pmx-pick .pmx-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 4px; }
}
.pmx-menu-note { padding: 2px 10px 0; font-size: 11.5px; color: var(--pmx-ink3); line-height: 1.4; }
.pmx-checks { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.pmx-checks label { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--pmx-ink2); cursor: pointer; }
.pmx-checks label:hover { background: var(--pmx-soft); color: var(--pmx-ink); }
.pmx-checks label.on { color: var(--pmx-acc-ink); }
/* Пятая метрика: видно, что предел достигнут, а не «галочка не ставится» */
.pmx-checks label.off { opacity: .45; cursor: not-allowed; }
.pmx-checks label.off:hover { background: none; color: var(--pmx-ink2); }
.pmx-checks input { accent-color: var(--pmx-acc); width: 15px; height: 15px; }
.pmx-menu .pmx-save { background: var(--pmx-acc); color: var(--pmx-acc-contrast); justify-content: center; padding: 9px 15px; border-radius: 12px; font-weight: 700; }
/* Кнопка держится у нижнего края: на телефоне список длиннее поповера, и
   «Сохранить» пряталось под сгибом — казалось, что сохранять нечем */
.pmx-menu.wide .pmx-save { position: sticky; bottom: 0; box-shadow: 0 -8px 12px -8px var(--pmx-raised), 0 0 0 6px var(--pmx-raised); }

/* ── Жучок: кнопка и панель обратной связи ── */
.pmx-fab {
  position: fixed; z-index: 60; width: 42px; height: 42px; border-radius: 50%;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(78px + env(safe-area-inset-bottom));  /* выше нижней навигации */
  background: color-mix(in srgb, var(--pmx-surface) 82%, transparent);
  backdrop-filter: blur(8px); border: 1px solid var(--pmx-hair); color: var(--pmx-ink3);
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.35); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.pmx-fab:hover { color: var(--pmx-ink); background: var(--pmx-surface); transform: translateY(-1px); }
.pmx-fab-badge {
  position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 99px; background: var(--pmx-acc); color: var(--pmx-acc-contrast);
  font-size: 10.5px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
@media (min-width: 1024px) { .pmx-fab { bottom: max(20px, env(safe-area-inset-bottom)); } }

.pmx-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.35); }
.pmx-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: 100%; max-width: 520px;
  background: var(--pmx-bg); border-left: 1px solid var(--pmx-hair);
  box-shadow: -18px 0 40px -24px rgba(0,0,0,.5); overflow-y: auto;
}
.pmx-panel-close {
  position: absolute; top: 12px; right: 16px; z-index: 2; background: none; border: none;
  font-size: 26px; line-height: 1; color: var(--pmx-ink4); cursor: pointer; padding: 2px 8px; border-radius: 8px;
}
.pmx-panel-close:hover { color: var(--pmx-ink); background: var(--pmx-soft); }
/* Просмотр фото во весь экран: поверх общего затемнения (.pmx-overlay) */
.pmx-lightbox { position: fixed; inset: 0; z-index: 72; display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.pmx-lightbox img { max-width: min(92vw, 900px); max-height: 88vh; border-radius: 16px; box-shadow: var(--pmx-shadow); }

.pmx-slide-in { transition: transform .22s cubic-bezier(.2,.7,.2,1); }
.pmx-slide-out { transition: transform .16s ease-in; }

/* содержимое панели (фрагменты /feedback/) */
.pmx-fb { padding: 20px 22px 28px; }
.pmx-fb h2 { font-size: 19px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 3px; }
.pmx-fb .lead { font-size: 13.5px; color: var(--pmx-ink3); margin-bottom: 16px; }
.pmx-fb .item { display: block; padding: 13px 15px; margin-bottom: 9px; border-radius: 14px; background: var(--pmx-surface); border: 1px solid var(--pmx-hair); cursor: pointer; transition: border-color .15s; }
.pmx-fb .item:hover { border-color: var(--pmx-line); }
.pmx-fb .item .top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pmx-ink3); font-weight: 600; }
.pmx-fb .item .msg { font-size: 14px; font-weight: 600; margin-top: 4px; }
.pmx-fb .status { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 99px; padding: 3px 9px; background: var(--pmx-soft); color: var(--pmx-ink3); }
.pmx-fb .status.new { background: color-mix(in srgb, var(--pmx-bad) 14%, transparent); color: var(--pmx-bad); }
.pmx-fb .status.progress { background: color-mix(in srgb, var(--pmx-warn) 16%, transparent); color: var(--pmx-warn); }
.pmx-fb .status.done { background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
.pmx-fb .dot-new { width: 7px; height: 7px; border-radius: 50%; background: var(--pmx-acc); display: inline-block; }
/* Фильтр обращений. Ждущие ответа лежат вперемешку с закрытыми и по виду от
   них не отличаются — у разбирающего десяток «готово» и два, где ждут его.
   Чип с числом заодно объясняет, что именно считает точка на кругляшке. */
.pmx-fb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.pmx-fb-tabs .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--pmx-ink3); background: var(--pmx-soft); cursor: pointer; transition: background .15s, color .15s; }
.pmx-fb-tabs .chip:hover { color: var(--pmx-ink2); }
.pmx-fb-tabs .chip.on { background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
.pmx-fb-tabs .chip b { font-weight: 800; }
/* Карточка, которая ждёт ответа, должна ловиться взглядом без чтения */
.pmx-fb .item:has(.dot-new) { border-color: color-mix(in srgb, var(--pmx-acc) 45%, transparent); background: var(--pmx-acc-soft); }
.pmx-fb textarea, .pmx-fb select, .pmx-fb input[type=text] { width: 100%; background: var(--pmx-surface); border: 1px solid var(--pmx-hair); border-radius: 12px; padding: 11px 14px; font-family: var(--pmx-font); font-size: 14.5px; color: var(--pmx-ink); margin-bottom: 10px; }
.pmx-fb textarea:focus, .pmx-fb select:focus { outline: none; border-color: var(--pmx-acc); }
.pmx-fb .kinds { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.pmx-fb .kinds label { flex: 1; min-width: 120px; text-align: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--pmx-hair); background: var(--pmx-surface); font-size: 13.5px; font-weight: 600; color: var(--pmx-ink2); cursor: pointer; }
.pmx-fb .kinds label:has(input:checked) { border-color: var(--pmx-acc); background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
.pmx-fb .kinds input { position: absolute; opacity: 0; pointer-events: none; }
.pmx-fb .bubble { padding: 11px 14px; border-radius: 14px; margin-bottom: 9px; font-size: 14px; max-width: 88%; }
.pmx-fb .bubble.mine { background: var(--pmx-acc-soft); color: var(--pmx-ink); margin-left: auto; }
.pmx-fb .bubble.theirs { background: var(--pmx-surface); border: 1px solid var(--pmx-hair); }
.pmx-fb .bubble.system { background: var(--pmx-soft); color: var(--pmx-ink3); font-size: 13px; text-align: center; max-width: 100%; }
.pmx-fb .bubble .when { display: block; font-size: 11px; color: var(--pmx-ink4); margin-top: 4px; font-family: var(--pmx-mono); }
.pmx-fb .back { font-size: 13px; font-weight: 700; color: var(--pmx-acc-ink); cursor: pointer; display: inline-block; margin-bottom: 12px; }
/* шапка панели жучка: заголовок + компактное действие, справа место под крестик */
.pmx-fb-head { display: flex; align-items: center; gap: 12px; padding-right: 36px; margin-bottom: 4px; }
.pmx-fb-head h2 { margin: 0; }
.pmx-fb .pmx-fb-new { margin: 0 0 0 auto; padding: 7px 14px; font-size: 13px; border-radius: 10px; white-space: nowrap; }
/* На отдельной странице заголовок и крестик закрытия не нужны — заголовок
   уже в шапке страницы. Без них кнопка оставалась одна справа, а слева
   зияла пустота: ставим её в начало строки и снимаем отступ под крестик. */
.pmx-fb-head.bare { padding-right: 0; }
.pmx-fb-head.bare .pmx-fb-new { margin-left: 0; }
.pmx-fb .status { flex: none; }
/* зона загрузки файла (жучок) */
.pmx-file-wrap { position: relative; margin-bottom: 12px; }
.pmx-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px dashed var(--pmx-line); border-radius: 14px; background: var(--pmx-surface); cursor: pointer; transition: all .15s; margin: 0; padding-right: 44px; }
.pmx-file:hover { border-color: var(--pmx-acc); background: var(--pmx-acc-soft); }
.pmx-file input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pmx-file .ic { width: 20px; height: 20px; color: var(--pmx-ink3); }
.pmx-file .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pmx-file .txt b { font-size: 14px; font-weight: 700; color: var(--pmx-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmx-file .txt small { font-size: 12px; color: var(--pmx-ink4); }
.pmx-file .prev { display: none; width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 1px solid var(--pmx-hair); }
.pmx-file-wrap.filled .prev { display: block; }
.pmx-file-wrap.filled .pmx-file { border-style: solid; border-color: var(--pmx-acc); background: var(--pmx-acc-soft); }
.pmx-file-wrap.filled .ic { display: none; }
.pmx-file-wrap.filled .txt b { color: var(--pmx-acc-ink); }
.pmx-file-wrap .rm { display: none; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); z-index: 2; background: none; border: none; cursor: pointer;
  font-size: 20px; line-height: 1; color: var(--pmx-ink4); padding: 4px 8px; border-radius: 8px; }
.pmx-file-wrap .rm:hover { color: var(--pmx-bad); background: var(--pmx-soft); }
.pmx-file-wrap.filled .rm { display: block; }

/* ── Запись еды с сайта (панель + кнопки в хронике) ── */
.pmx-add-meal { background: none; border: none; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--pmx-acc-ink); padding: 2px 6px; border-radius: 8px; }
.pmx-add-meal:hover { background: var(--pmx-acc-soft); }
.pmx-link { background: none; border: none; padding: 0; font: inherit; color: var(--pmx-acc-ink); font-weight: 700; cursor: pointer; }
/* Действие, которое выполняет модель, а не сам человек. Второстепенная
   кнопка рядом с главной: заливка мягким акцентом вместо сплошного —
   «Сохранить» должно оставаться единственным ярким пятном в панели.
   Искра — общий знак такого действия; пока идёт работа, она мигает. */
.pmx-ai { display: inline-flex; align-items: center; gap: 7px; background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); border: none; border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; transition: filter .15s, transform .12s; }
.pmx-ai:hover { filter: brightness(.96); transform: translateY(-1px); }
.pmx-ai:active { transform: translateY(0) scale(.98); }
.pmx-ai:disabled { opacity: .6; cursor: default; transform: none; }
.pmx-ai .pmx-i { width: 15px; height: 15px; }
.pmx-ai.busy .pmx-i { animation: pmx-spark 1.1s ease-in-out infinite; }
@keyframes pmx-spark { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }

.pmx-link:hover { text-decoration: underline; }
.pmx-feed .row .edit { position: absolute; right: -6px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .12s;
  background: var(--pmx-surface); border: 1px solid var(--pmx-hair); border-radius: 9px; padding: 5px; cursor: pointer; color: var(--pmx-ink3); line-height: 0; }
.pmx-feed .row:hover .edit, .pmx-feed .row .edit:focus-visible { opacity: 1; }
.pmx-feed .row .edit:hover { color: var(--pmx-acc-ink); border-color: var(--pmx-acc); }
.pmx-feed .row .edit .pmx-i { width: 14px; height: 14px; }

.pmx-meal { padding: 20px 22px 28px; }
.pmx-meal h2 { font-size: 19px; font-weight: 900; letter-spacing: -.02em; margin-bottom: 3px; }
.pmx-meal .lead { font-size: 13px; color: var(--pmx-ink3); margin-bottom: 16px; }
.pmx-meal .lab { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pmx-ink4); margin: 0 0 6px; }
.pmx-meal .sep { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--pmx-ink4); font-size: 12px; font-weight: 700; }
.pmx-meal .sep::before, .pmx-meal .sep::after { content: ""; flex: 1; height: 1px; background: var(--pmx-hair); }
.pmx-meal .pick { position: relative; margin-bottom: 4px; }
.pmx-meal .found { position: absolute; z-index: 3; left: 0; right: 0; top: 46px; max-height: 260px; overflow-y: auto;
  background: var(--pmx-raised); border: 1px solid var(--pmx-hair); border-radius: 14px; box-shadow: var(--pmx-shadow); padding: 5px; }
.pmx-meal .found button { display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 8px 10px; border-radius: 10px; }
.pmx-meal .found button:hover { background: var(--pmx-acc-soft); }
.pmx-meal .found b { display: block; font-size: 14px; font-weight: 700; color: var(--pmx-ink); }
.pmx-meal .found small { font-size: 11.5px; color: var(--pmx-ink4); }
.pmx-meal .hint { font-size: 12px; color: var(--pmx-ink4); margin: 2px 2px 8px; }

.pmx-meal .items { margin-top: 14px; border-top: 1px solid var(--pmx-hair); }
.pmx-meal .item { display: grid; grid-template-columns: 1fr 62px 14px auto 26px; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--pmx-hair); }
.pmx-meal .item .nm { min-width: 0; display: flex; align-items: baseline; gap: 5px; }
.pmx-meal .item .nm b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmx-meal .item .approx { color: var(--pmx-warn, var(--pmx-ink4)); font-weight: 700; cursor: help; }
.pmx-meal .item .g { width: 100%; background: var(--pmx-surface); border: 1px solid var(--pmx-hair); border-radius: 9px; padding: 6px 8px; font-size: 13.5px; color: var(--pmx-ink); text-align: right; }
.pmx-meal .item .g:focus { outline: none; border-color: var(--pmx-acc); }
.pmx-meal .item .unit { font-size: 12px; color: var(--pmx-ink4); }
.pmx-meal .item .kb { font-size: 11.5px; color: var(--pmx-ink4); white-space: nowrap; }
.pmx-meal .item .rm { background: none; border: none; cursor: pointer; font-size: 17px; line-height: 1; color: var(--pmx-ink4); padding: 2px 6px; border-radius: 8px; }
.pmx-meal .item .rm:hover { color: var(--pmx-bad); background: var(--pmx-soft); }

.pmx-meal .total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 4px; font-size: 13px; color: var(--pmx-ink3); }
.pmx-meal .total b { font-size: 15px; color: var(--pmx-ink); }
.pmx-meal .foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pmx-meal .foot .time { width: 92px; margin: 0; text-align: center; }
.pmx-meal .foot .pmx-btn { margin: 0 0 0 auto; }
.pmx-meal .del { display: block; margin: 18px auto 0; background: none; border: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--pmx-ink4); }
.pmx-meal .del:hover { color: var(--pmx-bad); }

/* ── откуда цифры: метка источника и выбор варианта ── */
.pmx-meal .found .grp { padding: 7px 10px 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pmx-ink4); }
.pmx-meal .found small { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--pmx-ink4); }
.src { flex: none; border: 1px solid var(--pmx-hair); background: var(--pmx-surface); border-radius: 7px; padding: 1px 6px;
  font-size: 10.5px; font-weight: 700; color: var(--pmx-ink3); cursor: default; white-space: nowrap; }
.src.ref { border-color: color-mix(in srgb, var(--pmx-acc) 45%, transparent); background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
.src.llm { border-color: color-mix(in srgb, var(--pmx-bad) 35%, transparent); background: color-mix(in srgb, var(--pmx-bad) 9%, transparent); color: var(--pmx-bad); }
.pmx-meal .item .src { cursor: pointer; }
.pmx-meal .item .src:hover { border-color: var(--pmx-acc); color: var(--pmx-acc-ink); }
.pmx-meal .item { position: relative; }
.pmx-meal .item .opts { grid-column: 1 / -1; margin: 2px 0 8px; padding: 9px 10px; background: var(--pmx-surface); border: 1px solid var(--pmx-hair); border-radius: 12px; }
.pmx-meal .item .opts .why { font-size: 11.5px; color: var(--pmx-ink4); margin-bottom: 7px; }
.pmx-meal .item .opt { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline; width: 100%; text-align: left;
  background: none; border: none; border-radius: 9px; padding: 6px 8px; cursor: pointer; font-size: 13px; color: var(--pmx-ink2); }
.pmx-meal .item .opt:hover { background: var(--pmx-acc-soft); }
.pmx-meal .item .opt.on { background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); font-weight: 600; }
.pmx-meal .item .opt b { font-size: 12px; color: var(--pmx-ink3); }
.pmx-meal .item .opt small { font-size: 10.5px; color: var(--pmx-ink4); }
.pmx-meal .item .opts .none { font-size: 12px; color: var(--pmx-ink4); margin: 0; }
.pmx-meal .pick .clear { position: absolute; top: 9px; right: 10px; background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--pmx-ink4); padding: 2px 6px; border-radius: 8px; }
.pmx-meal .pick .clear:hover { color: var(--pmx-ink); background: var(--pmx-soft); }

/* ── Итоги за период: тренд, столбики дней, топ продуктов, табель ── */
.pmx-trend { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--pmx-ink3); margin: -2px 0 14px; }
.pmx-trend.up { color: var(--pmx-acc-ink); }
.pmx-trend.down { color: var(--pmx-warn, var(--pmx-ink2)); }
.pmx-trend span { font-weight: 500; color: var(--pmx-ink4); font-size: 12.5px; }

.pmx-days { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 132px; margin: 6px 0 30px; }
.pmx-days .col { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; }
.pmx-days .col i { display: block; width: 100%; min-height: 2px; border-radius: 7px 7px 3px 3px; background: var(--pmx-line);
  opacity: .55; transition: opacity .15s, transform .15s; }
.pmx-days .col:hover i { opacity: 1; transform: scaleY(1.02); }
.pmx-days .col.hit i { background: var(--pmx-acc); opacity: .95; }
.pmx-days .col.low i { background: var(--pmx-line); opacity: .4; }
.pmx-days .col.empty i { background: repeating-linear-gradient(45deg, var(--pmx-hair) 0 4px, transparent 4px 8px); min-height: 4px; }
.pmx-days .col.future { opacity: .35; pointer-events: none; }
.pmx-days .col .v { order: -1; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--pmx-ink3); margin-bottom: 3px; }
.pmx-days .col.empty .v { display: none; }
.pmx-days .col .d { position: absolute; top: calc(100% + 5px); left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--pmx-ink4); white-space: nowrap; }
.pmx-days .col.weekend .d { color: color-mix(in srgb, var(--pmx-bad) 65%, var(--pmx-ink4)); }
.pmx-days .goal { position: absolute; left: 0; right: 0; border-top: 1px dashed color-mix(in srgb, var(--pmx-acc) 55%, transparent); pointer-events: none; }
.pmx-days .goal span { position: absolute; right: 0; top: -15px; font-size: 10px; font-weight: 700; color: var(--pmx-acc-ink); background: var(--pmx-surface); padding: 0 4px; border-radius: 5px; }
/* Месяц: 28–31 столбик — подписи только у каждого пятого, значения прячем */
.pmx-days.dense { gap: 2px; }
.pmx-days.dense .col i { border-radius: 4px 4px 2px 2px; }
.pmx-days.dense .col .v { display: none; }
.pmx-days.dense .col .d { font-size: 9px; }
.pmx-days.dense .col:not(:nth-child(5n+2)) .d { visibility: hidden; }

.pmx-toplist { padding: 6px 18px 10px; }
.pmx-toplist .row { display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(60px, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--pmx-hair); }
.pmx-toplist .row:last-child { border-bottom: none; }
.pmx-toplist .nm { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.pmx-toplist .nm b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmx-toplist .bar { height: 7px; border-radius: 4px; background: var(--pmx-soft); overflow: hidden; }
.pmx-toplist .bar i { display: block; height: 100%; border-radius: 4px; background: var(--pmx-acc); opacity: .75; }
.pmx-toplist .val { text-align: right; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pmx-toplist .val small { display: block; font-size: 10.5px; font-weight: 500; color: var(--pmx-ink4); }

/* Карточка табеля: свой отступ (у .pmx-card его нет) и скролл только внутри */
.pmx-tbl-card { padding: 14px 18px 16px; }
.pmx-tbl-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
.pmx-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.pmx-tbl th { padding: 0 2px 8px; font-weight: 600; color: var(--pmx-ink4); text-align: center; vertical-align: bottom; }
.pmx-tbl th.name, .pmx-tbl td.name { position: sticky; left: 0; z-index: 1; background: var(--pmx-surface); text-align: left;
  padding-right: 12px; width: 150px; min-width: 130px; max-width: 150px; }
/* Тень у липкой колонки — подсказка, что вправо есть ещё дни */
.pmx-tbl td.name::after, .pmx-tbl th.name::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 10px;
  background: linear-gradient(to right, var(--pmx-hair), transparent); opacity: .5; pointer-events: none; }
.pmx-tbl th .wd { display: block; font-size: 10px; }
.pmx-tbl th .dd { display: block; font-size: 12px; color: var(--pmx-ink3); }
.pmx-tbl th.weekend .wd, .pmx-tbl th.weekend .dd { color: color-mix(in srgb, var(--pmx-bad) 60%, var(--pmx-ink4)); }
.pmx-tbl th.today .dd { color: var(--pmx-acc-ink); font-weight: 800; }
.pmx-tbl td { padding: 6px 2px; text-align: center; border-top: 1px solid var(--pmx-hair); }
.pmx-tbl td.today { background: var(--pmx-acc-soft); }
.pmx-tbl td.name b, .pmx-tbl td.name small { display: block; max-width: 138px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmx-tbl td.name b { font-size: 13.5px; font-weight: 600; }
.pmx-tbl td.name small { font-size: 10.5px; color: var(--pmx-ink4); }
.pmx-tbl td.sum, .pmx-tbl th.sum { padding-left: 12px; color: var(--pmx-ink3); }
.pmx-tbl tbody tr:hover td:not(.today) { background: var(--pmx-soft); }
.mark { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 3px; border-radius: 7px; font-size: 12px; line-height: 1; }
.mark.on { background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); font-weight: 700; }
.mark.part { background: color-mix(in srgb, #eab308 22%, transparent); color: #a16207; font-size: 9.5px; font-weight: 700; }
.mark.due { background: color-mix(in srgb, #3b82f6 18%, transparent); color: #1d4ed8; }
.mark.missed { color: var(--pmx-bad); font-weight: 700; }
.mark.planned, .mark.none { color: var(--pmx-line); opacity: .6; }
.pmx-tbl-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; font-size: 11.5px; color: var(--pmx-ink4); }
.pmx-tbl-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ── Раздел «Еда»: списки продуктов и блюд, цены ── */
.pmx-list { padding: 4px 18px 8px; }
.pmx-list .row { display: grid; grid-template-columns: minmax(0, 1.4fr) auto auto; gap: 14px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--pmx-hair); cursor: pointer; }
.pmx-list .row:last-child { border-bottom: none; }
.pmx-list .row:hover { background: var(--pmx-soft); border-radius: 10px; box-shadow: 0 0 0 8px var(--pmx-soft); }
.pmx-list .nm { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pmx-list .nm b { font-size: 14.5px; font-weight: 600; }
.pmx-list .nm .parts { width: 100%; font-size: 11.5px; color: var(--pmx-ink4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmx-list .facts { text-align: right; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pmx-list .facts small, .pmx-list .price small { display: block; font-size: 10.5px; font-weight: 500; color: var(--pmx-ink4); }
.pmx-list .price { min-width: 92px; text-align: right; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pmx-list .price .none { font-size: 11.5px; font-weight: 500; color: var(--pmx-ink4); }
.src.recipe { border-color: color-mix(in srgb, var(--pmx-acc) 40%, transparent); color: var(--pmx-acc-ink); }

/* ── «Топ продуктов»: строка с полосой отрыва от лидера ── */
.pmx-dict { padding: 4px 18px 8px; }
.pmx-dict .row { display: flex; align-items: center; gap: 12px; padding: 11px 0;
  border-bottom: 1px solid var(--pmx-hair); font-size: 14px; }
.pmx-dict .row:last-child { border-bottom: none; }
.pmx-dict .row[onclick] { cursor: pointer; }
.pmx-dict .row[onclick]:hover { background: var(--pmx-soft); border-radius: 10px; box-shadow: 0 0 0 8px var(--pmx-soft); }
.pmx-dict .n { font-weight: 600; }
.pmx-dict .meta { min-width: 0; font-size: 12.5px; color: var(--pmx-ink3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmx-dict .fbar { margin-left: auto; width: 64px; height: 3px; border-radius: 2px;
  background: var(--pmx-soft); overflow: hidden; flex: none; }
.pmx-dict .fbar i { display: block; height: 100%; border-radius: 2px; background: var(--pmx-acc); opacity: .75; }
.pmx-dict .freq { flex: none; width: 96px; text-align: right; font-size: 12px; font-weight: 600; color: var(--pmx-ink2); }
/* Сортировка живёт в заголовке секции: выбранная — акцентом, прочие приглушены */
.pmx-sorts { display: inline-flex; gap: 10px; }
.pmx-sorts a { color: var(--pmx-ink4); }
.pmx-sorts a:hover { color: var(--pmx-ink2); }
.pmx-sorts a.on { color: var(--pmx-acc-ink); }
@media (max-width: 620px) {
  /* На телефоне остаётся суть: название, полоса и выбранная метрика */
  .pmx-dict .meta { display: none; }
  .pmx-dict .freq { width: auto; }
  .pmx-dict .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pmx-sec { flex-wrap: wrap; }
  .pmx-sorts { margin-left: 0; width: 100%; overflow-x: auto; white-space: nowrap; }
}

.pmx-grid4, .pmx-grid2 { display: grid; gap: 8px; margin-bottom: 4px; }
.pmx-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* На телефоне четыре поля в ряд превращаются в кашу: подписи вроде
   «Углеводы, г / 100 г» ломаются на три строки, и поля разъезжаются по
   высоте. Раскладываем 2×2 — там же, где это делает полоса метрик. */
@media (max-width: 560px) {
  .pmx-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pmx-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.pmx-grid4 label, .pmx-grid2 label { display: block; min-width: 0; }
.pmx-grid4 span, .pmx-grid2 span { display: block; font-size: 11px; color: var(--pmx-ink4); margin-bottom: 3px; }
.pmx-grid4 .pmx-field, .pmx-grid2 .pmx-field { margin-bottom: 0; padding: 9px 10px; }

.pmx-price-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pmx-price-add .pmx-field { width: 96px; margin: 0; }
.pmx-price-add .per { font-size: 12.5px; color: var(--pmx-ink4); }
.pmx-price-add .pmx-btn { margin: 0 0 0 auto; }
.pmx-prices { margin-top: 12px; border-top: 1px solid var(--pmx-hair); }
.pmx-prices .row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--pmx-hair); font-size: 13px; }
.pmx-prices .row:last-child { border-bottom: none; }
.pmx-prices .kg { color: var(--pmx-ink4); font-size: 11.5px; }
.pmx-prices .when { font-size: 11.5px; color: var(--pmx-ink4); }
.pmx-prices .rm { background: none; border: none; cursor: pointer; color: var(--pmx-ink4); font-size: 16px; padding: 0 4px; }
.pmx-prices .rm:hover { color: var(--pmx-bad); }

/* ── Разделы-справочники: добавка/привычка/напиток с раскрытием ── */
.pmx-lead { font-size: 13.5px; color: var(--pmx-ink3); margin: 2px 0 18px; max-width: 62ch; }
.pmx-addrow { padding: 14px 18px; margin-bottom: 18px; }
.pmx-addrow form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pmx-addrow .pmx-field { margin: 0; flex: 1; min-width: 150px; }
.pmx-addrow .pmx-field.narrow { flex: none; width: 92px; }
.pmx-addrow .pmx-btn { margin: 0; }

.pmx-list .row.block { display: block; cursor: default; padding: 0; }
.pmx-list .row.block:hover { background: none; box-shadow: none; }
.pmx-list .row.block .head { display: flex; align-items: center; gap: 12px; padding: 13px 0; cursor: pointer; }
.pmx-list .row.block .head:hover .nm b { color: var(--pmx-acc-ink); }
.pmx-list .row.block .chev { margin-left: auto; color: var(--pmx-ink4); font-size: 12px; }
.pmx-list .row.block .edit { padding: 4px 0 16px; border-top: 1px dashed var(--pmx-hair); }
.pmx-list .row.block .line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.pmx-list .row.block .line .lab { flex: none; width: 84px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pmx-ink4); }
.pmx-list .row.block .line .pmx-field { margin: 0; flex: 1; min-width: 130px; }
.pmx-list .row.block .line .pmx-field.narrow { flex: none; width: 92px; }
.pmx-list .row.block .line .unit { font-size: 12px; color: var(--pmx-ink4); }
.pmx-list .row.block .acts { display: flex; justify-content: flex-end; }
.pmx-list .row.block .acts .pmx-btn { margin: 4px 0 0; }
.pmx-list .row.block .drop { margin-top: 10px; text-align: center; }
.pmx-list .row.block .drop button { background: none; border: none; cursor: pointer; font-size: 12.5px; color: var(--pmx-ink4); }
.pmx-list .row.block .drop button:hover { color: var(--pmx-bad); }
/* В разделах слоты и дни недели — не список, а ряд переключателей:
   вертикальный вариант из поповера метрик растягивал карточку на пол-экрана. */
.pmx-list .row.block .pmx-checks { flex: 1; min-width: 200px; flex-direction: row; flex-wrap: wrap;
  gap: 6px; max-height: none; overflow: visible; }
.pmx-list .row.block .pmx-checks label { padding: 6px 11px; border: 1px solid var(--pmx-hair);
  border-radius: 10px; background: var(--pmx-surface); font-size: 13px; font-weight: 600; gap: 0; }
.pmx-list .row.block .pmx-checks label:hover { border-color: var(--pmx-acc); background: var(--pmx-acc-soft); }
/* Состояние берём у самого чекбокса, а не у класса из шаблона: иначе чип
   загорался бы только после сохранения, а не по клику. */
.pmx-list .row.block .pmx-checks label:has(input:checked) { border-color: var(--pmx-acc);
  background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
/* Сам чекбокс не нужен: состояние показывает подсветка чипа */
.pmx-list .row.block .pmx-checks input { position: absolute; opacity: 0; width: 0; height: 0; }

/* ── Библиотека и видео: карточки с обложкой и прогрессом ── */
.pmx-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.pmx-media { display: grid; grid-template-columns: 84px 1fr; gap: 14px; padding: 14px; background: var(--pmx-surface);
  border: 1px solid var(--pmx-hair); border-radius: 16px; box-shadow: var(--pmx-card-shadow); align-items: stretch; }
.pmx-media.active { border-color: color-mix(in srgb, var(--pmx-acc) 45%, transparent); }
.pmx-media .cover { width: 84px; height: 100%; min-height: 118px; border-radius: 10px; overflow: hidden; cursor: pointer;
  background: var(--pmx-soft); display: flex; align-items: center; justify-content: center; }
.pmx-media .cover img { width: 100%; height: 100%; object-fit: cover; }
.pmx-media .cover .ph { font-size: 26px; font-weight: 900; color: var(--pmx-line); }
.pmx-media .body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pmx-media .top { cursor: pointer; min-width: 0; }
.pmx-media .top b { display: block; font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmx-media .top small { display: block; font-size: 11.5px; color: var(--pmx-ink4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmx-media .top:hover b { color: var(--pmx-acc-ink); }
.pmx-media .desc { font-size: 12px; line-height: 1.45; color: var(--pmx-ink3); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmx-media .bar { height: 6px; border-radius: 4px; background: var(--pmx-soft); overflow: hidden; }
.pmx-media .bar i { display: block; height: 100%; border-radius: 4px; background: var(--pmx-acc); opacity: .85; }
.pmx-media .meta { font-size: 11.5px; line-height: 1.5; color: var(--pmx-ink4); }
.pmx-media .pace { font-size: 11.5px; line-height: 1.45; color: var(--pmx-ink3); }
.pmx-media .pace b { color: var(--pmx-acc-ink); }
/* Своё имя, не .mark: тот класс уже занят значками табеля добавок и приносил
   сюда justify-content: center и лишний padding. */
.pmx-media .logrow .pmx-field { width: 74px; height: 32px; margin: 0; padding: 0 10px; font-size: 13px; }
.pmx-media .logrow .pmx-btn { height: 32px; margin: 0; padding: 0 13px; font-size: 12.5px; }
.pmx-sec .more { margin-left: auto; font-weight: 700; color: var(--pmx-ink4); }
/* Каждая форма — своя строка: в общем flex-контейнере с переносом строки
   схлопывались по высоте и кнопки наезжали друг на друга (зазор выходил −5px). */
.pmx-media .acts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: auto; padding-top: 6px; }
.pmx-media .acts form { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 32px; }
.pmx-chip { display: inline-flex; align-items: center; height: 32px; background: var(--pmx-surface); border: 1px solid var(--pmx-hair);
  border-radius: 10px; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: var(--pmx-ink2); cursor: pointer; white-space: nowrap; }
.pmx-chip:hover { border-color: var(--pmx-acc); color: var(--pmx-acc-ink); background: var(--pmx-acc-soft); }
.pmx-chip.main { border-color: color-mix(in srgb, var(--pmx-acc) 50%, transparent); color: var(--pmx-acc-ink); font-weight: 700; }
.pmx-chip.quiet { color: var(--pmx-ink4); }
.pmx-chip.quiet:hover { color: var(--pmx-bad); border-color: color-mix(in srgb, var(--pmx-bad) 45%, transparent); background: var(--pmx-soft); }
.pmx-chip:disabled { opacity: .5; cursor: default; }

/* ── Заметки: поиск, чипы вида, форма записи ── */
.pmx-find { display: flex; align-items: center; gap: 6px; }
.pmx-find .pmx-field { width: 210px; height: 32px; margin: 0; padding: 0 12px; font-size: 13px; }
.pmx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 -4px; }
.pmx-chips .pmx-chip.on { border-color: color-mix(in srgb, var(--pmx-acc) 50%, transparent);
  background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
/* Форма записи занимает всю ширину шапки: она под кнопкой и появляется редко */
.pmx-note-add { padding: 14px 16px; margin-bottom: 10px; }
.pmx-note-add .pmx-field { margin-bottom: 8px; }
.pmx-note-add .row { display: flex; align-items: center; gap: 8px; }
.pmx-note-add .row .pmx-field { width: 130px; margin: 0; }
.pmx-note-add .row .hint { font-size: 11.5px; color: var(--pmx-ink4); }
.pmx-foot-note { margin-top: 10px; font-size: 12px; color: var(--pmx-ink4); }
@media (max-width: 620px) {
  .pmx-find { width: 100%; }
  .pmx-find .pmx-field { flex: 1; width: auto; }
}

/* ── Страница продукта: запасной путь мимо панели ── */
.pmx-form-card .sep { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px;
  color: var(--pmx-ink4); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pmx-form-card .sep::before, .pmx-form-card .sep::after { content: ""; flex: 1; height: 1px; background: var(--pmx-hair); }
.pmx-form-card .lab { display: block; margin: 12px 0 5px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--pmx-ink4); }
.pmx-form-card .lab:first-child { margin-top: 0; }
.pmx-err { margin: 4px 0 0; font-size: 11.5px; color: var(--pmx-bad); }
.pmx-photo { display: block; margin-bottom: 10px; }
.pmx-photo img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; }
.pmx-switch-line { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--pmx-hair); cursor: pointer; }
.pmx-switch-line b { display: block; font-size: 13.5px; font-weight: 600; }
.pmx-switch-line small { display: block; margin-top: 2px; font-size: 12px; color: var(--pmx-ink3); }
.pmx-form-foot { display: flex; align-items: center; gap: 10px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--pmx-hair); }

/* ── Обсуждение: своё справа, чужое слева, непрочитанное подсвечено ── */
.pmx-thread { display: flex; flex-direction: column; gap: 8px; }
.pmx-thread .msg { max-width: 84%; padding: 9px 12px; border-radius: 13px;
  border: 1px solid var(--pmx-hair); background: var(--pmx-bg); }
.pmx-thread .msg.mine { margin-left: auto; border-color: color-mix(in srgb, var(--pmx-acc) 35%, transparent);
  background: var(--pmx-acc-soft); }
.pmx-thread .msg.their.fresh { border-color: color-mix(in srgb, var(--pmx-warn) 40%, transparent);
  background: color-mix(in srgb, var(--pmx-warn) 9%, transparent); }
.pmx-thread .head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; font-size: 11.5px; }
.pmx-thread .head .who { font-weight: 700; color: var(--pmx-ink2); }
.pmx-thread .head time { color: var(--pmx-ink4); font-family: var(--pmx-mono); }
.pmx-thread .head .mark { margin-left: auto; color: var(--pmx-acc-ink); font-weight: 600; }
.pmx-thread .head .mark.quiet { color: var(--pmx-ink4); font-weight: 500; }
.pmx-thread .head .mark.new { color: var(--pmx-warn); font-weight: 700; }
.pmx-thread .head .edit { border: none; background: none; cursor: pointer; font-size: 15px;
  line-height: 1; color: var(--pmx-ink4); padding: 0 2px; }
.pmx-thread .head .edit:hover { color: var(--pmx-bad); }
.pmx-thread .text { font-size: 13.5px; color: var(--pmx-ink); white-space: pre-line; }
.pmx-thread .reply { padding-top: 2px; }
.pmx-thread .reply .more { border: none; background: none; cursor: pointer; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--pmx-acc-ink); }
.pmx-thread .reply .row { display: flex; align-items: flex-start; gap: 8px; }
.pmx-thread .reply .pmx-field { margin: 0; resize: vertical; min-height: 40px; }

/* ── Настройки: выбор тона, цели дня, переключатели рассылок ── */
.pmx-picks, .pmx-switches { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.pmx-picks .pick { display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--pmx-hair); border-radius: 13px; transition: border-color .15s, background .15s; }
.pmx-picks .pick:hover { border-color: color-mix(in srgb, var(--pmx-acc) 40%, transparent); }
.pmx-picks .pick.on { border-color: var(--pmx-acc); background: var(--pmx-acc-soft); }
.pmx-picks .pick input { margin-top: 2px; accent-color: var(--pmx-acc); width: 16px; height: 16px; flex: none; }
.pmx-picks .pick .body { min-width: 0; }
.pmx-picks .pick b { display: block; font-size: 14px; font-weight: 600; }
.pmx-picks .pick small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--pmx-ink3); }

.pmx-goals { padding: 14px 18px 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; }
.pmx-goals .goal { display: flex; flex-direction: column; gap: 4px; }
.pmx-goals .goal .lab { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pmx-ink4); }
.pmx-goals .pmx-field { margin: 0; }
.pmx-goals .hint { font-size: 11px; color: var(--pmx-ink4); }
.pmx-goals .err { font-size: 11px; color: var(--pmx-bad); }
.pmx-goals .pmx-quiet-line { grid-column: 1 / -1; margin: 2px 0 0; }

.pmx-switches .switch { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; padding: 4px 0; }
.pmx-switches .switch b { display: block; font-size: 14px; font-weight: 600; }
.pmx-switches .switch small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--pmx-ink3); }
.pmx-check { margin-top: 2px; accent-color: var(--pmx-acc); width: 16px; height: 16px; flex: none; }

@media (max-width: 760px) { .pmx-goals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ── Администрирование: формы прав, слияние, строка-подсказка ── */
.pmx-quiet-line { font-size: 12.5px; color: var(--pmx-ink3); margin: 6px 0 10px; }
.pmx-form-card { padding: 16px 18px; }
.pmx-rights { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.pmx-rights label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pmx-ink2); }
.pmx-rights input[type=checkbox] { accent-color: var(--pmx-acc); width: 15px; height: 15px; }
.pmx-rights label.pick { flex-direction: column; align-items: stretch; gap: 3px; min-width: 210px; }
.pmx-rights label.pick .lab { font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--pmx-ink4); }
.pmx-rights .pmx-field { margin: 0; }
.pmx-rights label.days .pmx-field { width: 74px; padding: 6px 9px; }
.pmx-rights select.pmx-field { padding: 9px 11px; }
/* Слияние удаляет аккаунт — карточка предупреждает видом, а не только текстом */
.pmx-warn-card { padding: 16px 18px; border-color: color-mix(in srgb, var(--pmx-warn) 35%, transparent);
  background: color-mix(in srgb, var(--pmx-warn) 7%, var(--pmx-surface)); }
.pmx-warn-card .head { font-size: 14px; margin-bottom: 12px; }
.pmx-warn-card .notes { margin: 12px 0 14px; padding-left: 18px; font-size: 12.5px; color: var(--pmx-ink2); }
.pmx-warn-card .notes li { margin: 3px 0; }
.pmx-btn.danger { background: var(--pmx-bad); border-color: var(--pmx-bad); color: #fff; }
.pmx-btn.danger:hover { filter: brightness(1.08); }
.pmx-people .row[onclick] { cursor: pointer; }
.pmx-people .row[onclick]:hover { background: var(--pmx-soft); border-radius: 10px; box-shadow: 0 0 0 8px var(--pmx-soft); }
.pmx-people .who .uname { font-size: 11.5px; color: var(--pmx-ink4); }

/* ── Обзор сервиса: список людей со статусами ── */
.pmx-people { padding: 4px 18px 8px; }
.pmx-people .row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, auto); gap: 16px;
  align-items: center; padding: 12px 0; border-bottom: 1px solid var(--pmx-hair); }
.pmx-people .row:last-child { border-bottom: none; }
.pmx-people .who { min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pmx-people .who b { font-size: 14.5px; font-weight: 600; }
.pmx-people .when { text-align: right; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.pmx-people .when small { display: block; font-size: 10.5px; font-weight: 500; color: var(--pmx-ink4); }
/* Статус человека: цветом отмечаем только то, на что надо реагировать */
.pmx-state { flex: none; border-radius: 7px; padding: 1px 7px; font-size: 11px; font-weight: 700;
  border: 1px solid var(--pmx-hair); color: var(--pmx-ink3); }
.pmx-state.live { border-color: color-mix(in srgb, var(--pmx-acc) 45%, transparent);
  background: var(--pmx-acc-soft); color: var(--pmx-acc-ink); }
.pmx-state.fading { border-color: color-mix(in srgb, var(--pmx-warn) 40%, transparent);
  background: color-mix(in srgb, var(--pmx-warn) 10%, transparent); color: var(--pmx-warn); }
.pmx-state.gone, .pmx-state.cold { border-color: color-mix(in srgb, var(--pmx-bad) 30%, transparent);
  color: var(--pmx-bad); }
@media (max-width: 760px) {
  .pmx-people .row { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 6px; }
  .pmx-people .when:nth-of-type(4), .pmx-people .when:nth-of-type(5) { display: none; }
}

/* ── Вводный тур: подсветка, стрелка, объяснение ── */
.pmx-tour-mask { position: fixed; inset: 0; z-index: 90; }
.pmx-tour-hole { position: fixed; z-index: 91; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(9, 11, 14, .62); transition: top .25s, left .25s, width .25s, height .25s; }
.pmx-tour-card { position: fixed; z-index: 92; background: var(--pmx-raised); border: 1px solid var(--pmx-hair);
  border-radius: 16px; padding: 16px 18px 14px; box-shadow: 0 22px 50px -18px rgba(0,0,0,.55); }
.pmx-tour-card .step { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--pmx-ink4); }
.pmx-tour-card h3 { margin: 6px 0 6px; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.pmx-tour-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--pmx-ink2); }
.pmx-tour-card p b { color: var(--pmx-ink); }
.pmx-tour-card .example { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--pmx-soft);
  font-family: var(--pmx-mono); font-size: 12px; line-height: 1.6; color: var(--pmx-ink2); }
.pmx-tour-card .example b { color: var(--pmx-acc-ink); font-weight: 600; }
.pmx-tour-card .foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.pmx-tour-card .skip { background: none; border: none; padding: 0; cursor: pointer; font-size: 12px; color: var(--pmx-ink4); }
.pmx-tour-card .skip:hover { color: var(--pmx-ink2); }
.pmx-tour-card .nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pmx-tour-card .back { background: none; border: none; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--pmx-ink3); }
.pmx-tour-card .nav .pmx-btn { margin: 0; }

/* ── «Как работать с ботом»: сценарии перепиской ── */
.pmx-botintro { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px; margin-bottom: 6px; }
.pmx-botintro h2 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 5px; }
.pmx-botintro p { font-size: 13.5px; line-height: 1.5; color: var(--pmx-ink2); margin: 0; max-width: 62ch; }
.pmx-botintro .pmx-btn { margin: 0 0 0 auto; }

.pmx-howto { padding: 16px 20px 18px; }
.pmx-howto .lead { font-size: 13px; color: var(--pmx-ink3); margin: 0 0 12px; }
.pmx-howto .chat { display: flex; flex-direction: column; gap: 7px; }
.pmx-howto .line { display: flex; }
.pmx-howto .line.you { justify-content: flex-end; }
.pmx-howto .bubble { max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.pmx-howto .you .bubble { background: var(--pmx-acc); color: var(--pmx-acc-contrast); border-bottom-right-radius: 5px; }
.pmx-howto .bot .bubble { background: var(--pmx-soft); color: var(--pmx-ink2); border-bottom-left-radius: 5px; }
.pmx-howto .note { margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--pmx-hair);
  font-size: 12px; line-height: 1.5; color: var(--pmx-ink4); }

.pmx-cmds { padding: 6px 20px 10px; }
.pmx-cmds .row { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--pmx-hair); }
.pmx-cmds .row:last-child { border-bottom: none; }
.pmx-cmds code { flex: none; min-width: 96px; font-family: var(--pmx-mono); font-size: 13px; color: var(--pmx-acc-ink); }
.pmx-cmds span { font-size: 13.5px; color: var(--pmx-ink2); }
.pmx-meal .whenrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.pmx-meal .whenrow .pmx-field.date { width: 120px; margin: 0; text-align: center; }

/* ── Графики раздела «Тело»: свои SVG вместо Chart.js ── */
.pmx-graph { padding: 14px 18px 12px; }
.pmx-graph .legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.pmx-graph .legend .item { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--pmx-ink3); }
.pmx-graph .legend i { width: 9px; height: 3px; border-radius: 2px; background: var(--pmx-line); align-self: center; }
.pmx-graph .legend .accent i { background: var(--pmx-acc); }
.pmx-graph .legend b { font-size: 13px; color: var(--pmx-ink); }
.pmx-graph .legend small { font-size: 11px; font-weight: 600; }
.pmx-graph .legend small.down { color: var(--pmx-acc-ink); }
.pmx-graph .legend small.up { color: var(--pmx-ink3); }
.pmx-graph .legend small.scale { color: var(--pmx-ink4); opacity: .8; }

.pmx-graph .plot { position: relative; height: 132px; }
.pmx-graph svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Линия не должна толстеть от растягивания viewBox по ширине */
.pmx-graph .line { fill: none; stroke: var(--pmx-line); stroke-width: 1.6; stroke-linejoin: round;
  stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .75; }
.pmx-graph .line.accent { stroke: var(--pmx-acc); stroke-width: 2; opacity: 1; }
.pmx-graph .area { fill: var(--pmx-acc); opacity: .08; stroke: none; }

.pmx-graph .axis { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 10px; font-size: 11px; color: var(--pmx-ink4); }
.pmx-graph .axis .range { margin: 0 auto; }

/* Изменение метрики в строке под якорем */
.pmx-strip .cell .chg { margin-top: 5px; font-size: 10.5px; color: var(--pmx-ink4); }
.pmx-strip .cell .chg.down { color: var(--pmx-acc-ink); }

/* Место под подписи, чтобы не обрезались краями карточки */
.pmx-graph .plot { padding: 4px 0; }

/* Подпись значения у точки — видна всегда; сторона и место посчитаны в charts.py
   (там же продублированы 10.5px / 13px / 10px, по ним считается раскладка) */
.pmx-graph .mark { position: absolute; margin-top: -10px; transform: translate(-50%, -100%);
  font-family: var(--pmx-mono); font-size: 10.5px; line-height: 13px; color: var(--pmx-ink3);
  white-space: nowrap; pointer-events: none;
  /* мягкое гало цветом карточки: подпись часто ложится на соседнюю линию */
  text-shadow: 0 0 3px var(--pmx-surface), 0 0 3px var(--pmx-surface), 0 0 2px var(--pmx-surface); }
.pmx-graph .mark.left { transform: translate(0, -100%); }
.pmx-graph .mark.right { transform: translate(-100%, -100%); }
.pmx-graph .mark.under { margin-top: 10px; transform: translate(-50%, 0); }
.pmx-graph .mark.under.left { transform: translate(0, 0); }
.pmx-graph .mark.under.right { transform: translate(-100%, 0); }
.pmx-graph .mark.accent { color: var(--pmx-acc-ink); font-weight: 600; }
/* На узком экране влезает меньше подписей — раскладка под телефон помечена `narrow` */
@media (max-width: 620px) { .pmx-graph .mark:not(.narrow) { display: none; } }

/* Колонка замера: попасть курсором в точку 6px нельзя, поэтому ловим всю вертикаль */
.pmx-graph .col { position: absolute; top: 0; bottom: 0; }
.pmx-graph .col::before { content: ""; position: absolute; top: 0; bottom: 0; left: var(--cx);
  width: 1px; background: var(--pmx-line); opacity: 0; transition: opacity .12s; }
.pmx-graph .col:hover { z-index: 5; }
.pmx-graph .col:hover::before { opacity: .45; }

.pmx-graph .col .dot { position: absolute; left: var(--cx); width: 6px; height: 6px;
  margin: -3px 0 0 -3px; border-radius: 50%; background: var(--pmx-surface);
  border: 1.5px solid var(--pmx-line); }
.pmx-graph .col .dot.accent { border-color: var(--pmx-acc); }
.pmx-graph .col:hover .dot { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: var(--pmx-line); border-color: var(--pmx-line); }
.pmx-graph .col:hover .dot.accent { background: var(--pmx-acc); border-color: var(--pmx-acc); }

.pmx-graph .col .tip { position: absolute; top: 0; left: var(--cx); transform: translateX(-50%);
  display: none; padding: 6px 10px; border-radius: 10px; background: var(--pmx-ink); color: var(--pmx-bg);
  font-size: 11px; white-space: nowrap; pointer-events: none; }
.pmx-graph .col.left .tip { left: 0; transform: none; }
.pmx-graph .col.right .tip { left: auto; right: 0; transform: none; }
.pmx-graph .col:hover .tip { display: block; }
.pmx-graph .col .tip em { display: block; margin-bottom: 3px; font-style: normal; opacity: .6;
  font-family: var(--pmx-mono); }
.pmx-graph .col .tip span { display: flex; gap: 12px; justify-content: space-between; opacity: .8; }
.pmx-graph .col .tip span.accent { opacity: 1; }
.pmx-graph .col .tip b { font-family: var(--pmx-mono); font-weight: 600; }

/* Кнопки-действия в заголовке секции («＋ добавить», «＋ записать») рисовались
   браузером как обычные <button>: серый прямоугольник с рамкой посреди
   типографики. Сбрасываем внешность и возвращаем вид ссылки-действия —
   счётчиков (.more у <span> в книгах и вишлисте) правило не касается. */
.pmx-sec button.more { background: none; border: none; padding: 2px 0; cursor: pointer;
  font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--pmx-acc-ink); transition: opacity .15s; }
.pmx-sec button.more:hover { opacity: .68; }

/* Полоса итогов, стоящая первой на вкладке, липла к шапке раздела: у неё
   margin-top рассчитан на соседство с содержимым карточки, а не с заголовком
   страницы. Отбиваем так же, как это делает .pmx-sec. */
.pmx-sum { margin-top: 24px; }
.pmx-sum .pmx-strip { margin-top: 0; border-top: none; border-radius: 17px; }

/* Крестик удаления в строке списка. Четвёртая колонка появляется только у
   строк, где он есть, — остальные списки остаются трёхколоночными. */
.pmx-list .row.with-del { grid-template-columns: minmax(0, 1.4fr) auto auto 26px; }
.pmx-list .row .rm { background: none; border: none; cursor: pointer; font-size: 17px;
  line-height: 1; color: var(--pmx-ink4); padding: 2px 6px; border-radius: 8px;
  opacity: 0; transition: opacity .15s, color .15s, background .15s; }
.pmx-list .row:hover .rm { opacity: 1; }
.pmx-list .row .rm:hover { color: var(--pmx-bad); background: var(--pmx-soft); }
/* Продукт из приёмов удалить нельзя — крестик виден только как объяснение. */
.pmx-list .row .rm.off { cursor: default; opacity: 0; }
.pmx-list .row:hover .rm.off { opacity: .3; }
.pmx-list .row .rm.off:hover { color: var(--pmx-ink4); background: none; }
/* На тач-устройствах наведения нет — там крестик виден сразу, иначе до него
   не добраться вовсе. */
@media (hover: none) {
  .pmx-list .row .rm { opacity: .5; }
  .pmx-list .row .rm.off { opacity: .25; }
}

/* Кнопка «в архив» в строке справочника: та же четвёртая колонка, что у
   крестика, но стрелка мельче — она не про удаление. */
.pmx-list .row .rm.arch { font-size: 14px; }
.pmx-list .row .rm.arch:hover { color: var(--pmx-acc-ink); background: var(--pmx-soft); }

/* Заголовок-свёртка: «Ел один раз · 18» раскрывает свою стопку. Выглядит как
   обычный заголовок секции, кликается целиком. */
/* Отбивка внутрь, отрицательный отступ наружу: под пальцем область вдвое
   больше строчки, а на глаз заголовок стоит там же, где соседние. */
.pmx-sec button.fold { background: none; border: none; padding: 8px 6px; margin: -8px -6px;
  cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit; display: flex; align-items: center; gap: 7px; }
.pmx-sec button.fold:hover { color: var(--pmx-ink2); }
.pmx-sec .tw { display: inline-block; font-size: 14px; line-height: 1;
  transition: transform .18s ease; }
.pmx-sec .tw.on { transform: rotate(90deg); }

/* ── План еды: параметры, неделя по дням, покупки ── */

/* Параметры сборки: четыре вопроса, у каждого есть ответ по умолчанию, поэтому
   форма закрыта, пока человек сам её не откроет. */
.pmx-plan-form { padding: 18px; margin-top: 12px; }
.pmx-plan-form .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pmx-plan-form label { display: flex; flex-direction: column; gap: 6px; }
.pmx-plan-form label span { font-size: 12px; font-weight: 700; color: var(--pmx-ink3); }
.pmx-plan-form .pmx-btn { margin-top: 16px; }

/* Выбор продуктов для плана: список с галочками, по умолчанию отмечено всё. */
.pmx-plan-form .pick { margin-top: 16px; border-top: 1px solid var(--pmx-hair); padding-top: 14px; }
.pmx-plan-form .pick .cap { display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; font-weight: 700; color: var(--pmx-ink3); margin-bottom: 10px; }
.pmx-plan-form .pick .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 14px; }
.pmx-plan-form .pick .one { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.pmx-plan-form .pick .one .body b { display: block; font-size: 13.5px; font-weight: 600; }
.pmx-plan-form .pick .one .body small { font-size: 11.5px; color: var(--pmx-ink4); }
.pmx-plan-form .pick .one.accent .body b { color: var(--pmx-ink2); font-weight: 500; }

/* «Достать на день»: сумма по продуктам, чтобы не считать перед готовкой. */
.pmx-plan-days .haul { margin-top: 8px; font-size: 11.5px; line-height: 1.45; color: var(--pmx-ink3); }

/* Неделя карточками: на десктопе три в ряд, на телефоне — стопкой. Семь
   колонок не влезают в читаемую ширину, а день — это блок из нескольких строк,
   а не одна ячейка. */
.pmx-plan-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.pmx-plan-days .day { background: var(--pmx-surface); border: 1px solid var(--pmx-hair); border-radius: 16px;
  box-shadow: var(--pmx-card-shadow); padding: 14px 16px 12px; }
.pmx-plan-days .day.today { border-color: color-mix(in srgb, var(--pmx-acc) 55%, transparent); }
.pmx-plan-days .day.past { opacity: .6; }
.pmx-plan-days .head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding-bottom: 10px; border-bottom: 1px solid var(--pmx-hair); }
.pmx-plan-days .head b { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.pmx-plan-days .head span { font-size: 12px; color: var(--pmx-ink3); }
.pmx-plan-days .slot { padding: 10px 0; border-bottom: 1px solid var(--pmx-hair); }
.pmx-plan-days .slot:last-child { border-bottom: none; padding-bottom: 2px; }
.pmx-plan-days .slot.done .what { opacity: .55; text-decoration: line-through; }
.pmx-plan-days .slot.skipped .what { opacity: .4; }
.pmx-plan-days .slot.empty { color: var(--pmx-ink4); font-size: 13px; }
.pmx-plan-days .line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pmx-plan-days .line + .line { margin-top: 4px; }
.pmx-plan-days .nm { font-weight: 600; font-size: 14px; }
.pmx-plan-days .g { font-size: 13px; color: var(--pmx-ink2); }
.pmx-plan-days .why { width: 100%; font-size: 11.5px; color: var(--pmx-ink4); }
.pmx-plan-days .acts { display: flex; gap: 6px; margin-top: 8px; }
.pmx-plan-days .acts .mark { font-size: 12px; color: var(--pmx-acc-ink); font-weight: 600; }
.pmx-plan-days .acts .mark.off { color: var(--pmx-ink4); }
.pmx-chip.ghost { color: var(--pmx-ink4); }
.pmx-chip.ghost:hover { color: var(--pmx-ink2); border-color: var(--pmx-line); background: var(--pmx-soft); }

/* Чем план себя объясняет: конфликт целей, пропущенные дни, нехватка запасов. */
.pmx-plan-notes { padding: 16px 18px; margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--pmx-ink3); }
.pmx-plan-notes p + p { margin-top: 8px; }
.pmx-plan-drop { margin-top: 14px; text-align: right; }

@media (max-width: 560px) {
  .pmx-plan-form .grid { grid-template-columns: minmax(0, 1fr); }
}

/* Диалог подтверждения. Системный confirm() рисуется браузером и выпадает из
   оформления — этот собран из тех же токенов, что и остальные карточки.
   z-index выше панелей (.pmx-panel = 71): спрашивать об удалении приходится
   и поверх открытой панели. */
.pmx-ask { position: fixed; z-index: 80; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 32px)); padding: 22px 22px 18px; background: var(--pmx-raised);
  border: 1px solid var(--pmx-hair); border-radius: 18px; box-shadow: var(--pmx-shadow); }
.pmx-ask h3 { font-size: 16px; font-weight: 800; line-height: 1.35; }
.pmx-ask p { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--pmx-ink3); }
.pmx-ask .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.pmx-ask .acts .pmx-btn { margin-top: 0; }
.pmx-btn.ghost { background: none; border: 1px solid var(--pmx-hair); color: var(--pmx-ink2); }
.pmx-btn.ghost:hover { background: var(--pmx-soft); filter: none; }
/* Пояснение сразу под шапкой раздела липло к ней: свои 2px сверху были
   рассчитаны на соседство с заголовком секции, у которого отступ свой. */
.pmx-kick + .pmx-lead { margin-top: 20px; }
/* То же для полосы-предупреждения сразу под шапкой: её отступ рассчитан на
   соседство с содержимым карточки, а не с заголовком страницы. Карточки не
   трогаем — у тех, кому нужно, свой отступ уже есть (.pmx-sum). */
.pmx-kick + .pmx-alert { margin-top: 20px; }

/* День в шапке табеля — ссылка на этот день. Подсветка на наведении, чтобы
   было видно, что колонка кликабельна: раньше подпись в футере обещала клик,
   а таблица на него не отзывалась. */
.pmx-tbl thead th a { display: block; color: inherit; border-radius: 8px; padding: 2px 0;
  transition: background .15s, color .15s; }
.pmx-tbl thead th a:hover { background: var(--pmx-soft); color: var(--pmx-acc-ink); }