/*
    Alchemy
    DIY E-Liquid Recipe Manager

    Application Shell Styles
*/


/* ==============================
   Design Tokens
   ============================== */

:root {

    /* Backgrounds */
    --bg-primary: #111827;
    --bg-secondary: #1E293B;
    --bg-card: #273449;


    /* Text */
    --text-primary: #F9FAFB;
    --text-secondary: #9CA3AF;


    /* Accent */
    --accent-primary: #14B8A6;
    --accent-secondary: #38BDF8;


    /* Status */
    --success: #22C55E;
    --warning: #FBBF24;
    --danger: #EF4444;


    /* UI */
    --border-color: rgba(255,255,255,0.08);

    --radius-sm: 8px;
    --radius-md: 14px;

    --shadow:
        0 10px 30px rgba(0,0,0,0.25);
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.16);

    --motion-fast: 180ms;
    --motion-default: 220ms;
    --motion-slow: 250ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(.2, .8, .2, 1);
    --transition: var(--motion-default) var(--ease-standard);

    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-card-title: 16px;
    --font-size-section-title: 18px;
    --font-size-page-title: 24px;

    /* Premium foundation — spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;

    /* Premium foundation — controls */
    --control-height-sm: 34px;
    --control-height-md: 42px;
    --control-height-lg: 48px;
    --control-padding-inline: 14px;
    --focus-ring: 0 0 0 4px rgba(20,184,166,0.1);

    /* Premium foundation — surfaces */
    --surface-base: var(--bg-primary);
    --surface-raised: var(--bg-card);
    --surface-interactive: rgba(255,255,255,0.05);
    --surface-hover: rgba(255,255,255,0.1);
    --surface-selected: rgba(20,184,166,0.12);
    --surface-overlay: rgba(17,24,39,0.78);

    /* Premium foundation — borders and density */
    --border-subtle: var(--border-color);
    --border-interactive: rgba(255,255,255,0.12);
    --border-selected: var(--accent-primary);
    --page-gap: var(--space-8);
    --section-gap: var(--space-6);
    --field-gap: var(--space-2);
    --card-padding-compact: var(--space-4);
    --card-padding-default: var(--space-6);

}


/* ==============================
   Reset
   ============================== */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}



html,
body {

    height: 100%;

}


body {

    min-height: 100vh;

    overflow: hidden;

    background:
        var(--bg-primary);

    color:
        var(--text-primary);

    font-family:
        "Inter",
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: var(--font-size-base);

}



/* ==============================
   Application Layout
   ============================== */


#app {

    height: 100%;

    min-height: 100vh;

}



.alchemy-layout {

    display: flex;

    height: 100%;

    min-height: 100vh;

}



/* ==============================
   Sidebar
   ============================== */


.sidebar {

    width: 260px;

    height: 100%;

    flex-shrink: 0;

    background:
        var(--bg-secondary);


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


    display: flex;

    flex-direction: column;


    transition:
        width var(--transition);


    overflow: hidden;

}



.sidebar.collapsed {

    width: 78px;

}



/* ==============================
   Sidebar Header
   ============================== */


.sidebar-header {

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 18px;


}



.brand {

    display: flex;

    align-items: center;

    gap:
        12px;


    overflow: hidden;

}



.brand-icon {

    width: 42px;

    height: 42px;


    display: flex;

    align-items: center;

    justify-content: center;


    background: transparent;
    overflow: visible;

}

.brand-symbol {
    width: 68px;
    max-width: none;
    height: auto;
    display: block;
    flex: 0 0 auto;
}

.sidebar-brand-toggle {
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    color: inherit;
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.sidebar-brand-toggle:hover { background: var(--surface-hover); }
.sidebar-brand-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }



.brand-text {

    white-space: nowrap;

}



.brand-text strong {

    font-size:
        20px;

    font-weight:
        700;

}



.brand-text span {

    font-size:
        11px;

    color:
        var(--text-secondary);

}



/* esconder texto quando recolhido */


.sidebar.collapsed .brand-text {

    opacity:
        0;

    width:
        0;

}



/* ==============================
   Navigation
   ============================== */


.navigation {

    padding:
        10px;

}



.nav-item {


    height:
        44px;


    display:
        flex;


    align-items:
        center;


    gap:
        14px;


    padding:
        0 14px;


    margin-bottom:
        6px;


    color:
        var(--text-secondary);


    text-decoration:
        none;


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


    transition:
        var(--transition);


    white-space:
        nowrap;


}



.nav-item:hover {


    background:
        rgba(255,255,255,0.06);


    color:
        var(--text-primary);


}



.nav-item.active {


    background:
        rgba(20,184,166,0.15);


    color:
        var(--accent-primary);


}



.nav-icon {


    width:
        22px;


    text-align:
        center;


    font-size:
        18px;


}



.sidebar.collapsed .nav-label {


    opacity:
        0;


    width:
        0;


}



/* ==============================
   Main Content
   ============================== */


.main-content {


    flex:
        1;


    display:
        flex;


    flex-direction:
        column;

    min-width: 0;

    min-height: 0;

    height: 100%;

    overflow: hidden;



}



.top-header {


    height:
        90px;


    display:
        flex;


    align-items:
        center;

    flex-shrink: 0;


    padding:
        0 32px;


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



}


#page-content {

    flex: 1;

    min-height: 0;

    overflow-y: auto;

}



.top-header h2 {


    font-size:
        var(--font-size-section-title);


}



/* ==============================
   Content
   ============================== */


.content-area {


    padding:
        32px;


}



.welcome-card {


    background:
        var(--bg-card);


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


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


    padding:
        32px;


    box-shadow:
        var(--shadow);



}



.welcome-card h3 {


    margin-bottom:
        12px;


    font-size:
        24px;


}



.welcome-card p {


    color:
        var(--text-secondary);


    line-height:
        1.6;


}



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


@media(max-width:768px){


    .sidebar {

        width:
            78px;

    }


    .brand-text,
    .nav-label {

        display:
            none;

    }


}

/* ==============================
   Dashboard
   ============================== */


.page-container {

    padding: 32px;

    min-height: 100%;

}



.page-title {

    margin-bottom:
        32px;

}



.page-title h1 {

    font-size:
        var(--font-size-page-title);

    margin-bottom:
        8px;

}



.page-title p {

    color:
        var(--text-secondary);

}



/* ==============================
   Statistics Cards
   ============================== */


.stats-grid {

    display:
        grid;


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


    gap:
        20px;


    margin-bottom:
        32px;

}



.stat-card {


    background:
        var(--bg-card);


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


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


    padding:
        24px;


    transition:
        var(--transition);


}



.stat-card:hover {


    transform:
        translateY(-3px);


    box-shadow:
        var(--shadow);

}



.stat-card span {


    display:
        block;


    color:
        var(--text-secondary);


    font-size:
        var(--font-size-base);


    margin-bottom:
        12px;


}



.stat-card strong {


    font-size:
        36px;


    font-weight:
        700;


    color:
        var(--accent-primary);

}



/* ==============================
   Sections
   ============================== */


.section-card {


    background:
        var(--bg-card);


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


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


    padding:
        24px;

    margin-bottom:
        24px;


}



.section-card h2 {


    margin-bottom:
        20px;


    font-size:
        var(--font-size-card-title);


}



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


.recipe-preview {


    padding:
        16px;


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


    background:
        rgba(255,255,255,0.03);


    margin-bottom:
        12px;


}



.recipe-preview h3 {


    margin-bottom:
        6px;


    font-size:
        var(--font-size-card-title);


}



.recipe-preview p {


    color:
        var(--text-secondary);


    font-size:
        var(--font-size-base);


}



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


@media(max-width:900px){


    .stats-grid {

        grid-template-columns:
            1fr;

    }


}

/* ======================================================
   Dashboard / Home
====================================================== */


.welcome-card {

    border-radius: 16px;

    padding: 28px;

    margin-bottom: 24px;

    border:
        1px solid rgba(255,255,255,0.05);

}

.welcome-card h1 {

    margin: 0 0 8px;

    font-size: var(--font-size-page-title);

}

.welcome-card p {

    margin: 0;

    color:
        #bdbdbd;

}


.stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 20px;

    margin-bottom: 32px;

}

.card strong {

    font-size: 34px;

}

.recent-recipes h2 {

    margin-top:0;

}

.recipe-list {

    display:flex;

    flex-direction:column;

    gap:12px;

}


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

.recipe-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

}

.favorite-icon {

    flex-shrink: 0;

    font-size: 18px;

}

/* ==============================
   Statistic Card
============================== */

.stat-card {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



.stat-icon {

    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 22px;

    border-radius: 12px;

    background: rgba(20, 184, 166, 0.15);

}



.stat-card strong {

    font-size: 38px;

    color: var(--accent-primary);

    line-height: 1;

}



.card-title {

    color: var(--text-secondary);

    font-size: var(--font-size-base);

}

.warning-value {

    color: var(--warning);

}

/* ==============================
   Flavors Library
   ============================== */

.flavors-grid {

    display: grid;

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

    gap: 20px;

}

.flavor-card {
    display: flex;
    flex-direction: column;
}

.flavor-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: var(--space-3);

    margin-bottom: 0;

}

.flavor-card-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.flavor-card-context .flavor-category {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.context-menu {
    position: relative;
    flex: 0 0 auto;
}

.context-menu__trigger {
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
}

.context-menu__trigger:hover,
.context-menu__trigger[aria-expanded="true"] {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.context-menu__trigger:focus-visible,
.context-menu__item:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.context-menu__panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + var(--space-1));
    right: 0;
    width: min(220px, calc(100vw - var(--space-6)));
    padding: var(--space-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
}

.context-menu__panel[hidden] {
    display: none !important;
}

.context-menu.opens-up .context-menu__panel {
    top: auto;
    bottom: calc(100% + var(--space-1));
}

.context-menu.is-open,
.flavors-grid > article:has(.context-menu.is-open) {
    z-index: 31;
}

.context-menu__item {
    width: 100%;
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.context-menu__item:hover { background: var(--surface-hover); }
.context-menu__item.is-danger { color: var(--danger); }
.context-menu__separator { display: block; height: 1px; margin: var(--space-1); background: var(--identity-divider); }

.inventory-context { display: grid; gap: 2px; color: var(--text-secondary); }
.inventory-context strong { color: var(--text-primary); }
.adjustment-operation-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); align-items: end; gap: var(--space-3); }
.adjustment-operation-grid .segmented-control-track { width: 100%; }
.adjustment-operation-grid .segmented-control-item { flex: 1 0 auto; }
.adjustment-reason-field textarea { min-height: 76px; resize: vertical; }
.post-create-flavor { display: grid; gap: var(--space-3); }
.post-create-flavor p:last-child { color: var(--text-secondary); }

.flavor-header h3 {

    font-size: var(--font-size-card-title);

    margin-bottom: 4px;

}

.flavor-brand {

    color: var(--text-secondary);

    font-size: var(--font-size-sm);

    font-weight: 500;

}

.flavor-search {

    width: 100%;

    max-width: none;

}

.flavors-body {

    display: grid;

    grid-template-columns: 1fr;

    gap: 24px;

}

.flavors-main {

    display: flex;

    flex-direction: column;

    gap: 24px;

}

@media (min-width: 720px) {
    .flavor-stats {

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

    }

}

@media (max-width: 719px) {
    .flavor-stats,
    .flavors-body {

        grid-template-columns: 1fr;

    }

    .flavors-grid {

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

    }

}

/* Settings — v0.8.0 */

.about-alchemy-card {
    padding: var(--space-5);
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
}

.about-alchemy-brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.about-alchemy-brand img {
    width: 112px;
    max-width: none;
    height: auto;
    margin-inline: -28px;
    display: block;
}

.about-alchemy-brand h2 { font-size: var(--font-size-card-title); }
.about-alchemy-brand p,
.about-alchemy-version { color: var(--text-secondary); }
.about-alchemy-motto { color: var(--accent-primary); font-weight: 600; }

.import-backup-card.is-highlighted {
    border-color: var(--border-selected);
    box-shadow: var(--focus-ring);
}

.settings-form {
    display: grid;
    gap: 20px;
}

.settings-section {
    display: grid;
    gap: 20px;
    margin: 0;
}

.settings-section-header {
    display: grid;
    gap: 6px;
}

.settings-section-header p,
.settings-feedback {
    color: var(--text-secondary);
}

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

.input-with-unit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.input-with-unit span {
    min-width: 42px;
    color: var(--text-secondary);
}

.field-error {
    display: block;
    min-height: 18px;
    margin-top: 6px;
    color: var(--danger);
    font-size: var(--font-size-sm);
}

.settings-checkbox {
    align-self: center;
}

.settings-maintenance {
    justify-items: start;
}

.settings-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
}

.settings-feedback {
    margin-right: auto;
}

.data-management {
    display: grid;
    gap: 20px;
    margin-top: 32px;
}

.data-management-grid {
    display: grid;
}

.data-card {
    align-content: start;
    overflow-wrap: anywhere;
}

.data-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.data-management .hidden {
    display: none;
}

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

.backup-summary,
.integrity-report,
.danger-confirmation,
.automatic-backup {
    display: grid;
    gap: 14px;
}

.backup-summary dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}

.backup-summary dl div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.backup-summary dt,
.integrity-finding span,
.integrity-finding small {
    color: var(--text-secondary);
}

.backup-summary dd {
    font-weight: 600;
}

.backup-restore-modal {
    width: min(92vw, 520px);
}

.backup-restore-confirmation,
.backup-restore-information,
.backup-restore-content {
    min-width: 0;
    display: grid;
    gap: var(--space-4);
}

.backup-restore-introduction {
    display: grid;
    gap: var(--space-1);
}

.backup-restore-introduction p,
.backup-restore-confirmation h3,
.backup-restore-warning {
    margin: 0;
}

.backup-restore-confirmation h3 {
    font-size: var(--font-size-card-title);
}

.backup-restore-information dl,
.backup-restore-content ul {
    display: grid;
    gap: var(--space-3);
    margin: 0;
}

.backup-restore-information dl div {
    display: grid;
    gap: var(--space-1);
}

.backup-restore-information dt {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.backup-restore-information dd {
    margin: 0;
    font-weight: 600;
}

.backup-restore-content ul {
    padding: 0;
    list-style: none;
    overflow-x: auto;
}

.backup-restore-content li {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    white-space: nowrap;
}

.backup-restore-item-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.backup-restore-item-dots {
    min-width: var(--space-3);
    flex: 1;
    border-bottom: 1px dotted var(--text-secondary);
}

.backup-restore-content strong {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.backup-restore-warning {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.integrity-findings {
    display: grid;
    gap: 10px;
    max-height: 420px;
    overflow-y: auto;
}

.integrity-finding {
    display: grid;
    gap: 4px;
    padding: 12px;
    border-left: 3px solid var(--border-color);
    background: rgba(255, 255, 255, 0.03);
}

.integrity-error {
    border-left-color: var(--danger);
}

.integrity-warning {
    border-left-color: #fbbf24;
}

.integrity-info {
    border-left-color: var(--accent-primary);
}

.danger-zone {
    border-color: var(--danger);
}

.danger-confirmation {
    padding-top: 18px;
    border-top: 1px solid var(--danger);
}

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

    .backup-summary dl {
        grid-template-columns: 1fr;
    }

    .settings-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-feedback {
        margin-right: 0;
    }

    .data-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Production history — v0.7.0 */

.history-custom-period {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.history-custom-period.hidden {
    display: none;
}

.history-custom-period label,
.history-review-form label {
    display: grid;
    gap: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.history-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 18px 0 22px;
    padding: 14px 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: rgba(255,255,255,0.025);
}

.history-summary strong {
    color: var(--text-primary);
}

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

.history-list > article {
    border-radius: var(--radius-md);
    cursor: pointer;
}

.history-list > article:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

.history-card {
    display: grid;
    gap: var(--space-3);
}

.history-card-header,
.history-batch-meta,
.history-detail-meta,
.history-detail-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.history-card-header {
    align-items: flex-start;
    justify-content: space-between;
}

.history-card-header h2 {
    margin-bottom: 4px;
    font-size: var(--font-size-card-title);
}

.history-card-header time,
.history-batch-meta,
.history-comment,
.history-missing-recipe {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.history-stock-status {
    min-height: 24px;
    padding-inline: var(--space-2);
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.history-stock-status.is-updated { color: var(--accent-primary); background: rgba(20,184,166,0.12); }
.history-stock-status.is-not-updated { color: var(--warning); background: rgba(251,191,36,0.12); }
.history-stock-status.is-unknown { color: var(--text-secondary); background: rgba(255,255,255,0.06); }

.history-cost {
    color: var(--text-primary);
}

.history-comment {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.history-detail-dialog .section-card {
    margin: 18px 0 0;
}

.history-detail-meta {
    padding: 12px 0;
    color: var(--text-secondary);
}

.history-detail-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.history-detail-summary span {
    display: grid;
    gap: 5px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.history-detail-summary strong {
    color: var(--text-primary);
}

.history-review-form {
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.history-review-form textarea {
    min-height: 100px;
    resize: vertical;
}

@media (max-width: 900px) {
    .history-detail-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 719px) {
    .page-container {
        padding: 20px;
    }

    .history-detail-summary {
        grid-template-columns: 1fr;
    }

    .history-custom-period,
    .history-card-header {
        flex-direction: column;
    }

    .history-custom-period label,
    .history-custom-period input {
        width: 100%;
    }

    .history-comment {
        display: -webkit-box;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
}

/* Inventory — v0.6.0 */

.purchase-summary > div,
.movement-item > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.movement-item span {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.stock-status {
    min-height: 24px;
    flex: 0 0 auto;
    padding-inline: var(--space-2);
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
}

.stock-status-healthy { color: var(--accent-primary); background: rgba(20,184,166,0.12); }
.stock-status-warning { color: var(--warning); background: rgba(251,191,36,0.12); }
.stock-status-critical,
.stock-status-empty { color: var(--danger); background: rgba(239,68,68,0.12); }
.stock-status-unknown { color: var(--text-secondary); background: rgba(255,255,255,0.06); }

.inventory-form,
.purchase-summary,
.movement-list {
    display: grid;
    gap: 16px;
}

.purchase-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.03);
}

.purchase-summary > div {
    flex-direction: column;
    gap: 4px;
}

.cost-context { grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; }
.cost-preview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cost-confirmation {
    padding: var(--space-3);
    border-left: 2px solid var(--warning);
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--warning) 8%, transparent);
    font-size: var(--font-size-sm);
}
.cost-bottle-error { display: grid; gap: var(--space-2); }
.cost-bottle-error p { margin: 0; }

.movement-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-color);
}

.movement-item > div {
    flex-direction: column;
    gap: 4px;
}

.movement-item p {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.movement-positive { color: var(--accent-primary); }
.movement-negative { color: var(--danger); }

@media (max-width: 719px) {
    .purchase-summary {
        grid-template-columns: 1fr;
    }

    .cost-context { grid-template-columns: 1fr; }

}

.empty-state,
.flavors-empty {
    width: min(560px, 100%);
    margin-inline: auto;
    padding: var(--space-8) var(--space-5);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.badge,
.flavor-category {
    min-height: 24px;
    padding: 0 var(--space-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border-radius: 999px;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--surface-interactive) 68%, transparent);
    font-size: var(--font-size-xs);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard);
}

.badge:hover,
.flavor-category:hover { background: color-mix(in srgb, var(--surface-hover) 72%, transparent); }

/* ======================================================
   Alchemy Premium Foundation — v0.9.5A
====================================================== */

.icon {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
}

.button {
    height: var(--control-height-md);
    min-height: var(--control-height-md);
    padding-inline: var(--control-padding-inline);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--surface-interactive);
    font: inherit;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--motion-fast) var(--ease-emphasized);
}

.button:hover { border-color: var(--border-interactive); background: var(--surface-hover); }
.button:active { transform: scale(.98); background: var(--surface-selected); }
.button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.button:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.button-primary { border-color: var(--accent-primary); background: var(--accent-primary); color: var(--bg-primary); font-weight: 700; }
.button-primary:hover { border-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 88%, white); }
.button-secondary { color: var(--text-primary); }
.button-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--text-secondary);
}

.button-ghost:hover {
    color: var(--text-primary);
    background: var(--surface-hover);
}

.button-compact {
    height: var(--control-height-sm);
    min-height: var(--control-height-sm);
    padding-inline: var(--space-3);
}

.button-large {
    height: var(--control-height-lg);
    min-height: var(--control-height-lg);
    padding-inline: var(--space-5);
}

.button-danger { border-color: rgba(239,68,68,0.45); color: var(--danger); background: transparent; }
.button-danger:hover { border-color: var(--danger); color: var(--text-primary); background: rgba(239,68,68,0.12); }

.button-icon-only {
    width: var(--control-height-md);
    min-width: var(--control-height-md);
    padding: 0;
    display: inline-grid;
    place-items: center;
}

.button-icon-only.button-compact { width: var(--control-height-sm); min-width: var(--control-height-sm); }
.button-icon-only.button-large { width: var(--control-height-lg); min-width: var(--control-height-lg); }

.badge-compact {
    min-height: 22px;
    padding-inline: var(--space-1);
}

.badge-accent { color: var(--accent-primary); background: var(--surface-selected); }
.badge-success { color: var(--success); background: rgba(34,197,94,0.12); }
.badge-warning { color: var(--warning); background: rgba(251,191,36,0.12); }
.badge-danger { color: var(--danger); background: rgba(239,68,68,0.12); }
.badge-info { color: var(--accent-secondary); background: rgba(56,189,248,0.12); }

.field-control {
    min-height: var(--control-height-md);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    background: var(--surface-interactive);
    overflow: hidden;
}

.form-field input,
.form-field select,
.form-field textarea,
.flavor-search,
select:not([multiple]),
.ingredient-editor-row input,
.ingredient-editor-row select,
.history-custom-period input,
.history-review-form input,
.history-review-form textarea,
.initial-review-row input {
    width: 100%;
    min-height: var(--control-height-md);
    padding: 0 var(--control-padding-inline);
    border: 1px solid var(--border-interactive);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--surface-interactive);
    font: inherit;
    line-height: 1.4;
    color-scheme: dark;
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.form-field textarea,
.history-review-form textarea {
    min-height: 96px;
    padding-block: var(--space-3);
    resize: vertical;
}

.form-field input::placeholder,
.form-field textarea::placeholder,
.flavor-search::placeholder,
.ingredient-editor-row input::placeholder { color: var(--text-secondary); opacity: 0.85; }

.form-field input:hover:not(:disabled),
.form-field select:hover:not(:disabled),
.form-field textarea:hover:not(:disabled),
.flavor-search:hover:not(:disabled),
select:not([multiple]):hover:not(:disabled),
.ingredient-editor-row input:hover:not(:disabled),
.ingredient-editor-row select:hover:not(:disabled),
.history-custom-period input:hover:not(:disabled),
.history-review-form input:hover:not(:disabled),
.history-review-form textarea:hover:not(:disabled),
.initial-review-row input:hover:not(:disabled) {
    border-color: color-mix(in srgb, var(--border-selected) 58%, var(--border-interactive));
    background: color-mix(in srgb, var(--surface-hover) 58%, var(--surface-interactive));
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.flavor-search:focus,
select:not([multiple]):focus,
.ingredient-editor-row input:focus,
.ingredient-editor-row select:focus,
.history-custom-period input:focus,
.history-review-form input:focus,
.history-review-form textarea:focus,
.initial-review-row input:focus {
    outline: none;
    border-color: var(--border-selected);
    box-shadow: var(--focus-ring);
}

.form-field input:disabled,
.form-field select:disabled,
.form-field textarea:disabled,
.flavor-search:disabled,
select:not([multiple]):disabled,
.ingredient-editor-row input:disabled,
.ingredient-editor-row select:disabled {
    color: var(--text-secondary);
    background: var(--bg-secondary);
    opacity: 0.65;
    cursor: not-allowed;
}

.form-field [aria-invalid="true"],
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(239,68,68,0.18); }

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill { -webkit-text-fill-color: var(--text-primary); box-shadow: 0 0 0 1000px var(--bg-card) inset; }

.field-control input,
.field-control select {
    min-height: calc(var(--control-height-md) - 2px);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.field-addon {
    padding-inline: var(--control-padding-inline);
    color: var(--text-secondary);
    white-space: nowrap;
}

.field-description,
.field-hint,
.field-message {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.field-message,
.form-field.has-error > .field-label {
    color: var(--danger);
}

.progress-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.progress-success > span { background: var(--success); }
.progress-warning > span { background: var(--warning); }
.progress-danger > span { background: color-mix(in srgb, var(--danger) 72%, var(--accent-primary)); }

.empty-state-rich {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
}

.empty-state h2 { color: var(--text-primary); font-size: var(--font-size-card-title); }
.empty-state p { max-width: 48ch; line-height: 1.5; }
.empty-state > .button { margin-top: var(--space-2); }
.identity-list .empty-state,
.data-card .empty-state,
.integrity-report.empty-state { width: 100%; padding: var(--space-4) var(--space-3); }

.empty-state-icon {
    color: var(--text-secondary);
}

.inline-feedback {
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--success);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--success) 8%, transparent);
    transition: opacity var(--transition);
}

.inline-feedback.hidden { display: none; }
.inline-feedback.is-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); }
.inline-feedback.is-error { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.inline-feedback.is-info { border-left-color: var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 8%, transparent); }

.toast-region {
    position: fixed;
    z-index: 80;
    top: calc(var(--shell-header-height, 68px) + var(--space-3));
    right: var(--space-4);
    width: min(380px, calc(100vw - 32px));
    display: grid;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    min-height: var(--control-height-lg);
    padding: var(--space-3);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    border: 1px solid var(--border-interactive);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
    box-shadow: var(--shadow);
    pointer-events: auto;
    animation: toast-in var(--motion-default) var(--ease-emphasized);
}

.toast p { line-height: 1.4; }
.toast-icon { display: inline-grid; color: var(--accent-primary); }
.toast-success { border-left-color: var(--success); }
.toast-success .toast-icon { color: var(--success); }
.toast-warning { border-left-color: var(--warning); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-error { border-left-color: var(--danger); }
.toast-error .toast-icon { color: var(--danger); }
.toast-close { width: var(--control-height-sm); height: var(--control-height-sm); display: inline-grid; place-items: center; border: 0; border-radius: var(--radius-sm); color: var(--text-secondary); background: transparent; cursor: pointer; }
.toast-close:hover { color: var(--text-primary); background: var(--surface-hover); }
.toast-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.toast.is-leaving { animation: toast-out var(--motion-fast) var(--ease-standard) forwards; }

@keyframes toast-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }

.control-label {
    margin-bottom: var(--space-2);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.segmented-control,
.choice-chips {
    padding: 0;
    border: 0;
}

.segmented-control-track {
    display: inline-flex;
    max-width: 100%;
    padding: var(--space-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-interactive);
    overflow-x: auto;
}

.segmented-control-item,
.choice-chip {
    cursor: pointer;
}

.segmented-control-item input,
.choice-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.segmented-control-item span {
    min-height: var(--control-height-sm);
    padding-inline: var(--space-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: calc(var(--radius-sm) - 2px);
    color: var(--text-secondary);
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.segmented-control-item input:checked + span,
.choice-chip input:checked + span {
    color: var(--accent-primary);
    background: var(--surface-selected);
    box-shadow: inset 0 0 0 1px var(--border-selected);
}

.segmented-control-item:hover span,
.choice-chip:hover span { color: var(--text-primary); background: var(--surface-hover); }

.segmented-control-item input:focus-visible + span,
.choice-chip input:focus-visible + span,
.toggle-switch input:focus-visible + .toggle-switch-track,
.star-rating-option:focus-visible,
.star-rating-zero:focus-visible,
.star-rating-clear:focus-visible,
.modal-close:focus-visible,
.disclosure summary:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.segmented-control-item input:disabled + span,
.choice-chip input:disabled + span {
    opacity: 0.45;
    cursor: not-allowed;
}

.volume-selector {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.volume-selector-presets { min-width: 0; }
.volume-selector-presets .segmented-control-track { overflow-x: visible; }

.volume-selector-custom {
    display: none;
    min-width: 180px;
    flex: 0 1 220px;
}

.volume-selector:has(input[value="other"]:checked) .volume-selector-custom { display: grid; }

.field-label-with-help {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.help-tooltip { position: relative; display: inline-flex; }

.help-tooltip-trigger {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--text-secondary);
    background: transparent;
    cursor: help;
}

.help-tooltip-trigger:hover { color: var(--accent-primary); background: var(--surface-hover); }
.help-tooltip-trigger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.help-tooltip-content {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--space-2));
    z-index: 20;
    width: max-content;
    max-width: min(280px, calc(100vw - 48px));
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), visibility var(--motion-fast) var(--ease-standard);
    pointer-events: none;
}

.help-tooltip:hover .help-tooltip-content,
.help-tooltip:focus-within .help-tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.choice-chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.choice-chip span {
    min-height: var(--control-height-sm);
    padding: var(--space-2) var(--space-3);
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--surface-interactive);
    line-height: 1;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}

.star-rating-input {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.rating-readonly { min-height: var(--control-height-sm); display: inline-flex; align-items: center; gap: var(--space-1); color: var(--warning); }
.rating-readonly.is-empty { color: var(--text-secondary); font-size: var(--font-size-sm); letter-spacing: 0; }

.star-rating-option,
.star-rating-zero,
.star-rating-clear,
.modal-close {
    border: 0;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
}

.star-rating-option {
    width: var(--control-height-md);
    height: var(--control-height-md);
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-sm);
    transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-emphasized);
}

.star-rating-zero {
    min-width: var(--control-height-sm);
    height: var(--control-height-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.star-rating-zero[aria-checked="true"] {
    color: var(--accent-primary);
    border-color: var(--border-selected);
    background: var(--surface-selected);
}

[data-rating-input].is-invalid,
[data-flavor-rating-host].is-invalid,
.premium-rating-field > .is-invalid {
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 2px var(--danger);
}

.choice-chips.is-invalid .choice-chips-list {
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 2px var(--danger);
}

.star-rating-option[aria-checked="true"] {
    color: var(--warning);
    transform: scale(1.06);
}

.star-rating-option:hover {
    color: var(--warning);
    background: var(--surface-hover);
}

.star-rating-input:has(.star-rating-option:hover) .star-rating-option { color: var(--text-secondary); }
.star-rating-input .star-rating-option:hover,
.star-rating-input .star-rating-option:has(~ .star-rating-option:hover) { color: var(--warning); }

.star-rating-clear {
    min-height: var(--control-height-sm);
    margin-left: var(--space-2);
    padding-inline: var(--space-2);
    border-radius: var(--radius-sm);
}

.star-rating-option:disabled,
.star-rating-zero:disabled,
.star-rating-clear:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.toggle-switch {
    min-height: var(--control-height-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    cursor: pointer;
}

.toggle-switch:hover .toggle-switch-track { border-color: var(--border-selected); }
.toggle-switch:has(input:disabled) { color: var(--text-secondary); cursor: not-allowed; }

.toggle-switch-copy {
    display: grid;
    gap: var(--space-1);
}

.toggle-switch-copy small {
    color: var(--text-secondary);
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-switch-track {
    width: 44px;
    height: 24px;
    padding: 2px;
    flex: 0 0 auto;
    border: 1px solid var(--border-interactive);
    border-radius: 999px;
    background: var(--surface-interactive);
    transition: border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}

.toggle-switch-thumb {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-secondary);
    transition: transform var(--motion-fast) var(--ease-emphasized), background var(--motion-fast) var(--ease-standard);
}

.toggle-switch input:checked + .toggle-switch-track {
    border-color: var(--border-selected);
    background: var(--surface-selected);
}

.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb {
    transform: translateX(20px);
    background: var(--accent-primary);
}

.toggle-switch input:disabled + .toggle-switch-track {
    opacity: 0.45;
}

.disclosure {
    border-top: 1px solid var(--border-subtle);
}

.disclosure summary {
    min-height: var(--control-height-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    cursor: pointer;
    list-style: none;
}

.disclosure summary::-webkit-details-marker {
    display: none;
}

.disclosure-icon {
    transition: transform var(--transition);
}

.disclosure[open] .disclosure-icon {
    transform: rotate(180deg);
}

.disclosure-content {
    padding-bottom: var(--space-4);
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 20;
    padding: var(--space-5);
    display: grid;
    place-items: center;
    background: var(--surface-overlay);
    animation: modal-backdrop-in var(--motion-fast) var(--ease-standard);
}

.modal.hidden {
    display: none;
}

.modal-dialog {
    width: min(680px, 100%);
    max-height: calc(100vh - 40px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
    overflow: hidden;
    animation: modal-surface-in var(--motion-fast) var(--ease-emphasized);
}

@keyframes modal-backdrop-in { from { opacity: 0; } }
@keyframes modal-surface-in { from { opacity: 0; transform: scale(.985); } }

.modal-small,
.modal-sm { width: min(440px, 100%); }
.modal-md { width: min(680px, 100%); }
.modal-lg { width: min(920px, 100%); }
.modal-xl { width: min(1180px, 100%); }

.modal-header,
.modal-footer {
    min-height: 66px;
    padding: var(--space-4) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.brand-welcome-modal.is-required .modal-header { display: none; }

.brand-welcome-dialog { width: min(560px, 100%); }

.brand-welcome-content {
    display: grid;
    justify-items: center;
    gap: var(--space-5);
    padding: var(--space-4) 0;
    text-align: center;
}

.brand-welcome-signature {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-align: left;
}

.brand-welcome-signature img {
    width: 144px;
    max-width: none;
    height: auto;
    margin-inline: -36px;
    display: block;
}

.brand-welcome-signature div { display: grid; gap: var(--space-1); }
.brand-welcome-signature strong { font-size: var(--font-size-card-title); }
.brand-welcome-signature span,
.brand-welcome-copy p,
.brand-welcome-motto { color: var(--text-secondary); }
.brand-welcome-copy { display: grid; gap: var(--space-2); }
.brand-welcome-copy h2 { font-size: var(--font-size-page-title); }
.brand-welcome-copy p { line-height: 1.6; }
.brand-welcome-motto { font-weight: 600; }

@media (max-width: 520px) {
    .brand-welcome-modal .modal-footer { align-items: stretch; flex-direction: column-reverse; }
    .brand-welcome-modal .modal-footer .button { width: 100%; }
}

.modal-header {
    border-bottom: 1px solid var(--border-subtle);
}

.modal-header h2,
.modal-header h3 { font-size: var(--font-size-card-title); }

.modal-footer {
    justify-content: flex-end;
    border-top: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--surface-interactive) 42%, transparent);
}

.modal-content {
    padding: var(--space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal-close {
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    display: inline-grid;
    place-items: center;
    border-radius: var(--radius-sm);
    transition: color var(--transition), background var(--transition), transform var(--transition);
}

.modal-close:hover { color: var(--text-primary); background: var(--surface-hover); }
.modal-close:active { transform: scale(.96); }

.workflow-modal .modal-header,
.workflow-modal .modal-footer { flex: 0 0 auto; }
.workflow-modal .modal-content { min-height: 0; }
.workflow-modal .recipe-form-page,
.workflow-modal .batch-page { width: 100%; margin: 0; padding: 0; }
.workflow-modal .recipe-form { gap: var(--space-5); }

.gpt-recipe-form { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(320px, 1.2fr); gap: var(--space-6); }
.gpt-recipe-fields,
.gpt-flavor-picker { min-width: 0; display: grid; align-content: start; gap: var(--space-4); }
.gpt-recipe-fields h3,
.gpt-flavor-picker h3 { margin: 0; font-size: var(--font-size-card-title); }
.gpt-recipe-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.gpt-production-context { margin: 0; padding: var(--space-3); color: var(--text-secondary); font-size: var(--font-size-sm); background: var(--surface-interactive); border-radius: var(--radius-sm); }
.gpt-primary-flavor { display: grid; gap: 2px; padding: var(--space-3); border-left: 2px solid var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 8%, var(--surface-interactive)); }
.gpt-primary-flavor span,
.gpt-primary-flavor small { color: var(--text-secondary); }
.gpt-flavor-picker-heading { display: grid; gap: var(--space-3); }
.gpt-flavor-picker-heading > div:first-child { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.gpt-flavor-picker-heading span { color: var(--text-secondary); font-size: var(--font-size-sm); }
.gpt-flavor-search { width: 100%; }
.gpt-selection-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.gpt-flavor-list { max-height: 350px; display: grid; overflow-y: auto; border-block: 1px solid var(--identity-divider); }
.gpt-flavor-option { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-1); border-bottom: 1px solid var(--identity-divider); cursor: pointer; }
.gpt-flavor-option:last-child { border-bottom: 0; }
.gpt-flavor-option:hover { background: var(--surface-hover); }
.gpt-flavor-option.is-primary { background: color-mix(in srgb, var(--accent-primary) 7%, transparent); }
.gpt-flavor-option > span { min-width: 0; }
.gpt-flavor-option > span:nth-of-type(1) { display: grid; gap: 2px; }
.gpt-flavor-option strong,
.gpt-flavor-option small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gpt-flavor-option small,
.gpt-flavor-option > span:last-child { color: var(--text-secondary); font-size: var(--font-size-sm); }
.gpt-field-error { display: block; margin-top: calc(var(--space-3) * -1); color: var(--danger); font-size: var(--font-size-sm); }
.gpt-field-error:empty,
.gpt-copy-status:empty { display: none; }
.gpt-copy-status { grid-column: 1 / -1; margin: 0; padding: var(--space-3); color: var(--text-primary); background: var(--surface-interactive); border-radius: var(--radius-sm); }

.recipe-import-input,
.recipe-import-preview { display: grid; gap: var(--space-4); }
.recipe-import-input > p { margin: 0; }
.recipe-import-help { color: var(--text-secondary); }
.recipe-import-guidance { display: grid; gap: var(--space-1); padding: var(--space-3); border-left: 2px solid var(--accent-primary); background: color-mix(in srgb, var(--accent-primary) 8%, var(--surface-interactive)); }
.recipe-import-guidance span { color: var(--text-secondary); }
.recipe-import-input textarea { min-height: min(48vh, 420px); resize: vertical; }
.recipe-import-error { display: grid; gap: var(--space-2); padding: var(--space-3); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface-interactive)); border-left: 2px solid var(--danger); }
.recipe-import-error ul { margin: 0; padding-left: var(--space-5); }
.recipe-import-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.recipe-import-summary > div,
.recipe-import-origin > div { min-width: 0; display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--surface-interactive); border-radius: var(--radius-sm); }
.recipe-import-summary span,
.recipe-import-origin span { color: var(--text-secondary); font-size: var(--font-size-sm); }
.recipe-import-ingredients { display: grid; gap: var(--space-3); }
.recipe-import-ingredients h3 { margin: 0; font-size: var(--font-size-card-title); }
.recipe-import-ingredients ul { display: grid; margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--identity-divider); }
.recipe-import-ingredient { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, auto); align-items: center; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px solid var(--identity-divider); }
.recipe-import-ingredient:last-child { border-bottom: 0; }
.recipe-import-ingredient > div { min-width: 0; display: grid; gap: 2px; }
.recipe-import-ingredient > div:last-child { justify-items: end; text-align: right; }
.recipe-import-ingredient span,
.recipe-import-ingredient small { color: var(--text-secondary); }
.recipe-import-origin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }

@media (max-width: 719px) {
    .segmented-control-track {
        width: 100%;
    }

    .segmented-control-item {
        flex: 1 0 auto;
    }

    .volume-selector {
        display: grid;
        align-items: stretch;
    }

    .volume-selector-presets .segmented-control-track {
        display: flex;
        flex-wrap: wrap;
    }

    .volume-selector-custom {
        width: 100%;
        min-width: 0;
    }

    .modal {
        padding: var(--space-3);
    }

    .modal-dialog {
        max-height: calc(100vh - 24px);
    }

    .gpt-recipe-form { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
    .gpt-recipe-numbers { grid-template-columns: minmax(0, 1fr); }
    .gpt-selection-actions .button { flex: 1 1 auto; }
    .gpt-flavor-option { grid-template-columns: auto minmax(0, 1fr); }
    .gpt-flavor-option > span:last-child { grid-column: 2; }
    .recipe-import-summary,
    .recipe-import-origin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .recipe-import-ingredient { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .recipe-import-ingredient > div:last-child { justify-items: start; text-align: left; }
}

/* v0.9.5B — controles Premium nos fluxos migrados */
.premium-rating-field,
.recipe-tag-groups,
.settings-preferences,
.flavor-category-control {
    display: grid;
    gap: var(--space-4);
}

.settings-production-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
}

.settings-production-item {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: var(--space-3);
}

.settings-production-item .segmented-control-track {
    width: 100%;
}

.premium-rating-field .control-label,
.recipe-tag-groups .control-label,
.flavor-category-control .control-label {
    margin-bottom: var(--space-2);
    display: block;
}

.premium-custom-fields {
    padding: var(--space-3);
    border-left: 2px solid var(--border-selected);
    background: var(--surface-interactive);
}

.premium-exact-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.flavor-flag-options .toggle-switch,
.premium-settings-section .toggle-switch {
    min-height: var(--control-height-lg);
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-interactive);
}

.history-detail-date {
    margin: 0 0 var(--space-4);
    color: var(--text-secondary);
}

@media (max-width: 719px) {
    .premium-exact-pair {
        grid-template-columns: 1fr;
    }

    .choice-chips-list {
        flex-wrap: wrap;
    }
}

/* v0.9.5B.1 — hierarquia dos formulários de Receita e Aroma */
.recipe-form-page .recipe-form {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
}

.recipe-name-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-3);
}

.recipe-editor-favorite {
    width: var(--control-height-lg);
    height: var(--control-height-lg);
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--surface-interactive);
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-emphasized);
}

.recipe-editor-favorite:active { transform: scale(.9); }

.recipe-editor-favorite:hover {
    color: var(--warning);
    background: var(--surface-hover);
}

.recipe-editor-favorite.is-active {
    color: var(--warning);
    border-color: var(--warning);
    background: var(--surface-selected);
}

.recipe-editor-favorite:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@media (max-width: 719px) {
    .recipe-name-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

}

.flavor-rating {

    color: var(--text-secondary);

    margin-bottom: 16px;

    font-size: var(--font-size-card-title);

    letter-spacing: 0.08em;

}

.flavor-stock {

    display: grid;

    gap: 10px;

    font-size: 14px;

}

.flavor-stock-meta {

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: var(--text-secondary);

    font-size: var(--font-size-xs);

    text-transform: uppercase;

    letter-spacing: 0.08em;

}

.flavor-stock-progress {

    width: 100%;

    height: var(--space-2);

    border-radius: 999px;

    background: var(--surface-interactive);

    overflow: hidden;

}

.flavor-stock-progress-fill {

    display: block;

    height: 100%;

    background: var(--accent-primary);

    border-radius: 999px;

    transition: width var(--motion-slow) var(--ease-standard), background var(--motion-default) var(--ease-standard);

}

/* ======================================================
   Recipes and Batch Production
====================================================== */

.recipe-detail-page,
.recipe-form-page,
.batch-page {
    padding: 32px;
}

.page-header-with-action,
.section-heading,
.recipe-detail-header,
.recipe-card-header,
.recipe-detail-actions,
.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.page-header-with-action {
    margin-bottom: 32px;
}

.page-header-with-action .page-title {
    margin-bottom: 0;
}

.recipes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.recipe-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

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

.recipe-card-header h2 {
    font-size: var(--font-size-card-title);
}

.favorite-button {
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-emphasized);
}

.favorite-button:active { transform: scale(.88); }

.favorite-button.active {
    color: var(--warning);
}

.recipe-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.recipe-tags span {
    padding: var(--space-1) var(--space-2);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-interactive) 70%, transparent);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.recipe-rating {
    color: var(--warning);
    letter-spacing: 0.08em;
}

.availability-status {
    font-size: 14px;
    font-weight: 600;
}

.availability-status.is-available {
    color: var(--success);
}

.availability-status.is-missing,
.batch-line.is-missing {
    color: var(--warning);
}

.recipe-meta,
.recipe-ingredients-summary,
.recipe-extra,
.recipe-last-production,
.recipe-detail-header p {
    color: var(--text-secondary);
    line-height: 1.5;
}

.recipe-last-production {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
}

.recipes-empty {
    grid-column: 1 / -1;
    padding: 48px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.recipe-detail-page,
.recipe-form-page,
.batch-page {
    display: grid;
    gap: 24px;
}

.recipe-detail-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-secondary);
}

.recipe-detail-actions,
.form-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
}

.table-wrapper {
    overflow-x: auto;
}

.ingredients-table {
    width: 100%;
    border-collapse: collapse;
}

.ingredients-table th,
.ingredients-table td {
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-color);
    text-align: left;
}

.ingredients-table th {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

.ingredients-table td:nth-child(n + 3),
.ingredients-table th:nth-child(n + 3) {
    font-variant-numeric: tabular-nums;
}

.batch-history {
    display: grid;
    gap: 12px;
}

.batch-history > div {
    display: grid;
    gap: 6px;
    padding: 14px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.03);
}

.batch-history span {
    color: var(--text-secondary);
}

.recipe-form,
.batch-controls {
    display: grid;
    gap: 20px;
}

.form-grid,
.batch-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.form-field {
    display: grid;
    gap: var(--field-gap);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.checkbox-field {
    display: flex;
    gap: 10px;
    align-items: center;
}

.ingredients-editor {
    display: grid;
    gap: 16px;
}

#ingredientRows {
    display: grid;
    gap: 12px;
}

.ingredient-editor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px auto;
    gap: 12px;
}

.form-errors,
.calculation-warnings {
    display: grid;
    gap: 8px;
    color: var(--danger);
}

.batch-layout {
    align-items: start;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
}

.batch-controls,
.batch-result > .section-card {
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.batch-controls {
    align-content: start;
    gap: var(--space-4);
    padding: var(--space-4);
}

.batch-control-group {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
}

.batch-segmented-control,
.batch-segmented-control .segmented-control-track {
    width: 100%;
}

.batch-segmented-control .segmented-control-item {
    min-width: 0;
    flex: 1 1 auto;
}

.batch-segmented-control .segmented-control-item span {
    width: 100%;
    padding-inline: var(--space-2);
}

.batch-result > .section-card {
    margin-bottom: 0;
}

.batch-result {
    display: grid;
    gap: 20px;
}

.batch-line {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
}

.batch-line > span {
    min-width: 0;
    display: grid;
    gap: var(--space-1);
}

.batch-line > strong {
    flex: 0 0 auto;
    text-align: right;
}

.batch-line small {
    color: var(--text-secondary);
}

.batch-mixing-card,
.batch-component-group,
.batch-cost-card {
    display: grid;
    gap: var(--space-4);
}

.batch-mixing-card h2,
.batch-cost-card h2,
.batch-component-group h3 {
    margin: 0;
}

.batch-component-group {
    gap: var(--space-2);
}

.batch-component-group h3 {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.batch-add-list,
.batch-cost-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.batch-add-list > div,
.batch-cost-list > div,
.batch-final-volume,
.batch-cost-heading {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.batch-add-list dt,
.batch-cost-list dt {
    min-width: 0;
    overflow-wrap: anywhere;
}

.batch-add-list dd,
.batch-cost-list dd {
    flex: 0 0 auto;
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.batch-final-volume {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}

.batch-final-volume strong,
.batch-cost-heading > strong {
    color: var(--accent-primary);
    font-size: var(--font-size-section-title);
    font-variant-numeric: tabular-nums;
}

.batch-result > .batch-cost-card {
    padding: var(--space-4);
}

.batch-cost-card {
    gap: var(--space-3);
}

.batch-cost-list {
    gap: var(--space-1);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.batch-result > .batch-stock-card {
    padding-block: 0;
}

.batch-stock-disclosure {
    border-top: 0;
}

.batch-stock-disclosure .disclosure-content {
    padding-bottom: var(--space-4);
}

.batch-stock-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(90px, auto));
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-color);
}

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

.batch-stock-row.is-missing,
.batch-stock-row.is-missing .batch-stock-value small {
    color: var(--warning);
}

.batch-stock-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.batch-stock-value {
    display: grid;
    justify-items: end;
    gap: 2px;
    text-align: right;
    white-space: nowrap;
}

.batch-stock-value small {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.batch-stock-value strong {
    font-variant-numeric: tabular-nums;
}

.batch-total {
    color: var(--accent-primary);
    font-size: 18px;
}

.batch-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    justify-content: flex-end;
    padding: 16px 0;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}

.tags-field {
    padding: 0;
    border: 0;
}

.tags-field legend {
    margin-bottom: 10px;
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

.tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-options label {
    cursor: pointer;
}

.tag-options input {
    position: absolute;
    opacity: 0;
}

.tag-options span {
    display: block;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.04);
}

.tag-options input:checked + span {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(20,184,166,0.12);
}

@media (max-width: 719px) {
    .recipe-detail-page,
    .recipe-form-page,
    .batch-page {
        padding: 20px;
    }

    .page-header-with-action,
    .recipe-detail-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .form-grid,
    .batch-layout,
    .ingredient-editor-row {
        grid-template-columns: 1fr;
    }

    .batch-stock-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .batch-stock-value {
        grid-template-columns: minmax(0, 1fr) auto;
        justify-items: start;
        text-align: left;
    }

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

}

/* Initial inventory review — v0.6.1 */

.initial-review-toolbar,
.initial-review-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.inventory-review-pending,
.cost-partial-warning {
    color: var(--warning);
    font-size: var(--font-size-sm);
}

.initial-review {
    display: grid;
    gap: var(--space-5);
}

.initial-review-toolbar {
    justify-content: space-between;
}

.initial-review-toolbar .flavor-search {
    max-width: 360px;
}

.initial-review-rows {
    display: grid;
    gap: var(--space-2);
}

.initial-review-row {
    display: grid;
    grid-template-columns: minmax(150px, 1.4fr) repeat(3, minmax(95px, 0.7fr)) minmax(120px, 0.8fr) auto auto;
    gap: var(--space-3);
    align-items: end;
    padding: var(--space-3);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.025);
}

.initial-review-row.is-pending {
    border-color: rgba(251,191,36,0.38);
}

.initial-review-row.hidden {
    display: none;
}

.initial-review-flavor,
.initial-review-row label,
.initial-review-cost {
    display: grid;
    gap: var(--space-1);
}

.initial-review-flavor span,
.initial-review-row label span,
.initial-review-cost span {
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.initial-review-status {
    align-self: center;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
}

.initial-review-row.is-pending .initial-review-status {
    color: var(--warning);
}

.initial-review-actions {
    justify-content: flex-end;
}

@media (max-width: 1100px) {
    .initial-review-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .initial-review-flavor {
        grid-column: 1 / -1;
    }
}

@media (max-width: 719px) {
    .initial-review-toolbar,
    .initial-review-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .initial-review-toolbar .flavor-search {
        max-width: none;
    }

    .initial-review-row {
        grid-template-columns: 1fr;
    }

    .initial-review-flavor {
        grid-column: auto;
    }
}

/* Flavor management and global selects — v0.7.2 */

select:not([multiple]),
select option {
    color: var(--text-primary);
    background-color: var(--bg-card);
    color-scheme: dark;
}

select:not([multiple]):disabled,
select option:disabled {
    color: var(--text-secondary);
    background-color: var(--bg-secondary);
    opacity: 0.72;
}

.inline-link-button {
    justify-self: start;
    padding: 4px 0;
    border: 0;
    color: var(--accent-primary);
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.inline-link-button:hover {
    text-decoration: underline;
}

.inline-link-button:focus-visible {
    outline: none;
    border-radius: var(--radius-sm);
    box-shadow: var(--focus-ring);
}

.flavor-form,
.flavor-detail-content {
    display: grid;
    gap: var(--space-5);
}

.flavor-detail-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.flavor-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.flavor-detail-heading > div {
    display: grid;
    gap: 8px;
}

.flavor-detail-stock-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--space-3) var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--border-selected);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--surface-selected), var(--surface-interactive));
}

.flavor-detail-stock-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.flavor-detail-stock-value strong {
    color: var(--text-primary);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    line-height: 1;
}

.flavor-detail-stock-value span,
.flavor-detail-stock-percent { color: var(--text-secondary); }
.flavor-detail-stock-percent { font-weight: 600; }

.flavor-detail-stock-progress {
    grid-column: 1 / -1;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: var(--surface-interactive);
    overflow: hidden;
}

.flavor-detail-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.flavor-detail-metrics > div {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: var(--surface-interactive);
    font-size: var(--font-size-sm);
}

.flavor-detail-metrics strong {
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.flavor-cost-metric .inline-link-button { margin-top: auto; }

.flavor-detail-secondary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    color: var(--text-secondary);
}

.flavor-detail-secondary > span {
    display: grid;
    gap: var(--space-1);
}

.flavor-detail-secondary small { font-size: var(--font-size-xs); }
.flavor-detail-secondary strong { color: var(--text-primary); font-size: var(--font-size-sm); }
.flavor-detail-secondary .flavor-rating { margin: 0; }

.flavor-detail-content .flavor-detail-notes {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-interactive);
}

.flavor-detail-notes h3,
.flavor-detail-notes p { margin: 0; }

.flavor-detail-notes p {
    color: var(--text-secondary);
    line-height: 1.6;
    white-space: pre-wrap;
}

.flavor-detail-content .section-card {
    margin: 0;
}

.flavor-detail-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 719px) {
    .flavor-detail-heading,
    .flavor-detail-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .flavor-detail-stock-hero,
    .flavor-detail-metrics {
        grid-template-columns: 1fr;
    }

    .flavor-detail-stock-progress { grid-column: 1; }
    .flavor-detail-stock-percent { justify-self: start; }
}

@media (min-width: 720px) and (max-width: 959px) {
    .flavor-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* v0.9.5B — compatibilidade dos componentes Premium com estilos legados */
.flavor-flag-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (max-width: 719px) {
    .flavor-flag-options {
        grid-template-columns: 1fr;
    }
}

/* ======================================================
   v0.9.5C — Alchemy Identity
====================================================== */
:root {
    --shell-sidebar-width: 232px;
    --shell-sidebar-collapsed: 68px;
    --shell-header-height: 68px;
    --content-max-readable: 1040px;
    --identity-divider: rgba(255,255,255,0.065);
    --identity-hover-lift: translateY(-2px);
}

.alchemy-layout {
    background: var(--surface-base);
}

.sidebar {
    width: var(--shell-sidebar-width);
    border-color: var(--identity-divider);
    background: color-mix(in srgb, var(--bg-secondary) 86%, var(--bg-primary));
    transition: width var(--motion-default) var(--ease-standard), transform var(--motion-default) var(--ease-standard);
}

.sidebar.collapsed { width: var(--shell-sidebar-collapsed); }

.sidebar-header {
    height: var(--shell-header-height);
    padding: 0 var(--space-3);
    border-bottom: 1px solid var(--identity-divider);
}

.brand { gap: var(--space-3); }
.brand-icon { width: 38px; height: 38px; flex: 0 0 38px; border-radius: var(--radius-sm); }
.brand-text strong { display: block; font-size: var(--font-size-card-title); }
.brand-text span { font-size: var(--font-size-xs); }
.brand-text,
.nav-label { transition: opacity var(--motion-fast) var(--ease-standard); }
.sidebar.collapsed .brand-text { opacity: 0; width: 0; }
.sidebar.collapsed .sidebar-header { justify-content: center; padding-inline: 0; }
.sidebar.collapsed .brand { gap: 0; }
.sidebar.collapsed .brand-icon { width: 32px; height: 32px; flex-basis: 32px; }

.navigation { padding: var(--space-3) var(--space-2); }
.nav-item {
    height: var(--control-height-md);
    margin-bottom: var(--space-1);
    padding: 0 var(--space-3);
    gap: var(--space-3);
    border: 1px solid transparent;
}
.nav-svg { width: 20px; flex: 0 0 20px; }
.nav-item:hover, .nav-item:focus-visible { background: var(--surface-hover); color: var(--text-primary); }
.nav-item:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.nav-item.active { border-color: rgba(20,184,166,.2); background: var(--surface-selected); color: var(--accent-primary); }
.sidebar.collapsed .nav-label { opacity: 0; width: 0; overflow: hidden; }

.icon-button,
.mobile-menu-button {
    display: inline-grid;
    place-items: center;
    border: 0;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
}
.icon-button:focus-visible, .mobile-menu-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mobile-menu-button { display: none; width: var(--control-height-md); height: var(--control-height-md); border-radius: var(--radius-sm); }
.sidebar-backdrop { display: none; }

.top-header {
    height: var(--shell-header-height);
    padding: 0 var(--space-6);
    gap: var(--space-3);
    border-color: var(--identity-divider);
    background: color-mix(in srgb, var(--bg-primary) 94%, transparent);
    backdrop-filter: blur(10px);
}
.header-context { min-width: 0; display: grid; gap: 2px; }
.top-header h2 { font-size: var(--font-size-section-title); line-height: 1.2; }
.top-header p { color: var(--text-secondary); font-size: var(--font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.page-container,
.recipe-detail-page,
.recipe-form-page,
.batch-page {
    padding: var(--space-6);
}
.page-wide { width: 100%; }
.page-focused { width: min(var(--content-max-readable), 100%); margin-inline: auto; }
.page-primary-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-bottom: var(--space-4); }
.route-error { max-width: 720px; }
.route-error h1 { margin-bottom: var(--space-2); }

.flavor-sort-direction { display: inline-grid; place-items: center; transition: transform var(--transition), background var(--transition); }
.flavor-sort-direction.is-desc svg { transform: rotate(180deg); }

.card,
.stat-card,
.section-card,
.settings-section {
    box-shadow: none;
}

.recipes-grid > article,
.flavors-grid > article,
.history-list > article { border-radius: var(--radius-md); }
.flavors-grid > article { position: relative; }
.recipes-grid > article:focus-visible,
.flavors-grid > article:focus-visible,
.history-list > article:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recipes-grid > article:focus-visible .recipe-card,
.flavors-grid > article:focus-visible .flavor-card,
.history-list > article:focus-visible .history-card { transform: var(--identity-hover-lift); border-color: var(--border-selected); background: var(--surface-hover); box-shadow: var(--shadow-sm); }
.recipes-grid > article:hover .recipe-card,
.flavors-grid > article:hover .flavor-card,
.history-list > article:hover .history-card { transform: var(--identity-hover-lift); border-color: var(--border-interactive); background: var(--surface-hover); box-shadow: var(--shadow-sm); }
.recipes-grid > article:active .recipe-card,
.flavors-grid > article:active .flavor-card,
.history-list > article:active .history-card { transform: none; background: var(--surface-selected); }

.identity-home { display: grid; align-content: start; gap: var(--space-5); }
.operational-dashboard { display: grid; align-content: start; gap: var(--space-6); }
.dashboard-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.dashboard-side-column { min-width: 0; display: grid; align-content: start; gap: var(--space-4); }
.operational-indicators .summary-strip__item { border-top: 0; border-bottom: 0; border-left: 0; color: inherit; font: inherit; text-align: left; background: transparent; cursor: pointer; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); }
.operational-indicators .summary-strip__item:hover { background: var(--surface-hover); }
.operational-indicators .summary-strip__item:focus-visible { position: relative; z-index: 1; outline: none; box-shadow: inset var(--focus-ring); }
.replenishment-columns,
.dashboard-replenishment .replenishment-row { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(80px, .75fr) minmax(120px, 1fr) minmax(70px, .75fr) minmax(80px, .75fr); align-items: center; gap: var(--space-3); }
.replenishment-columns { padding: 0 0 var(--space-2); color: var(--text-secondary); font-size: var(--font-size-xs); border-bottom: 1px solid var(--identity-divider); }
.dashboard-replenishment .replenishment-row { grid-template-areas: "name stock progress purchase price"; min-height: 52px; padding-block: var(--space-2); }
.replenishment-row-name { grid-area: name; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.25; }
.replenishment-row-stock { grid-area: stock; }
.replenishment-row-history { display: contents; }
.replenishment-row-purchase { grid-area: purchase; min-width: 0; }
.replenishment-row-price { grid-area: price; min-width: 0; }
.replenishment-row-history-separator { display: none; }
.replenishment-row-progress { grid-area: progress; justify-self: end; width: clamp(120px, 100%, 180px); }
.replenishment-row-progress .flavor-stock-progress { height: 5px; }
.replenishment-row-progress .progress-danger > span { min-width: 4px; }
.dashboard-healthy-state { display: grid; gap: var(--space-1); padding: var(--space-4) 0; }
.dashboard-healthy-state span { color: var(--text-secondary); }
.dashboard-base-inputs { padding-block: var(--space-3); }
.dashboard-base-inputs .identity-section-heading { margin-bottom: var(--space-2); }
.dashboard-base-input-list { display: grid; gap: var(--space-3); }
.dashboard-base-input-item { min-width: 0; display: grid; gap: var(--space-2); }
.dashboard-base-input-heading { min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.dashboard-base-input-heading strong { min-width: 0; overflow-wrap: anywhere; }
.dashboard-base-input-heading span { flex: 0 0 auto; color: var(--text-secondary); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.dashboard-base-input-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.dashboard-base-input-progress > span { min-width: 0; }
.dashboard-base-input-progress .flavor-stock-progress { height: 5px; }
.dashboard-base-input-progress .progress-success > span { background: color-mix(in srgb, var(--success) 68%, var(--surface-interactive)); }
.dashboard-base-input-progress > strong { min-width: 34px; text-align: right; font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; }
.dashboard-base-input-empty { margin: 0; color: var(--text-secondary); font-size: var(--font-size-sm); }
.dashboard-productions .home-batch-row { min-height: 68px; }
.dashboard-widget-link { display: block; margin: var(--space-3) 0 0 auto; padding: var(--space-1) 0; border: 0; color: var(--accent-primary); font: inherit; font-size: var(--font-size-sm); background: transparent; cursor: pointer; }
.dashboard-widget-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.dashboard-widget-link:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.home-intro { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.home-intro h1 { margin-bottom: var(--space-1); font-size: var(--font-size-page-title); }
.home-intro p, .identity-empty-copy { color: var(--text-secondary); }
.home-quick-actions { display: flex; gap: var(--space-2); }
.identity-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.identity-section { padding: var(--space-4) 0; border-top: 1px solid var(--identity-divider); background: transparent; }
.identity-section > h2, .identity-section-heading h2 { font-size: var(--font-size-card-title); }
.identity-section-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.identity-section-heading span { color: var(--text-secondary); font-size: var(--font-size-sm); }
.identity-list { display: grid; }
.identity-list-row { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0; border: 0; border-bottom: 1px solid var(--identity-divider); color: inherit; text-align: left; background: transparent; cursor: pointer; transition: color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); }
.identity-list-row span:first-child, .identity-stock-row > div { display: grid; gap: 2px; }
.identity-list-row small, .identity-stock-row small { color: var(--text-secondary); }
.identity-list-row:hover { color: var(--accent-primary); background: color-mix(in srgb, var(--surface-hover) 55%, transparent); }
.identity-list-row:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.identity-stock-row { display: grid; grid-template-columns: minmax(140px, .8fr) 1.2fr; align-items: center; gap: var(--space-4); min-height: 58px; border-bottom: 1px solid var(--identity-divider); }

.collection-page { display: grid; align-content: start; gap: var(--space-5); }
.collection-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); margin: 0; }
.collection-toolbar__main { display: block; }
.collection-toolbar__search { flex: 1; min-width: 0; }
.collection-toolbar__secondary { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.collection-toolbar__filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); }
.collection-toolbar__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.collection-toolbar__sort { display: flex; align-items: center; flex: 0 0 auto; gap: var(--space-2); }
.collection-toolbar__sort select { min-width: 180px; }
.collection-toolbar__search input,
.collection-toolbar__sort select { height: var(--control-height-sm); min-height: var(--control-height-sm); }

.collection-card { padding: var(--card-padding-compact); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-raised) 74%, transparent); box-shadow: none; transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.collection-card h2, .collection-card h3 { font-size: var(--font-size-card-title); }
.recipe-card { gap: var(--space-2); }
.recipe-card-title { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; }
.recipe-card-title h2 { min-width: 0; }
.recipe-ai-marker { position: relative; display: inline-flex; flex: 0 0 auto; border-radius: var(--radius-sm); }
.recipe-ai-marker:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.recipe-ai-badge { padding: 2px var(--space-1); color: var(--text-secondary); background: var(--surface-interactive); font-size: var(--font-size-xs); line-height: 1.2; }
.recipe-ai-tooltip {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: 20;
    width: min(280px, calc(100vw - 48px));
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    background: var(--surface-raised);
    box-shadow: var(--shadow);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), visibility var(--motion-fast) var(--ease-standard);
    pointer-events: none;
}
.recipe-ai-marker:hover .recipe-ai-tooltip, .recipe-ai-marker:focus .recipe-ai-tooltip { opacity: 1; visibility: visible; transform: translateY(0); }
.recipe-ai-tooltip p { margin-top: var(--space-2); }
.recipe-ai-tooltip dl { display: grid; gap: var(--space-1); margin-top: var(--space-2); }
.recipe-ai-tooltip dl div { display: flex; justify-content: space-between; gap: var(--space-3); }
.recipe-ai-tooltip dt { color: var(--text-secondary); }
.recipe-ai-tooltip dd { margin: 0; text-align: right; }
.recipe-card .availability-status { padding: 0; }
.recipe-card .recipe-tags span, .flavor-category { padding: var(--space-1) var(--space-2); }
.recipe-ingredients-summary { color: var(--text-primary); font-size: var(--font-size-sm); }
.recipe-last-production, .recipe-meta { color: var(--text-secondary); font-size: var(--font-size-sm); }
.recipe-last-production { margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--identity-divider); }
.recipe-card-context { opacity: .78; }
.favorite-button { width: var(--control-height-sm); height: var(--control-height-sm); display: inline-grid; place-items: center; border-radius: var(--radius-sm); }
.favorite-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.availability-status { display: inline-flex; align-items: center; gap: var(--space-2); }

.flavor-card { gap: var(--space-2); }
.flavor-rating { margin: 0; font-size: var(--font-size-base); }
.flavor-card-complement { color: var(--text-secondary); }
.flavor-card-empty .flavor-stock-meta span { color: var(--danger); font-weight: 700; }
.flavor-card-empty .flavor-stock-progress { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 45%, transparent); }
.flavor-card-empty .flavor-stock-progress-fill { min-width: 4px; background: var(--danger); }
.flavor-replenishment { min-width: 150px; }
.delete-flavor-summary { display: grid; gap: var(--space-4); }
.delete-flavor-summary > p, .delete-flavor-summary ul { margin: 0; }
.delete-flavor-summary dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.delete-flavor-summary dl > div { display: grid; gap: var(--space-1); padding: var(--space-3); background: var(--surface-interactive); }
.delete-flavor-summary dt { color: var(--text-secondary); }
.delete-flavor-summary dd { margin: 0; color: var(--text-primary); font-weight: 700; }
.flavor-stock { display: grid; gap: var(--space-2); margin-top: var(--space-1); }
.flavor-stock-meta { color: var(--text-secondary); }
.flavor-stock-meta strong { font-weight: 500; }
.flavor-detail-notes { padding-top: var(--space-3); border-top: 1px solid var(--identity-divider); }

.identity-detail-page { width: min(var(--content-max-readable), 100%); margin-inline: auto; display: grid; gap: var(--space-5); }
.recipe-production-priority { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); border-left: 3px solid var(--accent-primary); background: var(--surface-selected); }
.recipe-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.identity-summary-strip { display: flex; flex-wrap: wrap; gap: var(--space-4); padding: var(--space-3) 0; border-block: 1px solid var(--identity-divider); }
.recipe-copy { display: grid; gap: var(--space-4); }
.recipe-copy p { margin-top: var(--space-2); color: var(--text-secondary); line-height: 1.6; }
.identity-disclosure { border-block: 1px solid var(--identity-divider); }
.recipe-provenance { display: grid; gap: var(--space-4); }
.recipe-provenance dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); }
.recipe-provenance dl div { display: grid; gap: var(--space-1); }
.recipe-provenance dt { color: var(--text-secondary); font-size: var(--font-size-sm); }
.recipe-provenance dd { margin: 0; color: var(--text-primary); }
.recipe-provenance-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.recipe-source-modal .modal-content { min-height: 0; }
.recipe-source-content { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--text-primary); font: inherit; line-height: 1.6; }
.recipe-composition-cost { display: grid; gap: var(--space-4); }
.recipe-composition-cost-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.recipe-composition-cost-grid > article { min-width: 0; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-raised) 72%, transparent); }
.recipe-composition-cost-grid h3 { font-size: var(--font-size-card-title); }
.recipe-metric-list { display: grid; gap: var(--space-2); }
.recipe-metric-list div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--identity-divider); }
.recipe-metric-list div:last-child { padding-bottom: 0; border-bottom: 0; }
.recipe-metric-list dt { color: var(--text-secondary); }
.recipe-metric-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.recipe-cost-headline { display: grid; gap: var(--space-1); padding: var(--space-3); border-left: 2px solid var(--accent-primary); background: var(--surface-selected); }
.recipe-cost-headline span, .recipe-cost-headline small { color: var(--text-secondary); }
.recipe-cost-headline strong { font-size: var(--font-size-card-title); }
.recipe-cost-guidance { display: grid; gap: var(--space-2); padding: var(--space-3); color: var(--text-secondary); background: var(--surface-interactive); border-radius: var(--radius-sm); }
.recipe-cost-guidance ul { display: grid; gap: var(--space-1); margin: 0; padding-left: var(--space-4); }
.recipe-cost-disclosure { border-top: 1px solid var(--identity-divider); }
.recipe-cost-flavor-list { display: grid; gap: var(--space-2); }
.recipe-cost-flavor-list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--identity-divider); }
.recipe-cost-flavor-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.recipe-cost-flavor-list span { display: grid; gap: 2px; }
.recipe-cost-flavor-list small { color: var(--text-secondary); }
.summary-strip { display: grid; gap: 0; margin: 0; padding: 0; border: 1px solid var(--identity-divider); border-radius: var(--radius-md); overflow: hidden; box-shadow: none; background: transparent; }
.home-summary, .history-page .summary-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.flavors-page .summary-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.summary-strip__item { display: grid; align-content: center; gap: var(--space-1); min-width: 0; padding: var(--space-3) var(--space-4); border-right: 1px solid var(--identity-divider); }
.summary-strip__item:last-child { border-right: 0; }
.summary-strip__item strong { color: var(--accent-primary); font-size: var(--font-size-card-title); line-height: 1.2; font-variant-numeric: tabular-nums; }
.summary-strip__item span, .summary-strip__item small { color: var(--text-secondary); font-size: var(--font-size-sm); }
.summary-strip__item small { color: var(--warning); }
.summary-filter-button {
    justify-self: start;
    padding: 0;
    border: 0;
    color: var(--warning);
    background: transparent;
    font: inherit;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.summary-filter-button:hover { color: var(--text-primary); }
.summary-filter-button:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.collection-filter-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid var(--warning);
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--warning) 7%, transparent);
    font-size: var(--font-size-sm);
}
.collection-filter-notice[hidden] { display: none; }
.history-card { padding: var(--space-4); }
.history-comment { max-width: 72ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.settings-form { width: 100%; margin-inline: auto; }
.settings-form { gap: var(--space-6); }
.management-page { display: grid; align-content: start; gap: var(--space-6); }
.management-section { width: 100%; }
.settings-section { padding: 0; border: 0; background: transparent; }
.settings-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.settings-production-card { grid-column: 1 / -1; }
.settings-overview-card,
.data-card { min-width: 0; padding: var(--space-4); align-content: start; gap: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-raised) 72%, transparent); }
.settings-overview-card .settings-grid { grid-template-columns: 1fr; }
.settings-production-item .premium-exact-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.settings-production-base.has-error { border-radius: var(--radius-sm); box-shadow: inset 2px 0 0 var(--danger); }
.settings-readonly-grid { padding-top: var(--space-3); }
.data-management { margin-top: var(--space-8); padding-top: 0; border-top: 0; }
.base-inputs-management { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.base-input-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.base-input-group { min-width: 0; display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-raised) 72%, transparent); }
.base-input-group__header, .base-input-item__heading, .base-input-item__actions { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.base-input-group__header h3 { font-size: var(--font-size-card-title); }
.base-input-group__header p, .base-input-empty, .base-input-item__heading span, .base-input-item > p { color: var(--text-secondary); font-size: var(--font-size-sm); }
.base-input-list { display: grid; gap: var(--space-2); }
.base-input-item { min-width: 0; display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--identity-divider); border-radius: var(--radius-sm); background: var(--surface-interactive); }
.base-input-item.is-active { border-color: var(--border-selected); }
.base-input-item__heading > div { min-width: 0; display: grid; gap: var(--space-1); }
.base-input-item__heading strong, .base-input-item__heading span { overflow-wrap: anywhere; }
.base-input-item dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.base-input-item dl div { min-width: 0; display: grid; gap: 2px; }
.base-input-item dt { color: var(--text-secondary); font-size: var(--font-size-xs); }
.base-input-item dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.base-input-item__actions { justify-content: flex-start; flex-wrap: wrap; }
.base-input-form { display: grid; gap: var(--space-3); }
.base-input-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.base-input-cost-preview { padding: var(--space-3); border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--surface-interactive); }
.base-input-cost-preview strong { color: var(--text-primary); }
.base-input-nicotine-fields { display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--identity-divider); }
.base-input-ratio-presets { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.base-input-ratio-presets > span { width: 100%; color: var(--text-secondary); font-size: var(--font-size-sm); }
.data-management-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.data-card .settings-section-header { gap: var(--space-2); }
.data-card .settings-section-header h2 { font-size: var(--font-size-card-title); }
.data-card .settings-section-header p { font-size: var(--font-size-sm); }
.danger-zone { margin: 0; padding: var(--space-4); border: 1px solid rgba(239,68,68,.3); border-radius: var(--radius-md); background: rgba(239,68,68,.035); }

.stock-status-healthy, .history-stock-status.is-updated, .movement-positive { color: var(--success); }

@media (max-width: 1200px) {
    .settings-production-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .settings-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .data-management-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .base-input-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .home-summary, .history-page .summary-strip, .flavors-page .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-columns { grid-template-columns: 1fr; }
    .dashboard-columns { grid-template-columns: 1fr; }
    .settings-production-grid { grid-template-columns: 1fr; }
    .settings-overview-grid { grid-template-columns: 1fr; }
    .data-management-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
    .recipe-composition-cost-grid { grid-template-columns: 1fr; }
    .base-input-groups, .base-input-form-grid { grid-template-columns: 1fr; }
    .base-input-group__header { align-items: stretch; flex-direction: column; }
    .base-input-item__actions .button { flex: 1 1 auto; }
    .replenishment-columns { display: none; }
    .dashboard-replenishment .replenishment-row { grid-template-columns: 1fr; grid-template-areas: "name" "stock" "progress" "history"; gap: var(--space-2); min-height: 0; padding-block: var(--space-3); }
    .replenishment-row-history { grid-area: history; display: flex; gap: var(--space-1); color: var(--text-secondary); }
    .replenishment-row-history::before { content: "Última compra:"; margin-right: var(--space-1); color: var(--text-secondary); }
    .replenishment-row-history-separator { display: inline; }
    .replenishment-row-progress { width: 100%; max-width: none; }
}

@media (min-width: 720px) and (max-width: 1300px) {
    .replenishment-columns { display: none; }
    .dashboard-replenishment .replenishment-row { grid-template-columns: minmax(0, 1fr) 120px minmax(150px, .8fr); grid-template-areas: "name stock progress" "history history history"; }
    .replenishment-row-history { grid-area: history; display: flex; gap: var(--space-1); color: var(--text-secondary); }
    .replenishment-row-history-separator { display: inline; }
    .replenishment-row-progress { justify-self: start; width: min(160px, 100%); }
}

@media (max-width: 820px) {
    .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(86vw, 280px); transform: translateX(-100%); box-shadow: var(--shadow); }
    .sidebar.collapsed { width: min(86vw, 280px); }
    .sidebar.drawer-open { transform: translateX(0); }
    .sidebar .brand-text, .sidebar .nav-label { display: block; }
    .sidebar.collapsed .brand-text, .sidebar.collapsed .nav-label { width: auto; opacity: 1; }
    .sidebar.collapsed .brand { gap: var(--space-3); }
    .sidebar.collapsed .brand-icon { width: 38px; height: 38px; flex-basis: 38px; }
    .sidebar-backdrop { position: fixed; inset: 0; z-index: 35; display: block; border: 0; background: var(--surface-overlay); opacity: 0; pointer-events: none; transition: opacity var(--transition); }
    .sidebar-backdrop.is-visible { opacity: 1; pointer-events: auto; }
    .mobile-menu-button { display: inline-grid; flex: 0 0 auto; }
    .top-header { padding-inline: var(--space-3); }
    .page-container, .recipe-detail-page, .recipe-form-page, .batch-page { padding: var(--space-4); }
    .home-intro { align-items: flex-start; flex-direction: column; }
    .collection-toolbar__secondary { align-items: stretch; flex-direction: column; }
    .collection-toolbar__actions { width: 100%; justify-content: flex-end; }
    .collection-toolbar__sort { width: 100%; }
    .collection-toolbar__sort select { flex: 1; min-width: 0; }
    .collection-toolbar__filters { align-items: stretch; flex-direction: column; }
    .adjustment-operation-grid { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
    .identity-stock-row { grid-template-columns: 1fr; padding-block: var(--space-3); gap: var(--space-2); }
    .toast-region { top: calc(var(--shell-header-height) + var(--space-2)); right: var(--space-3); width: calc(100vw - 24px); }
}

@media (max-width: 560px) {
    .home-summary, .history-page .summary-strip, .flavors-page .summary-strip { grid-template-columns: 1fr; }
    .summary-strip__item { border-right: 0; border-bottom: 1px solid var(--identity-divider); }
    .summary-strip__item:last-child { border-bottom: 0; }
    .home-quick-actions { width: 100%; }
    .home-quick-actions .button { flex: 1; }
    .recipe-production-priority { align-items: stretch; flex-direction: column; }
    .recipe-detail-actions { justify-content: stretch; }
    .recipe-detail-actions .button { flex: 1; }
    .collection-toolbar__actions > .button { flex: 1 1 auto; }
    .data-management-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .modal, .modal-dialog, .toast, .toast.is-leaving { animation: none !important; transform: none !important; }
}

@supports selector(::-webkit-scrollbar) {
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--text-secondary) 42%, transparent); background-clip: padding-box; }
    *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text-secondary) 62%, transparent); background-clip: padding-box; }
}

@supports (scrollbar-color: auto) {
    * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-secondary) 42%, transparent) transparent; }
}

@media (max-width: 719px) {
    .recipe-provenance dl { grid-template-columns: 1fr; }
    .recipe-ai-tooltip { right: 0; left: auto; }
}