/*
 * XCake frontend styles
 *
 * This is intentionally plain CSS for the first production version.
 * No Node.js build chain is required on the small shared VPS.
 *
 * A frontend framework can be introduced later without changing
 * the backend API architecture.
 */

* {
    box-sizing: border-box;
}

:root {
    --background: #fffaf6;
    --surface: #ffffff;
    --surface-soft: #fff4ed;

    --text: #28231f;
    --muted: #786f68;

    --accent: #e8643d;
    --accent-hover: #d95631;
    --accent-soft: #ffebe2;

    --border: #eee2d9;

    --success: #3b8a58;

    --shadow:
        0 18px 55px rgba(70, 44, 25, 0.07);

    --radius-large: 28px;
    --radius-medium: 20px;
    --radius-small: 13px;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    min-height: 100vh;

    color: var(--text);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at 85% 0%,
            #ffe7d7 0,
            transparent 30%
        ),
        var(--background);
}

a {
    color: inherit;
}

.site-header {
    width: min(1180px, calc(100% - 36px));

    margin: 0 auto;

    padding: 25px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 25px;
}

.logo {
    color: var(--text);

    font-size: 28px;
    font-weight: 850;

    letter-spacing: -1.3px;

    text-decoration: none;
}

.logo-accent {
    color: var(--accent);
}

.header-note {
    padding: 8px 13px;

    color: var(--muted);

    background: rgba(255,255,255,.8);

    border: 1px solid var(--border);
    border-radius: 999px;

    font-size: 13px;
}

.container {
    width: min(1180px, calc(100% - 36px));
    margin: 0 auto;
}


/* ==========================================================
   Recipe
   ========================================================== */

.recipe-page {
    padding: 35px 0 100px;
}

.breadcrumbs {
    margin-bottom: 28px;

    color: var(--muted);

    font-size: 14px;
}

.breadcrumbs a {
    text-decoration: none;
}

.breadcrumbs a:hover {
    color: var(--accent);
}


.recipe-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(280px, .7fr);

    gap: 25px;
}

.recipe-intro,
.recipe-summary {
    background: rgba(255,255,255,.88);

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow);
}

.recipe-intro {
    padding: clamp(28px, 5vw, 52px);
}

.recipe-summary {
    padding: 28px;
}


.recipe-category-list {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 18px;
}

.recipe-category {
    padding: 7px 11px;

    color: var(--accent);

    background: var(--accent-soft);

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
}


.recipe-title {
    margin: 0;

    font-size: clamp(44px, 7vw, 72px);
    line-height: 1;

    letter-spacing: -3px;
}

.recipe-description {
    max-width: 760px;

    margin: 25px 0 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.7;
}


.recipe-meta {
    margin: 30px 0 0;

    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}

.recipe-meta-item {
    padding: 9px 13px;

    background: var(--surface-soft);

    border-radius: 12px;

    color: var(--muted);

    font-size: 14px;
}


.summary-title {
    margin: 0 0 20px;

    font-size: 16px;

    color: var(--muted);
}

.summary-big {
    margin-bottom: 22px;

    font-size: 52px;
}

.summary-row {
    padding: 13px 0;

    display: flex;
    justify-content: space-between;

    gap: 15px;

    border-top: 1px solid var(--border);

    font-size: 14px;
}

.summary-row span {
    color: var(--muted);
}

.summary-row strong {
    text-align: right;
}


/* ==========================================================
   Recipe body
   ========================================================== */

.recipe-grid {
    margin-top: 28px;

    display: grid;

    grid-template-columns:
        minmax(280px, .72fr)
        minmax(0, 1.28fr);

    gap: 25px;

    align-items: start;
}

.recipe-card {
    padding: clamp(24px, 4vw, 36px);

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow);
}

.recipe-card-title {
    margin: 0 0 25px;

    font-size: 27px;
    letter-spacing: -1px;
}


/* Ingredients */

.ingredient-group-title {
    margin: 25px 0 11px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 750;

    text-transform: uppercase;
    letter-spacing: .8px;
}

.ingredient-group-title:first-child {
    margin-top: 0;
}

.ingredient-row {
    padding: 13px 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    border-bottom: 1px solid var(--border);
}

.ingredient-row:last-child {
    border-bottom: 0;
}

.ingredient-name {
    line-height: 1.45;
}

.ingredient-note {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;
}

.ingredient-amount {
    flex-shrink: 0;

    font-weight: 750;

    text-align: right;
}


/* Steps */

.recipe-step {
    position: relative;

    padding: 0 0 32px 54px;
}

.recipe-step:last-child {
    padding-bottom: 0;
}

.step-number {
    position: absolute;

    left: 0;
    top: 0;

    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    color: #fff;

    background: var(--accent);

    border-radius: 50%;

    font-weight: 800;
}

.step-line {
    position: absolute;

    left: 17px;
    top: 42px;
    bottom: 6px;

    width: 2px;

    background: var(--border);
}

.recipe-step:last-child .step-line {
    display: none;
}

.step-title {
    margin: 4px 0 8px;

    font-size: 19px;
}

.step-description {
    margin: 0;

    color: var(--muted);

    line-height: 1.65;
}


/* Tags/source */

.recipe-footer-card {
    margin-top: 25px;
}

.tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.tag {
    padding: 7px 11px;

    color: var(--muted);

    background: #f7f2ee;

    border-radius: 999px;

    font-size: 13px;
}

.source {
    margin-top: 22px;

    padding-top: 20px;

    border-top: 1px solid var(--border);

    color: var(--muted);

    font-size: 13px;

    line-height: 1.6;
}

.source a {
    color: var(--accent);

    word-break: break-word;
}


/* ==========================================================
   Loading / error
   ========================================================== */

.recipe-loading {
    padding: 120px 20px;

    text-align: center;

    color: var(--muted);
}

.loader {
    width: 42px;
    height: 42px;

    margin: 0 auto 20px;

    border: 4px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;

    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.recipe-error {
    max-width: 650px;

    margin: 90px auto;

    padding: 40px;

    text-align: center;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow);
}

.recipe-error h1 {
    margin-top: 0;
}

.recipe-error a {
    color: var(--accent);
}


/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 820px) {

    .recipe-hero,
    .recipe-grid {
        grid-template-columns: 1fr;
    }

    .recipe-summary {
        order: 2;
    }

    .recipe-title {
        letter-spacing: -2px;
    }
}


@media (max-width: 520px) {

    .site-header,
    .container {
        width: min(100% - 24px, 1180px);
    }

    .header-note {
        display: none;
    }

    .recipe-page {
        padding-top: 18px;
    }

    .recipe-intro,
    .recipe-summary,
    .recipe-card {
        border-radius: 20px;
    }

    .recipe-title {
        font-size: 45px;
    }

    .recipe-description {
        font-size: 16px;
    }
}


/* ==========================================================
   Dynamic homepage
   ========================================================== */

.home-main {
    padding: 55px 0 100px;
}

.home-hero {
    max-width: 820px;
}

.home-eyebrow {
    display: inline-block;

    margin-bottom: 18px;
    padding: 7px 11px;

    color: var(--accent);
    background: var(--accent-soft);

    border-radius: 999px;

    font-size: 13px;
    font-weight: 750;
}

.home-title {
    margin: 0;

    font-size: clamp(52px, 8vw, 92px);
    line-height: .96;

    letter-spacing: -4px;
}

.home-title-accent {
    color: var(--accent);
}

.home-lead {
    max-width: 660px;

    margin: 27px 0 0;

    color: var(--muted);

    font-size: 19px;
    line-height: 1.65;
}

.home-section {
    margin-top: 75px;
}

.home-section-head {
    margin-bottom: 22px;

    display: flex;
    align-items: end;
    justify-content: space-between;

    gap: 20px;
}

.home-section-title {
    margin: 0;

    font-size: 30px;
    letter-spacing: -1px;
}

.home-section-note {
    color: var(--muted);
    font-size: 14px;
}

.home-recipe-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(260px, 1fr)
        );

    gap: 20px;
}

.home-recipe-card {
    overflow: hidden;

    color: inherit;
    text-decoration: none;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 23px;

    box-shadow: var(--shadow);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.home-recipe-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 22px 65px
        rgba(70,44,25,.11);
}

.home-recipe-image {
    aspect-ratio: 16 / 10;

    overflow: hidden;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #ffe6d6,
            #fff5ed
        );
}

.home-recipe-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.home-recipe-placeholder {
    font-size: 72px;
}

.home-recipe-body {
    padding: 21px;
}

.home-recipe-title {
    margin: 0;

    font-size: 21px;
    letter-spacing: -.5px;
}

.home-recipe-description {
    margin: 10px 0 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.5;
}

.home-recipe-meta {
    margin-top: 17px;

    display: flex;
    justify-content: space-between;
    gap: 12px;

    color: var(--muted);

    font-size: 12px;
}

.home-empty {
    color: var(--muted);
}


@media (max-width: 520px) {

    .home-main {
        padding-top: 35px;
    }

    .home-title {
        letter-spacing: -2.5px;
    }

    .home-lead {
        font-size: 17px;
    }

    .home-section {
        margin-top: 55px;
    }
}


/* ==========================================================
   XCake branding v0.0.10
   ========================================================== */

.brand-link {
    display: inline-flex;
    align-items: center;

    line-height: 0;
}

.brand-logo {
    display: block;

    width: auto;
    height: 56px;

    max-width: min(260px, 62vw);

    object-fit: contain;
}


/* ==========================================================
   Real recipe cover photograph
   ========================================================== */

.recipe-cover {
    margin: 0 0 28px;

    width: 100%;

    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow);
}

.recipe-cover img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 760px;

    object-fit: contain;

    background: #fff;
}


@media (max-width: 520px) {

    .brand-logo {
        height: 48px;
    }

    .recipe-cover {
        margin-bottom: 18px;

        border-radius: 20px;
    }

}


/* ==========================================================
   XCake public taxonomy v0.0.15
   ========================================================== */

.recipe-category,
.tag {
    text-decoration: none;

    transition:
        transform .15s ease,
        color .15s ease,
        background-color .15s ease;
}


.recipe-category:hover,
.tag:hover {
    transform:
        translateY(-1px);
}


.recipe-category:hover {
    color: #fff;

    background:
        var(--accent);
}


.tag:hover {
    color:
        var(--accent);

    background:
        var(--accent-soft);
}


/* ==========================================================
   Category / tag browse page
   ========================================================== */

.browse-page {
    padding:
        30px 0 100px;
}


.browse-hero {
    margin-bottom:
        34px;

    padding:
        clamp(
            28px,
            5vw,
            50px
        );

    background:
        rgba(
            255,
            255,
            255,
            .88
        );

    border:
        1px solid
        var(--border);

    border-radius:
        var(--radius-large);

    box-shadow:
        var(--shadow);
}


.browse-title {
    margin: 0;

    font-size:
        clamp(
            44px,
            7vw,
            72px
        );

    line-height: 1;

    letter-spacing:
        -3px;
}


.browse-count {
    margin:
        18px 0 0;

    color:
        var(--muted);

    font-size:
        15px;
}


.browse-grid {
    margin-top: 0;
}


@media (
    max-width: 520px
) {

    .browse-page {
        padding-top:
            18px;
    }


    .browse-hero {
        border-radius:
            20px;
    }


    .browse-title {
        font-size:
            44px;

        letter-spacing:
            -2px;
    }
}


/* ==========================================================
   Public catalogue — v0.0.16
   ========================================================== */

.brand-logo {
    display: block;
    width: 180px;
    max-width: 48vw;
    height: auto;
}

.catalog-home-link,
.home-section-link {
    color: var(--accent);
    font-weight: 750;
    text-decoration: none;
}

.catalog-home-link:hover,
.home-section-link:hover {
    color: var(--accent-hover);
}


.home-search {
    max-width: 760px;
    margin-top: 30px;

    display: flex;
    gap: 10px;
}

.home-search input {
    flex: 1;
    min-width: 0;

    padding: 16px 18px;

    color: var(--text);
    background: #fff;

    border: 1px solid var(--border);
    border-radius: 16px;

    outline: none;

    font: inherit;

    box-shadow: var(--shadow);
}

.home-search input:focus {
    border-color: var(--accent);
    box-shadow:
        0 0 0 4px rgba(232, 100, 61, .10),
        var(--shadow);
}

.home-search button,
.catalog-search-button {
    padding: 15px 21px;

    color: #fff;
    background: var(--accent);

    border: 0;
    border-radius: 16px;

    font: inherit;
    font-weight: 800;

    cursor: pointer;
}

.home-search button:hover,
.catalog-search-button:hover {
    background: var(--accent-hover);
}


.catalog-page {
    padding: 28px 0 100px;
}

.catalog-hero {
    padding: clamp(28px, 5vw, 54px);

    background: rgba(255,255,255,.88);

    border: 1px solid var(--border);
    border-radius: var(--radius-large);

    box-shadow: var(--shadow);
}

.catalog-title {
    max-width: 800px;

    margin: 8px 0 14px;

    font-size: clamp(40px, 7vw, 70px);
    line-height: 1.02;
    letter-spacing: -3px;
}

.catalog-lead {
    max-width: 700px;

    margin: 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.65;
}


.catalog-search-form {
    max-width: 800px;
    margin-top: 30px;

    display: flex;
    gap: 10px;
}

.catalog-search-box {
    flex: 1;
    min-width: 0;

    display: flex;
    align-items: center;

    padding: 0 16px;

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 16px;
}

.catalog-search-box:focus-within {
    border-color: var(--accent);

    box-shadow:
        0 0 0 4px rgba(232,100,61,.10);
}

.catalog-search-icon {
    margin-right: 9px;
}

.catalog-search-box input {
    width: 100%;

    padding: 16px 0;

    color: var(--text);
    background: transparent;

    border: 0;
    outline: 0;

    font: inherit;
}


.catalog-toolbar {
    margin-top: 20px;
    padding: 18px;

    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;

    background: rgba(255,255,255,.86);

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
}

.catalog-filter {
    min-width: 180px;

    display: grid;
    gap: 7px;
}

.catalog-filter > span {
    color: var(--muted);

    font-size: 12px;
    font-weight: 750;
}

.catalog-filter select {
    min-height: 44px;

    padding: 10px 12px;

    color: var(--text);
    background: #fff;

    border: 1px solid var(--border);
    border-radius: 12px;

    font: inherit;
    outline: none;
}

.catalog-filter select:focus {
    border-color: var(--accent);
}

.catalog-reset {
    min-height: 44px;

    padding: 10px 14px;

    color: var(--muted);
    background: transparent;

    border: 1px solid var(--border);
    border-radius: 12px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;
}

.catalog-reset:hover {
    color: var(--accent);
    background: var(--accent-soft);
}


.catalog-active-filters {
    margin-top: 16px;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.catalog-filter-chip {
    padding: 8px 11px;

    color: var(--accent-hover);
    background: var(--accent-soft);

    border: 0;
    border-radius: 999px;

    font: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}


.catalog-results-head {
    margin: 38px 0 18px;

    display: flex;
    align-items: end;
    justify-content: space-between;
}

.catalog-results-head h2 {
    margin: 0 0 5px;

    font-size: 30px;
    letter-spacing: -1px;
}

.catalog-count {
    margin: 0;
    color: var(--muted);
}

.catalog-grid {
    min-height: 180px;
}


.catalog-empty {
    grid-column: 1 / -1;

    padding: 60px 20px;

    text-align: center;

    color: var(--muted);

    background: rgba(255,255,255,.75);

    border: 1px solid var(--border);
    border-radius: var(--radius-large);
}

.catalog-empty-icon {
    margin-bottom: 10px;
    font-size: 44px;
}

.catalog-empty h3 {
    margin: 0 0 8px;

    color: var(--text);
    font-size: 24px;
}

.catalog-empty p {
    margin: 0;
}


.catalog-pagination {
    margin-top: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;
}

.catalog-page-button {
    padding: 11px 15px;

    color: var(--text);
    background: #fff;

    border: 1px solid var(--border);
    border-radius: 12px;

    font: inherit;
    font-weight: 750;

    cursor: pointer;
}

.catalog-page-button:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
}

.catalog-page-button:disabled {
    opacity: .4;
    cursor: default;
}

.catalog-page-info {
    color: var(--muted);
    font-size: 14px;
}


@media (max-width: 700px) {

    .home-search,
    .catalog-search-form {
        flex-direction: column;
    }

    .home-search button,
    .catalog-search-button {
        width: 100%;
    }

    .catalog-title {
        letter-spacing: -2px;
    }

    .catalog-toolbar {
        align-items: stretch;
    }

    .catalog-filter {
        width: 100%;
    }

    .catalog-reset {
        width: 100%;
    }

    .catalog-pagination {
        justify-content: space-between;
    }

    .catalog-page-info {
        text-align: center;
    }
}


/* ==========================================================
   XCake v0.0.17 — public navigation + category discovery
   ========================================================== */

.public-nav {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px;

    background: rgba(255,255,255,.78);
    border: 1px solid var(--border);
    border-radius: 999px;

    backdrop-filter: blur(12px);
}

.public-nav-link {
    padding: 8px 13px;

    color: var(--muted);
    border-radius: 999px;

    font-size: 13px;
    font-weight: 750;
    text-decoration: none;

    transition:
        background .15s ease,
        color .15s ease;
}

.public-nav-link:hover {
    color: var(--accent);
}

.public-nav-link-active {
    color: var(--text);
    background: #fff;

    box-shadow:
        0 3px 12px rgba(70,44,25,.07);
}


.home-categories-section {
    margin-top: 16px;
}

.home-section-kicker {
    margin-bottom: 5px;

    color: var(--accent);

    font-size: 12px;
    font-weight: 850;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.home-category-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 12px;
}


.home-category-card {
    min-width: 0;

    padding: 17px;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    gap: 13px;
    align-items: center;

    color: var(--text);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(255,247,241,.92)
        );

    border: 1px solid var(--border);
    border-radius: 19px;

    text-decoration: none;

    box-shadow:
        0 10px 30px rgba(70,44,25,.045);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

.home-category-card:hover {
    transform: translateY(-2px);

    border-color: #e5c9b8;

    box-shadow:
        0 17px 36px rgba(70,44,25,.08);
}


.home-category-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    background: var(--accent-soft);
    border-radius: 14px;

    font-size: 25px;
}


.home-category-content {
    min-width: 0;
}


.home-category-title {
    margin: 0 0 4px;

    overflow: hidden;

    font-size: 16px;
    font-weight: 820;

    text-overflow: ellipsis;
    white-space: nowrap;
}


.home-category-count {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}


.home-category-arrow {
    color: var(--accent);

    font-size: 20px;

    transition: transform .15s ease;
}

.home-category-card:hover
.home-category-arrow {
    transform: translateX(3px);
}


.home-recipe-meta {
    margin-top: auto;
    padding-top: 13px;

    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.home-recipe-meta span {
    padding: 5px 8px;

    color: var(--muted);
    background: var(--surface-soft);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 650;
}


@media (max-width: 900px) {

    .home-category-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }
}


@media (max-width: 600px) {

    .site-header {
        align-items: center;
        gap: 10px;
    }

    .brand-logo {
        width: 145px;
    }

    .public-nav {
        padding: 4px;
    }

    .public-nav-link {
        padding: 7px 10px;
        font-size: 12px;
    }

    .home-category-grid {
        grid-template-columns: 1fr;
    }

    .home-category-card {
        padding: 14px;
    }

    .home-category-icon {
        width: 44px;
        height: 44px;

        font-size: 23px;
    }
}


/* ==========================================================
   XCake v0.0.19B — публичные аккаунты
   ========================================================== */

/*
 * Общий пользовательский блок публичной шапки.
 *
 * Источником истины является GET /api/auth/me.
 * JavaScript никогда не получает session token напрямую:
 * authentication cookie защищена HttpOnly.
 *
 * Будущие Яндекс ID / VK ID / Google также должны завершаться
 * созданием обычной XCake session, поэтому публичной шапке
 * не требуется знать конкретный способ входа.
 */

.public-auth {
    min-width: 74px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.public-auth-login,
.public-user-button {
    color: var(--text);
    text-decoration: none;
}

.public-auth-login {
    padding: 9px 14px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 3px 12px rgba(70,44,25,.05);
}

.public-auth-login:hover {
    color: var(--accent);
    border-color: #e9cbbb;
}

.public-auth-loading {
    color: var(--muted);
}

.public-user-menu {
    display: flex;
    align-items: center;
    gap: 7px;
}

.public-user-button {
    max-width: 210px;
    padding: 5px 10px 5px 5px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
}

.public-user-avatar {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    border-radius: 50%;
    font-size: 14px;
}

.public-user-name {
    overflow: hidden;
    font-size: 13px;
    font-weight: 780;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.public-logout-button {
    padding: 8px 10px;
    color: var(--muted);
    background: transparent;
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.public-logout-button:hover {
    color: var(--accent);
    background: var(--accent-soft);
}


/* Вход и регистрация */

.auth-page {
    padding: 45px 0 100px;
    display: flex;
    justify-content: center;
}

.auth-card {
    width: min(100%, 520px);
    padding: clamp(28px, 5vw, 46px);
    background: rgba(255,255,255,.94);
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}

.auth-card-wide {
    width: min(100%, 650px);
}

.auth-eyebrow {
    display: inline-block;
    margin-bottom: 12px;
    padding: 6px 10px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.auth-card h1 {
    margin: 0;
    font-size: clamp(38px, 6vw, 54px);
    line-height: 1;
    letter-spacing: -2px;
}

.auth-lead {
    margin: 18px 0 28px;
    color: var(--muted);
    line-height: 1.6;
}

.auth-form {
    display: grid;
    gap: 17px;
}

.auth-form label {
    display: grid;
    gap: 7px;
}

.auth-form label > span {
    font-size: 13px;
    font-weight: 750;
}

.auth-form input {
    width: 100%;
    padding: 14px 15px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 13px;
    outline: none;
    font: inherit;
}

.auth-form input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(232,100,61,.10);
}

.auth-form-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.auth-hint,
.auth-password-note {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.auth-password-note {
    margin-top: -6px;
}

.auth-primary-button {
    min-height: 50px;
    padding: 13px 18px;
    color: #fff;
    background: var(--accent);
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-weight: 820;
    cursor: pointer;
}

.auth-primary-button:hover {
    background: var(--accent-hover);
}

.auth-primary-button:disabled {
    opacity: .65;
    cursor: wait;
}

.auth-error {
    margin: 0 0 18px;
    padding: 12px 14px;
    color: #8b3127;
    background: #fff0ec;
    border: 1px solid #f4cdc3;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
}

.auth-switch {
    margin: 22px 0 0;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

.auth-switch a {
    color: var(--accent);
    font-weight: 750;
    text-decoration: none;
}

.auth-provider-section {
    margin-top: 27px;
}

.auth-divider {
    position: relative;
    margin-bottom: 15px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
}

.auth-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border);
}

.auth-divider span {
    position: relative;
    padding: 0 10px;
    background: #fff;
}

.auth-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.auth-provider-button {
    padding: 11px 8px;
    display: grid;
    gap: 2px;
    color: var(--muted);
    background: #faf7f4;
    border: 1px solid var(--border);
    border-radius: 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
}

.auth-provider-button small {
    opacity: .7;
    font-size: 9px;
}


/* Страница аккаунта */

.account-page {
    padding: 45px 0 100px;
}

.account-hero {
    padding: clamp(25px, 4vw, 38px);
    display: flex;
    align-items: center;
    gap: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(255,244,237,.96)
        );
    border: 1px solid var(--border);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow);
}

.account-avatar {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--accent-soft);
    border-radius: 24px;
    font-size: 37px;
}

.account-hero h1 {
    margin: 0;
    font-size: clamp(34px, 6vw, 55px);
    line-height: 1;
    letter-spacing: -2px;
}

.account-username {
    margin: 8px 0 0;
    color: var(--muted);
}

.account-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.account-card {
    padding: 25px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(70,44,25,.045);
}

.account-card h2 {
    margin: 0 0 16px;
    font-size: 20px;
}

.account-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

.account-card-icon {
    margin-bottom: 12px;
    font-size: 28px;
}

.account-book-card {
    background:
        linear-gradient(
            145deg,
            #fff,
            #fff6f0
        );
}

.account-coming {
    display: inline-block;
    margin-top: 5px;
    padding: 6px 9px;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.account-details {
    margin: 0;
    display: grid;
}

.account-details div {
    padding: 11px 0;
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 12px;
    border-top: 1px solid var(--border);
}

.account-details div:first-child {
    border-top: 0;
}

.account-details dt {
    color: var(--muted);
    font-size: 12px;
}

.account-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    font-size: 13px;
    font-weight: 700;
}

.account-provider-list {
    display: grid;
    gap: 7px;
    font-size: 12px;
}

.account-provider-list span {
    padding: 8px 10px;
    background: var(--surface-soft);
    border-radius: 9px;
}

.account-provider-list .is-muted {
    color: var(--muted);
    background: #f8f5f2;
}

.account-logout {
    margin-top: 20px;
    padding: 11px 14px;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

.account-logout:hover {
    color: #a33a31;
    border-color: #e8bbb5;
}


@media (max-width: 760px) {

    .site-header {
        flex-wrap: wrap;
    }

    .public-auth {
        margin-left: auto;
    }

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


@media (max-width: 560px) {

    .auth-page,
    .account-page {
        padding-top: 20px;
    }

    .auth-card {
        padding: 24px 18px;
        border-radius: 20px;
    }

    .auth-form-columns,
    .auth-provider-grid {
        grid-template-columns: 1fr;
    }

    .account-avatar {
        width: 58px;
        height: 58px;
        font-size: 26px;
    }

    .public-user-name {
        max-width: 95px;
    }

    .public-logout-button {
        display: none;
    }
}


/* ==========================================================
   XCake v0.0.20A — избранное / «Моя книга»
   ========================================================== */

/*
 * Один и тот же интерфейс используется на desktop и mobile.
 * Отдельной мобильной версии XCake нет.
 */

.recipe-favorite-actions {
    margin-top: 18px;

    display: flex;
    align-items: center;
    gap: 10px;
}

.recipe-favorite-button {
    min-height: 44px;

    padding: 10px 16px;

    color: var(--accent);
    background: #fff;

    border: 1px solid #ebcfc2;
    border-radius: 999px;

    font: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    box-shadow:
        0 4px 16px rgba(70,44,25,.05);

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.recipe-favorite-button:hover {
    background: var(--accent-soft);

    transform:
        translateY(-1px);
}

.recipe-favorite-button.is-favorited {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.recipe-favorite-button:disabled {
    opacity: .65;
    cursor: wait;
    transform: none;
}


.account-book-section {
    margin-top: 38px;
}

.account-favorites-grid {
    margin-top: 18px;
}

.favorite-book-item {
    position: relative;
    min-width: 0;
}

.favorite-book-item > .home-recipe-card {
    height: 100%;
}

.favorite-book-remove {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 3;

    padding: 7px 10px;

    color: #8c4b40;
    background: rgba(255,255,255,.95);

    border: 1px solid rgba(225,191,180,.9);
    border-radius: 999px;

    box-shadow:
        0 3px 12px rgba(70,44,25,.08);

    font: inherit;
    font-size: 10px;
    font-weight: 800;

    cursor: pointer;
}

.favorite-book-remove:hover {
    color: #fff;
    background: #b84d3b;
    border-color: #b84d3b;
}

.favorite-book-remove:disabled {
    opacity: .6;
    cursor: wait;
}

.account-book-empty {
    grid-column: 1 / -1;

    padding: 28px;

    color: var(--muted);
    background: #fff;

    border: 1px dashed var(--border);
    border-radius: 18px;

    text-align: center;

    font-size: 13px;
    line-height: 1.6;
}


/*
 * Mobile:
 *
 * Кнопку сохранения делаем крупной, чтобы ей было удобно
 * пользоваться пальцем.
 *
 * Сетка карточек уже адаптивна на уровне общего XCake layout.
 */

@media (max-width: 560px) {

    .recipe-favorite-actions {
        width: 100%;
    }

    .recipe-favorite-button {
        width: 100%;

        min-height: 48px;

        text-align: center;
    }

    .favorite-book-remove {
        top: 9px;
        right: 9px;

        padding: 7px 9px;
    }

    .account-book-section {
        margin-top: 28px;
    }
}


/* ==========================================================
   XCake v0.0.20A — кликабельная плитка книги
   ========================================================== */

html {
    scroll-behavior: smooth;
}

.account-book-link {
    position: relative;

    display: block;

    color: inherit;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform .15s ease,
        border-color .15s ease,
        box-shadow .15s ease;
}

.account-book-link:hover {
    transform: translateY(-2px);

    border-color: #e8c8ba;

    box-shadow:
        0 14px 34px rgba(70,44,25,.08);
}

.account-book-link:focus-visible {
    outline: 3px solid rgba(232,100,61,.25);
    outline-offset: 3px;
}

.account-book-open {
    display: block;

    margin-top: 15px;

    color: var(--accent);

    font-size: 12px;
    font-weight: 800;
}

#saved-recipes {
    scroll-margin-top: 24px;
}


@media (max-width: 560px) {

    .account-book-open {
        margin-top: 12px;
    }

    #saved-recipes {
        scroll-margin-top: 14px;
    }
}


/* ==========================================================
   XCake v0.0.20B — подтверждение удаления из книги
   ========================================================== */

body.xcake-confirm-open {
    overflow: hidden;
}

.xcake-confirm-overlay {
    position: fixed;

    inset: 0;

    z-index: 10000;

    padding: 22px;

    display: grid;
    place-items: center;

    background:
        rgba(48, 34, 27, .42);

    backdrop-filter:
        blur(5px);
}

.xcake-confirm-dialog {
    width: min(100%, 430px);

    padding: 30px;

    color: var(--text);
    background: #fff;

    border: 1px solid var(--border);
    border-radius: 24px;

    box-shadow:
        0 28px 80px rgba(45, 29, 22, .24);

    animation:
        xcake-confirm-in .16s ease-out;
}

.xcake-confirm-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 18px;

    display: grid;
    place-items: center;

    background: var(--accent-soft);

    border-radius: 16px;

    font-size: 25px;
}

.xcake-confirm-title {
    margin: 0;

    font-size: 24px;
    line-height: 1.15;

    letter-spacing: -.5px;
}

.xcake-confirm-message {
    margin: 13px 0 24px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.6;
}

.xcake-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.xcake-confirm-button {
    min-height: 44px;

    padding: 10px 16px;

    border-radius: 12px;

    font: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.xcake-confirm-cancel {
    color: var(--text);
    background: #fff;

    border: 1px solid var(--border);
}

.xcake-confirm-cancel:hover {
    background: var(--surface-soft);
}

.xcake-confirm-danger {
    color: #fff;
    background: #b84d3b;

    border: 1px solid #b84d3b;
}

.xcake-confirm-danger:hover {
    background: #9f3f30;
}

.xcake-confirm-button:focus-visible {
    outline: 3px solid rgba(232,100,61,.23);
    outline-offset: 2px;
}


@keyframes xcake-confirm-in {

    from {
        opacity: 0;
        transform: translateY(8px) scale(.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@media (max-width: 560px) {

    .xcake-confirm-overlay {
        padding:
            18px;
        align-items: end;
    }

    .xcake-confirm-dialog {
        padding:
            24px 20px;

        border-radius:
            22px;
    }

    .xcake-confirm-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .xcake-confirm-button {
        width: 100%;
        min-height: 49px;
    }

    /*
     * На телефоне безопасное действие «Оставить»
     * визуально идёт первым.
     */
    .xcake-confirm-cancel {
        order: 1;
    }

    .xcake-confirm-danger {
        order: 2;
    }
}


/* ==========================================================
   XCake v0.0.20C — избранное на публичных карточках
   ========================================================== */

/*
 * .home-recipe-card теперь является контейнером.
 *
 * Внутри:
 *
 *   .home-recipe-card-link
 *   .recipe-card-favorite
 *
 * Поэтому кнопка сердца не вложена в <a>.
 */

.home-recipe-card {
    position: relative;
}

.home-recipe-card-link {
    display: block;

    height: 100%;

    color: inherit;
    text-decoration: none;

    border-radius: inherit;
}

.home-recipe-card-link:focus-visible {
    outline: 3px solid rgba(232,100,61,.22);
    outline-offset: 3px;
}


/*
 * Отдельное действие избранного.
 *
 * Оно располагается поверх изображения, но юридически/DOM-структурно
 * находится рядом со ссылкой, а не внутри неё.
 */

.recipe-card-favorite {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 5;

    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    padding: 0;

    color: #9a6254;
    background: rgba(255,255,255,.94);

    border: 1px solid rgba(225,198,187,.95);
    border-radius: 50%;

    box-shadow:
        0 5px 18px rgba(53,35,27,.13);

    backdrop-filter:
        blur(7px);

    font: inherit;
    font-size: 21px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform .14s ease,
        color .14s ease,
        background .14s ease,
        border-color .14s ease;
}

.recipe-card-favorite:hover {
    color: var(--accent);

    transform:
        translateY(-1px)
        scale(1.04);
}

.recipe-card-favorite.is-favorited {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
}

.recipe-card-favorite:focus-visible {
    outline: 3px solid rgba(232,100,61,.28);
    outline-offset: 3px;
}

.recipe-card-favorite:disabled {
    opacity: .62;
    cursor: wait;
    transform: none;
}


/*
 * Старые hover-эффекты карточки должны продолжать относиться
 * к общему контейнеру, независимо от того, что ссылка теперь вложенная.
 */

.home-recipe-card:hover
.home-recipe-title {
    color: var(--accent);
}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 560px) {

    .recipe-card-favorite {
        top: 10px;
        right: 10px;

        width: 43px;
        height: 43px;

        font-size: 22px;
    }
}


/* ==========================================================
   XCake v0.0.21 — рейтинги и лучшие рецепты
   ========================================================== */

.recipe-rating-panel {
    margin-top: 16px;
    padding: 16px 18px;

    background:
        linear-gradient(
            135deg,
            #fffaf3,
            #fff
        );

    border: 1px solid #eadfce;
    border-radius: 16px;
}

.recipe-rating-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 9px;
}

.recipe-rating-title {
    font-size: 14px;
    font-weight: 850;
}

.recipe-rating-summary {
    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}

.recipe-rating-stars {
    display: flex;
    align-items: center;
    gap: 3px;
}

.recipe-rating-star {
    width: 40px;
    height: 40px;

    padding: 0;

    color: #d7c9b5;
    background: transparent;

    border: 0;
    border-radius: 10px;

    font: inherit;
    font-size: 27px;
    line-height: 1;

    cursor: pointer;

    transition:
        color .12s ease,
        background .12s ease,
        transform .12s ease;
}

.recipe-rating-star:hover,
.recipe-rating-star.is-selected {
    color: #efad34;
}

.recipe-rating-star:hover {
    background: #fff4d9;

    transform:
        translateY(-1px)
        scale(1.05);
}

.recipe-rating-star:focus-visible {
    outline:
        3px solid rgba(239,173,52,.25);

    outline-offset: 2px;
}

.recipe-rating-star:disabled {
    opacity: .6;
    cursor: wait;
    transform: none;
}

.recipe-rating-reset {
    margin-top: 9px;
    padding: 0;

    color: var(--muted);
    background: transparent;

    border: 0;

    font: inherit;
    font-size: 11px;
    font-weight: 700;

    cursor: pointer;
}

.recipe-rating-reset:hover {
    color: var(--accent);
}

.home-recipe-rating {
    color: #a66d0b;
    font-weight: 800;
}

.home-best-section {
    position: relative;
}


@media (max-width: 560px) {

    .recipe-rating-panel {
        padding: 15px;
    }

    .recipe-rating-heading {
        display: block;
    }

    .recipe-rating-summary {
        display: block;
        margin-top: 3px;
    }

    .recipe-rating-stars {
        justify-content: space-between;
        margin-top: 5px;
    }

    .recipe-rating-star {
        width: 46px;
        height: 46px;

        font-size: 30px;
    }
}


/* ==========================================================
   XCake v0.0.22 — комментарии
   ========================================================== */

.recipe-comments-section {
    margin-top: 20px;
    padding: 20px;

    background: #fff;

    border: 1px solid #eadfd8;
    border-radius: 18px;
}

.recipe-comments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
}

.recipe-comments-title-wrap {
    display: flex;
    align-items: center;
    gap: 9px;
}

.recipe-comments-title {
    margin: 0;

    font-size: 21px;
    font-weight: 900;
}

.recipe-comments-count {
    min-width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    padding: 0 8px;

    color: #fff;
    background: var(--accent);

    border-radius: 999px;

    font-size: 12px;
    font-weight: 850;
}

.recipe-comment-form {
    margin-bottom: 18px;
}

.recipe-comment-textarea {
    width: 100%;
    resize: vertical;

    padding: 13px 14px;

    border: 1px solid #ddd0c8;
    border-radius: 13px;

    background: #fffdfb;

    color: inherit;
    font: inherit;
    line-height: 1.5;

    box-sizing: border-box;
}

.recipe-comment-textarea:focus {
    outline: 3px solid rgba(232,100,61,.12);
    border-color: var(--accent);
}

.recipe-comment-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;

    margin-top: 8px;
}

.recipe-comment-form-hint {
    color: var(--muted);
    font-size: 11px;
}

.recipe-comment-submit {
    min-height: 40px;

    padding: 0 17px;

    color: #fff;
    background: var(--accent);

    border: 0;
    border-radius: 11px;

    font: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.recipe-comment-submit:disabled {
    opacity: .6;
    cursor: wait;
}

.recipe-comments-list {
    display: grid;
    gap: 12px;
}

.recipe-comment {
    padding: 14px 15px;

    background: #fffaf7;

    border: 1px solid #eee2dc;
    border-radius: 15px;
}

.recipe-comment-reply {
    margin-top: 9px;

    background: #fff;
}

.recipe-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.recipe-comment-identity {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: 0;
}

.recipe-comment-avatar {
    width: 32px;
    height: 32px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    color: #fff;
    background: #b87968;

    border-radius: 50%;

    font-size: 13px;
    font-weight: 900;
}

.recipe-comment-author {
    overflow: hidden;

    font-size: 13px;
    font-weight: 850;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.recipe-comment-author-badge {
    padding: 4px 7px;

    color: #8d5b00;
    background: #fff0c6;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;

    white-space: nowrap;
}

.recipe-comment-time {
    color: var(--muted);

    font-size: 10px;
    white-space: nowrap;
}

.recipe-comment-body {
    margin: 10px 0 0;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    line-height: 1.55;
}

.recipe-comment-deleted {
    margin-top: 10px;

    color: var(--muted);

    font-size: 12px;
    font-style: italic;
}

.recipe-comment-actions {
    display: flex;
    gap: 12px;

    margin-top: 9px;
}

.recipe-comment-action {
    padding: 0;

    color: var(--muted);
    background: transparent;

    border: 0;

    font: inherit;
    font-size: 11px;
    font-weight: 750;

    cursor: pointer;
}

.recipe-comment-action:hover {
    color: var(--accent);
}

.recipe-comment-delete:hover {
    color: #a93434;
}

.recipe-comment-replies {
    display: grid;
    gap: 8px;

    margin-top: 10px;
    margin-left: 26px;

    padding-left: 12px;

    border-left: 2px solid #eedfd8;
}

.recipe-reply-form {
    margin-top: 11px;
    margin-bottom: 0;
}

.recipe-reply-label {
    margin-bottom: 5px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.recipe-comments-guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 17px;
    padding: 12px 14px;

    background: #fff8f4;

    border-radius: 12px;

    color: var(--muted);
    font-size: 12px;
}

.recipe-comments-login {
    color: var(--accent);
    font-weight: 850;
}

.recipe-comments-empty {
    margin: 7px 0;

    color: var(--muted);
    font-size: 13px;
}

.recipe-comments-more {
    display: block;

    margin: 16px auto 0;
    padding: 10px 18px;

    background: #fff;

    border: 1px solid #ddcfc7;
    border-radius: 11px;

    font: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}


@media (max-width: 560px) {

    .recipe-comments-section {
        padding: 15px;
        border-radius: 16px;
    }

    .recipe-comment-header {
        align-items: flex-start;
    }

    .recipe-comment-time {
        max-width: 85px;
        white-space: normal;
        text-align: right;
    }

    .recipe-comment-author-badge {
        display: none;
    }

    .recipe-comment-replies {
        margin-left: 10px;
        padding-left: 9px;
    }

    .recipe-comment-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .recipe-comment-submit {
        width: 100%;
        min-height: 46px;
    }

    .recipe-comments-guest {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================
   XCake v0.0.23 — публичные профили и награды
   ========================================================== */

.public-profile-page {
    padding-bottom: 48px;
}

.public-profile-hero {
    display: flex;
    align-items: center;
    gap: 22px;

    margin: 28px 0 20px;
    padding: 25px;

    background:
        linear-gradient(
            135deg,
            #fff8f3,
            #fff
        );

    border: 1px solid #eaded7;
    border-radius: 20px;
}

.public-profile-avatar {
    width: 92px;
    height: 92px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    color: #fff;
    background:
        linear-gradient(
            145deg,
            #d98470,
            #a85d4d
        );

    border-radius: 50%;

    font-size: 38px;
    font-weight: 900;

    box-shadow:
        0 12px 30px rgba(103,59,45,.14);
}

.public-profile-name {
    margin: 4px 0 2px;

    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.05;
}

.public-profile-username,
.public-profile-joined {
    color: var(--muted);
}

.public-profile-bio {
    max-width: 720px;

    margin: 10px 0;

    white-space: pre-wrap;
    line-height: 1.55;
}

.public-profile-stats {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 10px;

    margin-bottom: 28px;
}

.public-profile-stat {
    padding: 16px;

    background: #fff;

    border: 1px solid #eadfd8;
    border-radius: 15px;

    text-align: center;
}

.public-profile-stat strong {
    display: block;

    font-size: 23px;
    font-weight: 900;
}

.public-profile-stat span {
    color: var(--muted);

    font-size: 11px;
    font-weight: 700;
}

.public-profile-achievements,
.public-profile-recipes {
    margin-top: 30px;
}

.public-achievements-count {
    min-width: 30px;
    height: 30px;

    display: inline-grid;
    place-items: center;

    padding: 0 8px;

    color: #fff;
    background: var(--accent);

    border-radius: 999px;

    font-size: 12px;
    font-weight: 850;
}

.public-achievements-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.achievement-badge {
    display: flex;
    gap: 12px;

    min-width: 0;

    padding: 15px;

    background: #fff;

    border: 1px solid #eadfd8;
    border-radius: 16px;
}

.achievement-icon {
    width: 48px;
    height: 48px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    background: #fff7e8;

    border-radius: 14px;

    font-size: 26px;
}

.achievement-title {
    display: block;

    margin-bottom: 4px;

    font-size: 14px;
    font-weight: 900;
}

.achievement-description {
    margin: 0 0 7px;

    color: var(--muted);

    font-size: 11px;
    line-height: 1.45;
}

.achievement-rarity {
    display: inline-block;

    padding: 3px 7px;

    border-radius: 999px;

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;
}

.achievement-common .achievement-rarity {
    background: #eee;
}

.achievement-uncommon .achievement-rarity {
    background: #ddf3dc;
}

.achievement-rare .achievement-rarity {
    background: #dfeeff;
}

.achievement-epic .achievement-rarity {
    background: #eee2ff;
}

.achievement-legendary {
    border-color: #e4b84c;

    box-shadow:
        0 8px 24px rgba(213,165,45,.12);
}

.achievement-legendary .achievement-rarity {
    background: #fff0b9;
}

.public-profile-empty {
    color: var(--muted);
}

.recipe-author-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    margin-top: 10px;

    color: inherit;

    font-size: 12px;
    font-weight: 800;

    text-decoration: none;
}

.recipe-author-link:hover {
    color: var(--accent);
}

.recipe-author-avatar {
    width: 28px;
    height: 28px;

    display: inline-grid;
    place-items: center;

    color: #fff;
    background: #b87968;

    border-radius: 50%;

    font-size: 11px;
    font-weight: 900;
}

.recipe-comment-author-link {
    color: inherit;
    text-decoration: none;
}

.recipe-comment-author-link:hover {
    color: var(--accent);
    text-decoration: underline;
}

.account-public-profile-card {
    color: inherit;
    text-decoration: none;
}


@media (max-width: 760px) {

    .public-profile-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .public-achievements-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 560px) {

    .public-profile-hero {
        align-items: flex-start;

        padding: 18px;
    }

    .public-profile-avatar {
        width: 64px;
        height: 64px;

        font-size: 26px;
    }

    .public-profile-stat {
        padding: 13px 8px;
    }

    .public-profile-stat strong {
        font-size: 20px;
    }
}


/* ==========================================================
   XCake v0.0.24 — пользовательский редактор рецептов
   ========================================================== */

.user-recipes-page,
.recipe-editor-page {
    padding-bottom: 60px;
}

.user-workspace-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;

    margin: 30px 0 24px;
}

.user-workspace-lead {
    max-width: 680px;

    margin: 8px 0 0;

    color: var(--muted);
    line-height: 1.55;
}

.user-primary-button {
    color: #fff;
    background: var(--accent);
}

.user-recipe-list {
    display: grid;
    gap: 14px;
}

.user-recipe-item {
    display: grid;
    grid-template-columns: 180px 1fr;

    overflow: hidden;

    background: #fff;

    border: 1px solid #eadfd8;
    border-radius: 18px;
}

.user-recipe-cover {
    width: 100%;
    height: 100%;
    min-height: 160px;

    object-fit: cover;
}

.user-recipe-body {
    padding: 20px;
}

.user-recipe-body h2 {
    margin: 8px 0;
}

.user-recipe-body p {
    color: var(--muted);
}

.user-recipe-status {
    display: inline-flex;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 900;
}

.user-recipe-status-draft {
    background: #ececec;
}

.user-recipe-status-moderation {
    background: #fff0c5;
}

.user-recipe-status-published {
    background: #dcefdc;
}

.user-recipe-status-rejected {
    background: #ffe0dc;
}

.user-recipe-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 16px;
}

.user-recipes-empty {
    padding: 30px;

    color: var(--muted);
    background: #fff;

    border: 1px dashed #d9cbc3;
    border-radius: 18px;

    text-align: center;
}

.recipe-editor-form {
    display: grid;
    gap: 18px;
}

.recipe-editor-section {
    padding: 22px;

    background: #fff;

    border: 1px solid #eadfd8;
    border-radius: 18px;
}

.recipe-editor-section h2 {
    margin-top: 0;
}

.recipe-editor-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 14px;
}

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

.recipe-editor-field {
    display: grid;
    gap: 6px;
}

.recipe-editor-field span {
    font-size: 12px;
    font-weight: 800;
}

.recipe-editor-wide {
    grid-column: 1 / -1;
}

.recipe-editor-field input,
.recipe-editor-field textarea,
.recipe-editor-field select,
.recipe-editor-row input,
.recipe-editor-row textarea {
    width: 100%;

    padding: 12px 13px;

    font: inherit;

    background: #fff;

    border: 1px solid #d9cbc3;
    border-radius: 11px;

    box-sizing: border-box;
}

.recipe-editor-row {
    display: grid;
    grid-template-columns:
        minmax(150px, 1.4fr)
        minmax(100px, .6fr)
        minmax(150px, 1fr)
        42px;
    gap: 8px;

    margin-top: 10px;
}

.step-row {
    grid-template-columns:
        minmax(140px, .7fr)
        minmax(240px, 1.8fr)
        110px
        42px;
}

.recipe-row-remove {
    height: 42px;

    color: #9b3e31;
    background: #fff0ed;

    border: 0;
    border-radius: 10px;

    font-size: 22px;
    cursor: pointer;
}

.recipe-image-field {
    display: grid;
    gap: 10px;

    padding: 18px;

    color: var(--muted);
    background: #fffaf7;

    border: 1px dashed #d9cbc3;
    border-radius: 14px;
}

.recipe-editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.recipe-editor-message {
    margin-bottom: 16px;
    padding: 14px 16px;

    border-radius: 12px;
}

.recipe-editor-message-success {
    color: #285c2b;
    background: #e5f5e4;
}

.recipe-editor-message-error {
    color: #8c3328;
    background: #ffe5e0;
}

.account-user-recipes-card {
    color: inherit;
    text-decoration: none;
}


@media (max-width: 760px) {

    .user-workspace-head {
        display: grid;
    }

    .user-workspace-head .button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .user-recipe-item {
        grid-template-columns: 1fr;
    }

    .user-recipe-cover {
        height: 190px;
    }

    .recipe-editor-grid {
        grid-template-columns: 1fr;
    }

    .recipe-editor-wide {
        grid-column: auto;
    }

    .recipe-editor-row,
    .step-row {
        grid-template-columns: 1fr;
    }

    .recipe-row-remove {
        width: 100%;
    }

    .recipe-editor-actions {
        display: grid;
    }

    .recipe-editor-actions .button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}


/* ==========================================================
   XCake v0.0.24 — editor UX repair
   ========================================================== */

.recipe-editor-page .button {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 11px 18px;

    border: 1px solid transparent;
    border-radius: 12px;

    font: inherit;
    font-size: 13px;
    font-weight: 850;

    text-decoration: none;
    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        opacity .15s ease;
}

.recipe-editor-page .button:hover {
    transform: translateY(-1px);
}

.recipe-editor-page .button:disabled {
    opacity: .55;
    transform: none;
    cursor: wait;
}

.recipe-editor-page .user-primary-button {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--accent),
            #a95c4b
        );

    box-shadow:
        0 7px 20px rgba(169, 92, 75, .18);
}

.recipe-editor-page .secondary-button {
    color: #68463c;
    background: #fff;

    border-color: #dccdc5;
}

.recipe-image-workspace {
    display: grid;
    gap: 12px;
}

.recipe-image-preview-wrap {
    overflow: hidden;

    max-width: 620px;

    background: #f3ece8;

    border: 1px solid #dfd0c8;
    border-radius: 16px;
}

.recipe-image-preview {
    display: block;

    width: 100%;
    max-height: 420px;

    object-fit: cover;
}

.recipe-image-field {
    cursor: pointer;
}

.recipe-image-field strong {
    color: var(--text);
}

.recipe-image-status {
    padding: 10px 12px;

    color: var(--muted);
    background: #f7f3f0;

    border-radius: 10px;

    font-size: 12px;
    font-weight: 750;
}

.recipe-image-status-success {
    color: #2f6734;
    background: #e5f4e5;
}

.recipe-image-status-loading {
    color: #765d20;
    background: #fff4ce;
}

.recipe-image-status-ready {
    color: #385f79;
    background: #e4f2fa;
}

.recipe-editor-message {
    white-space: pre-line;
}

.recipe-editor-field input:focus,
.recipe-editor-field textarea:focus,
.recipe-editor-field select:focus,
.recipe-editor-row input:focus,
.recipe-editor-row textarea:focus {
    outline: 3px solid rgba(180, 104, 84, .14);
    border-color: var(--accent);
}


@media (max-width: 560px) {

    .recipe-editor-section {
        padding: 16px;
    }

    .recipe-editor-section-head {
        align-items: stretch;
        flex-direction: column;
    }
}


/* ==========================================================
   XCake rejection UX
   ========================================================== */

.user-recipe-rejection {
    margin-top: 14px;
    padding: 13px 14px;

    color: #743c32;
    background: #fff0ed;

    border:
        1px solid #efc2ba;

    border-radius:
        12px;
}

.user-recipe-rejection strong {
    display: block;

    margin-bottom: 5px;
}

.user-recipe-rejection p {
    margin: 0;

    color: inherit;

    white-space: pre-wrap;
}

.recipe-rejection-banner {
    margin-bottom: 18px;
    padding: 17px 18px;

    color: #713b31;
    background:
        linear-gradient(
            135deg,
            #fff3f0,
            #fff8f6
        );

    border:
        1px solid #eabbb2;

    border-radius:
        15px;
}

.recipe-rejection-banner strong {
    display: block;

    margin-bottom: 7px;

    font-size: 16px;
}

.recipe-rejection-banner p {
    margin:
        0 0 8px;

    white-space: pre-wrap;
}

.recipe-rejection-banner span {
    color: #8a665e;
    font-size: 12px;
    font-weight: 700;
}