/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Anmeldung: Eingabefelder mit Icon (Muster wie .search-field) */

.input-icon[b-lyo5yjd8vx] { position: relative; display: block; }

.input-icon[b-lyo5yjd8vx]  .ico {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
    transition: color .15s var(--ease);
}

.input-icon[b-lyo5yjd8vx]  input {
    padding: .85rem 1rem .85rem 2.75rem;
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: .95rem;
}

.input-icon:focus-within[b-lyo5yjd8vx]  .ico { color: var(--accent); }

.input-icon[b-lyo5yjd8vx]  input.invalid { border-color: var(--danger); }
.input-icon[b-lyo5yjd8vx]  input.invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }

.remember[b-lyo5yjd8vx] { font-weight: 600; color: var(--text-muted); }

.switch-link a[b-lyo5yjd8vx] { font-weight: 800; }

.demo-hint[b-lyo5yjd8vx] {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    line-height: 1.5;
}

.demo-ico[b-lyo5yjd8vx] {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--surface);
    color: var(--tone-yellow);
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* Registrierung: Eingabefelder mit Icon (Muster wie .search-field) */

.input-icon[b-smlay6ykgf] { position: relative; display: block; }

.input-icon[b-smlay6ykgf]  .ico {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
    transition: color .15s var(--ease);
}

.input-icon[b-smlay6ykgf]  input {
    padding: .85rem 1rem .85rem 2.75rem;
    border-radius: var(--r-sm);
    background: var(--surface);
    font-size: .95rem;
}

.input-icon:focus-within[b-smlay6ykgf]  .ico { color: var(--accent); }

.input-icon[b-smlay6ykgf]  input.invalid { border-color: var(--danger); }
.input-icon[b-smlay6ykgf]  input.invalid:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent); }

.switch-link a[b-smlay6ykgf] { font-weight: 800; }
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* Konto-Verwaltung: Kopf, Inhaltskarte und gemeinsame Bausteine der Manage-Seiten */

.manage-title[b-pd9m57x6pe] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.manage-card[b-pd9m57x6pe] {
    max-width: 760px;
    padding: 1.5rem;
}

/* Kopf einer Manage-Seite: <div class="manage-head"><span class="icon-tile"/><div><h2/><p/></div></div> */
.manage-card[b-pd9m57x6pe]  .manage-head {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.25rem;
}

.manage-card[b-pd9m57x6pe]  .manage-head h2 {
    font-size: 1.3rem;
    margin: .1rem 0 .2rem;
}

.manage-card[b-pd9m57x6pe]  .manage-head p { margin: 0; }

.manage-card[b-pd9m57x6pe]  .manage-form {
    max-width: 440px;
    margin-top: 1rem;
}

.manage-card[b-pd9m57x6pe]  .manage-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .4rem;
}

.manage-card[b-pd9m57x6pe]  .manage-actions form { margin: 0; }

.manage-card[b-pd9m57x6pe]  .data-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: .9rem;
    margin-top: 1.1rem;
}

.manage-card[b-pd9m57x6pe]  .data-tile {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1.1rem;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.manage-card[b-pd9m57x6pe]  .data-tile h3 { font-size: 1rem; }
.manage-card[b-pd9m57x6pe]  .data-tile p { margin: 0; flex: 1; }
.manage-card[b-pd9m57x6pe]  .data-tile form { margin: 0; }
.manage-card[b-pd9m57x6pe]  .data-tile.danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 25%, transparent); }

@media (max-width: 639px) {
    .manage-card[b-pd9m57x6pe] { padding: 1.1rem; }
    .manage-title .icon-tile[b-pd9m57x6pe] { --size: 46px; }
    .manage-card[b-pd9m57x6pe]  .manage-actions .btn { flex: 1; }
}

/* Eingabefelder mit Icon (wie Anmeldung) */
.manage-card[b-pd9m57x6pe]  .input-icon { position: relative; display: block; }

.manage-card[b-pd9m57x6pe]  .input-icon > .ico {
    position: absolute;
    left: .95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
    transition: color .15s var(--ease);
}

.manage-card[b-pd9m57x6pe]  .input-icon > input { padding-left: 2.75rem; }
.manage-card[b-pd9m57x6pe]  .input-icon:focus-within > .ico { color: var(--accent); }
.manage-card[b-pd9m57x6pe]  .input-icon > input:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
.manage-card[b-pd9m57x6pe]  .input-icon > input.invalid { border-color: var(--danger); }
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* Navigation im Kontobereich als Pills mit Icons */

.manage-nav[b-4npkmcz9uq] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.1rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
}

.manage-nav[b-4npkmcz9uq]::-webkit-scrollbar { display: none; }

.manage-nav li[b-4npkmcz9uq] { flex-shrink: 0; }

.manage-nav[b-4npkmcz9uq]  .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .55rem 1.05rem;
    box-shadow: var(--shadow-sm);
    transition: background .15s var(--ease), color .15s var(--ease), border-color .15s;
}

.manage-nav[b-4npkmcz9uq]  .nav-link .ico { color: var(--text-subtle); }
.manage-nav[b-4npkmcz9uq]  .nav-link.active .ico { color: var(--accent); }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-es5vym7dly],
.components-reconnect-repeated-attempt-visible[b-es5vym7dly],
.components-reconnect-failed-visible[b-es5vym7dly],
.components-pause-visible[b-es5vym7dly],
.components-resume-failed-visible[b-es5vym7dly],
.components-rejoining-animation[b-es5vym7dly] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-es5vym7dly],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-es5vym7dly],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-es5vym7dly],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-es5vym7dly],
#components-reconnect-modal.components-reconnect-retrying[b-es5vym7dly],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-es5vym7dly],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-es5vym7dly],
#components-reconnect-modal.components-reconnect-failed[b-es5vym7dly],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-es5vym7dly] {
    display: block;
}


#components-reconnect-modal[b-es5vym7dly] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-es5vym7dly 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-es5vym7dly 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-es5vym7dly 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-es5vym7dly]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-es5vym7dly 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-es5vym7dly {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-es5vym7dly {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-es5vym7dly {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-es5vym7dly] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-es5vym7dly] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-es5vym7dly] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-es5vym7dly] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-es5vym7dly] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-es5vym7dly] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-es5vym7dly] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-es5vym7dly 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-es5vym7dly] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-es5vym7dly {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Fehlerseite (im Auth-Layout) */

.error-state[b-6pctn4py79] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.error-art[b-6pctn4py79] {
    position: relative;
    margin: .25rem 0 1.3rem;
}

.error-pot[b-6pctn4py79] {
    width: 88px;
    height: 88px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    background: var(--tone-red-bg);
    color: var(--tone-red);
    transform: rotate(-6deg);
    box-shadow: var(--shadow-sm);
}

.error-badge[b-6pctn4py79] {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-gradient);
    color: #fff;
    border: 3px solid var(--bg-elevated);
    box-shadow: var(--shadow-accent);
}

.error-eyebrow[b-6pctn4py79] { color: var(--danger); }

.error-state h1[b-6pctn4py79] {
    font-size: clamp(1.5rem, 5.5vw, 1.9rem);
    margin-bottom: .6rem;
}

.lead[b-6pctn4py79] {
    color: var(--text-muted);
    margin-bottom: 1.1rem;
}

.request-id[b-6pctn4py79] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    padding: .45rem .8rem;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    margin-bottom: 1.3rem;
    max-width: 100%;
}

.request-id code[b-6pctn4py79] {
    font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
    overflow-wrap: anywhere;
    color: var(--text);
}
/* /Components/Pages/Fridge.razor.rz.scp.css */
/* Kühlschrank - seitenspezifische Styles */

.sr-only[b-m35tfzce93] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.head-actions[b-m35tfzce93] { flex-wrap: wrap; gap: .5rem; }

/* --- Zusammenfassung --------------------------------------------------- */

.fridge-summary[b-m35tfzce93] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: 1.1rem;
}

.summary-item[b-m35tfzce93] {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-width: 0;
    padding: .7rem .85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: var(--shadow-sm);
    font: inherit;
    color: inherit;
    text-align: left;
}

.summary-button[b-m35tfzce93] {
    cursor: pointer;
    transition: transform .15s var(--spring), border-color .15s var(--ease), background .15s var(--ease);
}

.summary-button:hover[b-m35tfzce93] { border-color: var(--border-strong); transform: translateY(-1px); }
.summary-button:active[b-m35tfzce93] { transform: scale(.97); }
.summary-button.has-warning[b-m35tfzce93] { background: color-mix(in srgb, var(--tone-orange-bg) 55%, var(--surface)); }
.summary-button.active[b-m35tfzce93] { border-color: var(--tone-orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tone-orange) 18%, transparent); }

.summary-text[b-m35tfzce93] { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }

.summary-value[b-m35tfzce93] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.summary-label[b-m35tfzce93] {
    font-size: .74rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Filter ------------------------------------------------------------ */

.fridge-filters[b-m35tfzce93] { display: flex; flex-direction: column; gap: .7rem; }

.filter-bar .chip-button[b-m35tfzce93]  .ico { color: var(--text-subtle); }
.filter-bar .chip-button.selected[b-m35tfzce93]  .ico { color: inherit; }
.chip-expiring[b-m35tfzce93]  .ico { color: var(--warning) !important; }
.chip-expiring.selected[b-m35tfzce93]  .ico { color: inherit !important; }

.filter-row[b-m35tfzce93] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.filter-row .segmented[b-m35tfzce93] { min-width: 0; }

.sort-select[b-m35tfzce93] {
    position: relative;
    margin-left: auto;
    display: block;
}

.sort-select[b-m35tfzce93]  .ico {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-subtle);
    pointer-events: none;
}

.sort-select select[b-m35tfzce93] {
    width: auto;
    padding-left: 2.4rem;
    border-radius: var(--r-pill);
    font-weight: 600;
    font-size: .86rem;
}

/* --- Gruppen & Karten ------------------------------------------------- */

.fridge-groups[b-m35tfzce93] { display: flex; flex-direction: column; gap: 1.6rem; }

.group-head[b-m35tfzce93] {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .75rem;
}

.group-head h2[b-m35tfzce93] {
    font-family: var(--font);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.food-card[b-m35tfzce93] { align-items: center; }

.food-card .food-meta[b-m35tfzce93] { gap: .4rem .55rem; }

.food-meta .chip[b-m35tfzce93] { padding: .14rem .5rem; font-size: .7rem; gap: .25rem; }
.food-meta .chip[b-m35tfzce93]  .ico { color: inherit; }

.storage-label[b-m35tfzce93] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-width: 0;
}

.qty-bar[b-m35tfzce93] {
    height: 4px;
    margin-top: .3rem;
    max-width: 140px;
    opacity: .9;
}

.food-qty[b-m35tfzce93] { align-self: flex-start; padding-top: .15rem; font-size: .95rem; }

/* --- Dialoge ----------------------------------------------------------- */

.detail-hero[b-m35tfzce93] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem;
    border-radius: var(--r);
    background: var(--surface-2);
}

.detail-info[b-m35tfzce93] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }

.detail-qty[b-m35tfzce93] {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
}

.detail-qty .small[b-m35tfzce93] { font-family: var(--font); font-weight: 600; letter-spacing: 0; }

.detail-bar[b-m35tfzce93] { margin-top: .45rem; height: 6px; }

.detail-chips[b-m35tfzce93] { gap: .4rem; }
.detail-chips .chip[b-m35tfzce93]  .ico { color: inherit; }

.detail-note[b-m35tfzce93] {
    display: flex;
    gap: .45rem;
    align-items: flex-start;
    color: var(--text-muted);
    margin-bottom: 0;
}

.detail-note[b-m35tfzce93]  .ico { margin-top: .15rem; color: var(--text-subtle); }

.consume-box[b-m35tfzce93] {
    padding: 1rem;
    border-radius: var(--r);
    border: 1px dashed var(--border-strong);
}

.consume-title[b-m35tfzce93] {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-weight: 800;
    font-size: .88rem;
    margin-bottom: .6rem;
}

.consume-title[b-m35tfzce93]  .ico { color: var(--accent); }

.consume-custom[b-m35tfzce93] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.consume-custom .input[b-m35tfzce93] { max-width: 130px; }

.detail-actions .remove-btn:hover[b-m35tfzce93] { color: var(--danger); background: var(--danger-soft); }

.remove-head[b-m35tfzce93] {
    display: flex;
    align-items: center;
    gap: .85rem;
}

.reason-list[b-m35tfzce93] { display: flex; flex-direction: column; gap: .45rem; }

.reason-btn[b-m35tfzce93] {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .55rem .8rem .55rem .55rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    font-size: .92rem;
    text-align: left;
    cursor: pointer;
    transition: background .15s var(--ease), border-color .15s var(--ease), transform .15s var(--spring);
}

.reason-btn:hover[b-m35tfzce93] { background: var(--surface-2); border-color: var(--border-strong); }
.reason-btn:active[b-m35tfzce93] { transform: scale(.98); }
.reason-text[b-m35tfzce93] { flex: 1; }
.reason-btn[b-m35tfzce93]  .reason-arrow { color: var(--text-subtle); }

.editor-hero[b-m35tfzce93] {
    display: flex;
    align-items: flex-end;
    gap: .9rem;
}

.editor-name[b-m35tfzce93] { flex: 1; min-width: 0; }

.empty-actions[b-m35tfzce93] { justify-content: center; }

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 639px) {
    .head-actions > *[b-m35tfzce93] { flex: 1; }

    .fridge-summary[b-m35tfzce93] { gap: .45rem; }

    .summary-item[b-m35tfzce93] {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
        padding: .65rem .7rem;
    }

    .summary-value[b-m35tfzce93] { font-size: 1.02rem; }

    .sort-select[b-m35tfzce93] { margin-left: 0; flex: 1; }
    .sort-select select[b-m35tfzce93] { width: 100%; }

    .filter-row .segmented[b-m35tfzce93] { flex-shrink: 0; }

    .detail-hero[b-m35tfzce93] { padding: .75rem; gap: .8rem; }
    .detail-actions > .btn[b-m35tfzce93] { flex: 1; }
}
/* /Components/Pages/Groups.razor.rz.scp.css */
/* Karten für Gruppen bzw. Haushalte: Icon-Tile, Code-Box mit Kopieren-Button,
   Mitgliederliste mit farbigen Avataren. */

.head-actions[b-m5fslzo24k] { flex-wrap: wrap; }

.skeleton-card[b-m5fslzo24k] { height: 230px; border-radius: var(--r-lg); }

.empty-actions[b-m5fslzo24k] { justify-content: center; margin-top: .5rem; }

/* Karte */

.group-card[b-m5fslzo24k] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}

.group-card:hover[b-m5fslzo24k] { transform: translateY(-2px); box-shadow: var(--shadow); }

.group-card.is-active[b-m5fslzo24k] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm);
}

.group-top[b-m5fslzo24k] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
}

.group-title[b-m5fslzo24k] {
    flex: 1 1 8rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.group-title h2[b-m5fslzo24k] {
    font-family: var(--font);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chips[b-m5fslzo24k] { gap: .4rem; }

.live-chip[b-m5fslzo24k] { align-self: flex-start; }

.live-dot[b-m5fslzo24k] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
    animation: live-b-m5fslzo24k 1.6s var(--ease) infinite;
}

@keyframes live-b-m5fslzo24k {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
    100% { box-shadow: 0 0 0 8px transparent; }
}

/* Beitrittscode */

.code-panel[b-m5fslzo24k] {
    background: var(--surface-2);
    border-radius: var(--r);
    padding: .75rem .85rem .85rem;
}

.code-label[b-m5fslzo24k] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .5rem;
}

.code-label[b-m5fslzo24k]  .ico { color: var(--accent); }

.code-row[b-m5fslzo24k] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.code-row .code-box[b-m5fslzo24k] {
    flex: 1;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--surface);
}

.code-row .btn-icon:hover[b-m5fslzo24k] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

.card-actions[b-m5fslzo24k] {
    margin-top: auto;
    gap: .45rem;
}

/* Dialoge */

.modal-intro[b-m5fslzo24k] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem;
    margin-bottom: 1rem;
    border-radius: var(--r);
    background: var(--surface-2);
}

.code-input[b-m5fslzo24k] {
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 800;
    font-size: 1.1rem;
    text-align: center;
}

.code-input[b-m5fslzo24k]::placeholder {
    letter-spacing: .05em;
    font-weight: 600;
    font-size: .95rem;
    text-transform: none;
}

.delete-btn[b-m5fslzo24k] { margin-right: auto; }

/* Mitglieder */

.member-avatar[b-m5fslzo24k] {
    width: 42px;
    height: 42px;
    font-size: .85rem;
}

.member-list .food-body[b-m5fslzo24k] { min-width: 0; }

.you[b-m5fslzo24k] {
    font-weight: 600;
    color: var(--text-subtle);
    font-size: .82rem;
}

.remove-btn[b-m5fslzo24k] {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.remove-btn:hover[b-m5fslzo24k] { color: var(--danger); background: var(--danger-soft); }

.invite-box[b-m5fslzo24k] {
    margin-top: 1.1rem;
    padding: .9rem;
    border-radius: var(--r);
    border: 1.5px dashed var(--border-strong);
    background: var(--surface-2);
}

.invite-head[b-m5fslzo24k] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .7rem;
    font-size: .92rem;
}

.invite-field[b-m5fslzo24k] { flex: 1; }

@media (max-width: 480px) {
    .invite-box .row-fields[b-m5fslzo24k] { flex-wrap: wrap; }
    .invite-box .row-fields .btn[b-m5fslzo24k] { width: 100%; }
    .modal-intro[b-m5fslzo24k] { align-items: flex-start; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Dashboard */

/* --- Hero ----------------------------------------------------------------- */

.home-hero[b-gwxpsaku2c] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1.1rem;
    min-height: 300px;
    padding: 1.4rem 1.25rem 1.3rem;
    margin-bottom: 1.25rem;
}

/* Auf schmalen Geräten liegt der Text über dem ganzen Foto - Verlauf von unten. */
.home-hero[b-gwxpsaku2c]::before {
    background: linear-gradient(to top, rgba(36, 14, 4, .86) 0%, rgba(36, 14, 4, .5) 55%, rgba(36, 14, 4, .15) 100%);
}

.home-hero > .hero-bg[b-gwxpsaku2c] {
    animation: hero-zoom-b-gwxpsaku2c 14s var(--ease) both;
}

@keyframes hero-zoom-b-gwxpsaku2c { from { transform: scale(1.08) } to { transform: scale(1) } }

.hero-content[b-gwxpsaku2c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    max-width: 36rem;
}

.hero-badge[b-gwxpsaku2c] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .75rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: .76rem;
    font-weight: 700;
    color: #fff;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-hero h1[b-gwxpsaku2c] {
    font-size: clamp(1.75rem, 6.5vw, 2.7rem);
    line-height: 1.08;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .3);
    overflow-wrap: anywhere;
}

.hero-text[b-gwxpsaku2c] {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    font-size: 1rem;
    font-weight: 500;
    max-width: 32rem;
}

.hero-actions[b-gwxpsaku2c] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .45rem;
}

.hero-btn-glass[b-gwxpsaku2c] {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-btn-glass:hover[b-gwxpsaku2c] {
    background: rgba(255, 255, 255, .26);
    color: #fff;
}

/* Kleine Rezept-Empfehlung im Hero */
.hero-tip[b-gwxpsaku2c] {
    display: flex;
    align-items: center;
    gap: .7rem;
    align-self: stretch;
    padding: .6rem .85rem .6rem .6rem;
    border-radius: var(--r);
    background: rgba(255, 255, 255, .94);
    color: #2a1d16;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
    text-decoration: none;
    transition: transform .2s var(--spring), box-shadow .2s var(--ease);
}

.hero-tip:hover[b-gwxpsaku2c] {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

.hero-tip-ico[b-gwxpsaku2c] {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--fresh-gradient);
    color: #fff;
}

.hero-tip-body[b-gwxpsaku2c] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    line-height: 1.25;
}

.hero-tip-label[b-gwxpsaku2c] {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #16a065;
}

.hero-tip-name[b-gwxpsaku2c] {
    font-weight: 800;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Kennzahlen ----------------------------------------------------------- */

.home-stats[b-gwxpsaku2c] { margin-bottom: 1.4rem; }

.skeleton-stat[b-gwxpsaku2c] { height: 132px; }

/* --- Inhalt --------------------------------------------------------------- */

.home-grid[b-gwxpsaku2c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
}

.expiring-list[b-gwxpsaku2c] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .65rem;
}

.food-card.static[b-gwxpsaku2c] { cursor: default; }
.food-card.static:hover[b-gwxpsaku2c] { transform: none; }

.storage[b-gwxpsaku2c] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.section-head[b-gwxpsaku2c] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.section-head h2[b-gwxpsaku2c] { font-size: 1.35rem; }

/* Kategorien + Monat: erst ab breiten Bildschirmen nebeneinander */
.home-split[b-gwxpsaku2c] { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }

/* Kategorien */

.category-list[b-gwxpsaku2c] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.category-row[b-gwxpsaku2c] { gap: .75rem; }

.category-name[b-gwxpsaku2c] {
    width: 7.5rem;
    flex-shrink: 0;
    font-weight: 600;
}

.category-row .rank-bar > span[b-gwxpsaku2c] { background: var(--tone); }

.category-count[b-gwxpsaku2c] {
    min-width: 1.6rem;
    text-align: right;
}

/* Schnellaktionen */

.quick-tiles[b-gwxpsaku2c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
}

.quick-tile[b-gwxpsaku2c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .1rem;
    padding: .85rem .8rem .8rem;
    border-radius: var(--r);
    background: color-mix(in srgb, var(--tone-bg) 60%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--tone) 14%, transparent);
    color: var(--text);
    text-decoration: none;
    min-width: 0;
    transition: transform .2s var(--spring), box-shadow .2s var(--ease);
}

.quick-tile:hover[b-gwxpsaku2c] {
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.quick-tile .icon-tile[b-gwxpsaku2c] {
    background: var(--surface);
    margin-bottom: .55rem;
    box-shadow: var(--shadow-sm);
}

.quick-value[b-gwxpsaku2c] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.1;
}

.quick-label[b-gwxpsaku2c] {
    font-weight: 700;
    font-size: .84rem;
    line-height: 1.25;
}

.quick-sub[b-gwxpsaku2c] {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Häufig gekauft */

.product-chip[b-gwxpsaku2c] {
    padding: .25rem .7rem .25rem .25rem;
    gap: .45rem;
    font-size: .8rem;
    color: var(--text);
    background: var(--surface-2);
}

.product-count[b-gwxpsaku2c] {
    color: var(--text-muted);
    font-weight: 600;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 479px) {
    .quick-tiles[b-gwxpsaku2c] { grid-template-columns: minmax(0, 1fr); }

    .quick-tile[b-gwxpsaku2c] {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "icon label value" "icon sub value";
        align-items: center;
        column-gap: .75rem;
    }

    .quick-tile .icon-tile[b-gwxpsaku2c] { grid-area: icon; margin: 0; }
    .quick-value[b-gwxpsaku2c] { grid-area: value; }
    .quick-label[b-gwxpsaku2c] { grid-area: label; }
    .quick-sub[b-gwxpsaku2c] { grid-area: sub; }

    .category-name[b-gwxpsaku2c] { width: 5.5rem; }

    .hero-actions .btn[b-gwxpsaku2c] { flex: 1 1 auto; }
}

@media (min-width: 640px) {
    .home-hero[b-gwxpsaku2c] {
        min-height: 320px;
        padding: 2rem 2rem 1.8rem;
    }

    .expiring-list[b-gwxpsaku2c] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
    .home-hero[b-gwxpsaku2c] {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        min-height: 340px;
        padding: 2.5rem;
    }

    /* Am Desktop: Text links, Foto rechts frei */
    .home-hero[b-gwxpsaku2c]::before {
        background: linear-gradient(100deg, rgba(36, 14, 4, .82) 0%, rgba(36, 14, 4, .5) 48%, rgba(36, 14, 4, .05) 100%);
    }

    .hero-tip[b-gwxpsaku2c] {
        align-self: flex-end;
        max-width: 300px;
    }

    .expiring-list[b-gwxpsaku2c] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .home-split[b-gwxpsaku2c] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero > .hero-bg[b-gwxpsaku2c] { animation: none; }
}
/* /Components/Pages/Households.razor.rz.scp.css */
/* Haushalts-Karten (gleiches Muster wie Gruppen): Icon-Tile, Code-Box mit Kopieren-Button,
   Mitgliederliste mit farbigen Avataren. */

.head-actions[b-6ajnyeh45f] { flex-wrap: wrap; }

.skeleton-card[b-6ajnyeh45f] { height: 230px; border-radius: var(--r-lg); }

.empty-actions[b-6ajnyeh45f] { justify-content: center; margin-top: .5rem; }

/* Karte */

.group-card[b-6ajnyeh45f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}

.group-card:hover[b-6ajnyeh45f] { transform: translateY(-2px); box-shadow: var(--shadow); }

.group-card.is-active[b-6ajnyeh45f] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-sm);
}

.group-top[b-6ajnyeh45f] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
}

.group-title[b-6ajnyeh45f] {
    flex: 1 1 8rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.group-title h2[b-6ajnyeh45f] {
    font-family: var(--font);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chips[b-6ajnyeh45f] { gap: .4rem; }

.live-chip[b-6ajnyeh45f] { align-self: flex-start; }

.live-dot[b-6ajnyeh45f] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
    animation: live-b-6ajnyeh45f 1.6s var(--ease) infinite;
}

@keyframes live-b-6ajnyeh45f {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
    100% { box-shadow: 0 0 0 8px transparent; }
}

/* Beitrittscode */

.code-panel[b-6ajnyeh45f] {
    background: var(--surface-2);
    border-radius: var(--r);
    padding: .75rem .85rem .85rem;
}

.code-label[b-6ajnyeh45f] {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .5rem;
}

.code-label[b-6ajnyeh45f]  .ico { color: var(--accent); }

.code-row[b-6ajnyeh45f] {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.code-row .code-box[b-6ajnyeh45f] {
    flex: 1;
    min-width: 0;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--surface);
}

.code-row .btn-icon:hover[b-6ajnyeh45f] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }

.card-actions[b-6ajnyeh45f] {
    margin-top: auto;
    gap: .45rem;
}

/* Dialoge */

.modal-intro[b-6ajnyeh45f] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem;
    margin-bottom: 1rem;
    border-radius: var(--r);
    background: var(--surface-2);
}

.code-input[b-6ajnyeh45f] {
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: 800;
    font-size: 1.1rem;
    text-align: center;
}

.code-input[b-6ajnyeh45f]::placeholder {
    letter-spacing: .05em;
    font-weight: 600;
    font-size: .95rem;
    text-transform: none;
}

.delete-btn[b-6ajnyeh45f] { margin-right: auto; }

/* Mitglieder */

.member-avatar[b-6ajnyeh45f] {
    width: 42px;
    height: 42px;
    font-size: .85rem;
}

.member-list .food-body[b-6ajnyeh45f] { min-width: 0; }

.you[b-6ajnyeh45f] {
    font-weight: 600;
    color: var(--text-subtle);
    font-size: .82rem;
}

.remove-btn[b-6ajnyeh45f] {
    width: 34px;
    height: 34px;
    border-radius: 12px;
}

.remove-btn:hover[b-6ajnyeh45f] { color: var(--danger); background: var(--danger-soft); }

.invite-box[b-6ajnyeh45f] {
    margin-top: 1.1rem;
    padding: .9rem;
    border-radius: var(--r);
    border: 1.5px dashed var(--border-strong);
    background: var(--surface-2);
}

.invite-head[b-6ajnyeh45f] {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-bottom: .7rem;
    font-size: .92rem;
}

.invite-field[b-6ajnyeh45f] { flex: 1; }

@media (max-width: 480px) {
    .invite-box .row-fields[b-6ajnyeh45f] { flex-wrap: wrap; }
    .invite-box .row-fields .btn[b-6ajnyeh45f] { width: 100%; }
    .modal-intro[b-6ajnyeh45f] { align-items: flex-start; }
}

/* Ampel-Einstellungen */

.dot-label[b-6ajnyeh45f] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.dot[b-6ajnyeh45f] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-orange[b-6ajnyeh45f] { background: var(--warning); }
.dot-yellow[b-6ajnyeh45f] { background: #f2c94c; }

.basics-check[b-6ajnyeh45f] {
    align-items: flex-start;
    padding: .8rem .9rem;
    border-radius: var(--r);
    background: var(--surface-2);
    line-height: 1.4;
}

.basics-check input[b-6ajnyeh45f] { margin-top: .1rem; flex-shrink: 0; }
/* /Components/Pages/NotFound.razor.rz.scp.css */
/* Seite nicht gefunden */

.state-card[b-91hxon6jsk] {
    max-width: 560px;
    margin: 1.5rem auto 0;
    padding: 2rem 1.25rem 2.2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow);
}

.state-art[b-91hxon6jsk] {
    position: relative;
    width: 200px;
    height: 170px;
    margin-bottom: 1.2rem;
    display: grid;
    place-items: center;
}

/* Teller mit "404" */
.state-plate[b-91hxon6jsk] {
    width: 136px;
    height: 136px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 50%, var(--surface) 0 52%, transparent 53%),
        var(--accent-soft);
    box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--accent) 10%, transparent), var(--shadow);
}

.state-code[b-91hxon6jsk] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -.04em;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.state-float[b-91hxon6jsk] {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: var(--tone-bg);
    color: var(--tone);
    box-shadow: var(--shadow-sm);
    animation: bob-b-91hxon6jsk 4s ease-in-out infinite;
}

.state-float.f1[b-91hxon6jsk] { left: 4px; top: 14px; transform: rotate(-10deg); }
.state-float.f2[b-91hxon6jsk] { right: 8px; top: 2px; animation-delay: -1s; }
.state-float.f3[b-91hxon6jsk] { left: 18px; bottom: 4px; animation-delay: -2s; }
.state-float.f4[b-91hxon6jsk] { right: 0; bottom: 18px; animation-delay: -3s; }

@keyframes bob-b-91hxon6jsk {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -7px; }
}

.state-card h1[b-91hxon6jsk] {
    font-size: clamp(1.6rem, 6vw, 2.1rem);
    margin-bottom: .5rem;
}

.state-text[b-91hxon6jsk] {
    color: var(--text-muted);
    max-width: 40ch;
    margin: 0 auto 1.4rem;
}

.state-actions[b-91hxon6jsk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    width: 100%;
}

@media (max-width: 479px) {
    .state-actions .btn[b-91hxon6jsk] { width: 100%; }
}

@media (min-width: 640px) {
    .state-card[b-91hxon6jsk] { margin-top: 3rem; padding: 2.75rem 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .state-float[b-91hxon6jsk] { animation: none; }
}
/* /Components/Pages/Notifications.razor.rz.scp.css */
/* Benachrichtigungen */

.skeleton-row[b-sxk7ohjl8o] { height: 76px; }

.empty-card[b-sxk7ohjl8o] { padding-block: 1rem; }

.notify-summary[b-sxk7ohjl8o] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
}

.notify-summary .dot[b-sxk7ohjl8o] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}

.notify-card[b-sxk7ohjl8o] { padding: .5rem; }

.notify-row[b-sxk7ohjl8o] {
    align-items: flex-start;
    gap: .85rem;
    padding: .9rem .8rem;
    border-radius: var(--r-sm);
    border-bottom: 0;
    position: relative;
    transition: background .15s var(--ease);
}

.notify-row + .notify-row[b-sxk7ohjl8o] { margin-top: 2px; }

.notify-row:hover[b-sxk7ohjl8o] { background: var(--surface-2); }

/* Ungelesen: zarter Akzent-Hintergrund und Markierung links */
.notify-row.unread[b-sxk7ohjl8o] {
    background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
}

.notify-row.unread[b-sxk7ohjl8o]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--accent-gradient);
}

.notify-row.read .icon-tile[b-sxk7ohjl8o] { opacity: .75; }
.notify-row.read .notify-title-text[b-sxk7ohjl8o] { font-weight: 600; color: var(--text-muted); }

.notify-title[b-sxk7ohjl8o] {
    display: flex;
    align-items: center;
    gap: .45rem;
    flex-wrap: wrap;
}

.notify-title-text[b-sxk7ohjl8o] { overflow-wrap: anywhere; }

.notify-new[b-sxk7ohjl8o] { font-size: .66rem; padding: .1rem .5rem; }

.notify-body[b-sxk7ohjl8o] {
    margin-top: .1rem;
    overflow-wrap: anywhere;
}

.notify-time[b-sxk7ohjl8o] {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-top: .25rem;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-subtle);
}

.notify-action[b-sxk7ohjl8o] {
    align-self: center;
    flex-shrink: 0;
}

@media (max-width: 479px) {
    .notify-row[b-sxk7ohjl8o] {
        flex-wrap: wrap;
        padding: .8rem .65rem;
    }

    .notify-row .icon-tile[b-sxk7ohjl8o] { --size: 38px; }

    /* Aktion rutscht unter den Text */
    .notify-action[b-sxk7ohjl8o] { margin-left: calc(38px + .85rem); }
}
/* /Components/Pages/RecipeDetail.razor.rz.scp.css */
/* Rezeptdetail: Foto-Hero, Meta-Leiste, Zutaten, Schritte und Aktionsleiste */

/* Platz für die schwebende Aktionsleiste über der Bottom-Navigation */
.detail-page[b-w1l4zig0a6] { padding-bottom: calc(var(--bottombar-height) + 7.5rem + env(safe-area-inset-bottom, 0px)); }

.back-link[b-w1l4zig0a6] { margin: -.35rem 0 .6rem -.5rem; }

/* Hero */

.detail-hero[b-w1l4zig0a6] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--r-xl);
    min-height: 300px;
    aspect-ratio: 4 / 3.4;
    max-height: 520px;
    width: 100%;
    display: flex;
    align-items: flex-end;
    background: var(--surface-2);
    color: #fff;
    box-shadow: var(--shadow);
}

.detail-hero-img[b-w1l4zig0a6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    animation: hero-zoom-b-w1l4zig0a6 1.2s var(--ease) both;
}

@keyframes hero-zoom-b-w1l4zig0a6 { from { transform: scale(1.06) } to { transform: scale(1) } }

.detail-hero[b-w1l4zig0a6]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(28, 10, 2, .86) 0%, rgba(28, 10, 2, .45) 42%, rgba(28, 10, 2, 0) 72%);
}

.detail-hero-icon[b-w1l4zig0a6] {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: grid;
    place-items: center;
    padding-bottom: 22%;
    color: rgba(255, 255, 255, .9);
}

.detail-hero-body[b-w1l4zig0a6] {
    width: 100%;
    padding: 1.2rem 1.15rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.detail-hero-body h1[b-w1l4zig0a6] {
    color: #fff;
    font-size: clamp(1.75rem, 6vw, 2.8rem);
    line-height: 1.05;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
    overflow-wrap: anywhere;
}

.hero-desc[b-w1l4zig0a6] {
    margin: 0;
    max-width: 62ch;
    color: rgba(255, 255, 255, .88);
    font-size: .95rem;
}

.hero-badges[b-w1l4zig0a6] { display: flex; flex-wrap: wrap; gap: .4rem; }

.hero-badge[b-w1l4zig0a6] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .28rem .7rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: .76rem;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, .25);
}

.hero-badge-ok[b-w1l4zig0a6] {
    background: var(--fresh-gradient);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(31, 166, 122, .35);
}

/* Meta-Leiste */

.meta-bar[b-w1l4zig0a6] {
    position: relative;
    z-index: 1;
    margin: -1.6rem .75rem 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem .75rem;
    padding: 1rem;
    box-shadow: var(--shadow);
}

.meta-item[b-w1l4zig0a6] { display: flex; align-items: center; gap: .6rem; min-width: 0; }

.meta-text[b-w1l4zig0a6] { display: flex; flex-direction: column; min-width: 0; }

.meta-label[b-w1l4zig0a6] {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-subtle);
}

.meta-value[b-w1l4zig0a6] {
    font-weight: 800;
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tag-row[b-w1l4zig0a6] { margin-top: 1rem; gap: .4rem; }

/* Inhalt */

.detail-grid[b-w1l4zig0a6] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
}

.ingredients .ingredient-row[b-w1l4zig0a6] { gap: .75rem; }
.ingredients .ingredient-row.missing[b-w1l4zig0a6]  .food-thumb { opacity: .55; filter: grayscale(.5); }
.ingredients .state[b-w1l4zig0a6] { width: 1.5rem; }

/* Schritte */

.steps[b-w1l4zig0a6] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.step[b-w1l4zig0a6] {
    position: relative;
    display: flex;
    gap: .9rem;
    padding-bottom: 1.1rem;
}

.step:last-child[b-w1l4zig0a6] { padding-bottom: 0; }

/* Verbindungslinie zwischen den Nummern */
.step:not(:last-child)[b-w1l4zig0a6]::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 36px;
    bottom: 2px;
    width: 2px;
    border-radius: 2px;
    background: var(--border);
}

.step-num[b-w1l4zig0a6] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .95rem;
}

.step:first-child .step-num[b-w1l4zig0a6] { background: var(--accent-gradient); color: #fff; box-shadow: var(--shadow-accent); }

.step-text[b-w1l4zig0a6] {
    margin: 0;
    padding-top: .35rem;
    line-height: 1.6;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Aktionsleiste: Mobile schwebend über der Bottom-Nav */

.detail-actions[b-w1l4zig0a6] {
    position: fixed;
    left: .6rem;
    right: .6rem;
    bottom: calc(var(--bottombar-height) + 1.2rem + env(safe-area-inset-bottom, 0px));
    z-index: 35;
    display: flex;
    gap: .45rem;
    padding: .5rem;
    border-radius: 22px;
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

.action-main[b-w1l4zig0a6] { flex: 1; min-width: 0; padding-inline: 1rem; }

.action-side[b-w1l4zig0a6] { padding: 0; width: 50px; flex-shrink: 0; }
.action-label[b-w1l4zig0a6] { display: none; }
.action-delete:hover[b-w1l4zig0a6] { color: var(--danger); background: var(--danger-soft); }

/* Koch-Dialog */

.servings-field[b-w1l4zig0a6] { max-width: 180px; }
.cook-row[b-w1l4zig0a6] { gap: .65rem; }
.cook-qty[b-w1l4zig0a6] { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; }
.cook-qty .input[b-w1l4zig0a6] { width: 84px; padding-inline: .6rem; }

@media (max-width: 380px) {
    .cook-row[b-w1l4zig0a6] { flex-wrap: wrap; }
    .cook-qty[b-w1l4zig0a6] { margin-left: auto; }
}

@media (min-width: 640px) {
    .detail-hero[b-w1l4zig0a6] { aspect-ratio: 16 / 8; }
    .detail-hero-body[b-w1l4zig0a6] { padding: 1.75rem 2rem 2.6rem; }

    .meta-bar[b-w1l4zig0a6] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: -1.9rem 1.5rem 0;
        padding: 1rem 1.25rem;
    }

    .detail-actions[b-w1l4zig0a6] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: min(560px, calc(100% - 2rem));
    }

    .action-side[b-w1l4zig0a6] { width: auto; padding: .85rem 1.1rem; }
    .action-label[b-w1l4zig0a6] { display: inline; }
}

@media (min-width: 1024px) {
    .detail-page[b-w1l4zig0a6] { padding-bottom: 3rem; }

    .detail-grid[b-w1l4zig0a6] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }

    /* Desktop: Aktionen als normale Leiste unter dem Inhalt */
    .detail-actions[b-w1l4zig0a6] {
        position: static;
        transform: none;
        width: auto;
        margin-top: 1.4rem;
        padding: .75rem;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--surface);
        box-shadow: var(--shadow-sm);
        border-radius: var(--r-lg);
    }

    .action-main[b-w1l4zig0a6] { flex: 0 1 auto; padding-inline: 1.6rem; }
    .action-delete[b-w1l4zig0a6] { margin-left: auto; }
}

/* Sehr schmale Handys: kürzere Beschriftung und kompaktere Knöpfe */
.label-short[b-w1l4zig0a6] { display: none; }

@media (max-width: 399px) {
    .label-long[b-w1l4zig0a6] { display: none; }
    .label-short[b-w1l4zig0a6] { display: inline; }
    .action-side[b-w1l4zig0a6] { width: 44px; }
    .action-main[b-w1l4zig0a6] { padding-inline: .8rem; }
    .meta-bar[b-w1l4zig0a6] { margin-inline: .4rem; }
}


/* --- Personen-Regler --------------------------------------------------------- */

.servings-stepper[b-w1l4zig0a6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    padding: .7rem .85rem;
    margin-bottom: .9rem;
    border-radius: var(--r);
    background: var(--accent-soft);
}

.servings-label[b-w1l4zig0a6] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 700;
    color: var(--accent-strong);
}

.stepper[b-w1l4zig0a6] {
    display: inline-flex;
    align-items: center;
    background: var(--surface);
    border-radius: var(--r-pill);
    box-shadow: var(--shadow-sm);
    padding: 3px;
}

.stepper-btn[b-w1l4zig0a6] {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--accent-strong);
    cursor: pointer;
    transition: background .15s, transform .15s var(--spring);
}

.stepper-btn:hover:not(:disabled)[b-w1l4zig0a6] { background: var(--accent-soft); }
.stepper-btn:active:not(:disabled)[b-w1l4zig0a6] { transform: scale(.9); }
.stepper-btn:disabled[b-w1l4zig0a6] { opacity: .35; cursor: not-allowed; }

.stepper-value[b-w1l4zig0a6] {
    min-width: 2.2rem;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
}

.servings-reset[b-w1l4zig0a6] { margin-left: auto; }
/* /Components/Pages/RecipeEditor.razor.rz.scp.css */
/* Rezept-Editor: Karten-Abschnitte mit Icon-Kopf, Bildvorschau und responsive Zeilen */

.editor-page[b-dw0x7f8bw6] { max-width: 1040px; }

.editor-grid[b-dw0x7f8bw6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.editor-section[b-dw0x7f8bw6] { min-width: 0; }

.section-head[b-dw0x7f8bw6] {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.1rem;
}

.section-head > div[b-dw0x7f8bw6] { flex: 1; min-width: 0; }

.section-head h2[b-dw0x7f8bw6] {
    font-family: var(--font);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.section-sub[b-dw0x7f8bw6] { margin: .1rem 0 0; font-size: .8rem; color: var(--text-muted); }

.head-action[b-dw0x7f8bw6] { flex-shrink: 0; }

.field label[b-dw0x7f8bw6] { display: inline-flex; align-items: center; gap: .3rem; }
.field label[b-dw0x7f8bw6]  .ico { color: var(--text-subtle); }

.field-grid[b-dw0x7f8bw6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem .75rem;
}

/* Ernährungs-Schalter als Chips */

.diet-toggles[b-dw0x7f8bw6] { display: flex; flex-wrap: wrap; gap: .5rem; }

.diet-toggle[b-dw0x7f8bw6] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .9rem .5rem .7rem;
    border-radius: var(--r-pill);
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-weight: 700;
    font-size: .86rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: background .15s var(--ease), border-color .15s, color .15s;
}

.diet-toggle:hover[b-dw0x7f8bw6] { border-color: var(--border-strong); color: var(--text); }

.diet-toggle.on[b-dw0x7f8bw6] {
    background: var(--success-soft);
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
    color: var(--success);
}

/* Bildvorschau */

.image-preview[b-dw0x7f8bw6] {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--r);
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--surface-2);
    color: rgba(255, 255, 255, .95);
}

.image-preview img[b-dw0x7f8bw6] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder[b-dw0x7f8bw6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1rem;
    text-align: center;
    font-size: .82rem;
    font-weight: 700;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}

.search-field > input.input[b-dw0x7f8bw6] { border-radius: var(--r-sm); }

.more-options summary[b-dw0x7f8bw6] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-muted);
    list-style: none;
}

.more-options summary[b-dw0x7f8bw6]::-webkit-details-marker { display: none; }
.more-options summary[b-dw0x7f8bw6]  .ico { transition: transform .2s var(--ease); }
.more-options[open] summary[b-dw0x7f8bw6]  .ico { transform: rotate(90deg); }

.emoji-field[b-dw0x7f8bw6] { max-width: 220px; }

/* Zutaten-Zeilen: Mobile zweizeilig, ab Tablet einzeilig */

.ingredient-list[b-dw0x7f8bw6], .step-list[b-dw0x7f8bw6] { display: flex; flex-direction: column; gap: .6rem; }

.ingredient-edit[b-dw0x7f8bw6] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas:
        "thumb name name name"
        "thumb qty  unit remove";
    gap: .5rem;
    align-items: center;
    padding: .6rem;
    border-radius: var(--r);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.ingredient-edit[b-dw0x7f8bw6]  .ing-thumb { grid-area: thumb; align-self: start; }
.ing-name[b-dw0x7f8bw6] { grid-area: name; }
.ing-qty[b-dw0x7f8bw6] { grid-area: qty; }
.ing-unit[b-dw0x7f8bw6] { grid-area: unit; }
.ing-remove[b-dw0x7f8bw6] { grid-area: remove; }

.ingredient-edit .input[b-dw0x7f8bw6], .ingredient-edit .select[b-dw0x7f8bw6] { background-color: var(--surface); }

@media (min-width: 720px) {
    .ingredient-edit[b-dw0x7f8bw6] {
        grid-template-columns: auto minmax(0, 1fr) 100px 116px auto;
        grid-template-areas: "thumb name qty unit remove";
        padding: .45rem .5rem;
    }

    .ingredient-edit[b-dw0x7f8bw6]  .ing-thumb { align-self: center; }
}

/* Schritte */

.step-edit[b-dw0x7f8bw6] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.step-num[b-dw0x7f8bw6] {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin-top: .3rem;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-family: var(--font-display);
    font-weight: 800;
}

.step-input[b-dw0x7f8bw6] { flex: 1; min-width: 0; min-height: 72px; }

/* Hinzufügen-Knopf am Ende einer Liste */

.add-row[b-dw0x7f8bw6] {
    margin-top: .75rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .75rem;
    border-radius: var(--r);
    border: 1.5px dashed var(--border-strong);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: background .15s var(--ease), color .15s, border-color .15s;
}

.add-row:hover[b-dw0x7f8bw6] { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Speichern-Leiste */

.save-bar[b-dw0x7f8bw6] {
    margin-top: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
    padding: .75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 479px) {
    .save-bar .btn-primary[b-dw0x7f8bw6] { flex: 1; }
}

@media (min-width: 900px) {
    .editor-grid[b-dw0x7f8bw6] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .span-full[b-dw0x7f8bw6] { grid-column: 1 / -1; }
}
/* /Components/Pages/Recipes.razor.rz.scp.css */
/* Rezeptliste: Werkzeugleiste, Top-Match und Raster */

.recipe-toolbar[b-9fy1nl38ih] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1rem;
}

.toolbar-top[b-9fy1nl38ih] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.toolbar-search[b-9fy1nl38ih] { flex: 1; min-width: 0; }

.mode-switch[b-9fy1nl38ih] { align-self: flex-start; }

.filter-bar[b-9fy1nl38ih] { margin: 0 -.1rem; padding-bottom: .1rem; }

.filter-bar .chip-button[b-9fy1nl38ih]  .ico { color: var(--accent); }
.filter-bar .chip-button.selected[b-9fy1nl38ih]  .ico { color: inherit; }

.filter-divider[b-9fy1nl38ih] {
    width: 1px;
    flex-shrink: 0;
    margin: .3rem .15rem;
    background: var(--border-strong);
}

.toolbar-options[b-9fy1nl38ih] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: .75rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--border);
}

.option[b-9fy1nl38ih] { display: flex; flex-direction: column; gap: .35rem; }

.option-label[b-9fy1nl38ih] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.option-label[b-9fy1nl38ih]  .ico { color: var(--accent); }

.recipe-skeleton[b-9fy1nl38ih] { height: 300px; border-radius: var(--r-lg); }

/* Top-Match: großes Foto + Infos */

.top-match[b-9fy1nl38ih] {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
    margin-bottom: 1.6rem;
    transition: transform .2s var(--ease), box-shadow .25s var(--ease);
}

.top-match:hover[b-9fy1nl38ih] { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; }

.top-media[b-9fy1nl38ih] {
    position: relative;
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: rgba(255, 255, 255, .92);
    background: var(--surface-2);
}

.top-media img[b-9fy1nl38ih] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s var(--ease);
}

.top-match:hover .top-media img[b-9fy1nl38ih] { transform: scale(1.05); }

.top-body[b-9fy1nl38ih] {
    padding: 1.15rem 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    min-width: 0;
}

.top-badge[b-9fy1nl38ih] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .75rem;
    border-radius: var(--r-pill);
    background: var(--sunny-gradient);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    box-shadow: var(--shadow-accent);
}

.top-body h2[b-9fy1nl38ih] { font-size: 1.55rem; }

.top-desc[b-9fy1nl38ih] {
    color: var(--text-muted);
    font-size: .92rem;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.top-meta[b-9fy1nl38ih] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--text-muted);
}

.top-meta > span[b-9fy1nl38ih] { display: inline-flex; align-items: center; gap: .3rem; }
.top-meta[b-9fy1nl38ih]  .ico { color: var(--accent); }

.top-foot[b-9fy1nl38ih] {
    margin-top: auto;
    padding-top: .5rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    flex-wrap: wrap;
}

.top-status[b-9fy1nl38ih] {
    flex: 1;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    font-size: .9rem;
}

.top-status .small[b-9fy1nl38ih] { display: inline-flex; align-items: center; gap: .25rem; }

.section-title[b-9fy1nl38ih] {
    font-size: 1.2rem;
    margin-bottom: .9rem;
}

@media (min-width: 640px) {
    .recipe-toolbar[b-9fy1nl38ih] { padding: 1.1rem 1.2rem; }
}

@media (min-width: 860px) {
    .toolbar-top[b-9fy1nl38ih] { flex-direction: row; align-items: center; }
    .mode-switch[b-9fy1nl38ih] { align-self: auto; flex-shrink: 0; }

    .top-match[b-9fy1nl38ih] { grid-template-columns: 1.15fr 1fr; }
    .top-media[b-9fy1nl38ih] { aspect-ratio: auto; min-height: 320px; }
    .top-body[b-9fy1nl38ih] { padding: 1.75rem 1.75rem 1.6rem; justify-content: center; }
    .top-body h2[b-9fy1nl38ih] { font-size: 2rem; }
}
/* /Components/Pages/Scan.razor.rz.scp.css */
/* Scannen & KI - seitenspezifische Styles */

/* --- Tabs -------------------------------------------------------------- */

.scan-tabs[b-tk894teslp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    max-width: 780px;
}

.scan-tab[b-tk894teslp] {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
    padding: .7rem .85rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: border-color .15s var(--ease), box-shadow .2s var(--ease), transform .15s var(--spring);
}

.scan-tab:hover[b-tk894teslp] { border-color: var(--border-strong); transform: translateY(-1px); }
.scan-tab:active[b-tk894teslp] { transform: scale(.97); }

.scan-tab.active[b-tk894teslp] {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow-sm);
}

.scan-tab:not(.active) .icon-tile[b-tk894teslp] { background: var(--surface-2); color: var(--text-subtle); }

.scan-tab-text[b-tk894teslp] { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.scan-tab-title[b-tk894teslp] { font-weight: 800; font-size: .92rem; }
.scan-tab-sub[b-tk894teslp] { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Dropzone ---------------------------------------------------------- */

.dropzone[b-tk894teslp] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .35rem;
    padding: 2.2rem 1.25rem 1.8rem;
    border: 2px dashed color-mix(in srgb, var(--accent) 38%, var(--border));
    border-radius: var(--r-lg);
    background:
        radial-gradient(420px 200px at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
        var(--surface-2);
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}

.dropzone:hover[b-tk894teslp],
.dropzone:focus-within[b-tk894teslp] {
    border-color: var(--accent);
    background:
        radial-gradient(420px 200px at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
        var(--surface-2);
}

.dropzone-art[b-tk894teslp] {
    width: 76px;
    height: 76px;
    border-radius: 26px;
    display: grid;
    place-items: center;
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: var(--shadow-accent);
    margin-bottom: .6rem;
    transform: rotate(-5deg);
    transition: transform .3s var(--spring);
}

.dropzone:hover .dropzone-art[b-tk894teslp] { transform: rotate(0) scale(1.05); }

.dropzone-title[b-tk894teslp] {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.dropzone-hint[b-tk894teslp] {
    font-size: .86rem;
    color: var(--text-muted);
    max-width: 42ch;
}

.dropzone-btn[b-tk894teslp] { margin-top: .8rem; pointer-events: none; }

.dropzone-formats[b-tk894teslp] { font-size: .72rem; color: var(--text-subtle); margin-top: .35rem; }

/* Unsichtbares Datei-Feld über der ganzen Fläche */
.dropzone[b-tk894teslp]  .dropzone-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.dropzone.is-busy .dropzone-art[b-tk894teslp] {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transform: none;
}

.dropzone.is-busy[b-tk894teslp],
.dropzone.is-disabled[b-tk894teslp] { cursor: default; }

.dropzone.is-busy[b-tk894teslp]  .dropzone-input,
.dropzone.is-disabled[b-tk894teslp]  .dropzone-input { cursor: not-allowed; }

.dropzone.is-disabled[b-tk894teslp] { border-color: var(--border-strong); }
.dropzone.is-disabled .dropzone-art[b-tk894teslp] { background: var(--surface-3); color: var(--text-subtle); box-shadow: none; }
.dropzone.is-disabled .dropzone-btn[b-tk894teslp] { opacity: .5; box-shadow: none; }

.scan-footer[b-tk894teslp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem 1rem;
    flex-wrap: wrap;
}

.scan-note[b-tk894teslp] { display: flex; align-items: flex-start; gap: .4rem; flex: 1 1 260px; }
.scan-note[b-tk894teslp]  .ico { margin-top: .1rem; color: var(--success); }

/* --- Prüfliste --------------------------------------------------------- */

.card-head h2[b-tk894teslp]  .ico { color: var(--accent); }

.review-list[b-tk894teslp] { display: flex; flex-direction: column; gap: .55rem; }

.review-row[b-tk894teslp] {
    display: grid;
    align-items: center;
    gap: .5rem;
}

.food-review[b-tk894teslp] {
    padding: .55rem;
    border-radius: var(--r);
    background: var(--surface-2);
}

.review-row[b-tk894teslp]  .review-thumb { grid-area: thumb; align-self: start; }
.review-name[b-tk894teslp] { grid-area: name; font-weight: 600; }
.review-qty[b-tk894teslp] { grid-area: qty; }
.review-unit[b-tk894teslp] { grid-area: unit; }
.review-date[b-tk894teslp], .review-price[b-tk894teslp] { grid-area: extra; }
.review-remove[b-tk894teslp] { grid-area: remove; justify-self: end; }

.food-review[b-tk894teslp],
.receipt-review[b-tk894teslp] {
    grid-template-columns: 44px 84px 96px minmax(0, 1fr) 40px;
    grid-template-areas:
        "thumb name name name remove"
        "thumb qty unit extra extra";
}

.review-row .input[b-tk894teslp],
.review-row .select[b-tk894teslp] { padding: .55rem .7rem; font-size: .88rem; }

.review-row .select[b-tk894teslp] { padding-right: 2rem; background-position: right .55rem center; }

.review-row .review-remove:hover[b-tk894teslp] { color: var(--danger); background: var(--danger-soft); }

.review-price[b-tk894teslp] { position: relative; display: block; }
.review-price .input[b-tk894teslp] { padding-right: 1.8rem; }

.price-suffix[b-tk894teslp] {
    position: absolute;
    right: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-subtle);
    pointer-events: none;
}

.review-head[b-tk894teslp] { display: none; }

.receipt-meta .field label[b-tk894teslp] { display: inline-flex; align-items: center; gap: .3rem; }
.receipt-meta .field label[b-tk894teslp]  .ico { color: var(--text-subtle); }

.receipt-item[b-tk894teslp] {
    padding: .55rem;
    border-radius: var(--r);
    background: var(--surface-2);
    transition: opacity .2s var(--ease);
}

.receipt-item.is-skipped[b-tk894teslp] { opacity: .62; }

.receipt-extra[b-tk894teslp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem .7rem;
    margin-top: .5rem;
    padding-left: calc(44px + .5rem);
}

.receipt-extra .input[b-tk894teslp],
.receipt-extra .select[b-tk894teslp] { padding: .5rem .7rem; font-size: .84rem; }

.receipt-extra .select[b-tk894teslp] { padding-right: 2rem; background-position: right .55rem center; }

.extra-date[b-tk894teslp] { width: 150px; }
.extra-category[b-tk894teslp] { width: 180px; }

.inventory-toggle[b-tk894teslp] { gap: .4rem; }
.inventory-toggle[b-tk894teslp]  .ico { color: var(--text-subtle); }

.raw-text[b-tk894teslp] { flex: 1 1 140px; min-width: 0; }

.confirm-bar[b-tk894teslp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* --- Responsive -------------------------------------------------------- */

@media (max-width: 639px) {
    .scan-tab[b-tk894teslp] { padding: .6rem .65rem; gap: .55rem; }
    .scan-tab-sub[b-tk894teslp] { display: none; }

    .dropzone[b-tk894teslp] { padding: 1.8rem 1rem 1.5rem; }
    .dropzone-art[b-tk894teslp] { width: 64px; height: 64px; border-radius: 22px; }

    .food-review[b-tk894teslp],
    .receipt-review[b-tk894teslp] {
        grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 38px;
        grid-template-areas:
            "thumb name name remove"
            "qty qty unit unit"
            "extra extra extra extra";
    }

    .receipt-extra[b-tk894teslp] { padding-left: 0; }
    .extra-date[b-tk894teslp], .extra-category[b-tk894teslp] { flex: 1 1 140px; width: auto; }

    .confirm-bar > .btn[b-tk894teslp] { flex: 1 1 auto; }
    .confirm-bar > .btn-success[b-tk894teslp] { order: -1; width: 100%; white-space: normal; }
}

@media (min-width: 900px) {
    /* Am Desktop alles in einer Zeile */
    .food-review[b-tk894teslp] {
        grid-template-columns: 44px minmax(0, 1fr) 90px 100px 160px 40px;
        grid-template-areas: "thumb name qty unit extra remove";
    }

    .receipt-review[b-tk894teslp] {
        grid-template-columns: 44px minmax(0, 1fr) 90px 100px 120px 40px;
        grid-template-areas: "thumb name qty unit extra remove";
    }

    .review-row[b-tk894teslp]  .review-thumb { align-self: center; }

    .review-head.hide-mobile-grid[b-tk894teslp] {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 90px 100px 160px 40px;
        gap: .5rem;
        padding: 0 .55rem .4rem;
        font-size: .72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .06em;
        color: var(--text-subtle);
    }
}


/* --- Barcode (ohne KI) ----------------------------------------------------- */

.barcode-intro[b-tk894teslp],
.ai-setup-head[b-tk894teslp] {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-bottom: 1.1rem;
}

.barcode-intro h2[b-tk894teslp],
.ai-setup-head h2[b-tk894teslp] { font-size: 1.2rem; margin-bottom: .2rem; }

.barcode-form[b-tk894teslp] {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.barcode-input[b-tk894teslp] { flex: 1 1 220px; }
.barcode-input input[b-tk894teslp] { font-size: 1rem; letter-spacing: .04em; }

.barcode-photo[b-tk894teslp] {
    margin-top: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .9rem;
    border: 2px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
    border-radius: var(--r);
    background: var(--accent-soft);
    color: var(--accent-strong);
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.barcode-photo:hover[b-tk894teslp] { border-color: var(--accent); }
.barcode-photo.is-busy[b-tk894teslp] { opacity: .6; pointer-events: none; }

.spinner-sm[b-tk894teslp] { width: 16px; height: 16px; border-width: 2px; border-color: rgba(255, 255, 255, .4); border-top-color: #fff; }

/* --- KI-Einrichtung ------------------------------------------------------- */

.ai-setup[b-tk894teslp] { border-style: dashed; border-color: color-mix(in srgb, var(--tone-violet) 35%, var(--border)); }

.setup-steps[b-tk894teslp] {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.setup-steps li[b-tk894teslp] {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-size: .9rem;
    min-width: 0;
}

.setup-steps li > span:last-child[b-tk894teslp] { min-width: 0; }

.step-num[b-tk894teslp] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--tone-violet-bg);
    color: var(--tone-violet);
    font-weight: 800;
    font-size: .8rem;
}

.setup-cmd[b-tk894teslp] {
    display: block;
    margin-top: .4rem;
    padding: .6rem .75rem;
    border-radius: var(--r-xs);
    background: var(--surface-3);
    font-family: ui-monospace, "Cascadia Code", Menlo, monospace;
    font-size: .78rem;
    overflow-x: auto;
    white-space: nowrap;
    user-select: all;
}

/* Drei Tabs am Handy: Icon über dem Text, damit nichts abgeschnitten wird. */
@media (max-width: 639px) {
    .scan-tabs[b-tk894teslp] { gap: .45rem; }
    .scan-tab[b-tk894teslp] { flex-direction: column; justify-content: center; text-align: center; gap: .35rem; padding: .65rem .3rem; }
    .scan-tab-text[b-tk894teslp] { align-items: center; }
    .scan-tab-title[b-tk894teslp] { font-size: .8rem; white-space: nowrap; }
    .barcode-form .btn[b-tk894teslp] { flex: 1 1 100%; }
}

.ai-ready[b-tk894teslp] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .9rem;
    border-radius: var(--r-pill);
    background: var(--success-soft);
    color: var(--success);
    font-size: .82rem;
    max-width: 100%;
}

.ai-ready-dot[b-tk894teslp] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--success);
    flex-shrink: 0;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 20%, transparent);
}

.dropzone-progress[b-tk894teslp] { width: min(260px, 80%); height: 6px; margin-top: .3rem; }
/* /Components/Pages/Settings.razor.rz.scp.css */
/* Einstellungen: Karten mit Icon-Kopf und Theme-Auswahl */

.settings-grid[b-oix3frrine] { align-items: start; }

.section-head[b-oix3frrine] {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1.1rem;
}

.section-head h2[b-oix3frrine] {
    font-family: var(--font);
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: .1rem 0 .15rem;
}

.section-title[b-oix3frrine] { flex: 1; min-width: 0; }

/* Theme-Auswahl: zwei große Kacheln mit Mini-Vorschau */
.theme-options[b-oix3frrine] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}

.theme-option[b-oix3frrine] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: .6rem .6rem .75rem;
    border: 2px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s var(--ease), box-shadow .2s var(--ease), transform .15s var(--spring);
}

.theme-option:hover[b-oix3frrine] { border-color: var(--border-strong); transform: translateY(-1px); }
.theme-option:active[b-oix3frrine] { transform: scale(.98); }

.theme-option.active[b-oix3frrine] {
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Vorschau bleibt bewusst in den echten Farben des jeweiligen Themas */
.theme-preview[b-oix3frrine] {
    display: grid;
    grid-template-columns: 30% 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    height: 74px;
    padding: 8px;
    border-radius: calc(var(--r) - 6px);
}

.theme-preview > span[b-oix3frrine] { border-radius: 6px; }
.theme-preview > span:first-child[b-oix3frrine] { grid-row: 1 / 3; }

.theme-option.light .theme-preview[b-oix3frrine] { background: #fffaf5; border: 1px solid #f0e6dc; }
.theme-option.light .theme-preview > span[b-oix3frrine] { background: #ffffff; box-shadow: 0 1px 3px rgba(120, 66, 30, .1); }
.theme-option.light .theme-preview > span:nth-child(2)[b-oix3frrine] { background: linear-gradient(135deg, #ff7a45, #ff5a5f); }

.theme-option.dark .theme-preview[b-oix3frrine] { background: #171211; border: 1px solid #352c29; }
.theme-option.dark .theme-preview > span[b-oix3frrine] { background: #2a2220; }
.theme-option.dark .theme-preview > span:nth-child(2)[b-oix3frrine] { background: linear-gradient(135deg, #ff7d55, #ff5a5f); }

.theme-label[b-oix3frrine] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 800;
    font-size: .92rem;
    padding-left: .2rem;
}

.theme-option.light .theme-label[b-oix3frrine]  .ico { color: var(--tone-yellow); }
.theme-option.dark .theme-label[b-oix3frrine]  .ico { color: var(--tone-violet); }

.theme-check[b-oix3frrine] {
    position: absolute;
    top: .9rem;
    right: .9rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: var(--shadow-accent);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .15s var(--ease), transform .25s var(--spring);
}

.theme-option.active .theme-check[b-oix3frrine] { opacity: 1; transform: scale(1); }

/* Konto */
.account-row[b-oix3frrine] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .75rem;
    border-radius: var(--r);
    background: var(--surface-2);
}

.account-avatar[b-oix3frrine] { width: 48px; height: 48px; font-size: .95rem; }

.list-sub[b-oix3frrine] { display: inline-flex; align-items: center; gap: .35rem; }

.online-dot[b-oix3frrine] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px var(--success-soft);
}

.inline-form[b-oix3frrine] { display: inline; margin: 0; }
.logout-btn:hover[b-oix3frrine] { color: var(--danger); background: var(--danger-soft); }

/* Grundzutaten */
.basics-list[b-oix3frrine] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.basic-chip[b-oix3frrine] {
    background: var(--tone-green-bg);
    color: var(--tone-green);
    padding: .35rem .45rem .35rem .65rem;
    font-size: .8rem;
}

.basic-chip > button[b-oix3frrine] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-left: .2rem;
    opacity: .7;
}

.basic-chip > button:hover[b-oix3frrine] { background: var(--surface); opacity: 1; }

.grow[b-oix3frrine] { flex: 1; }
.row-fields .search-field > input[b-oix3frrine] { border-radius: var(--r-sm); }
.add-basic[b-oix3frrine] { height: 46px; }

.toggle-row[b-oix3frrine] {
    padding: .85rem 1rem;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--border);
}

/* Ablauf-Warnungen */
.expiry-legend[b-oix3frrine] { display: flex; flex-wrap: wrap; gap: .45rem; }
.expiry-soon[b-oix3frrine] { background: var(--tone-yellow-bg); color: var(--tone-yellow); }

@media (max-width: 639px) {
    .grow[b-oix3frrine] { flex-basis: 100%; }
    .add-basic[b-oix3frrine] { flex: 1 1 100%; }
    .theme-preview[b-oix3frrine] { height: 60px; }
}
/* /Components/Pages/Shopping.razor.rz.scp.css */
/* Einkaufsliste: große runde Checkboxen, prominente Hinzufügen-Zeile */

.head-actions[b-80n6gyqp46] { flex-wrap: wrap; }

.add-card[b-80n6gyqp46] {
    background:
        radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%),
        var(--surface);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    box-shadow: var(--shadow);
}

.add-head[b-80n6gyqp46] {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
}

.add-title[b-80n6gyqp46] {
    font-family: var(--font);
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.add-fields[b-80n6gyqp46] { gap: .6rem; }
.add-name[b-80n6gyqp46] { flex: 1 1 220px; }
.add-qty[b-80n6gyqp46] { width: 92px; flex-shrink: 0; }
.add-unit[b-80n6gyqp46] { width: 110px; flex-shrink: 0; }

.add-fields .search-field > input[b-80n6gyqp46] { border-radius: var(--r-sm); }

.add-btn[b-80n6gyqp46] { height: 46px; padding-inline: 1.2rem; }

/* Fortschritt */
.progress-card[b-80n6gyqp46] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.progress-text[b-80n6gyqp46] {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .92rem;
    color: var(--text-muted);
}

.progress-text strong[b-80n6gyqp46] { color: var(--text); }
.progress-card .bar[b-80n6gyqp46] { height: 10px; }

.shopping-groups[b-80n6gyqp46] { display: flex; flex-direction: column; gap: 1rem; }

.group-title .icon-tile[b-80n6gyqp46] { --size: 32px; }

/* Zeile */
.shopping-row[b-80n6gyqp46] { gap: .5rem; padding: .35rem 0; }

.shop-check[b-80n6gyqp46] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .45rem .5rem;
    margin-left: -.5rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background .15s var(--ease);
}

.shop-check:hover[b-80n6gyqp46] { background: var(--surface-2); }

.visually-hidden[b-80n6gyqp46] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.check-circle[b-80n6gyqp46] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    background: var(--surface);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: transparent;
    transition: background .2s var(--ease), border-color .2s var(--ease), color .15s, transform .25s var(--spring);
}

.shop-check:hover .check-circle[b-80n6gyqp46] {
    border-color: var(--success);
    color: color-mix(in srgb, var(--success) 45%, transparent);
}

.shop-check input:focus-visible + .check-circle[b-80n6gyqp46] {
    outline: 2.5px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 2px;
}

.shop-check:active .check-circle[b-80n6gyqp46] { transform: scale(.88); }

.done .check-circle[b-80n6gyqp46] {
    background: var(--fresh-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(31, 166, 122, .28);
}

.done .shop-check:hover .check-circle[b-80n6gyqp46] { color: #fff; }

.shopping-name[b-80n6gyqp46] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shopping-sub[b-80n6gyqp46] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .2rem .65rem;
}

.shopping-sub .qty[b-80n6gyqp46] { font-weight: 700; color: var(--text); }
.shopping-sub .meta[b-80n6gyqp46] { display: inline-flex; align-items: center; gap: .25rem; }
.shopping-sub .meta[b-80n6gyqp46]  .ico { color: var(--text-subtle); }

.remove-btn[b-80n6gyqp46] { border-color: transparent; background: transparent; }
.remove-btn:hover[b-80n6gyqp46] { color: var(--danger); background: var(--danger-soft); }

/* Erledigt: dezent */
.done-card[b-80n6gyqp46] { background: var(--surface-2); box-shadow: none; }
.done .shopping-sub .qty[b-80n6gyqp46] { color: var(--text-subtle); font-weight: 600; }

.skeleton-row[b-80n6gyqp46] { height: 56px; }

@media (max-width: 639px) {
    .add-name[b-80n6gyqp46] { flex-basis: 100%; }
    .add-qty[b-80n6gyqp46], .add-unit[b-80n6gyqp46] { flex: 1; width: auto; }
    .add-btn[b-80n6gyqp46] { flex: 1 1 100%; }
    .head-actions[b-80n6gyqp46] { width: 100%; }
    .head-actions .btn[b-80n6gyqp46] { flex: 1; }
}
/* /Components/Pages/Statistics.razor.rz.scp.css */
/* Statistik: Diagramme, Ranglisten und Mini-Rezeptbilder */

.range-select[b-b4z8eetr8l] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.range-select[b-b4z8eetr8l]  .ico {
    position: absolute;
    left: .9rem;
    color: var(--accent);
    pointer-events: none;
}

.range-select select[b-b4z8eetr8l] {
    width: auto;
    padding-left: 2.4rem;
    border-radius: var(--r-pill);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.card-head h2 .icon-tile[b-b4z8eetr8l] { --size: 32px; }
.card-head h2[b-b4z8eetr8l]  .ico { color: inherit; }

/* Säulendiagramme */
.spend-chart[b-b4z8eetr8l] {
    height: 200px;
    padding: .75rem .25rem 0;
    background:
        repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--border) calc(25% - 1px), var(--border) 25%);
    background-size: 100% calc(100% - 1.4rem);
    background-repeat: no-repeat;
    border-radius: var(--r-sm);
}

.chart-bars .bar-col[b-b4z8eetr8l] { cursor: default; }

.chart-bars .bar-fill[b-b4z8eetr8l] {
    box-shadow: 0 6px 14px rgba(255, 122, 69, .18);
    transition: height .5s var(--ease), filter .15s var(--ease), transform .2s var(--spring);
    transform-origin: bottom;
}

.chart-bars .bar-col:hover .bar-fill[b-b4z8eetr8l] { filter: brightness(1.08); transform: scaleY(1.02); }
.chart-bars .bar-col:hover .bar-label[b-b4z8eetr8l] { color: var(--text); }

.waste-chart[b-b4z8eetr8l] { height: 96px; }

.waste-chart .bar-fill[b-b4z8eetr8l] {
    background: linear-gradient(to top, var(--danger), color-mix(in srgb, var(--danger) 45%, var(--surface)));
    box-shadow: none;
}

/* Ranglisten */
.rank-row[b-b4z8eetr8l] { padding: .5rem 0; }

.rank-main[b-b4z8eetr8l] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.rank-top[b-b4z8eetr8l] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6rem;
    min-width: 0;
}

.rank-row .rank-bar[b-b4z8eetr8l] { flex: none; width: 100%; }
.rank-row.waste .rank-bar > span[b-b4z8eetr8l] { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 60%, var(--surface)), var(--danger)); }

.rank-no[b-b4z8eetr8l] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: .74rem;
    font-weight: 800;
    background: var(--surface-2);
    color: var(--text-muted);
}

.list-row:nth-child(1) .rank-no[b-b4z8eetr8l] { background: var(--sunny-gradient); color: #fff; }
.list-row:nth-child(2) .rank-no[b-b4z8eetr8l] { background: var(--tone-orange-bg); color: var(--tone-orange); }
.list-row:nth-child(3) .rank-no[b-b4z8eetr8l] { background: var(--tone-yellow-bg); color: var(--tone-yellow); }

.list-title.truncate[b-b4z8eetr8l] { display: block; }

/* Mini-Rezeptbild */
.recipe-mini[b-b4z8eetr8l] {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: rgba(255, 255, 255, .95);
    background: var(--surface-2);
    box-shadow: var(--shadow-sm);
}

.recipe-mini img[b-b4z8eetr8l] { width: 100%; height: 100%; object-fit: cover; }

.history-sub[b-b4z8eetr8l] {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .7rem;
}

.history-sub > span[b-b4z8eetr8l] { display: inline-flex; align-items: center; gap: .25rem; }
.history-sub[b-b4z8eetr8l]  .ico { color: var(--text-subtle); }

@media (max-width: 639px) {
    .range-select[b-b4z8eetr8l], .range-select select[b-b4z8eetr8l] { width: 100%; }
    .spend-chart[b-b4z8eetr8l] { height: 170px; }
    .chart-bars[b-b4z8eetr8l] { gap: .25rem; }
    .list-row .chip[b-b4z8eetr8l] { display: none; }
}
/* /Components/Pages/Swipe.razor.rz.scp.css */
/* Swipe - Kopfbereich, Setup, Kartenstapel und Match-Screen.
   Die Grundformen (.swipe-card, .swipe-stamp, .match-screen ...) kommen aus app.css. */

/* --- Kopf ---------------------------------------------------------------- */

.head-text[b-jw1o7o0th3] { min-width: 0; }

.head-meta[b-jw1o7o0th3] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
}

.head-meta > span[b-jw1o7o0th3] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 600;
}

.head-meta[b-jw1o7o0th3]  .ico { color: var(--accent); }

.group-picker[b-jw1o7o0th3] {
    position: relative;
    display: flex;
    align-items: center;
}

.group-picker[b-jw1o7o0th3]  .ico {
    position: absolute;
    left: .9rem;
    color: var(--accent);
    pointer-events: none;
}

.group-picker .select[b-jw1o7o0th3] {
    width: auto;
    max-width: 240px;
    padding-left: 2.4rem;
    border-radius: var(--r-pill);
    font-weight: 700;
}

/* --- Setup --------------------------------------------------------------- */

.setup-layout[b-jw1o7o0th3] {
    display: grid;
    gap: 1.25rem;
    align-items: start;
}

.setup-hero[b-jw1o7o0th3] {
    text-align: center;
    padding: 1.4rem 1rem 1.2rem;
    border-radius: var(--r-xl);
    background:
        radial-gradient(420px 220px at 50% 0%, color-mix(in srgb, var(--accent-2) 22%, transparent), transparent 70%),
        var(--accent-soft);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
}

.setup-hero h3[b-jw1o7o0th3] {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 1.1rem 0 .35rem;
}

.setup-hero p[b-jw1o7o0th3] { max-width: 36ch; margin-inline: auto; }

.setup-deck[b-jw1o7o0th3] {
    position: relative;
    width: 150px;
    height: 170px;
    margin: .4rem auto 0;
}

.deck-card[b-jw1o7o0th3] {
    position: absolute;
    inset: 0;
    border-radius: 26px;
    box-shadow: var(--shadow);
    border: 3px solid var(--surface);
}

.deck-card-3[b-jw1o7o0th3] { background: var(--fresh-gradient); transform: rotate(-12deg) translateX(-22px); opacity: .85; }
.deck-card-2[b-jw1o7o0th3] { background: var(--sunny-gradient); transform: rotate(9deg) translateX(20px); opacity: .92; }

.deck-card-1[b-jw1o7o0th3] {
    background: var(--accent-gradient);
    display: grid;
    place-items: center;
    color: #fff;
    animation: deck-wiggle-b-jw1o7o0th3 3.2s var(--ease) infinite;
}

.deck-icon[b-jw1o7o0th3] {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .2);
}

.deck-heart[b-jw1o7o0th3] {
    position: absolute;
    right: -14px;
    bottom: -10px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--shadow);
    animation: heart-beat-b-jw1o7o0th3 1.6s var(--ease) infinite;
}

.deck-heart[b-jw1o7o0th3]  .ico { fill: currentColor; }

@keyframes deck-wiggle-b-jw1o7o0th3 {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(3deg) translateY(-4px); }
}

@keyframes heart-beat-b-jw1o7o0th3 {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.15); }
    30% { transform: scale(1); }
    45% { transform: scale(1.1); }
}

.setup-card .card-head h2[b-jw1o7o0th3]  .ico { color: var(--accent); }

.field label[b-jw1o7o0th3] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.field label[b-jw1o7o0th3]  .ico { color: var(--text-subtle); }

.mode-switch[b-jw1o7o0th3] {
    display: flex;
    width: 100%;
}

.mode-switch button[b-jw1o7o0th3] {
    flex: 1;
    justify-content: center;
    padding: .6rem .8rem;
}

.diet-row[b-jw1o7o0th3] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.diet-toggle[b-jw1o7o0th3] {
    position: relative;
    flex: 1 1 160px;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .9rem .55rem .55rem;
    border-radius: var(--r);
    border: 1.5px solid var(--border);
    background: var(--surface);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    transition: border-color .15s var(--ease), background .15s var(--ease);
}

.diet-toggle:hover[b-jw1o7o0th3] { border-color: var(--border-strong); }

.diet-toggle input[b-jw1o7o0th3] {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    accent-color: var(--tone-green);
}

.diet-toggle.on[b-jw1o7o0th3] {
    border-color: var(--tone-green);
    background: var(--tone-green-bg);
}

.diet-toggle:focus-within[b-jw1o7o0th3] {
    outline: 2.5px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 2px;
}

.setup-hint[b-jw1o7o0th3] {
    display: flex;
    gap: .4rem;
    align-items: flex-start;
}

.setup-hint[b-jw1o7o0th3]  .ico { margin-top: .1rem; }

[b-jw1o7o0th3] .spin { animation: spin-b-jw1o7o0th3 1s linear infinite; }

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

/* --- Kartenstapel -------------------------------------------------------- */

.swipe-layout[b-jw1o7o0th3] {
    display: grid;
    gap: 1.5rem;
    align-items: start;
}

.swipe-main[b-jw1o7o0th3] { min-width: 0; }

.swipe-status[b-jw1o7o0th3] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: .85rem 1rem;
    box-shadow: var(--shadow-sm);
    margin: 0 auto 1.25rem;
    max-width: 520px;
}

.status-line[b-jw1o7o0th3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .85rem;
    margin-bottom: .4rem;
}

.status-label[b-jw1o7o0th3] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--text-muted);
    font-weight: 700;
}

.status-label[b-jw1o7o0th3]  .ico { color: var(--accent); }

.status-members[b-jw1o7o0th3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.member-chip[b-jw1o7o0th3] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .18rem .6rem .18rem .18rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: .76rem;
    font-weight: 800;
    color: var(--text-muted);
}

.member-avatar[b-jw1o7o0th3] {
    width: 28px;
    height: 28px;
    font-size: .68rem;
    border: 0;
}

.member-count[b-jw1o7o0th3] {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

.member-count[b-jw1o7o0th3]  .ico { color: var(--success); }

.finish-btn[b-jw1o7o0th3] { margin-left: auto; }

/* Karte */

.visual-fallback[b-jw1o7o0th3] {
    position: relative;
    z-index: 1;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 30%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.visual-badges[b-jw1o7o0th3] {
    position: absolute;
    top: .9rem;
    left: .9rem;
    right: .9rem;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem;
    pointer-events: none;
}

.badge-cookable[b-jw1o7o0th3],
.badge-match[b-jw1o7o0th3] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border-radius: var(--r-pill);
    padding: .3rem .7rem;
    font-size: .74rem;
    font-weight: 800;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.badge-cookable[b-jw1o7o0th3] { background: var(--fresh-gradient); color: #fff; }

.badge-match[b-jw1o7o0th3] {
    margin-left: auto;
    background: rgba(255, 255, 255, .94);
    color: #2a1d16;
}

.overlay-chips[b-jw1o7o0th3] {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.overlay-chips .chip[b-jw1o7o0th3] {
    font-size: .78rem;
    padding: .3rem .7rem;
}

.detail-line[b-jw1o7o0th3] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    line-height: 1.45;
}

.detail-line[b-jw1o7o0th3]  .ico { margin-top: .1rem; }

.detail-line .strong[b-jw1o7o0th3] { color: var(--text); }

/* Aktionsbuttons */

.swipe-btn[b-jw1o7o0th3] { color: inherit; text-decoration: none; }
.swipe-btn.nope[b-jw1o7o0th3] { color: var(--danger); }
.swipe-btn.info[b-jw1o7o0th3] { color: var(--info); }
.swipe-btn.like[b-jw1o7o0th3] { color: #fff; }
.swipe-btn:hover[b-jw1o7o0th3] { text-decoration: none; }
.swipe-btn.like[b-jw1o7o0th3]  .heart-fill { fill: currentColor; }

.swipe-hint[b-jw1o7o0th3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: .9rem 0 0;
}

/* Matches */

.matches-card .card-head h2[b-jw1o7o0th3]  .ico { color: var(--accent); fill: var(--accent-soft); }

.matches-empty[b-jw1o7o0th3] {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .2rem 0 .1rem;
}

.match-row[b-jw1o7o0th3] {
    padding-inline: .35rem;
    margin-inline: -.35rem;
}

.match-thumb[b-jw1o7o0th3] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow-sm);
}

.match-thumb-fallback[b-jw1o7o0th3] {
    display: grid;
    place-items: center;
    color: #fff;
}

/* --- Match-Screen -------------------------------------------------------- */

.match-content[b-jw1o7o0th3] {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
    margin: auto;
    padding: 1rem 0;
}

.match-badge[b-jw1o7o0th3] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .9rem;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .35);
    font-weight: 800;
    font-size: .85rem;
    margin-bottom: .8rem;
    animation: pop .5s var(--spring);
}

.match-content h1[b-jw1o7o0th3] {
    margin-bottom: 1.4rem;
    line-height: 1.02;
}

.match-photo-wrap[b-jw1o7o0th3] {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.match-photo-fallback[b-jw1o7o0th3] {
    display: grid;
    place-items: center;
    color: #fff;
}

.match-heart[b-jw1o7o0th3] {
    position: absolute;
    right: 4%;
    bottom: 4%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: #ff5a5f;
    box-shadow: 0 10px 24px rgba(80, 20, 0, .3);
    animation: pop .6s .15s var(--spring) both, heart-beat-b-jw1o7o0th3 1.6s .8s var(--ease) infinite;
}

.match-heart[b-jw1o7o0th3]  .ico { fill: currentColor; }

.match-name[b-jw1o7o0th3] {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 1.2rem 0 .3rem;
}

.match-text[b-jw1o7o0th3] { opacity: .92; }

.match-actions[b-jw1o7o0th3] { margin-top: 1.4rem; }

.match-actions .btn[b-jw1o7o0th3] { white-space: normal; text-align: center; }

/* Konfetti */

.match-confetti[b-jw1o7o0th3] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.match-confetti span[b-jw1o7o0th3] {
    position: absolute;
    top: -20px;
    left: calc(var(--i) * 7.2% + 1%);
    width: 10px;
    height: 16px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .85);
    opacity: 0;
    animation: confetti-b-jw1o7o0th3 3.6s calc(var(--i) * .17s) linear infinite;
}

.match-confetti span:nth-child(3n)[b-jw1o7o0th3] { background: #ffd166; width: 8px; height: 8px; border-radius: 50%; }
.match-confetti span:nth-child(3n + 1)[b-jw1o7o0th3] { background: #8ef0c0; }

@keyframes confetti-b-jw1o7o0th3 {
    0% { transform: translateY(0) rotate(0); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(110vh) rotate(540deg); opacity: .2; }
}

@media (prefers-reduced-motion: reduce) {
    .match-confetti[b-jw1o7o0th3],
    .deck-card-1[b-jw1o7o0th3],
    .deck-heart[b-jw1o7o0th3],
    .match-heart[b-jw1o7o0th3] { animation: none; }
    .match-confetti[b-jw1o7o0th3] { display: none; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 420px) {
    .mode-switch[b-jw1o7o0th3] { flex-direction: column; border-radius: var(--r); }
    .mode-switch button[b-jw1o7o0th3] { border-radius: var(--r-sm); }
    .swipe-overlay h2[b-jw1o7o0th3] { font-size: 1.4rem; }
    .finish-btn[b-jw1o7o0th3] { margin-left: 0; }
}

@media (min-width: 900px) {
    .setup-layout[b-jw1o7o0th3] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .setup-hero[b-jw1o7o0th3] { padding: 2.2rem 1.5rem 1.8rem; position: sticky; top: calc(var(--topbar-height) + 1rem); }
}

@media (min-width: 1080px) {
    .swipe-layout[b-jw1o7o0th3] { grid-template-columns: minmax(0, 1fr) 340px; }
    .swipe-side[b-jw1o7o0th3] { position: sticky; top: calc(var(--topbar-height) + 1rem); }
}

/* Handy: Kopf und Status kompakt, damit Karte und Buttons ohne Scrollen sichtbar sind. */
@media (max-width: 639px) {
    .swipe-page[b-jw1o7o0th3] { padding-top: .75rem; }
    .swipe-page .page-head[b-jw1o7o0th3] { margin-bottom: .7rem; gap: .5rem; }
    .swipe-page .page-head .eyebrow[b-jw1o7o0th3] { display: none; }
    .swipe-page .page-head h1[b-jw1o7o0th3] { font-size: 1.35rem; }
    .swipe-page .page-head .subtitle[b-jw1o7o0th3] { font-size: .78rem; margin-top: .15rem; }

    .swipe-status[b-jw1o7o0th3] { padding: .6rem .75rem; gap: .5rem; margin-bottom: .85rem; border-radius: var(--r); }
    .status-line[b-jw1o7o0th3] { margin-bottom: .3rem; font-size: .78rem; }
    .member-avatar[b-jw1o7o0th3] { width: 24px; height: 24px; font-size: .6rem; }
    .member-chip[b-jw1o7o0th3] { font-size: .7rem; }

    .status-members[b-jw1o7o0th3] { flex-wrap: nowrap; }
    .finish-btn[b-jw1o7o0th3] { margin-left: auto; font-size: 0; gap: 0; padding: .35rem; }
    .swipe-details[b-jw1o7o0th3] { min-height: 0; padding: .6rem .9rem; }

    /* Höhe = Bildschirm minus Topbar, Kopf, Status, Buttons und Bottom-Navigation */
    .swipe-stage[b-jw1o7o0th3] { max-height: max(300px, calc(100dvh - 440px)); }
    .swipe-actions[b-jw1o7o0th3] { margin-top: .8rem; }
}
/* /Components/Shared/InstallAppCard.razor.rz.scp.css */
.install-card[b-1zu7o551gc] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
}

.install-card.is-banner[b-1zu7o551gc] {
    align-items: center;
    padding: .9rem 3rem .9rem .9rem;
    margin-bottom: 1.2rem;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--accent-soft), var(--tone-yellow-bg));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
}

.install-icon img[b-1zu7o551gc] {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    box-shadow: var(--shadow-accent);
    flex-shrink: 0;
}

.install-body[b-1zu7o551gc] { flex: 1; min-width: 0; }
.install-body h3[b-1zu7o551gc] { font-size: 1.05rem; margin-bottom: .25rem; }
.install-body p[b-1zu7o551gc] { margin-bottom: .6rem; }

.install-steps[b-1zu7o551gc] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: .88rem;
}

.install-steps li[b-1zu7o551gc] { display: flex; align-items: center; gap: .55rem; }

.step-ico[b-1zu7o551gc] {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--surface);
    color: var(--info);
    box-shadow: var(--shadow-sm);
    flex-shrink: 0;
}

.install-close[b-1zu7o551gc] {
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 32px;
    height: 32px;
    background: transparent;
    border-color: transparent;
}

@media (max-width: 479px) {
    .install-icon img[b-1zu7o551gc] { width: 44px; height: 44px; border-radius: 13px; }
    .install-card[b-1zu7o551gc] { gap: .75rem; }
}