/* ═══════════════════════════════════════════════════
   Платформа — Вариант 4: Апельсин (NYT Cooking style)
   Белый фон · Чёрный текст · Оранжево-красный акцент
   ═══════════════════════════════════════════════════ */
:root {
    /* Единый max-width для шапки и контента: меняется в одном месте. */
    --page-wrap:  1180px;

    --bg:         #ffffff;
    --bg-alt:     #faf8f5;
    --card:       #ffffff;
    --border:     #e5e5e5;

    --accent:     #e8400a;
    --accent-d:   #c73208;
    --accent-l:   #fff2ed;

    --text:       #111111;
    --text-2:     #444444;
    --text-3:     #777777;
    --white:      #ffffff;

    --font:       'Montserrat', system-ui, sans-serif;
    --sans:       'Montserrat', system-ui, sans-serif;
    --serif:      'Playfair Display', Georgia, serif;

    --r-s: 6px;  --r-m: 10px;  --r-l: 14px;  --r-xl: 20px;  --r-f: 100px;
    --sh-s: 0 1px 4px rgba(0,0,0,.08);
    --sh-m: 0 4px 16px rgba(0,0,0,.12);
    --sh-l: 0 8px 32px rgba(0,0,0,.16);
    --tr: .18s ease;
}

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-gutter: stable; }
body { font-family: var(--font); color: var(--text); background: var(--bg);
       line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100dvh; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; -webkit-appearance: none; appearance: none; }
img { display: block; max-width: 100%; }

/* ── LAYOUT ─────────────────────────────────────────── */
.v-page { display: flex; flex-direction: column; min-height: 100dvh; }
.v-wrap { width: 100%; max-width: var(--page-wrap); margin: 0 auto; padding: 0 20px; }
.v-wrap-sm { max-width: 680px; }

/* ── HEADER ─────────────────────────────────────────── */
.v-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
    transition: box-shadow var(--tr);
}
.v-header.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.v-header-inner {
    height: 60px; display: flex; align-items: center;
    justify-content: space-between; gap: 16px;
}

/* Logo block */
.v-logo-block {
    display: flex; align-items: center; gap: 14px;
    text-decoration: none; flex-shrink: 0;
}
.v-logo-img {
    height: 52px; width: auto; flex-shrink: 0;
    object-fit: contain;
}
.v-logo-title {
    font-family: var(--serif); font-size: 17px; font-weight: 700;
    color: var(--text); line-height: 1.25; letter-spacing: -.2px;
}
.v-logo-name { font-size: 12px; font-weight: 600; color: var(--text-2); line-height: 1.4; margin-top: 3px; }
.v-logo-prof { font-size: 10px; color: var(--text-3); line-height: 1.4; margin-top: 1px; }

/* Legacy logo (back button pages) */
.v-logo {
    font-family: var(--serif); font-size: 21px; font-weight: 700;
    color: var(--text); white-space: nowrap; letter-spacing: -.3px;
}
.v-logo span { color: var(--accent); }

.v-header-right { display: flex; align-items: center; gap: 12px; }

/* User badge */
.v-user-badge { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.v-user-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--accent-l); color: var(--accent);
    font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    border: 2px solid var(--accent); overflow: hidden;
}
.v-user-name { font-size: 13px; font-weight: 600; color: var(--text-2);
               max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Унифицированный рендер <img> внутри #u-ava (см. Auth.renderAvatar в data-v2.js).
   Картинка заполняет круглый аватар одинаково на всех страницах платформы. */
.v-user-avatar-img {
    width: 100%; height: 100%; display: block;
    object-fit: cover; object-position: center;
    border-radius: 50%;
}

/* User dropdown */
.v-user-wrap { position: relative; }
.user-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 0; box-shadow: var(--sh-l);
    min-width: 200px; z-index: 300;
    opacity: 0; pointer-events: none;
    transform: translateY(-4px);
    transform-origin: top center;
    transition: opacity .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1);
    overflow: hidden;
}
.user-dropdown.open {
    opacity: 1; pointer-events: auto;
    transform: translateY(0);
}
/* Пункты появляются вместе с панелью: без каскада и ощущения «полуанимации». */
.user-dropdown .user-dd-item {
    opacity: 1;
    transform: none;
    transition: color var(--tr), background var(--tr);
}
@media (prefers-reduced-motion: reduce) {
    .user-dropdown,
    .user-dropdown .user-dd-item { transition-duration: .01ms !important; transition-delay: 0 !important; transform: none !important; }
    .user-dropdown.open,
    .user-dropdown.open .user-dd-item { transform: none !important; }
}
.user-dd-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 12px 16px;
    font-size: 14px; font-weight: 500; color: var(--text);
    cursor: pointer; border: none; background: none; font-family: inherit;
    text-decoration: none;
    transition: background var(--tr);
}
.user-dd-item:hover { background: var(--bg-alt); }
.user-dd-subitem { padding-left: 42px; font-size: 13px; color: var(--text-2); }
.user-dd-subitem:hover { color: var(--text); }
.user-dd-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--text-3); }
.user-dd-item:hover .user-dd-icon { color: var(--accent); }
.user-dd-sep { height: 1px; background: var(--border); margin: 4px 0; }
.user-dd-logout { color: #c0392b; }
.user-dd-logout .user-dd-icon { color: #c0392b; }

/* Desktop-меню личного кабинета — NYT-clean, в один стиль с nav-панелями.
   Только desktop (≥768px); мобильное меню профиля (@media ≤767px) не трогаем:
   позиция, slide/clip-path, рельс у аватара и JS-поведение остаются как есть. */
@media (min-width: 768px) {
    .user-dropdown {
        min-width: 220px;
        box-shadow: 0 6px 22px rgba(26,44,61,.08);
    }
    .user-dropdown .user-dd-item {
        padding: 11px 20px;
        transition: color var(--tr);
    }
    /* Hover — только смена цвета текста на акцент, без цветной подложки. */
    .user-dropdown .user-dd-item:hover { background: none; color: var(--accent); }
    .user-dropdown .user-dd-sep { background: var(--border); margin: 6px 0; }
    /* «Выйти» сохраняет отличимое красное состояние; hover не уводим в accent. */
    .user-dropdown .user-dd-logout:hover { background: none; color: #a93226; }
    .user-dropdown .user-dd-logout:hover .user-dd-icon { color: #a93226; }
}

/* Farewell overlay — editorial card (Logout Modal V1) */
.farewell-overlay {
    position: fixed; inset: 0;
    background: rgba(240, 236, 230, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    z-index: 9999;
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
}
.farewell-overlay.show { opacity: 1; pointer-events: auto; }
.farewell-card {
    background: var(--card);
    border: 1px solid var(--border);
    padding: 48px 56px;
    max-width: 440px;
    width: 100%;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.08);
    transform: translateY(8px);
    transition: transform .35s ease;
}
.farewell-overlay.show .farewell-card { transform: translateY(0); }
.farewell-eyebrow {
    font-family: var(--sans);
    font-size: 10px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
}
.farewell-title {
    font-family: var(--serif);
    font-size: clamp(32px, 5vw, 42px);
    font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
    color: var(--text);
    margin: 0 0 14px;
}
.farewell-divider {
    width: 48px; height: 2px;
    background: var(--text);
    margin: 0 auto 18px;
}
.farewell-sub {
    font-family: var(--sans);
    font-size: 14px; line-height: 1.55;
    color: var(--text-2);
    margin: 0 0 10px;
}
.farewell-caption {
    font-family: var(--sans);
    font-size: 12px; line-height: 1.5;
    color: var(--text-3);
    margin: 0 0 20px;
}
.farewell-progress {
    width: 64px; height: 2px;
    margin: 0 auto;
    background: var(--border);
    overflow: hidden;
}
.farewell-progress > span {
    display: block; width: 100%; height: 100%;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(0);
}
.farewell-overlay.show .farewell-progress > span {
    animation: farewell-progress 1.8s linear forwards;
}
@keyframes farewell-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}
@media (max-width: 480px) {
    .farewell-card { padding: 36px 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .farewell-card { transition: none; transform: none; }
    .farewell-overlay.show .farewell-progress > span { animation: none; transform: scaleX(1); }
}

/* Plate button */
.v-plate-btn {
    position: relative; display: flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: var(--r-f);
    background: var(--accent); color: var(--white);
    font-size: 13px; font-weight: 700; cursor: pointer;
    transition: var(--tr); border: none; letter-spacing: .2px;
}
.v-plate-btn:hover { background: var(--accent-d); }
.v-plate-btn svg { width: 17px; height: 17px; fill: currentColor; }
.plate-count {
    position: absolute; top: -6px; right: -6px;
    min-width: 20px; height: 20px; border-radius: 10px;
    background: var(--text); color: var(--white);
    font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px; border: 2px solid var(--white);
}

@keyframes plateCountAdded {
    0% { transform: scale(1); }
    45% { transform: scale(1.16); }
    100% { transform: scale(1); }
}
.plate-count.is-updated { animation: plateCountAdded .28s ease-out both; }

/* Back button */
.v-back {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: var(--text-2);
    padding: 8px 0; cursor: pointer; transition: color var(--tr);
}
.v-back:hover { color: var(--accent); }
.v-back svg { width: 18px; height: 18px; fill: currentColor; }

/* ── BUTTONS ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center;
       gap: 7px; padding: 12px 22px; border-radius: var(--r-f);
       font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
       border: none; font-family: inherit; transition: var(--tr); letter-spacing: .2px; }
.btn:active { transform: scale(.97); }
.btn-orange  { background: var(--accent); color: var(--white); }
.btn-orange:hover  { background: var(--accent-d); }
.btn-green   { background: var(--accent); color: var(--white); }
.btn-green:hover   { background: var(--accent-d); }
.btn-outline { background: transparent; color: var(--text); border: 2px solid var(--border); }
.btn-outline:hover { border-color: var(--text); }
.btn-ghost   { background: var(--bg-alt); color: var(--text-2); }
.btn-ghost:hover   { background: var(--border); color: var(--text); }
.btn-full    { width: 100%; }
.btn-lg      { padding: 15px 30px; font-size: 15px; }
.btn-sm      { padding: 8px 14px; font-size: 12px; }

/* ── CARDS ───────────────────────────────────────────── */
.v-card { background: var(--card); border-radius: var(--r-l); padding: 20px;
          border: 1px solid var(--border); }

/* ── SECTION HEADER ──────────────────────────────────── */
.v-sec-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 2px solid var(--text);
}
.v-sec-title {
    font-family: var(--serif); font-size: 20px; font-weight: 700;
    color: var(--text); letter-spacing: -.2px;
}

/* ── FILTERS ─────────────────────────────────────────── */
/* ── FILTER BAR ──────────────────────────────────────── */
/* Filter outer — always-visible clear button + scrollable chips */
.filter-outer {
    display: flex; align-items: center;
    background: var(--bg-alt); border-radius: var(--r-m);
    padding: 8px 12px; margin-bottom: 24px;
    border: 1px solid var(--border);
}
.filter-scroll-wrap {
    flex: 1; overflow: visible;
    min-width: 0;
}
.filter-scroll-wrap::-webkit-scrollbar { display: none; }
.filter-bar {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px;
    overflow: visible;
}


/* plain tag chips */
.filter-chip {
    padding: 9px 14px; border-radius: var(--r-s);
    font-size: 13px; font-weight: 600;
    background: transparent; color: var(--text-2);
    border: none; cursor: pointer;
    transition: var(--tr); white-space: nowrap; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .filter-chip:hover { background: #fde68a; color: #92400e; transform: translateY(-1px); }
}
.filter-chip.on { background: #f5e9a8; color: var(--text); }
.filter-clear {
    flex-shrink: 0; border: none; background: none; cursor: pointer;
    padding: 8px 10px 8px 12px; border-left: 1px solid var(--border);
    font-size: 12px; font-weight: 700; color: var(--accent);
    white-space: nowrap; -webkit-tap-highlight-color: transparent;
    font-family: var(--sans);
}

/* separator between groups and tags */
.filter-sep {
    width: 1px; height: 20px; background: var(--border);
    flex-shrink: 0; margin: 0 4px;
}

/* dropdown group button — standalone, no wrapper needed */
.fgroup-btn {
    display: flex; align-items: center; gap: 5px; flex-shrink: 0;
    padding: 9px 12px; border-radius: var(--r-s);
    font-size: 13px; font-weight: 600; color: var(--text-2);
    background: transparent; border: none; cursor: pointer;
    white-space: nowrap; transition: var(--tr);
    -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
    .fgroup-btn:hover { background: #fde68a; color: #92400e; transform: translateY(-1px); }
}
.fgroup-btn.has-value { background: #f5e9a8; color: var(--text); }
.fg-arrow {
    width: 10px; height: 6px; flex-shrink: 0;
    transition: transform 0.2s;
}
.fgroup-btn.open .fg-arrow { transform: rotate(180deg); }

/* dropdown panel — appended to <body>, position:absolute avoids transform/overflow issues */
.fgroup-drop {
    display: none; position: absolute;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-s); box-shadow: 0 8px 24px rgba(0,0,0,.13);
    padding: 6px; z-index: 400; min-width: 150px;
    flex-direction: column; gap: 2px;
}
.fgroup-drop .filter-chip {
    padding: 9px 14px; border-radius: 6px; text-align: left;
    width: 100%;
}
@media (hover: hover) {
    .fgroup-drop .filter-chip:hover { background: #fde68a; color: #92400e; }
}
.fgroup-drop .filter-chip.on { background: transparent; color: var(--accent); font-weight: 700; }

/* ── FAVORITE BUTTON on recipe cards ─────────────────── */
.card-fav-btn {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px; border-radius: 0;
    background: rgba(255,255,255,.92); border: 1px solid rgba(26,26,26,.18);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 2; padding: 0;
    pointer-events: all;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.card-fav-btn:active { transform: scale(.88); }
.card-fav-btn svg { width: 16px; height: 16px; }
.card-fav-btn.active {
    background: #fff;
    border-color: var(--accent);
}
.card-fav-btn.active svg { fill: var(--accent); stroke: var(--accent); }
.card-fav-btn:not(.active) svg { fill: none; stroke: var(--text); stroke-width: 2; }
.card-fav-btn:hover,
.card-fav-btn:focus-visible {
    background: #fff;
    border-color: var(--text);
    outline: none;
}
.card-fav-btn.active:hover,
.card-fav-btn.active:focus-visible {
    border-color: var(--accent);
    background: #fff;
}
.card-fav-btn.active:hover svg,
.card-fav-btn.active:focus-visible svg {
    fill: var(--accent);
    stroke: var(--accent);
}

/* ── LK ICON BUTTON ──────────────────────────────────── */
.v-icon-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    color: var(--text-2); background: transparent; border: none;
    cursor: pointer; text-decoration: none; transition: var(--tr);
    -webkit-tap-highlight-color: transparent; flex-shrink: 0;
}
.v-icon-btn:hover { background: var(--bg-alt); color: var(--text); }
.v-icon-btn svg { width: 22px; height: 22px; fill: currentColor; }

/* ── FEATURED RECIPE CARD ────────────────────────────── */
.featured-card {
    display: flex; flex-direction: row; width: 100%; cursor: pointer; text-align: left;
    background: var(--card); border: none;
    border-radius: 0; overflow: hidden;
    padding: 0; transition: var(--tr);
}
.featured-card:not(.locked):hover { opacity: 1; color: inherit; }
.featured-card:not(.locked):hover .featured-card-photo img { transform: scale(1.03); }
.featured-card-photo {
    aspect-ratio: 4/3; width: 60%; min-width: 60%; flex-shrink: 0; position: relative; overflow: hidden;
    background: var(--bg-alt); border-radius: 0;
}
.featured-card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.featured-card-body {
    padding: 8px 0 8px 32px;
    display: flex; flex-direction: column; gap: 10px; justify-content: center;
}
.featured-card-label {
    font-size: 11px; font-weight: 800; color: var(--accent);
    text-transform: uppercase; letter-spacing: 1.5px;
}
.featured-card-name {
    font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.2;
}
.featured-card-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.featured-card-kcal { font-size: 14px; font-weight: 700; color: var(--accent); }
.card-new-badge {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    box-sizing: border-box;
    height: 22px; padding: 0 10px;
    background: var(--accent); color: #fff;
    font-family: var(--sans);
    font-size: 10px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    border-radius: 0;
    display: inline-flex; align-items: center;
    white-space: nowrap;
}

/* Stack-контейнер для бейджей в карточке: «Новинка» + бейдж доступа
   располагаются колонкой и не перекрывают друг друга. */
.card-badge-stack {
    position: absolute; top: 8px; left: 8px; z-index: 3;
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    pointer-events: none;
}
.card-badge-stack > * { pointer-events: auto; }
.card-badge-stack .card-new-badge,
.card-badge-stack .locked-badge,
.card-badge-stack .trial-badge,
.card-badge-stack .free-badge {
    position: static; top: auto; left: auto; right: auto;
}

/* ── WEIGHT INPUT ────────────────────────────────────── */
.cab-weight-row {
    display: flex; align-items: center; gap: 8px; margin-top: 8px;
}
.cab-weight-input {
    width: 64px; padding: 5px 8px; font-size: 15px; font-weight: 700;
    font-family: var(--sans); color: var(--text); text-align: center;
    background: transparent; border: none; border-bottom: 1.5px solid var(--border);
    outline: none; transition: border-color .2s;
}
.cab-weight-input:focus { border-bottom-color: var(--accent); }
.cab-weight-unit { font-size: 13px; color: var(--text-3); font-weight: 500; }
.cab-weight-label { font-size: 13px; color: var(--text-3); font-weight: 500; }

/* ── CATEGORY GRID ───────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.cat-card {
    display: flex; flex-direction: column;
    border-radius: 0;
    background: var(--card); border: none;
    cursor: pointer; transition: var(--tr);
    text-align: left; overflow: hidden; padding: 0;
}
.cat-card:not(.locked):hover { opacity: 1; color: inherit; }
.cat-card:not(.locked):hover .cat-icon-wrap img { transform: scale(1.04); }
.cat-card:active { transform: scale(.99); }

/* Square photo block */
.cat-icon-wrap {
    aspect-ratio: 1/1; width: 100%;
    background: var(--bg-alt);
    overflow: hidden;
}
.cat-icon-wrap img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .4s ease;
}

/* Text below photo — NYT Cooking style */
.cat-body { padding: 10px 0 0; display: flex; flex-direction: column; flex: 1; }
.cat-name {
    font-size: 15px; font-weight: 700; color: var(--text);
    line-height: 1.25; margin-bottom: 4px;
}
.cat-desc { font-size: 12px; color: var(--text-2); line-height: 1.4; flex: 1; }
.cat-count { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 6px; }

/* ── RECIPE CARD GRID (category page) ───────────────── */
.recipe-card-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
/* ── RECIPE CARD V1 (NYT-style) ──────────────────────── */
.recipe-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    container-type: inline-size;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(26,26,26,.06);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.recipe-card:not(.locked):hover {
    opacity: 1; color: inherit;
}
.recipe-card__media {
    position: relative; aspect-ratio: 4/3;
    background: var(--bg-alt); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 44px;
}
.recipe-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .4s ease;
}
.recipe-card:not(.locked):hover .recipe-card__media img { transform: scale(1.04); }
.recipe-card__bookmark {
    position: absolute; top: 10px; right: 10px;
    width: 34px; height: 34px; border-radius: 0;
    background: rgba(255,255,255,.95);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
    border: 1px solid rgba(26,26,26,.16); cursor: pointer; z-index: 2; padding: 0;
    pointer-events: all;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s, transform .15s;
}
.recipe-card__bookmark:active { transform: scale(.88); }
.recipe-card__bookmark svg { width: 15px; height: 15px; }
.recipe-card__bookmark.active {
    background: #fff;
    border-color: var(--accent);
}
.recipe-card__bookmark.active svg { fill: var(--accent); stroke: var(--accent); }
.recipe-card__bookmark:not(.active) svg { fill: none; stroke: #1a1a1a; }
.recipe-card__bookmark:hover,
.recipe-card__bookmark:focus-visible {
    background: #fff;
    border-color: var(--text);
    outline: none;
}
.recipe-card__bookmark.active:hover,
.recipe-card__bookmark.active:focus-visible {
    border-color: var(--accent);
    background: #fff;
}
.recipe-card__bookmark.active:hover svg,
.recipe-card__bookmark.active:focus-visible svg {
    fill: var(--accent);
    stroke: var(--accent);
}
.recipe-card__body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }
.recipe-card__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px; font-weight: 600; line-height: 1.15;
    color: #1a1a1a; letter-spacing: -.005em;
    margin: 0 0 8px;
    /* Five lines cover the longest titles in the two-column mobile grid,
       keeping the rating row aligned with its neighbouring card. */
    min-height: calc(1.15em * 5);
}
.recipe-card__rating {
    display: flex; align-items: center; gap: 6px;
    min-height: 16px;
    margin-bottom: 10px; position: relative;
}
.recipe-card__details-line {
    display: flex; align-items: center; justify-content: space-between; gap: 9px; flex-wrap: nowrap;
    margin-bottom: 12px; min-width: 0;
}
.recipe-card__details-line .recipe-card__rating,
.recipe-card__details-line .recipe-card__meta { margin-bottom: 0; }
.recipe-card__details-line .recipe-card__rating { flex-shrink: 0; white-space: nowrap; }
.recipe-card__details-line .recipe-card__meta-wrap { margin-left: auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; }
.recipe-card__details-line .recipe-card__meta { gap: 8px; min-width: 0; }
.recipe-card__rating .rating-popup { bottom: auto; top: calc(100% + 6px); left: 0; }
.recipe-card__rating-stars { display: inline-flex; gap: 1px; cursor: pointer; }
.recipe-card__rating-text { font-size: 11px; color: #8a7d6f; font-weight: 500; }
.recipe-card__meta {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: #3a3a3a; font-weight: 500;
    margin-bottom: 12px;
}
.recipe-card__meta-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.recipe-card__meta-time { min-width: 0; }
.recipe-card__meta-diff-label { display: none; }
.recipe-card__meta-dot { width: 3px; height: 3px; border-radius: 50%; background: #8a7d6f; }
.recipe-card__footer {
    margin-top: auto; padding-top: 10px;
    border-top: 1px solid #e8dfd0;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 8px; flex-wrap: nowrap;
}
.recipe-card__kcal-label {
    font-size: 11px; color: #8a7d6f; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    white-space: nowrap; flex-shrink: 1; min-width: 0;
}
.recipe-card__kcal-value { font-size: 18px; font-weight: 700; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
.recipe-card__kcal-value small { font-size: 11px; font-weight: 600; color: #3a3a3a; margin-left: 2px; }
@media (max-width: 768px) {
    .recipe-card__footer { flex-direction: column; align-items: flex-start; gap: 2px; }
    .recipe-card__kcal-label { font-size: 10px; letter-spacing: .06em; }
    .recipe-card__kcal-value { font-size: 20px; }
}
@media (min-width: 768px) {
    .recipe-card__meta-diff-label { display: inline; }
}
.featured-card-meta .pill { display: inline-flex; align-items: center; line-height: 1.4; min-height: 20px; }

/* Уточнение времени под бейджами (например: «↳ без варки пшёнки») */
.recipe-card-time-note {
    display: flex; align-items: flex-start; gap: 4px;
    font-size: 11px; line-height: 1.35; color: var(--text-2);
    margin: -2px 0 8px;
}
.recipe-card-time-note .rcn-arr {
    color: var(--accent); font-weight: 700; flex-shrink: 0;
}
.featured-card .recipe-card-time-note { font-size: 12px; margin: -2px 0 10px; }

/* ── NYT-hover: при наведении текстовая часть карточки рецепта мягко бледнеет.
   Фото (zoom), закладка и бейджи лежат в *-media и не затрагиваются. Skeleton
   (.is-skeleton) исключён. Эффект — единый паттерн для всех карточек рецептов
   (.recipe-card / .featured-card здесь; .sp-card — index.html; .fav-card —
   cabinet.html), одинаковая интенсивность (.55) и скорость (.25s). Только
   устройства с настоящим hover. .cat-card НЕ затронут. */
.recipe-card__body,
.featured-card-body { transition: opacity .25s ease; }
@media (hover: hover) and (pointer: fine) {
    .recipe-card:not(.is-skeleton):not(.locked):hover .recipe-card__body,
    .featured-card:not(.is-skeleton):not(.locked):hover .featured-card-body { opacity: .55; }
}

/* Locked recipe cards: текст остаётся полностью читаемым, состояние сообщает
   явный бейдж. Приглушаем только фото и не имитируем доступную hover-карточку. */
.recipe-card.locked, .featured-card.locked { opacity: 1; cursor: pointer; }
.recipe-card.locked .recipe-card__media img,
.featured-card.locked .featured-card-photo img { filter: grayscale(.22) brightness(.88); }
.recipe-card.locked:focus-visible,
.featured-card.locked:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.recipe-card__meta-wrap .recipe-card-time-note { justify-content: flex-end; margin: 3px 0 0; text-align: right; }

/* In compact desktop grids the rating can gain a numeric value after the API
   loads. Keep it from colliding with difficulty and cooking time. */
@container (max-width: 290px) {
    .recipe-card__details-line { flex-direction: column; align-items: flex-start; gap: 5px; }
    .recipe-card__details-line .recipe-card__meta-wrap { margin-left: 0; width: 100%; align-items: flex-start; }
    .recipe-card__meta-wrap .recipe-card-time-note { justify-content: flex-start; text-align: left; }
}

/* Бейджи уровня доступа — editorial-стиль, top-left, 10px Montserrat 800,
   без скруглений. Совпадают с .sp-bd--* на главной. */
.locked-badge,
.trial-badge,
.free-badge {
    position: absolute; top: 8px; left: 8px; right: auto; z-index: 2;
    box-sizing: border-box;
    height: 22px; padding: 0 10px;
    border-radius: 0;
    font-family: var(--sans);
    font-size: 10px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.locked-badge svg,
.trial-badge svg { width: 10px; height: 10px; }
/* Подписка (pro) — тёмный editorial-чёрный. */
.locked-badge { background: rgba(17, 17, 17, .92); color: #fff; }
.locked-badge svg { fill: #fff; }
/* Пробный (trial) — белый с бордером, тёмная иконка. */
.trial-badge {
    background: rgba(255, 255, 255, .95); color: var(--text);
    border: 1px solid var(--text);
}
.trial-badge svg { fill: #111; }
/* Бесплатно — белый с бордером, маркер ✦ оранжевый перед текстом. */
.free-badge {
    background: rgba(255, 255, 255, .95); color: var(--text);
    border: 1px solid var(--text);
}
.free-badge::before {
    content: '\2726'; /* ✦ */
    color: var(--accent);
    font-size: 12px;
    line-height: 1;
}

/* ── RECIPE PREVIEW (locked recipe.html для гостя/trial без доступа) ── */
.recipe-preview { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.recipe-preview .rp-photo {
    width: 100%; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden;
    margin-bottom: 20px; background: var(--bg-alt);
}
.recipe-preview .rp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recipe-preview .rp-title {
    font-family: 'Playfair Display', var(--serif);
    font-size: clamp(24px, 3.5vw, 32px); font-weight: 700;
    color: var(--text); line-height: 1.15; margin: 0 0 10px;
}
.recipe-preview .rp-quote {
    font-family: 'DM Serif Text', var(--serif); font-style: italic;
    color: var(--text-2); font-size: 15px; line-height: 1.5; margin: 0 0 18px;
}
.recipe-preview .rp-meta {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline;
    margin: 0 0 8px; font-size: 14px; color: var(--text-2);
}
.recipe-preview .rp-meta strong { color: var(--text); font-size: 18px; }
.recipe-preview .rp-meta-sub { font-size: 13px; color: var(--text-3); margin-bottom: 18px; }
.recipe-preview .rp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.recipe-preview .rp-tag {
    background: var(--bg-alt); color: var(--text-2); border-radius: 999px;
    padding: 3px 10px; font-size: 11px; font-weight: 600;
}
.recipe-preview .rp-cta-block {
    background: var(--bg-alt);
    border: 1px solid var(--border);
    border-radius: 0; padding: 32px 24px; text-align: center; margin-top: 8px;
}
.recipe-preview .rp-cta-icon { color: var(--accent); margin-bottom: 12px; display: flex; justify-content: center; }
.recipe-preview .rp-cta-icon svg { width: 36px; height: 36px; }
.recipe-preview .rp-cta-title {
    font-family: 'Playfair Display', var(--serif);
    font-size: 19px; font-weight: 600; color: var(--text);
    line-height: 1.3; margin-bottom: 18px;
}
.recipe-preview .rp-cta-btn {
    display: inline-block; background: var(--accent); color: #fff;
    border: 1px solid var(--accent); padding: 13px 32px; border-radius: 0;
    font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.recipe-preview .rp-cta-btn:hover, .recipe-preview .rp-cta-btn:focus-visible {
    background: var(--text); border-color: var(--text); outline: none;
}
.recipe-preview .rp-cta-note {
    max-width: 560px; margin: 14px auto 0; color: var(--text-2);
    font-size: 13px; line-height: 1.45;
}

/* ── PHOTO OVERLAY (rating + comments) ──────────────── */
.photo-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 8px;
    background: linear-gradient(to top, rgba(0,0,0,.42) 0%, transparent 100%);
    pointer-events: none;
}
.photo-rating-pill {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 30px;
    background: rgba(17,17,17,.86); border-radius: 0;
    padding: 5px 10px; pointer-events: all; cursor: pointer;
    border: 1px solid rgba(255,255,255,.22); -webkit-tap-highlight-color: transparent;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
    transition: background .15s, border-color .15s;
}
.photo-rating-pill:hover,
.photo-rating-pill:focus-visible {
    background: var(--text);
    border-color: rgba(255,255,255,.5);
    outline: none;
}
.photo-rating-pill .pr-star { color: #f5c542; font-size: 15px; line-height: 1; }
.photo-rating-pill .pr-label { color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.photo-rating-pill .pr-val  {
    color: #fff; font-size: 11px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
}

/* Stars popup */
.rating-popup {
    position: absolute; bottom: 48px; left: 0;
    background: #fff;
    border: 1px solid var(--text);
    border-radius: 0;
    padding: 9px 11px;
    box-shadow: 0 14px 34px rgba(0,0,0,.18);
    display: none; gap: 1px; align-items: center;
    z-index: 30; pointer-events: all;
}
.rating-popup.open { display: flex; }
.rating-popup .rp-star {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px; color: #d8d4ce; cursor: pointer; line-height: 1;
    transition: color .1s, background .15s;
}
.rating-popup .rp-star:hover { background: var(--bg-alt); color: var(--accent); }
.rating-popup .rp-star.filled { color: #f5a624; }

/* Comment button */
.photo-comment-btn {
    display: flex; align-items: center; gap: 6px;
    min-height: 30px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(26,26,26,.16); border-radius: 0;
    padding: 5px 10px;
    font-size: 11px; font-weight: 800; letter-spacing: .04em;
    color: var(--text);
    pointer-events: all; cursor: pointer; flex-shrink: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s;
    box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.photo-comment-btn:hover,
.photo-comment-btn:focus-visible {
    background: #fff;
    border-color: var(--text);
    outline: none;
}
.photo-comment-btn svg { width: 13px; height: 13px; fill: var(--text); flex-shrink: 0; }
.photo-comment-badge {
    background: var(--accent); color: white;
    border-radius: 0; min-width: 16px; height: 16px;
    font-size: 9px; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; padding: 0 3px;
}

/* ── COMMENTS MODAL ──────────────────────────────────── */
.comments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.comment-item {
    padding: 11px 14px; background: var(--bg-alt);
    border-radius: var(--r-m); border: 1px solid var(--border);
}
.comment-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.comment-author { font-size: 12px; font-weight: 700; color: var(--text); }
.comment-date { font-size: 10px; color: var(--text-3); }
.comment-text { font-size: 13px; color: var(--text-2); line-height: 1.55; }
.comments-empty { text-align: center; padding: 30px 10px; color: var(--text-3); font-size: 13px; }
.comments-form { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.c-input {
    width: 100%; padding: 10px 13px; border: 1.5px solid var(--border);
    border-radius: var(--r-s); font-family: inherit; font-size: 13px;
    background: var(--bg); color: var(--text); resize: none;
    transition: border-color var(--tr);
}
.c-input:focus { outline: none; border-color: var(--accent); }

/* ── VIDEO SOURCE CHOICE ─────────────────────────────── */
.video-sources {
    display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.video-source-btn {
    padding: 8px 16px; border-radius: var(--r-f);
    font-size: 12px; font-weight: 700;
    border: 1.5px solid var(--border); background: var(--bg-alt);
    color: var(--text-2); cursor: pointer; transition: var(--tr);
}
.video-source-btn.active { background: var(--text); color: white; border-color: var(--text); }
.video-source-btn:hover:not(.active) { border-color: var(--text); color: var(--text); }

/* ── DISH CARD ───────────────────────────────────────── */
.dish-card {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px; background: var(--card);
    border-radius: var(--r-m); border: 1px solid var(--border);
    cursor: pointer; transition: var(--tr); text-align: left; width: 100%;
}
.dish-card:hover { border-color: var(--accent); box-shadow: var(--sh-s); }
.dish-card:active { transform: scale(.99); }
.dish-emoji-box {
    width: 52px; height: 52px; border-radius: var(--r-s);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; flex-shrink: 0; background: var(--bg-alt);
}
.dish-info { flex: 1; min-width: 0; }
.dish-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; margin-bottom: 4px; }
.dish-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { padding: 3px 9px; border-radius: var(--r-f); font-size: 11px;
        font-weight: 600; background: var(--bg-alt); color: var(--text-2); }
.dish-kcal { font-size: 14px; font-weight: 800; color: var(--accent); flex-shrink: 0; text-align: right; }
.dish-kcal span { display: block; font-size: 10px; font-weight: 500; color: var(--text-3); }
.dish-arrow { color: var(--text-3); font-size: 18px; flex-shrink: 0; }
.dish-sublist-badge {
    font-size: 10px; font-weight: 700; color: var(--accent);
    background: var(--accent-l); padding: 2px 8px; border-radius: var(--r-f);
}

/* ── RECIPE PAGE ─────────────────────────────────────── */
.recipe-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
.recipe-main { min-width: 0; }
.recipe-sidebar {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 112px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.recipe-sidebar::-webkit-scrollbar { width: 0; height: 0; }

.recipe-hero-img {
    width: 100%; aspect-ratio: 4/3; border-radius: var(--r-l);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; position: relative; overflow: hidden;
    background: var(--bg-alt);
}
.recipe-hero-img-label {
    position: absolute; bottom: 12px; right: 12px;
    background: rgba(255,255,255,.92); border-radius: var(--r-s);
    padding: 5px 10px; font-size: 11px; font-weight: 700; color: var(--text);
    border: 1px solid var(--border);
}
.recipe-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.recipe-title { flex: 1; min-width: 0; font-family: var(--serif); font-size: clamp(24px,3vw,34px);
                font-weight: 700; color: var(--text); line-height: 1.15; margin-bottom: 0; }
.recipe-title-share {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--text);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.recipe-title-share svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.recipe-title-share:hover,
.recipe-title-share:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    outline: none;
}
.recipe-title-share:active { transform: translateY(1px); }
.recipe-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.recipe-badge { padding: 6px 14px; border-radius: var(--r-f); font-size: 12px; font-weight: 600;
                background: #fff8f4; color: var(--text-2); border: 1px solid #f0e4dc; }
.recipe-badge.green { background: var(--accent-l); color: var(--accent); border-color: var(--accent); }

/* КБЖУ */
.kbzhu { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px,1fr));
         gap: 8px; margin: 18px 0; }
.kbzhu-cell { text-align: center; padding: 14px 6px; background: var(--bg-alt);
               border-radius: var(--r-m); border: 1px solid var(--border); min-width: 0; }
.kbzhu-val { font-family: var(--serif); font-size: 20px; font-weight: 700;
             color: var(--text); line-height: 1; white-space: nowrap; }
.kbzhu-lbl { font-size: 9px; font-weight: 700; color: var(--text-3);
              text-transform: uppercase; letter-spacing: .3px; margin-top: 4px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbzhu-cell.main .kbzhu-val { color: var(--accent); }

/* Ingredients */
.v-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase;
                   letter-spacing: .7px; color: var(--text-3); margin-bottom: 12px; }
.ing-list { display: flex; flex-direction: column; gap: 6px; }
.ing-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
             background: #fff8f4; border-radius: var(--r-s);
             font-size: 13.5px; border: 1px solid #f0e4dc; }
.ing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.ing-name { flex: 1; min-width: 0; color: var(--text); }
.ing-swap-btn {
    font-size: 10px; font-weight: 700; padding: 4px 10px;
    text-transform: uppercase; letter-spacing: .08em;
    border-radius: 0; background: var(--accent-l);
    color: var(--accent); border: 1px solid var(--accent);
    cursor: pointer; white-space: nowrap; transition: var(--tr); flex-shrink: 0;
}
.ing-swap-btn:hover { background: var(--accent); color: white; }
.ing-swap-tip {
    margin-top: 5px; padding: 8px 12px; background: var(--accent-l);
    border-radius: var(--r-s); border-left: 3px solid var(--accent);
    font-size: 12px; color: var(--text-2); display: none;
}
.ing-swap-tip.open { display: block; }
.ing-swap-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .4px; color: var(--text-3); margin-bottom: 6px;
}
.ing-swap-grid {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.ing-swap-option {
    font-size: 12px; font-weight: 600; padding: 6px 12px;
    border-radius: 0; background: #fff; color: var(--accent);
    border: 1px solid var(--accent); cursor: pointer;
    transition: var(--tr); text-align: left;
}
.ing-swap-option:hover { background: var(--accent); color: #fff; }
.ing-name-swapped {
    color: var(--accent); font-weight: 600;
}
.ing-swap-revert {
    display: inline-flex; align-items: center; gap: 5px;
    background: #fff3ee; border: 1px solid var(--accent);
    border-radius: 0; min-height: 30px;
    font-size: 12px; line-height: 1.2; font-weight: 700; color: var(--accent);
    cursor: pointer; padding: 5px 8px; margin-left: 6px;
    vertical-align: middle; transition: var(--tr); box-shadow: 0 1px 3px rgba(232,64,10,.12);
}
.recipe-meta-stars .r-star,
.review-star { border: 0; background: transparent; padding: 0; font-family: inherit; }
.recipe-meta-stars .r-star:focus-visible,
.review-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.recipe-hero-img .card-fav-btn { border: 0; padding: 0; }
.ing-swap-revert:hover,
.ing-swap-revert:focus-visible { color: #fff; background: var(--accent); border-color: var(--accent); outline: none; }
.ing-optout-btn {
    display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px;
    font-size: 10px; font-weight: 700; padding: 4px 10px;
    text-transform: uppercase; letter-spacing: .08em;
    border-radius: 0; background: transparent;
    color: var(--text-3); border: 1px dashed var(--text-3);
    cursor: pointer; white-space: nowrap; transition: var(--tr); flex-shrink: 0;
}
.ing-optout-label { font-size: 10px; font-weight: 700; line-height: 1.2; }
.ing-optout-context {
    font-size: 9px; font-weight: 600; line-height: 1.2;
    letter-spacing: .02em; text-transform: none;
}
.ing-optout-btn:hover { background: var(--text-3); color: #fff; border-style: solid; }
.ing-item-excluded { opacity: .75; background: #f8f5f2; }
.ing-item-excluded .ing-name-excluded {
    text-decoration: line-through; color: var(--text-3);
}
.ing-dot-muted { background: var(--text-3); opacity: .5; }
.ing-restore-btn {
    font-size: 10px; font-weight: 700; padding: 4px 10px;
    text-transform: uppercase; letter-spacing: .08em;
    border-radius: 0; background: var(--accent-l);
    color: var(--accent); border: 1px solid var(--accent);
    cursor: pointer; white-space: nowrap; transition: var(--tr); flex-shrink: 0;
}
.ing-restore-btn:hover { background: var(--accent); color: #fff; }

/* Recipe section controls: button bottom border follows the title rule */
.recipe-section-head,
.steps-head { display: flex; align-items: flex-end; justify-content: space-between;
              gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.recipe-section-head { margin-bottom: 8px; }
.steps-head { margin-bottom: 4px; }
.recipe-main .recipe-section-head .v-section-title,
.recipe-main .steps-head .v-section-title { margin-top: 0 !important; margin-bottom: 0 !important; }
.recipe-section-actions { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }

/* Important preparation nuance from the recipe editor. */
.recipe-preparation-note {
    margin: 20px 0;
    padding: 16px 18px;
    background: var(--bg-alt);
    border-left: 3px solid var(--accent);
}
.recipe-preparation-note-title {
    margin: 0 0 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--accent);
}
.recipe-preparation-note-text {
    color: var(--text);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-line;
}

/* Steps — vertical layout: number + text, photo below */
.steps-mode-btn {
    display: none;
    align-items: center; justify-content: center; gap: 6px;
    min-height: 34px; padding: 8px 12px;
    border-radius: 0;
    border: 1px solid var(--accent);
    background: #fff; color: var(--accent);
    font: 800 10px/1.15 var(--sans);
    letter-spacing: .11em;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0; -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.steps-mode-btn:active { opacity: .8; }
.steps-mode-btn.on {
    background: var(--accent); color: #fff;
    border-color: var(--accent);
}
.steps-mode-btn .steps-mode-icon {
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.steps-mode-btn .steps-mode-icon svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Hint banner for long recipes */
.steps-hint {
    display: none;
    align-items: flex-start; gap: 10px;
    margin-top: 12px; padding: 10px 12px;
    background: var(--accent-l); border: 1px solid var(--accent);
    border-radius: var(--r-m);
    font: 500 13px/1.4 var(--sans); color: var(--text);
}
.steps-hint-icon { font-size: 16px; line-height: 1.2; flex-shrink: 0; }
.steps-hint-text { flex: 1; min-width: 0; }
.steps-hint-text b { color: var(--accent); font-weight: 700; }
.steps-hint-close {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
    border: none; background: transparent; color: var(--text-2);
    font-size: 18px; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.steps-hint-close:hover { background: rgba(0,0,0,.06); }

/* Подсказки по шагам при исключении optional-ингредиентов */
.steps-omit-hints {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 14px; padding: 12px 14px;
    background: var(--accent-l);
    border: 1px solid #f2c2b0;
    border-left: 3px solid var(--accent);
    border-radius: var(--r-m);
    font: 500 13px/1.5 var(--sans); color: var(--text);
}
.steps-omit-hints[hidden] { display: none !important; }
.steps-omit-hints-icon { font-size: 16px; line-height: 1.3; flex-shrink: 0; }
.steps-omit-hints-body { flex: 1; min-width: 0; }
.steps-omit-hints-text { word-wrap: break-word; }
.steps-omit-hints-list { list-style: disc; padding-left: 18px; margin: 0; }
.steps-omit-hints-list li { margin: 0; }
.steps-omit-hints-list li + li { margin-top: 4px; }
@media (max-width: 480px) {
    .steps-omit-hints { padding: 10px 12px; font-size: 12.5px; }
}
.steps-expand-btn {
    display: none;
    width: 100%; margin-top: 12px; padding: 11px 14px;
    border: 1px dashed var(--border); border-radius: 10px;
    background: transparent; color: var(--accent);
    font: 700 13px/1.2 var(--sans); cursor: pointer;
    align-items: center; justify-content: center; gap: 8px;
    -webkit-tap-highlight-color: transparent;
}
.steps-expand-arrow { font-size: 10px; }
.steps-list { display: flex; flex-direction: column; }
.step-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 14px; padding: 18px 0;
              border-bottom: 1px solid var(--border);
              font-size: 14px; color: var(--text); line-height: 1.65; }
.step-item:last-child { border-bottom: none; }
.step-num { width: 28px; height: 28px; border-radius: 50%;
             background: var(--accent); color: white;
             font-size: 12px; font-weight: 800;
             display: flex; align-items: center; justify-content: center;
             flex-shrink: 0; margin-top: 1px; }
.step-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.step-text { flex: 1; min-width: 0; }
.step-photo-wrap,
.recipe-ingredients-photo {
    width: 100%; aspect-ratio: 4/3; position: relative; overflow: hidden;
    border-radius: 10px; background: #f4efe8;
}
.recipe-ingredients-photo { margin-top: 16px; }
.step-photo-wrap .step-photo-img,
.recipe-ingredients-photo .step-photo-img {
    width: 100%; height: 100%; max-width: none; margin: 0;
    border-radius: 10px; display: block; object-fit: cover;
}
.step-photo-wrap.is-image-error::after,
.step-photo-carousel.is-image-error::after,
.recipe-ingredients-photo.is-image-error::after {
    content: 'Изображение временно недоступно';
    position: absolute; inset: 0; display: grid; place-items: center;
    padding: 16px; text-align: center; color: var(--text-3);
    font: 700 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .05em;
}
/* Резерв aspect-ratio для одиночного фото шага и финального фото —
   до загрузки img у этих случаев был height: 0, потом резко 4:3 от ширины.
   Карусель (.step-photo-carousel) живёт внутри .step-photo-wrap, но имеет
   собственную геометрию, поэтому селектор намеренно direct-child (>). */
.step-photo-wrap > .step-photo-img {
    aspect-ratio: 4/3;
    object-fit: cover;
    height: 100%;
}
.step-photo-carousel { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 10px; background: #f4efe8; }
.step-photo-carousel .step-photo-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; margin-top: 0; border-radius: 10px; object-fit: cover; }
.step-photo-carousel .step-photo-img.is-active { display: block; }
.step-photo-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px;
    background: rgba(32, 24, 18, .72); color: #fff;
    box-shadow: 0 8px 18px rgba(0,0,0,.18);
    font: 700 30px/1 var(--sans); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.step-photo-prev { left: 8px; }
.step-photo-next { right: 8px; }
.step-photo-hint {
    position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
    padding: 6px 11px; border-radius: 999px;
    background: rgba(32, 24, 18, .66); color: #fff;
    font: 700 12px/1 var(--sans); white-space: nowrap;
    pointer-events: none;
}
.step-photo-dots {
    position: absolute; left: 50%; bottom: 42px; transform: translateX(-50%);
    display: flex; gap: 6px; align-items: center; justify-content: center;
    pointer-events: none;
}
.step-photo-dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: rgba(255,255,255,.62);
}
.step-photo-dot.is-active { width: 18px; background: #fff; }
.step-photo-counter {
    position: absolute; right: 10px; bottom: 10px;
    padding: 4px 9px; border-radius: 999px;
    background: rgba(32, 24, 18, .62); color: #fff;
    font: 700 12px/1 var(--sans);
}

/* Step-by-step mode (mobile only) */
.steps-stepper { margin-top: 12px; display: flex; flex-direction: column; gap: 0; }
.steps-stepper[hidden], .steps-list[hidden], .steps-expand-btn[hidden], .steps-hint[hidden] { display: none !important; }
.stepper-progress { display: flex; flex-direction: column; gap: 6px; }
.stepper-progress-text { font: 700 13px/1 var(--sans); color: var(--text-2); }
.stepper-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3px;
    height: 4px;
    overflow: hidden;
}
.stepper-bar-segment {
    min-width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--border);
    transition: background .2s ease;
}
.stepper-bar-segment.is-done { background: var(--accent); }
.stepper-bar-segment.is-current:not(.is-done) { background: #f2c2b0; }
.stepper-current { margin-top: 14px; }
.stepper-current .step-item { padding: 0; border: none; }
.step-item.is-done .step-text {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--text-3);
    color: var(--text-2);
}
.step-item.is-done .step-num { background: var(--text-3); }
.step-item.is-done .step-photo-wrap { opacity: .75; }
.stepper-done {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font: 700 11px/1.15 var(--sans);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-2);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.stepper-done input {
    width: 18px;
    height: 18px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--text-3);
    border-radius: 0;
    background: #fff;
    cursor: pointer;
    display: inline-grid;
    place-content: center;
    flex-shrink: 0;
}
.stepper-done input::before {
    content: '';
    width: 9px;
    height: 9px;
    transform: scale(0);
    transition: transform .14s ease;
    background: var(--accent);
}
.stepper-done input:checked {
    border-color: var(--accent);
    background: #fff;
}
.stepper-done input:checked::before { transform: scale(1); }
.stepper-done input:focus-visible {
    outline: 2px solid var(--accent-l);
    outline-offset: 2px;
}
.stepper-nav { display: flex; gap: 10px; margin-top: 16px; }
.stepper-nav-btn {
    flex: 1;
    min-height: 40px;
    padding: 10px 12px;
    border-radius: 0;
    border: 1px solid var(--text);
    background: #fff;
    color: var(--text);
    font: 800 11px/1.15 var(--sans);
    letter-spacing: .11em;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.stepper-nav-btn:hover,
.stepper-nav-btn:focus-visible {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
    outline: none;
}
.stepper-nav-btn.stepper-nav-next { background: var(--accent); color: #fff; border-color: var(--accent); }
.stepper-nav-btn.stepper-nav-next:hover,
.stepper-nav-btn.stepper-nav-next:focus-visible {
    background: var(--text);
    border-color: var(--text);
}
.stepper-nav-btn:disabled,
.stepper-nav-btn:disabled:hover,
.stepper-nav-btn:disabled:focus-visible {
    background: #fff;
    border-color: var(--border);
    color: var(--text-3);
    opacity: .7;
    cursor: default;
}

/* Mobile: show mode toggle + expand button; collapse list to first 3 steps */
@media (max-width: 767px) {
    .steps-mode-btn { display: inline-flex; }
    .steps-expand-btn { display: flex; }
    .steps-hint { display: flex; }
    .steps-list.is-collapsed .step-item:nth-child(n+4) { display: none; }
}

/* Desktop: keep full steps list, suppress compact/stepper controls even if JS left them on */
@media (min-width: 768px) {
    .steps-mode-btn,
    .steps-expand-btn,
    .steps-hint,
    .steps-stepper { display: none !important; }
    .steps-list { display: flex !important; }
    .steps-list.is-collapsed .step-item { display: grid !important; }
}

/* VK Video */
.vk-embed { border-radius: var(--r-m); overflow: hidden; aspect-ratio: 16/9;
              background: #111; display: flex; align-items: center;
              justify-content: center; margin-top: 20px; position: relative; cursor: pointer; }
.vk-embed-inner { position: absolute; inset: 0; display: flex; align-items: center;
                   justify-content: center; flex-direction: column; gap: 8px;
                   color: rgba(255,255,255,.7); font-size: 13px; }
.vk-play { width: 58px; height: 58px; border-radius: 50%; background: var(--accent);
            display: flex; align-items: center; justify-content: center; font-size: 22px; color: white; }
.vk-badge-label { position: absolute; top: 10px; right: 10px; background: #0077ff;
                   color: white; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 800; }

/* Dzen link card (no embed available) */
.dzen-link-card {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; position: absolute; inset: 0; background: #1a1a1a;
    text-decoration: none; color: #fff; transition: background .2s;
    overflow: hidden;
}
.dzen-link-card:hover { background: #2a2a2a; }
.dzen-link-poster {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transform: scale(1.02);
}
.dzen-link-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.46) 55%, rgba(0,0,0,.68) 100%),
        rgba(15,15,15,.28);
}
.dzen-link-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; text-align: center;
}
.dzen-link-icon { opacity: .9; }
.dzen-link-text { font-size: 15px; font-weight: 700; letter-spacing: .3px; text-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* Julia tip — speech bubble with avatar on top */
.julia-tip { margin-top: 32px; display: flex; flex-direction: column; align-items: center; }
.julia-tip-ava {
    width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: top;
    border: 3px solid #fff; box-shadow: 0 3px 14px rgba(0,0,0,.12);
    margin-bottom: -18px; position: relative; z-index: 2; flex-shrink: 0;
}
.julia-tip-bubble {
    position: relative;
    background: #f9f4f0; border-radius: 16px;
    padding: 30px 20px 18px; width: 100%;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.julia-tip-bubble::before {
    content: '';
    position: absolute; top: -7px; left: 50%;
    width: 14px; height: 14px; background: #f9f4f0;
    border-radius: 3px;
    transform: translateX(-50%) rotate(45deg);
}
.julia-tip-head { display: flex; align-items: center; gap: 8px; font-size: 11px;
                   font-weight: 800; color: var(--accent); text-transform: uppercase;
                   letter-spacing: .6px; margin-bottom: 6px; }
.julia-tip-text { font-size: 14px; color: var(--text); line-height: 1.65;
                  font-style: italic; font-family: var(--serif); text-align: center; }
.julia-tip-name { font-size: 11px; color: var(--text-3); margin-top: 8px;
                  text-align: right; font-weight: 600; }

/* ── BALANCE SIDEBAR — V2 (wizard mobile / accordion desktop) ── */
/* Group CSS vars: --g-color / --g-bg / --g-border set on each .bal-group */
.bal-sidebar {
    background: #fff; border-radius: 14px; border: 1px solid #e5e5e5;
    overflow: hidden; font-family: 'Montserrat', system-ui, sans-serif;
}

/* Wizard step head — mobile only */
.bal-wizard-head {
    display: none;
    padding: 14px 16px 12px;
    background: var(--g-bg, #fff7ec);
    border-bottom: 1px solid var(--g-border, #f0c080);
    transition: background .3s ease, border-color .3s ease;
}
.bal-wizard-step-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.bal-wizard-step-counter {
    font-size: 11px; font-weight: 700; color: var(--g-color, #b85e00);
    text-transform: uppercase; letter-spacing: .06em;
}
.bal-wizard-dots { display: flex; gap: 4px; }
.bal-wizard-dot {
    width: 8px; height: 8px; border-radius: 4px;
    background: #ddd; cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}
.bal-wizard-dot.active { width: 24px; background: var(--g-color, #b85e00); }
.bal-wizard-dot.done { background: var(--dot-color, var(--g-color, #b85e00)); }
.bal-wizard-title-row { display: flex; align-items: center; gap: 10px; }
.bal-wizard-icon { font-size: 28px; line-height: 1; }
.bal-wizard-label {
    font-size: 16px; font-weight: 800;
    color: var(--g-color, #b85e00);
}
.bal-wizard-hint { font-size: 12px; color: #666; font-weight: 500; }

/* Groups */
.bal-group {
    --g-color: #1a5fa8;
    --g-bg: #edf5ff;
    --g-border: #b8d4f8;
    border-bottom: 1px solid #f0f0f0;
    background: #fff;
    transition: background .3s ease;
}
.bal-group:last-of-type { border-bottom: none; }
.bal-group.done { background: var(--g-bg); }

.bal-group.group-protein { --g-color: #1a5fa8; --g-bg: #edf5ff; --g-border: #b8d4f8; }
.bal-group.group-fat     { --g-color: #2d7a2d; --g-bg: #eef8ee; --g-border: #90d090; }
.bal-group.group-carbs   { --g-color: #b85e00; --g-bg: #fff7ec; --g-border: #f0c080; }
.bal-group.group-fiber   { --g-color: #6a3db8; --g-bg: #f5f0ff; --g-border: #c0a0f0; }

/* Accordion head — desktop only */
.bal-group-head {
    width: 100%; display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; background: transparent; border: none;
    cursor: pointer; text-align: left; font-family: inherit;
    color: inherit;
}
.bal-group-icon-box {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; background: #f0f0f0;
    transition: background .2s ease;
}
.bal-group.done .bal-group-icon-box {
    background: var(--g-color);
    color: #fff;
}
.bal-group.done .bal-group-icon-box .bal-group-icon-emoji { display: none; }
.bal-group.done .bal-group-icon-box .bal-group-icon-check { display: inline-block; }
.bal-group-icon-check { display: none; width: 14px; height: 11px; }
.bal-group-label {
    flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #333;
}
.bal-group.done .bal-group-label { color: var(--g-color); }
.bal-group.is-guided .bal-group-head {
    background: var(--g-bg);
    box-shadow: inset 3px 0 0 var(--g-color);
}
.bal-group-done-badge {
    display: none; font-size: 11px; font-weight: 700;
    color: var(--g-color); background: var(--g-bg);
    padding: 2px 8px; border-radius: 12px;
    border: 1px solid var(--g-border);
}
.bal-group.done .bal-group-done-badge { display: inline-block; }
.bal-group-chevron {
    font-size: 10px; color: #aaa;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.bal-group.open .bal-group-chevron { transform: rotate(180deg); }

/* Group body + items */
.bal-group-body {
    padding: 0 12px 10px;
    animation: balFadeUp .2s ease both;
}
.bal-group-items {
    display: flex; flex-direction: column; gap: 6px;
}

.bal-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 10px;
    background: #fafafa;
    border: 1.5px solid #eee;
    cursor: pointer; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
    text-align: left; width: 100%;
    font-family: inherit; color: inherit;
}
.bal-item:hover { border-color: var(--g-border, #eee); background: #fff; }
.bal-item.checked {
    background: var(--g-bg);
    border-color: var(--g-border);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--g-color) 15%, transparent);
}
.bal-item-check {
    width: 22px; height: 22px; border-radius: 5px;
    border: 2px solid #d0d0d0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background-color .15s ease, border-color .15s ease;
    background: transparent;
}
.bal-item.checked .bal-item-check {
    background: var(--g-color); border-color: var(--g-color);
}
.bal-item.checked .bal-item-check::after {
    content: '✓'; color: #fff; font-size: 13px; font-weight: 800;
    animation: balCheckPop .2s ease both;
}
.bal-item-text {
    flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
    color: #222; line-height: 1.3;
}
.bal-item.checked .bal-item-text { color: var(--g-color); }
.bal-item-amount { color: #aaa; font-size: 12px; font-weight: 500; }
.bal-item-kcal {
    font-size: 13px; font-weight: 700; color: #e8400a;
    flex-shrink: 0; line-height: 1.1; text-align: right;
}
.bal-item.checked .bal-item-kcal { color: var(--g-color); }
.bal-item-kcal::after {
    content: 'ккал'; display: block;
    font-size: 10px; color: #bbb; font-weight: 600;
}
.bal-item-recipe-link {
    display: inline-block; font-size: 11px; color: #e8400a; font-weight: 700;
    margin-top: 6px; padding: 3px 9px; border-radius: 999px;
    background: rgba(232,64,10,.08);
    border: 1px solid rgba(232,64,10,.22);
    letter-spacing: .2px;
}
.bal-item-recipe-link:hover { background: rgba(232,64,10,.18); }

/* Wizard nav — mobile only */
.bal-wizard-nav {
    display: none;
    padding: 0 12px 12px; gap: 8px;
}
.bal-wizard-prev, .bal-wizard-next {
    padding: 11px; border-radius: 10px;
    font-family: inherit; font-size: 13px; font-weight: 700;
    cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.bal-wizard-prev {
    flex: 1; border: 1px solid #e0e0e0; background: transparent; color: #444;
}
.bal-wizard-prev:disabled { color: #ccc; cursor: default; }
.bal-wizard-next {
    flex: 2; border: none;
    background: var(--g-color, #f0f0f0); color: #fff;
}
.bal-wizard-next:disabled { background: #f0f0f0; color: #bbb; cursor: default; }

/* ── ИТОГО block — shared ────────────────────────── */
.bal-total {
    padding: 12px 16px 14px;
    background: #fff;
    border-top: 1px solid #e6e9ef;
    transition: background .4s ease, border-color .4s ease;
}
.bal-sidebar.balanced .bal-total {
    background: linear-gradient(135deg,#e8f5e9,#f1f8e9);
    border-top-color: #a5d6a7;
}
.bal-total-header {
    display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px;
}
.bal-total-label {
    font-size: 10px; font-weight: 800; color: #6b4a3a;
    letter-spacing: .1em; text-transform: uppercase;
}
.bal-total-balanced-note {
    font-size: 11px; color: #2e7d32; font-weight: 700;
    display: none;
}
.bal-sidebar.balanced .bal-total-balanced-note { display: inline; }
.bal-total-body {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px; align-items: end;
}
.bal-total-cells {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
    min-width: 0;
}
.bal-total-cell {
    background: #f8f5f2; border-radius: 8px;
    border: 1px solid #e6e9ef;
    padding: 7px 4px; text-align: center;
    min-width: 0; overflow: hidden;
}
.bal-total-cell b {
    display: block; font-size: 15px; color: #1f2328;
    line-height: 1.1; font-weight: 700;
    white-space: nowrap;
}
.bal-total-cell span {
    font-size: 9px; text-transform: uppercase;
    letter-spacing: .06em; color: #6a7280; font-weight: 700;
    white-space: nowrap;
}
.bal-total-kcal {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 42px; font-weight: 700; color: #e8400a;
    line-height: 1; white-space: nowrap;
    animation: balNumFlip .25s ease both;
}
.bal-total-kcal-unit {
    font-size: 16px; font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}
/* Узкие экраны: ккал — отдельной строкой справа, ячейки на всю ширину */
@media (max-width: 420px) {
    .bal-total-body { grid-template-columns: 1fr; }
    .bal-total-kcal { justify-self: end; font-size: 36px; }
}

/* Animations */
@keyframes balCheckPop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes balFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes balNumFlip { 0% { transform: translateY(4px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }

/* ── View switch: mobile wizard ↔ desktop accordion ── */
@media (max-width: 1024px) {
    /* Wizard: show head + nav, hide accordion chrome */
    .bal-sidebar .bal-wizard-head { display: block; }
    .bal-sidebar .bal-wizard-nav  { display: flex; }
    .bal-sidebar .bal-group-head  { display: none; }
    .bal-sidebar .bal-group       { border-bottom: none; background: #fff !important; }
    .bal-sidebar .bal-group-body  { display: none; }
    /* Show only current step's body */
    .bal-sidebar[data-wizard-step="0"] .bal-group[data-step="0"] > .bal-group-body,
    .bal-sidebar[data-wizard-step="1"] .bal-group[data-step="1"] > .bal-group-body,
    .bal-sidebar[data-wizard-step="2"] .bal-group[data-step="2"] > .bal-group-body,
    .bal-sidebar[data-wizard-step="3"] .bal-group[data-step="3"] > .bal-group-body { display: block; padding: 12px; }
    /* Group headers remain visible in the mobile wizard. A second tap on the
       active header collapses its items, while a tap on another header opens it. */
    .bal-sidebar[data-wizard-collapsed="true"] .bal-group > .bal-group-body { display: none !important; }
    /* Desktop-only progress pills hidden on mobile */
    .bal-sidebar .bal-progress { display: none; }
}
@media (min-width: 1025px) {
    .bal-sidebar .bal-group-body { display: none; }
    .bal-sidebar .bal-group.open > .bal-group-body { display: block; }
}

/* ── MODAL ───────────────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,15,15,.55);
    z-index: 2000; opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: flex-end; justify-content: center;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

/* Mobile: bottom sheet */
.modal-box {
    position: relative;
    width: 100%;
    background: var(--card);
    border-radius: 0;
    max-height: 92dvh; display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform .38s cubic-bezier(.32,.72,0,1),
                opacity .22s ease;
    opacity: 0;
    overflow: hidden;
    box-shadow: 0 -8px 40px rgba(0,0,0,.12);
}
.modal-overlay.open .modal-box {
    transform: translateY(0);
    opacity: 1;
}

/* Desktop / tablet: centered card */
@media (min-width: 768px) {
    .modal-overlay { align-items: center; }
    .modal-box {
        width: 480px;
        max-width: 92vw;
        border-radius: 0;
        border: 1px solid var(--border);
        max-height: 80vh;
        transform: scale(.88) translateY(20px);
        box-shadow: 0 24px 80px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.1);
        transition: transform .35s cubic-bezier(.34,1.15,.64,1),
                    opacity .22s ease;
    }
    .modal-overlay.open .modal-box {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
    .modal-handle { display: none; }
    .modal-header { padding: 20px 24px 16px; }
    .modal-body   { padding: 16px 24px 24px; }
    .modal-footer { padding: 14px 24px 24px; }
}

.modal-handle { width: 36px; height: 4px; background: var(--border);
                border-radius: 2px; margin: 12px auto 4px; flex-shrink: 0; }
.modal-header { padding: 8px 20px 14px; border-bottom: 1px solid var(--border);
                flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; }
.modal-title { font-size: 16px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 8px; }
/* .modal-plate-icon удалён вместе с устаревшим .vh-slice* — иконка
   тарелки в заголовке модалок теперь рендерится inline-SVG (.sp-plate-svg). */
/* Единая иконка-крестик (inline-SVG). Размер 1em — наследует font-size
   кнопки-родителя, поэтому заменяет глиф ✕ без правок сайзинга каждой кнопки. */
.icon-x { width: 1em; height: 1em; display: inline-block; vertical-align: middle; flex-shrink: 0; pointer-events: none; }
.modal-close {
    width: 32px; height: 32px; border-radius: 50%; background: var(--bg-alt);
    font-size: 16px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--text-2); transition: var(--tr);
    border: none; flex-shrink: 0;
}
.modal-close:hover { background: var(--border); }
.modal-body { overflow-y: auto; flex: 1; padding: 16px 20px 20px; -webkit-overflow-scrolling: touch; }
.modal-footer { padding: 14px 20px 20px; border-top: 1px solid var(--border); flex-shrink: 0; }

.grocery-modal { backdrop-filter: none; -webkit-backdrop-filter: none; }
.grocery-modal .grocery-modal-box {
    width: min(680px, calc(100vw - 24px));
    max-height: min(86dvh, 720px);
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 24px 80px rgba(0,0,0,.22);
}
.grocery-modal-head {
    padding: 28px 32px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 24px;
    flex-shrink: 0;
}
.grocery-modal-kicker {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--text);
}
.grocery-modal-kicker span {
    margin: 0 10px;
    color: var(--text-3);
}
.grocery-modal-recipe-row {
    width: 100%;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
}
.grocery-modal-chevron {
    width: 14px;
    height: 14px;
    margin-top: 4px;
    padding: 0;
    background: transparent;
    border: none;
    border-right: 2px solid var(--text);
    border-bottom: 2px solid var(--text);
    transform: rotate(45deg);
    transition: transform .2s ease, border-color .2s ease;
}
.grocery-modal-chevron:hover,
.grocery-modal-chevron:focus-visible {
    border-color: var(--accent);
    outline: none;
}
.grocery-modal.is-collapsed .grocery-modal-chevron {
    margin-top: 8px;
    transform: rotate(-45deg);
}
.grocery-modal.is-collapsed .grocery-modal-body {
    display: none;
}
.grocery-modal-title {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
}
.grocery-modal-title span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
}
.grocery-modal-remove-all {
    margin-top: 2px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-2);
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .2s ease;
}
.grocery-modal-remove-all:hover,
.grocery-modal-remove-all:focus-visible {
    color: var(--accent);
    outline: none;
}
.grocery-modal-body {
    flex: 1;
    min-height: 180px;
    overflow-y: auto;
    padding: 8px 74px 20px;
    -webkit-overflow-scrolling: touch;
}
.grocery-modal-item {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 16px;
    line-height: 1.4;
}
.grocery-modal-check {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: left;
    cursor: default;
}
.grocery-modal-checkmark {
    display: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border: 1px solid var(--text);
    background: #fff;
    position: relative;
}
.grocery-modal-check[aria-pressed="true"] {
    color: var(--text-3);
}
.grocery-modal-check[aria-pressed="true"] .grocery-modal-check-label {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.grocery-modal-check[aria-pressed="true"] .grocery-modal-checkmark {
    background: var(--text);
    border-color: var(--text);
}
.grocery-modal-check[aria-pressed="true"] .grocery-modal-checkmark::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
}
.grocery-modal.is-shop-mode .grocery-modal-check {
    cursor: pointer;
}
.grocery-modal.is-shop-mode .grocery-modal-checkmark {
    display: inline-block;
}
.grocery-modal.is-shop-mode .grocery-modal-remove {
    display: none;
}
.grocery-modal-remove {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    background: transparent;
    border: none;
    font-size: 18px;
    transition: color .2s ease, background .2s ease;
}
.grocery-modal-remove:hover,
.grocery-modal-remove:focus-visible {
    color: var(--text);
    background: var(--bg-alt);
    outline: none;
}
.grocery-modal-empty {
    padding: 56px 0;
    color: var(--text-3);
    font-size: 14px;
    text-align: center;
}
.grocery-modal-footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 18px 20px 20px;
    background: #fff;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.grocery-modal-btn {
    min-height: 40px;
    padding: 12px 16px;
    border-radius: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.15;
    text-transform: uppercase;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.grocery-modal-btn-ghost {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--text);
}
.grocery-modal-btn-ghost:hover,
.grocery-modal-btn-ghost:focus-visible {
    background: var(--text);
    color: #fff;
    outline: none;
}
.grocery-modal-btn-primary {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}
.grocery-modal-btn-primary:hover,
.grocery-modal-btn-primary:focus-visible {
    background: var(--text);
    border-color: var(--text);
    outline: none;
}
@media (max-width: 767px) {
    .grocery-modal .grocery-modal-box {
        width: 100%;
        max-height: 88dvh;
    }
    .grocery-modal-head { padding: 22px 20px; gap: 18px; }
    .grocery-modal-recipe-row { grid-template-columns: 22px minmax(0, 1fr); }
    .grocery-modal-remove-all { grid-column: 2; justify-self: start; }
    .grocery-modal-body { padding: 6px 22px 18px; }
    .grocery-modal-item { min-height: 64px; font-size: 15px; }
    .grocery-modal-footer { grid-template-columns: 1fr; gap: 10px; }
}

/* Plate items */
.plate-items { display: flex; flex-direction: column; gap: 10px; }
.plate-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
               background: var(--bg-alt); border-radius: var(--r-s); border: 1px solid var(--border); }
.plate-item-emoji { font-size: 24px; }
.plate-item-photo { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.plate-item-info { flex: 1; }
.plate-item-name { font-size: 13px; font-weight: 700; color: var(--text); }
.plate-item-kcal { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.plate-additions { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); display: flex; flex-direction: column; gap: 3px; }
.plate-addition-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-2); }
.plate-addition-dot { color: var(--accent); font-weight: 700; font-size: 12px; flex-shrink: 0; }
.plate-addition-name { flex: 1; min-width: 0; }
.plate-addition-kcal { flex-shrink: 0; font-weight: 600; color: var(--text-3); }
.plate-item-del { width: 28px; height: 28px; border-radius: 50%; background: var(--border);
                  display: flex; align-items: center; justify-content: center;
                  color: var(--text-3); font-size: 14px; cursor: pointer;
                  transition: var(--tr); flex-shrink: 0; }
.plate-item-del:hover { background: #fde8e8; color: #c04040; }
.plate-total-block { margin-top: 14px; padding: 14px 16px;
                     background: var(--bg-alt); border-radius: var(--r-s);
                     border: 1px solid var(--border); }
.plate-total-title { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase;
                     letter-spacing: .5px; margin-bottom: 6px; }
.plate-total-val { font-size: 15px; font-weight: 700; color: var(--text); }

/* (Legacy .water-row / .shop-ask removed — see .plate-modal-v1 .hydration / .shop below) */

/* Empty plate */
.plate-empty { text-align: center; padding: 48px 20px; }
.plate-empty-icon { font-size: 52px; margin-bottom: 14px; }
.plate-empty-text { font-size: 16px; font-weight: 700; color: var(--text); }
.plate-empty-sub { font-size: 13px; color: var(--text-3); margin-top: 6px; }

/* ─── PLATE MODAL — EDITORIAL VARIANT 1 ──────────────────────
   Scoped by .plate-modal-v1 on .modal-overlay#plate-overlay. */
.plate-modal-v1 .modal-box {
    background: #fff;
    border: 1px solid var(--border);
}
.plate-modal-v1 .modal-header {
    border-bottom: 1px solid var(--text);
    padding: 14px 20px;
}
.plate-modal-v1 .modal-title {
    font-size: 11px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text); gap: 10px;
}
.plate-modal-v1 .modal-close {
    width: 32px; height: 32px; border-radius: 0;
    border: 1px solid var(--border); background: transparent;
    font-size: 14px; color: var(--text-2);
}
.plate-modal-v1 .modal-close:hover {
    border-color: var(--text); color: var(--text); background: transparent;
}
.plate-modal-v1 .modal-footer {
    border-top: 1px solid var(--text);
    background: #fff;
    padding: 14px 20px;
}
@media (min-width: 768px) {
    .plate-modal-v1 .modal-box {
        border-radius: 0;
        width: 540px;
    }
    .plate-modal-v1 .modal-header { padding: 16px 24px; }
    .plate-modal-v1 .modal-footer { padding: 16px 24px; }
}

/* Empty state — editorial card */
.pv1-empty { padding: 40px 20px 32px; text-align: center; }
.pv1-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 14px;
}
.pv1-headline {
    font-family: var(--serif); font-size: 28px; font-weight: 700;
    line-height: 1.1; letter-spacing: -.02em; color: var(--text);
    margin: 0 0 14px;
}
.pv1-divider { width: 48px; height: 2px; background: var(--text); margin: 0 auto 16px; }
.pv1-sub {
    font-size: 14px; color: var(--text-2); line-height: 1.55;
    max-width: 340px; margin: 0 auto 24px;
}
.pv1-cta {
    display: inline-block; padding: 13px 24px; cursor: pointer;
    background: var(--text); color: #fff; border: none;
    font-family: inherit;
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    transition: var(--tr);
}
.pv1-cta:hover { background: var(--accent); }
@media (min-width: 768px) {
    .pv1-empty { padding: 56px 32px 48px; }
    .pv1-headline { font-size: 36px; }
}

/* Filled state — items list */
.pv1-items { display: flex; flex-direction: column; }
.pv1-item {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) 34px;
    align-items: center; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid var(--border);
}
.pv1-item:first-child { padding-top: 4px; }
.pv1-item:last-child { border-bottom: 1px solid var(--text); }
.pv1-item-photo,
.pv1-item-emoji {
    width: 56px; height: 56px; flex-shrink: 0; background: #fff;
    border: 1px solid var(--border);
}
.pv1-item-photo { object-fit: cover; }
.pv1-item-emoji {
    display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.pv1-item-product-icon {
    width: 56px; height: 56px; flex-shrink: 0; background: #fff;
    border: 1px solid var(--border); box-sizing: border-box;
    color: var(--text); padding: 4px;
    stroke-width: 1.8;
}
.pv1-item-main { min-width: 0; padding-top: 0; }
.pv1-item-name {
    font-family: var(--serif); font-size: 18px; font-weight: 700;
    line-height: 1.2; color: var(--text); margin-bottom: 4px;
    letter-spacing: -.01em; word-wrap: break-word;
}
.pv1-item-name.is-link { cursor: pointer; transition: var(--tr); }
.pv1-item-name.is-link:hover { color: var(--accent); }
.pv1-item-meta {
    font-size: 11px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-3);
    font-variant-numeric: tabular-nums;
}
.pv1-additions {
    list-style: none; padding: 8px 0 0; margin: 6px 0 0;
    border-top: 1px dashed var(--border);
    display: flex; flex-direction: column; gap: 2px;
}
.pv1-addition {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12px; color: var(--text-2);
}
.pv1-addition-dot { color: var(--accent); font-weight: 700; font-size: 13px; }
.pv1-addition-name { flex: 1; min-width: 0; }
.pv1-addition-kcal { color: var(--text-3); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pv1-item-del {
    width: 34px; height: 34px; flex-shrink: 0;
    border: 1px solid var(--border); background: transparent;
    color: var(--text-2); font-size: 13px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: var(--tr); margin-top: 0; font-family: inherit;
}
.pv1-item-del:hover,
.pv1-item-del:focus-visible {
    border-color: var(--text);
    background: var(--text);
    color: #fff;
    outline: none;
}

/* Totals — Plate Modal V1: 5 equal metrics (kcal · prot · fat · carb · fiber)
   Desktop (≥ 768px): one row of 5 cells, kcal in accent.
   Mobile (< 768px):  kcal full-width row on top (40px) + 4 macros row below. */
.pv1-totals { margin-top: 22px; }
.pv1-totals-label {
    font-size: 11px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text); margin-bottom: 12px;
}
.pv1-totals-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.pv1-tot {
    padding: 14px 4px; text-align: center; border-right: 1px solid var(--border);
}
.pv1-tot:last-child { border-right: none; }
.pv1-tot-num {
    font-family: var(--serif); font-size: 22px; font-weight: 700;
    line-height: 1; color: var(--text); letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.pv1-tot-key {
    font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-3); margin-top: 6px;
}
.pv1-tot.is-kcal {
    grid-column: 1 / -1;
    padding: 18px;
    border-right: none;
    border-bottom: 1px solid var(--border);
}
.pv1-tot.is-kcal .pv1-tot-num {
    font-size: 40px; color: var(--accent);
}
.pv1-tot.is-kcal .pv1-tot-key {
    font-size: 9px; letter-spacing: .12em; margin-top: 6px;
}
@media (min-width: 768px) {
    .pv1-totals-grid { grid-template-columns: repeat(5, 1fr); }
    .pv1-tot { padding: 18px 8px; }
    .pv1-tot-num { font-size: 30px; }
    .pv1-tot-key { font-size: 9px; letter-spacing: .1em; }
    .pv1-tot.is-kcal {
        grid-column: auto;
        padding: 18px 8px;
        border-right: 1px solid var(--border);
        border-bottom: none;
    }
    .pv1-tot.is-kcal .pv1-tot-num { font-size: 30px; }
    .pv1-tot.is-kcal .pv1-tot-key { font-size: 9px; letter-spacing: .1em; }
}

/* Action row — column on mobile (per design rule), row on desktop */
.pv1-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.pv1-actions-row { display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 768px) {
    .pv1-actions-row { flex-direction: row; }
}
.pv1-btn {
    flex: 1; padding: 13px 16px; cursor: pointer; font-family: inherit;
    font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    border: 1px solid var(--text); background: #fff; color: var(--text);
    transition: var(--tr); display: inline-flex; align-items: center;
    justify-content: center; gap: 6px;
}
.pv1-btn:hover { background: var(--text); color: #fff; }
.pv1-btn-primary { background: var(--text); color: #fff; }
.pv1-btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.pv1-btn-full { width: 100%; flex: 1 1 100%; }
.pv1-meal-type {
    margin-top: 18px; padding: 14px;
    border: 1px solid var(--border); background: #faf8f5;
}
.pv1-meal-type label {
    display: block; margin-bottom: 7px;
    font-size: 10px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text);
}
.pv1-meal-type label span { color: var(--text-3); margin-left: 5px; }
.pv1-meal-type select {
    width: 100%; height: 43px; padding: 0 38px 0 11px;
    background: #fff; border: 1px solid var(--border);
    color: var(--text); font: 500 13px var(--font);
    border-radius: 0;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text) 50%), linear-gradient(135deg, var(--text) 50%, transparent 50%);
    background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.pv1-meal-type select:focus {
    border-color: var(--text);
    outline: none;
}
.pv1-meal-type small {
    display: block; margin-top: 8px;
    font-size: 11px; line-height: 1.45; color: var(--text-3);
}

/* Hydration row + Shop block — per Plate Modal Full design.
   Hydration: SVG icon + weight input + serif accent target value.
   Shop:      cream card with cart-svg counter + 2 buttons (primary + ghost). */
.plate-modal-v1 .hydration {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 0; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
}
.plate-modal-v1 .hydration-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.plate-count[hidden] { display: none !important; }
.plate-modal-v1 .hydration-label {
    font-size: 10px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-3);
}
.plate-modal-v1 .hydration-input-wrap {
    display: inline-flex; align-items: center; gap: 6px;
}
.plate-modal-v1 .hydration-input {
    width: 54px; padding: 8px 10px; font-family: inherit;
    font-size: 14px; font-weight: 700; color: var(--text);
    background: #fff; border: 1px solid var(--border);
    text-align: center; outline: none; border-radius: 0;
}
.plate-modal-v1 .hydration-input:focus { border-color: var(--accent); }
.plate-modal-v1 .hydration-unit {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--text-3);
}
.plate-modal-v1 .hydration-arrow { font-size: 14px; color: var(--text-3); margin: 0 4px; }
.plate-modal-v1 .hydration-target {
    font-family: var(--serif); font-size: 18px; font-weight: 700;
    color: var(--accent); line-height: 1;
    font-variant-numeric: tabular-nums;
}
.plate-modal-v1 .hydration-target small {
    font-family: var(--sans); font-size: 11px; font-weight: 700;
    letter-spacing: .06em; color: var(--text-3); margin-left: 3px;
    text-transform: uppercase;
}
@media (min-width: 768px) {
    .plate-modal-v1 .hydration { padding: 16px 0; gap: 14px; }
    .plate-modal-v1 .hydration-icon { width: 32px; height: 32px; }
    .plate-modal-v1 .hydration-target { font-size: 22px; }
    .plate-modal-v1 .hydration-arrow { margin: 0 6px; }
}

.plate-modal-v1 .shop {
    margin-top: 14px;
    padding: 16px 18px;
    background: var(--bg-alt);
    border: 1px solid var(--border);
}
.plate-modal-v1 .shop-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text);
    margin-bottom: 10px;
}
.plate-modal-v1 .shop-head svg { width: 14px; height: 14px; flex-shrink: 0; }
.plate-modal-v1 .shop-actions { display: flex; gap: 8px; }
.plate-modal-v1 .shop-btn {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 14px; font-family: inherit;
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    cursor: pointer; border: none;
    transition: var(--tr);
}
.plate-modal-v1 .shop-btn-primary { background: var(--accent); color: #fff; }
.plate-modal-v1 .shop-btn-primary:hover { background: var(--text); }
.plate-modal-v1 .shop-btn-ghost {
    background: transparent; color: var(--text);
    border: 1px solid var(--text);
}
.plate-modal-v1 .shop-btn-ghost:hover { background: var(--text); color: #fff; }
.plate-modal-v1 .shop-btn.is-active { background: var(--text); color: #fff; }
@media (max-width: 480px) {
    .plate-modal-v1 .shop-actions { flex-direction: column; }
    .plate-modal-v1 .shop-btn { min-height: 44px; }
}
.plate-modal-v1 .plate-shop-list {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.plate-modal-v1 .plate-shop-dish {
    margin: 10px 0 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
}
.plate-modal-v1 .plate-shop-check {
    width: 100%;
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border: 0;
    border-bottom: 1px solid rgba(0,0,0,.06);
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.plate-modal-v1 .plate-shop-check:last-child { border-bottom: 0; }
.plate-modal-v1 .plate-shop-box {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 1px solid var(--text);
    background: #fff;
}
.plate-modal-v1 .plate-shop-check.is-checked .plate-shop-box {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 3px #fff;
}
.plate-modal-v1 .plate-shop-label {
    min-width: 0;
    font-size: 13px;
    line-height: 1.35;
}
.plate-modal-v1 .plate-shop-check.is-checked .plate-shop-label {
    color: var(--text-3);
    text-decoration: line-through;
}
.plate-modal-v1 .plate-shop-empty {
    font-size: 12px;
    color: var(--text-3);
}
@media (min-width: 768px) {
    .plate-modal-v1 .shop { padding: 18px 22px; }
    .plate-modal-v1 .shop-btn { padding: 10px 16px; font-size: 11px; flex: 0 1 auto; }
}

/* ── STICKY ADD BTN ──────────────────────────────────── */
.sticky-add {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 12px 20px 20px;
    box-shadow: 0 -1px 0 var(--border), 0 -8px 24px rgba(0,0,0,.06);
    z-index: 50;
}
.sticky-add-inner { max-width: 980px; margin: 0 auto; padding: 0 20px; }

.recipe-add-btn {
    width: 100%;
    max-width: 400px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.15;
    text-transform: uppercase;
    box-shadow: 0 10px 24px rgba(242, 108, 63, .18);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .16s ease, box-shadow .2s ease;
}
.recipe-add-btn:hover,
.recipe-add-btn:focus-visible {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
    outline: none;
    box-shadow: 0 12px 28px rgba(35, 31, 28, .16);
}
.recipe-add-btn:active { transform: translateY(1px); }
.recipe-add-btn:disabled {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
    opacity: .62;
    cursor: default;
    box-shadow: none;
    transform: none;
}

@keyframes recipeAddedButton {
    0% { transform: scale(1); }
    45% { transform: scale(1.018); }
    100% { transform: scale(1); }
}
.recipe-add-btn.is-just-added { animation: recipeAddedButton .24s ease-out both; }

.recipe-share-btn,
.recipe-review-submit,
.recipe-inline-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 0;
    font-family: inherit;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: .11em;
    text-transform: uppercase;
    transition: background .2s ease, border-color .2s ease, color .2s ease, opacity .2s ease;
}
.recipe-share-btn {
    padding: 8px 12px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--text);
    font-size: 10px;
}
.recipe-share-btn:hover,
.recipe-share-btn:focus-visible {
    background: var(--text);
    color: #fff;
    outline: none;
}
.recipe-review-submit {
    min-height: 32px;
    padding: 9px 16px;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    font-size: 10px;
}
.recipe-review-submit:hover,
.recipe-review-submit:focus-visible {
    background: var(--text);
    border-color: var(--text);
    color: #fff;
    outline: none;
}
.recipe-review-submit:disabled {
    opacity: .58;
    cursor: default;
}
.recipe-inline-action {
    padding: 8px 12px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--text);
    font-size: 10px;
}
.recipe-inline-action-muted {
    background: var(--bg-alt);
    color: var(--text-3);
    border-color: var(--border);
}

/* ── CHAT FAB ────────────────────────────────────────── */
/* .chat-fab — defined below with icon support */

/* ── TOAST ───────────────────────────────────────────── */
#v2-toast {
    position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--text); color: white; padding: 12px 18px;
    border-radius: 0; border: 1px solid rgba(255,255,255,.18);
    font-size: 12px; font-weight: 700; line-height: 1.35;
    letter-spacing: .06em; text-transform: uppercase;
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity .25s, transform .25s; white-space: nowrap;
    box-shadow: var(--sh-l);
}
#v2-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── APP CONFIRM (showAppConfirm в data-v2.js) ───────────
   Фирменный confirm на базе .modal-overlay/.modal-box. Кнопки
   в editorial-стиле (sharp, caps), как в balance-модалках рецепта. */
.modal-overlay.app-confirm { align-items: center; }
.app-confirm-box {
    width: calc(100% - 32px); max-width: 380px;
    border-radius: 0; border: 1px solid var(--border);
    padding: 26px 24px 22px; text-align: center;
}
@media (min-width: 768px) {
    .app-confirm-box { width: 380px; border-radius: 0; }
}
.app-confirm-title {
    font-size: 15px; font-weight: 800; letter-spacing: .04em;
    color: var(--text); line-height: 1.35; margin-bottom: 10px;
}
.app-confirm-text {
    font-size: 14px; color: var(--text-2); line-height: 1.5; margin-bottom: 20px;
}
.app-confirm-actions { display: flex; flex-direction: column; gap: 10px; }
.app-confirm-btn {
    padding: 13px 16px; border-radius: 0; font-family: inherit;
    font-size: 12px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.app-confirm-ok { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.app-confirm-ok:hover, .app-confirm-ok:focus-visible { background: var(--text); border-color: var(--text); outline: none; }
.app-confirm-ok.is-danger { background: #c0392b; border-color: #c0392b; }
.app-confirm-ok.is-danger:hover, .app-confirm-ok.is-danger:focus-visible { background: #a5281b; border-color: #a5281b; }
.app-confirm-cancel { background: #fff; color: var(--text); border: 1px solid var(--text); }
.app-confirm-cancel:hover, .app-confirm-cancel:focus-visible { background: var(--text); color: #fff; outline: none; }

/* ── LOCKED TOAST (paywall на карточках, showLockedMsg в data-v2.js) ──
   Sharp-вариант с CTA-ссылкой. Тёмный фон как у #v2-toast, без скруглений. */
.locked-toast {
    position: fixed; bottom: 80px; left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: var(--text); color: #fff; padding: 12px 20px;
    font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center;
    max-width: 360px; z-index: 9999; box-shadow: var(--sh-l);
    opacity: 0; pointer-events: auto;
    transition: opacity .25s ease, transform .25s ease;
}
.locked-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.locked-toast-link { color: #fff; text-decoration: underline; font-weight: 700; }
@media (max-width: 480px) { .locked-toast { max-width: calc(100vw - 32px); } }

/* ── PAYWALL OVERLAY (Auth._showPaywall в data-v2.js) ──
   Editorial-стиль: sharp-кнопки, caps, переменные. Заголовок — Playfair
   (как заголовки рецептов/страниц). Иконки — inline stroke-SVG. */
.paywall-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.85);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    padding: 20px;
}
.paywall-card { text-align: center; max-width: 400px; width: 100%; }
.paywall-icon { color: var(--accent); margin-bottom: 16px; display: flex; justify-content: center; }
.paywall-icon svg { width: 48px; height: 48px; }
.paywall-title {
    font-family: 'Playfair Display', var(--serif);
    font-size: 28px; color: var(--text); line-height: 1.2; margin: 0 0 12px;
}
.paywall-text { color: var(--text-2); font-size: 15px; line-height: 1.5; margin: 0 0 24px; }
.paywall-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.paywall-btn {
    display: inline-block; background: var(--accent); color: #fff;
    border: 1px solid var(--accent); padding: 13px 32px; border-radius: 0;
    font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; text-decoration: none; cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.paywall-btn:hover, .paywall-btn:focus-visible { background: var(--text); border-color: var(--text); outline: none; }
.paywall-link { color: var(--text-3); font-size: 13px; text-decoration: underline; }
.paywall-link:hover { color: var(--accent); }
.paywall-legal { margin-top: 24px; font-size: 11px; color: var(--text-3); line-height: 1.5; }
.paywall-legal a { color: var(--text-3); text-decoration: underline; }
.paywall-legal a:hover { color: var(--accent); }
@media (max-width: 480px) {
    .paywall-title { font-size: 24px; }
    .paywall-btn { width: 100%; max-width: 280px; }
}

/* ── JULIA STRIP ─────────────────────────────────────── */
.julia-strip {
    display: flex; align-items: flex-start; gap: 20px;
    padding: 24px 28px; background: var(--bg-alt);
    border-radius: var(--r-m); border: 1px solid var(--border);
    margin-bottom: 24px;
}
.julia-ava { width: 64px; height: 64px; border-radius: 50%; background: var(--accent-l);
              display: flex; align-items: center; justify-content: center;
              font-size: 28px; flex-shrink: 0; overflow: hidden; }
.julia-info { flex: 1; }
.julia-name { font-size: 11px; font-weight: 800; color: var(--accent);
               text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.julia-text { font-size: clamp(13px,1.4vw,16px); color: var(--text-2); line-height: 1.75; }

/* ── HISTORY ─────────────────────────────────────────── */
.hist-item { display: flex; align-items: center; gap: 12px; padding: 12px 0;
              border-bottom: 1px solid var(--border); }
.hist-item:last-child { border-bottom: none; }
.hist-dot { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-alt);
             display: flex; align-items: center; justify-content: center;
             font-size: 18px; flex-shrink: 0; border: 1px solid var(--border); }
.hist-info { flex: 1; min-width: 0; }
.hist-date { font-size: 11px; color: var(--text-3); margin-bottom: 2px; }
.hist-label { font-size: 13px; font-weight: 700; color: var(--text); }
.hist-dishes { font-size: 12px; color: var(--text-2); margin-top: 2px;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-kcal { font-size: 14px; font-weight: 800; color: var(--accent); flex-shrink: 0; }

/* ── REVIEWS ─────────────────────────────────────────── */
.reviews-section { margin-top: 24px; padding: 20px; background: var(--card); border-radius: var(--r-m); border: 1px solid var(--border); scroll-margin-top: 180px; }
.reviews-title {
    margin: 0 0 18px; font-family: var(--serif); font-size: clamp(24px, 3vw, 32px);
    line-height: 1.15; color: var(--text);
}
.reviews-title:focus { outline: none; }

.recipe-back-to-top {
    position: fixed; left: 24px; bottom: 104px; z-index: 120;
    display: inline-flex; align-items: center; gap: 7px;
    min-height: 42px; padding: 9px 14px;
    border: 1px solid var(--text); border-radius: 0;
    background: #fff; color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.12);
    font: 800 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer;
}
.recipe-back-to-top[hidden] { display: none; }
.recipe-back-to-top:hover,
.recipe-back-to-top:focus-visible { background: var(--text); color: #fff; outline: none; }

.video-unavailable {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 7px; padding: 24px;
    color: #fff; text-align: center;
}
.video-unavailable span { color: rgba(255,255,255,.72); font-size: 13px; }
.external-link-icon { display: inline-block; margin-left: 3px; text-decoration: none; }
.review-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.review-form-stars { display: flex; gap: 2px; }
.review-star { font-size: 24px; cursor: pointer; color: var(--border); transition: color .15s; }
.review-star.filled { color: #f5a623; }
.review-star:hover { color: #f5a623; }
.review-textarea {
    width: 100%; border: 1px solid var(--border); border-radius: var(--r-s);
    padding: 10px 12px; font-size: 13px; font-family: inherit; resize: vertical;
    background: var(--bg); color: var(--text); min-height: 60px;
}
.review-textarea:focus { outline: none; border-color: var(--accent); }
.review-char-count { font-size: 11px; color: var(--text-3); }
.review-item {
    padding: 14px 16px; margin-bottom: 10px; background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--r-s);
}
.review-item:last-child { margin-bottom: 0; }
.review-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.review-author-wrap { display: flex; align-items: center; gap: 8px; }
.review-avatar {
    width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
}
.review-avatar-fallback {
    width: 32px; height: 32px; border-radius: 50%; background: var(--accent);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.review-author { font-size: 14px; font-weight: 700; color: var(--text); }
.review-date { font-size: 11px; color: var(--text-3); }
.review-stars-row { margin-bottom: 6px; }
.review-text { font-size: 14px; color: var(--text); line-height: 1.6; }
.review-delete-btn {
    background: none; border: none; color: var(--text-3); cursor: pointer;
    font-size: 14px; padding: 2px 6px; border-radius: 4px; transition: var(--tr);
}
.review-delete-btn:hover { background: #fee; color: #c00; }

/* ── SUBLIST ─────────────────────────────────────────── */
.sublist-note { padding: 14px 16px; background: var(--accent-l);
                border-radius: var(--r-m); font-size: 13px; color: var(--accent);
                font-weight: 600; border-left: 3px solid var(--accent); margin-bottom: 16px; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1024px) {
    .recipe-card-grid { grid-template-columns: repeat(3,1fr); gap: 16px; }
    .recipe-layout { grid-template-columns: minmax(0, 1fr); }
    .recipe-sidebar { display: none; }
}
@media (max-width: 767px) {
    .cat-grid { grid-template-columns: repeat(2,1fr); gap: 16px; }
    .recipe-card-grid { grid-template-columns: repeat(2,1fr); gap: 14px; }
    .recipe-card__details-line { flex-direction: column; align-items: flex-start; gap: 5px; }
    .recipe-card__details-line .recipe-card__meta-wrap { margin-left: 0; width: 100%; align-items: flex-start; }
    .recipe-card__meta-wrap .recipe-card-time-note { justify-content: flex-start; text-align: left; }
    /* Long ingredient actions must wrap inside the recipe column instead of
       increasing the page's minimum width and creating horizontal scrolling. */
    .ing-name { overflow-wrap: anywhere; }
    .ing-optout-btn,
    .ing-swap-btn {
        max-width: 58%;
        white-space: normal;
        line-height: 1.3;
        text-align: right;
    }
    .ing-optout-btn { align-items: flex-end; }
    .v-user-name { display: none; }
    .chat-fab { bottom: 80px; }
    .chat-fab.above-sticky { bottom: 110px; }
    #v2-toast { bottom: 80px; }
    .sticky-add { padding-bottom: 28px; }
    .v-logo-prof { display: none; }
    .filter-outer { flex-direction: column; padding: 8px 10px; gap: 4px; }
    .filter-scroll-wrap { overflow: visible; width: 100%; }
    .filter-clear { border-left: none; width: 100%; text-align: center; padding: 6px 0 2px; border-top: 1px solid var(--border); margin-top: 2px; }
    .filter-bar { flex-wrap: wrap; min-width: 0; }
    .filter-chip { padding: 6px 10px; font-size: 12px; }
    .filter-sep { display: none; }
    .v-header-logo-compact-text { display: none; }
    .v-header-logo-text { font-size: 18px; }
    /* LK icon to the left on mobile (LEGACY .v-header-inner шапка только).
       ВАЖНО: scoping к .v-header-inner родителю обязателен, иначе правило
       выдёргивает .v-user-wrap из любой другой шапки (.sp-header), и профиль
       уезжает в левый край вместо своей grid-cell. */
    .v-header-inner { position: relative; }
    .v-header-inner .v-user-wrap,
    .v-header-inner a.v-icon-btn#lk-btn {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
    }
}
@media (max-width: 460px) {
    .featured-card { flex-direction: column; }
    .featured-card-photo { width: 100%; min-width: 0; aspect-ratio: 4/3; }
    .featured-card-body { padding: 12px 0 0; }
    .featured-card-name { font-size: 20px; }
    .cat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .recipe-card-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .kbzhu { grid-template-columns: repeat(auto-fit, minmax(56px,1fr)); gap: 6px; }
    .kbzhu-val { font-size: 18px; }
    .kbzhu-lbl { font-size: 8px; letter-spacing: .2px; }
    .v-logo-name { display: none; }
}

/* ── ANIMATIONS ──────────────────────────────────────── */
@keyframes fadeUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform: translateY(0); } }
@keyframes starWiggle {
    0%   { transform: scale(1) rotate(0deg); }
    25%  { transform: scale(1.35) rotate(-8deg); }
    50%  { transform: scale(1.35) rotate(8deg); }
    75%  { transform: scale(1.1) rotate(-4deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.stars-animate .r-star { animation: starWiggle .5s ease both; display: inline-block; }
.stars-animate .r-star:nth-child(1) { animation-delay: 0s; }
.stars-animate .r-star:nth-child(2) { animation-delay: .08s; }
.stars-animate .r-star:nth-child(3) { animation-delay: .16s; }
.stars-animate .r-star:nth-child(4) { animation-delay: .24s; }
.stars-animate .r-star:nth-child(5) { animation-delay: .32s; }
/* Контент не въезжает автоматически при загрузке: высота и смысл видны сразу. */
.anim,
.anim-d1,
.anim-d2,
.anim-d3 { animation: none; }

/* ── STEP PHOTOS ─────────────────────────────────────── */
.step-photo-placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; margin-top: 10px; height: 130px; border-radius: var(--r-m);
    background: var(--bg-alt); border: 2px dashed var(--border);
    color: var(--text-3); font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
}
.step-photo-placeholder span:first-child { font-size: 26px; }
.step-photo-img {
    width: 100%;
    height: auto; display: block;
    border-radius: var(--r-m); margin-top: 10px;
    object-fit: contain;
}
.step-media .step-photo-img { max-width: 100%; margin-top: 0; }

/* ── LOGIN PAGE ──────────────────────────────────────── */
.login-page {
    min-height: 100dvh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px 20px; background: var(--bg-alt);
}
.login-logo-wrap { text-align: center; margin-bottom: 28px; }
.login-logo-name { font-family: var(--serif); font-size: 22px; font-weight: 700;
                   color: var(--text); margin-top: 12px; }
.login-logo-tag  { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.animate-in { animation: fadeUp .4s ease both; }
.login-card {
    background: var(--card); border-radius: var(--r-xl);
    box-shadow: var(--sh-l); padding: 32px;
    width: 100%; max-width: 400px;
}
.login-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.login-tab {
    flex: 1; padding: 10px; font-size: 14px; font-weight: 600;
    color: var(--text-2); border: none; background: none;
    cursor: pointer; transition: color var(--tr);
    border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.login-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.login-form { display: none; }
.login-form.active { display: block; }
.hp-form-group { margin-bottom: 16px; }
.hp-label { display: block; font-size: 13px; font-weight: 600;
            color: var(--text-2); margin-bottom: 6px; }
.hp-input {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--border); border-radius: var(--r-m);
    font-size: 15px; font-family: inherit; color: var(--text);
    background: var(--bg); transition: border-color var(--tr), box-shadow var(--tr);
    outline: none;
}
.hp-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(232,64,10,.1); }
.btn-primary { background: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--accent-d); }
.login-divider { text-align: center; color: var(--text-3); font-size: 13px; margin: 16px 0; }
.login-demo { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 20px; }
.login-demo a { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* ── PLATFORM FOOTER ───────────────────────────────── */
.v-footer {
    background: var(--text);
    color: var(--white);
    padding: 28px 20px 24px;
    margin-top: auto;
    flex-shrink: 0;
}
.v-footer-inner {
    max-width: 980px; margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.v-footer-brand {
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
.v-footer-brand span { color: var(--accent); }
.v-footer-brand .v-footer-brand-caption {
    color: rgba(255,255,255,.52); font-size: 10px; font-weight: 600;
    line-height: 1.35; letter-spacing: .08em; text-transform: uppercase;
}
.v-footer-links {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.v-footer-links a {
    font-size: 13px; font-weight: 500; color: rgba(255,255,255,.6);
    text-decoration: none; padding: 4px 10px;
    border-radius: 100px; transition: color var(--tr), background var(--tr);
}
.v-footer-links a:hover { color: var(--white); background: rgba(255,255,255,.1); }
.v-footer-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.2); flex-shrink: 0; }
.v-footer-email {
    color: rgba(255,255,255,.72); font-size: 13px; font-weight: 500;
    text-decoration: none; transition: color var(--tr);
}
.v-footer-email:hover { color: var(--white); }
.v-footer-copy {
    font-size: 11px; color: rgba(255,255,255,.3); text-align: center;
}

/* ── RECIPE META ROW (below title) ─────────────────── */
.recipe-meta-row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 6px 0 14px; font-size: 13px; color: var(--text-2);
}
.recipe-meta-dot {
    width: 3px; height: 3px; border-radius: 50%; background: var(--border); flex-shrink: 0;
}
.recipe-meta-stars {
    display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--text-3);
}
.recipe-meta-stars .star { font-size: 14px; }
.recipe-meta-stars .star.filled { color: #f5a623; }
.recipe-meta-stars .r-star {
    font-size: 20px; cursor: pointer; transition: color .15s, transform .15s; color: #ddd;
    display: inline-block;
}
.recipe-meta-stars .r-star.filled { color: #f5a623; }
.recipe-meta-stars .r-star:hover { transform: scale(1.3); color: #f5a623; }

/* Оценка остаётся статичной до явного hover/click пользователя. */
.recipe-meta-date { font-size: 12px; color: var(--text-3); }

/* ── COMMENTS BUTTON (see base definition above) ───── */

/* ── COMMENTS MODAL: star input ─────────────────────── */
.c-star-row { display: flex; align-items: center; gap: 4px; margin-bottom: 12px; }
.c-star-row label { font-size: 12px; font-weight: 600; color: var(--text-2); margin-right: 6px; }
.c-star-row .cstar {
    font-size: 22px; cursor: pointer; color: #ddd; transition: color .12s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.c-star-row .cstar.on { color: #f5a623; }

/* ── COMMENT ITEM ───────────────────────────────────── */
.comment-item {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.comment-item:last-child { border-bottom: none; }
.comment-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.comment-item-author { font-size: 13px; font-weight: 700; color: var(--text); }
.comment-item-stars { font-size: 13px; color: #f5a623; letter-spacing: 1px; }
.comment-item-stars .empty-star { color: #ddd; }
.comment-item-text { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.comment-item-date { font-size: 11px; color: var(--text-3); margin-top: 4px; }
.comment-item-delete {
    font-size: 11px; color: var(--text-3); background: none; border: none;
    cursor: pointer; padding: 2px 0; text-decoration: underline; margin-top: 3px; display: block;
    transition: color var(--tr);
}
.comment-item-delete:hover { color: var(--accent); }

/* ── FOOTER SOCIAL ICONS ────────────────────────────── */
.v-footer-social { display: flex; align-items: center; gap: 12px; }
.v-footer-social a {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.1);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.7); transition: background var(--tr), color var(--tr);
    flex-shrink: 0;
}
.v-footer-social a:hover { background: var(--accent); color: #fff; }
.v-footer-social svg { width: 16px; height: 16px; fill: currentColor; }

/* ── CHAT FAB (redesigned) ───────────────────────────── */
.chat-fab {
    position: fixed; bottom: 24px; right: 20px; z-index: 200;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--text); color: #fff;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,.28);
    cursor: pointer; border: none;
    transition: background var(--tr), box-shadow var(--tr), transform .2s;
    font-size: 10px; gap: 3px;
}
.chat-fab:hover { background: var(--accent); transform: scale(1.04); }
.chat-fab.is-over-footer {
    background: #fff;
    color: var(--text);
    box-shadow: 0 0 0 3px rgba(232,64,10,.9), 0 10px 26px rgba(0,0,0,.42);
}
.chat-fab.is-over-footer:hover { background: #fff7f3; }
.chat-fab-icon { width: 22px; height: 22px; fill: currentColor; }
.chat-fab-tip { display: none; }

/* Общий контракт reduced motion: состояние меняется без движения, сценарий сохраняется. */
@media (prefers-reduced-motion: reduce) {
    html:focus-within { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* ── COMPACT LOGO IN INNER-PAGE HEADERS ─────────────── */
.v-header-logo-compact {
    display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0;
}
.v-header-logo-text {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; line-height: 1.25; gap: 1px;
}
.v-logo-name {
    font-family: var(--serif); font-size: 13px; font-weight: 600;
    color: var(--text-2); letter-spacing: .2px;
}
.v-logo-brand {
    font-family: var(--serif); font-size: 19px; font-weight: 700;
    color: var(--text); letter-spacing: -.2px;
}
.v-logo-brand span { color: var(--accent); }
.v-logo-role {
    font-family: var(--sans); font-size: 9px; font-weight: 600;
    color: var(--text-3); text-transform: uppercase; letter-spacing: .8px;
}
@media (max-width: 767px) {
    .v-logo-brand { font-size: 16px; }
    .v-logo-name { font-size: 11px; }
}

/* ── NEWS FEED ───────────────────────────────────────── */
.news-feed { display: flex; flex-direction: column; gap: 0; margin-bottom: 36px; }
.news-divider { height: 1px; background: var(--border); margin: 16px 0; opacity: 0.6; }
.news-text-card {
    background: var(--bg-alt); border-radius: var(--r);
    padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
}
.news-text-card-date { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: 0.03em; }
.news-text-card-top { display: flex; align-items: center; gap: 10px; }
.news-text-card-ava {
    width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
}
.news-text-card-ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.news-text-card-author { font-size: 13px; font-weight: 700; color: var(--text); }
.news-text-card-body { font-size: 14px; color: var(--text); line-height: 1.6; }
.news-item-date { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: 0.03em; }

/* ═══════════════════════════════════════════════════
   NEW HEADER (vh-*)
   ═══════════════════════════════════════════════════ */

/* Background */
.v-header {
    background: #fff;
    border-bottom: 1px solid #ececec;
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

/* Inner flex container */
.vh-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 82px;
}

/* Julia avatar (index only) */
.vh-julia-ava {
    order: 1;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-l) url('https://voronova.online/images/YV-small.webp') center/cover no-repeat;
    border: 2px solid var(--accent);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(232,64,10,.18);
}

/* Back button (inner pages) */
.vh-back-btn {
    order: 1;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.8);
    border: 1.5px solid #d4b0a0;
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    color: var(--text-2);
}
.vh-back-btn:hover { background: #fff; border-color: var(--accent); color: var(--accent); }
.vh-back-btn svg { width: 20px; height: 20px; fill: currentColor; }

/* Brand */
.vh-brand {
    order: 2;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
    flex: 1;
}
.vh-brand-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.vh-brand-name {
    font-family: var(--serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}
.vh-brand-role {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .1em;
}
.vh-brand-title {
    font-family: var(--serif);
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 700;
    line-height: 1;
    color: var(--text);
}
.vh-accent { color: var(--accent); }

/* Slogan */
.vh-slogan-wrap {
    order: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.vh-slogan-wrap::before {
    content: '';
    position: absolute;
    width: 280px;
    height: 110px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: radial-gradient(circle, rgba(232,64,10,.14) 0%, rgba(232,64,10,.07) 40%, rgba(232,64,10,0) 78%);
    pointer-events: none;
    z-index: 0;
}
.vh-slogan {
    font-family: 'DM Serif Text', var(--serif);
    font-size: 14px;
    line-height: 1.22;
    color: #9a4f2d;
    text-align: center;
    max-width: 22ch;
    position: relative;
    z-index: 1;
}

/* Profile pill */
.vh-inner > .v-user-wrap {
    order: 4;
    flex-shrink: 0;
    position: relative;
    margin-left: 24px;
}
.vh-profile-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 5px 14px 5px 5px;
    /* Вариант 1 — тёплый кремовый, акцентный бордер */
    background: #fff7f3;
    border: 1.5px solid rgba(232,64,10,.28);
    /* Вариант 2 — белый с тенью:
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(232,64,10,.1); */
    /* Вариант 3 — accent-l заливка, без бордера:
    background: var(--accent-l);
    border: none; */
    border-radius: 999px;
    color: var(--text-2);
    cursor: pointer;
    font: inherit;
}
.vh-profile-pill:hover { background: #ffe8de; }
.vh-profile-name { font-size: 13px; font-weight: 600; }

/* Plate button */
.vh-plate-btn {
    order: 5;
    position: relative;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-l);
    border: 1px solid rgba(232,64,10,.2);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
}
.vh-plate-btn:hover { background: #fde5da; }
/* .vh-plate-icon / .vh-slice* удалены — иконка тарелки теперь inline-SVG (.sp-plate-svg). */
.vh-plate-btn .plate-count {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 999px;
    background: var(--text);
    color: #fff;
    box-shadow: 0 0 0 2px #fff;
    font-size: 10px; font-weight: 700;
}

/* ── MOBILE ─────────────────────────── */
@media (max-width: 767px) {
    .vh-inner { gap: 8px; height: 68px; }
    .vh-julia-ava { display: none; }
    .vh-slogan-wrap { display: none; }
    .vh-inner > .v-user-wrap {
        order: 1;
        position: static;
        transform: none;
        left: auto; top: auto;
        margin-left: 0;
    }
    .vh-profile-pill {
        width: 42px; min-height: 42px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }
    .vh-profile-name { display: none; }
    .vh-brand { order: 2; flex: 1; align-items: center; text-align: center; }
    .vh-brand-meta { justify-content: center; }
    .vh-brand-title { font-size: 21px; }
    .vh-plate-btn { order: 3; }
    .vh-back-btn { order: 1; }
    /* Inner pages: hide profile pill when back button is present */
    .vh-back-btn ~ .v-user-wrap { display: none; }
}

/* ═══════════════════════════════════════════════════
   EDITORIAL HEADER (.sp-header)
   Общий для index.html, recipe.html, category.html.
   Бизнес-хуки внутри: #hdr .scrolled, #plate-btn .plate-count,
   #user-badge #u-ava #u-name #user-wrap #user-dropdown.
   ═══════════════════════════════════════════════════ */
.sp-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
    transition: box-shadow var(--tr);
}
/* Spec §2: на скролле без тени — оставляем только нижнюю границу. */
.sp-header.scrolled { }

/* Все страницы: и шапка, и основной контент — одна переменная --page-wrap.
   Правила ниже оставлены для явности; реально base .v-wrap уже задаёт то же.
   sp-home переопределяет (более высокая специфичность) на случай, если
   какая-то страница переопределяет --page-wrap локально. */
.sp-home .v-wrap    { max-width: var(--page-wrap); }
.sp-header .v-wrap  { max-width: var(--page-wrap); }

/* ── Ряд 1: тёмная авторская полоса (B4 editorial masthead) ──────────────── */
.sp-author-strip {
    background: #161616;
    color: #fff;
    height: 38px;
    display: flex; align-items: center; justify-content: center; gap: 12px;
}
.sp-author-name {
    font-family: var(--sans); font-size: 11.5px; font-weight: 700;
    letter-spacing: .22em; text-transform: uppercase; color: #fff;
}
.sp-author-sep {
    font-family: var(--sans); font-size: 12px; line-height: 1;
    color: var(--accent); font-weight: 800;
}
.sp-author-role {
    font-family: var(--sans); font-size: 11.5px; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255,255,255,.6);
}

/* ── Ряд 2: masthead — тарелка слева, бренд по центру, профиль справа ───── */
.sp-masthead {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    min-height: 96px;
    padding: 18px 0 12px;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
}
.sp-masthead .sp-burger   { display: none; }
/* grid-row: 1 обязателен — #user-wrap в DOM идёт после brand/plate, и без
   явной строки auto-placement выносит профиль во вторую строку masthead. */
.sp-masthead .sp-plate    { grid-column: 1 / 2; grid-row: 1; justify-self: start; }
.sp-masthead .sp-brand    { grid-column: 2 / 3; grid-row: 1; justify-self: center; }
.sp-masthead .v-user-wrap { grid-column: 3 / 4; grid-row: 1; justify-self: end; }

.sp-brand {
    display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
    text-decoration: none; color: inherit;
}
.sp-masthead-rule {
    display: flex; align-items: center; justify-content: center; gap: 12px;
}
.sp-masthead-line { width: 50px; height: 1px; background: var(--text-3); }
.sp-masthead-badge {
    font-size: 9.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
    color: var(--text-3); white-space: nowrap;
}
.sp-brand-title {
    font-family: var(--serif); font-weight: 700;
    font-size: 40px; line-height: .95; letter-spacing: -.022em;
    color: var(--text);
}
.sp-brand-accent { color: var(--accent); }

/* ── Ряд 3: нижняя desktop-навигация ─────────────────────────────────────── */
.sp-subnav-row { border-top: 1px solid var(--border); }
.sp-subnav-row .v-wrap { max-width: var(--page-wrap); }

.sp-nav {
    display: flex; align-items: center;
    gap: 26px; justify-content: center;
    min-width: 0; width: 100%;
    padding: 11px 0;
    /* overflow не hidden: hidden обрезал все ссылки когда 1fr вычислялся узким */
}
.sp-nav a {
    position: relative;
    font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-2); padding: 6px 0; white-space: nowrap;
    transition: color var(--tr);
}
/* Hover: slide-in underline (left → right), оранжевый цвет */
.sp-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1);
    pointer-events: none;
}
.sp-nav a:hover { color: var(--accent); }
.sp-nav a:hover::after { transform: scaleX(1); }
/* Active: постоянная оранжевая линия снизу (тот же ::after, что и hover, уже
   раскрытый). Active:hover не запускает новой анимации — линия одна и стабильна. */
.sp-nav a.active { color: var(--text); }
.sp-nav a.active::after { transform: scaleX(1); }
.sp-nav a.active:hover { color: var(--text); }

/* ── Nav dropdowns (Рецепты / Ингредиенты) — NYT-ориентир, стиль SmartPlate ──
   Строятся в header-nav.js. Триггеры/ссылки наследуют типографику .sp-nav a.
   Панели абсолютные внутри .sp-nav-dd (relative); хедер не клипает (overflow
   не задан), панель выше sticky-слоя (z-index > .sp-header). */
.sp-nav-dd { position: relative; display: inline-flex; align-items: center; }

.sp-nav-trigger,
.sp-nav-link {
    position: relative;
    font-size: 11px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-2); padding: 6px 0; white-space: nowrap;
    background: none; border: 0; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    transition: color var(--tr);
}
.sp-nav-trigger::after,
.sp-nav-link::after {
    content: ''; position: absolute; left: 0; bottom: 0;
    width: 100%; height: 2px; background: var(--accent);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .26s cubic-bezier(.2,.8,.2,1); pointer-events: none;
}
.sp-nav-trigger:hover,
.sp-nav-link:hover { color: var(--accent); }
.sp-nav-trigger:hover::after,
.sp-nav-link:hover::after,
.sp-nav-dd.open .sp-nav-trigger::after { transform: scaleX(1); }

/* Активный продуктовый контекст: постоянная оранжевая линия снизу (тот же
   ::after, что и hover/open, уже раскрытый) — как у .sp-nav a.active. */
.sp-nav-trigger.active,
.sp-nav-link.active { color: var(--text); }
.sp-nav-trigger.active::after,
.sp-nav-link.active::after { transform: scaleX(1); }

/* ── Единый активный акцент в desktop-навигации ──────────────────────────────
   Оранжевая линия — единственный «текущий» акцент. Пока пользователь наводит
   курсор (или ведёт фокус с клавиатуры) на ДРУГОЙ пункт, либо открыт ЧУЖОЙ
   dropdown, постоянная линия активного раздела временно убирается — линия одна
   и находится только у вовлечённого пункта. Уходит курсор/фокус — линия
   возвращается активному разделу. Решение чисто на CSS через :has(), без
   вложенных :has() (такие селекторы невалидны и отбрасываются браузером).
   Условие в :has() исключает .active, поэтому hover/focus/открытие самого
   активного пункта НЕ запускает retract → линия стабильна, без повторной
   анимации и без второй линии. Мобильный drawer не использует .sp-nav — не
   затронут. */
@media (hover: hover) and (pointer: fine) {
    /* focus-visible с клавиатуры ведёт себя как hover */
    .sp-nav-trigger:focus-visible,
    .sp-nav-link:focus-visible { color: var(--accent); }
    .sp-nav-trigger:focus-visible::after,
    .sp-nav-link:focus-visible::after { transform: scaleX(1); }

    .sp-nav:has(
        .sp-nav-trigger:not(.active):hover,
        .sp-nav-link:not(.active):hover,
        .sp-nav-trigger:not(.active):focus-visible,
        .sp-nav-link:not(.active):focus-visible,
        .sp-nav-dd:hover .sp-nav-trigger:not(.active),
        .sp-nav-dd.open .sp-nav-trigger:not(.active)
    ) .sp-nav-trigger.active::after,
    .sp-nav:has(
        .sp-nav-trigger:not(.active):hover,
        .sp-nav-link:not(.active):hover,
        .sp-nav-trigger:not(.active):focus-visible,
        .sp-nav-link:not(.active):focus-visible,
        .sp-nav-dd:hover .sp-nav-trigger:not(.active),
        .sp-nav-dd.open .sp-nav-trigger:not(.active)
    ) .sp-nav-link.active::after {
        transform: scaleX(0);
    }
}

/* Каретка ▾ — поворачивается при открытии */
.sp-nav-caret {
    width: 0; height: 0; margin-top: 1px;
    border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    transition: transform var(--tr); flex-shrink: 0;
}
.sp-nav-dd.open .sp-nav-caret { transform: rotate(180deg); }

/* Панель дропдауна */
.sp-nav-panel {
    position: absolute; top: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: #fff; border: 1px solid var(--border);
    box-shadow: 0 6px 22px rgba(26,44,61,.08);
    padding: 24px 28px; z-index: 200;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .28s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
    max-width: calc(100vw - 32px);
}
.sp-nav-dd.open .sp-nav-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}
/* Невидимый «мостик» над панелью закрывает 10px-зазор между триггером и
   панелью: без него при переводе курсора с пункта на меню терялся :hover и
   дропдаун закрывался до клика (Bug: hover-переход). Мостик — часть .sp-nav-panel
   (внутри .sp-nav-dd), поэтому :hover остаётся непрерывным. pointer-events
   наследуется от панели (none, пока закрыта → не мешает клику по фону). */
.sp-nav-panel::before {
    content: ''; position: absolute;
    left: 0; right: 0; top: -14px; height: 14px;
}
/* Панели открываются только по клику/клавиатуре через header-nav.js. */

/* Ссылки внутри панелей */
.sp-nav-panel a {
    display: block; padding: 7px 10px;
    font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--text); white-space: nowrap; text-decoration: none;
    transition: background var(--tr), color var(--tr);
}
.sp-nav-panel a::after { display: none; }
.sp-nav-panel a:hover { color: var(--accent); }

/* «Все рецепты» — editorial-строка над сеткой категорий: тёмный текст,
   uppercase, короткая оранжевая линия снизу как небольшой акцент (вместо
   полноширинной разделительной границы). */
.sp-nav-panel-all {
    display: inline-flex !important;
    color: var(--text) !important;
    font-weight: 700 !important;
    text-transform: uppercase; letter-spacing: .07em; font-size: 12px !important;
    margin-bottom: 12px; padding-bottom: 11px !important;
}
/* Линия ограничена текстом внутри ссылки: padding меню не влияет на её ширину. */
.sp-nav-panel a.sp-nav-panel-all::after {
    display: none;
}
.sp-nav-panel a.sp-nav-panel-all > span {
    position: relative;
}
.sp-nav-panel a.sp-nav-panel-all > span::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -11px;
    height: 2px; background: var(--accent);
    transform: scaleX(0); transform-origin: left center;
    transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.sp-nav-panel a.sp-nav-panel-all:hover > span::after,
.sp-nav-panel a.sp-nav-panel-all:focus-visible > span::after { transform: scaleX(1); }

/* Рецепты: группы категорий в 4 смысловые колонки. */
.sp-nav-cols { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px 32px; }
.sp-nav-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
@media (min-width: 1280px) {
    .sp-nav-panel--recipes .sp-nav-cols { grid-template-columns: repeat(4, minmax(135px, 1fr)); }
}
@media (min-width: 1440px) {
    .sp-nav-panel--recipes .sp-nav-cols { grid-template-columns: repeat(4, minmax(145px, 1fr)); }
}

/* Ингредиенты: 5 групп в одну строку, больше воздуха между колонками.
   На узком desktop/tablet (≤1180px) 5×min-width + gap + padding не помещаются
   в viewport — разрешаем перенос и сжимаем gap/колонки, чтобы панель (max-width
   calc(100vw-32px)) не выходила за экран на 768/1024px. На ≥1280px — одна строка. */
.sp-nav-groups { display: flex; gap: 36px; align-items: flex-start; }
.sp-nav-group { min-width: 130px; }
@media (min-width: 768px) and (max-width: 1180px) {
    .sp-nav-panel--ingredients {
        width: min(720px, calc(100vw - 32px));
        max-height: calc(100vh - 180px);
        overflow-y: auto;
    }
    .sp-nav-groups {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px 24px;
    }
    .sp-nav-group { min-width: 0; }
}
@media (min-width: 768px) and (max-width: 860px) {
    .sp-nav-panel--ingredients { width: calc(100vw - 32px); }
    .sp-nav-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Заголовки групп ингредиентов — тёмный editorial-текст (var(--text)),
   uppercase, без декоративной плашки (убраны акцентный цвет и нижняя граница).
   Сами ссылки не трогаем. */
.sp-nav-group-title {
    display: block; padding: 4px 10px 8px;
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--text); margin-bottom: 7px;
}

.sp-utils { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; justify-self: end; width: 140px; justify-content: flex-end; }

.sp-plate {
    width: 40px; height: 40px;
    border: 1px solid var(--border); background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; cursor: pointer; padding: 0;
    border-radius: 0;
    transition: transform .26s cubic-bezier(.34, 1.56, .64, 1), border-color var(--tr);
    flex-shrink: 0;
}
/* Hover: упругий зум (variant «pop») + чуть более тёмная рамка. */
.sp-plate:hover { transform: scale(1.1); border-color: #c9c9c9; }
.sp-plate.is-first-add-hint { border-color: var(--accent); }
.sp-plate.is-first-add-hint::after {
    content: '';
    position: absolute;
    inset: -7px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    animation: plateFirstAddPulse .58s ease-out 2;
}
.plate-first-add-hint {
    position: fixed;
    z-index: 10010;
    padding: 14px 16px;
    border: 1px solid #f1b078;
    border-left: 4px solid var(--accent);
    background: #fffaf6;
    box-shadow: 0 12px 30px rgba(58, 35, 20, .16);
    color: var(--text);
}
.plate-first-add-hint-title {
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}
.plate-first-add-hint-text { font-size: 12px; line-height: 1.45; color: var(--text-2); }
@keyframes plateFirstAddPulse {
    0% { opacity: .9; transform: scale(.82); }
    100% { opacity: 0; transform: scale(1.36); }
}
@media (prefers-reduced-motion: reduce) {
    .sp-plate.is-first-add-hint::after { animation: none; }
}
/* Унифицированная inline-SVG иконка тарелки (см. Plate Icon Final, Variant 1).
   Используется и в кнопке #plate-btn (.sp-plate / .vh-plate-btn), и в заголовках модалок. */
.sp-plate-svg { display: block; flex-shrink: 0; }
/* Унификация размеров иконок в хедере: видимый круг тарелки = аватар профиля 32px.
   SVG имеет viewBox 0 0 22 22 с кругом r=10 (1px инсет с каждой стороны), поэтому при
   рендере 32px реальный круг был бы ~29px и казался меньше аватара. Рендерим 33px,
   чтобы внешний край обводки круга совпал с 32px-аватаром (.v-user-avatar).
   На мобиле обе ужимаются (см. @media ≤767px).
   Scoped to .sp-plate — модальные заголовки используют .sp-plate-svg в своём размере. */
.sp-plate .sp-plate-svg { width: 33px; height: 33px; }
.sp-plate .plate-count {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 4px;
    border-radius: 50%;
    background: var(--text); color: #fff;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}

.sp-profile {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 4px 14px 4px 4px;
    background: #fff;
    border: 1px solid var(--border); border-radius: 0;
    cursor: pointer; color: var(--text-2);
    /* height (не min-height): фиксируем 40px, чтобы рамка профиля совпадала с
       квадратом тарелки .sp-plate. min-height позволял боксу расти под аватар +
       line-height имени, из-за чего рамка ЛК была выше тарелки. */
    font: inherit; height: 40px; line-height: 1;
    transition: transform .26s cubic-bezier(.34, 1.56, .64, 1), border-color var(--tr), background var(--tr);
    flex-shrink: 0;
    position: relative;
}
/* Hover: упругий зум (variant «pop») + чуть более тёмная рамка, синхронно с .sp-plate. */
.sp-profile:hover { transform: scale(1.1); border-color: #c9c9c9; }
.sp-profile[data-fb-unseen="1"] { border-color: var(--accent); }
/* Индикатор новых ответов Юлии на аватаре профиля.
   Поведение: точка с цифрой (или 9+). Не на иконке тарелки. */
.sp-profile-dot {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--accent); color: #fff;
    font-size: 9px; font-weight: 800; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
    pointer-events: none;
    box-sizing: content-box;
}
.sp-profile-dot[hidden] { display: none !important; }
.user-dd-item[hidden],
.user-dd-sep[hidden] { display: none !important; }
.v-user-wrap { display: inline-flex; align-items: center; gap: 10px; }
.sp-updates { position: relative; display: inline-flex; }
.sp-updates[hidden] { display: none !important; }
.sp-updates-btn {
    position: relative; min-height: 40px; padding: 0 12px;
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--border); background: #fff; color: var(--text);
    font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer; transition: border-color var(--tr), color var(--tr);
}
.sp-updates-btn:hover, .sp-updates-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.sp-updates-count {
    display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 999px; background: var(--accent); color: #fff;
    font-size: 10px; letter-spacing: 0;
}
.sp-updates-panel {
    position: absolute; z-index: 240; top: calc(100% + 10px); right: 0; width: 358px;
    display: none; background: #fff; border: 1px solid var(--border);
    box-shadow: 0 16px 35px rgba(40,30,20,.14);
}
.sp-updates-panel.open { display: block; }
.sp-updates-panel-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 18px 13px; border-bottom: 1px solid var(--border); }
.sp-updates-panel-head strong { font-family: var(--serif); font-size: 20px; }
.sp-updates-panel-head span, .sp-update-eyebrow { color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sp-update-item { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 14px 18px; color: var(--text); text-decoration: none; }
.sp-update-item:hover { background: #fff7f3; }
.sp-update-item.is-recipe { grid-template-columns: 94px minmax(0, 1fr); gap: 14px; }
.sp-update-item img { width: 94px; height: 112px; object-fit: cover; }
.sp-update-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff2ed; color: var(--accent); font-size: 18px; }
.sp-update-copy { min-width: 0; display: block; }
.sp-update-copy strong { display: block; margin: 5px 0 6px; font-family: var(--serif); font-size: 18px; line-height: 1.08; }
.sp-update-text { display: block; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.sp-update-cta { display: block; margin-top: 9px; color: var(--accent); font-size: 12px; font-weight: 700; }
.sp-updates-panel-foot { padding: 11px 18px; border-top: 1px solid var(--border); color: var(--text-3); font-size: 12px; }
.user-dd-feedback { color: var(--accent); font-weight: 700; }
.sp-profile .v-user-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: #fff;
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0; border: none;
}
.sp-profile-name {
    font-size: 13px; font-weight: 600; color: var(--text);
    max-width: 120px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-profile.is-guest {
    padding: 0 18px;
    border-color: var(--text); background: #fff;
    min-height: 40px;
}
.sp-profile.is-guest:hover { background: var(--text); }
.sp-profile.is-guest:hover .sp-profile-name { color: #fff; }
.sp-profile.is-guest .v-user-avatar { display: none !important; }
.sp-profile.is-guest .sp-profile-name {
    font-size: 12px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text); max-width: none;
}
/* Иконка-человечек для гостя — показываем только в мобильном режиме (см. @media ниже).
   На desktop остаётся текстовая пилюля «Войти». */
.sp-profile-guest-icon {
    display: none; flex-shrink: 0; color: var(--text);
    width: 24px; height: 24px;
}
.sp-profile.is-guest:hover .sp-profile-guest-icon { color: #fff; }

.sp-burger { display: none; }

/* ── DRAWER (mobile nav) — общий для category/recipe/cabinet/ingredient ──────
   Бургер открывает выдвижное меню разделов (openDrawer в header-nav.js).
   index.html держит собственную идентичную копию этих правил инлайн. */
.sp-drawer { position: fixed; inset: 0; z-index: 200; display: flex; pointer-events: none; overscroll-behavior: none; }
.sp-drawer[hidden] { display: none; }
.sp-drawer-back {
    position: absolute; inset: 0; background: rgba(17,17,17,.54);
    opacity: 0; transition: opacity .28s cubic-bezier(.2,.8,.2,1); pointer-events: auto;
}
.sp-drawer.open .sp-drawer-back { opacity: 1; }
.sp-drawer-panel {
    position: relative; z-index: 1; width: min(320px, 86vw); height: 100dvh; max-height: 100dvh;
    background: #fff; border-right: 1px solid var(--border);
    transform: translateX(-100%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
    display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; overscroll-behavior: contain;
}
.sp-drawer.open .sp-drawer-panel { transform: translateX(0); }
.sp-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.sp-drawer-title {
    font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text);
}
.sp-drawer-close {
    width: 36px; height: 36px; border: 1px solid var(--border); background: #fff;
    display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; color: var(--text);
}
.sp-drawer-close svg { width: 16px; height: 16px; display: block; }
.sp-drawer-close:hover { border-color: var(--accent); color: var(--accent); }
.sp-drawer-nav { flex: 1 1 auto; min-height: 0; padding: 8px 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sp-drawer-nav a {
    position: relative; padding: 14px 20px;
    font-family: var(--serif); font-size: 17px; font-weight: 700;
    color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border);
    transition: color var(--tr);
}
.sp-drawer-nav a:hover { color: var(--accent); }
.sp-drawer-toggle {
    width: 100%; padding: 14px 20px; border: 0; border-bottom: 1px solid var(--border);
    background: #fff; display: flex; align-items: center; justify-content: space-between;
    font-family: var(--serif); font-size: 18px; font-weight: 700;
    color: var(--text); cursor: pointer; text-align: left;
    transition: color var(--tr);
}
.sp-drawer-toggle:hover,
.sp-drawer-toggle[aria-expanded="true"] { color: var(--accent); }
.sp-drawer-plus {
    position: relative; width: 14px; height: 14px; flex: 0 0 auto;
}
.sp-drawer-plus::before,
.sp-drawer-plus::after {
    content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 1.5px;
    background: currentColor; transition: transform .18s ease;
}
.sp-drawer-plus::after { transform: rotate(90deg); }
.sp-drawer-toggle[aria-expanded="true"] .sp-drawer-plus::after { transform: rotate(0); }
.sp-drawer-content {
    display: flex; flex-direction: column; background: #fff;
}
.sp-drawer-content[hidden] { display: none; }
.sp-drawer-content a {
    padding: 12px 20px 12px 32px; font-family: var(--sans); font-size: 14px; font-weight: 600;
}
.sp-drawer-content .sp-drawer-subhead {
    display: block; margin: 14px 20px 2px 32px; padding: 12px 0 6px;
    border-top: 1px solid var(--border);
    font-size: 11px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--text);
}
.sp-drawer-content .sp-drawer-subhead:first-child { margin-top: 8px; border-top: 0; }
.sp-drawer-nav a.active { color: var(--accent); }
.sp-drawer-nav a.active::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent);
}
/* Заголовки секций (Рецепты / Ингредиенты / Ещё) и подгрупп (Овощи / Бобовые). */
.sp-drawer-section {
    padding: 16px 20px 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.sp-drawer-subhead {
    padding: 12px 20px 2px;
    font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text);
}

/* Поиск рецептов в drawer — NYT-clean: белое поле, тонкая нейтральная рамка,
   акцент только на фокусе/hover. Submit ведёт на category.html?q=... (header-nav.js).
   Scoped к drawer, не конфликтует с hero-search на index.html. */
.sp-drawer-search {
    position: relative;
    display: flex; align-items: stretch;
    margin: 12px 20px 10px; border: 1px solid var(--border); background: #fff;
}
.sp-drawer-search:focus-within { border-color: var(--accent); }
.sp-drawer-search-icon {
    position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
    width: 17px; height: 17px; color: var(--text-3); pointer-events: none;
}
.sp-drawer-search-input {
    flex: 1 1 auto; min-width: 0; border: 0; background: none;
    padding: 11px 52px 11px 40px; font-family: var(--sans); font-size: 15px; color: var(--text);
}
.sp-drawer-search-input::placeholder { color: var(--text-3); }
.sp-drawer-search-input:focus { outline: none; }
.sp-drawer-search-submit {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 36px; height: 36px; border: 0;
    background: var(--text); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--tr);
}
.sp-drawer-search-submit:hover,
.sp-drawer-search-submit:active,
.sp-drawer-search-submit.is-submitting { background: var(--accent); }

/* Back-button (внутренние страницы): тот же класс .vh-back-btn, но переоформлен
   под editorial-стиль внутри .sp-header. */
.sp-header .vh-back-btn {
    display: none;
    width: 40px; height: 40px;
    border-radius: 0;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    align-items: center; justify-content: center;
    cursor: pointer; padding: 0; flex-shrink: 0;
}
.sp-header .vh-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.sp-header .vh-back-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Tablet (768–1023px): masthead остаётся трёхрядным, но ужимаем типографику и
   отступы — иначе у авторизованного пользователя с длинным именем профиля
   левая колонка распирает ряд. */
@media (min-width: 768px) and (max-width: 1023px) {
    .sp-masthead { gap: 14px; padding: 14px 0 10px; min-height: 84px; }
    .sp-brand-title { font-size: 34px; }
    .sp-masthead-line { width: 32px; }
    .sp-masthead-badge { letter-spacing: .16em; }
    .sp-nav { gap: 18px; }
    /* Имя профиля усечётся многоточием и не будет толкать бренд из центра. */
    .sp-masthead .sp-profile-name { max-width: 84px; }
}

/* Mobile (≤ 767px) */
@media (max-width: 767px) {
    /* Тёмная авторская полоса остаётся видимой, чуть ниже. */
    .sp-author-strip { height: 30px; gap: 8px; padding: 0 12px; }
    .sp-author-name,
    .sp-author-role { font-size: 10px; letter-spacing: .18em; }

    /* Masthead схлопывается в один компактный ряд:
       [бургер | бренд | тарелка + профиль]. */
    .sp-masthead {
        grid-template-columns: 40px 1fr auto auto;
        gap: 8px;
        min-height: 0;
        padding: 8px 0;
    }
    /* Явно прибиваем по колонкам с !important — чтобы пробить любые
       старые правила, кэш или auto-placement, которые могут мешать. */
    .sp-masthead .sp-burger   { grid-column: 1 / 2 !important; grid-row: 1 !important; justify-self: start !important; }
    .sp-masthead .sp-brand    { grid-column: 2 / 3 !important; grid-row: 1 !important; justify-self: center !important; }
    .sp-masthead .sp-plate    { grid-column: 3 / 4 !important; grid-row: 1 !important; justify-self: end !important; }
    .sp-masthead .v-user-wrap { grid-column: 4 / 5 !important; grid-row: 1 !important; justify-self: end !important; }
    /* Бургер — акцентный fill, белая иконка, нельзя пропустить.
       Контрастирует с белыми «карточками» профиля и тарелки. */
    .sp-burger {
        display: inline-flex !important;
        align-items: center; justify-content: center;
        width: 40px; height: 40px;
        border: 1px solid var(--accent);
        background: var(--accent); padding: 0;
        cursor: pointer; flex-shrink: 0;
        color: #fff;
    }
    .sp-burger:hover { background: var(--text); border-color: var(--text); }
    .sp-burger svg { width: 24px; height: 24px; }
    .sp-burger svg line { stroke-width: 2.6; stroke: #fff; }
    /* Slogan-капитель с линиями и нижний sub-nav скрыты — навигация в drawer. */
    .sp-masthead-rule { display: none; }
    .sp-brand { gap: 0; min-width: 0; justify-self: center; }
    .sp-brand-title { font-size: 20px; }
    .sp-subnav-row { display: none; }
    .sp-nav { display: none; }
    .sp-plate { width: 40px; height: 40px; }
    /* Видимый круг тарелки = аватар 24px. SVG рендерим 25px из-за инсета viewBox
       (см. комментарий в desktop-блоке .sp-plate .sp-plate-svg). */
    .sp-plate .sp-plate-svg { width: 25px; height: 25px; }
    .sp-profile {
        padding: 0; width: 40px; min-height: 40px;
        border-radius: 0; justify-content: center;
    }
    .sp-header .v-user-wrap { gap: 7px; }
    .sp-updates-btn { width: 40px; min-height: 40px; padding: 0; justify-content: center; }
    .sp-updates-label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .sp-updates-count { position: absolute; top: -6px; right: -6px; }
    .sp-updates-panel { position: fixed; top: 88px; right: 16px; left: 16px; width: auto; }
    .sp-profile .v-user-avatar { width: 24px; height: 24px; font-size: 11px; }
    .sp-profile .sp-profile-name { display: none; }
    .sp-profile.is-guest { padding: 0; width: 40px; justify-content: center; }
    /* Текст «Войти» уходит в sr-only (визуально скрыт, доступен screenreader/long-press). */
    .sp-profile.is-guest .sp-profile-name {
        position: absolute !important; width: 1px !important; height: 1px !important;
        padding: 0 !important; margin: 0 !important;
        overflow: hidden !important; clip: rect(0 0 0 0); clip-path: inset(50%);
        white-space: nowrap !important;
    }
    .sp-profile.is-guest .sp-profile-guest-icon { display: inline-flex; }
    /* Mobile profile menu: compact drawer от стороны аватара (правый край).
       Акцентный рельс прилегает к аватару, меню раскрывается справа налево. */
    .sp-header .user-dropdown {
        position: fixed;
        top: 92px;
        right: 16px;
        left: auto;
        width: min(260px, calc(100vw - 48px));
        min-width: 0;
        max-width: calc(100vw - 48px);
        max-height: calc(100vh - 112px);
        overflow-y: auto;
        border-radius: 0;
        border-right: 4px solid var(--accent);
        z-index: 3000;
        transform-origin: right top;
        transform: translate3d(14px, 0, 0);
        clip-path: inset(0 0 0 calc(100% - 10px));
        transition: opacity .18s ease, transform .24s cubic-bezier(.2,.8,.2,1),
                    clip-path .24s cubic-bezier(.2,.8,.2,1);
    }
    .sp-header .user-dropdown.open {
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
    }
    .sp-profile-dot { top: -2px; right: -2px; }
}

/* FOUC prevention: make body visible once CSS is loaded */
body { visibility: visible !important; }