/* ========================================================================== */
/* Botanical Apothecary Design System                                         */
/* ========================================================================== */

:root {
    --background: #f6f1e5;
    --surface: #fffdf7;
    --surface-raised: #f1eadc;
    --surface-soft: #faf6ed;

    --border: #ddd3c0;
    --border-strong: #a4ae98;

    --text: #243326;
    --text-muted: #6c746a;

    --accent: #55784f;
    --accent-hover: #466943;
    --accent-text: #fffdf5;
    --accent-soft: #e3ebdc;
    --accent-gold: #b49150;
    --accent-plum: #9d7488;

    --danger: #aa5357;
    --danger-hover: #933f44;
    --danger-background: rgba(170, 83, 87, 0.1);

    --success: #507d5c;
    --success-background: rgba(80, 125, 92, 0.12);

    --sidebar-background: #f0ecdf;
    --sidebar-surface: #faf7ee;
    --sidebar-surface-active: #dfe9d7;
    --sidebar-border: #d9d0bd;
    --sidebar-text: #243326;
    --sidebar-muted: #6f766c;
    --sidebar-accent: #55784f;

    --shadow-soft: 0 1.1rem 3rem rgba(66, 67, 52, 0.08);
    --shadow-card: 0 0.6rem 1.8rem rgba(73, 71, 51, 0.055);

    --max-width: 1500px;
    --sidebar-width: 17.25rem;
    --sidebar-collapsed-width: 4.85rem;
}

html[data-theme="dark"] {
    --background: #0c1914;
    --surface: #14241b;
    --surface-raised: #1a2d22;
    --surface-soft: #102019;

    --border: #344b3b;
    --border-strong: #657b67;

    --text: #f0eddd;
    --text-muted: #b1b8ac;

    --accent: #a6c48d;
    --accent-hover: #bad3a6;
    --accent-text: #102018;
    --accent-soft: #263c2d;
    --accent-gold: #d1b06b;
    --accent-plum: #c69aae;

    --danger: #e27d80;
    --danger-hover: #f19497;
    --danger-background: rgba(226, 125, 128, 0.14);

    --success: #86bd91;
    --success-background: rgba(134, 189, 145, 0.14);

    --sidebar-background: #0b1f17;
    --sidebar-surface: #13281e;
    --sidebar-surface-active: #274331;
    --sidebar-border: #2e4938;
    --sidebar-text: #f1eddd;
    --sidebar-muted: #b0bbad;
    --sidebar-accent: #b1cd96;

    --shadow-soft: 0 1.25rem 3.2rem rgba(0, 0, 0, 0.28);
    --shadow-card: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
}

html {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

body {
    background:
        radial-gradient(
            circle at 82% 4%,
            color-mix(in srgb, var(--accent-gold) 11%, transparent),
            transparent 25rem
        ),
        radial-gradient(
            circle at 16% 96%,
            color-mix(in srgb, var(--accent) 8%, transparent),
            transparent 29rem
        ),
        var(--background);
}

h1,
h2,
.recipe-header h1,
.cocktail-card-name,
.sidebar-brand {
    font-family:
        Georgia,
        "Times New Roman",
        serif;
}

h1 {
    font-size: clamp(2.45rem, 4.5vw, 4.15rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.035em;
}

h2 {
    font-weight: 600;
}

.button-primary,
.button-secondary,
.button-danger {
    min-height: 2.8rem;
    border-radius: 0.65rem;
    padding-inline: 1.05rem;
    font-size: 0.86rem;
    font-weight: 750;
    box-shadow: none;
}

.button-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--accent-text);
}

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

.button-secondary {
    border-color: var(--border);
    background: var(--surface-soft);
    color: var(--text);
}

.button-secondary:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-hover);
}

input,
textarea,
select {
    border-radius: 0.65rem;
    border-color: var(--border);
    background: var(--surface);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* App shell and decorative page atmosphere */

.app-shell {
    min-height: 100svh;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    transition: grid-template-columns 190ms ease;
}

.app-sidebar {
    top: 0;
    height: 100svh;
    border-right: 1px solid var(--sidebar-border);
    border-radius: 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--sidebar-surface) 58%, transparent),
            transparent 33%
        ),
        var(--sidebar-background);
    box-shadow: 0.55rem 0 2.2rem rgba(57, 61, 49, 0.055);
}

html[data-theme="dark"] .app-sidebar {
    background:
        radial-gradient(
            circle at 20% 8%,
            rgba(177, 205, 150, 0.09),
            transparent 17rem
        ),
        linear-gradient(180deg, #10271c, var(--sidebar-background));
    box-shadow: 0.65rem 0 2.4rem rgba(0, 0, 0, 0.22);
}

.app-main {
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
}

.app-main::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0.7rem;
    right: 2.2rem;
    width: min(39vw, 34rem);
    height: 11rem;
    background: url("botanical-sprig.svg") right top / contain no-repeat;
    opacity: 0.55;
    pointer-events: none;
}

html[data-theme="dark"] .app-main::before {
    opacity: 0.28;
    filter: saturate(0.82) brightness(1.12);
}

.app-authenticated .main-content {
    width: min(calc(100% - 4.5rem), var(--max-width));
    padding-block: 2.3rem 5rem;
}

.page-header {
    position: relative;
    z-index: 1;
    align-items: center;
    margin-bottom: 1.7rem;
}

.botanical-page-header {
    min-height: 7.15rem;
    padding-right: min(34vw, 27rem);
}

.page-description {
    margin-top: 0.6rem;
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.5;
}

.page-header-actions {
    align-self: flex-end;
    padding-bottom: 0.25rem;
}

.result-count {
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.48rem 0.78rem;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
    backdrop-filter: blur(7px);
}

/* Botanical sidebar */

.sidebar-header {
    border-bottom: 0;
    padding: 1.1rem 0.9rem 0.55rem;
}

.sidebar-brand-row {
    position: relative;
    min-height: 4.5rem;
    align-items: center;
    gap: 0.45rem;
}

.sidebar-brand {
    align-items: center;
    gap: 0.7rem;
    color: var(--sidebar-text);
    font-size: 1.12rem;
    font-weight: 600;
    letter-spacing: 0.015em;
    text-transform: uppercase;
}

.sidebar-brand-mark {
    width: 3.35rem;
    height: 4.25rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sidebar-brand-mark img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.sidebar-brand-copy {
    line-height: 1.08;
}

.sidebar-collapse-toggle {
    width: 1.9rem;
    height: 1.9rem;
    position: absolute;
    top: -0.15rem;
    right: -0.05rem;
    border-color: transparent;
    background: transparent;
}

.sidebar-collapse-toggle:hover {
    border-color: var(--sidebar-border);
    background: var(--sidebar-surface);
}

.sidebar-user-panel {
    gap: 0.42rem;
    margin-top: 0.6rem;
    border-top: 1px solid color-mix(in srgb, var(--sidebar-border) 70%, transparent);
    padding-top: 0.72rem;
}

.sidebar-user-link,
.sidebar-user-action {
    grid-template-columns: 2.15rem minmax(0, 1fr);
    gap: 0.65rem;
    border-radius: 0.65rem;
    padding: 0.48rem 0.5rem;
}

.sidebar-user-link:hover,
.sidebar-user-action:hover,
.sidebar-user-link.is-current,
.sidebar-user-action[aria-pressed="true"] {
    border-color: var(--sidebar-border);
    background: color-mix(in srgb, var(--sidebar-surface) 86%, transparent);
}

.sidebar-user-action {
    border-color: var(--sidebar-border);
    background: color-mix(in srgb, var(--sidebar-surface) 52%, transparent);
}

.sidebar-user-avatar {
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid color-mix(in srgb, var(--sidebar-accent) 45%, transparent);
    background:
        radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.35), transparent 30%),
        var(--sidebar-accent);
    color: var(--accent-text);
    box-shadow: 0 0.25rem 0.7rem rgba(43, 63, 43, 0.14);
}

.sidebar-user-copy strong {
    font-size: 0.86rem;
}

.sidebar-user-copy span {
    font-size: 0.68rem;
}

.sidebar-navigation {
    gap: 0.9rem;
    padding: 0.65rem 0.9rem 1rem;
}

.sidebar-section {
    gap: 0.22rem;
}

.sidebar-section-title {
    margin-bottom: 0.18rem;
    padding-inline: 0.55rem;
    color: var(--sidebar-muted);
    font-size: 0.61rem;
    letter-spacing: 0.1em;
}

.sidebar-link,
.sidebar-footer-action {
    grid-template-columns: 1.55rem minmax(0, 1fr);
    gap: 0.62rem;
    border-radius: 0.55rem;
    padding: 0.58rem 0.6rem;
    font-size: 0.82rem;
    font-weight: 620;
}

.sidebar-link:hover,
.sidebar-footer-action:hover {
    border-color: transparent;
    background: color-mix(in srgb, var(--sidebar-surface) 88%, transparent);
}

.sidebar-link.is-current {
    border-color: transparent;
    background: var(--sidebar-surface-active);
    color: var(--sidebar-accent);
    box-shadow: inset 0.19rem 0 var(--sidebar-accent);
}

.sidebar-quick-link {
    border-color: transparent;
}

.sidebar-icon {
    width: 1.18rem;
    height: 1.18rem;
    stroke-width: 1.55;
}

.sidebar-navigation-group > .sidebar-link {
    grid-template-columns: 1.55rem minmax(0, 1fr) 0.85rem;
}

.sidebar-subnavigation {
    margin: 0.28rem 0 0 1.28rem;
    border-left-color: color-mix(in srgb, var(--sidebar-border) 84%, transparent);
    padding-left: 0.62rem;
}

.sidebar-subnavigation a {
    position: relative;
    border-radius: 0.45rem;
    padding: 0.42rem 0.54rem 0.42rem 0.8rem;
    font-size: 0.72rem;
}

.sidebar-subnavigation a::before {
    content: "";
    position: absolute;
    left: 0.28rem;
    top: 50%;
    width: 0.24rem;
    height: 0.24rem;
    border-radius: 50%;
    background: currentColor;
    transform: translateY(-50%);
    opacity: 0.55;
}

.sidebar-footer {
    gap: 0.35rem;
    border-top-color: var(--sidebar-border);
    padding: 0.68rem 0.9rem 0.86rem;
    background: color-mix(in srgb, var(--sidebar-background) 92%, transparent);
}

.sidebar-theme-row {
    min-height: 2.55rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    padding: 0.28rem 0.42rem 0.28rem 0.6rem;
    color: var(--sidebar-text);
}

.sidebar-theme-title {
    font-size: 0.8rem;
    font-weight: 620;
}

.sidebar-theme-toggle {
    width: 4.1rem;
    height: 2rem;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.15rem;
    margin: 0;
    border: 1px solid var(--sidebar-border);
    border-radius: 999px;
    padding: 0.15rem;
    background: var(--sidebar-surface);
    color: var(--sidebar-muted);
}

.theme-option {
    display: grid;
    place-items: center;
    border-radius: 50%;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.theme-option .sidebar-icon {
    width: 1rem;
    height: 1rem;
}

html:not([data-theme="dark"]) .theme-option-light,
html[data-theme="dark"] .theme-option-dark {
    background: var(--accent-gold);
    color: #fffaf0;
    box-shadow: 0 0.15rem 0.45rem rgba(92, 72, 35, 0.2);
}

.sidebar-theme-toggle:hover {
    border-color: var(--sidebar-accent);
}

.sidebar-logout-action {
    border: 1px solid transparent;
}

/* Filters and list toolbar */

.cocktail-filter-card {
    margin-bottom: 1.15rem;
    border-color: var(--border);
    border-radius: 0.72rem;
    padding: 0.8rem;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(8px);
}

.cocktail-filter-form {
    gap: 0.75rem;
}

.cocktail-search-row {
    grid-template-columns: minmax(14rem, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
}

.cocktail-search-field {
    position: relative;
}

.cocktail-search-field > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cocktail-search-field::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0.95rem;
    top: 50%;
    width: 0.8rem;
    height: 0.8rem;
    border: 1.8px solid var(--text-muted);
    border-radius: 50%;
    transform: translateY(-59%);
    pointer-events: none;
}

.cocktail-search-field::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 1.65rem;
    top: calc(50% + 0.34rem);
    width: 0.46rem;
    height: 1.8px;
    background: var(--text-muted);
    transform: rotate(45deg);
    transform-origin: left center;
    pointer-events: none;
}

.cocktail-search-field input {
    min-height: 2.8rem;
    padding-left: 2.65rem;
    background: var(--surface);
}

.cocktail-advanced-filters > summary.cocktail-filter-toggle {
    min-height: 2.55rem;
    border-radius: 0.6rem;
    padding: 0.55rem 0.85rem;
}

.cocktail-filter-panel {
    margin-top: 0.8rem;
    border-top-color: var(--border);
    padding-top: 0.8rem;
}

.active-filter-chip,
.characteristic-chip {
    border-color: color-mix(in srgb, var(--accent-gold) 42%, var(--border));
    background: color-mix(in srgb, var(--accent-gold) 11%, var(--surface-soft));
    color: var(--text);
}

/* Illustrated botanical cocktail cards */

.cocktail-grid {
    grid-template-columns: repeat(auto-fill, minmax(15.2rem, 1fr));
    gap: 0.85rem;
}

.cocktail-card {
    min-height: 23rem;
    display: grid;
    grid-template-rows: 10.75rem minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
    border-color: var(--border);
    border-radius: 0.72rem;
    padding: 0;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    transition:
        transform 150ms ease,
        border-color 150ms ease,
        box-shadow 150ms ease,
        background-color 150ms ease;
}

.cocktail-card:hover {
    transform: translateY(-0.22rem);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    background: var(--surface);
    box-shadow: 0 0.95rem 2.3rem rgba(62, 72, 55, 0.11);
}

html[data-theme="dark"] .cocktail-card:hover {
    box-shadow: 0 1rem 2.3rem rgba(0, 0, 0, 0.28);
}

.cocktail-card-visual {
    --art-liquid: #b8653b;
    --art-wash: #f0d9bd;
    position: relative;
    min-height: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    background:
        radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--art-wash) 78%, transparent), transparent 40%),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.78), transparent 24%),
        linear-gradient(145deg, var(--surface-soft), color-mix(in srgb, var(--art-wash) 24%, var(--surface)));
}

html[data-theme="dark"] .cocktail-card-visual {
    background:
        radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--art-liquid) 27%, transparent), transparent 43%),
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.05), transparent 22%),
        linear-gradient(145deg, #17291f, #0f1f18);
}

.cocktail-art-variant-1 { --art-liquid: #a85a37; --art-wash: #e8c8ad; }
.cocktail-art-variant-2 { --art-liquid: #7f9d67; --art-wash: #dce5c9; }
.cocktail-art-variant-3 { --art-liquid: #c18d48; --art-wash: #edd7aa; }
.cocktail-art-variant-4 { --art-liquid: #9b637a; --art-wash: #e2c7d2; }
.cocktail-art-variant-5 { --art-liquid: #647e95; --art-wash: #cddce3; }
.cocktail-art-variant-6 { --art-liquid: #8a6b47; --art-wash: #dfd0bb; }
.cocktail-art-variant-7 { --art-liquid: #687c55; --art-wash: #d2ddbf; }

.cocktail-card-botanical {
    position: absolute;
    right: -1.2rem;
    bottom: -1.35rem;
    width: 8.7rem;
    height: 7.2rem;
    object-fit: contain;
    opacity: 0.66;
    transform: rotate(-5deg);
}

html[data-theme="dark"] .cocktail-card-botanical {
    opacity: 0.28;
    filter: saturate(0.8) brightness(1.16);
}

.cocktail-card-glass-halo {
    position: absolute;
    width: 7.6rem;
    height: 7.6rem;
    border-radius: 48% 52% 45% 55%;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--art-liquid) 28%, transparent), transparent 68%);
    filter: blur(0.2rem);
    transform: rotate(-8deg);
}

.cocktail-card-glass,
.cocktail-card-garnish {
    position: relative;
    z-index: 1;
    fill: color-mix(in srgb, var(--art-liquid) 10%, transparent);
    stroke: color-mix(in srgb, var(--art-liquid) 78%, var(--text));
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cocktail-card-glass {
    width: 6.2rem;
    height: 6.2rem;
    stroke-width: 1.35;
    filter: drop-shadow(0 0.35rem 0.38rem rgba(61, 55, 37, 0.13));
}

.cocktail-card-garnish {
    position: absolute;
    right: 19%;
    bottom: 17%;
    width: 2.45rem;
    height: 2.45rem;
    fill: color-mix(in srgb, var(--accent) 10%, transparent);
    stroke: var(--accent);
    stroke-width: 1.45;
}

.cocktail-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
    padding: 0.9rem 0.95rem 0.95rem;
}

.cocktail-card-heading {
    gap: 0.12rem;
}

.cocktail-card-name {
    min-height: 0;
    color: var(--text);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.18;
}

.card-meta {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.cocktail-card .cocktail-characteristics {
    min-height: 1.55rem;
    gap: 0.32rem;
}

.characteristic-chip {
    border-radius: 0.38rem;
    padding: 0.27rem 0.47rem;
    font-size: 0.66rem;
    font-weight: 650;
}

.cocktail-card-attributes {
    grid-template-columns: repeat(4, 2.25rem);
    justify-content: start;
    gap: 0.45rem;
    margin-top: auto;
    border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    padding-top: 0.68rem;
}

.cocktail-attribute-tile {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
}

.cocktail-attribute-icon,
.recipe-meta-icon {
    --metadata-badge-shape: none;
    clip-path: none;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--accent);
}

.cocktail-attribute-icon::before,
.recipe-meta-icon::before {
    display: none;
}

.cocktail-attribute-icon {
    width: 2.25rem;
    height: 2.25rem;
}

.cocktail-attribute-icon .ui-icon {
    width: 1.45rem;
    height: 1.45rem;
    stroke-width: 1.45;
}

.cocktail-attribute-tile:hover .cocktail-attribute-icon {
    background: var(--accent-soft);
}

/* Detail pages, production pages, forms and tables inherit the same tool style */

.recipe,
.form-card,
.admin-card,
.costing-card,
.empty-state,
.data-table-wrapper,
.table-card,
.inventory-card {
    border-color: var(--border);
    border-radius: 0.75rem;
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.recipe-header {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--accent-soft) 46%, var(--surface)), var(--surface));
}

.recipe-header::after {
    content: "";
    position: absolute;
    top: -1.7rem;
    right: -0.6rem;
    width: 17rem;
    height: 9rem;
    background: url("botanical-sprig.svg") right center / contain no-repeat;
    opacity: 0.34;
    pointer-events: none;
}

.recipe-header > * {
    position: relative;
    z-index: 1;
}

.recipe-meta-grid {
    background: color-mix(in srgb, var(--surface-soft) 86%, transparent);
}

.recipe-meta-grid > .recipe-meta-item {
    gap: 0.48rem;
    padding: 0.85rem 0.65rem;
}

.recipe-meta-grid .recipe-meta-icon {
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: var(--accent-soft);
}

.recipe-meta-icon .ui-icon {
    width: 1.65rem;
    height: 1.65rem;
    stroke-width: 1.35;
}

.recipe-section,
.costing-card {
    background: var(--surface);
}

table th {
    color: var(--text-muted);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

table tbody tr:hover {
    background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
}

.flash {
    border-radius: 0.65rem;
    box-shadow: var(--shadow-card);
}

/* Collapsed botanical sidebar */

html.sidebar-collapsed .sidebar-brand-row {
    gap: 0.15rem;
}

html.sidebar-collapsed .sidebar-brand-mark {
    width: 2.8rem;
    height: 3.55rem;
}

html.sidebar-collapsed .sidebar-theme-row {
    justify-content: center;
    padding-inline: 0;
}

html.sidebar-collapsed .sidebar-theme-toggle {
    width: 2.35rem;
    height: 2.35rem;
    grid-template-columns: 1fr;
    border-radius: 50%;
}

html.sidebar-collapsed .theme-option {
    grid-area: 1 / 1;
}

html.sidebar-collapsed:not([data-theme="dark"]) .theme-option-dark,
html.sidebar-collapsed[data-theme="dark"] .theme-option-light {
    visibility: hidden;
}

html.sidebar-collapsed .sidebar-user-link,
html.sidebar-collapsed .sidebar-user-action {
    grid-template-columns: 2.15rem;
}

html.sidebar-collapsed .sidebar-user-action .sidebar-icon {
    width: 1.25rem;
    height: 1.25rem;
}

@media (max-width: 1180px) {
    .botanical-page-header {
        padding-right: 20rem;
    }

    .cocktail-grid {
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    }
}

@media (max-width: 980px) {
    .app-main::before {
        width: 22rem;
        opacity: 0.34;
    }

    .botanical-page-header {
        padding-right: 13rem;
    }

    .app-sidebar .sidebar-brand-mark {
        width: 2.8rem;
        height: 3.55rem;
    }

    .app-sidebar .sidebar-theme-row {
        justify-content: center;
        padding-inline: 0;
    }

    .app-sidebar .sidebar-theme-toggle {
        width: 2.35rem;
        height: 2.35rem;
        grid-template-columns: 1fr;
        border-radius: 50%;
    }

    .app-sidebar .theme-option {
        grid-area: 1 / 1;
    }

    html:not([data-theme="dark"]) .app-sidebar .theme-option-dark {
        visibility: hidden;
    }

    html[data-theme="dark"] .app-sidebar .theme-option-dark {
        visibility: visible;
    }

    html[data-theme="dark"] .app-sidebar .theme-option-light {
        visibility: hidden;
    }
}

@media (max-width: 760px) {
    .app-authenticated .main-content {
        width: min(calc(100% - 1.5rem), var(--max-width));
        padding-block: 1.45rem 4rem;
    }

    .app-main::before {
        display: none;
    }

    .botanical-page-header {
        min-height: 0;
        padding-right: 0;
    }

    .cocktail-search-row {
        grid-template-columns: 1fr 1fr;
    }

    .cocktail-search-field {
        grid-column: 1 / -1;
    }
}

@media (max-width: 540px) {
    .cocktail-grid {
        grid-template-columns: 1fr;
    }

    .cocktail-card {
        min-height: 0;
        grid-template-columns: 7.6rem minmax(0, 1fr);
        grid-template-rows: auto;
    }

    .cocktail-card-visual {
        min-height: 11rem;
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }

    .cocktail-card-glass {
        width: 4.9rem;
        height: 4.9rem;
    }

    .cocktail-card-garnish {
        right: 7%;
        bottom: 17%;
    }

    .cocktail-card-attributes {
        grid-template-columns: repeat(4, 2rem);
        gap: 0.25rem;
    }

    .cocktail-attribute-tile,
    .cocktail-attribute-icon {
        width: 2rem;
        height: 2rem;
    }
}


/* Botanical controls replace the former geometric badges. */
.geometric-icon-button,
.table-icon-action {
    clip-path: none;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface-soft);
}

.geometric-icon-button::before,
.table-icon-action::before {
    display: none;
}

.geometric-icon-button:hover,
.table-icon-action:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Botanical Apothecary icon language */

.ui-icon,
.sidebar-icon,
.button-icon,
.status-badge-icon,
.cocktail-card-glass,
.cocktail-card-garnish,
.cocktail-fallback-art svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-icon {
    width: 1.34rem;
    height: 1.34rem;
    stroke-width: 1.45;
}

.sidebar-link.is-current .sidebar-icon {
    stroke-width: 1.65;
}

.sidebar-subnavigation a {
    display: grid;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    align-items: center;
    gap: 0.42rem;
    padding-left: 0.52rem;
}

.sidebar-subnavigation a::before {
    display: none;
}

.sidebar-subnavigation .sidebar-icon {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

.sidebar-subnavigation a.is-current .sidebar-icon,
.sidebar-subnavigation a:hover .sidebar-icon {
    opacity: 1;
}

.button-with-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
}

.button-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}

.status-badge-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.status-badge-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex: 0 0 auto;
}

.cocktail-search-field input {
    padding-left: 2.45rem;
}

.cocktail-search-icon {
    position: absolute;
    z-index: 1;
    left: 0.8rem;
    top: 50%;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.cocktail-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.cocktail-filter-leading-icon {
    width: 1.05rem;
    height: 1.05rem;
}

/* Metadata icons follow the reference sheet: open line art, no badge frame. */
.cocktail-attribute-icon,
.recipe-meta-grid .recipe-meta-icon {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.cocktail-attribute-icon .ui-icon {
    width: 1.55rem;
    height: 1.55rem;
    stroke-width: 1.45;
}

.recipe-meta-grid .recipe-meta-icon {
    width: 2.75rem;
    height: 2.75rem;
}

.recipe-meta-icon .ui-icon {
    width: 2rem;
    height: 2rem;
    stroke-width: 1.4;
}

/* Prepared but not activated until the image/fallback selection rule lands. */
.cocktail-fallback-art {
    position: relative;
    isolation: isolate;
    min-height: 12rem;
    overflow: hidden;
    color: var(--accent);
}

.cocktail-fallback-art-glass {
    position: absolute;
    left: 50%;
    bottom: 12%;
    width: 42%;
    height: 68%;
    transform: translateX(-50%);
}

.cocktail-fallback-art-ice {
    position: absolute;
    left: 50%;
    bottom: 27%;
    width: 23%;
    height: 23%;
    color: var(--ice-accent, #9eb7bd);
    transform: translateX(-50%);
}

.cocktail-fallback-art-garnish {
    position: absolute;
    right: 16%;
    top: 17%;
    width: 24%;
    height: 24%;
    color: var(--botanical-accent, #617c58);
}

/* ========================================================================== */
/* Approved icon system: illustrated navigation + restrained Version B       */
/* ========================================================================== */

:root {
    --sidebar-width: 18.75rem;
    --sidebar-collapsed-width: 5.5rem;
}

/* Pure SVG vectors: illustrated Navigation A plus restrained Version B. */
.ui-icon,
.sidebar-icon,
.button-icon,
.status-badge-icon,
.cocktail-card-glass,
.cocktail-card-garnish {
    overflow: visible;
}

.sidebar-brand {
    text-transform: none;
    letter-spacing: 0;
}

.sidebar-brand-mark {
    width: 4.25rem;
    height: 4.75rem;
    flex: 0 0 auto;
}

.sidebar-brand-mark img {
    filter: none;
}

html[data-theme="dark"] .sidebar-brand-mark img {
    filter: invert(93%) sepia(9%) saturate(352%) hue-rotate(337deg) brightness(104%);
}

.sidebar-brand-copy {
    font-size: 1.22rem;
    line-height: 1.08;
}

.sidebar-link-illustrated {
    min-height: 4.35rem;
    grid-template-columns: 3.6rem minmax(0, 1fr);
    gap: 0.75rem;
    padding-block: 0.42rem;
}

.sidebar-link-illustrated .sidebar-icon-illustrated {
    width: 3.45rem;
    height: 3.45rem;
    color: var(--sidebar-accent);
}

.sidebar-link-illustrated.is-current {
    box-shadow: none;
}

.sidebar-link-illustrated:hover .sidebar-icon-illustrated,
.sidebar-link-illustrated.is-current .sidebar-icon-illustrated {
    transform: translateY(-1px) scale(1.025);
}

.sidebar-icon-illustrated {
    fill: currentColor;
    stroke: none;
    transition: transform 150ms ease;
}

.sidebar-icon-illustrated path {
    fill: currentColor;
    stroke: none;
}

.sidebar-quick-link {
    border-color: var(--sidebar-accent);
    background: var(--sidebar-accent);
    color: var(--accent-text);
}

.sidebar-quick-link:hover,
.sidebar-quick-link.is-current {
    border-color: var(--accent-hover);
    background: var(--accent-hover);
    color: var(--accent-text);
}

.sidebar-quick-link .sidebar-icon {
    width: 1.45rem;
    height: 1.45rem;
}

.sidebar-subnavigation .sidebar-icon {
    width: 1.08rem;
    height: 1.08rem;
}

/* Version-B actions are open, precise line drawings rather than badges. */
.geometric-icon-button,
.table-icon-action {
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--surface-soft) 84%, transparent);
}

.geometric-icon-button {
    width: 2.65rem;
    height: 2.65rem;
}

.geometric-icon-button .ui-icon,
.table-icon-action .ui-icon {
    width: 1.42rem;
    height: 1.42rem;
}

/* Metadata follows the approved Version-B reference proportions. */
.cocktail-card-attributes {
    grid-template-columns: repeat(4, 2.6rem);
    gap: 0.5rem;
}

.cocktail-attribute-tile,
.cocktail-attribute-icon {
    width: 2.6rem;
    height: 2.6rem;
}

.cocktail-attribute-icon .ui-icon {
    width: 1.9rem;
    height: 1.9rem;
}

.recipe-meta-grid > .recipe-meta-item {
    gap: 0.55rem;
    padding-block: 1rem;
}

.recipe-meta-grid .recipe-meta-icon {
    width: 3.35rem;
    height: 3.35rem;
}

.recipe-meta-icon .ui-icon {
    width: 2.75rem;
    height: 2.75rem;
}

/* Preserve the illustrated navigation when the sidebar is collapsed. */
html.sidebar-collapsed .sidebar-link-illustrated {
    min-height: 4.15rem;
    grid-template-columns: 3.45rem;
    padding-inline: 0.35rem;
}

html.sidebar-collapsed .sidebar-link-illustrated .sidebar-icon-illustrated {
    width: 3.3rem;
    height: 3.3rem;
}

@media (max-width: 980px) {
    .app-sidebar .sidebar-link-illustrated {
        min-height: 4.15rem;
        grid-template-columns: 3.45rem;
        padding-inline: 0.35rem;
    }

    .app-sidebar .sidebar-link-illustrated .sidebar-icon-illustrated {
        width: 3.3rem;
        height: 3.3rem;
    }
}


/* Responsive Version-B raster pilot for approved fallback combinations. */
.cocktail-fallback-art[data-fallback-renderer="raster"] {
    min-height: 0;
    height: 100%;
    display: block;
    background: #f8f3e8;
}

.cocktail-fallback-picture,
.cocktail-fallback-image {
    width: 100%;
    height: 100%;
    display: block;
}

.cocktail-fallback-image {
    object-fit: cover;
    object-position: center;
}

html[data-theme="dark"] .cocktail-fallback-art[data-fallback-renderer="raster"] {
    background: #182219;
}

html[data-theme="dark"] .cocktail-fallback-image {
    filter: brightness(0.78) contrast(1.05) saturate(0.84);
}

@media (max-width: 540px) {
    .cocktail-fallback-art[data-fallback-renderer="raster"] {
        min-height: 11rem;
    }
}


/* ========================================================================== */
/* Mobile application shell and cocktail views                                */
/* ========================================================================== */

.mobile-app-header,
.mobile-bottom-navigation,
.mobile-more-menu,
.mobile-menu-backdrop,
.mobile-filter-button,
.recipe-mobile-summary {
    display: none;
}

@media (max-width: 760px) {
    :root {
        --mobile-header-height: 4rem;
        --mobile-bottom-height: 4.75rem;
    }

    html.mobile-menu-open,
    html.mobile-menu-open body {
        overflow: hidden;
    }

    .app-shell {
        display: block;
        min-height: 100vh;
    }

    /* Safari disables sticky descendants when an ancestor clips overflow. */
    .app-main,
    .app-authenticated .main-content {
        overflow: visible;
    }

    .app-sidebar {
        display: none;
    }

    .mobile-app-header {
        position: fixed;
        z-index: 60;
        top: 0;
        left: 0;
        right: 0;

        min-height: var(--mobile-header-height);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 0.5rem;

        border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
        padding:
            max(0.45rem, env(safe-area-inset-top))
            max(0.75rem, env(safe-area-inset-right))
            0.45rem
            max(0.75rem, env(safe-area-inset-left));

        background: color-mix(in srgb, var(--surface) 94%, transparent);
        backdrop-filter: blur(18px);
        box-shadow: 0 0.35rem 1.4rem rgba(47, 52, 45, 0.08);
    }

    .mobile-app-title {
        overflow: hidden;
        color: var(--text);
        font-family: Georgia, "Times New Roman", serif;
        font-size: 1.12rem;
        line-height: 1;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-header-start {
        min-width: 0;
        display: flex;
        align-items: center;
        justify-self: start;
        gap: 0.1rem;
    }

    .mobile-header-theme-toggle {
        justify-self: end;
    }

    .mobile-header-icon {
        width: 1.35rem;
        height: 1.35rem;
        color: currentColor;
    }

    .mobile-theme-icon-light {
        display: none;
    }

    html[data-theme="dark"] .mobile-theme-icon-dark {
        display: none;
    }

    html[data-theme="dark"] .mobile-theme-icon-light {
        display: block;
    }

    .mobile-header-advanced-toggle[aria-pressed="true"] {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .mobile-header-action {
        width: 2.7rem;
        height: 2.7rem;
    }

    .mobile-header-action {
        display: grid;
        place-items: center;
        margin: 0;
        border: 0;
        border-radius: 50%;
        padding: 0;
        background: transparent;
        color: var(--text);
    }

    .mobile-header-action:hover,
    .mobile-header-action:focus-visible {
        background: var(--accent-soft);
        color: var(--accent);
    }

    .mobile-header-action .ui-icon {
        width: 1.35rem;
        height: 1.35rem;
    }

    .mobile-menu-lines,
    .mobile-menu-lines::before,
    .mobile-menu-lines::after {
        width: 1.25rem;
        height: 1.5px;
        display: block;
        border-radius: 999px;
        background: currentColor;
    }

    .mobile-menu-lines {
        position: relative;
    }

    .mobile-menu-lines::before,
    .mobile-menu-lines::after {
        position: absolute;
        left: 0;
        content: "";
    }

    .mobile-menu-lines::before {
        top: -0.38rem;
    }

    .mobile-menu-lines::after {
        top: 0.38rem;
    }

    .app-authenticated .main-content {
        width: min(calc(100% - 1.25rem), var(--max-width));
        padding:
            calc(var(--mobile-header-height) + 1rem)
            0
            calc(var(--mobile-bottom-height) + env(safe-area-inset-bottom) + 1.25rem);
    }

    .botanical-page-header {
        display: none;
    }


    .mobile-list-page-header {
        display: none;
    }

    .mobile-sticky-search {
        position: -webkit-sticky;
        position: sticky;
        z-index: 55;
        top: calc(var(--mobile-header-height) - 1px);
        align-self: start;
        isolation: isolate;
    }

    .cocktail-filter-card.mobile-sticky-search,
    .mobile-list-search-card {
        background: color-mix(in srgb, var(--background) 96%, transparent);
        -webkit-backdrop-filter: blur(18px);
        backdrop-filter: blur(18px);
        box-shadow: 0 0.45rem 1.2rem rgba(47, 52, 45, 0.08);
    }

    .mobile-list-search-card {
        display: block;
        margin: 0 0 0.9rem;
        border: 1px solid var(--border);
        border-radius: 0.75rem;
        padding: 0.55rem;
    }

    .mobile-list-search-field {
        position: relative;
        display: block;
    }

    .mobile-list-search-field input {
        min-height: 2.75rem;
        border-radius: 0.55rem;
        padding-left: 2.35rem;
        background: var(--surface);
        font-size: 0.84rem;
    }

    .mobile-list-search-submit,
    .mobile-list-search-reset {
        display: none;
    }

    .cocktail-filter-card {
        margin-bottom: 0.9rem;
        border-radius: 0.75rem;
        padding: 0.55rem;
        box-shadow: none;
    }

    .cocktail-filter-form {
        display: block;
    }

    .cocktail-search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 2.75rem;
        gap: 0.45rem;
    }

    .cocktail-search-field {
        grid-column: auto;
    }

    .cocktail-search-field > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .cocktail-search-field input {
        min-height: 2.75rem;
        border-radius: 0.55rem;
        padding-left: 2.35rem;
        font-size: 0.84rem;
    }

    .mobile-filter-button {
        position: relative;
        display: grid;
        place-items: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
        margin: 0;
        border: 1px solid var(--border);
        border-radius: 0.55rem;
        padding: 0;
        background: var(--surface-soft);
        color: var(--text);
    }

    .mobile-filter-button .ui-icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    .mobile-filter-count {
        position: absolute;
        top: -0.3rem;
        right: -0.3rem;
        min-width: 1.15rem;
        height: 1.15rem;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: var(--accent);
        color: var(--accent-text);
        font-size: 0.62rem;
        font-weight: 800;
    }

    .cocktail-search-submit,
    .cocktail-search-row > .button-secondary {
        display: none;
    }

    .cocktail-advanced-filters {
        margin-top: 0.55rem;
    }

    .cocktail-advanced-filters > summary {
        display: none;
    }

    .cocktail-advanced-filters:not([open]) {
        display: none;
    }

    .cocktail-filter-panel {
        border: 1px solid var(--border);
        border-radius: 0.65rem;
        padding: 0.75rem;
        background: var(--surface-soft);
    }

    .cocktail-filter-grid {
        grid-template-columns: 1fr;
    }

    .active-filter-list {
        margin-bottom: 0.75rem;
    }

    .cocktail-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .cocktail-card {
        min-height: 0;
        display: grid;
        grid-template-columns: 7.2rem minmax(0, 1fr);
        grid-template-rows: auto;
        overflow: hidden;
        border-radius: 0.75rem;
    }

    .cocktail-card-visual {
        width: 100%;
        min-height: 7.6rem;
        height: 100%;
        aspect-ratio: auto;
        border-right: 1px solid var(--border);
        border-bottom: 0;
    }

    .cocktail-fallback-picture,
    .cocktail-fallback-image {
        height: 100%;
    }

    .cocktail-fallback-image {
        object-fit: contain;
    }

    .cocktail-card-content {
        min-width: 0;
        gap: 0.45rem;
        padding: 0.72rem 0.75rem;
    }

    .cocktail-card-name {
        font-size: 0.98rem;
        line-height: 1.16;
    }

    .card-meta {
        font-size: 0.67rem;
    }

    .cocktail-card .cocktail-characteristics {
        min-height: 0;
        align-content: start;
        gap: 0.28rem;
    }

    .characteristic-chip {
        padding: 0.22rem 0.38rem;
        font-size: 0.61rem;
    }

    .cocktail-card-attributes {
        display: none;
    }

    html.advanced-view-enabled .cocktail-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    html.advanced-view-enabled .cocktail-card {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        align-content: start;
        border-radius: 0.65rem;
    }

    html.advanced-view-enabled .cocktail-card-visual {
        min-height: 0;
        height: auto;
        aspect-ratio: 1 / 1;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    html.advanced-view-enabled .cocktail-card-content {
        display: block;
        padding: 0.42rem 0.34rem 0.48rem;
        text-align: center;
    }

    html.advanced-view-enabled .cocktail-card-name {
        display: -webkit-box;
        overflow: hidden;
        font-size: clamp(0.66rem, 2.5vw, 0.78rem);
        line-height: 1.12;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    html.advanced-view-enabled .card-meta,
    html.advanced-view-enabled .cocktail-characteristics,
    html.advanced-view-enabled .cocktail-card-attributes {
        display: none;
    }

    .production-grid {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .production-grid .cocktail-card,
    html.advanced-view-enabled .production-grid .cocktail-card {
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.28rem;
        border-radius: 0.75rem;
        padding: 0.85rem;
    }

    .production-grid .cocktail-card-name,
    html.advanced-view-enabled .production-grid .cocktail-card-name {
        display: block;
        overflow: visible;
        font-size: 1rem;
        line-height: 1.18;
        text-align: left;
        text-overflow: clip;
        -webkit-line-clamp: initial;
    }

    .production-grid .card-meta,
    .production-grid .cocktail-card-link,
    html.advanced-view-enabled .production-grid .card-meta,
    html.advanced-view-enabled .production-grid .cocktail-card-link {
        display: block;
    }

    html.advanced-view-enabled .production-grid {
        grid-template-columns: 1fr;
    }


    /* Compact cocktail detail layout matching the mobile catalogue. */
    .detail-toolbar {
        margin-bottom: 0.7rem;
    }

    .detail-toolbar .back-link {
        display: none;
    }

    .detail-toolbar .icon-action-row {
        margin-left: auto;
    }

    .recipe {
        border-radius: 0.8rem;
    }

    .recipe-mobile-summary {
        display: grid;
        grid-template-columns: 7.2rem minmax(0, 1fr);
        align-items: center;
        gap: 0.8rem;
        border-bottom: 1px solid var(--border);
        padding: 0.72rem;
        background: var(--surface);
    }

    .recipe-mobile-visual {
        width: 7.2rem;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
        border-radius: 0.65rem;
        background: var(--surface-soft);
    }

    .recipe-mobile-visual .cocktail-card-visual {
        width: 100%;
        min-height: 0;
        height: 100%;
        aspect-ratio: 1 / 1;
        border: 0;
    }

    .recipe-mobile-visual .cocktail-fallback-image {
        object-fit: contain;
    }

    .recipe-mobile-summary-copy {
        min-width: 0;
        display: grid;
        align-content: center;
        gap: 0.55rem;
    }

    .recipe-mobile-summary h1 {
        margin: 0;
        color: var(--text);
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.45rem, 7vw, 2.15rem);
        line-height: 1.02;
        overflow-wrap: anywhere;
    }

    .recipe-mobile-summary .recipe-characteristics {
        min-height: 0;
        gap: 0.32rem;
    }

    .recipe-header {
        display: none;
    }

    .recipe-meta-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-bottom: 1px solid var(--border);
    }

    .recipe-meta-grid > .recipe-meta-item {
        min-width: 0;
        display: grid;
        justify-items: center;
        align-content: start;
        gap: 0.35rem;
        padding: 0.72rem 0.25rem;
        text-align: center;
    }

    .recipe-meta-grid > .recipe-meta-item-category {
        display: none;
    }

    .recipe-meta-grid .recipe-meta-icon {
        width: 2.45rem;
        height: 2.45rem;
    }

    .recipe-meta-grid .recipe-meta-icon .ui-icon {
        width: 1.55rem;
        height: 1.55rem;
    }

    .recipe-meta-grid strong {
        max-width: 100%;
        font-size: clamp(0.68rem, 2.8vw, 0.8rem);
        line-height: 1.16;
        overflow-wrap: anywhere;
    }

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

    .recipe-section {
        padding: 1rem 0.95rem 1.15rem;
    }

    .recipe-section + .recipe-section {
        border-top: 1px solid var(--border);
        border-left: 0;
    }

    .recipe-section h2 {
        margin-bottom: 0.75rem;
        font-size: 1.35rem;
    }

    .ingredient-list {
        gap: 0.65rem;
    }

    .recipe-step-list {
        margin-bottom: 0;
        padding-left: 1.35rem;
    }

    .recipe-step-list li + li {
        margin-top: 0.65rem;
    }


    .mobile-bottom-navigation {
        position: fixed;
        z-index: 65;
        right: 0.55rem;
        bottom: max(0.45rem, env(safe-area-inset-bottom));
        left: 0.55rem;

        min-height: var(--mobile-bottom-height);
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        align-items: stretch;

        border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
        border-radius: 1.25rem;
        padding: 0.28rem;

        background: color-mix(in srgb, var(--sidebar-background) 96%, transparent);
        color: var(--sidebar-text);
        backdrop-filter: blur(18px);
        box-shadow: 0 0.7rem 2rem rgba(27, 40, 31, 0.2);
    }

    .mobile-bottom-navigation a,
    .mobile-bottom-navigation button {
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.18rem;
        margin: 0;
        border: 0;
        border-radius: 0.9rem;
        padding: 0.35rem 0.2rem;
        background: transparent;
        color: inherit;
        font-size: 0.59rem;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
    }

    .mobile-bottom-navigation .mobile-bottom-icon {
        width: 1.45rem;
        height: 1.45rem;
        color: currentColor;
    }

    .mobile-bottom-navigation a.is-current {
        background: var(--sidebar-surface-active);
        color: var(--sidebar-accent);
    }

    .mobile-menu-backdrop {
        position: fixed;
        z-index: 70;
        inset: 0;
        display: block;
        background: rgba(11, 21, 15, 0.42);
        backdrop-filter: blur(2px);
    }

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

    .mobile-more-menu {
        position: fixed;
        z-index: 75;
        right: 0.55rem;
        bottom: calc(var(--mobile-bottom-height) + max(0.8rem, env(safe-area-inset-bottom)));
        left: 0.55rem;

        display: block;
        max-height: min(33rem, calc(100vh - 6rem));
        overflow-y: auto;
        border: 1px solid var(--border);
        border-radius: 1.15rem;
        padding: 0.55rem 0.8rem 0.85rem;
        background: var(--surface);
        color: var(--text);
        box-shadow: 0 1.2rem 3rem rgba(19, 31, 23, 0.28);

        opacity: 0;
        pointer-events: none;
        transform: translateY(1rem) scale(0.985);
        transform-origin: bottom center;
        transition: opacity 160ms ease, transform 160ms ease;
    }

    .mobile-more-menu.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .mobile-more-handle {
        width: 2.5rem;
        height: 0.24rem;
        margin: 0 auto 0.65rem;
        border-radius: 999px;
        background: var(--border-strong);
        opacity: 0.55;
    }

    .mobile-more-user {
        display: grid;
        grid-template-columns: 2.4rem minmax(0, 1fr);
        align-items: center;
        gap: 0.65rem;
        border-bottom: 1px solid var(--border);
        padding: 0.35rem 0.25rem 0.75rem;
    }

    .mobile-more-user-copy {
        min-width: 0;
        display: grid;
        gap: 0.1rem;
    }

    .mobile-more-user-copy strong,
    .mobile-more-user-copy span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-more-user-copy span {
        color: var(--text-muted);
        font-size: 0.72rem;
    }

    .mobile-more-links {
        display: grid;
        gap: 0.25rem;
        padding-top: 0.55rem;
    }

    .mobile-more-links a,
    .mobile-more-action {
        width: 100%;
        display: grid;
        grid-template-columns: 1.55rem minmax(0, 1fr);
        align-items: center;
        gap: 0.65rem;
        margin: 0;
        border: 0;
        border-radius: 0.65rem;
        padding: 0.7rem 0.6rem;
        background: transparent;
        color: var(--text);
        font-size: 0.82rem;
        font-weight: 650;
        text-align: left;
        text-decoration: none;
    }

    .mobile-more-links a:hover,
    .mobile-more-action:hover {
        background: var(--surface-soft);
        color: var(--accent);
    }

    .mobile-more-links .sidebar-icon {
        width: 1.3rem;
        height: 1.3rem;
    }

    .mobile-more-links form {
        margin: 0;
    }

    .mobile-more-logout {
        color: var(--danger);
    }
}

@media (max-width: 350px) {
    html.advanced-view-enabled .cocktail-grid {
        gap: 0.35rem;
    }

    html.advanced-view-enabled .cocktail-card-name {
        font-size: 0.62rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mobile-more-menu {
        transition: none;
    }
}

@media (max-width: 760px) {
    .cocktail-card .cocktail-fallback-art[data-fallback-renderer="raster"] {
        min-height: 7.6rem;
        height: 100%;
    }

    html.advanced-view-enabled
    .cocktail-card
    .cocktail-fallback-art[data-fallback-renderer="raster"] {
        min-height: 0;
        height: auto;
        aspect-ratio: 1 / 1;
    }
}