@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Controls/AiChatWidget.razor.rz.scp.css */
/* ── Widget container ─────────────────────────────────────────── */

.chat-widget[b-otmf18nv24] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem; /* body-container's scrollbar now sits at the true window edge, same as a native scrollbar would */
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    pointer-events: none;
}

.chat-widget > *[b-otmf18nv24] {
    pointer-events: auto;
}

/* ── Floating action button ───────────────────────────────────── */

.chat-fab[b-otmf18nv24] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 16px rgba(255, 0, 255, 0.2);
    transition: transform 0.15s, box-shadow 0.15s;
}

.chat-fab:hover[b-otmf18nv24] {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 0, 255, 0.35);
}

.chat-fab:active[b-otmf18nv24] {
    transform: scale(0.94);
}

/* ── Floating panel ───────────────────────────────────────────── */

.chat-widget-panel[b-otmf18nv24] {
    width: 380px;
    height: 520px;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
}

/* ── Responsive: fridge / small screens ──────────────────────── */

@media (max-width: 575.98px) {
    .chat-widget[b-otmf18nv24] {
        bottom: 1rem;
        right: 1rem;
    }

    .chat-widget-panel[b-otmf18nv24] {
        width: calc(100vw - 2rem);
        height: 70vh;
    }
}
/* /Components/Controls/ConsentBanner.razor.rz.scp.css */
/* Analytics consent banner (AB#776).

   Bottom-anchored and self-sizing so it never covers the primary actions of the page behind it: the
   app's own controls sit in the scrolling content area above, and on the fridge (720x1080 portrait)
   the banner takes a strip at the bottom that one tap clears. Fridge-safe CSS only — Samsung Internet
   10 / Chromium M94, so no :has(), @container, nesting, @layer or subgrid. */

.consent-banner[b-v1n6jkgbj9] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080; /* above Bootstrap modals' backdrop tier so it is never buried */
    padding: 0.75rem;
    background: rgba(26, 31, 46, 0.98);
    border-top: 1px solid var(--color-cyan, #00D4FF);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.45);
}

.consent-banner[hidden][b-v1n6jkgbj9] {
    display: none;
}

.consent-banner-inner[b-v1n6jkgbj9] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.consent-banner-text[b-v1n6jkgbj9] {
    margin: 0;
    color: var(--color-text-secondary, #A0AABB);
    font-size: 0.875rem;
    line-height: 1.45;
}

.consent-banner-text a[b-v1n6jkgbj9] {
    color: var(--color-cyan, #00D4FF);
}

/* Two equal columns rather than content-sized flex items, so the buttons are identical widths however
   long the copy in each language turns out to be. "Reject must be as easy as accept" then holds by
   construction instead of by whichever label happens to be shorter. */
.consent-banner-actions[b-v1n6jkgbj9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

/* Both answers share every dimension. Only the colour differs, and the reject button is deliberately
   not the muted/ghost one — "reject must be as easy as accept" is a layout property, not a wording
   one. 48px minimum height is the fridge touch-target floor. */
.consent-btn[b-v1n6jkgbj9] {
    min-height: 48px;
    min-width: 8rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.consent-btn-accept[b-v1n6jkgbj9] {
    background: var(--color-cyan, #00D4FF);
    border: 1px solid var(--color-cyan, #00D4FF);
    color: #0A0E1A;
}

.consent-btn-reject[b-v1n6jkgbj9] {
    background: transparent;
    border: 1px solid var(--color-text-secondary, #A0AABB);
    color: #FFFFFF;
}

.consent-btn:focus-visible[b-v1n6jkgbj9] {
    outline: 2px solid var(--color-cyan, #00D4FF);
    outline-offset: 2px;
}

/* Side by side once there is room; stacked full-width below that so each stays a comfortable target. */
@media (min-width: 576px) {
    .consent-banner-inner[b-v1n6jkgbj9] {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .consent-banner-actions[b-v1n6jkgbj9] {
        flex: 0 0 auto;
    }
}
/* /Components/Controls/Loader.razor.rz.scp.css */
/* /Components/Controls/NavGroup.razor.rz.scp.css */
/* Group-header + submenu styling for NavGroup (AB#1179). The group header markup lives in this
   component, so the scoped rules in NavMenu.razor.css don't reach it — these mirror the matching
   .nav-item / .nav-link / .nav-menu-icon / .nav-submenu rules there so a group renders identically
   to the flat nav items around it. Child links inside the submenu keep NavMenu's scope and styling. */

.nav-item[b-ss8ia6f2p0] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

.nav-item .nav-link[b-ss8ia6f2p0] {
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: 4px;
    height: 3rem;
    display: flex;
    align-items: center;
    line-height: 3rem;
    width: 100%;
    white-space: nowrap;
}

.nav-item .nav-link:hover[b-ss8ia6f2p0] {
    background-color: rgba(0, 212, 255, 0.06);
    color: var(--color-text-primary);
}

.nav-menu-icon[b-ss8ia6f2p0] {
    color: white;
    font-size: 1.5rem;
    margin-right: 10px;
}

.nav-submenu[b-ss8ia6f2p0] {
    border-left: 2px solid var(--color-border);
    margin-left: 1.75rem;
    overflow: hidden;
    animation: submenu-open-b-ss8ia6f2p0 0.2s ease-out;
}

@keyframes submenu-open-b-ss8ia6f2p0 {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/Controls/NotificationInboxPanel.razor.rz.scp.css */
.notification-backdrop[b-zocqo4grts] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1059;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
}

.notification-backdrop.open[b-zocqo4grts] {
    opacity: 1;
    pointer-events: auto;
}

.notification-panel[b-zocqo4grts] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 100%);
    background: #fff;
    z-index: 1060;
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    overflow: hidden;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
}

.notification-panel.open[b-zocqo4grts] {
    transform: translateX(0);
}

.notification-panel-header[b-zocqo4grts] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    background: #fff;
    gap: 0.5rem;
}

.notification-panel-title[b-zocqo4grts] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
}

.notification-panel-body[b-zocqo4grts] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.notification-empty[b-zocqo4grts] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: #888;
    font-size: 0.9rem;
}

.notification-item[b-zocqo4grts] {
    display: flex;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    cursor: pointer;
    gap: 0.5rem;
    min-height: 48px;
    border-left: 3px solid transparent;
}

.notification-item:hover[b-zocqo4grts] {
    background: rgba(0, 0, 0, 0.03);
}

.notification-item.unread[b-zocqo4grts] {
    background: rgba(13, 110, 253, 0.05);
    border-left-color: #0d6efd;
}

.notification-item.unread .notification-item-title[b-zocqo4grts] {
    font-weight: 600;
}

.notification-item-content[b-zocqo4grts] {
    flex: 1;
    min-width: 0;
}

.notification-item-title[b-zocqo4grts] {
    font-size: 0.875rem;
    line-height: 1.3;
    margin-bottom: 0.2rem;
    word-break: break-word;
}

.notification-item-message[b-zocqo4grts] {
    font-size: 0.8rem;
    color: #555;
    line-height: 1.3;
    margin-bottom: 0.25rem;
    word-break: break-word;
}

.notification-item-time[b-zocqo4grts] {
    font-size: 0.75rem;
    color: #999;
}

.notification-delete-btn[b-zocqo4grts] {
    flex-shrink: 0;
    color: #aaa;
    min-width: 36px;
    min-height: 36px;
    align-self: center;
}

.notification-delete-btn:hover[b-zocqo4grts] {
    color: #dc3545;
}
/* /Components/Controls/RecipeCarousel.razor.rz.scp.css */
/* ── Outer container ───────────────────────────────────────────── */

.carousel-container[b-qacm6e40e1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    margin-top: 100px;
}

/* ── 3D wheel scene ────────────────────────────────────────────── */

.carousel-scene[b-qacm6e40e1] {
    /* perspective set dynamically by JS based on radius */
    perspective-origin: 50% 40%;
    width: 100%;
    height: 460px;
    position: relative;
    /* z-index:0 creates a stacking context that boxes in the 3D rendering
       so side cards can bleed freely without painting over the controls below */
    z-index: 0;
}

/* Centering wrapper — keeps the wheel in the middle of the scene.
   top matches perspective-origin Y (40%) so the perspective projection
   has no vertical shift and the center card stays within the scene height.
   JS only ever touches .carousel-wheel's transform, not this. */
.carousel-wheel-wrap[b-qacm6e40e1] {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    transform-style: preserve-3d;
}

/* The cylinder that rotates — JS manages the rotateY transform */
.carousel-wheel[b-qacm6e40e1] {
    width: 320px;
    height: 380px;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Individual cards ──────────────────────────────────────────── */

.carousel-card[b-qacm6e40e1] {
    position: absolute;
    width: 320px;
    height: 380px;
    transform-style: preserve-3d;
    /* JS sets: transform: rotateY(Xdeg) translateZ(Rpx) */
}

.carousel-card-face[b-qacm6e40e1] {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    overflow: hidden;
    background-color: var(--color-bg-elevated, #2A3050);
    background-image: var(--card-bg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    backface-visibility: hidden;
}

.carousel-card-face--no-photo[b-qacm6e40e1] {
    background-image: linear-gradient(160deg, #3a3a3a 0%, #2F6B3E 100%);
}

.carousel-card-back[b-qacm6e40e1] {
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    background: var(--color-bg-elevated, #2A3050);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    backface-visibility: hidden;
    transform: rotateY(180deg);
    pointer-events: none; /* decorative — must not intercept taps */
}

/* In Chromium M94 (fridge), transform-style: preserve-3d containers claim a
   flat 2D hit area that swallows taps before they reach descendants.
   Disable pointer events on all 3D containers and re-enable only on the
   actual interactive elements inside the active card. */
.carousel-wheel-wrap[b-qacm6e40e1],
.carousel-wheel[b-qacm6e40e1],
.carousel-card[b-qacm6e40e1],
.carousel-card-face[b-qacm6e40e1] {
    pointer-events: none;
}

.recipe-card-actions a[b-qacm6e40e1],
.recipe-card-actions button[b-qacm6e40e1],
.day-btn[b-qacm6e40e1] {
    pointer-events: auto;
}

/* ── Overlay gradient ──────────────────────────────────────────── */

.recipe-card-overlay[b-qacm6e40e1] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 55%, transparent 100%);
    border-radius: inherit;
    transition: opacity 0.4s;
    pointer-events: none; /* decorative gradient — must not intercept taps */
}

/* Darken non-active cards so the active one pops */
.carousel-card:not(.active) .recipe-card-overlay[b-qacm6e40e1] {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* While a shuffle spin is in flight (class toggled by carousel.js), hide the
   recipe info and drop the active card to the same dark overlay the other cards
   use, so every card looks uniform and nothing but the info rides the spin. The
   info pops back on the landed card when the spin ends and the class is removed. */
.carousel-spinning .recipe-card-content[b-qacm6e40e1] {
    display: none;
}

.carousel-spinning .carousel-card.active .recipe-card-overlay[b-qacm6e40e1] {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 100%);
}

/* ── Card content ──────────────────────────────────────────────── */

.recipe-card-content[b-qacm6e40e1] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recipe-card-body[b-qacm6e40e1] {
    color: #fff;
}

.recipe-card-title[b-qacm6e40e1] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* ── Active-only content ───────────────────────────────────────── */

.recipe-card-meta[b-qacm6e40e1] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    display: none;
    gap: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.recipe-card-nutrition[b-qacm6e40e1] {
    display: none;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0;
}

.nutrition-item[b-qacm6e40e1] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.3rem;
    padding: 0.15rem 0.4rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.recipe-card-actions[b-qacm6e40e1] {
    display: none;
    gap: 0.4rem;
}

.carousel-card.active .recipe-card-meta[b-qacm6e40e1] {
    display: flex;
}

.carousel-card.active .recipe-card-actions[b-qacm6e40e1] {
    display: flex;
}

.carousel-card.active .recipe-card-nutrition[b-qacm6e40e1] {
    display: flex;
}

/* ── Action buttons ────────────────────────────────────────────── */

.recipe-btn-view[b-qacm6e40e1] {
    flex: 1;
    font-weight: 600;
    font-size: 0.8rem;
}

.recipe-btn-plan[b-qacm6e40e1] {
    font-weight: 600;
    font-size: 0.8rem;
    transition: background-color 0.15s;
}

.recipe-btn-plan.active[b-qacm6e40e1] {
    background-color: var(--atebit-accent, #E2B43A);
    border-color: var(--atebit-accent, #E2B43A);
}

/* ── Day picker ────────────────────────────────────────────────── */

.day-picker[b-qacm6e40e1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: center;
    justify-content: center;
}

.day-btn[b-qacm6e40e1] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.4rem;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    text-align: center;
    letter-spacing: 0.02em;
}

.day-btn:hover:not(:disabled)[b-qacm6e40e1] {
    background: var(--atebit-accent, #E2B43A);
    border-color: var(--atebit-accent, #E2B43A);
    color: #1F3326;
}

.day-btn:disabled[b-qacm6e40e1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.day-picker-label[b-qacm6e40e1] {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 0.1rem;
}

.day-btn--back[b-qacm6e40e1] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    margin-left: auto;
}

/* ── Nav controls ──────────────────────────────────────────────── */

.carousel-controls[b-qacm6e40e1] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.75rem;
}

.carousel-nav-btn[b-qacm6e40e1] {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 2px solid var(--atebit-primary, #2F6B3E);
    background: var(--atebit-bg, #F7F4EC);
    color: var(--atebit-primary, #2F6B3E);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.carousel-nav-btn:hover[b-qacm6e40e1] {
    background: var(--atebit-primary, #2F6B3E);
    color: #fff;
}

/* ── Empty state ───────────────────────────────────────────────── */

.empty-state[b-qacm6e40e1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 2rem;
    color: var(--atebit-muted, #6c757d);
    text-align: center;
}

.empty-icon[b-qacm6e40e1] {
    font-size: 3rem;
    opacity: 0.4;
}
/* /Components/Controls/RecipeGrid.razor.rz.scp.css */
.recipe-grid[b-inc7i7uvlu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}

.rg-card[b-inc7i7uvlu] {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-image: var(--card-bg);
    background-size: cover;
    background-position: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s, box-shadow 0.15s;
}

.rg-card:hover[b-inc7i7uvlu] {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.rg-card--no-photo[b-inc7i7uvlu] {
    background-image: linear-gradient(160deg, #3a3a3a 0%, #2F6B3E 100%);
}

.rg-card-overlay[b-inc7i7uvlu] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.18) 55%, transparent 100%);
    border-radius: inherit;
}

.rg-card--no-photo .rg-card-overlay[b-inc7i7uvlu] {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, transparent 60%);
}

.rg-card-content[b-inc7i7uvlu] {
    position: relative;
    z-index: 1;
    padding: 0.9rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rg-card-body[b-inc7i7uvlu] { color: #fff; }

.rg-card-title[b-inc7i7uvlu] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    line-height: 1.25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.rg-card-meta[b-inc7i7uvlu] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    display: flex;
    gap: 0.75rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.rg-card-actions[b-inc7i7uvlu] {
    display: flex;
    gap: 0.4rem;
}

.rg-btn-view[b-inc7i7uvlu] {
    flex: 1;
    font-weight: 600;
    font-size: 0.8rem;
}

.rg-btn-plan[b-inc7i7uvlu] {
    font-weight: 600;
    font-size: 0.8rem;
    transition: background-color 0.15s;
}

.rg-btn-plan.active[b-inc7i7uvlu] {
    background-color: var(--atebit-accent, #E2B43A);
    border-color: var(--atebit-accent, #E2B43A);
}

/* ── Day picker ────────────────────────────────────────────────── */

.rg-day-picker[b-inc7i7uvlu] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: center;
    justify-content: center;
}

.rg-day-btn[b-inc7i7uvlu] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.4rem;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.3rem 0.4rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    text-align: center;
    letter-spacing: 0.02em;
}

.rg-day-btn:hover:not(:disabled)[b-inc7i7uvlu] {
    background: var(--atebit-accent, #E2B43A);
    border-color: var(--atebit-accent, #E2B43A);
    color: #1F3326;
}

.rg-day-btn:disabled[b-inc7i7uvlu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rg-day-picker-label[b-inc7i7uvlu] {
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-right: 0.1rem;
}

.rg-day-btn--back[b-inc7i7uvlu] {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.2);
    margin-left: auto;
}

/* ── Empty state ───────────────────────────────────────────────── */

.rg-empty-state[b-inc7i7uvlu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 2rem;
    color: var(--atebit-muted, #6c757d);
    text-align: center;
}

.rg-empty-icon[b-inc7i7uvlu] {
    font-size: 3rem;
    opacity: 0.4;
}
/* /Components/Controls/WaitlistSignupForm.razor.rz.scp.css */
/* Waitlist signup form (AB#809) — form styling on top of the shared .landing look in app.css,
   mirroring the Contact page's form. Fridge-safe (Chromium M94): no :has(), @container, @layer,
   subgrid, or CSS nesting. The .landing custom properties (--l-*) inherit down from PublicShell. */

.waitlist-form[b-ge0hkm6jet] {
    text-align: left;
    max-width: 480px;
    margin: 1.5rem auto 0;
}

.waitlist-field[b-ge0hkm6jet] {
    margin-bottom: 1.25rem;
}

.waitlist-field label[b-ge0hkm6jet] {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--l-text-strong);
}

.waitlist-field .optional[b-ge0hkm6jet] {
    font-weight: 400;
    color: var(--l-muted);
    font-size: 0.85rem;
}

.waitlist-field input[b-ge0hkm6jet] {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--l-text-strong);
    background: var(--l-card-2);
    border: 1px solid var(--l-border-strong);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.waitlist-field input[b-ge0hkm6jet]::placeholder {
    color: var(--l-muted);
}

.waitlist-field input:focus[b-ge0hkm6jet] {
    outline: none;
    border-color: var(--l-cyan);
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.25);
}

.waitlist-field input:disabled[b-ge0hkm6jet] {
    opacity: 0.6;
}

.waitlist-turnstile[b-ge0hkm6jet] {
    margin-bottom: 1.25rem;
}

.waitlist-actions[b-ge0hkm6jet] {
    margin-top: 1.6rem;
}

.waitlist-actions .btn[b-ge0hkm6jet] {
    min-width: 200px;
}

/* p.waitlist-consent, not just the class: it must reach the specificity of app.css's
   `.landing .panel p` (which zeroes top margins inside panels) so the breathing room
   below the button actually applies. Equal specificity + later stylesheet = this wins. */
p.waitlist-consent[b-ge0hkm6jet] {
    margin-top: 1.75rem;
    font-size: 0.85rem;
    color: var(--l-muted);
    text-align: center;
}

/* Honeypot: moved off-screen rather than display:none so naive bots still fill it in. */
.hp-field[b-ge0hkm6jet] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.waitlist-success[b-ge0hkm6jet] {
    margin: 1.5rem auto 0;
    max-width: 480px;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--l-cyan);
    border-radius: 10px;
    background: rgba(0, 212, 255, 0.08);
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.18);
}

.waitlist-success p[b-ge0hkm6jet] {
    margin-bottom: 0.4rem;
}

.waitlist-success p:last-child[b-ge0hkm6jet] {
    margin-bottom: 0;
}

.waitlist-error[b-ge0hkm6jet] {
    margin-bottom: 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid #E85D5D;
    border-radius: 10px;
    background: rgba(232, 93, 93, 0.10);
    color: #F0A8A8;
    font-size: 0.95rem;
}

@media (max-width: 576px) {
    .waitlist-actions .btn[b-ge0hkm6jet] {
        width: 100%;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-3tihf129go] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-3tihf129go] {
    flex: 1;
}

.top-row[b-3tihf129go] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-3tihf129go]  a, .top-row[b-3tihf129go]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-3tihf129go]  a:hover, .top-row[b-3tihf129go]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-3tihf129go]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .top-row[b-3tihf129go] {
        justify-content: space-between;
    }

    .top-row[b-3tihf129go]  a, .top-row[b-3tihf129go]  .btn-link {
        margin-left: 0;
    }

#blazor-error-ui[b-3tihf129go] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-3tihf129go] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }


/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-7n83us0okr] {
    display: none; /* Hides the actual checkbox */
}

.navbar-toggler-label[b-7n83us0okr] {
    cursor: pointer;
    width: 3rem;
    height: 2.5rem;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.navbar-toggler:checked + .navbar-toggler-label[b-7n83us0okr] {
    background-color: rgba(255, 255, 255, 0.5);
}


.top-row[b-7n83us0okr] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
}

.nav-menu-icon[b-7n83us0okr] {
    color: white;
    font-size: 1.5rem;
    margin-right: 10px;
}

.nav-item[b-7n83us0okr] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-7n83us0okr] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-7n83us0okr] {
        padding-bottom: 1rem;
    }

    .nav-item[b-7n83us0okr]  .nav-link {
        color: var(--color-text-secondary);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
        white-space: nowrap;
    }

.nav-item[b-7n83us0okr]  a.active {
    background-color: var(--color-bg-elevated);
    color: var(--color-cyan);
    border-left: 3px solid var(--color-cyan);
    border-radius: 0;
}

.nav-item[b-7n83us0okr]  .nav-link:hover {
    background-color: rgba(0, 212, 255, 0.06);
    color: var(--color-text-primary);
}

.nav-greeting[b-7n83us0okr] {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    padding: 0 0.5rem;
}

.nav-right[b-7n83us0okr] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.nav-feedback-btn[b-7n83us0okr] {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.25rem;
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.nav-feedback-btn:hover[b-7n83us0okr] {
    color: var(--color-cyan);
}

.nav-bell-btn[b-7n83us0okr] {
    position: relative;
}

.bell-icon-wrap[b-7n83us0okr] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.notification-badge[b-7n83us0okr] {
    position: absolute;
    top: -7px;
    right: -9px;
    background: var(--color-danger);
    color: white;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
    line-height: 1;
    pointer-events: none;
}

/* Unread announcements (AB#429). Nothing to count here, unlike the bell, so the same badge is drawn as
   a plain dot: "there is something new" is the whole message. */
.notification-badge-dot[b-7n83us0okr] {
    min-width: 10px;
    width: 10px;
    height: 10px;
    padding: 0;
    top: -4px;
    right: -6px;
}

.nav-scrollable[b-7n83us0okr] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-7n83us0okr] {
    display: block;
    position: fixed;
    /* Anchored to the bottom of the nav bar. The impersonation banner (AB#1078) sits above the nav and
       raises this offset by its own height so the fold-out menu still meets the nav bar. */
    top: var(--nav-overlay-top, 3.5rem);
    left: 0;
    /* Auto-size to the widest label so items never wrap (AB#1179). 260px is the floor (previous fixed
       width); capped to the viewport so a long label can't push it off-screen on the fridge. */
    width: max-content;
    min-width: 260px;
    max-width: calc(100vw - 3rem);
    z-index: 999;
    background-color: var(--atebit-sidebar-bg);
    max-height: calc(100vh - var(--nav-overlay-top, 3.5rem));
    overflow-y: auto;
    box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 8px 0;
}

.nav-backdrop[b-7n83us0okr] {
    display: none;
    position: fixed;
    top: var(--nav-overlay-top, 3.5rem);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    cursor: default;
}

.navbar-toggler:checked ~ .nav-backdrop[b-7n83us0okr] {
    display: block;
}

.nav-submenu[b-7n83us0okr] {
    border-left: 2px solid var(--color-border);
    margin-left: 1.75rem;
    overflow: hidden;
    animation: submenu-open-b-7n83us0okr 0.2s ease-out;
}

@keyframes submenu-open-b-7n83us0okr {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-submenu .nav-item:first-of-type[b-7n83us0okr] {
    padding-top: 0;
}

.nav-submenu .nav-item:last-of-type[b-7n83us0okr] {
    padding-bottom: 0;
}
/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* ======================================================================
   Admin Dashboard — the parts of the arcade theme only this page uses
   (AB#959). The shared chrome (page, header, buttons, dividers, cards)
   lives in wwwroot/app.css: scoped CSS applies to one component, and
   every admin page wears the same theme.
   ====================================================================== */

/* ── KPI stat cards ─────────────────────────────────────────────────── */
.kpi-card[b-1wsljo45ku] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 0 0 rgba(0, 212, 255, 0);
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

.kpi-card.kpi-cyan[b-1wsljo45ku]    { border-color: rgba(0, 212, 255, 0.4); box-shadow: 0 0 14px rgba(0, 212, 255, 0.18); }
.kpi-card.kpi-magenta[b-1wsljo45ku] { border-color: rgba(200, 80, 192, 0.4); box-shadow: 0 0 14px rgba(200, 80, 192, 0.18); }
.kpi-card.kpi-purple[b-1wsljo45ku]  { border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 0 14px rgba(139, 92, 246, 0.18); }
.kpi-card.kpi-warning[b-1wsljo45ku] { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 0 14px rgba(245, 158, 11, 0.18); }

.kpi-icon[b-1wsljo45ku] {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.kpi-cyan .kpi-icon[b-1wsljo45ku], .kpi-cyan .kpi-value[b-1wsljo45ku]       { color: var(--color-cyan); }
.kpi-magenta .kpi-icon[b-1wsljo45ku], .kpi-magenta .kpi-value[b-1wsljo45ku] { color: var(--color-magenta); }
.kpi-purple .kpi-icon[b-1wsljo45ku], .kpi-purple .kpi-value[b-1wsljo45ku]   { color: var(--color-purple); }
.kpi-warning .kpi-icon[b-1wsljo45ku], .kpi-warning .kpi-value[b-1wsljo45ku] { color: var(--color-warning); }

.kpi-value[b-1wsljo45ku] {
    font-family: var(--arcade-font);
    font-size: 1.4rem;
    text-shadow: 0 0 10px currentColor;
}

.kpi-label[b-1wsljo45ku] {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.25rem;
}

/* Queue liveness line under the nutrition tile (AB#847). Deliberately quieter than .kpi-label:
   it is a diagnostic for the one tile that moves, not a second label. */
.kpi-sublabel[b-1wsljo45ku] {
    font-size: 0.55rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.35rem;
    opacity: 0.75;
}


/* ── Activity trend bar chart ──────────────────────────────────────── */
.arcade-chart-card[b-1wsljo45ku] {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
}

.arcade-chart-bar[b-1wsljo45ku] {
    transform-origin: bottom;
    transform: scaleY(0);
    animation: arcade-bar-grow-b-1wsljo45ku 600ms ease-out forwards;
}

@keyframes arcade-bar-grow-b-1wsljo45ku {
    to { transform: scaleY(1); }
}

.arcade-chart-labels[b-1wsljo45ku] {
    display: flex;
    margin-top: 0.35rem;
}

.arcade-chart-labels span[b-1wsljo45ku] {
    flex: 1 1 0;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
}

/* /Components/Pages/ChatPanel.razor.rz.scp.css */
/* ── Outer panel ──────────────────────────────────────────────── */

.chat-panel[b-5o9153en69] {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-bg-surface);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Magenta glow in top-left corner — the AI panel signature */
.chat-panel[b-5o9153en69]::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 180px;
    height: 180px;
    background: var(--gradient-glow-magenta);
    pointer-events: none;
    z-index: 0;
}

/* ── Header ───────────────────────────────────────────────────── */

.chat-header[b-5o9153en69] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
    font-size: 0.95rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    letter-spacing: 0.04em;
    color: var(--color-magenta);
}

.chat-header .bi[b-5o9153en69] {
    font-size: 1.1rem;
    color: var(--color-magenta);
}

.chat-close-btn[b-5o9153en69] {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 0.4rem;
    font-size: 0.95rem;
    transition: background 0.15s, color 0.15s;
}

.chat-close-btn:hover[b-5o9153en69] {
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-text-primary);
}

/* ── Message thread ───────────────────────────────────────────── */

.chat-messages[b-5o9153en69] {
    position: relative;
    z-index: 1;
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 120px;
    scroll-behavior: auto;
}

.chat-empty[b-5o9153en69] {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-align: center;
    padding: 1.5rem 1rem;
    margin: auto;
    max-width: 320px;
}

/* ── Bubbles ──────────────────────────────────────────────────── */

.chat-bubble[b-5o9153en69] {
    max-width: 85%;
    padding: 0.6rem 0.9rem;
    border-radius: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-bubble--user[b-5o9153en69] {
    align-self: flex-end;
    background: var(--color-cyan);
    color: #0A0E1A;
    border-bottom-right-radius: 0.25rem;
    white-space: pre-wrap;
}

.chat-bubble--ai[b-5o9153en69] {
    align-self: flex-start;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-bottom-left-radius: 0.25rem;
    white-space: normal;
}

/* ── Markdown content inside AI bubbles ─────────────────────── */

.chat-markdown[b-5o9153en69] {
    font-size: 0.9rem;
    line-height: 1.6;
}

.chat-markdown p[b-5o9153en69] {
    margin: 0 0 0.5rem;
}

.chat-markdown p:last-child[b-5o9153en69] {
    margin-bottom: 0;
}

.chat-markdown ul[b-5o9153en69],
.chat-markdown ol[b-5o9153en69] {
    margin: 0.25rem 0 0.5rem 1.25rem;
    padding: 0;
}

.chat-markdown li[b-5o9153en69] {
    margin-bottom: 0.15rem;
}

.chat-markdown strong[b-5o9153en69] {
    font-weight: 700;
}

.chat-markdown code[b-5o9153en69] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82em;
    background: rgba(0, 212, 255, 0.08);
    color: var(--color-cyan);
    padding: 0.1em 0.3em;
    border-radius: 0.25rem;
}

.chat-markdown h1[b-5o9153en69],
.chat-markdown h2[b-5o9153en69],
.chat-markdown h3[b-5o9153en69] {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
}

/* ── Streaming cursor ─────────────────────────────────────────── */

.chat-cursor[b-5o9153en69] {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--color-magenta);
    margin-left: 1px;
    vertical-align: text-bottom;
    animation: chat-blink-b-5o9153en69 0.7s step-end infinite;
}

@keyframes chat-blink-b-5o9153en69 {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Typing indicator ─────────────────────────────────────────── */

.chat-typing[b-5o9153en69] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    height: 1.2em;
}

.chat-typing span[b-5o9153en69] {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--color-magenta);
    border-radius: 50%;
    animation: chat-dot-bounce-b-5o9153en69 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(1)[b-5o9153en69] { animation-delay: 0s; }
.chat-typing span:nth-child(2)[b-5o9153en69] { animation-delay: 0.2s; }
.chat-typing span:nth-child(3)[b-5o9153en69] { animation-delay: 0.4s; }

@keyframes chat-dot-bounce-b-5o9153en69 {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40%            { transform: scale(1);   opacity: 1; }
}

/* ── Attachment chip ──────────────────────────────────────────── */

.chat-attachment-chip[b-5o9153en69] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 1rem 0.5rem;
    padding: 0.35rem 0.6rem;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.25);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-cyan);
    font-weight: 600;
}

.chat-attachment-chip span[b-5o9153en69] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attachment-remove[b-5o9153en69] {
    background: none;
    border: none;
    color: var(--color-cyan);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 1rem;
    min-width: 24px;
    min-height: 24px;
    justify-content: center;
}

/* ── Drop overlay ─────────────────────────────────────────────── */

.chat-drop-overlay[b-5o9153en69] {
    position: absolute;
    inset: 0;
    background: rgba(0, 212, 255, 0.06);
    border: 2px dashed var(--color-cyan);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-cyan);
    pointer-events: none;
    z-index: 10;
}

.chat-drop-overlay .bi[b-5o9153en69] {
    font-size: 2rem;
}

/* ── Input row ────────────────────────────────────────────────── */

.chat-input-row[b-5o9153en69] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-surface);
}

.chat-textarea[b-5o9153en69] {
    flex: 1;
    resize: none;
    border: 1.5px solid var(--color-border);
    border-radius: 0.6rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-family: 'Inter', system-ui, sans-serif;
    line-height: 1.5;
    background: var(--color-bg-subtle);
    color: var(--color-text-primary);
    min-height: 48px;
    max-height: 120px;
    overflow-y: auto;
    transition: border-color 0.15s;
}

.chat-textarea[b-5o9153en69]::placeholder {
    color: var(--color-text-muted);
}

.chat-textarea:focus[b-5o9153en69] {
    outline: none;
    border-color: var(--color-cyan);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
}

.chat-textarea:disabled[b-5o9153en69] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Input action buttons ─────────────────────────────────────── */

.chat-input-actions[b-5o9153en69] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.chat-attach-btn[b-5o9153en69] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 1.5px solid var(--color-border);
    border-radius: 0.6rem;
    color: var(--color-text-muted);
    background: var(--color-bg-subtle);
    cursor: pointer;
    font-size: 1.1rem;
    transition: border-color 0.15s, color 0.15s;
}

.chat-attach-btn:hover[b-5o9153en69] {
    border-color: var(--color-cyan);
    color: var(--color-cyan);
}

.chat-send-btn[b-5o9153en69] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--gradient-brand);
    color: #fff;
    border: none;
    border-radius: 0.6rem;
    font-size: 1.1rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

.chat-send-btn:hover:not(:disabled)[b-5o9153en69] {
    opacity: 0.85;
}

.chat-send-btn:disabled[b-5o9153en69] {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ── Responsive: fridge (≤576px portrait) ─────────────────────── */

@media (max-width: 575.98px) {
    .chat-panel[b-5o9153en69] {
        border-radius: 0.75rem;
    }

    .chat-bubble[b-5o9153en69] {
        max-width: 92%;
        font-size: 0.95rem;
    }

    .chat-textarea[b-5o9153en69] {
        font-size: 1rem;
    }
}
/* /Components/Pages/HomeDashboard.razor.rz.scp.css */
/* .body-container normally only pulls its right edge out to the window (so the
   scrollbar sits flush), which is fine for left-aligned pages. The home carousel
   bleeds its peek cards edge-to-edge, so that one-sided pull left a gutter on the
   left. Extend the left the same way here so the bleed is symmetric. */
.body-container[b-6f7mg3qjbn] {
    margin-left: -1.5rem;
    padding-left: 1.5rem;
}

.home-page[b-6f7mg3qjbn] {
    padding: 1.5rem 2rem;
}

.home-header[b-6f7mg3qjbn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.home-title[b-6f7mg3qjbn] {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.1rem;
}

.home-subtitle[b-6f7mg3qjbn] {
    color: var(--atebit-muted, #6c757d);
    margin: 0;
    font-size: 0.9rem;
}

.home-header-actions[b-6f7mg3qjbn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.home-header-actions .btn[b-6f7mg3qjbn] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
}

.view-toggle[b-6f7mg3qjbn] {
    display: flex;
    border: 2px solid var(--atebit-primary, #2F6B3E);
    border-radius: 0.5rem;
    overflow: hidden;
    min-height: 48px;
}

.view-toggle-btn[b-6f7mg3qjbn] {
    background: transparent;
    border: none;
    color: var(--atebit-primary, #2F6B3E);
    padding: 0.3rem 0.6rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-toggle-btn:hover:not(.active)[b-6f7mg3qjbn] {
    background: rgba(0, 212, 255, 0.08);
}

.view-toggle-btn.active[b-6f7mg3qjbn] {
    background: var(--atebit-primary, #00D4FF);
    color: #0A0E1A;
}

/* ── Category filter ────────────────────────────────────────── */

.filter-wrap[b-6f7mg3qjbn] {
    position: relative;
}

.filter-btn[b-6f7mg3qjbn] {
    position: relative;
    background: transparent;
    border: 2px solid var(--atebit-primary, #2F6B3E);
    border-radius: 0.5rem;
    color: var(--atebit-primary, #2F6B3E);
    padding: 0.3rem 0.55rem;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-btn:hover[b-6f7mg3qjbn],
.filter-btn--active[b-6f7mg3qjbn] {
    background: var(--atebit-primary, #00D4FF);
    color: #0A0E1A;
}

.filter-active-dot[b-6f7mg3qjbn] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: var(--color-magenta);
    border-radius: 50%;
    border: 1px solid var(--atebit-primary, #00D4FF);
}

.filter-btn--active .filter-active-dot[b-6f7mg3qjbn] {
    border-color: #0A0E1A;
}

.filter-backdrop[b-6f7mg3qjbn] {
    position: fixed;
    inset: 0;
    z-index: 99;
}

.filter-panel[b-6f7mg3qjbn] {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 200px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    padding: 0.6rem 0.75rem;
    z-index: 101;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.filter-panel-header[b-6f7mg3qjbn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.2rem;
}

.filter-panel-title[b-6f7mg3qjbn] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--atebit-muted, #6c757d);
}

.filter-clear-btn[b-6f7mg3qjbn] {
    font-size: 0.75rem;
    color: var(--atebit-primary, #2F6B3E);
    text-decoration: none;
}

.filter-clear-btn:disabled[b-6f7mg3qjbn] {
    color: var(--atebit-muted, #6c757d);
    pointer-events: none;
}

.filter-category-item[b-6f7mg3qjbn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    min-height: 44px;
    border-bottom: 1px solid var(--color-border-subtle);
}

.filter-category-item:last-child[b-6f7mg3qjbn] {
    border-bottom: none;
}

.filter-category-item input[type="checkbox"][b-6f7mg3qjbn] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--atebit-primary, #2F6B3E);
    flex-shrink: 0;
}
/* /Components/Pages/HowItWorks/HowItWorksGuide.razor.rz.scp.css */
/* Flexibility note - reassures that the full cycle is optional (AB#1182) */
.hiw-flexibility-note[b-dk6duwslwa] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    max-width: 900px;
    margin: 0 auto 1.5rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    border-left: 3px solid var(--bs-primary);
}

.hiw-flexibility-note i[b-dk6duwslwa] {
    color: var(--bs-primary);
    font-size: 1.1rem;
    line-height: 1.5;
    flex-shrink: 0;
}

/* Workflow image */
.hiw-image-wrap[b-dk6duwslwa] {
    display: flex;
    justify-content: center;
}

.hiw-image[b-dk6duwslwa] {
    width: 100%;
    max-width: 660px;
    height: auto;
}

/* Step detail list */
.hiw-list[b-dk6duwslwa] {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 900px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 1rem 1.5rem;
}

.hiw-list-item[b-dk6duwslwa] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.hiw-list-step-num[b-dk6duwslwa] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--bs-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 1px;
}

.hiw-step-link[b-dk6duwslwa] {
    font-weight: 600;
    color: var(--bs-body-color);
    text-decoration: none;
}

.hiw-step-link:hover[b-dk6duwslwa] {
    color: var(--bs-primary);
    text-decoration: underline;
}

.hiw-list-icon[b-dk6duwslwa] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    color: var(--bs-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .hiw-list[b-dk6duwslwa] {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
    }
}
/* /Components/Pages/Meals/MealPlans.razor.rz.scp.css */
.mp-week-nav[b-vzvmcnf37d] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.mp-week-label[b-vzvmcnf37d] {
    font-weight: 600;
    font-size: 1.1rem;
    min-width: 200px;
    text-align: center;
}

.mp-loading[b-vzvmcnf37d], .mp-empty[b-vzvmcnf37d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
}

.mp-empty-icon[b-vzvmcnf37d] {
    font-size: 3rem;
    color: var(--bs-secondary);
}

.mp-empty-text[b-vzvmcnf37d] {
    color: var(--bs-secondary);
    margin: 0;
}

/* ── Landscape grid (default) ── */
.mp-grid[b-vzvmcnf37d] {
    display: grid;
    grid-template-columns: 120px repeat(7, 1fr);
    gap: 4px;
    overflow-x: auto;
}

/* ── Portrait grid (hidden by default, shown in portrait orientation) ── */
.mp-portrait-grid[b-vzvmcnf37d] {
    display: none;
    gap: 4px;
    overflow-x: auto;
}

@media (orientation: portrait) {
    .mp-grid[b-vzvmcnf37d] {
        display: none;
    }

    .mp-portrait-grid[b-vzvmcnf37d] {
        display: grid;
        grid-template-columns: 64px repeat(var(--slot-count), minmax(0, 1fr));
    }

    .mp-portrait-day-total-bar[b-vzvmcnf37d] {
        grid-column: 2 / -1;
    }
}

.mp-portrait-corner[b-vzvmcnf37d] {
    background: var(--bs-secondary-bg);
    border-radius: 4px;
}

.mp-portrait-slot-header[b-vzvmcnf37d] {
    padding: 0.4rem 0.25rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-align: center;
    border-radius: 4px;
}

.mp-portrait-day-header[b-vzvmcnf37d] {
    background: var(--bs-secondary-bg);
    padding: 0.4rem 0.25rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-align: center;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mp-portrait-day-header.mp-today[b-vzvmcnf37d] {
    background: #d1e7dd;
    color: #0a3622;
    border: 2px solid #198754;
}

.mp-slot-header[b-vzvmcnf37d],
.mp-day-header[b-vzvmcnf37d] {
    background: var(--bs-secondary-bg);
    padding: 0.5rem;
    font-weight: 600;
    font-size: 0.8rem;
    text-align: center;
    border-radius: 4px;
}

.mp-day-header.mp-today[b-vzvmcnf37d] {
    background: #d1e7dd;
    color: #0a3622;
    border: 2px solid #198754;
}

.mp-slot-header[b-vzvmcnf37d] {
    text-align: left;
}

.mp-day-name[b-vzvmcnf37d] {
    font-size: 0.85rem;
    font-weight: 700;
}

.mp-day-date[b-vzvmcnf37d] {
    font-size: 0.75rem;
    opacity: 0.8;
}

.mp-slot-name[b-vzvmcnf37d] {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
    background: var(--bs-secondary-bg);
    border-radius: 4px;
}

.mp-cell[b-vzvmcnf37d] {
    min-height: 60px;
    display: flex;
    flex-direction: column;
}

/* ── Meal group box (clickable card inside each cell) ── */
.mp-meal-box[b-vzvmcnf37d] {
    flex: 1;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mp-meal-content[b-vzvmcnf37d] {
    flex: 1;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Item chips ── */
.mp-chip[b-vzvmcnf37d] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.78rem;
    line-height: 1.3;
}

.mp-chip-recipe[b-vzvmcnf37d] {
    background: #d1ecf1;
    color: #0c5460;
}

.mp-chip-pantry[b-vzvmcnf37d] {
    background: #d4edda;
    color: #155724;
}

.mp-chip-thumb[b-vzvmcnf37d] {
    width: 20px;
    height: 20px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
}

.mp-chip-name[b-vzvmcnf37d] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mp-chip[b-vzvmcnf37d] {
    cursor: grab;
}

.mp-chip-move[b-vzvmcnf37d] {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
    min-width: 24px;
    min-height: 24px;
}

.mp-chip-move:hover[b-vzvmcnf37d] {
    opacity: 1;
}

.mp-chip-remove[b-vzvmcnf37d] {
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
}

.mp-chip-remove:hover[b-vzvmcnf37d] {
    opacity: 1;
}

/* ── Nutrition summary row / MealDetail link ── */
.mp-nutrition-row[b-vzvmcnf37d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.68rem;
    color: var(--bs-secondary-text-emphasis);
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 999px;
    padding: 2px 7px;
    text-decoration: none;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
}

.mp-nutrition-row:hover[b-vzvmcnf37d] {
    background: var(--bs-secondary-bg-subtle);
    border-color: var(--bs-secondary);
    color: var(--bs-body-color);
}

.mp-nutrition-text[b-vzvmcnf37d] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.mp-nutrition-chevron[b-vzvmcnf37d] {
    font-size: 0.6rem;
    flex-shrink: 0;
    opacity: 0.7;
}

/* ── Add button ── */
.mp-add-btn[b-vzvmcnf37d] {
    background: none;
    border: 1px dashed var(--bs-border-color);
    border-radius: 4px;
    width: 100%;
    padding: 2px;
    font-size: 0.8rem;
    color: var(--bs-secondary);
    cursor: pointer;
    margin-top: auto;
}

.mp-add-btn:hover[b-vzvmcnf37d] {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

/* ── Recipe chip link ── */
.mp-chip-link[b-vzvmcnf37d] {
    color: inherit;
    text-decoration: none;
}

.mp-chip-link:hover[b-vzvmcnf37d] {
    text-decoration: underline;
}

/* ── Cooked cell state ── */
.mp-cell-cooked .mp-meal-box[b-vzvmcnf37d] {
    opacity: 0.5;
}


/* ── Day total footer row ── */
.mp-day-total-label[b-vzvmcnf37d] {
    background: var(--bs-tertiary-bg);
    padding: 0.4rem 0.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

.mp-day-total-cell[b-vzvmcnf37d] {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 0.35rem;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mp-day-total-nutrition[b-vzvmcnf37d] {
    font-size: 0.68rem;
    color: var(--bs-secondary-text-emphasis);
    font-weight: 500;
    text-align: center;
}

/* ── Portrait total bar — spans all meal columns below each day row ── */
.mp-portrait-day-header.mp-day-row-span[b-vzvmcnf37d] {
    grid-row: span 2;
}

.mp-portrait-day-total-bar[b-vzvmcnf37d] {
    font-size: 0.68rem;
    color: var(--bs-secondary-text-emphasis);
    font-weight: 500;
    text-align: center;
    padding: 2px 6px;
    background: var(--bs-tertiary-bg);
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
}


/* /Components/Pages/Privacy.razor.rz.scp.css */
.privacy-card[b-qoayzrfmry] {
    background: var(--color-bg-surface, #222840);
    border: 1px solid var(--color-border, #2E3550);
    border-radius: 1.25rem;
    padding: 2.5rem 2.75rem;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.privacy-card[b-qoayzrfmry]::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.privacy-logo-wrap[b-qoayzrfmry] {
    text-align: center;
    margin-bottom: 1.25rem;
}

.privacy-logo[b-qoayzrfmry] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
}

.privacy-title[b-qoayzrfmry] {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary, #fff);
    margin-bottom: 0.25rem;
    text-align: center;
}

.privacy-updated[b-qoayzrfmry] {
    font-size: 0.8rem;
    color: var(--color-text-muted, #5A6480);
    text-align: center;
    margin-bottom: 1.75rem;
}

.privacy-card h2[b-qoayzrfmry] {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-cyan, #00D4FF);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.privacy-card p[b-qoayzrfmry] {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-secondary, #A0AABB);
    margin-bottom: 0.75rem;
}

.privacy-card ul[b-qoayzrfmry] {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.privacy-card li[b-qoayzrfmry] {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-secondary, #A0AABB);
    margin-bottom: 0.2rem;
}

.privacy-card strong[b-qoayzrfmry] {
    color: var(--color-text-primary, #fff);
    font-weight: 600;
}

.privacy-card a[b-qoayzrfmry] {
    color: var(--color-cyan, #00D4FF);
    text-decoration: none;
}

.privacy-card a:hover[b-qoayzrfmry] {
    color: var(--color-primary-hover, #00BBDD);
}

.privacy-footer[b-qoayzrfmry] {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border, #2E3550);
    text-align: center;
    font-size: 0.875rem;
}
/* /Components/Pages/Public/Contact.razor.rz.scp.css */
/* Contact page (AB#746) — form styling on top of the shared .landing look in app.css.
   Fridge-safe (Chromium M94): no :has(), @container, @layer, subgrid, or CSS nesting.
   The .landing custom properties (--l-*) inherit down from MarketingShell's wrapper. */

.contact-panel[b-n39nf5jx6o] {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.contact-form[b-n39nf5jx6o] {
    text-align: left;
    margin-top: 1.5rem;
}

.contact-field[b-n39nf5jx6o] {
    margin-bottom: 1.25rem;
}

.contact-field label[b-n39nf5jx6o] {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--l-text-strong);
}

.contact-field .optional[b-n39nf5jx6o] {
    font-weight: 400;
    color: var(--l-muted);
    font-size: 0.85rem;
}

.contact-field input[b-n39nf5jx6o],
.contact-field textarea[b-n39nf5jx6o] {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--l-text-strong);
    background: var(--l-card-2);
    border: 1px solid var(--l-border-strong);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.contact-field textarea[b-n39nf5jx6o] {
    resize: vertical;
    min-height: 140px;
}

.contact-field input[b-n39nf5jx6o]::placeholder,
.contact-field textarea[b-n39nf5jx6o]::placeholder {
    color: var(--l-muted);
}

.contact-field input:focus[b-n39nf5jx6o],
.contact-field textarea:focus[b-n39nf5jx6o] {
    outline: none;
    border-color: var(--l-cyan);
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.25);
}

.contact-field input:disabled[b-n39nf5jx6o],
.contact-field textarea:disabled[b-n39nf5jx6o] {
    opacity: 0.6;
}

.contact-actions[b-n39nf5jx6o] {
    margin-top: 1.6rem;
}

.contact-actions .btn[b-n39nf5jx6o] {
    min-width: 200px;
}

/* Honeypot: moved off-screen rather than display:none so naive bots still fill it in. */
.hp-field[b-n39nf5jx6o] {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.contact-success[b-n39nf5jx6o] {
    margin-top: 1.5rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid var(--l-cyan);
    border-radius: 10px;
    background: rgba(0, 212, 255, 0.08);
    box-shadow: 0 0 18px rgba(0, 212, 255, 0.18);
}

.contact-success p[b-n39nf5jx6o] {
    margin-bottom: 0.4rem;
}

.contact-success p:last-child[b-n39nf5jx6o] {
    margin-bottom: 0;
}

.contact-error[b-n39nf5jx6o] {
    margin-top: 1.25rem;
    padding: 0.9rem 1.1rem;
    border: 1px solid #E85D5D;
    border-radius: 10px;
    background: rgba(232, 93, 93, 0.10);
    color: #F0A8A8;
    font-size: 0.95rem;
}

/* Portrait-first is the default single-column flow; nothing extra needed down to 720px,
   but give the panel a little breathing room on narrow screens. */
@media (max-width: 576px) {
    .contact-actions .btn[b-n39nf5jx6o] {
        width: 100%;
    }
}
/* /Components/Pages/Public/Faq.razor.rz.scp.css */
/* FAQ accordion (AB#749): native <details>/<summary> cards styled to match the arcade panels in the
   .landing marketing CSS (app.css). Inherits the .landing custom properties (--l-card, --l-border,
   etc.) since custom properties cascade into scoped markup. Fridge-safe (Chromium M94): no :has(),
   @container, CSS nesting, @layer, or subgrid — attribute selectors, flexbox, and transforms only.
   Summary rows keep a >=48px touch target for the Family Hub touchscreen. */

.faq-list[b-rdfjj7lnlj] {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.faq-item[b-rdfjj7lnlj] {
    background: var(--l-card);
    border: 1px solid var(--l-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.faq-item[open][b-rdfjj7lnlj] {
    border-color: var(--l-border-strong);
    box-shadow: 0 0 22px rgba(0, 212, 255, 0.08);
}

.faq-item summary[b-rdfjj7lnlj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 56px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

/* Hide the default disclosure triangle (M94 needs the -webkit pseudo). */
.faq-item summary[b-rdfjj7lnlj]::-webkit-details-marker {
    display: none;
}

.faq-item summary[b-rdfjj7lnlj]::marker {
    content: '';
}

.faq-q[b-rdfjj7lnlj] {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--l-text-strong);
}

.faq-item[open] .faq-q[b-rdfjj7lnlj] {
    color: var(--l-white);
}

/* Chevron drawn with borders so no icon font or image is needed; rotates when open. */
.faq-chevron[b-rdfjj7lnlj] {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--l-cyan);
    border-bottom: 2px solid var(--l-cyan);
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    margin-top: -4px;
}

.faq-item[open] .faq-chevron[b-rdfjj7lnlj] {
    transform: rotate(225deg);
    margin-top: 4px;
}

.faq-item summary:focus-visible[b-rdfjj7lnlj] {
    outline: 2px solid var(--l-cyan);
    outline-offset: -2px;
    border-radius: 14px;
}

.faq-a[b-rdfjj7lnlj] {
    padding: 0 1.25rem 1.15rem;
    text-align: left;
}

.faq-a p[b-rdfjj7lnlj] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--l-text);
    margin: 0;
}

.faq-a strong[b-rdfjj7lnlj] {
    color: var(--l-text-strong);
    font-weight: 600;
}

/* Portrait fridge (720x1080) and phones: slightly tighter cards, same touch targets. */
@media (max-width: 720px) {
    .faq-item summary[b-rdfjj7lnlj] {
        padding: 0.9rem 1rem;
    }

    .faq-a[b-rdfjj7lnlj] {
        padding: 0 1rem 1rem;
    }
}
/* /Components/Pages/Public/Features.razor.rz.scp.css */
/* Scoped layout for the public Features page (AB#747). General marketing styles live in the
   .landing section of app.css; only the feature-block layout is page-specific. Fridge-safe
   (Chromium M94): no :has(), @container, @layer, subgrid, nesting, or text-wrap. The .landing
   CSS custom properties (--l-*) cascade in from the MarketingShell wrapper. */

.feature-block[b-b643qm6m8c] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    background: var(--l-card);
    border: 1px solid var(--l-border);
    border-radius: 20px;
    padding: clamp(2rem, 4vw, 2.75rem);
    overflow: hidden;
}

/* Signature gradient hairline along the top, matching .landing .feature. */
.feature-block[b-b643qm6m8c]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--l-grad);
    opacity: 0.85;
}

/* Pixel-art illustration column: crisp rect-grid SVG with an accent glow, like the hero sprites. */
.fb-art[b-b643qm6m8c] {
    display: flex;
    justify-content: center;
    align-items: center;
}
.fb-art svg[b-b643qm6m8c] {
    width: clamp(128px, 30vw, 176px);
    height: auto;
    shape-rendering: crispEdges;
}
.fb-art--cyan svg[b-b643qm6m8c] { filter: drop-shadow(0 0 14px rgba(0, 212, 255, 0.35)); }
.fb-art--magenta svg[b-b643qm6m8c] { filter: drop-shadow(0 0 14px rgba(200, 80, 192, 0.35)); }

.fb-copy[b-b643qm6m8c] { text-align: center; }
.fb-copy p[b-b643qm6m8c] { font-size: 1.02rem; }

/* Magenta variant recolours the shared .landing .feature-icon chip (cyan is its default). */
.feature-block--magenta .feature-icon[b-b643qm6m8c] { color: var(--l-magenta); }
.fb-copy .feature-icon[b-b643qm6m8c] { margin-bottom: 1.1rem; }

/* Bullet list: square pixel markers in the block's accent colour. */
.fb-points[b-b643qm6m8c] {
    list-style: none;
    margin: 1.15rem auto 0;
    max-width: 460px;
    text-align: left;
}
.fb-points li[b-b643qm6m8c] {
    position: relative;
    padding-left: 1.35rem;
    margin-bottom: 0.6rem;
    font-size: 0.98rem;
}
.fb-points li[b-b643qm6m8c]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    background: var(--l-cyan);
}
.feature-block--magenta .fb-points li[b-b643qm6m8c]::before { background: var(--l-magenta); }

/* Inline link to /fridge: 48px touch target for the Family Hub. */
.fb-link[b-b643qm6m8c] {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    margin-top: 0.5rem;
    font-weight: 600;
}

/* Side-by-side from 760px up (the 720px fridge portrait stays stacked, which reads better there). */
@media (min-width: 760px) {
    .feature-block[b-b643qm6m8c] { flex-direction: row; align-items: center; gap: 2.5rem; }
    .feature-block--rev[b-b643qm6m8c] { flex-direction: row-reverse; }
    .fb-art[b-b643qm6m8c] { flex: 0 0 34%; }
    .fb-copy[b-b643qm6m8c] { flex: 1 1 auto; text-align: left; }
    .fb-points[b-b643qm6m8c] { margin-left: 0; margin-right: 0; }
}
/* /Components/Pages/Public/Fridge.razor.rz.scp.css */
/* Page-specific styles for the public fridge landing (AB#751). Everything else reuses the shared
   .landing CSS in app.css. Fridge-safe (Chromium M94): plain selectors only - no CSS nesting,
   :has(), @container, @layer, or subgrid. The --l-* custom properties are inherited from the
   .landing wrapper in MarketingShell. */

/* --- Hero fridge illustration (pixel-art rect sprite, same idiom as the HomeLanding sprites) --- */
.fridge-sprite[b-0jo3yfucgz] {
    display: block;
    width: 108px;
    height: 156px;
    margin: 0 auto 1.6rem;
    filter: drop-shadow(0 0 14px rgba(0, 212, 255, 0.35));
    animation: fridge-hum-b-0jo3yfucgz 3.2s ease-in-out infinite;
}
.fridge-sprite svg[b-0jo3yfucgz] {
    width: 100%;
    height: 100%;
    shape-rendering: crispEdges;
}
@keyframes fridge-hum-b-0jo3yfucgz {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
    .fridge-sprite[b-0jo3yfucgz] { animation: none; }
}

/* --- Setup steps: numbered list with arcade-style badges. Touch-safe row heights (48px+). --- */
.setup-intro[b-0jo3yfucgz] {
    text-align: center;
    margin-bottom: 1.75rem;
}
.setup-steps[b-0jo3yfucgz] {
    list-style: none;
    margin: 0 auto 1.5rem;
    padding: 0;
    max-width: 640px;
}
.setup-steps li[b-0jo3yfucgz] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.85rem 0;
    min-height: 48px;
    border-bottom: 1px solid var(--l-border);
}
.setup-steps li:last-child[b-0jo3yfucgz] {
    border-bottom: none;
}
.step-num[b-0jo3yfucgz] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--l-card-2);
    border: 1px solid var(--l-border-strong);
    color: var(--l-cyan);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.45);
}
.setup-steps li:nth-child(even) .step-num[b-0jo3yfucgz] {
    color: var(--l-magenta);
    text-shadow: 0 0 8px rgba(200, 80, 192, 0.45);
}
.step-text[b-0jo3yfucgz] {
    flex: 1 1 auto;
    padding-top: 0.45rem;
    color: var(--l-text);
    /* The panel centres its text, which is right for the heading and intro but wrong for these rows:
       centred copy beside a fixed left-hand number badge gives every step a different left edge and
       reads as ragged. Instructions are a list, so they align to the badge. */
    text-align: left;
}
.setup-note[b-0jo3yfucgz] {
    text-align: center;
    font-size: 0.9rem;
    color: var(--l-muted);
    max-width: 640px;
    margin: 0 auto;
}

/* At fridge width (720px portrait falls in the sm-and-up range) keep the hero sprite a touch
   larger so it reads from across the kitchen. */
@media (min-width: 576px) {
    .fridge-sprite[b-0jo3yfucgz] {
        width: 126px;
        height: 182px;
    }
}
/* /Components/Pages/Public/HowItWorksPublic.razor.rz.scp.css */
/* Public How It Works step panels (AB#748). Page-specific styling only - shared marketing look
   (.panel, .section-head, .cta-row, etc.) comes from the .landing rules in app.css. Fridge-safe
   (Chromium M94): no :has(), @container, @layer, subgrid, or CSS nesting. Portrait-first single
   column; two-up on wide screens. Color vars (--l-cyan, --l-magenta, ...) inherit from .landing. */

.hiw-steps[b-xrvy8f5auq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.hiw-step[b-xrvy8f5auq] {
    position: relative;
    overflow: hidden;
}

.hiw-step[b-xrvy8f5auq]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.hiw-step--cyan[b-xrvy8f5auq]::before { background: linear-gradient(90deg, #00D4FF 0%, #8B5CF6 100%); }
.hiw-step--magenta[b-xrvy8f5auq]::before { background: linear-gradient(90deg, #8B5CF6 0%, #C850C0 100%); }

.hiw-step-head[b-xrvy8f5auq] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.hiw-step-num[b-xrvy8f5auq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--l-border-strong);
    background: var(--l-card-2);
    color: var(--l-white);
    font-size: 1rem;
    flex-shrink: 0;
}

.hiw-step--cyan .hiw-step-num[b-xrvy8f5auq] { color: var(--l-cyan); box-shadow: 0 0 12px rgba(0, 212, 255, 0.18); }
.hiw-step--magenta .hiw-step-num[b-xrvy8f5auq] { color: var(--l-magenta); box-shadow: 0 0 12px rgba(200, 80, 192, 0.18); }

.hiw-step-icon[b-xrvy8f5auq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--l-card-2);
    border: 1px solid var(--l-border);
    color: var(--l-cyan);
    flex-shrink: 0;
}

.hiw-step--magenta .hiw-step-icon[b-xrvy8f5auq] { color: var(--l-magenta); }

.hiw-step-icon svg[b-xrvy8f5auq] {
    width: 24px;
    height: 24px;
}

.hiw-step h3[b-xrvy8f5auq] {
    color: var(--l-text-strong);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.hiw-step p[b-xrvy8f5auq] {
    font-size: 0.98rem;
    /* Auto side margins, not 0. The shared .landing .panel rule caps paragraphs at 660px, which never
       bites in a normal card (its content box is narrower than that) but does in .hiw-step--wide,
       where the card spans both columns. With margin 0 the clamped paragraph sat flush left while the
       heading above it stayed centred, so the card read as misaligned. */
    margin: 0 auto;
}

/* "...then it starts over" note under the steps */
.hiw-repeat[b-xrvy8f5auq] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    max-width: 640px;
    margin: 1.75rem auto 0;
    padding: 1rem 1.25rem;
    border: 1px dashed var(--l-border-strong);
    border-radius: 12px;
    background: rgba(30, 36, 56, 0.6);
}

.hiw-repeat-icon[b-xrvy8f5auq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--l-purple);
    flex-shrink: 0;
}

.hiw-repeat-icon svg[b-xrvy8f5auq] {
    width: 24px;
    height: 24px;
}

.hiw-repeat p[b-xrvy8f5auq] {
    margin: 0;
    font-size: 0.98rem;
}

/* Two-up on wide screens; the fridge (720px portrait) and phones stay single column */
@media (min-width: 860px) {
    .hiw-steps[b-xrvy8f5auq] {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    /* Odd step out: the final "Cook a meal" payoff spans both columns instead of orphaning */
    .hiw-step--wide[b-xrvy8f5auq] {
        grid-column: 1 / -1;
    }
}
/* /Components/Pages/Terms.razor.rz.scp.css */
.privacy-card[b-mp7a2pz7rb] {
    background: var(--color-bg-surface, #222840);
    border: 1px solid var(--color-border, #2E3550);
    border-radius: 1.25rem;
    padding: 2.5rem 2.75rem;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.privacy-card[b-mp7a2pz7rb]::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.privacy-logo-wrap[b-mp7a2pz7rb] {
    text-align: center;
    margin-bottom: 1.25rem;
}

.privacy-logo[b-mp7a2pz7rb] {
    width: 64px;
    height: 64px;
    border-radius: 12px;
}

.privacy-title[b-mp7a2pz7rb] {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-text-primary, #fff);
    margin-bottom: 0.25rem;
    text-align: center;
}

.privacy-updated[b-mp7a2pz7rb] {
    font-size: 0.8rem;
    color: var(--color-text-muted, #5A6480);
    text-align: center;
    margin-bottom: 1.75rem;
}

.privacy-card h2[b-mp7a2pz7rb] {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-cyan, #00D4FF);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.privacy-card p[b-mp7a2pz7rb] {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-secondary, #A0AABB);
    margin-bottom: 0.75rem;
}

.privacy-card ul[b-mp7a2pz7rb] {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}

.privacy-card li[b-mp7a2pz7rb] {
    font-size: 0.92rem;
    line-height: 1.7;
    color: var(--color-text-secondary, #A0AABB);
    margin-bottom: 0.2rem;
}

.privacy-card strong[b-mp7a2pz7rb] {
    color: var(--color-text-primary, #fff);
    font-weight: 600;
}

.privacy-card a[b-mp7a2pz7rb] {
    color: var(--color-cyan, #00D4FF);
    text-decoration: none;
}

.privacy-card a:hover[b-mp7a2pz7rb] {
    color: var(--color-primary-hover, #00BBDD);
}

.privacy-footer[b-mp7a2pz7rb] {
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border, #2E3550);
    text-align: center;
    font-size: 0.875rem;
}