@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("fonts/PlusJakartaSans-Variable.woff2") format("woff2");
}

:root {
    /* Inter — текст и UI; Plus Jakarta + system display — заголовки */
    --font-sans: "Inter", system-ui, sans-serif;
    --font-display: "Plus Jakarta Sans", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* Apple Dynamic Type (default) — px для веба */
    --text-large-title: 34px;
    --text-hero-max: 48px;

    /* Hero — пропорции (эталон desktop, те же на mobile) */
    --hero-radius: 36px;
    --hero-pad-top: 18px;
    --hero-pad-x: 20px;
    --hero-pad-bottom: 24px;
    --hero-margin-bottom: 28px;
    --hero-gap-badge: 12px;
    --hero-gap-title: 16px;
    --hero-gap-cta: 20px;
    --hero-content-max: 680px;
    --hero-compact-pad-bottom: 8px;
    --hero-compact-content-max: 600px;
    --text-title-1: 28px;
    --text-title-2: 22px;
    --text-title-3: 20px;
    --text-headline: 17px;
    --text-body: 17px;
    --text-callout: 16px;
    --text-subhead: 15px;
    --text-footnote: 13px;
    --text-caption-1: 12px;
    --text-caption-2: 11px;

    --lh-large-title: 1.12;
    --lh-title-1: 1.14;
    --lh-title-2: 1.27;
    --lh-title-3: 1.25;
    --lh-headline: 1.29;
    --lh-body: 1.47;
    --lh-subhead: 1.33;
    --lh-footnote: 1.38;
    --lh-caption: 1.33;

    --track-large-title: -0.036em;
    --track-title: -0.028em;
    --track-headline: -0.014em;
    --track-body: -0.003em;
    --track-footnote: -0.004em;
    --track-caps: 0.04em;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --logo-font-size: var(--text-headline);
    --logo-font-weight: var(--weight-medium);
    --logo-letter-spacing: var(--track-headline);
    --logo-line-height: var(--lh-headline);
    --surface: rgba(255, 255, 255, 0.85);
    /* Единый glass: header / pills / counters / sheets */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-strong: rgba(255, 255, 255, 0.78);
    --glass-blur: saturate(180%) blur(20px);
    --glass-hairline: inset 0 0 0 0.5px rgba(60, 60, 67, 0.12);
    --glass-shadow: var(--glass-hairline), 0 1px 2px rgba(0, 0, 0, 0.04);
    --card-bg: rgba(255, 255, 255, 0.8);
    --card-shadow: inset 0 0 0 0.5px rgba(60, 60, 67, 0.1), 0 1px 3px rgba(0, 0, 0, 0.03);
    --card-shadow-hover: inset 0 0 0 0.5px rgba(60, 60, 67, 0.14), 0 4px 16px rgba(0, 0, 0, 0.05);
    --text: rgba(43, 33, 35, 1);
    --text-secondary: rgba(43, 33, 35, 0.76);
    --muted: rgba(43, 33, 35, 0.62);
    --text-soft: rgba(43, 33, 35, 0.58);
    --text-hint: rgba(43, 33, 35, 0.68);
    --text-feed: rgba(43, 33, 35, 0.66);
    --text-strong: rgba(43, 33, 35, 0.94);
    --text-label: rgba(43, 33, 35, 0.82);
    --text-icon: rgba(43, 33, 35, 0.72);
    --line: rgba(43, 33, 35, 0.04);
    --border: rgba(43, 33, 35, 0.06);
    --border-md: rgba(43, 33, 35, 0.08);
    --border-lg: rgba(43, 33, 35, 0.1);
    --border-xl: rgba(43, 33, 35, 0.12);
    --surface-subtle: rgba(43, 33, 35, 0.02);
    --surface-quiet: rgba(43, 33, 35, 0.03);
    --shadow-ink: rgba(43, 33, 35, 0.06);
    --shadow-ink-md: rgba(43, 33, 35, 0.07);
    --shadow-ink-sm: rgba(43, 33, 35, 0.05);
    --overlay-ink: rgba(43, 33, 35, 0.2);
    --placeholder: rgba(43, 33, 35, 0.52);
    --placeholder-faint: rgba(43, 33, 35, 0.48);
    --scrollbar: rgba(43, 33, 35, 0.15);
    --scrollbar-hover: rgba(43, 33, 35, 0.25);
    --ink-rgb: 43, 33, 35;
    --primary-rgb: 222, 107, 125;
    --primary-emphasis-rgb: 145, 55, 71;
    --primary-ink-rgb: 120, 46, 60;

    --primary: #de6b7d;
    --primary-hover: #c95a6b;
    --primary-emphasis: rgba(var(--primary-emphasis-rgb), 0.98);
    --primary-emphasis-soft: rgba(var(--primary-emphasis-rgb), 0.92);
    --primary-ink: rgba(var(--primary-ink-rgb), 0.9);
    --primary-tint: rgba(var(--primary-rgb), 0.12);
    --primary-focus: rgba(var(--primary-rgb), 0.35);
    --primary-ring: rgba(var(--primary-rgb), 0.12);
    --primary-ring-stroke: rgba(var(--primary-rgb), 0.45);

    --ui-text: rgba(var(--ink-rgb), 0.92);
    --ui-text-muted: rgba(var(--ink-rgb), 0.88);
    --ui-text-strong: rgba(var(--ink-rgb), 0.95);
    --ui-fill: rgba(var(--ink-rgb), 0.08);
    --ui-fill-hover: rgba(var(--ink-rgb), 0.12);
    --ui-fill-pressed: rgba(var(--ink-rgb), 0.16);
    --ui-stroke: rgba(var(--ink-rgb), 0.14);
    --ui-stroke-strong: rgba(var(--ink-rgb), 0.18);
    --ui-handle: rgba(var(--ink-rgb), 0.28);

    --sheet-scrim: rgba(var(--ink-rgb), 0.1);
    --sheet-bg: var(--glass-bg-strong);
    --sheet-border: rgba(60, 60, 67, 0.12);
    --sheet-blur: saturate(190%) blur(40px);
    --sheet-shadow: 0 -8px 32px rgba(var(--ink-rgb), 0.06);
    --sheet-shadow-modal:
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.65),
        inset 0 0 0 0.5px rgba(60, 60, 67, 0.1),
        0 16px 48px rgba(var(--ink-rgb), 0.08),
        0 4px 16px rgba(var(--ink-rgb), 0.04);
    --sheet-handle: rgba(var(--ink-rgb), 0.16);
    --sheet-row-bg: rgba(255, 255, 255, 0.52);
    --sheet-row-stroke: rgba(var(--ink-rgb), 0.05);
    --sheet-row-bg-hover: rgba(255, 255, 255, 0.72);
    --sheet-chrome: rgba(var(--ink-rgb), 0.05);
    --sheet-chrome-pressed: rgba(var(--ink-rgb), 0.09);

    --danger: #ff3b30;
    --radius: 24px;
    --radius-sm: 12px;
    --radius-lg: 24px;
    --ui-transition-fast: 0.18s ease;
    --ui-transition-base: 0.22s ease;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: auto;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    font-weight: var(--weight-regular);
    letter-spacing: var(--track-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-synthesis: none;
    background:
        radial-gradient(900px 380px at -8% -12%, rgba(var(--primary-rgb), 0.05), transparent 60%),
        radial-gradient(760px 390px at 100% 0%, rgba(var(--primary-rgb), 0.03), transparent 62%),
        #fdfcfc;
    display: flex;
    flex-direction: column;
}

::selection {
    background: rgba(var(--primary-rgb), 0.18);
    color: var(--primary-ink);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-hover);
}

a {
    color: inherit;
}

.site-header {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 0;
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-container {
    width: min(1080px, 92vw);
    margin: 0 auto;
    padding: 16px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
}

.logo--with-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    justify-self: start;
}

.logo {
    font-family: var(--font-sans);
    font-size: var(--logo-font-size);
    font-weight: var(--logo-font-weight);
    letter-spacing: var(--logo-letter-spacing);
    line-height: var(--logo-line-height);
    color: var(--text);
    text-decoration: none;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-header .logo-mark,
.footer-brand .logo-mark {
    width: 1.45em;
    height: 1.45em;
    min-width: 1.45em;
    min-height: 1.45em;
}

.logo-mark {
    display: block;
    width: 1.25em;
    height: 1.25em;
    min-width: 1.25em;
    min-height: 1.25em;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-text {
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    color: var(--text);
}

a.logo,
a.logo:visited,
a.logo:hover {
    color: var(--text);
    text-decoration: none;
}

.logo-text > span {
    color: var(--primary);
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--text-subhead);
    font-weight: var(--weight-medium);
    line-height: var(--lh-subhead);
    letter-spacing: var(--track-headline);
}

.header-nav-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: center;
    grid-column: 2;
}

.mobile-search {
    width: min(260px, 28vw);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    padding-left: 50px;
    min-height: 42px;
    border-radius: 999px;
    background: var(--glass-bg);
    border: 0;
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    position: relative;
    transition: box-shadow 0.24s ease, background 0.24s ease;
}

.header-search__toggle {
    display: none;
}

.header-search__panel {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    position: relative;
}

.mobile-search-icon {
    color: var(--text-icon);
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-search-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.mobile-search input {
    border: 0;
    background: transparent;
    padding: 0;
    min-height: 0;
    width: 100%;
    font-size: var(--text-subhead);
    line-height: var(--lh-subhead);
    letter-spacing: var(--track-headline);
    box-shadow: none;
    color: var(--text);
}

.mobile-search input::placeholder {
    color: var(--muted);
}

.mobile-search input:focus {
    box-shadow: none;
}

@media (min-width: 701px) {
    .header-search {
        position: relative;
        width: 36px;
        min-width: 36px;
        min-height: 36px;
        margin-left: 0;
        padding: 0;
        flex-shrink: 0;
        justify-self: end;
        grid-column: 3;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .header-search__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: var(--glass-bg);
        box-shadow: var(--glass-shadow);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        color: rgba(var(--ink-rgb), 0.72);
        cursor: pointer;
        transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, opacity 0.18s ease;
    }

    .header-search__toggle svg {
        width: 17px;
        height: 17px;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    .header-search__toggle:hover {
        background: var(--glass-bg-strong);
        color: rgba(var(--ink-rgb), 0.92);
        box-shadow: var(--glass-shadow);
    }

    .header-search__panel {
        position: absolute;
        right: 0;
        top: 50%;
        display: flex;
        align-items: center;
        width: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 999px;
        background: var(--glass-bg-strong);
        box-shadow: var(--glass-shadow);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) scale(0.92);
        transform-origin: right center;
        transition:
            width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.18s ease,
            transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
            padding 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 2;
    }

    .header-search .mobile-search-icon {
        left: 12px;
        width: 18px;
        height: 18px;
        opacity: 0;
        transition: opacity 0.16s ease;
    }

    .header-search .mobile-search-icon svg {
        width: 16px;
        height: 16px;
    }

    .header-search input {
        width: 100%;
        min-width: 0;
        opacity: 0;
        font-size: var(--text-subhead);
        line-height: var(--lh-subhead);
        transition: opacity 0.16s ease;
    }

    .header-search.is-open .header-search__toggle {
        opacity: 0;
        pointer-events: none;
    }

    .header-search.is-open .header-search__panel {
        width: min(240px, 28vw);
        min-width: 200px;
        padding: 0 14px 0 38px;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(-50%) scale(1);
    }

    .header-search.is-open .mobile-search-icon,
    .header-search.is-open input {
        opacity: 1;
    }
}

.mobile-menu-fab {
    display: none;
}

.scroll-top-fab {
    display: none;
}

.mobile-menu-sheet[hidden],
.mobile-menu-sheet-backdrop[hidden] {
    display: none;
}

.mobile-menu-sheet,
.mobile-menu-sheet-backdrop,
.protein-sheet,
.protein-sheet-backdrop,
.calorie-sheet,
.calorie-sheet-backdrop,
.consult-sheet,
.consult-sheet-backdrop {
    display: none;
}

.protein-sheet-backdrop,
.calorie-sheet-backdrop,
.consult-sheet-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    background: var(--sheet-scrim);
    backdrop-filter: blur(22px) saturate(1.2);
    -webkit-backdrop-filter: blur(22px) saturate(1.2);
    z-index: 1180;
}

.protein-sheet,
.calorie-sheet,
.consult-sheet {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(400px, 92vw);
    max-height: min(82vh, 760px);
    overflow: auto;
    display: block;
    padding: 22px 20px 20px;
    background: var(--sheet-bg);
    border-radius: 20px;
    border: 0.5px solid var(--sheet-border);
    box-shadow: var(--sheet-shadow-modal);
    backdrop-filter: var(--sheet-blur);
    -webkit-backdrop-filter: var(--sheet-blur);
    z-index: 1190;
}

.protein-sheet[hidden],
.protein-sheet-backdrop[hidden],
.calorie-sheet[hidden],
.calorie-sheet-backdrop[hidden],
.consult-sheet[hidden],
.consult-sheet-backdrop[hidden] {
    display: none;
}

.protein-sheet-handle,
.calorie-sheet-handle,
.consult-sheet-handle {
    display: none;
}

.protein-sheet-header,
.calorie-sheet-header,
.consult-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.protein-sheet-header strong,
.calorie-sheet-header strong,
.consult-sheet-header strong {
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: -0.019em;
    line-height: 1.25;
    color: var(--ui-text);
}

.protein-sheet-close,
.calorie-sheet-close,
.consult-sheet-close {
    border: 0;
    border-radius: 999px;
    width: 30px;
    height: 30px;
    background: var(--sheet-chrome);
    color: var(--text-icon);
    font-size: var(--text-title-2);
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    transition: background var(--ui-transition-base), color var(--ui-transition-base), transform var(--ui-transition-fast);
}

.protein-sheet-close:hover,
.calorie-sheet-close:hover,
.consult-sheet-close:hover {
    background: var(--sheet-chrome-pressed);
    color: var(--ui-text-muted);
}

.protein-sheet-close:active,
.calorie-sheet-close:active,
.consult-sheet-close:active {
    transform: scale(0.97);
}

.protein-sheet-body,
.calorie-sheet-body,
.consult-sheet-body {
    display: grid;
    gap: 14px;
}

.protein-field-label {
    font-size: var(--text-footnote);
    color: var(--text-icon);
    font-weight: 500;
    letter-spacing: -0.006em;
}

.protein-weight-input {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    border: 0;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: var(--text-body);
    line-height: 1.35;
    font-family: inherit;
    color: var(--ui-text);
    background: var(--sheet-row-bg);
    box-shadow: inset 0 0 0 0.5px var(--sheet-row-stroke);
    transition: box-shadow 0.2s ease, background 0.2s ease;
}

.protein-weight-input:focus {
    outline: none;
    background: var(--sheet-row-bg-hover);
    box-shadow: inset 0 0 0 0.5px var(--primary-ring-stroke), 0 0 0 4px var(--primary-ring);
}

.protein-weight-input::placeholder {
    color: var(--placeholder-faint);
}

.protein-weight-input::-webkit-outer-spin-button,
.protein-weight-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.protein-weight-input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.consult-sheet-body {
    position: relative;
}

.consult-message-input {
    resize: vertical;
    min-height: 88px;
    line-height: 1.4;
}

.consult-submit-btn {
    width: 100%;
}

.consult-submit-btn:disabled {
    opacity: 0.65;
    cursor: wait;
    transform: none;
    box-shadow: none;
}

.consult-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 4px 0 2px;
    font-size: var(--text-footnote, 13px);
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
}

.consult-consent input[type="checkbox"] {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    margin: 1px 0 0;
    padding: 0;
    border: 0;
    -webkit-appearance: checkbox;
    appearance: auto;
    accent-color: var(--primary);
    cursor: pointer;
}

.consult-consent span {
    min-width: 0;
}

.consult-consent a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.consult-consent a:hover {
    opacity: 0.85;
}

.calc-result-hint[data-consult-status][data-kind="error"] {
    color: #b42318;
}

.calc-result-hint[data-consult-status][data-kind="success"] {
    color: #027a48;
}

.protein-field-label em {
    font-style: normal;
    font-weight: 400;
    color: var(--text-soft);
}

.protein-mode-row {
    display: flex;
    padding: 2px;
    gap: 0;
    border-radius: 12px;
    background: rgba(var(--ink-rgb), 0.04);
    box-shadow: inset 0 0 0 0.5px var(--sheet-row-stroke);
}

.protein-mode-btn {
    flex: 1;
    border: 0;
    border-radius: 8px;
    margin: 0;
    background: transparent;
    color: var(--ui-text-muted);
    font-size: var(--text-subhead);
    font-weight: 500;
    letter-spacing: -0.011em;
    min-height: 36px;
    cursor: pointer;
    transition: transform var(--ui-transition-fast), background var(--ui-transition-base), color var(--ui-transition-base), box-shadow 0.2s ease;
}

.protein-mode-btn:active {
    transform: scale(0.98);
}

.protein-mode-btn.is-active {
    background: rgba(255, 255, 255, 0.92);
    color: var(--ui-text-strong);
    box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.06), 0 0 0 0.5px rgba(var(--ink-rgb), 0.04);
}

.protein-mode-btn.is-active::after {
    content: none;
}

.protein-result {
    margin: 2px 0 0;
    font-size: var(--text-subhead);
    line-height: 1.45;
    color: var(--text-icon);
    font-weight: 400;
    letter-spacing: -0.011em;
}

.protein-result.is-calculated {
    color: var(--ui-text);
    font-weight: 600;
    font-size: var(--text-body);
}

.calc-result-hint {
    margin: 0;
    font-size: var(--text-subhead);
    line-height: 1.5;
    color: var(--text-icon);
    letter-spacing: -0.006em;
}

.calc-result-hint[hidden] {
    display: none;
}

.calc-consult-wrap {
    margin-top: 4px;
}

.calc-consult-wrap[hidden] {
    display: none;
}

.calc-recipe-recs {
    display: grid;
    gap: 8px;
    margin-top: 2px;
}

.calc-recipe-recs[hidden] {
    display: none !important;
}

.calc-recipe-recs__title {
    margin: 0;
    font-size: var(--text-footnote);
    font-weight: 600;
    letter-spacing: -0.006em;
    color: var(--ui-text);
}

.calc-recipe-recs__subtitle {
    margin: 0;
    font-size: var(--text-caption-1, 12px);
    line-height: 1.35;
    color: var(--text-icon);
}

.calc-recipe-recs__subtitle:empty {
    display: none;
}

.calc-recipe-recs__list {
    display: grid;
    gap: 6px;
}

.calc-recipe-rec {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    background: var(--sheet-row-bg);
    box-shadow: inset 0 0 0 0.5px var(--sheet-row-stroke);
    transition: background 0.2s ease, transform 0.15s ease;
}

.calc-recipe-rec:hover {
    background: var(--sheet-row-bg-hover);
}

.calc-recipe-rec:active {
    transform: scale(0.99);
}

.calc-recipe-rec__cover {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    background: rgba(43, 33, 35, 0.06);
}

.calc-recipe-rec__cover--empty {
    box-shadow: inset 0 0 0 0.5px var(--sheet-row-stroke);
}

.calc-recipe-rec__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.calc-recipe-rec__text strong {
    font-size: var(--text-footnote);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--ui-text);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.calc-recipe-rec__text span {
    font-size: var(--text-caption-1, 12px);
    line-height: 1.3;
    color: var(--text-icon);
}

.calc-consult-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--text-callout);
    font-weight: 600;
    letter-spacing: var(--track-body);
    cursor: pointer;
    box-shadow: none;
    transition: transform var(--ui-transition-fast), background var(--ui-transition-base), opacity var(--ui-transition-base);
}

.calc-consult-btn:hover {
    background: var(--primary-hover);
    color: #fff;
    box-shadow: none;
}

.calc-consult-btn:active {
    transform: scale(0.97);
}

.calc-consult-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

.calorie-scanner-consult {
    margin-top: 12px;
}

.main-nav a,
.main-nav .main-nav-utility {
    color: var(--muted);
    text-decoration: none;
    transition: color var(--ui-transition-base), background var(--ui-transition-base), transform var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: 999px;
}

.main-nav .main-nav-utility {
    border: 0;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    cursor: pointer;
}

.main-nav a:hover,
.main-nav a.active,
.main-nav .main-nav-utility:hover {
    color: var(--text);
}

.main-nav a.active {
    background: transparent;
    color: var(--primary-emphasis);
}

.main-nav a:active,
.main-nav .main-nav-utility:active {
    transform: scale(0.98);
}

.main-nav a:focus,
.main-nav .main-nav-utility:focus {
    outline: none;
}

.main-nav a:focus-visible,
.main-nav .main-nav-utility:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    color: var(--text);
}

.nav-calc-menu {
    position: relative;
    flex-shrink: 0;
}

.nav-calc-menu__toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-calc-menu__caret {
    display: block;
    flex-shrink: 0;
    opacity: 0.72;
    transition: transform var(--ui-transition-base);
}

.nav-calc-menu.is-open .nav-calc-menu__caret {
    transform: rotate(180deg);
}

.nav-calc-menu__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 248px;
    padding: 6px;
    border-radius: 20px;
    background: var(--sheet-bg);
    border: 0.5px solid var(--sheet-border);
    box-shadow: var(--sheet-shadow-modal);
    backdrop-filter: var(--sheet-blur);
    -webkit-backdrop-filter: var(--sheet-blur);
    z-index: 1200;
}

.nav-calc-menu__dropdown[hidden] {
    display: none;
}

.nav-calc-menu__item {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 12px;
    padding: 10px 12px;
    background: transparent;
    color: var(--ui-text);
    font: inherit;
    font-size: var(--text-subhead);
    font-weight: 500;
    letter-spacing: -0.011em;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: background var(--ui-transition-base), color var(--ui-transition-base), transform var(--ui-transition-fast);
}

a.nav-calc-menu__item:visited {
    color: var(--ui-text);
}

.nav-calc-menu__item:hover {
    background: var(--sheet-row-bg-hover);
}

.nav-calc-menu__item:active {
    transform: scale(0.99);
    background: var(--sheet-chrome-pressed);
}

.nav-calc-menu__item:focus {
    outline: none;
}

.nav-calc-menu__item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    background: var(--sheet-row-bg);
}

.nav-calc-menu.is-open .nav-calc-menu__toggle {
    color: var(--text);
}

.container {
    width: min(1080px, 92vw);
    margin: 0 auto;
    padding: 32px 0 48px;
    flex: 0 1 auto;
}

/* Чуть ближе шапка → hero на лентах, услугах и результатах */
body.page-feed .container,
body.page-services .container,
body.page-client-results .container {
    padding-top: 20px;
}

body.page-feed .hero,
body.page-services .hero,
body.page-client-results .hero {
    padding-top: 10px;
}

.hero {
    border-radius: var(--hero-radius);
    padding: var(--hero-pad-top) var(--hero-pad-x) var(--hero-pad-bottom);
    margin: 0 0 var(--hero-margin-bottom);
    background: transparent;
    border: none;
    box-shadow: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation-delay: 0.1s;
}

.hero:has(+ .stories-rail) {
    margin-bottom: 10px;
}

.hero-content {
    max-width: var(--hero-content-max);
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: none;
    color: var(--primary-emphasis-soft);
    font-size: var(--text-footnote);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--hero-gap-badge);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    line-height: var(--lh-footnote);
}

.hero h1,
.hero h2 {
    margin: 0 0 var(--hero-gap-title);
    font-family: var(--font-display);
    font-size: clamp(var(--text-large-title), 5vw, var(--text-hero-max));
    line-height: var(--lh-large-title);
    letter-spacing: var(--track-large-title);
    font-weight: 600;
    font-optical-sizing: auto;
    color: var(--text);
    text-wrap: balance;
}

.hero p {
    margin: 0 auto;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--text-secondary);
    font-weight: var(--weight-regular);
    letter-spacing: var(--track-body);
}

.hero p a {
    color: var(--primary-emphasis);
    text-decoration: none;
}

.hero p a:hover {
    color: var(--primary);
    text-decoration: none;
}

.hero-consult-wrap {
    margin-top: var(--hero-gap-cta);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.hero-consult-badge {
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    font-weight: var(--weight-regular);
    letter-spacing: var(--track-headline);
    color: var(--text-secondary);
}

.hero-consult-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    border-radius: 999px;
    min-height: 44px;
    padding: 11px 20px;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-body);
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: transform var(--ui-transition-fast), background var(--ui-transition-base), opacity var(--ui-transition-base);
}

.hero-consult-btn:hover {
    background: var(--primary-hover);
    color: #fff;
    box-shadow: none;
}

.hero-consult-btn:active {
    transform: scale(0.97);
    opacity: 0.92;
}

.hero-consult-btn:focus-visible {
    outline: 2px solid var(--primary-focus);
    outline-offset: 3px;
}

.grid {
    display: grid;
    gap: 28px;
}

.post-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: stretch;
    animation-delay: 0.2s;
}

.post-grid > * {
    width: 100%;
    min-width: 0;
}

.post-grid .card {
    display: flex;
    flex-direction: column;
}

/* Home feed: alternating article / myth rows */
.feed-rows {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 0;
    animation-delay: 0.2s;
}

.feed-row--articles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    align-items: stretch;
}

.feed-row--articles > * {
    width: 100%;
    min-width: 0;
}

.feed-row--myths .feed-myths-track {
    display: flex;
    gap: 28px;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.feed-row--myths .feed-myths-track::-webkit-scrollbar {
    display: none;
}

.feed-row--myths .feed-myths-track > .myth-card {
    /* Same visual width as one article column (3-col grid with 28px gaps) */
    flex: 0 0 calc((100% - 56px) / 3);
    width: calc((100% - 56px) / 3);
    max-width: calc((100% - 56px) / 3);
    min-width: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.feed-rows .card {
    display: flex;
    flex-direction: column;
}

.card {
    border-radius: var(--radius);
    padding: 28px;
    border: 0;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--card-shadow);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.post-card-link.card {
    padding: 0;
    overflow: hidden;
}

.post-card-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.post-card-link:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover);
}

.post-card-link.no-cover .post-card-content {
    padding-top: 24px;
}

.post-media,
.article-cover {
    overflow: hidden;
    background: rgba(245, 245, 247, 0.9);
    position: relative;
    border-radius: calc(var(--radius) - 8px);
}

.post-media {
    aspect-ratio: 16 / 10;
    margin-bottom: 0;
    border-radius: 0;
}

.post-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        opacity 0.45s ease,
        transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.post-card-link:hover .post-media img {
    transform: scale(1.03);
}

/* Мягкий shimmer + fade-in для обложек и фото */
.post-media.is-media-loading::before,
.article-cover.is-media-loading::before,
.myth-card-cover.is-media-loading::before,
.post-inline-image-wrap.is-media-loading::before,
.certificates-rail__thumb.is-media-loading::before,
.stories-ring__avatar.is-media-loading::before,
.post-next__thumb.is-media-loading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.55) 48%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 220% 100%;
    animation: media-shimmer 1.4s ease-in-out infinite;
}

.post-media.is-media-loading img,
.article-cover.is-media-loading img,
.myth-card-cover.is-media-loading img,
.post-inline-image-wrap.is-media-loading img,
.certificates-rail__thumb.is-media-loading img,
.stories-ring__avatar.is-media-loading img,
.post-next__thumb.is-media-loading img {
    opacity: 0;
}

.post-media.is-media-ready img,
.article-cover.is-media-ready img,
.myth-card-cover.is-media-ready img,
.post-inline-image-wrap.is-media-ready img,
.certificates-rail__thumb.is-media-ready img,
.stories-ring__avatar.is-media-ready img,
.post-next__thumb.is-media-ready img {
    opacity: 1;
}

@keyframes media-shimmer {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-media.is-media-loading::before,
    .article-cover.is-media-loading::before,
    .myth-card-cover.is-media-loading::before,
    .post-inline-image-wrap.is-media-loading::before,
    .certificates-rail__thumb.is-media-loading::before,
    .stories-ring__avatar.is-media-loading::before,
    .post-next__thumb.is-media-loading::before {
        animation: none;
        opacity: 0;
    }

    .post-media.is-media-loading img,
    .article-cover.is-media-loading img,
    .myth-card-cover.is-media-loading img,
    .post-inline-image-wrap.is-media-loading img,
    .certificates-rail__thumb.is-media-loading img,
    .stories-ring__avatar.is-media-loading img,
    .post-next__thumb.is-media-loading img {
        opacity: 1;
    }
}

.post-card-content {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
}

.post-card-content > .meta-tag {
    align-self: flex-start;
    margin-bottom: 12px;
}

.post-card-content > .post-card-views {
    align-self: flex-start;
    margin-bottom: 12px;
}

.post-card-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    color: rgba(60, 60, 67, 0.78);
    font-size: 12px;
    font-weight: var(--weight-medium);
    line-height: 1;
    letter-spacing: -0.01em;
}

.post-card-views__icon {
    display: block;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    opacity: 0.9;
}

.post-card-views__count {
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-medium);
    font-feature-settings: "tnum" 1;
}

.post-card-views--on-image {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    color: rgba(60, 60, 67, 0.8);
}

.post-card-views--meta {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    color: rgba(60, 60, 67, 0.78);
    text-transform: none;
    letter-spacing: -0.01em;
}

.article-cover {
    margin: 0 auto 40px;
    max-width: 560px;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 12px 32px var(--shadow-ink-sm);
    background: transparent;
    border: 0;
}

.article-cover:not(.article-cover--avatar) {
    aspect-ratio: 16 / 10;
}

.article-cover img {
    display: block;
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
    transition: opacity 0.45s ease;
}

.article-cover:not(.article-cover--avatar) img {
    height: 100%;
    max-height: none;
}

.page-about .article-cover--avatar {
    width: min(220px, 48vw);
    max-width: 220px;
    margin: 4px auto 28px;
    border-radius: 50%;
    aspect-ratio: 1;
    overflow: hidden;
    box-shadow:
        0 0 0 1px var(--border),
        0 14px 36px var(--border-lg);
}

.page-about .article-cover--avatar img,
.page-about .article-cover--avatar .about-avatar-video {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 48% 6%;
    transform: rotate(-1deg) scale(1.06);
    transform-origin: center 58%;
}

.page-about .article-cover--avatar-video .about-avatar-video {
    border: 0;
    background: rgba(245, 245, 247, 0.9);
}

.about-consult {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 36px 20px 8px;
    padding-top: 28px;
    border-top: 0.5px solid var(--sheet-row-stroke);
    text-align: center;
}

.about-consult__text {
    margin: 0 auto 16px;
    max-width: 34em;
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: var(--lh-body);
    letter-spacing: var(--track-headline);
    color: var(--muted);
}

.social-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 18px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    text-decoration: none;
    font-size: var(--text-subhead);
    font-weight: 500;
    letter-spacing: var(--track-headline);
    line-height: 1.3;
    transition: color 0.18s ease;
}

.social-link:hover {
    color: var(--text);
}

.social-link__icon {
    flex: 0 0 auto;
    display: block;
}

.social-links--about {
    margin-top: 18px;
}

.social-links--footer {
    justify-content: flex-start;
}

.footer-social {
    margin: 10px 0 0;
}

.certificates-rail {
    margin: 28px 0 4px;
    padding: 0;
}

.certificates-rail__head {
    padding: 0 20px;
    margin-bottom: 12px;
}

.certificates-rail__title {
    margin: 0;
    font-size: var(--text-title-3, 20px);
    font-weight: 600;
    letter-spacing: -0.022em;
    color: var(--text);
}

.certificates-rail__scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 20px 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 16px,
        #000 calc(100% - 28px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent 0,
        #000 16px,
        #000 calc(100% - 28px),
        transparent 100%
    );
}

.certificates-rail__scroller::-webkit-scrollbar {
    display: none;
}

.certificates-rail__card {
    flex: 0 0 auto;
    width: min(70vw, 248px);
    scroll-snap-align: start;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: transform 0.18s ease;
}

.certificates-rail__card:hover .certificates-rail__thumb {
    box-shadow:
        inset 0 0 0 0.5px rgba(var(--ink-rgb), 0.1),
        0 8px 22px rgba(17, 17, 19, 0.08);
}

.certificates-rail__card:hover .certificates-rail__thumb img {
    transform: scale(1.02);
}

.certificates-rail__card:focus-visible {
    outline: none;
}

.certificates-rail__card:focus-visible .certificates-rail__thumb {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.35);
}

.certificates-rail__card:active {
    transform: scale(0.985);
}

.certificates-rail__thumb {
    display: grid;
    place-items: center;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(180deg, #fff 0%, #f6f3f2 100%);
    box-shadow: inset 0 0 0 0.5px rgba(var(--ink-rgb), 0.08);
    transition: box-shadow 0.2s ease;
}

.certificates-rail__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    padding: 4px;
    box-sizing: border-box;
    transition: opacity 0.45s ease, transform 0.28s ease;
}

.certificates-rail__caption {
    display: grid;
    gap: 2px;
    margin-top: 8px;
    min-width: 0;
    padding: 0 2px;
}

.certificates-rail__caption strong {
    font-size: var(--text-footnote);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.certificates-rail__caption span {
    font-size: var(--text-caption-1, 12px);
    color: var(--text-icon);
}

.certificates-lightbox[hidden] {
    display: none !important;
}

.certificates-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    animation: certificates-lightbox-in 0.2s ease;
}

@keyframes certificates-lightbox-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .certificates-rail__card,
    .certificates-rail__thumb,
    .certificates-rail__thumb img,
    .certificates-lightbox {
        transition: none;
        animation: none;
    }

    .certificates-rail__card:hover .certificates-rail__thumb img {
        transform: none;
    }
}

.certificates-lightbox__scrim {
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 17, 0.72);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    border: 0;
    cursor: pointer;
}

.certificates-lightbox__stage {
    position: relative;
    z-index: 1;
    width: min(1200px, 98vw);
    max-height: min(96vh, 1100px);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.certificates-lightbox__figure {
    margin: 0;
    min-width: 0;
    display: grid;
    gap: 10px;
    justify-items: center;
}

.certificates-lightbox__figure img {
    max-width: 100%;
    max-height: min(88vh, 1000px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.certificates-lightbox__figure figcaption {
    margin: 0;
    padding: 0 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--text-footnote);
    line-height: 1.35;
    max-width: 36em;
}

.certificates-lightbox__close,
.certificates-lightbox__nav {
    border: 0;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.certificates-lightbox__close:hover,
.certificates-lightbox__nav:hover {
    background: rgba(255, 255, 255, 0.26);
}

.certificates-lightbox__close {
    position: absolute;
    top: -48px;
    right: 0;
    z-index: 2;
}

.certificates-lightbox__nav:disabled {
    opacity: 0.35;
}

html.certificates-lightbox-open,
html.certificates-lightbox-open body {
    overflow: hidden;
}

@media (max-width: 720px) {
    .certificates-rail__card {
        width: min(76vw, 232px);
    }

    .certificates-rail__card:hover .certificates-rail__thumb img {
        transform: none;
    }

    .certificates-rail__scroller {
        mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 12px,
            #000 calc(100% - 20px),
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(
            90deg,
            transparent 0,
            #000 12px,
            #000 calc(100% - 20px),
            transparent 100%
        );
    }

    .certificates-lightbox__stage {
        width: 100vw;
        max-height: 100vh;
        padding: 56px 8px 24px;
        gap: 4px;
        box-sizing: border-box;
    }

    .certificates-lightbox__close {
        position: fixed;
        top: max(12px, env(safe-area-inset-top));
        right: max(12px, env(safe-area-inset-right));
    }

    .certificates-lightbox__nav {
        width: 36px;
        height: 36px;
        font-size: 22px;
    }

    .certificates-lightbox__figure img {
        max-height: min(82vh, 900px);
        border-radius: 8px;
    }
}

.post-article {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    max-width: 920px;
    margin: 0 auto;
    animation-delay: 0.1s;
}

.post-next {
    display: block;
    margin: 36px 20px 8px;
    padding-top: 22px;
    border-top: 0.5px solid var(--sheet-row-stroke);
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}

/* Статья / рецепт: без большой «дыры» до подвала */
body.page-article .container {
    flex: 0 0 auto;
    padding-bottom: 8px;
}

body.page-article .post-next {
    margin: 28px 20px 0;
}

body.page-article .site-footer {
    margin-top: 12px;
}

.post-next:hover {
    opacity: 0.88;
}

.post-next:hover .post-next__title {
    color: var(--primary);
}

.post-next__row {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.post-next__thumb {
    flex: 0 0 auto;
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(var(--ink-rgb), 0.04);
}

.post-next__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.45s ease;
}

.post-next__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-sans);
    font-size: var(--text-headline);
    line-height: var(--lh-headline);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-headline);
    color: var(--text);
    transition: color 0.2s ease;
}

.post-next__arrow {
    flex: 0 0 auto;
    color: var(--muted);
}

.post-header {
    text-align: center;
    margin-bottom: 32px;
    padding: 0 20px;
}

.post-header .post-title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-large-title), 5vw, var(--text-hero-max));
    line-height: var(--lh-large-title);
    letter-spacing: var(--track-large-title);
    font-weight: 600;
    font-optical-sizing: auto;
    margin: 16px 0 0;
    text-wrap: balance;
}

.justify-center {
    justify-content: center;
}

.text-center {
    text-align: center;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    text-decoration: none;
    font-weight: var(--weight-semibold);
    font-size: var(--text-subhead);
    line-height: var(--lh-subhead);
    letter-spacing: var(--track-headline);
    margin-bottom: 24px;
    transition: color 0.2s;
}

.back-link:hover {
    color: var(--text);
}

.post-title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: var(--text-title-2);
    line-height: var(--lh-title-2);
    letter-spacing: var(--track-title);
    font-weight: 600;
    font-optical-sizing: auto;
    width: 100%;
    max-width: none;
}

.post-card-content .meta {
    margin-top: auto;
    margin-bottom: 0;
}

.meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: var(--text-subhead);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-subhead);
    letter-spacing: var(--track-headline);
    margin-bottom: 12px;
}

.meta-tag {
    background: var(--surface-quiet);
    padding: 4px 10px;
    border-radius: 999px;
    color: var(--text);
    font-size: var(--text-caption-1);
    text-transform: uppercase;
    letter-spacing: var(--track-caps);
    font-weight: var(--weight-semibold);
    line-height: var(--lh-caption);
}

.meta-tag.on-image {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    color: var(--text);
}

.meta-tag.highlight {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary);
}

.meta-tag.on-image.highlight {
    background: var(--primary);
    color: #ffffff;
    box-shadow: none;
}

.post-excerpt {
    width: 100%;
    max-width: none;
    margin: 0 0 14px;
    font-size: var(--text-subhead);
    line-height: 1.55;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.read-more {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-subhead);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--primary);
    transition: gap 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.post-card-link:hover .read-more {
    gap: 8px;
}

.hint {
    font-size: var(--text-footnote);
    color: var(--text-hint);
}

.myth-card {
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    perspective: 1200px;
    -webkit-perspective: 1200px;
    align-self: center;
    display: flex;
    flex-direction: column;
    height: auto;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.myth-card-inner {
    display: grid;
    width: 100%;
    flex: 0 1 auto;
    min-height: 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    -webkit-transition: -webkit-transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}

.myth-card-inner:has(> .myth-card-front.has-cover) {
    aspect-ratio: 16 / 10;
}

.myth-card-front,
.myth-card-back {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 0;
    background: var(--card-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--card-shadow);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    text-align: left;
}

.myth-card-inner:has(> .myth-card-front.has-cover) .myth-card-front,
.myth-card-inner:has(> .myth-card-front.has-cover) .myth-card-back {
    height: 100%;
    min-height: 100%;
}

.myth-card-front {
    transform: rotateY(0deg) translateZ(0);
    -webkit-transform: rotateY(0deg) translateZ(0);
}

.myth-card-front.has-cover {
    position: relative;
    display: block;
    min-height: 0;
    height: 100%;
}

.myth-card-cover {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: rgba(var(--ink-rgb), 0.04);
}

.myth-card-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 0.45s ease;
}

.myth-card-front.has-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(var(--ink-rgb), 0.22) 0%,
        rgba(var(--ink-rgb), 0.1) 36%,
        rgba(var(--ink-rgb), 0.16) 52%,
        rgba(var(--ink-rgb), 0.52) 100%
    );
}

.myth-card-front.has-cover .myth-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    background: transparent;
    padding: 20px;
    box-sizing: border-box;
}

.myth-card-overlay-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 100%;
}

.myth-card-front.has-cover .myth-card-overlay-top {
    padding-top: 0;
}

.myth-card-front.has-cover .post-title {
    margin: 0;
    color: #fff;
    text-shadow: 0 2px 12px rgba(var(--ink-rgb), 0.4);
}

.myth-card-front.has-cover .myth-hint.read-more {
    margin-top: auto;
    color: #fff;
    text-shadow: 0 1px 8px rgba(var(--ink-rgb), 0.35);
}

.myth-card-front.has-cover .meta-tag.on-image {
    position: static;
    top: auto;
    left: auto;
    margin: 0;
    max-width: 100%;
}

.myth-card-front.no-cover {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.myth-card-front.no-cover .post-card-content {
    flex: 1;
    padding-top: 24px;
}

.myth-card-back {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg) translateZ(0);
}

.myth-card.is-flipped .myth-card-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.myth-card-front.no-cover .post-card-content,
.myth-card-back .myth-card-back-content {
    flex: 1;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.myth-card-front.has-cover .myth-card-overlay {
    min-height: 0;
}

.myth-card-front .post-title {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.myth-card-front.no-cover .post-title {
    margin: 0;
}

.myth-hint.read-more {
    margin-bottom: 0;
}

.myth-card-back-content {
    background: rgba(255, 255, 255, 0.55);
    border-top: 0.5px solid var(--sheet-border);
    box-sizing: border-box;
}

.myth-card-back-head {
    flex-shrink: 0;
    margin-bottom: 12px;
}

.myth-card-back-question {
    margin: 10px 0 0;
    font-size: var(--text-headline);
    line-height: var(--lh-headline);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-headline);
    color: var(--text-strong);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.myth-card-back .myth-content {
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    overflow-y: auto;
    font-size: var(--text-subhead);
    line-height: 1.55;
    color: var(--text-secondary);
    word-break: break-word;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.myth-card-back .myth-content .content-callout {
    margin: 12px 0 0;
    padding: 12px 16px;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
}

.myth-content ul,
.myth-content ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.myth-card-back .myth-content .content-callout__label,
.myth-card-back .myth-content .content-callout > strong:first-child {
    margin-bottom: 6px;
    font-size: inherit;
}

.myth-card-back .myth-content::-webkit-scrollbar {
    width: 4px;
}

.myth-card-back .myth-content::-webkit-scrollbar-thumb {
    background: var(--overlay-ink);
    border-radius: 999px;
}

.myth-card-back .myth-hint.read-more {
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 14px;
}

.post-grid > .myth-card {
    min-height: 0;
}

.post-grid > .myth-card .myth-card-inner {
    min-height: 0;
}

.post-grid > .myth-card .myth-card-front.no-cover,
.post-grid > .myth-card .myth-card-back {
    min-height: auto;
}

@media (min-width: 701px) {
    .myth-card.is-flipped {
        align-self: stretch;
        min-height: 0;
        overflow: hidden;
        height: var(--myth-flip-height, auto);
        max-height: var(--myth-flip-height, none);
    }

    .myth-card.is-flipped .myth-card-inner,
    .myth-card.is-flipped .myth-card-inner:has(> .myth-card-front.has-cover) {
        aspect-ratio: auto;
        position: relative;
        display: block;
        transform: none;
        -webkit-transform: none;
        height: 100%;
        min-height: 0;
        transition: none;
        -webkit-transition: none;
    }

    .myth-card.is-flipped .myth-card-front {
        display: none;
    }

    .myth-card.is-flipped .myth-card-back {
        display: flex;
        position: absolute;
        inset: 0;
        transform: none;
        -webkit-transform: none;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
        overflow: hidden;
    }

    .myth-card.is-flipped .myth-card-back-content {
        height: 100%;
        min-height: 0;
        overflow: hidden;
    }

    .myth-card.is-flipped .myth-card-back .myth-content {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

.myth-content p {
    margin: 0 0 8px;
}

.myth-content p:last-child {
    margin: 0;
}

.post-content {
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--text-secondary);
    max-width: 720px;
    margin: 0 auto;
}

.post-content a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(var(--primary-rgb), 0.4);
    transition: text-decoration-color 0.2s;
}

.post-content a:hover {
    text-decoration-color: var(--primary);
}

.post-content p {
    margin: 0 0 12px;
}

.post-content ul,
.post-content ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.post-content li {
    margin-bottom: 8px;
}

.post-content li:last-child {
    margin-bottom: 0;
}

.post-content li::marker {
    color: var(--primary);
}

.circle-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    margin: 2px 6px 2px 0;
    padding: 8px 15px;
    border-radius: 999px;
    color: var(--primary-ink);
    font-weight: 600;
    background: var(--primary-tint);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.content-callout {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 24px 0;
    padding: 16px 20px;
    border-radius: 16px;
    border: none;
    background: rgba(245, 245, 247, 0.8);
    font-size: var(--text-callout);
    line-height: 1.6;
    box-sizing: border-box;
    clear: both;
}

.post-content .content-callout,
.myth-content .content-callout {
    margin-inline: 0;
}

.post-content li > .content-callout,
.myth-content li > .content-callout {
    margin-left: -24px;
    width: calc(100% + 24px);
    max-width: calc(100% + 24px);
}

.content-callout.tip {
    background: rgba(var(--primary-rgb), 0.08);
}

.content-callout.tip .content-callout__label,
.content-callout.tip > strong:first-child {
    display: block;
    margin-bottom: 8px;
    color: var(--primary);
    font-weight: 600;
    font-size: inherit;
    letter-spacing: -0.01em;
}

.content-callout.tip .content-callout__body {
    color: var(--text);
}

.content-callout.warning {
    background: rgba(255, 59, 48, 0.08);
}

.content-callout.check {
    background: rgba(52, 199, 89, 0.08);
}

.post-content .post-quote,
.post-content blockquote.post-quote,
.myth-content .post-quote,
.myth-content blockquote.post-quote {
    margin: 16px 0;
    padding: 0 0 0 16px;
    border-left: 3px solid rgba(var(--primary-rgb), 0.4);
    background: transparent;
    border-radius: 0;
    color: var(--text);
    font-style: italic;
    font-size: var(--text-body);
    line-height: var(--lh-body);
    letter-spacing: var(--track-headline);
}

.post-audio {
    display: block;
    width: 100%;
    margin-top: 14px;
    border-radius: 12px;
    background: var(--ui-fill);
}

.post-video-wrap {
    width: 100%;
    max-width: 680px;
    margin: 16px auto 0;
    border-radius: 16px;
    overflow: hidden;
}

.post-video-wrap.is-portrait {
    max-width: 280px;
    aspect-ratio: 9 / 16;
}

.post-video-wrap--embed {
    aspect-ratio: 16 / 9;
    background: #000;
    max-height: 78vh;
}

.post-video {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 78vh;
    height: auto;
    border-radius: 12px;
    background: #000;
    object-fit: contain;
}

.post-video-embed {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.post-video-wrap.is-portrait .post-video {
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center top;
    border-radius: 16px;
}

.post-inline-image-wrap {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 16px auto 0;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(245, 245, 247, 0.9);
}

.post-inline-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    background: transparent;
    transition: opacity 0.45s ease;
}

.link-btn {
    border: 0;
    border-radius: 999px;
    padding: 11px 20px;
    min-height: 44px;
    font-family: var(--font-sans);
    font-size: var(--text-callout);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: var(--track-body);
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    color: #fff;
    background: var(--primary);
    box-shadow: none;
    transition: transform var(--ui-transition-fast), background var(--ui-transition-base), opacity var(--ui-transition-base);
}

.link-btn:hover {
    background: var(--primary-hover);
    box-shadow: none;
}

.link-btn:active {
    transform: scale(0.97);
    opacity: 0.92;
}

/* iOS plain: без рамки и «веб-тени» */
.button-outline {
    color: var(--primary-emphasis);
    background: var(--ui-fill);
    border: 0;
    box-shadow: none;
}

.button-outline:hover {
    background: var(--ui-fill-hover);
    box-shadow: none;
    color: var(--primary-emphasis);
}

.danger {
    background: var(--danger);
    box-shadow: none;
}

.danger:hover {
    background: #d93a31;
    box-shadow: none;
}

input,
select {
    width: 100%;
    padding: 11px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-md);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text);
    font-size: var(--text-body);
    line-height: 1.35;
    font-family: inherit;
    min-height: 44px;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-md);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text);
    font-size: var(--text-body);
    line-height: 1.45;
    font-family: inherit;
    min-height: 220px;
    resize: vertical;
    transition: all 0.2s ease;
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    background: #fff;
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 0 0 4px var(--primary-ring);
}

.pagination {
    margin: 48px 0;
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Лента / рецепты: без большой «дыры» до подвала */
body.page-feed .pagination {
    margin: 28px 0 0;
}

body.page-feed .container {
    padding-bottom: 12px;
}

body.page-feed .site-footer {
    margin-top: 16px;
}

.pagination .link-btn {
    font-family: inherit;
    font-size: var(--text-body);
    line-height: 1;
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-headline);
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    box-shadow: none;
    transition:
        transform var(--ui-transition-fast),
        background var(--ui-transition-base),
        box-shadow var(--ui-transition-base),
        color var(--ui-transition-base),
        border-color var(--ui-transition-base);
}

.pagination .link-btn:hover {
    background: var(--primary-hover);
    color: #fff;
    box-shadow: none;
}

.pagination .link-btn.button-outline {
    color: var(--primary-emphasis);
    background: var(--ui-fill);
    border: 0;
    box-shadow: none;
}

.pagination .link-btn.button-outline:hover {
    background: var(--ui-fill-hover);
    color: var(--primary-emphasis);
    border-color: transparent;
    box-shadow: none;
}

.admin-shell .pagination {
    margin-top: 24px;
    margin-bottom: 0;
}

.admin-list-meta {
    margin: 0 0 12px;
}

.admin-search-form {
    margin: 0;
}

.admin-search-form__label {
    display: block;
    margin: 0 0 10px;
    font-size: var(--text-body);
    font-weight: 600;
    color: var(--text-strong);
}

.admin-search-form__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.admin-search-form__row input[type="search"] {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
    margin: 0;
}

.admin-search-form__row .link-btn {
    flex: 0 0 auto;
}

.admin-pagination {
    flex-wrap: wrap;
}

.admin-pagination__nav {
    min-width: 44px;
}

.error-message {
    color: var(--danger);
    margin-bottom: 12px;
    font-size: var(--text-subhead);
    line-height: 1.4;
    font-weight: 500;
}

body.admin-app {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-synthesis: none;
    background:
        radial-gradient(900px 360px at -6% -10%, rgba(var(--primary-rgb), 0.07), transparent 58%),
        radial-gradient(720px 380px at 102% 4%, rgba(var(--primary-rgb), 0.05), transparent 60%),
        #fdfcfc;
}

body.admin-app .admin-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: min(1120px, min(94vw, 100% - 28px));
    margin: 0 auto;
    padding: 24px 0 56px;
    box-sizing: border-box;
}

body.admin-app.admin-login-mode .admin-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 48px);
    min-height: calc(100dvh - 48px);
    padding: 32px 16px 48px;
}

body.admin-app .admin-login {
    width: 100%;
    max-width: 420px;
    margin: 0;
    padding: 32px 30px 28px;
    text-align: center;
    border: 0;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 22px 50px rgba(17, 17, 19, 0.1);
}

body.admin-app .admin-login .form-row {
    text-align: left;
    margin-top: 8px;
}

.admin-login-brand {
    margin: 0 0 12px;
    font-size: var(--text-title-3);
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--text);
}

.admin-login-brand span {
    color: var(--primary);
}

.admin-login-lead {
    margin: 0 0 22px;
    font-size: var(--text-subhead);
    color: var(--muted);
    font-weight: 400;
    line-height: 1.35;
}

.admin-login h2 {
    margin: 0 0 6px;
    font-size: var(--text-title-1);
    line-height: var(--lh-title-1);
    letter-spacing: var(--track-title);
    font-weight: var(--weight-semibold);
    text-align: center;
}

.admin-login .form-row {
    gap: 12px;
}

.admin-login .form-row label {
    display: grid;
    gap: 6px;
    color: var(--text-label);
    font-size: var(--text-footnote);
    font-weight: 500;
    letter-spacing: -0.006em;
}

.admin-primary-btn {
    border: 0;
    border-radius: 12px;
    min-height: 44px;
    background: rgba(var(--primary-rgb), 0.9);
    color: #fff;
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: -0.011em;
    cursor: pointer;
    transition: transform var(--ui-transition-fast), background var(--ui-transition-base), box-shadow var(--ui-transition-base);
}

.admin-primary-btn:hover {
    background: rgba(201, 90, 107, 0.94);
    box-shadow: 0 8px 20px rgba(201, 90, 107, 0.24);
    transform: translateY(-1px);
}

.admin-primary-btn:active {
    transform: scale(0.98);
}

.admin-login-back {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    text-decoration: none;
    font-size: var(--text-body);
    font-weight: 500;
    letter-spacing: -0.011em;
    color: var(--text);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 0 0 1px var(--border-md);
    transition: background var(--ui-transition-base), transform var(--ui-transition-fast);
}

.admin-login-back:hover {
    background: #fff;
}

.admin-login-back:active {
    transform: scale(0.98);
}

body.admin-app .admin-primary-btn {
    width: 100%;
    border-radius: 12px;
    min-height: 44px;
    font-weight: 600;
    margin-top: 4px;
}

body.admin-app .admin-login-back {
    width: 100%;
    margin-top: 16px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--border-lg);
}

body.admin-app input[type="text"],
body.admin-app input[type="password"],
body.admin-app input[type="search"],
body.admin-app input[type="number"],
body.admin-app input[type="url"],
body.admin-app select {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    border-radius: 10px;
    border: 0;
    padding: 10px 14px;
    font-size: var(--text-body);
    line-height: 1.35;
    font-family: inherit;
    background: var(--ui-fill);
    color: var(--ui-text);
    box-shadow: inset 0 0 0 1px var(--ui-stroke-strong);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

body.admin-app textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 220px;
    border-radius: 10px;
    border: 0;
    padding: 12px 14px;
    font-size: var(--text-body);
    line-height: 1.45;
    font-family: inherit;
    resize: vertical;
    background: var(--ui-fill);
    color: var(--ui-text);
    box-shadow: inset 0 0 0 1px var(--ui-stroke-strong);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

body.admin-app input::placeholder,
body.admin-app textarea::placeholder {
    color: var(--placeholder-faint);
}

body.admin-app input:focus,
body.admin-app select:focus,
body.admin-app textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px var(--primary-ring-stroke), 0 0 0 4px var(--primary-ring);
}

body.admin-app .admin-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 22px;
    padding: 12px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    border: 0;
    box-shadow: 0 10px 28px var(--border);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}

body.admin-app .admin-top__intro {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 10px 14px;
    min-width: 0;
    flex: 1 1 auto;
}

body.admin-app .admin-top__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 16px;
    margin-left: auto;
    flex: 0 1 auto;
}

body.admin-app .admin-segment {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
    padding: 3px;
    min-width: min(100%, 560px);
    border-radius: 11px;
    background: rgba(var(--ink-rgb), 0.08);
    box-shadow: inset 0 0 0 0.5px rgba(var(--ink-rgb), 0.04);
}

body.admin-app .admin-segment__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 560;
    letter-spacing: -0.01em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    color: rgba(var(--ink-rgb), 0.72);
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

body.admin-app .admin-segment__item:hover {
    color: rgba(var(--ink-rgb), 0.92);
}

body.admin-app .admin-segment__item.is-active {
    color: rgba(var(--ink-rgb), 0.96);
    background: rgba(255, 255, 255, 0.96);
    box-shadow:
        0 1px 2px rgba(var(--ink-rgb), 0.08),
        0 0 0 0.5px rgba(var(--ink-rgb), 0.04);
}

body.admin-app .admin-top__utils {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px;
    border-radius: 11px;
    background: rgba(var(--ink-rgb), 0.05);
    box-shadow: inset 0 0 0 0.5px rgba(var(--ink-rgb), 0.04);
}

body.admin-app .admin-util-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 560;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: rgba(var(--ink-rgb), 0.72);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

body.admin-app .admin-util-link:hover {
    color: rgba(var(--ink-rgb), 0.96);
    background: rgba(255, 255, 255, 0.88);
    box-shadow:
        0 1px 2px rgba(var(--ink-rgb), 0.06),
        0 0 0 0.5px rgba(var(--ink-rgb), 0.04);
}

body.admin-app .admin-util-link--danger {
    color: rgba(145, 55, 71, 0.88);
}

body.admin-app .admin-util-link--danger:hover {
    color: rgba(120, 46, 60, 0.98);
    background: rgba(222, 107, 125, 0.12);
    box-shadow: none;
}

body.admin-app .admin-top strong {
    display: inline;
    flex: 0 0 auto;
    font-size: var(--text-title-3);
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--text);
    white-space: nowrap;
}

body.admin-app .admin-editor {
    margin-bottom: 0;
}

body.admin-app .admin-editor > form > .card {
    padding: 28px 26px 30px;
    border-radius: 22px;
    border: 0;
    box-shadow: 0 14px 36px rgba(17, 17, 19, 0.08);
}

body.admin-app .admin-shell > .card {
    padding: 22px 24px 26px;
    border-radius: 20px;
    border: 0;
    box-shadow: 0 12px 32px rgba(17, 17, 19, 0.07);
}

body.admin-app .admin-shell > .card > h3 {
    margin: 0 0 16px;
    font-size: var(--text-title-3);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-headline);
    line-height: var(--lh-title-3);
    color: var(--text);
}

body.admin-app .admin-top p {
    margin: 0;
    min-width: 0;
    flex: 1 1 auto;
    max-width: none;
    font-size: var(--text-footnote);
    line-height: 1.35;
    color: var(--muted);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.admin-app .admin-editor label {
    color: var(--text-strong);
    font-size: var(--text-footnote);
    font-weight: 500;
    letter-spacing: -0.006em;
}

body.admin-app .admin-editor .form-row > .admin-primary-btn {
    margin-top: 10px;
    width: auto;
    min-width: min(100%, 280px);
}

.slug-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

.slug-refresh-btn {
    border: 0;
    border-radius: 10px;
    min-height: 44px;
    padding: 0 12px;
    background: var(--ui-fill);
    color: var(--ui-text-muted);
    font-size: var(--text-subhead);
    font-weight: 500;
    letter-spacing: -0.006em;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--ui-stroke-strong);
    transition: background 0.2s ease, color 0.2s ease, transform 0.16s ease, box-shadow 0.2s ease;
}

.slug-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.96);
    color: var(--text);
    box-shadow: inset 0 0 0 1px var(--ui-stroke-strong);
}

.slug-refresh-btn:active {
    transform: scale(0.98);
}

.form-row {
    display: grid;
    gap: 11px;
}

.admin-recipe-kbju {
    display: grid;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(222, 107, 125, 0.06);
    box-shadow: inset 0 0 0 1px rgba(222, 107, 125, 0.14);
}

.admin-recipe-kbju[hidden] {
    display: none !important;
}

.admin-recipe-kbju__title {
    margin: 0;
    font-size: var(--text-callout, 15px);
    font-weight: 600;
    color: var(--ink, #2b2123);
}

.admin-recipe-kbju__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 720px) {
    .admin-recipe-kbju__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.media-pickers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 8px 0 10px;
    position: sticky;
    top: 10px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    padding: 8px 10px;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--ui-fill-hover), 0 6px 16px rgba(17, 17, 19, 0.05);
}

.media-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0;
    margin: 0;
    border: 0;
}

.media-group + .media-group {
    padding-left: 10px;
    margin-left: 0;
    border-left: 1px solid var(--border-lg);
}

@media (max-width: 1100px) {
    .media-pickers {
        display: grid;
        gap: 8px;
    }

    .media-group + .media-group {
        border-left: 0;
        padding-left: 0;
    }
}

.media-picker {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 0;
    background: var(--ui-fill);
    box-shadow: inset 0 0 0 1px var(--ui-stroke-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: var(--text-subhead);
    font-weight: 500;
    letter-spacing: -0.006em;
    color: var(--ui-text);
    transition: background 0.2s ease, color 0.2s ease, transform 0.16s ease, box-shadow 0.2s ease;
}

.media-picker:hover {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px var(--ui-stroke-strong);
}

.media-picker:active {
    transform: scale(0.98);
}

.media-picker.text-tool {
    color: var(--ui-text);
    font-weight: 500;
}

.media-picker.text-tool:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    pointer-events: none;
}

.media-picker.media-picker-wide {
    width: auto;
    min-width: 74px;
    padding: 0 11px;
    font-size: var(--text-subhead);
    min-height: 44px;
    border-radius: 10px;
}

.media-picker.media-picker-danger {
    color: rgba(255, 59, 48, 0.92);
    background: rgba(255, 59, 48, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 59, 48, 0.22);
}

.media-picker.media-picker-danger:hover {
    background: rgba(255, 59, 48, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 59, 48, 0.34);
}

.media-picker.media-picker-danger.is-active {
    color: #ffffff;
    background: #ff3b30;
    border-color: #ff3b30;
    box-shadow: 0 6px 16px rgba(255, 59, 48, 0.28);
}

.cover-preview-container {
    margin: 12px 0;
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(245, 245, 247, 0.9);
    border: 1px solid var(--border-md);
}

.cover-preview-label {
    margin: 6px 0 4px;
    font-size: var(--text-footnote);
    color: var(--muted);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.is-hidden {
    display: none;
}

.cover-preview-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.media-picker input[type="file"] {
    display: none;
}

.rich-editor {
    min-height: 320px;
    border: 0;
    border-radius: 10px;
    background: var(--ui-fill);
    box-shadow: inset 0 0 0 1px var(--ui-stroke-strong);
    margin-top: 4px;
    padding: 16px 20px;
    font-size: var(--text-body);
    line-height: 1.65;
    color: var(--ui-text);
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.rich-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--muted);
    pointer-events: none;
}

.rich-editor:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: inset 0 0 0 1px var(--primary-ring-stroke), 0 0 0 4px var(--primary-ring);
}

.rich-editor .post-quote,
.rich-editor blockquote {
    margin: 16px 0;
    padding: 0 0 0 16px;
    border-left: 3px solid rgba(var(--primary-rgb), 0.4);
    background: transparent;
    border-radius: 0;
    color: var(--text);
    font-style: italic;
    font-size: var(--text-body);
}

.rich-editor ul,
.rich-editor ol {
    margin: 0 0 16px;
    padding-left: 24px;
}

.rich-editor li {
    margin-bottom: 8px;
}

.rich-editor li:last-child {
    margin-bottom: 0;
}

.rich-editor strong {
    display: inline;
    font-weight: 600;
}

.rich-editor a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(var(--primary-rgb), 0.45);
}

.rich-editor .content-callout {
    margin: 12px 0;
    padding: 12px 16px;
    font-size: var(--text-callout);
    line-height: 1.6;
}

.rich-editor .content-callout > strong:first-child,
.rich-editor .content-callout__label {
    display: block;
    margin-bottom: 6px;
    color: var(--primary);
    font-weight: 600;
    font-size: inherit;
    letter-spacing: -0.01em;
}

.rich-editor .content-callout.tip .content-callout__body {
    font-size: inherit;
    color: var(--ui-text);
}

.rich-editor li::marker {
    color: var(--primary);
}

.audio-added-notice {
    margin: 0 0 8px;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--ui-fill);
    border: 0;
    box-shadow: inset 0 0 0 1px var(--ui-stroke-strong);
    color: var(--ui-text-muted);
    font-size: var(--text-subhead);
    line-height: 1.35;
    font-weight: 400;
    letter-spacing: -0.006em;
}

body.admin-app .editor-status-hint {
    margin: 0 0 8px;
    padding: 8px 12px 8px 26px;
    border-radius: 10px;
    background: var(--ui-fill);
    box-shadow: inset 0 0 0 1px var(--ui-stroke-strong);
    color: var(--ui-text-muted);
    font-size: var(--text-subhead);
    line-height: 1.35;
    position: relative;
}

body.admin-app .editor-status-hint::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--ui-handle);
}

body.admin-app .editor-status-hint--warn::before {
    background: #ff9500;
}

.pending-chip-row {
    display: block;
    margin: 6px 0;
}

.pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: var(--text-footnote);
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
}

.pending-chip.audio {
    background: var(--ui-fill-hover);
    color: var(--ui-text-muted);
    box-shadow: inset 0 0 0 1px var(--ui-fill-pressed);
}

.pending-chip.video {
    background: var(--ui-fill-hover);
    color: var(--ui-text-muted);
    box-shadow: inset 0 0 0 1px var(--ui-fill-pressed);
}

.pending-chip.image {
    background: var(--ui-fill-hover);
    color: var(--ui-text-muted);
    box-shadow: inset 0 0 0 1px var(--ui-fill-pressed);
}

.rich-editor .editor-inline-image-row {
    margin: 10px 0;
}

.rich-editor .editor-inline-image {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 240px;
    height: auto;
    border-radius: 12px;
    object-fit: contain;
    background: var(--ui-fill);
    box-shadow: inset 0 0 0 1px var(--ui-stroke-strong);
}

.post-admin-list {
    display: grid;
    gap: 12px;
}

.post-admin-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
    transition: background 0.2s ease;
}

.post-admin-row:hover {
    background: rgba(255, 255, 255, 0.95);
}

.post-admin-row strong {
    font-size: var(--text-body);
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.post-admin-row .actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.post-admin-row .actions form {
    margin: 0;
}

.post-admin-row .actions .link-btn {
    padding: 8px 16px;
    font-size: var(--text-subhead);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.post-admin-row .meta {
    margin-bottom: 0;
    font-size: var(--text-footnote);
}

.meta-slug {
    opacity: 0.74;
    font-weight: 400;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    border: none;
    background: var(--surface-subtle);
    border-radius: var(--radius);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.empty-icon {
    color: var(--overlay-ink);
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.empty-state h3 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: var(--text-title-2);
    font-weight: 600;
    letter-spacing: var(--track-title);
    font-optical-sizing: auto;
    color: var(--text);
}

.empty-state.not-found {
    margin-top: 64px;
}

.empty-state .hint {
    font-size: var(--text-subhead);
    color: var(--text-secondary);
}

.empty-state .link-btn {
    margin-top: 24px;
    display: inline-flex;
}

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: var(--text-footnote);
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
}

.published {
    background: #34c759;
}

.draft {
    background: #8e8e93;
}

.badge-neutral {
    background: var(--border);
    color: var(--text);
    border: 1px solid var(--line);
}

.site-footer {
    flex-shrink: 0;
    margin-top: 32px;
    padding: 28px 0 36px;
    background: rgba(255, 255, 255, 0.55);
    border-top: 1px solid var(--border);
}

.footer-container {
    width: min(1080px, 92vw);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 28px 48px;
}

.footer-brand .footer-tagline {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: var(--text-footnote);
    font-weight: var(--weight-regular);
    letter-spacing: var(--track-footnote);
    line-height: 1.45;
    max-width: 360px;
    font-synthesis: none;
}

.footer-disclaimer {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: var(--text-footnote);
    font-weight: var(--weight-regular);
    letter-spacing: var(--track-footnote);
    line-height: var(--lh-footnote);
    max-width: 360px;
    font-synthesis: none;
}

.footer-meta {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: var(--text-footnote);
    font-weight: var(--weight-regular);
    letter-spacing: var(--track-footnote);
    line-height: var(--lh-footnote);
    font-synthesis: none;
}

.footer-legal {
    margin: 10px 0 0;
}

.footer-legal a {
    color: var(--muted);
    font-size: var(--text-footnote);
    font-weight: var(--weight-regular);
    letter-spacing: var(--track-footnote);
    line-height: var(--lh-footnote);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(var(--ink-rgb), 0.22);
}

.footer-legal a:hover,
.footer-legal a.active {
    color: var(--primary);
    text-decoration-color: rgba(var(--primary-rgb), 0.45);
}

.legal-page {
    padding: 8px 20px 24px;
}

.legal-page__header {
    margin: 0 0 20px;
}

.legal-page__header h1 {
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-size: var(--text-title-1, 28px);
    font-weight: 600;
    letter-spacing: var(--track-title);
    line-height: 1.15;
    font-optical-sizing: auto;
    color: var(--text);
}

.legal-page__updated {
    margin: 0;
    font-size: var(--text-footnote);
    color: var(--text-icon);
}

.legal-page__content h2 {
    margin: 22px 0 8px;
    font-family: var(--font-display);
    font-size: var(--text-title-3, 20px);
    font-weight: 600;
    letter-spacing: var(--track-headline);
    font-optical-sizing: auto;
    color: var(--text);
}

.anketa-page {
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 8px 20px 40px;
}

.anketa-page__hero {
    margin: 0 0 22px;
}

.anketa-page__badge {
    margin: 0 0 8px;
    font-size: var(--text-footnote);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary);
}

.anketa-page__title {
    margin: 0 0 10px;
    font-size: var(--text-title-2, 28px);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--text);
}

.anketa-page__lead {
    margin: 0;
    max-width: 40em;
    font-size: var(--text-body);
    line-height: var(--lh-body);
    color: var(--muted);
}

.anketa-form {
    display: grid;
    gap: 16px;
}

.anketa-form__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.anketa-block {
    margin: 0;
    padding: 18px 16px 16px;
    border: 0;
    border-radius: var(--radius);
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.anketa-block legend {
    padding: 0 4px;
    font-size: var(--text-title-3, 18px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text);
}

.anketa-block legend em {
    font-style: normal;
    font-weight: 500;
    color: var(--muted);
    font-size: var(--text-footnote);
}

.anketa-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    margin-top: 12px;
}

.anketa-field {
    display: grid;
    gap: 6px;
    min-width: 0;
    font-size: var(--text-footnote);
    font-weight: 500;
    color: var(--text-strong);
}

.anketa-field--wide {
    grid-column: 1 / -1;
}

.anketa-field__label {
    display: block;
}

.anketa-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.anketa-field textarea,
.anketa-inline-input {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ui-stroke);
    border-radius: 12px;
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
    font: inherit;
    font-size: var(--text-subhead);
    line-height: 1.35;
}

.anketa-field textarea {
    resize: vertical;
    min-height: 64px;
}

.anketa-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.anketa-field textarea:focus,
.anketa-inline-input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.anketa-checks,
.anketa-radios {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.anketa-checks--inline,
.anketa-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.anketa-check,
.anketa-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--text-subhead);
    font-weight: 500;
    line-height: 1.25;
    color: var(--text);
    cursor: pointer;
}

/* Кастомные контролы: нативные в Safari смещают текст; стили .anketa-field input больше не трогают их */
.anketa-check > input[type="checkbox"],
.anketa-radio > input[type="radio"],
.anketa-consent > input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    min-width: 18px;
    max-width: 18px;
    min-height: 18px;
    max-height: 18px;
    margin: 0;
    padding: 0;
    flex: 0 0 18px;
    border: 1.5px solid rgba(var(--ink-rgb), 0.28);
    border-radius: 5px;
    background-color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 12px 12px;
    box-shadow: none;
    font-size: 0;
    line-height: 0;
    vertical-align: middle;
    cursor: pointer;
}

.anketa-radio > input[type="radio"] {
    border-radius: 50%;
}

.anketa-check > input[type="checkbox"]:checked,
.anketa-radio > input[type="radio"]:checked,
.anketa-consent > input[type="checkbox"]:checked {
    border-color: var(--primary);
    background-color: var(--primary);
}

.anketa-check > input[type="checkbox"]:checked,
.anketa-consent > input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.2l2.8 2.8 6.2-6.2'/%3E%3C/svg%3E");
}

.anketa-radio > input[type="radio"]:checked {
    background-image: radial-gradient(circle at center, #fff 0 3.5px, transparent 4px);
    background-size: auto;
}

.anketa-check span,
.anketa-radio span {
    min-width: 0;
    line-height: 1.25;
}

.anketa-inline-input {
    margin-top: 8px;
}

.anketa-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--text-footnote);
    line-height: 1.4;
    color: var(--muted);
    cursor: pointer;
}

.anketa-consent input {
    margin-top: 0.1em;
}

.anketa-consent span {
    min-width: 0;
    line-height: 1.4;
}

.anketa-consent a {
    color: var(--text);
    text-underline-offset: 2px;
}

.anketa-photos-hint {
    margin: 10px 0 0;
    font-size: var(--text-footnote);
    line-height: 1.4;
    color: var(--muted);
}

.anketa-photos-field input[type="file"] {
    padding: 10px 12px;
    font-size: var(--text-footnote);
}

.anketa-photos-list {
    margin: 8px 0 0;
    font-size: var(--text-footnote);
    color: var(--muted);
    line-height: 1.4;
}

.anketa-actions {
    display: grid;
    gap: 10px;
    justify-items: start;
}

.anketa-status {
    margin: 0;
    font-size: var(--text-footnote);
    color: var(--muted);
}

.anketa-status[data-kind="error"] {
    color: rgba(145, 55, 71, 0.95);
}

.anketa-status[data-kind="success"] {
    color: rgba(40, 110, 70, 0.95);
}

.anketa-page__note {
    margin: 22px 0 0;
    font-size: var(--text-footnote);
    color: var(--muted);
}

.admin-questionnaire-view h4 {
    margin: 18px 0 8px;
    font-size: var(--text-subhead);
    font-weight: 600;
}

.admin-questionnaire-view ul {
    margin: 0;
    padding-left: 1.1em;
    display: grid;
    gap: 6px;
    font-size: var(--text-footnote);
    line-height: 1.4;
    color: var(--text);
}

.admin-questionnaire-photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.admin-questionnaire-photos a {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(var(--ink-rgb), 0.04);
    aspect-ratio: 1;
}

.admin-questionnaire-photos img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.admin-cabinet-link {
    display: grid;
    gap: 8px;
    margin: 16px 0;
    font-size: var(--text-footnote);
    font-weight: 560;
    color: var(--text);
}

.admin-cabinet-link__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.admin-cabinet-link__row input {
    flex: 1 1 220px;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid var(--ui-stroke);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    font-size: var(--text-footnote);
    background: #fff;
}

.admin-cabinet-view h4 {
    margin: 18px 0 8px;
    font-size: var(--text-subhead);
}

.admin-cabinet-view ul {
    margin: 0;
    padding-left: 1.1em;
    display: grid;
    gap: 6px;
    font-size: var(--text-footnote);
    line-height: 1.4;
}

@media (max-width: 720px) {
    .anketa-page {
        padding: 4px 16px 32px;
    }

    .anketa-grid {
        grid-template-columns: 1fr;
    }
}

.services-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 0 28px;
}

.services-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

.service-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: 22px 20px 18px;
    border-radius: var(--radius);
    background: var(--card-bg);
    border: 0;
    box-shadow: var(--card-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.service-card--featured {
    box-shadow:
        inset 0 0 0 0.5px rgba(var(--primary-rgb), 0.42),
        0 1px 3px rgba(0, 0, 0, 0.03);
    background: linear-gradient(
        180deg,
        rgba(var(--primary-rgb), 0.06) 0%,
        var(--card-bg) 42%
    );
}

.service-card__badge {
    display: inline-block;
    margin: 0 0 8px;
    font-size: var(--text-caption-1, 12px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--primary);
}

.service-card--featured .service-card__badge {
    color: var(--primary-emphasis, var(--primary));
}

.service-card__title {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-size: var(--text-title-3, 20px);
    font-weight: 600;
    letter-spacing: var(--track-title);
    line-height: 1.25;
    font-optical-sizing: auto;
    color: var(--text);
}

.service-card__price {
    margin: 0 0 14px;
    display: grid;
    gap: 4px;
}

.service-card__price strong {
    font-size: 22px;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--text);
}

.service-card__price span {
    display: block;
    font-size: var(--text-caption-1, 12px);
    line-height: 1.35;
    color: var(--text-icon);
}

.service-card__lead {
    margin: 0 0 14px;
    font-size: var(--text-footnote);
    line-height: 1.45;
    color: var(--muted);
}

.service-card__block {
    flex: 1 1 auto;
}

.service-card__block h3 {
    margin: 0 0 8px;
    font-size: var(--text-footnote);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
}

.service-card__block ul {
    margin: 0 0 14px;
    padding-left: 1.15em;
}

.service-card__block li {
    margin: 0 0 7px;
    font-size: var(--text-footnote);
    line-height: 1.4;
    color: var(--text);
}

.service-card__block li:last-child {
    margin-bottom: 0;
}

.service-card__result,
.service-card__bonus,
.service-card__limit {
    margin: 0 0 10px;
    font-size: var(--text-footnote);
    line-height: 1.4;
    color: var(--muted);
}

.service-card__bonus {
    color: var(--text);
}

.service-card__limit {
    font-size: var(--text-caption-1, 12px);
    color: var(--text-icon);
}

.service-card__cta.hero-consult-btn {
    width: 100%;
    margin-top: auto;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
}

.services-disclaimer {
    margin: 22px 0 0;
    padding: 16px 2px 0;
    border-top: 0.5px solid var(--sheet-row-stroke);
    max-width: 52em;
}

.services-disclaimer p {
    margin: 0 0 8px;
    font-size: var(--text-caption-1, 12px);
    line-height: 1.4;
    color: var(--text-icon);
}

.services-disclaimer p:last-child,
.services-disclaimer__contact {
    margin-bottom: 0;
}

.services-disclaimer a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(var(--primary-rgb), 0.35);
}

/* Услуги: без «дыры» между «Вопросы» и подвалом */
body.page-services .container {
    flex: 0 0 auto;
    padding-bottom: 8px;
}

body.page-services .services-page {
    padding-bottom: 0;
}

body.page-services .services-disclaimer {
    margin-top: 20px;
    padding-top: 14px;
    padding-bottom: 0;
}

body.page-services .site-footer {
    margin-top: 12px;
}

@media (min-width: 901px) {
    .services-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
    }

    .service-card {
        padding: 22px 18px 18px;
    }

    .service-card__title {
        font-size: 18px;
        line-height: 1.28;
    }

    .service-card__price strong {
        font-size: 22px;
    }

    .service-card__lead,
    .service-card__block li,
    .service-card__result,
    .service-card__bonus {
        font-size: 13px;
        line-height: 1.4;
    }

    .service-card__cta.hero-consult-btn {
        min-height: 42px;
        padding: 11px 16px;
        font-size: var(--text-footnote);
    }
}

@media (max-width: 900px) {
    .services-page {
        padding-bottom: 12px;
    }
}

.footer-brand .logo.logo--with-mark {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.footer-aside {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px 36px;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.footer-nav a,
.footer-nav__btn {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--text-subhead);
    font-weight: var(--weight-medium);
    letter-spacing: var(--track-headline);
    transition: color var(--ui-transition-fast);
}

.footer-nav a:hover,
.footer-nav__btn:hover {
    color: var(--primary);
}

.footer-nav a.active {
    color: var(--primary);
}

.footer-nav__btn:focus-visible,
.footer-nav a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
    outline-offset: 3px;
    border-radius: 4px;
}

.logo--footer {
    -webkit-touch-callout: none;
    touch-action: manipulation;
    user-select: none;
}

@media (max-width: 960px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .footer-aside {
        width: 100%;
        justify-content: flex-start;
    }
}

/* --- Главная / лента: ослабить «вес» карточек относительно hero --- */
body.page-feed #posts.post-grid {
    margin-top: 0;
}

body.page-feed #posts.post-grid > .post-card-link.card,
body.page-feed #posts.feed-rows .post-card-link.card {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

body.page-feed #posts.post-grid > .post-card-link.card:hover,
body.page-feed #posts.feed-rows .post-card-link.card:hover {
    box-shadow: var(--card-shadow-hover);
}

body.page-feed #posts.post-grid > .post-card-link .post-title,
body.page-feed #posts.feed-rows .post-card-link .post-title {
    font-size: var(--text-title-3);
    font-weight: 600;
    letter-spacing: -0.018em;
    color: var(--text-strong);
}

body.page-feed #posts.post-grid > .post-card-link .post-excerpt,
body.page-feed #posts.feed-rows .post-card-link .post-excerpt {
    color: var(--text-feed);
}

body.page-feed #posts.post-grid > .post-card-link .read-more,
body.page-feed #posts.feed-rows .post-card-link .read-more {
    font-size: var(--text-subhead);
    font-weight: 600;
}

body.page-feed #posts.post-grid > .post-card-link .meta,
body.page-feed #posts.feed-rows .post-card-link .meta {
    color: var(--text-soft);
}

body.page-feed #posts.post-grid > .myth-card,
body.page-feed #posts.feed-rows .myth-card {
    background: transparent;
    box-shadow: none;
}

body.page-feed #posts.post-grid > .myth-card .myth-card-front,
body.page-feed #posts.post-grid > .myth-card .myth-card-back,
body.page-feed #posts.feed-rows .myth-card .myth-card-front,
body.page-feed #posts.feed-rows .myth-card .myth-card-back {
    background: var(--card-bg);
    box-shadow: var(--card-shadow);
}

body.page-feed #posts.post-grid > .myth-card:hover,
body.page-feed #posts.feed-rows .myth-card:hover {
    transform: translateY(-1px);
}

body.page-feed #posts.post-grid > .myth-card:hover .myth-card-front,
body.page-feed #posts.post-grid > .myth-card:hover .myth-card-back,
body.page-feed #posts.feed-rows .myth-card:hover .myth-card-front,
body.page-feed #posts.feed-rows .myth-card:hover .myth-card-back {
    box-shadow: var(--card-shadow-hover);
}

body.page-feed #posts.post-grid > .myth-card .post-title,
body.page-feed #posts.feed-rows .myth-card .post-title {
    font-size: var(--text-title-3);
    font-weight: 600;
    letter-spacing: -0.018em;
}

body.page-feed #posts.post-grid > .myth-card .myth-card-front.no-cover .post-title,
body.page-feed #posts.feed-rows .myth-card .myth-card-front.no-cover .post-title {
    color: var(--text-strong);
}

/* --- Админка: строка поста — текст сверху, действия сеткой одинаковой ширины --- */
body.admin-app .post-admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
    border: 1px solid var(--shadow-ink-md);
    background: rgba(255, 255, 255, 0.88);
}

body.admin-app .post-admin-row .actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 12px 0 0;
    border: 0;
    border-top: 1px solid var(--border-lg);
    flex-shrink: 0;
    align-self: stretch;
}

body.admin-app .post-admin-row .actions > * {
    min-width: 0;
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

body.admin-app .post-admin-row .actions .badge {
    font-weight: 600;
    min-height: 40px;
    padding: 4px 8px;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}

body.admin-app .post-admin-row .actions .link-btn {
    width: 100%;
    min-height: 40px;
    padding: 0 8px;
    font-size: var(--text-subhead);
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

body.admin-app .post-admin-row .actions form {
    display: flex;
    width: 100%;
}

body.admin-app .post-admin-row .actions form .link-btn {
    flex: 1;
    width: 100%;
    min-height: 40px;
}

.admin-stories {
    margin-top: 18px;
}

.admin-stories-form {
    margin-bottom: 18px;
}

.admin-stories-choices-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 16px;
}

.admin-stories-choices-label > .hint {
    margin: 0;
}

.admin-stories-choices {
    width: 100%;
    min-height: 160px;
    resize: vertical;
    box-sizing: border-box;
    font-family: var(--font-sans);
    font-size: var(--text-subhead);
    line-height: 1.45;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-md);
    background: #fff;
    color: var(--text);
}

.admin-stories-cover-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-stories-cover-preview img,
.admin-stories-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.admin-stories-cover-preview img {
    width: 72px;
    height: 72px;
}

.admin-stories-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 8px;
}

.admin-stories-list {
    margin-top: 8px;
    border-top: 1px solid var(--border);
    padding-top: 8px;
}

.admin-stories-list-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

@media (max-width: 720px) {
    body.admin-app .post-admin-row .actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.hero--compact {
    padding-bottom: var(--hero-compact-pad-bottom);
    /* Тот же зазор до контента, что у обычного hero (кнопка → карточки / результаты) */
    margin-bottom: var(--hero-margin-bottom);
}

.hero--compact .hero-content {
    max-width: var(--hero-compact-content-max);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 900px) {
    .main-nav {
        gap: 8px;
    }
}

/* --- Таблицы в статьях и редакторе --- */
.post-content .post-table-wrap,
.myth-content .post-table-wrap {
    margin: 20px 0;
    border: 1px solid var(--border-md);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 24px rgba(17, 17, 19, 0.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.post-table {
    width: 100%;
    min-width: 280px;
    border-collapse: collapse;
    font-size: var(--text-body);
    line-height: 1.5;
}

.post-table th,
.post-table td {
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    color: var(--text-secondary);
}

.post-table th {
    background: rgba(43, 33, 35, 0.04);
    color: var(--text-strong);
    font-size: var(--text-subhead);
    font-weight: 600;
}

.post-table tr:last-child th,
.post-table tr:last-child td {
    border-bottom: 0;
}

.post-table th:last-child,
.post-table td:last-child {
    border-right: 0;
}

.post-table tbody tr:nth-child(even) td {
    background: rgba(43, 33, 35, 0.02);
}

.editor-table-wrap {
    margin: 12px 0;
    border: 1px solid var(--border-md);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(17, 17, 19, 0.06);
    overflow: hidden;
}

.editor-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: rgba(43, 33, 35, 0.03);
}

.editor-table-toolbar button {
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0 0 0 1px var(--border-md);
    font-size: var(--text-footnote);
    font-weight: 500;
    color: var(--text-label);
    cursor: pointer;
}

.editor-table-toolbar button:hover {
    background: #fff;
}

.editor-table-toolbar button.is-active {
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--primary-ring-stroke), 0 0 0 3px var(--primary-ring);
    color: var(--text-strong);
}

.editor-table-delete {
    margin-left: auto;
}

.editor-table-segment {
    display: inline-flex;
    padding: 2px;
    border-radius: 8px;
    background: rgba(43, 33, 35, 0.06);
}

.editor-table-segment button {
    box-shadow: none;
    background: transparent;
}

.editor-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rich-editor-table {
    width: 100%;
    min-width: 280px;
    border-collapse: collapse;
    font-size: var(--text-body);
    line-height: 1.5;
}

.rich-editor-table th,
.rich-editor-table td {
    min-width: 88px;
    padding: 12px 14px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    color: var(--text-secondary);
    outline: none;
}

.rich-editor-table th {
    background: rgba(43, 33, 35, 0.04);
    color: var(--text-strong);
    font-size: var(--text-subhead);
    font-weight: 600;
}

.rich-editor-table tr:last-child th,
.rich-editor-table tr:last-child td {
    border-bottom: 0;
}

.rich-editor-table th:last-child,
.rich-editor-table td:last-child {
    border-right: 0;
}

.rich-editor-table tbody tr:nth-child(even) td {
    background: rgba(43, 33, 35, 0.02);
}

.rich-editor-table th:focus,
.rich-editor-table td:focus {
    box-shadow: inset 0 0 0 2px var(--primary-ring-stroke), inset 0 0 0 5px var(--primary-ring);
}

.editor-table-grid-popover {
    position: absolute;
    z-index: 1200;
    padding: 10px 12px 12px;
    border-radius: 12px;
    border: 1px solid var(--border-md);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 16px 40px rgba(17, 17, 19, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.editor-table-grid-label {
    margin: 0 0 8px;
    font-size: var(--text-footnote);
    color: var(--text-hint);
}

.editor-table-grid {
    display: grid;
    grid-template-columns: repeat(5, 20px);
    gap: 4px;
}

.editor-table-grid-cell {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--border-md);
    border-radius: 4px;
    background: rgba(43, 33, 35, 0.04);
    cursor: pointer;
}

.editor-table-grid-cell.is-active {
    background: rgba(var(--primary-rgb), 0.35);
    border-color: rgba(var(--primary-rgb), 0.5);
}

/* --- Сканер калорий по фото --- */
.calorie-scanner {
    display: grid;
    gap: 20px;
    max-width: 560px;
    margin: 0 auto;
}

.calorie-scanner-panel {
    position: relative;
    display: grid;
    gap: 16px;
    padding: 20px;
}

.calorie-scanner-preview[hidden],
.calorie-scanner-status[hidden],
.calorie-scanner-result[hidden],
.calorie-scanner-note[hidden],
.calorie-scanner-items-wrap[hidden],
.calorie-scanner-dressing[hidden],
.calorie-scanner-confidence[hidden],
.calorie-scanner-copy[hidden] {
    display: none !important;
}

.calorie-scanner-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.calorie-scanner-dropzone {
    display: grid;
    gap: 6px;
    place-items: center;
    min-height: 160px;
    padding: 24px 16px;
    border-radius: 14px;
    border: 1.5px dashed var(--border-xl);
    background: rgba(43, 33, 35, 0.03);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.calorie-scanner-dropzone strong {
    font-size: var(--text-headline);
    font-weight: 600;
    color: var(--text-strong);
}

.calorie-scanner-dropzone span {
    font-size: var(--text-subhead);
    color: var(--text-hint);
}

.calorie-scanner-dropzone:hover,
.calorie-scanner-dropzone.is-dragover,
.calorie-scanner-dropzone:focus-visible {
    border-color: rgba(var(--primary-rgb), 0.45);
    background: rgba(var(--primary-rgb), 0.06);
    outline: none;
}

.calorie-scanner-preview {
    display: grid;
    gap: 12px;
}

.calorie-scanner-preview img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 12px;
    background: rgba(43, 33, 35, 0.04);
}

.calorie-scanner-clear {
    justify-self: start;
}

.calorie-scanner-hint-field {
    display: grid;
    gap: 8px;
}

.calorie-scanner-hint-label {
    font-size: var(--text-subhead);
    color: var(--text-strong);
    font-weight: 500;
}

.calorie-scanner-hint-label em {
    font-style: normal;
    font-weight: 400;
    color: var(--text-hint);
}

.calorie-scanner-hint-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-xl);
    background: var(--surface, #fff);
    color: var(--text-strong);
    font: inherit;
    font-size: var(--text-body);
}

.calorie-scanner-hint-input::placeholder {
    color: var(--text-hint);
}

.calorie-scanner-hint-input:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.calorie-scanner-submit {
    width: 100%;
    min-height: 48px;
}

.calorie-scanner-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.calorie-scanner-status[data-kind="error"] {
    color: #c0392b;
}

.calorie-scanner-status[data-kind="ok"] {
    color: var(--text-secondary);
}

.calorie-scanner-status[data-kind="loading"] {
    color: var(--text-hint);
}

.calorie-scanner-progress {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

.calorie-scanner-progress[hidden] {
    display: none;
}

.calorie-scanner-progress-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.12);
    overflow: hidden;
}

.calorie-scanner-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        rgba(var(--primary-rgb), 0.75),
        var(--primary),
        rgba(var(--primary-rgb), 0.85)
    );
    background-size: 200% 100%;
    transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    animation: calorie-scanner-progress-sheen 1.4s linear infinite;
}

@keyframes calorie-scanner-progress-sheen {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calorie-scanner-progress-bar {
        animation: none;
        transition: none;
    }
}

.calorie-scanner-progress-label {
    margin: 0;
    font-size: var(--text-footnote);
    color: var(--text-hint);
}

.calorie-scanner-result {
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid var(--border-md);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(17, 17, 19, 0.06);
}

.calorie-scanner-dish {
    margin: 0;
    font-size: var(--text-title-3);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-strong);
}

.calorie-scanner-tips {
    margin: 0;
    font-size: var(--text-footnote);
    line-height: 1.4;
}

.calorie-scanner-result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 12px;
}

.calorie-scanner-confidence {
    font-size: var(--text-footnote);
    color: var(--text-hint);
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(43, 33, 35, 0.06);
}

.calorie-scanner-confidence[data-level="low"] {
    color: #9a5b00;
    background: rgba(234, 179, 8, 0.16);
}

.calorie-scanner-confidence[data-level="high"] {
    color: #1f6b3a;
    background: rgba(34, 160, 90, 0.14);
}

.calorie-scanner-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.calorie-scanner-metric {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(43, 33, 35, 0.04);
}

.calorie-scanner-metric--accent {
    background: rgba(var(--primary-rgb), 0.1);
    grid-column: 1 / -1;
}

.calorie-scanner-metric-label {
    font-size: var(--text-footnote);
    color: var(--text-hint);
}

.calorie-scanner-metric strong {
    font-size: var(--text-headline);
    font-weight: 600;
    color: var(--text-strong);
}

.calorie-scanner-dressing {
    display: grid;
    gap: 8px;
}

.calorie-scanner-dressing-label {
    font-size: var(--text-subhead);
    font-weight: 500;
    color: var(--text-strong);
}

.calorie-scanner-dressing-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.calorie-scanner-dressing-btn {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-xl);
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-strong);
    font: inherit;
    font-size: var(--text-footnote);
    line-height: 1.25;
    cursor: pointer;
    text-align: center;
}

.calorie-scanner-dressing-btn.is-active {
    border-color: rgba(var(--primary-rgb), 0.45);
    background: rgba(var(--primary-rgb), 0.1);
    font-weight: 600;
}

.calorie-scanner-items-wrap {
    display: grid;
    gap: 8px;
}

.calorie-scanner-items-title {
    margin: 0;
    font-size: var(--text-subhead);
    font-weight: 600;
    color: var(--text-strong);
}

.calorie-scanner-items-title em {
    font-style: normal;
    font-weight: 400;
    color: var(--text-hint);
}

.calorie-scanner-items {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    display: grid;
    gap: 8px;
}

.calorie-scanner-item {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(43, 33, 35, 0.04);
}

.calorie-scanner-item-name {
    font-size: var(--text-subhead);
    font-weight: 500;
    color: var(--text-strong);
}

.calorie-scanner-item-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.calorie-scanner-item-weight {
    width: 5.5rem;
    box-sizing: border-box;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid var(--border-xl);
    background: #fff;
    color: var(--text-strong);
    font: inherit;
    font-size: var(--text-subhead);
}

.calorie-scanner-item-weight:focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.45);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.calorie-scanner-item-unit {
    color: var(--text-hint);
    font-size: var(--text-subhead);
}

.calorie-scanner-item-kcal {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: var(--text-subhead);
    font-variant-numeric: tabular-nums;
}

.calorie-scanner-copy {
    justify-self: start;
}

.calorie-scanner-disclaimer {
    margin: 0;
}

.calorie-scanner.is-busy .calorie-scanner-dropzone {
    pointer-events: none;
    opacity: 0.7;
}

/* —— Stories rail + viewer —— */
.stories-rail {
    margin: -20px 0 28px;
    padding: 0 2px;
    display: flex;
    justify-content: center;
}

.stories-rail__track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 4px 10px;
    max-width: 100%;
    width: max-content;
    margin: 0 auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.stories-rail__track::-webkit-scrollbar {
    display: none;
}

.stories-ring {
    flex: 0 0 auto;
    width: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    scroll-snap-align: start;
    -webkit-tap-highlight-color: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
}

.stories-ring__avatar {
    position: relative;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    padding: 2px;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    box-shadow:
        0 0 0 1.5px var(--primary-ring-stroke),
        0 0 0 3.5px rgba(255, 255, 255, 0.92),
        0 4px 14px rgba(var(--ink-rgb), 0.06);
    transition: transform 100ms ease-out, box-shadow 140ms ease;
}

.stories-ring.is-seen .stories-ring__avatar {
    box-shadow:
        0 0 0 1.5px rgba(var(--ink-rgb), 0.16),
        0 0 0 3.5px rgba(255, 255, 255, 0.92),
        0 2px 10px rgba(var(--ink-rgb), 0.04);
}

.stories-ring.is-pressed .stories-ring__avatar {
    transform: scale(0.94);
}

.stories-ring__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    background: var(--surface-subtle);
    border: 0;
    box-sizing: border-box;
    transition: opacity 0.45s ease;
}

.stories-ring__label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 104px;
    font-size: var(--text-caption-1);
    line-height: var(--lh-caption);
    letter-spacing: var(--track-footnote);
    color: var(--text-soft);
    font-weight: var(--weight-medium);
}

@media (min-width: 768px) {
    .stories-rail__track {
        gap: 22px;
    }

    .stories-ring {
        width: 120px;
    }

    .stories-ring__avatar {
        width: 94px;
        height: 94px;
    }

    .stories-ring__label {
        max-width: 120px;
    }
}

.stories-ring:focus-visible {
    outline: none;
}

.stories-ring:focus-visible .stories-ring__avatar {
    box-shadow:
        0 0 0 1.5px var(--primary),
        0 0 0 4px rgba(var(--primary-rgb), 0.22),
        0 4px 14px rgba(var(--ink-rgb), 0.06);
}

body.stories-open {
    overflow: hidden;
}

.stories-viewer {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: grid;
    place-items: center;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

.stories-viewer[hidden] {
    display: none !important;
}

.stories-viewer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(12, 10, 12, calc(0.72 * var(--stories-scrim, 1)));
    border: 0;
    padding: 0;
    cursor: pointer;
}

.stories-viewer__panel {
    position: relative;
    z-index: 1;
    width: min(420px, 100vw);
    height: min(760px, 100dvh);
    max-height: 100dvh;
    border-radius: 22px;
    overflow: hidden;
    background: #121014;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    touch-action: none;
    will-change: transform, opacity;
}

.stories-viewer__progress {
    display: flex;
    gap: 4px;
    padding: 10px 12px 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

.stories-viewer__bar {
    flex: 1;
    height: 2.5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    overflow: hidden;
}

.stories-viewer__bar > i {
    display: block;
    width: 0%;
    height: 100%;
    background: #fff;
    border-radius: inherit;
}

.stories-viewer__chrome {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 10px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
}

.stories-viewer__meta {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #fff;
}

.stories-viewer__type {
    font-size: var(--text-caption-2);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    opacity: 0.55;
    font-weight: var(--weight-semibold);
}

.stories-viewer__title {
    font-size: var(--text-subhead);
    line-height: var(--lh-subhead);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-headline);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.92;
}

.stories-viewer__close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    cursor: pointer;
    transition: transform 100ms ease-out, background 120ms ease;
}

.stories-viewer__close:active {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.28);
}

.stories-viewer__stage {
    position: relative;
    flex: 1;
    min-height: 0;
    background: #0c0a0c;
}

.stories-viewer__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.stories-viewer__footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 48px 16px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    display: flex;
    justify-content: center;
}

.stories-viewer__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: var(--text-callout);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--track-headline);
    text-decoration: none;
    box-shadow: none;
    transition: transform 100ms ease-out, background 120ms ease, opacity 120ms ease;
}

.stories-viewer__cta:hover {
    background: var(--primary-hover);
    color: #fff;
}

.stories-viewer__cta:active {
    transform: scale(0.97);
}

.stories-viewer__footer:has(.stories-viewer__choices:not([hidden])) {
    padding: 40px 12px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 40%, transparent);
}

.stories-viewer__cta[hidden] {
    display: none;
}

.stories-viewer__choices {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    max-width: 420px;
    overflow: visible;
    pointer-events: auto;
}

.stories-viewer__choices[hidden] {
    display: none;
}

.stories-viewer__choice {
    display: block;
    width: 100%;
    margin: 0;
    padding: 11px 13px;
    border: 0.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-subhead);
    line-height: 1.32;
    font-weight: var(--weight-regular);
    letter-spacing: var(--track-headline);
    text-align: left;
    cursor: pointer;
    transition: background 120ms ease, transform 100ms ease-out;
}

.stories-viewer__choice:hover {
    background: rgba(255, 255, 255, 0.82);
}

.stories-viewer__choice:active {
    transform: scale(0.985);
}

.stories-viewer__choice:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .stories-ring__avatar,
    .stories-viewer__close,
    .stories-viewer__cta {
        transition: none;
    }

    .stories-viewer__panel {
        will-change: auto;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .stories-viewer__close {
        background: rgba(40, 40, 40, 0.92);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}


@media (min-width: 520px) {
    .calorie-scanner-dressing-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .calorie-scanner-item {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}



/* --- Результаты клиентов --- */
body.page-client-results .container {
    padding-bottom: 48px;
}

body.page-client-results .client-results {
    margin-top: 0;
}

.client-results__head {
    margin: 0 0 22px;
}

.client-results__title {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 600;
    letter-spacing: var(--track-title);
    font-optical-sizing: auto;
}

.client-results__lead {
    margin: 0;
    color: var(--text-icon);
    font-size: var(--text-callout, 15px);
    line-height: 1.45;
}

.client-results--embed {
    margin-top: 28px;
    padding-top: 8px;
}

/* Кейсы: голые изображения + свайп/стрелки, без «карточной» рамки */
.client-results__grid {
    display: grid;
    grid-template-columns: minmax(0, 236px);
    gap: 14px;
    align-items: start;
    justify-content: center;
}

@media (min-width: 640px) {
    .client-results__grid {
        grid-template-columns: repeat(2, minmax(0, 280px));
        gap: 18px;
        justify-content: start;
    }
}

@media (min-width: 960px) {
    .client-results__grid {
        grid-template-columns: repeat(3, minmax(0, 260px));
        gap: 20px;
    }
}

.client-results__carousel {
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}

.client-results__carousel:active {
    cursor: grabbing;
}

.client-results__carousel:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), 0.4);
    outline-offset: 3px;
}

.client-results__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
    -webkit-user-drag: none;
}

.client-results__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: rgba(43, 33, 35, 0.9);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

.client-results__nav:hover {
    background: rgba(255, 255, 255, 0.94);
}

.client-results__nav:active {
    transform: translateY(-50%) scale(0.96);
}

.client-results__nav--prev {
    left: 6px;
}

.client-results__nav--next {
    right: 6px;
}

.client-results__count {
    position: absolute;
    right: 8px;
    bottom: 8px;
    z-index: 3;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(20, 16, 17, 0.45);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}

@media (max-width: 700px) {
    .client-results__nav {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
}