/* /Components/Account/Pages/Login.razor.rz.scp.css */
/* Needed to keep the links clickable */
a[b-dng2tmvt2k] {
    position: relative;
}
/* /Components/Account/Pages/Register.razor.rz.scp.css */
/* Needed to keep the links clickable */
a[b-o612988c9g] {
    position: relative;
}
/* /Components/Account/Shared/PasswordRequirementList.razor.rz.scp.css */
.password-requirements-container[b-cze0r9553u] {
    padding-top: 0.5rem;
}

.password-requirements-list[b-cze0r9553u] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.password-requirement[b-cze0r9553u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.password-requirement .status-icon-wrapper[b-cze0r9553u] {
    position: relative;
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

/* The status icons are rendered by <MudIcon>, so they never receive this
   component's scope attribute - they must be reached through ::deep. */
.password-requirement[b-cze0r9553u]  .status-icon {
    position: absolute;
    inset: 0;
    font-size: 1.1rem;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.password-requirement[b-cze0r9553u]  .status-icon-success {
    color: var(--mud-palette-success);
}

.password-requirement[b-cze0r9553u]  .status-icon-error {
    color: var(--mud-palette-error);
}

.password-requirement.requirement-met[b-cze0r9553u]  .status-icon-success,
.password-requirement.requirement-unmet[b-cze0r9553u]  .status-icon-error {
    opacity: 1;
    transform: scale(1);
}
/* /Components/Admin/ArticleEditor.razor.rz.scp.css */
.article-preview[b-dsrhdwx6bm] {
    background: var(--c-bg-deep);
    color: var(--c-gold-soft);
    padding: 2rem;
    border-radius: 0.5rem;
    max-width: 800px;
}

.article-preview-header[b-dsrhdwx6bm] {
    margin-bottom: 2rem;
}

.article-preview-categories[b-dsrhdwx6bm] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.article-preview .article-category-tag[b-dsrhdwx6bm] {
    background: rgba(var(--c-gold-rgb), 0.15);
    border: 1px solid rgba(var(--c-gold-rgb), 0.3);
    color: var(--c-gold);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.article-preview h1[b-dsrhdwx6bm] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    color: var(--c-white);
}

.article-preview-meta[b-dsrhdwx6bm] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-gold-soft);
    font-size: 0.875rem;
    opacity: 0.8;
}

.article-preview .article-separator[b-dsrhdwx6bm] {
    color: rgba(var(--c-gold-rgb), 0.4);
}

.article-preview .article-featured-image[b-dsrhdwx6bm] {
    margin: 0 0 2rem 0;
}

.article-preview .article-featured-image img[b-dsrhdwx6bm] {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.article-preview .article-featured-image figcaption[b-dsrhdwx6bm] {
    font-size: 0.875rem;
    color: rgba(var(--c-gold-soft-rgb), 0.7);
    text-align: center;
    margin-top: 0.5rem;
}

.article-preview .article-content[b-dsrhdwx6bm] {
    line-height: 1.75;
    font-size: 1.125rem;
    color: var(--c-gold-soft);
}

.article-preview .article-content[b-dsrhdwx6bm]  h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
    color: var(--c-gold);
}

.article-preview .article-content[b-dsrhdwx6bm]  h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
    color: var(--c-gold);
}

.article-preview .article-content[b-dsrhdwx6bm]  p {
    margin: 0 0 1.5rem 0;
}

.article-preview .article-content[b-dsrhdwx6bm]  a {
    color: var(--c-gold);
}

.article-preview .article-content[b-dsrhdwx6bm]  a:hover {
    color: var(--c-gold-soft);
}

.article-preview .article-content[b-dsrhdwx6bm]  img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

.article-preview .article-content[b-dsrhdwx6bm]  blockquote {
    border-left: 4px solid var(--c-gold);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: rgba(var(--c-gold-soft-rgb), 0.9);
    font-style: italic;
}

.article-preview .article-content[b-dsrhdwx6bm]  code {
    background: rgba(var(--c-gold-rgb), 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

.article-preview .article-content[b-dsrhdwx6bm]  pre {
    background: var(--c-bg-deep);
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
}

.article-preview .article-content[b-dsrhdwx6bm]  pre code {
    background: none;
    padding: 0;
}

.article-preview .article-content[b-dsrhdwx6bm]  ul,
.article-preview .article-content[b-dsrhdwx6bm]  ol {
    margin: 0 0 1.5rem 1.5rem;
}

.article-preview .article-content[b-dsrhdwx6bm]  li {
    margin-bottom: 0.5rem;
}

.article-preview .article-content[b-dsrhdwx6bm]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.article-preview .article-content[b-dsrhdwx6bm]  th,
.article-preview .article-content[b-dsrhdwx6bm]  td {
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    padding: 0.5rem 1rem;
    text-align: left;
}

.article-preview .article-content[b-dsrhdwx6bm]  th {
    background: rgba(var(--c-gold-rgb), 0.1);
    color: var(--c-gold);
}

/* Elements the shared renderer adds, so the preview matches the published page. */
.article-preview .article-content[b-dsrhdwx6bm]  .article-lede {
    font-size: 1.15em;
    color: var(--c-white);
}

.article-preview .article-content[b-dsrhdwx6bm]  .article-table-wrap {
    overflow-x: auto;
}

.article-preview .article-content[b-dsrhdwx6bm]  .article-tool-link {
    padding: 0.1em 0.5em;
    border-radius: 0.375rem;
    background: rgba(var(--c-gold-rgb), 0.1);
    border: 1px solid rgba(var(--c-gold-rgb), 0.25);
    font-weight: 600;
}

.article-preview .article-content[b-dsrhdwx6bm]  .heading-anchor {
    display: none;
}
/* /Components/Admin/ModerationQueue.razor.rz.scp.css */
.review-container:focus[b-be811saj8w] {
    outline: none;
}

.review-image-panel[b-be811saj8w] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background-color: rgba(var(--c-white-rgb), 0.03);
    border-radius: 12px;
}

.review-image[b-be811saj8w] {
    max-width: 100%;
    max-height: 512px;
    border-radius: 8px;
    object-fit: contain;
}
/* /Components/Landing/CalculatorPageShell.razor.rz.scp.css */
.calculator-page[b-6m1jxg1w9i] {
    padding: 80px 0;
    background: var(--c-bg-surface);
}

.calculator-page__hero[b-6m1jxg1w9i] {
    text-align: center;
    margin-bottom: 40px;
}

.calculator-page__hero h1[b-6m1jxg1w9i] {
    font-size: 3rem;
    color: var(--c-gold);
    margin-bottom: 1rem;
}

.calculator-page__hero p[b-6m1jxg1w9i] {
    font-size: 1.2rem;
    color: var(--c-gold-soft);
    max-width: 700px;
    margin: 0 auto;
}

.calculator-page__type[b-6m1jxg1w9i] {
    max-width: 320px;
    margin: 0 auto 24px;
}

.calculator-page__body[b-6m1jxg1w9i] {
    max-width: 820px;
    margin: 56px auto 0;
    color: var(--c-bone);
    line-height: 1.7;
}

.calculator-page__body h2[b-6m1jxg1w9i],
.calculator-page__body[b-6m1jxg1w9i]  h2 {
    color: var(--c-gold);
    font-size: 1.6rem;
    margin: 2.4rem 0 1rem;
}

.calculator-page__body h3[b-6m1jxg1w9i],
.calculator-page__body[b-6m1jxg1w9i]  h3 {
    color: var(--c-gold-soft);
    font-size: 1.1rem;
    margin: 1.8rem 0 0.5rem;
}

.calculator-page__body p[b-6m1jxg1w9i],
.calculator-page__body[b-6m1jxg1w9i]  p {
    margin: 0 0 1rem;
}

.calculator-page__body ul[b-6m1jxg1w9i],
.calculator-page__body[b-6m1jxg1w9i]  ul {
    margin: 0 0 1rem;
    padding-left: 1.2rem;
}

.calculator-page__body li[b-6m1jxg1w9i],
.calculator-page__body[b-6m1jxg1w9i]  li {
    margin-bottom: 0.5rem;
}

.calculator-page__body a[b-6m1jxg1w9i],
.calculator-page__body[b-6m1jxg1w9i]  a {
    color: var(--c-gold);
}

.calculator-page__body[b-6m1jxg1w9i]  .calculator-page__table {
    overflow-x: auto;
    margin: 1rem 0 1.5rem;
}

.calculator-page__body[b-6m1jxg1w9i]  .calculator-page__table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.calculator-page__body[b-6m1jxg1w9i]  .calculator-page__table th,
.calculator-page__body[b-6m1jxg1w9i]  .calculator-page__table td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(var(--c-gold-rgb), 0.18);
}

.calculator-page__body[b-6m1jxg1w9i]  .calculator-page__table th {
    color: var(--c-gold);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calculator-page__body[b-6m1jxg1w9i]  pre {
    margin: 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: rgba(var(--c-bg-deep-rgb), 0.8);
    border: 1px solid rgba(var(--c-gold-rgb), 0.18);
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
}

.calculator-page__body[b-6m1jxg1w9i]  code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--c-gold-soft);
}

.calculator-page__note[b-6m1jxg1w9i] {
    margin-top: 2.4rem;
    padding: 20px 24px;
    border-left: 3px solid rgba(var(--c-gold-rgb), 0.5);
    background: rgba(var(--c-bg-deep-rgb), 0.6);
    border-radius: 0 10px 10px 0;
}

.calculator-page__note h2[b-6m1jxg1w9i] {
    margin-top: 0;
    font-size: 1.2rem;
}

.calculator-page__note p[b-6m1jxg1w9i] {
    margin-bottom: 0;
}

.calculator-page__links ul[b-6m1jxg1w9i] {
    list-style: none;
    padding-left: 0;
}

.calculator-page__bridge[b-6m1jxg1w9i] {
    max-width: 720px;
    margin: 60px auto 0;
    padding: 32px;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    background: var(--c-bg-deep);
    text-align: center;
}

.calculator-page__bridge h2[b-6m1jxg1w9i] {
    color: var(--c-gold);
    margin-bottom: 1rem;
}

.calculator-page__bridge p[b-6m1jxg1w9i] {
    color: var(--c-gold-soft);
    margin-bottom: 1.5rem;
}

.calculator-page__bridge a[b-6m1jxg1w9i] {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    background: var(--c-gold);
    color: var(--c-bg-deep);
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 600px) {
    .calculator-page[b-6m1jxg1w9i] {
        padding: 40px 0;
    }

    .calculator-page__hero h1[b-6m1jxg1w9i] {
        font-size: 2rem;
    }

    .calculator-page__hero p[b-6m1jxg1w9i] {
        font-size: 1.05rem;
    }

    .calculator-page__bridge[b-6m1jxg1w9i] {
        padding: 24px 20px;
    }
}
/* /Components/Landing/Pages/AboutUs.razor.rz.scp.css */
/* ===== Variables & Base ===== */
.landing-container[b-3gbtry39gt] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Hero Section ===== */
.about-hero-section[b-3gbtry39gt] {
    padding: 100px 0 80px;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
    text-align: center;
}

.about-hero-section .hero-content[b-3gbtry39gt] {
    max-width: 800px;
    margin: 0 auto;
}

.about-hero-section h1[b-3gbtry39gt] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--c-gold);
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.hero-subtitle[b-3gbtry39gt] {
    font-size: 1.3rem;
    color: var(--c-gold-soft);
    line-height: 1.7;
}

/* ===== Our Story Section ===== */
.story-section[b-3gbtry39gt] {
    padding: 100px 0;
    background: var(--c-bg-surface);
}

.story-grid[b-3gbtry39gt] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
}

.story-content h2[b-3gbtry39gt] {
    font-size: 2.2rem;
    color: var(--c-gold);
    margin-bottom: 1.5rem;
}

.story-content p[b-3gbtry39gt] {
    font-size: 1.1rem;
    color: var(--c-gold-soft);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.story-visual[b-3gbtry39gt] {
    text-align: center;
    padding: 0;
    background: var(--c-bg-deep);
    border-radius: 16px;
    border: 2px solid rgba(var(--c-gold-rgb), 0.3);
    overflow: hidden;
}

.story-image[b-3gbtry39gt] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ===== Section Headers ===== */
.section-header[b-3gbtry39gt] {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2[b-3gbtry39gt] {
    font-size: 2.2rem;
    color: var(--c-gold);
    margin-bottom: 1rem;
}

.section-header p[b-3gbtry39gt] {
    font-size: 1.15rem;
    color: var(--c-gold-soft);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== Passion Section ===== */
.passion-section[b-3gbtry39gt] {
    padding: 100px 0;
    background: var(--c-bg-deep);
}

.passion-grid[b-3gbtry39gt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.passion-card[b-3gbtry39gt] {
    background: var(--c-bg-surface);
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    transition: all 0.3s ease;
}

.passion-card:hover[b-3gbtry39gt] {
    transform: translateY(-5px);
    border-color: var(--c-gold);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.15);
}

.passion-icon[b-3gbtry39gt] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.passion-card h3[b-3gbtry39gt] {
    font-size: 1.3rem;
    color: var(--c-gold);
    margin-bottom: 1rem;
}

.passion-card p[b-3gbtry39gt] {
    color: var(--c-gold-soft);
    line-height: 1.7;
    font-size: 1rem;
}

/* ===== Founder Section ===== */
.founder-section[b-3gbtry39gt] {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--c-bg-surface) 0%, var(--c-bg-deep) 100%);
}

.founder-content[b-3gbtry39gt] {
    max-width: 800px;
    margin: 0 auto;
}

.founder-heading[b-3gbtry39gt] {
    font-size: 2.2rem;
    color: var(--c-gold);
    text-align: center;
    margin-bottom: 2rem;
}

.founder-card[b-3gbtry39gt] {
    background: var(--c-bg-deep);
    padding: 60px;
    border-radius: 16px;
    border: 2px solid rgba(var(--c-gold-rgb), 0.3);
    text-align: center;
}

.founder-image[b-3gbtry39gt] {
    margin-bottom: 1.5rem;
}

.founder-image img[b-3gbtry39gt] {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--c-gold);
}

.founder-card h3[b-3gbtry39gt] {
    font-size: 1.5rem;
    color: var(--c-gold-soft);
    margin-bottom: 0.5rem;
}

.founder-title[b-3gbtry39gt] {
    color: rgba(var(--c-gold-soft-rgb), 0.7);
    font-size: 1rem;
    margin-bottom: 2rem;
}

.founder-bio[b-3gbtry39gt] {
    text-align: left;
    margin-bottom: 2rem;
}

.founder-bio p[b-3gbtry39gt] {
    color: var(--c-gold-soft);
    line-height: 1.8;
    margin-bottom: 1.2rem;
    font-size: 1.05rem;
}

.founder-favorites[b-3gbtry39gt] {
    margin-top: 2rem;
    padding: 20px 30px;
    background: rgba(var(--c-gold-rgb), 0.08);
    border-left: 4px solid var(--c-gold);
    border-radius: 0 8px 8px 0;
    text-align: left;
}

.founder-favorites h4[b-3gbtry39gt] {
    color: var(--c-gold);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.founder-favorites p[b-3gbtry39gt] {
    color: var(--c-gold-soft);
    line-height: 1.7;
    font-size: 1rem;
    margin: 0;
}

.founder-contact[b-3gbtry39gt] {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.contact-link[b-3gbtry39gt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--c-gold-soft);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 1rem;
}

.contact-link:hover[b-3gbtry39gt] {
    color: var(--c-gold);
}

.linkedin-logo[b-3gbtry39gt] {
    width: 2.5rem;
    height: 2.5rem;
}

/* ===== Values Section ===== */
.values-section[b-3gbtry39gt] {
    padding: 100px 0;
    background: var(--c-bg-surface);
}

.values-grid[b-3gbtry39gt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.value-item[b-3gbtry39gt] {
    text-align: center;
    padding: 30px 20px;
}

.value-number[b-3gbtry39gt] {
    font-size: 3rem;
    font-weight: 700;
    color: rgba(var(--c-gold-rgb), 0.2);
    margin-bottom: 1rem;
}

.value-item h3[b-3gbtry39gt] {
    font-size: 1.2rem;
    color: var(--c-gold);
    margin-bottom: 1rem;
}

.value-item p[b-3gbtry39gt] {
    color: var(--c-gold-soft);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ===== CTA Section ===== */
.about-cta-section[b-3gbtry39gt] {
    padding: 100px 0;
    background: var(--c-bg-deep);
}

.cta-content[b-3gbtry39gt] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 60px 40px;
    background: var(--c-bg-surface);
    border: 2px solid var(--c-gold);
    border-radius: 16px;
}

.cta-content h2[b-3gbtry39gt] {
    font-size: 2rem;
    color: var(--c-gold);
    margin-bottom: 1rem;
}

.cta-content p[b-3gbtry39gt] {
    color: var(--c-gold-soft);
    font-size: 1.15rem;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.cta-buttons[b-3gbtry39gt] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.cta-primary[b-3gbtry39gt] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    padding: 16px 32px;
    border: 2px solid var(--c-gold);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
}

.cta-primary:hover[b-3gbtry39gt] {
    background: var(--c-gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.3);
    color: var(--c-bg-deep);
    text-decoration: none;
    border-color: var(--c-gold-soft);
}

.cta-secondary[b-3gbtry39gt] {
    background: transparent;
    color: var(--c-gold);
    border: 2px solid var(--c-gold);
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
}

.cta-secondary:hover[b-3gbtry39gt] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    transform: translateY(-2px);
    text-decoration: none;
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
    .values-grid[b-3gbtry39gt] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .story-grid[b-3gbtry39gt] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .story-visual[b-3gbtry39gt] {
        order: -1;
    }
}

@media (max-width: 768px) {
    .about-hero-section h1[b-3gbtry39gt] {
        font-size: 2.2rem;
    }
    
    .hero-subtitle[b-3gbtry39gt] {
        font-size: 1.1rem;
    }
    
    .passion-grid[b-3gbtry39gt] {
        grid-template-columns: 1fr;
    }
    
    .values-grid[b-3gbtry39gt] {
        grid-template-columns: 1fr;
    }
    
    .founder-card[b-3gbtry39gt] {
        padding: 40px 25px;
    }
    
    .section-header h2[b-3gbtry39gt] {
        font-size: 1.8rem;
    }
    
    .about-hero-section[b-3gbtry39gt],
    .story-section[b-3gbtry39gt],
    .passion-section[b-3gbtry39gt],
    .founder-section[b-3gbtry39gt],
    .values-section[b-3gbtry39gt],
    .about-cta-section[b-3gbtry39gt] {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .about-hero-section h1[b-3gbtry39gt] {
        font-size: 1.8rem;
    }
    
    .cta-buttons[b-3gbtry39gt] {
        flex-direction: column;
    }
    
    .cta-primary[b-3gbtry39gt],
    .cta-secondary[b-3gbtry39gt] {
        width: 100%;
    }
}
/* /Components/Landing/Pages/ArticlePage.razor.rz.scp.css */
/* Article body rules use ::deep because the body is a MarkupString: its elements
   come from markdown, never from this component's markup, so plain scoped
   selectors would compile to an attribute the rendered HTML does not carry. */

.article-container[b-yr3c2y8y2m] {
    max-width: 820px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}

.article-not-found[b-yr3c2y8y2m], .article-loading[b-yr3c2y8y2m] {
    text-align: center;
    padding: 4rem 0;
    color: var(--c-gold-soft);
}

.article-not-found h1[b-yr3c2y8y2m] {
    color: var(--c-gold);
}

/* ── Reading progress ──────────────────────────────────────────────────────
   Echoes the live tasting progress bar. --article-progress is written by
   blog.js; it stays at 0 when the reader prefers reduced motion. */

.article-progress[b-yr3c2y8y2m] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 60;
    background: rgba(var(--c-gold-rgb), 0.12);
}

.article-progress-fill[b-yr3c2y8y2m] {
    display: block;
    height: 100%;
    transform-origin: left center;
    transform: scaleX(var(--article-progress, 0));
    background: var(--c-gold);
    transition: transform 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
    .article-progress[b-yr3c2y8y2m] {
        display: none;
    }
}

/* ── Breadcrumbs & header ─────────────────────────────────────────────────── */

.article-breadcrumbs ol[b-yr3c2y8y2m] {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    font-size: 0.875rem;
}

.article-breadcrumbs li[b-yr3c2y8y2m] {
    display: flex;
    align-items: center;
    color: var(--c-gold-soft);
}

.article-breadcrumbs li:not(:last-child)[b-yr3c2y8y2m]::after {
    content: '›';
    margin: 0 0.5rem;
    color: rgba(var(--c-gold-rgb), 0.4);
}

.article-breadcrumbs a[b-yr3c2y8y2m] {
    color: var(--c-gold);
    text-decoration: none;
}

.article-breadcrumbs a:hover[b-yr3c2y8y2m] {
    text-decoration: underline;
}

.article-header[b-yr3c2y8y2m] {
    margin-bottom: 2rem;
}

.article-categories[b-yr3c2y8y2m] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.article-category-tag[b-yr3c2y8y2m] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background: rgba(var(--c-accent-rgb), 0.14);
    border: 1px solid rgba(var(--c-accent-rgb), 0.4);
    color: var(--c-accent-ink);
}

.article-category-tag:hover[b-yr3c2y8y2m] {
    background: rgba(var(--c-accent-rgb), 0.24);
}

.article-header h1[b-yr3c2y8y2m] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 1rem 0;
    color: var(--c-white);
}

.article-meta[b-yr3c2y8y2m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--c-gold-soft);
    font-size: 0.875rem;
    opacity: 0.8;
}

.article-author a[b-yr3c2y8y2m] {
    color: var(--c-gold);
    text-decoration: none;
}

.article-author a:hover[b-yr3c2y8y2m] {
    text-decoration: underline;
}

.article-separator[b-yr3c2y8y2m] {
    color: rgba(var(--c-gold-rgb), 0.4);
}

.article-featured-image[b-yr3c2y8y2m] {
    margin: 0 0 2rem 0;
}

/* Fixed ratio reserves the space before the image arrives, so the text below
   it does not jump once it does. */
.article-featured-image img[b-yr3c2y8y2m] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(var(--c-black-rgb), 0.35);
}

/* ── Table of contents ────────────────────────────────────────────────────── */

.article-toc[b-yr3c2y8y2m] {
    margin: 0 0 2.5rem 0;
    padding: 1rem 1.25rem;
    background: rgba(var(--c-gold-rgb), 0.05);
    border: 1px solid rgba(var(--c-gold-rgb), 0.15);
    border-radius: 0.5rem;
}

.article-toc summary[b-yr3c2y8y2m] {
    cursor: pointer;
    font-weight: 600;
    color: var(--c-gold);
    letter-spacing: 0.02em;
}

.article-toc ol[b-yr3c2y8y2m] {
    margin: 0.875rem 0 0 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.5rem;
}

.article-toc li[b-yr3c2y8y2m] {
    color: var(--c-gold-soft);
}

.article-toc a[b-yr3c2y8y2m] {
    color: var(--c-gold-soft);
    text-decoration: none;
}

.article-toc a:hover[b-yr3c2y8y2m] {
    color: var(--c-gold);
    text-decoration: underline;
}

/* ── Reading column ───────────────────────────────────────────────────────── */

.article-content[b-yr3c2y8y2m] {
    /* Roughly 70 characters: long enough to avoid choppy lines, short enough
       that the eye finds the start of the next one. */
    max-width: 70ch;
    margin: 0 auto;
    line-height: 1.65;
    font-size: 1.125rem;
    text-align: left;
    hyphens: none;
    color: var(--c-gold-soft);
}

.article-content[b-yr3c2y8y2m]  p {
    margin: 0 0 0.9em 0;
}

.article-content[b-yr3c2y8y2m]  .article-lede {
    font-size: 1.15em;
    line-height: 1.55;
    color: var(--c-white);
    margin-bottom: 1.4em;
}

.article-content[b-yr3c2y8y2m]  h2,
.article-content[b-yr3c2y8y2m]  h3 {
    color: var(--c-gold);
    font-weight: 600;
    scroll-margin-top: 5rem;
}

.article-content[b-yr3c2y8y2m]  h2 {
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 2em 0 0.6em;
}

.article-content[b-yr3c2y8y2m]  h3 {
    font-size: 1.375rem;
    line-height: 1.3;
    margin: 1.75em 0 0.5em;
}

.article-content[b-yr3c2y8y2m]  .heading-anchor {
    margin-left: 0.4em;
    font-weight: 400;
    text-decoration: none;
    color: rgba(var(--c-gold-rgb), 0.5);
    opacity: 0;
    transition: opacity 0.15s;
}

.article-content[b-yr3c2y8y2m]  h2:hover .heading-anchor,
.article-content[b-yr3c2y8y2m]  .heading-anchor:focus-visible {
    opacity: 1;
}

.article-content[b-yr3c2y8y2m]  a {
    color: var(--c-gold);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.article-content[b-yr3c2y8y2m]  a:hover {
    color: var(--c-gold-lemon);
}

/* Calculator links are the blog's main conversion path, so they stay findable
   when a reader scans back through a guide rather than reading it. */
.article-content[b-yr3c2y8y2m]  .article-tool-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    padding: 0.1em 0.5em;
    border-radius: 0.375rem;
    background: rgba(var(--c-gold-rgb), 0.1);
    border: 1px solid rgba(var(--c-gold-rgb), 0.25);
    text-decoration: none;
    font-weight: 600;
}

.article-content[b-yr3c2y8y2m]  .article-tool-link::before {
    content: '🧮';
    font-size: 0.9em;
}

.article-content[b-yr3c2y8y2m]  .article-tool-link:hover {
    background: rgba(var(--c-gold-rgb), 0.18);
    text-decoration: underline;
}

.article-content[b-yr3c2y8y2m]  ul,
.article-content[b-yr3c2y8y2m]  ol {
    margin: 0 0 1.2em 0;
    padding-left: 1.5rem;
}

.article-content[b-yr3c2y8y2m]  li {
    margin-bottom: 0.4em;
}

.article-content[b-yr3c2y8y2m]  li::marker {
    color: var(--c-gold);
}

.article-content[b-yr3c2y8y2m]  img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(var(--c-black-rgb), 0.35);
    margin: 1.75em 0;
}

.article-content[b-yr3c2y8y2m]  figure {
    margin: 1.75em 0;
}

.article-content[b-yr3c2y8y2m]  figcaption {
    font-size: 0.875rem;
    color: rgba(var(--c-gold-soft-rgb), 0.7);
    text-align: center;
    margin-top: 0.5rem;
}

.article-content[b-yr3c2y8y2m]  blockquote {
    border-left: 3px solid var(--c-gold);
    padding: 0.25em 0 0.25em 1.25rem;
    margin: 1.75em 0;
    color: rgba(var(--c-gold-soft-rgb), 0.9);
    font-style: italic;
}

.article-content[b-yr3c2y8y2m]  hr {
    border: none;
    border-top: 1px solid rgba(var(--c-gold-rgb), 0.2);
    margin: 2.5em 0;
}

.article-content[b-yr3c2y8y2m]  code {
    background: rgba(var(--c-gold-rgb), 0.1);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
}

.article-content[b-yr3c2y8y2m]  pre {
    background: var(--c-bg-deep);
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
}

.article-content[b-yr3c2y8y2m]  pre code {
    background: none;
    padding: 0;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

.article-content[b-yr3c2y8y2m]  .article-table-wrap {
    overflow-x: auto;
    margin: 1.75em 0;
    border: 1px solid rgba(var(--c-gold-rgb), 0.18);
    border-radius: 0.5rem;
}

.article-content[b-yr3c2y8y2m]  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    /* Reference tables are the point of some of these guides; below this they
       stop being readable and should scroll instead. */
    min-width: 32rem;
}

.article-content[b-yr3c2y8y2m]  thead th {
    position: sticky;
    top: 0;
    background: var(--c-bg-surface);
    color: var(--c-gold);
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.article-content[b-yr3c2y8y2m]  th,
.article-content[b-yr3c2y8y2m]  td {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid rgba(var(--c-gold-rgb), 0.12);
}

.article-content[b-yr3c2y8y2m]  tbody tr:nth-child(even) {
    background: rgba(var(--c-gold-rgb), 0.04);
}

/* Markdig emits alignment as inline styles from the pipe-table syntax; figures
   only line up if the digits are the same width. */
.article-content[b-yr3c2y8y2m]  td[align="right"],
.article-content[b-yr3c2y8y2m]  th[align="right"],
.article-content[b-yr3c2y8y2m]  td[align="center"],
.article-content[b-yr3c2y8y2m]  th[align="center"] {
    font-variant-numeric: tabular-nums;
}

/* ── Share ────────────────────────────────────────────────────────────────── */

.article-share[b-yr3c2y8y2m] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 3rem auto;
    max-width: 70ch;
    padding: 1.5rem;
    background: rgba(var(--c-gold-rgb), 0.05);
    border: 1px solid rgba(var(--c-gold-rgb), 0.15);
    border-radius: 0.5rem;
}

.share-label[b-yr3c2y8y2m] {
    font-weight: 500;
    color: var(--c-gold-soft);
}

.share-buttons[b-yr3c2y8y2m] {
    display: flex;
    gap: 0.75rem;
}

.share-btn[b-yr3c2y8y2m] {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fixed size so the row reserves its space before the icons paint. */
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    text-decoration: none;
}

.share-btn:hover[b-yr3c2y8y2m] {
    transform: scale(1.1);
}

.share-btn:focus-visible[b-yr3c2y8y2m] {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

.share-native[b-yr3c2y8y2m] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
}

.share-twitter[b-yr3c2y8y2m] {
    background: var(--c-black);
    color: var(--c-white);
}

.share-facebook[b-yr3c2y8y2m] {
    background: var(--c-facebook);
    color: var(--c-white);
}

.share-linkedin[b-yr3c2y8y2m] {
    background: var(--c-linkedin);
    color: var(--c-white);
}

.share-copy[b-yr3c2y8y2m] {
    background: rgba(var(--c-gold-rgb), 0.2);
    color: var(--c-gold);
}

.share-copy:hover[b-yr3c2y8y2m] {
    background: rgba(var(--c-gold-rgb), 0.3);
}

.share-copy.copied[b-yr3c2y8y2m] {
    background: var(--c-green);
    color: var(--c-white);
}

@media (prefers-reduced-motion: reduce) {
    .share-btn[b-yr3c2y8y2m],
    .article-progress-fill[b-yr3c2y8y2m] {
        transition: none;
    }

    .share-btn:hover[b-yr3c2y8y2m] {
        transform: none;
    }
}

/* ── Related articles ─────────────────────────────────────────────────────── */

.related-articles[b-yr3c2y8y2m] {
    margin: 3rem 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--c-gold-rgb), 0.15);
}

.related-articles h2[b-yr3c2y8y2m] {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: var(--c-gold);
}

.related-articles-grid[b-yr3c2y8y2m] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.5rem;
}

.related-article-card[b-yr3c2y8y2m] {
    display: flex;
    flex-direction: column;
    background: var(--c-bg-surface);
    border: 1px solid rgba(var(--c-gold-rgb), 0.15);
    border-radius: 0.5rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.related-article-card:hover[b-yr3c2y8y2m] {
    border-color: rgba(var(--c-gold-rgb), 0.4);
    box-shadow: 0 4px 12px rgba(var(--c-black-rgb), 0.3);
}

.related-article-card:focus-visible[b-yr3c2y8y2m] {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

.related-article-image img[b-yr3c2y8y2m] {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.related-article-content[b-yr3c2y8y2m] {
    padding: 1rem;
}

.article-card-category[b-yr3c2y8y2m] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: rgba(var(--c-accent-rgb), 0.14);
    color: var(--c-accent-ink);
}

.related-article-content h3[b-yr3c2y8y2m] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
    color: var(--c-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-article-content p[b-yr3c2y8y2m] {
    font-size: 0.875rem;
    color: var(--c-gold-soft);
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
    opacity: 0.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-article-meta[b-yr3c2y8y2m] {
    font-size: 0.75rem;
    color: rgba(var(--c-gold-soft-rgb), 0.6);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.article-footer[b-yr3c2y8y2m] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--c-gold-rgb), 0.15);
}

.back-to-blog[b-yr3c2y8y2m] {
    color: var(--c-gold);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.back-to-blog:hover[b-yr3c2y8y2m] {
    color: var(--c-gold-soft);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .article-container[b-yr3c2y8y2m] {
        padding: 1.5rem 1.25rem;
    }

    .article-header h1[b-yr3c2y8y2m] {
        font-size: 1.75rem;
    }

    .article-content[b-yr3c2y8y2m] {
        font-size: 1.0625rem;
    }

    .article-content[b-yr3c2y8y2m]  h2 {
        font-size: 1.5rem;
    }

    .article-share[b-yr3c2y8y2m] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ── Print ─────────────────────────────────────────────────────────────────
   Hosts print these guides and the shopping maths before going to the shop. */

@media print {
    .article-progress[b-yr3c2y8y2m],
    .article-breadcrumbs[b-yr3c2y8y2m],
    .article-toc[b-yr3c2y8y2m],
    .article-share[b-yr3c2y8y2m],
    .related-articles[b-yr3c2y8y2m],
    .article-footer[b-yr3c2y8y2m] {
        display: none;
    }

    .article-container[b-yr3c2y8y2m] {
        max-width: none;
        padding: 0;
    }

    .article-header h1[b-yr3c2y8y2m],
    .article-content[b-yr3c2y8y2m],
    .article-content[b-yr3c2y8y2m]  h2,
    .article-content[b-yr3c2y8y2m]  h3,
    .article-meta[b-yr3c2y8y2m] {
        color: var(--c-black);
        max-width: none;
    }

    .article-featured-image img[b-yr3c2y8y2m],
    .article-content[b-yr3c2y8y2m]  img,
    .article-content[b-yr3c2y8y2m]  figure,
    .article-content[b-yr3c2y8y2m]  .article-table-wrap {
        break-inside: avoid;
        box-shadow: none;
    }

    /* Tables must print complete: a scroll container would clip the columns
       that ran off the right-hand edge. */
    .article-content[b-yr3c2y8y2m]  .article-table-wrap {
        overflow: visible;
    }

    .article-content[b-yr3c2y8y2m]  table {
        min-width: 0;
        break-inside: avoid;
    }

    .article-content[b-yr3c2y8y2m]  thead th {
        position: static;
        background: none;
        color: var(--c-black);
    }

    .article-content[b-yr3c2y8y2m]  a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        word-break: break-all;
    }

    .article-content[b-yr3c2y8y2m]  a {
        color: var(--c-black);
    }
}
/* /Components/Landing/Pages/BeerClubsLanding.razor.rz.scp.css */
/* ===== Variables & Base ===== */
.landing-container[b-10p3ne2cbh] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Hero Section ===== */
.hero-section[b-10p3ne2cbh] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
}

.hero-content[b-10p3ne2cbh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-text h1[b-10p3ne2cbh] {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--c-gold);
}

.subtitle[b-10p3ne2cbh] {
    font-size: 1.2rem;
    color: var(--c-gold-soft);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.benefits[b-10p3ne2cbh] {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.benefits li[b-10p3ne2cbh] {
    padding: 0.6rem 0;
    color: var(--c-gold-soft);
    position: relative;
    padding-left: 1.8rem;
    font-size: 1.05rem;
}

.benefits li[b-10p3ne2cbh]:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-gold);
    font-weight: bold;
}

.cta-section[b-10p3ne2cbh] {
    margin-top: 2.5rem;
}

.cta-primary[b-10p3ne2cbh] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    padding: 16px 32px;
    border: 2px solid var(--c-gold);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
    line-height: 1.2;
}

.cta-primary:hover[b-10p3ne2cbh] {
    background: var(--c-gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.3);
    color: var(--c-bg-deep);
    text-decoration: none;
    border-color: var(--c-gold-soft);
}

.cta-secondary[b-10p3ne2cbh] {
    background: transparent;
    color: var(--c-gold);
    border: 2px solid var(--c-gold);
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    box-sizing: border-box;
    line-height: 1.2;
}

.cta-secondary:hover[b-10p3ne2cbh] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    transform: translateY(-2px);
    text-decoration: none;
}

.trust-signals[b-10p3ne2cbh] {
    margin-top: 1.5rem;
    color: var(--c-gold-soft);
    font-size: 0.9rem;
    opacity: 0.9;
}

.hero-image img[b-10p3ne2cbh] {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(var(--c-black-rgb), 0.4);
}

/* ===== Section Headers ===== */
.section-header[b-10p3ne2cbh] {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2[b-10p3ne2cbh] {
    font-size: 2.2rem;
    color: var(--c-gold);
    margin-bottom: 1rem;
}

.section-header p[b-10p3ne2cbh] {
    font-size: 1.15rem;
    color: var(--c-gold-soft);
    max-width: 600px;
    margin: 0 auto;
}

/* ===== Value Section ===== */
.value-section[b-10p3ne2cbh] {
    padding: 100px 0;
    background: var(--c-bg-surface);
}

.value-grid[b-10p3ne2cbh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.value-card[b-10p3ne2cbh] {
    background: var(--c-bg-deep);
    padding: 40px 30px;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    transition: all 0.3s ease;
}

.value-card:hover[b-10p3ne2cbh] {
    transform: translateY(-5px);
    border-color: var(--c-gold);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.15);
}

.value-icon[b-10p3ne2cbh] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.value-card h3[b-10p3ne2cbh] {
    color: var(--c-gold);
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.value-list[b-10p3ne2cbh] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.value-list li[b-10p3ne2cbh] {
    color: var(--c-gold-soft);
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
}

.value-list li[b-10p3ne2cbh]:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--c-gold);
}

/* ===== Features Section ===== */
.features-section[b-10p3ne2cbh] {
    padding: 100px 0;
    background: var(--c-bg-deep);
}

.features-grid[b-10p3ne2cbh] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-card[b-10p3ne2cbh] {
    text-align: center;
    padding: 40px 25px;
    border-radius: 12px;
    background: var(--c-bg-surface);
    border: 1px solid rgba(var(--c-gold-rgb), 0.15);
    transition: all 0.3s ease;
}

.feature-card:hover[b-10p3ne2cbh] {
    transform: translateY(-5px);
    border-color: var(--c-gold);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.1);
}

.feature-icon[b-10p3ne2cbh] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.feature-card h3[b-10p3ne2cbh] {
    color: var(--c-gold);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.feature-card p[b-10p3ne2cbh] {
    color: var(--c-gold-soft);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ===== How It Works Section ===== */
.how-it-works-section[b-10p3ne2cbh] {
    padding: 100px 0;
    background: var(--c-bg-surface);
}

.steps-grid[b-10p3ne2cbh] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.step[b-10p3ne2cbh] {
    text-align: center;
    position: relative;
}

.step-number[b-10p3ne2cbh] {
    width: 60px;
    height: 60px;
    background: var(--c-gold);
    color: var(--c-bg-deep);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
}

.step h3[b-10p3ne2cbh] {
    color: var(--c-gold);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.step p[b-10p3ne2cbh] {
    color: var(--c-gold-soft);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ===== Social Proof Section ===== */
.social-proof-section[b-10p3ne2cbh] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
}

.proof-content[b-10p3ne2cbh] {
    text-align: center;
}

.proof-stats[b-10p3ne2cbh] {
    display: flex;
    justify-content: center;
    gap: 80px;
    margin-bottom: 50px;
}

.stat[b-10p3ne2cbh] {
    display: flex;
    flex-direction: column;
}

.stat-number[b-10p3ne2cbh] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--c-gold);
}

.stat-label[b-10p3ne2cbh] {
    color: var(--c-gold-soft);
    font-size: 1rem;
    margin-top: 0.5rem;
}

.testimonial[b-10p3ne2cbh] {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px;
    background: var(--c-bg-deep);
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.testimonial p[b-10p3ne2cbh] {
    font-size: 1.2rem;
    color: var(--c-gold-soft);
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 1rem;
}

.testimonial cite[b-10p3ne2cbh] {
    color: var(--c-gold);
    font-style: normal;
    font-weight: 600;
}

/* ===== Demo Section ===== */
.demo-section[b-10p3ne2cbh] {
    padding: 100px 0;
    background: var(--c-bg-deep);
}

.demo-content[b-10p3ne2cbh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.demo-info h2[b-10p3ne2cbh] {
    font-size: 2rem;
    color: var(--c-gold);
    margin-bottom: 1rem;
}

.demo-info > p[b-10p3ne2cbh] {
    color: var(--c-gold-soft);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.demo-benefits[b-10p3ne2cbh] {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.demo-benefits li[b-10p3ne2cbh] {
    color: var(--c-gold-soft);
    padding: 0.6rem 0;
    padding-left: 1.8rem;
    position: relative;
}

.demo-benefits li[b-10p3ne2cbh]:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-gold);
    font-weight: bold;
}

.alternative-cta[b-10p3ne2cbh] {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.alternative-cta p[b-10p3ne2cbh] {
    color: var(--c-gold-soft);
    margin-bottom: 1rem;
}

.demo-form-container[b-10p3ne2cbh] {
    background: var(--c-bg-surface);
    padding: 40px;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.form-message[b-10p3ne2cbh] {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.form-message.success[b-10p3ne2cbh] {
    background: rgba(var(--c-success-rgb), 0.1);
    color: var(--c-success);
    border: 1px solid rgba(var(--c-success-rgb), 0.3);
}

.form-message.error[b-10p3ne2cbh] {
    background: rgba(var(--c-error-rgb), 0.1);
    color: var(--c-error);
    border: 1px solid rgba(var(--c-error-rgb), 0.3);
}

.form-group[b-10p3ne2cbh] {
    margin-bottom: 1.5rem;
}

.form-group label[b-10p3ne2cbh] {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--c-gold);
    font-weight: 500;
}

.form-group input[b-10p3ne2cbh],
.form-group select[b-10p3ne2cbh],
.form-group textarea[b-10p3ne2cbh] {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.3);
    background: var(--c-bg-deep);
    color: var(--c-gold-soft);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus[b-10p3ne2cbh],
.form-group select:focus[b-10p3ne2cbh],
.form-group textarea:focus[b-10p3ne2cbh] {
    outline: none;
    border-color: var(--c-gold);
}

.form-group input[b-10p3ne2cbh]::placeholder,
.form-group textarea[b-10p3ne2cbh]::placeholder {
    color: rgba(var(--c-gold-soft-rgb), 0.5);
}

.form-group textarea[b-10p3ne2cbh] {
    resize: vertical;
    min-height: 80px;
}

.turnstile-container[b-10p3ne2cbh] {
    margin-bottom: 1.5rem;
}

.submit-button[b-10p3ne2cbh] {
    width: 100%;
    background: var(--c-gold);
    color: var(--c-bg-deep);
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-button:hover[b-10p3ne2cbh] {
    background: var(--c-gold-soft);
    transform: translateY(-2px);
}

/* ===== FAQ Section ===== */
.faq-section[b-10p3ne2cbh] {
    padding: 100px 0;
    background: var(--c-bg-surface);
}

.faq-grid[b-10p3ne2cbh] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.faq-card[b-10p3ne2cbh] {
    background: var(--c-bg-deep);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    transition: all 0.3s ease;
}

.faq-card:hover[b-10p3ne2cbh] {
    transform: translateY(-3px);
    border-color: var(--c-gold);
    box-shadow: 0 10px 25px rgba(var(--c-gold-rgb), 0.1);
}

.faq-card h3[b-10p3ne2cbh] {
    color: var(--c-gold);
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.faq-card p[b-10p3ne2cbh] {
    color: var(--c-gold-soft);
    line-height: 1.6;
    margin: 0;
}

.faq-card a[b-10p3ne2cbh] {
    color: var(--c-gold);
}

/* ===== Final CTA Section ===== */
.final-cta-section[b-10p3ne2cbh] {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
}

.final-cta-content[b-10p3ne2cbh] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    padding: 60px 40px;
    background: var(--c-bg-deep);
    border: 2px solid var(--c-gold);
    border-radius: 16px;
}

.final-cta-content h2[b-10p3ne2cbh] {
    font-size: 2rem;
    color: var(--c-gold);
    margin-bottom: 1rem;
}

.final-cta-content p[b-10p3ne2cbh] {
    color: var(--c-gold-soft);
    font-size: 1.15rem;
    margin-bottom: 2rem;
}

.final-cta-buttons[b-10p3ne2cbh] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: stretch;
}

.final-cta-buttons .cta-primary[b-10p3ne2cbh],
.final-cta-buttons .cta-secondary[b-10p3ne2cbh] {
    margin: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
    .value-grid[b-10p3ne2cbh],
    .features-grid[b-10p3ne2cbh] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .steps-grid[b-10p3ne2cbh] {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .hero-content[b-10p3ne2cbh] {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .hero-text h1[b-10p3ne2cbh] {
        font-size: 2.2rem;
    }
    
    .hero-image[b-10p3ne2cbh] {
        order: -1;
    }
    
    .hero-image img[b-10p3ne2cbh] {
        max-width: 350px;
    }
    
    .benefits li[b-10p3ne2cbh] {
        text-align: left;
    }
    
    .value-grid[b-10p3ne2cbh],
    .features-grid[b-10p3ne2cbh],
    .faq-grid[b-10p3ne2cbh] {
        grid-template-columns: 1fr;
    }
    
    .steps-grid[b-10p3ne2cbh] {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .demo-content[b-10p3ne2cbh] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .proof-stats[b-10p3ne2cbh] {
        flex-direction: column;
        gap: 30px;
    }
    
    .section-header h2[b-10p3ne2cbh] {
        font-size: 1.8rem;
    }
    
    .hero-section[b-10p3ne2cbh],
    .value-section[b-10p3ne2cbh],
    .features-section[b-10p3ne2cbh],
    .how-it-works-section[b-10p3ne2cbh],
    .demo-section[b-10p3ne2cbh],
    .faq-section[b-10p3ne2cbh],
    .final-cta-section[b-10p3ne2cbh] {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .hero-text h1[b-10p3ne2cbh] {
        font-size: 1.8rem;
    }
    
    .cta-primary[b-10p3ne2cbh],
    .cta-secondary[b-10p3ne2cbh] {
        display: block;
        width: 100%;
        text-align: center;
        margin-right: 0;
    }
    
    .final-cta-buttons[b-10p3ne2cbh] {
        flex-direction: column;
    }
    
    .demo-form-container[b-10p3ne2cbh] {
        padding: 25px;
    }
}
/* /Components/Landing/Pages/BeerLandingA.razor.rz.scp.css */
/* Hero Section */
.landing-hero[b-gvorpvyw56] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
}

.landing-content[b-gvorpvyw56] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero-text h1[b-gvorpvyw56] {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--c-gold);
}

.subtitle[b-gvorpvyw56] {
    font-size: 1.3rem;
    color: var(--c-gold-soft);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.benefits[b-gvorpvyw56] {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.benefits li[b-gvorpvyw56] {
    padding: 0.5rem 0;
    color: var(--c-gold-soft);
    position: relative;
    padding-left: 1.5rem;
}

.benefits li[b-gvorpvyw56]:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-gold);
    font-weight: bold;
}

.cta-section[b-gvorpvyw56] {
    margin-top: 3rem;
}

.cta-primary[b-gvorpvyw56], .cta-secondary[b-gvorpvyw56] {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.cta-primary[b-gvorpvyw56] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
}

.cta-primary:hover[b-gvorpvyw56] {
    color: var(--c-bg-deep);
    text-decoration: none;
    background: var(--c-gold-soft);
}

.cta-secondary[b-gvorpvyw56] {
    background: transparent;
    color: var(--c-gold);
    border: 2px solid var(--c-gold);
}

.cta-primary:hover[b-gvorpvyw56], .cta-secondary:hover[b-gvorpvyw56] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.3);
}

.trust-signals[b-gvorpvyw56] {
    margin-top: 2rem;
    color: var(--c-gold-soft);
    font-size: 0.9rem;
}

/* Features Section */
.features-section[b-gvorpvyw56] {
    padding: 100px 0;
    background: var(--c-bg-surface);
}

.features-grid[b-gvorpvyw56] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.feature-card[b-gvorpvyw56] {
    text-align: center;
    padding: 40px 30px;
    border-radius: 12px;
    background: var(--c-bg-deep);
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover[b-gvorpvyw56] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.2);
    border-color: var(--c-gold);
}

.feature-icon[b-gvorpvyw56] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3[b-gvorpvyw56] {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--c-gold);
}

.feature-card p[b-gvorpvyw56] {
    color: var(--c-gold-soft);
    line-height: 1.6;
}

/* FAQ Card Styles */
.faq-card[b-gvorpvyw56] {
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    cursor: pointer;
}

.faq-card:hover[b-gvorpvyw56] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.2) !important;
    border-color: var(--c-gold) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .landing-content[b-gvorpvyw56] {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .hero-text h1[b-gvorpvyw56] {
        font-size: 2.5rem;
    }
    
    .features-grid[b-gvorpvyw56] {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .landing-hero[b-gvorpvyw56] {
        padding: 60px 0;
    }
    
    .features-section[b-gvorpvyw56] {
        padding: 80px 0;
    }
}
/* /Components/Landing/Pages/Blog.razor.rz.scp.css */
.blog-container[b-790f4b5wb1] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}

.blog-header[b-790f4b5wb1] {
    text-align: center;
    margin-bottom: 2rem;
}

.blog-header h1[b-790f4b5wb1] {
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--c-gold);
}

.blog-header p[b-790f4b5wb1] {
    font-size: 1.125rem;
    color: var(--c-gold-soft);
    margin: 0;
}

/* ── Category chips ──────────────────────────────────────────────────────────
   One scrollable row rather than a wrapping block: on a phone the wrapped
   version pushed the first article most of a screen down. */

.blog-categories[b-790f4b5wb1] {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    justify-content: flex-start;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}

@media (min-width: 768px) {
    .blog-categories[b-790f4b5wb1] {
        flex-wrap: wrap;
        justify-content: center;
        overflow-x: visible;
    }
}

.category-chip[b-790f4b5wb1] {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    background: rgba(var(--c-accent-rgb), 0.1);
    border: 1px solid rgba(var(--c-accent-rgb), 0.35);
    color: var(--c-accent-ink);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s;
}

.category-chip:hover[b-790f4b5wb1] {
    background: rgba(var(--c-accent-rgb), 0.2);
    border-color: var(--c-accent-ink);
}

.category-chip:focus-visible[b-790f4b5wb1] {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

.category-chip.active[b-790f4b5wb1] {
    background: var(--c-accent-ink);
    border-color: var(--c-accent-ink);
    color: var(--c-bg-deep);
    font-weight: 600;
}

.blog-loading[b-790f4b5wb1], .blog-empty[b-790f4b5wb1] {
    text-align: center;
    padding: 4rem 0;
    color: var(--c-gold-soft);
}

.blog-empty h2[b-790f4b5wb1] {
    color: var(--c-gold);
}

.loading-spinner[b-790f4b5wb1] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--c-gold-rgb), 0.2);
    border-top-color: var(--c-gold);
    border-radius: 50%;
    animation: spin-b-790f4b5wb1 1s linear infinite;
    margin: 0 auto 1rem;
}

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

/* ── Cards ───────────────────────────────────────────────────────────────── */

.articles-grid[b-790f4b5wb1] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .articles-grid[b-790f4b5wb1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .articles-grid[b-790f4b5wb1] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.article-card[b-790f4b5wb1] {
    display: flex;
    flex-direction: column;
    background: var(--c-bg-surface);
    border: 1px solid rgba(var(--c-gold-rgb), 0.15);
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.article-card:hover[b-790f4b5wb1] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(var(--c-black-rgb), 0.4);
    border-color: rgba(var(--c-gold-rgb), 0.4);
}

.article-card:focus-visible[b-790f4b5wb1] {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

/* Newest post, given the full width above the grid. */
.article-card-featured[b-790f4b5wb1] {
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .article-card-featured[b-790f4b5wb1] {
        flex-direction: row;
    }

    .article-card-featured .article-card-image[b-790f4b5wb1] {
        flex: 0 0 45%;
    }

    .article-card-featured .article-card-content[b-790f4b5wb1] {
        justify-content: center;
        padding: 2rem;
    }

    .article-card-featured h2[b-790f4b5wb1] {
        font-size: 1.75rem;
    }
}

.article-card-image[b-790f4b5wb1] {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--c-bg-deep);
    overflow: hidden;
}

.article-card-image img[b-790f4b5wb1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.article-card:hover .article-card-image img[b-790f4b5wb1] {
    transform: scale(1.02);
}

.article-card-placeholder[b-790f4b5wb1] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: rgba(var(--c-gold-rgb), 0.3);
}

.article-card-content[b-790f4b5wb1] {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-card-categories[b-790f4b5wb1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.article-card-category[b-790f4b5wb1] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: rgba(var(--c-accent-rgb), 0.14);
    color: var(--c-accent-ink);
}

/* Clamped so a long title cannot make one card in a row taller than the rest. */
.article-card-content h2[b-790f4b5wb1] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
    color: var(--c-white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card-content p[b-790f4b5wb1] {
    font-size: 0.9375rem;
    color: var(--c-gold-soft);
    margin: 0 0 1rem 0;
    line-height: 1.6;
    flex: 1;
    opacity: 0.8;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card-meta[b-790f4b5wb1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(var(--c-gold-soft-rgb), 0.6);
}

.meta-separator[b-790f4b5wb1] {
    color: rgba(var(--c-gold-rgb), 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .article-card[b-790f4b5wb1],
    .article-card-image img[b-790f4b5wb1] {
        transition: none;
    }

    .article-card:hover[b-790f4b5wb1] {
        transform: none;
    }

    .article-card:hover .article-card-image img[b-790f4b5wb1] {
        transform: none;
    }

    .loading-spinner[b-790f4b5wb1] {
        animation: none;
    }
}

/* ── Pagination & feed ───────────────────────────────────────────────────── */

.blog-pagination[b-790f4b5wb1] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(var(--c-gold-rgb), 0.15);
}

.pagination-btn[b-790f4b5wb1] {
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    background: rgba(var(--c-gold-rgb), 0.1);
    border: 1px solid rgba(var(--c-gold-rgb), 0.3);
    color: var(--c-gold-soft);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.pagination-btn:hover[b-790f4b5wb1] {
    background: rgba(var(--c-gold-rgb), 0.2);
    border-color: var(--c-gold);
    color: var(--c-gold);
}

.pagination-pages[b-790f4b5wb1] {
    display: flex;
    gap: 0.25rem;
}

.pagination-page[b-790f4b5wb1] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: var(--c-gold-soft);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
}

.pagination-page:hover[b-790f4b5wb1] {
    background: rgba(var(--c-gold-rgb), 0.1);
    color: var(--c-gold);
}

.pagination-page.active[b-790f4b5wb1] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    font-weight: 600;
}

.pagination-btn:focus-visible[b-790f4b5wb1],
.pagination-page:focus-visible[b-790f4b5wb1] {
    outline: 2px solid var(--c-gold);
    outline-offset: 2px;
}

.blog-feed-link[b-790f4b5wb1] {
    text-align: center;
    margin: 2rem 0 0;
    font-size: 0.875rem;
}

.blog-feed-link a[b-790f4b5wb1] {
    color: var(--c-gold-soft);
    text-decoration: underline;
}

.blog-feed-link a:hover[b-790f4b5wb1] {
    color: var(--c-gold);
}
/* /Components/Landing/Pages/CompareBeerAdvocate.razor.rz.scp.css */
/* Comparison page styles (scoped). Kept per-page to preserve the original
   per-page <style> block behaviour - these selectors use generic names
   (.hero-content, .hero-subtitle, ...) that must not leak to other pages. */
/* ===== Variables & Base ===== */
.landing-container[b-fior2ahscs] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Hero Section ===== */
.compare-hero[b-fior2ahscs] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
}

.hero-content[b-fior2ahscs] {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.hero-text h1[b-fior2ahscs] {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--c-gold);
}

.hero-subtitle[b-fior2ahscs] {
    font-size: 1.4rem;
    color: var(--c-gold-soft);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-weight: 600;
}

.hero-description[b-fior2ahscs] {
    font-size: 1.1rem;
    color: var(--c-gold-soft);
    line-height: 1.6;
    opacity: 0.85;
}

.hero-cta[b-fior2ahscs] {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-proof-row[b-fior2ahscs] {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--c-gold-soft);
    opacity: 0.8;
    letter-spacing: 0.02em;
}

.cta-primary[b-fior2ahscs] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    padding: 16px 32px;
    border: 2px solid var(--c-gold);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.cta-primary:hover[b-fior2ahscs] {
    background: var(--c-gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.3);
    color: var(--c-bg-deep);
    text-decoration: none;
    border-color: var(--c-gold-soft);
}

/* ===== Section Headers ===== */
.section-header[b-fior2ahscs] {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2[b-fior2ahscs] {
    font-size: 2.2rem;
    color: var(--c-gold);
    margin-bottom: 0;
}

/* ===== Comparison Table ===== */
.comparison-section[b-fior2ahscs] {
    padding: 80px 0;
    background: var(--c-bg-surface);
}

.comparison-table-wrapper[b-fior2ahscs] {
    overflow-x: auto;
}

.comparison-table[b-fior2ahscs] {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-bg-deep);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.comparison-table th[b-fior2ahscs],
.comparison-table td[b-fior2ahscs] {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(var(--c-gold-rgb), 0.1);
}

.comparison-table th[b-fior2ahscs] {
    background: rgba(var(--c-gold-rgb), 0.1);
    color: var(--c-gold);
    font-weight: 600;
    font-size: 1.1rem;
}

.comparison-table td[b-fior2ahscs] {
    color: var(--c-gold-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.comparison-table tr:hover[b-fior2ahscs] {
    background: rgba(var(--c-gold-rgb), 0.05);
}

.tasteparty-col[b-fior2ahscs] {
    background: rgba(var(--c-gold-rgb), 0.03);
}

.check[b-fior2ahscs] {
    color: var(--c-green);
    font-weight: bold;
}

.cross[b-fior2ahscs] {
    color: var(--c-red);
}

.partial[b-fior2ahscs] {
    color: var(--c-amber-bright);
}

/* ===== Why Choose Section ===== */
.why-choose-section[b-fior2ahscs] {
    padding: 80px 0;
    background: var(--c-bg-deep);
}

.reasons-grid[b-fior2ahscs] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.reason-card[b-fior2ahscs] {
    background: var(--c-bg-surface);
    padding: 35px;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    transition: all 0.3s ease;
    text-align: center;
}

.reason-card:hover[b-fior2ahscs] {
    transform: translateY(-5px);
    border-color: var(--c-gold);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.15);
}

.reason-icon[b-fior2ahscs] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.reason-card h3[b-fior2ahscs] {
    color: var(--c-gold);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.reason-card p[b-fior2ahscs] {
    color: var(--c-gold-soft);
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}

/* ===== Social Proof Section ===== */
.social-proof-section[b-fior2ahscs] {
    padding: 60px 0;
    background: var(--c-bg-surface);
}

.testimonial[b-fior2ahscs] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 40px;
    background: rgba(var(--c-gold-rgb), 0.05);
    border-radius: 12px;
    border-left: 4px solid var(--c-gold);
}

.testimonial p[b-fior2ahscs] {
    color: var(--c-gold-soft);
    font-size: 1.2rem;
    line-height: 1.7;
    font-style: italic;
    margin: 0 0 1rem;
}

.testimonial cite[b-fior2ahscs] {
    color: var(--c-gold);
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 600;
}

/* ===== Both Worlds Section ===== */
.both-worlds-section[b-fior2ahscs] {
    padding: 50px 0;
    background: var(--c-bg-deep);
}

.both-worlds-content[b-fior2ahscs] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 35px;
    background: rgba(var(--c-gold-rgb), 0.05);
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.both-worlds-content h2[b-fior2ahscs] {
    color: var(--c-gold);
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.both-worlds-content p[b-fior2ahscs] {
    color: var(--c-gold-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== Final CTA Section ===== */
.final-cta-section[b-fior2ahscs] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-surface) 0%, var(--c-bg-deep) 100%);
}

.final-cta-content[b-fior2ahscs] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 40px;
    background: var(--c-bg-surface);
    border: 2px solid var(--c-gold);
    border-radius: 16px;
}

.final-cta-buttons[b-fior2ahscs] {
    margin: 0 0 1.5rem;
}

.trust-note[b-fior2ahscs] {
    color: var(--c-gold-soft);
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

/* ===== Responsive Design ===== */
@media (max-width: 900px) {
    .reasons-grid[b-fior2ahscs] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-text h1[b-fior2ahscs] {
        font-size: 2.2rem;
    }
    
    .hero-subtitle[b-fior2ahscs] {
        font-size: 1.1rem;
    }
    
    .comparison-table th[b-fior2ahscs],
    .comparison-table td[b-fior2ahscs] {
        padding: 12px 15px;
        font-size: 0.85rem;
    }
    
    .section-header h2[b-fior2ahscs] {
        font-size: 1.8rem;
    }
    
    .compare-hero[b-fior2ahscs],
    .comparison-section[b-fior2ahscs],
    .why-choose-section[b-fior2ahscs],
    .final-cta-section[b-fior2ahscs] {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .hero-text h1[b-fior2ahscs] {
        font-size: 1.8rem;
    }
    
    .cta-primary[b-fior2ahscs] {
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .hero-cta[b-fior2ahscs] {
        flex-direction: column;
    }
    
    .final-cta-content[b-fior2ahscs] {
        padding: 40px 25px;
    }
}
/* /Components/Landing/Pages/CompareCellarTracker.razor.rz.scp.css */
/* Comparison page styles (scoped). Kept per-page to preserve the original
   per-page <style> block behaviour - these selectors use generic names
   (.hero-content, .hero-subtitle, ...) that must not leak to other pages. */
/* ===== Variables & Base ===== */
.landing-container[b-fk4f7il38t] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Hero Section ===== */
.compare-hero[b-fk4f7il38t] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
}

.hero-content[b-fk4f7il38t] {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.hero-text h1[b-fk4f7il38t] {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--c-gold);
}

.hero-subtitle[b-fk4f7il38t] {
    font-size: 1.4rem;
    color: var(--c-gold-soft);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-weight: 600;
}

.hero-description[b-fk4f7il38t] {
    font-size: 1.1rem;
    color: var(--c-gold-soft);
    line-height: 1.6;
    opacity: 0.85;
}

.hero-cta[b-fk4f7il38t] {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-proof-row[b-fk4f7il38t] {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--c-gold-soft);
    opacity: 0.8;
    letter-spacing: 0.02em;
}

.cta-primary[b-fk4f7il38t] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    padding: 16px 32px;
    border: 2px solid var(--c-gold);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.cta-primary:hover[b-fk4f7il38t] {
    background: var(--c-gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.3);
    color: var(--c-bg-deep);
    text-decoration: none;
    border-color: var(--c-gold-soft);
}

/* ===== Section Headers ===== */
.section-header[b-fk4f7il38t] {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2[b-fk4f7il38t] {
    font-size: 2.2rem;
    color: var(--c-gold);
    margin-bottom: 0;
}

/* ===== Comparison Table ===== */
.comparison-section[b-fk4f7il38t] {
    padding: 80px 0;
    background: var(--c-bg-surface);
}

.comparison-table-wrapper[b-fk4f7il38t] {
    overflow-x: auto;
}

.comparison-table[b-fk4f7il38t] {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-bg-deep);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.comparison-table th[b-fk4f7il38t],
.comparison-table td[b-fk4f7il38t] {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(var(--c-gold-rgb), 0.1);
}

.comparison-table th[b-fk4f7il38t] {
    background: rgba(var(--c-gold-rgb), 0.1);
    color: var(--c-gold);
    font-weight: 600;
    font-size: 1.1rem;
}

.comparison-table td[b-fk4f7il38t] {
    color: var(--c-gold-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.comparison-table tr:hover[b-fk4f7il38t] {
    background: rgba(var(--c-gold-rgb), 0.05);
}

.tasteparty-col[b-fk4f7il38t] {
    background: rgba(var(--c-gold-rgb), 0.03);
}

.check[b-fk4f7il38t] {
    color: var(--c-green);
    font-weight: bold;
}

.cross[b-fk4f7il38t] {
    color: var(--c-red);
}

.partial[b-fk4f7il38t] {
    color: var(--c-amber-bright);
}

/* ===== Why Choose Section ===== */
.why-choose-section[b-fk4f7il38t] {
    padding: 80px 0;
    background: var(--c-bg-deep);
}

.reasons-grid[b-fk4f7il38t] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.reason-card[b-fk4f7il38t] {
    background: var(--c-bg-surface);
    padding: 35px;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    transition: all 0.3s ease;
    text-align: center;
}

.reason-card:hover[b-fk4f7il38t] {
    transform: translateY(-5px);
    border-color: var(--c-gold);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.15);
}

.reason-icon[b-fk4f7il38t] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.reason-card h3[b-fk4f7il38t] {
    color: var(--c-gold);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.reason-card p[b-fk4f7il38t] {
    color: var(--c-gold-soft);
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}

/* ===== Social Proof Section ===== */
.social-proof-section[b-fk4f7il38t] {
    padding: 60px 0;
    background: var(--c-bg-surface);
}

.testimonial[b-fk4f7il38t] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 40px;
    background: rgba(var(--c-gold-rgb), 0.05);
    border-radius: 12px;
    border-left: 4px solid var(--c-gold);
}

.testimonial p[b-fk4f7il38t] {
    color: var(--c-gold-soft);
    font-size: 1.2rem;
    line-height: 1.7;
    font-style: italic;
    margin: 0 0 1rem;
}

.testimonial cite[b-fk4f7il38t] {
    color: var(--c-gold);
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 600;
}

/* ===== Both Worlds Section ===== */
.both-worlds-section[b-fk4f7il38t] {
    padding: 50px 0;
    background: var(--c-bg-deep);
}

.both-worlds-content[b-fk4f7il38t] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 35px;
    background: rgba(var(--c-gold-rgb), 0.05);
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.both-worlds-content h2[b-fk4f7il38t] {
    color: var(--c-gold);
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.both-worlds-content p[b-fk4f7il38t] {
    color: var(--c-gold-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== Final CTA Section ===== */
.final-cta-section[b-fk4f7il38t] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-surface) 0%, var(--c-bg-deep) 100%);
}

.final-cta-content[b-fk4f7il38t] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 40px;
    background: var(--c-bg-surface);
    border: 2px solid var(--c-gold);
    border-radius: 16px;
}

.final-cta-buttons[b-fk4f7il38t] {
    margin: 0 0 1.5rem;
}

.trust-note[b-fk4f7il38t] {
    color: var(--c-gold-soft);
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

/* ===== Responsive Design ===== */
@media (max-width: 900px) {
    .reasons-grid[b-fk4f7il38t] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-text h1[b-fk4f7il38t] {
        font-size: 2.2rem;
    }
    
    .hero-subtitle[b-fk4f7il38t] {
        font-size: 1.1rem;
    }
    
    .comparison-table th[b-fk4f7il38t],
    .comparison-table td[b-fk4f7il38t] {
        padding: 12px 15px;
        font-size: 0.85rem;
    }
    
    .section-header h2[b-fk4f7il38t] {
        font-size: 1.8rem;
    }
    
    .compare-hero[b-fk4f7il38t],
    .comparison-section[b-fk4f7il38t],
    .why-choose-section[b-fk4f7il38t],
    .final-cta-section[b-fk4f7il38t] {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .hero-text h1[b-fk4f7il38t] {
        font-size: 1.8rem;
    }
    
    .cta-primary[b-fk4f7il38t] {
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .hero-cta[b-fk4f7il38t] {
        flex-direction: column;
    }
    
    .final-cta-content[b-fk4f7il38t] {
        padding: 40px 25px;
    }
}
/* /Components/Landing/Pages/CompareUntappd.razor.rz.scp.css */
/* Comparison page styles (scoped). Kept per-page to preserve the original
   per-page <style> block behaviour - these selectors use generic names
   (.hero-content, .hero-subtitle, ...) that must not leak to other pages. */
/* ===== Variables & Base ===== */
.landing-container[b-q1dou5s3vv] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Hero Section ===== */
.compare-hero[b-q1dou5s3vv] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
}

.hero-content[b-q1dou5s3vv] {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.hero-text h1[b-q1dou5s3vv] {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--c-gold);
}

.hero-subtitle[b-q1dou5s3vv] {
    font-size: 1.4rem;
    color: var(--c-gold-soft);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-weight: 600;
}

.hero-description[b-q1dou5s3vv] {
    font-size: 1.1rem;
    color: var(--c-gold-soft);
    line-height: 1.6;
    opacity: 0.85;
}

.hero-cta[b-q1dou5s3vv] {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-proof-row[b-q1dou5s3vv] {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--c-gold-soft);
    opacity: 0.8;
    letter-spacing: 0.02em;
}

.cta-primary[b-q1dou5s3vv] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    padding: 16px 32px;
    border: 2px solid var(--c-gold);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.cta-primary:hover[b-q1dou5s3vv] {
    background: var(--c-gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.3);
    color: var(--c-bg-deep);
    text-decoration: none;
    border-color: var(--c-gold-soft);
}

/* ===== Section Headers ===== */
.section-header[b-q1dou5s3vv] {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2[b-q1dou5s3vv] {
    font-size: 2.2rem;
    color: var(--c-gold);
    margin-bottom: 0;
}

/* ===== Comparison Table ===== */
.comparison-section[b-q1dou5s3vv] {
    padding: 80px 0;
    background: var(--c-bg-surface);
}

.comparison-table-wrapper[b-q1dou5s3vv] {
    overflow-x: auto;
}

.comparison-table[b-q1dou5s3vv] {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-bg-deep);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.comparison-table th[b-q1dou5s3vv],
.comparison-table td[b-q1dou5s3vv] {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(var(--c-gold-rgb), 0.1);
}

.comparison-table th[b-q1dou5s3vv] {
    background: rgba(var(--c-gold-rgb), 0.1);
    color: var(--c-gold);
    font-weight: 600;
    font-size: 1.1rem;
}

.comparison-table td[b-q1dou5s3vv] {
    color: var(--c-gold-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.comparison-table tr:hover[b-q1dou5s3vv] {
    background: rgba(var(--c-gold-rgb), 0.05);
}

.tasteparty-col[b-q1dou5s3vv] {
    background: rgba(var(--c-gold-rgb), 0.03);
}

.check[b-q1dou5s3vv] {
    color: var(--c-green);
    font-weight: bold;
}

.cross[b-q1dou5s3vv] {
    color: var(--c-red);
}

.partial[b-q1dou5s3vv] {
    color: var(--c-amber-bright);
}

/* ===== Why Choose Section ===== */
.why-choose-section[b-q1dou5s3vv] {
    padding: 80px 0;
    background: var(--c-bg-deep);
}

.reasons-grid[b-q1dou5s3vv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.reason-card[b-q1dou5s3vv] {
    background: var(--c-bg-surface);
    padding: 35px;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    transition: all 0.3s ease;
    text-align: center;
}

.reason-card:hover[b-q1dou5s3vv] {
    transform: translateY(-5px);
    border-color: var(--c-gold);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.15);
}

.reason-icon[b-q1dou5s3vv] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.reason-card h3[b-q1dou5s3vv] {
    color: var(--c-gold);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.reason-card p[b-q1dou5s3vv] {
    color: var(--c-gold-soft);
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}

/* ===== Social Proof Section ===== */
.social-proof-section[b-q1dou5s3vv] {
    padding: 60px 0;
    background: var(--c-bg-surface);
}

.testimonial[b-q1dou5s3vv] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 40px;
    background: rgba(var(--c-gold-rgb), 0.05);
    border-radius: 12px;
    border-left: 4px solid var(--c-gold);
}

.testimonial p[b-q1dou5s3vv] {
    color: var(--c-gold-soft);
    font-size: 1.2rem;
    line-height: 1.7;
    font-style: italic;
    margin: 0 0 1rem;
}

.testimonial cite[b-q1dou5s3vv] {
    color: var(--c-gold);
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 600;
}

/* ===== Both Worlds Section ===== */
.both-worlds-section[b-q1dou5s3vv] {
    padding: 50px 0;
    background: var(--c-bg-deep);
}

.both-worlds-content[b-q1dou5s3vv] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 35px;
    background: rgba(var(--c-gold-rgb), 0.05);
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.both-worlds-content h2[b-q1dou5s3vv] {
    color: var(--c-gold);
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.both-worlds-content p[b-q1dou5s3vv] {
    color: var(--c-gold-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== Final CTA Section ===== */
.final-cta-section[b-q1dou5s3vv] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-surface) 0%, var(--c-bg-deep) 100%);
}

.final-cta-content[b-q1dou5s3vv] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 40px;
    background: var(--c-bg-surface);
    border: 2px solid var(--c-gold);
    border-radius: 16px;
}

.final-cta-buttons[b-q1dou5s3vv] {
    margin: 0 0 1.5rem;
}

.trust-note[b-q1dou5s3vv] {
    color: var(--c-gold-soft);
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

/* ===== Responsive Design ===== */
@media (max-width: 900px) {
    .reasons-grid[b-q1dou5s3vv] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-text h1[b-q1dou5s3vv] {
        font-size: 2.2rem;
    }
    
    .hero-subtitle[b-q1dou5s3vv] {
        font-size: 1.1rem;
    }
    
    .comparison-table th[b-q1dou5s3vv],
    .comparison-table td[b-q1dou5s3vv] {
        padding: 12px 15px;
        font-size: 0.85rem;
    }
    
    .section-header h2[b-q1dou5s3vv] {
        font-size: 1.8rem;
    }
    
    .compare-hero[b-q1dou5s3vv],
    .comparison-section[b-q1dou5s3vv],
    .why-choose-section[b-q1dou5s3vv],
    .final-cta-section[b-q1dou5s3vv] {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .hero-text h1[b-q1dou5s3vv] {
        font-size: 1.8rem;
    }
    
    .cta-primary[b-q1dou5s3vv] {
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .hero-cta[b-q1dou5s3vv] {
        flex-direction: column;
    }
    
    .final-cta-content[b-q1dou5s3vv] {
        padding: 40px 25px;
    }
}
/* /Components/Landing/Pages/CompareVivino.razor.rz.scp.css */
/* Comparison page styles (scoped). Kept per-page to preserve the original
   per-page <style> block behaviour - these selectors use generic names
   (.hero-content, .hero-subtitle, ...) that must not leak to other pages. */
/* ===== Variables & Base ===== */
.landing-container[b-qxrmwqhmk5] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Hero Section ===== */
.compare-hero[b-qxrmwqhmk5] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
}

.hero-content[b-qxrmwqhmk5] {
    max-width: 750px;
    margin: 0 auto;
    text-align: center;
}

.hero-text h1[b-qxrmwqhmk5] {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.2;
    color: var(--c-gold);
}

.hero-subtitle[b-qxrmwqhmk5] {
    font-size: 1.4rem;
    color: var(--c-gold-soft);
    margin-bottom: 0.75rem;
    line-height: 1.5;
    font-weight: 600;
}

.hero-description[b-qxrmwqhmk5] {
    font-size: 1.1rem;
    color: var(--c-gold-soft);
    line-height: 1.6;
    opacity: 0.85;
}

.hero-cta[b-qxrmwqhmk5] {
    margin-top: 2.5rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-proof-row[b-qxrmwqhmk5] {
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--c-gold-soft);
    opacity: 0.8;
    letter-spacing: 0.02em;
}

.cta-primary[b-qxrmwqhmk5] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    padding: 16px 32px;
    border: 2px solid var(--c-gold);
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.cta-primary:hover[b-qxrmwqhmk5] {
    background: var(--c-gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.3);
    color: var(--c-bg-deep);
    text-decoration: none;
    border-color: var(--c-gold-soft);
}

/* ===== Section Headers ===== */
.section-header[b-qxrmwqhmk5] {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2[b-qxrmwqhmk5] {
    font-size: 2.2rem;
    color: var(--c-gold);
    margin-bottom: 0;
}

/* ===== Comparison Table ===== */
.comparison-section[b-qxrmwqhmk5] {
    padding: 80px 0;
    background: var(--c-bg-surface);
}

.comparison-table-wrapper[b-qxrmwqhmk5] {
    overflow-x: auto;
}

.comparison-table[b-qxrmwqhmk5] {
    width: 100%;
    border-collapse: collapse;
    background: var(--c-bg-deep);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.comparison-table th[b-qxrmwqhmk5],
.comparison-table td[b-qxrmwqhmk5] {
    padding: 18px 20px;
    text-align: left;
    border-bottom: 1px solid rgba(var(--c-gold-rgb), 0.1);
}

.comparison-table th[b-qxrmwqhmk5] {
    background: rgba(var(--c-gold-rgb), 0.1);
    color: var(--c-gold);
    font-weight: 600;
    font-size: 1.1rem;
}

.comparison-table td[b-qxrmwqhmk5] {
    color: var(--c-gold-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

.comparison-table tr:hover[b-qxrmwqhmk5] {
    background: rgba(var(--c-gold-rgb), 0.05);
}

.tasteparty-col[b-qxrmwqhmk5] {
    background: rgba(var(--c-gold-rgb), 0.03);
}

.check[b-qxrmwqhmk5] {
    color: var(--c-green);
    font-weight: bold;
}

.cross[b-qxrmwqhmk5] {
    color: var(--c-red);
}

.partial[b-qxrmwqhmk5] {
    color: var(--c-amber-bright);
}

/* ===== Why Choose Section ===== */
.why-choose-section[b-qxrmwqhmk5] {
    padding: 80px 0;
    background: var(--c-bg-deep);
}

.reasons-grid[b-qxrmwqhmk5] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.reason-card[b-qxrmwqhmk5] {
    background: var(--c-bg-surface);
    padding: 35px;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    transition: all 0.3s ease;
    text-align: center;
}

.reason-card:hover[b-qxrmwqhmk5] {
    transform: translateY(-5px);
    border-color: var(--c-gold);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.15);
}

.reason-icon[b-qxrmwqhmk5] {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.reason-card h3[b-qxrmwqhmk5] {
    color: var(--c-gold);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.reason-card p[b-qxrmwqhmk5] {
    color: var(--c-gold-soft);
    line-height: 1.7;
    font-size: 0.95rem;
    margin: 0;
}

/* ===== Social Proof Section ===== */
.social-proof-section[b-qxrmwqhmk5] {
    padding: 60px 0;
    background: var(--c-bg-surface);
}

.testimonial[b-qxrmwqhmk5] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 40px;
    background: rgba(var(--c-gold-rgb), 0.05);
    border-radius: 12px;
    border-left: 4px solid var(--c-gold);
}

.testimonial p[b-qxrmwqhmk5] {
    color: var(--c-gold-soft);
    font-size: 1.2rem;
    line-height: 1.7;
    font-style: italic;
    margin: 0 0 1rem;
}

.testimonial cite[b-qxrmwqhmk5] {
    color: var(--c-gold);
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 600;
}

/* ===== Both Worlds Section ===== */
.both-worlds-section[b-qxrmwqhmk5] {
    padding: 50px 0;
    background: var(--c-bg-deep);
}

.both-worlds-content[b-qxrmwqhmk5] {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    padding: 35px;
    background: rgba(var(--c-gold-rgb), 0.05);
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
}

.both-worlds-content h2[b-qxrmwqhmk5] {
    color: var(--c-gold);
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.both-worlds-content p[b-qxrmwqhmk5] {
    color: var(--c-gold-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* ===== Final CTA Section ===== */
.final-cta-section[b-qxrmwqhmk5] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-surface) 0%, var(--c-bg-deep) 100%);
}

.final-cta-content[b-qxrmwqhmk5] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 50px 40px;
    background: var(--c-bg-surface);
    border: 2px solid var(--c-gold);
    border-radius: 16px;
}

.final-cta-buttons[b-qxrmwqhmk5] {
    margin: 0 0 1.5rem;
}

.trust-note[b-qxrmwqhmk5] {
    color: var(--c-gold-soft);
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

/* ===== Responsive Design ===== */
@media (max-width: 900px) {
    .reasons-grid[b-qxrmwqhmk5] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .hero-text h1[b-qxrmwqhmk5] {
        font-size: 2.2rem;
    }
    
    .hero-subtitle[b-qxrmwqhmk5] {
        font-size: 1.1rem;
    }
    
    .comparison-table th[b-qxrmwqhmk5],
    .comparison-table td[b-qxrmwqhmk5] {
        padding: 12px 15px;
        font-size: 0.85rem;
    }
    
    .section-header h2[b-qxrmwqhmk5] {
        font-size: 1.8rem;
    }
    
    .compare-hero[b-qxrmwqhmk5],
    .comparison-section[b-qxrmwqhmk5],
    .why-choose-section[b-qxrmwqhmk5],
    .final-cta-section[b-qxrmwqhmk5] {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .hero-text h1[b-qxrmwqhmk5] {
        font-size: 1.8rem;
    }
    
    .cta-primary[b-qxrmwqhmk5] {
        display: block;
        width: 100%;
        text-align: center;
    }
    
    .hero-cta[b-qxrmwqhmk5] {
        flex-direction: column;
    }
    
    .final-cta-content[b-qxrmwqhmk5] {
        padding: 40px 25px;
    }
}
/* /Components/Landing/Pages/Contact.razor.rz.scp.css */
/* Contact Support Button */
.contact-support-button[b-rkn05qtsjl] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    text-decoration: none;
    display: inline-block;
    padding: 16px 32px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.contact-support-button:hover[b-rkn05qtsjl] {
    background: var(--c-gold-soft);
    text-decoration: none;
}

/* FAQ Card Styles */
.faq-card[b-rkn05qtsjl] {
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    cursor: pointer;
}

.faq-card:hover[b-rkn05qtsjl] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.2) !important;
    border-color: var(--c-gold) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Make the two-column grid stack on mobile */
    .contact-layout[b-rkn05qtsjl] {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    
    /* Adjust padding on smaller screens */
    .contact-surface-3[b-rkn05qtsjl] {
        padding: 60px 0 !important;
    }
    
    /* Reduce FAQ grid minmax for better mobile layout */
    .contact-layout-4[b-rkn05qtsjl] {
        grid-template-columns: 1fr !important;
    }
}
/* /Components/Landing/Pages/NotFoundPage.razor.rz.scp.css */
.not-found-section[b-f39cxlkgp4] {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: linear-gradient(180deg, var(--c-bg-deep) 0%, var(--c-bg-surface-alt) 100%);
}

.not-found-content[b-f39cxlkgp4] {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.not-found-icon[b-f39cxlkgp4] {
    font-size: 6rem;
    margin-bottom: 1rem;
    animation: float-b-f39cxlkgp4 3s ease-in-out infinite;
}

@keyframes float-b-f39cxlkgp4 {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
}

.not-found-title[b-f39cxlkgp4] {
    font-size: 8rem;
    font-weight: 800;
    color: var(--c-gold);
    margin: 0;
    line-height: 1;
    text-shadow: 0 4px 20px rgba(var(--c-gold-rgb), 0.3);
}

.not-found-subtitle[b-f39cxlkgp4] {
    font-size: 2rem;
    color: var(--c-gold-soft);
    margin: 1rem 0 1.5rem;
    font-weight: 600;
}

.not-found-message[b-f39cxlkgp4] {
    font-size: 1.25rem;
    color: rgba(var(--c-white-rgb), 0.8);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.not-found-suggestion[b-f39cxlkgp4] {
    font-size: 1.1rem;
    color: rgba(var(--c-gold-rgb), 0.7);
    font-style: italic;
    margin-bottom: 2.5rem;
}

.not-found-cta[b-f39cxlkgp4] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.not-found-cta .cta-primary[b-f39cxlkgp4] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.not-found-cta .cta-primary:hover[b-f39cxlkgp4] {
    background: var(--c-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.4);
}

.not-found-cta .cta-secondary[b-f39cxlkgp4] {
    background: transparent;
    color: var(--c-gold);
    padding: 14px 32px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border: 2px solid var(--c-gold);
    transition: all 0.3s ease;
    display: inline-block;
}

.not-found-cta .cta-secondary:hover[b-f39cxlkgp4] {
    background: rgba(var(--c-gold-rgb), 0.1);
    transform: translateY(-2px);
}

.not-found-fun-fact[b-f39cxlkgp4] {
    background: rgba(var(--c-gold-rgb), 0.1);
    border: 1px solid rgba(var(--c-gold-rgb), 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    color: rgba(var(--c-white-rgb), 0.9);
    font-size: 0.95rem;
    line-height: 1.6;
}

.not-found-fun-fact strong[b-f39cxlkgp4] {
    color: var(--c-gold);
}

@media (max-width: 768px) {
    .not-found-title[b-f39cxlkgp4] {
        font-size: 5rem;
    }

    .not-found-subtitle[b-f39cxlkgp4] {
        font-size: 1.5rem;
    }

    .not-found-icon[b-f39cxlkgp4] {
        font-size: 4rem;
    }

    .not-found-message[b-f39cxlkgp4] {
        font-size: 1.1rem;
    }

    .not-found-cta[b-f39cxlkgp4] {
        flex-direction: column;
        align-items: center;
    }

    .not-found-cta .cta-primary[b-f39cxlkgp4],
    .not-found-cta .cta-secondary[b-f39cxlkgp4] {
        width: 100%;
        max-width: 250px;
    }
}
/* /Components/Landing/Pages/Pricing.razor.rz.scp.css */
.lh-stage .lh-faq-item p a[b-ip627akke0] {
    color: var(--tp-gold);
    font-weight: 700;
}

/* Pricing page has no hero grid above it, so its top section doubles as the
   page's "star of the show" heading block - give it a touch more breathing
   room than a mid-page section gets. */
.lh-stage .lh-pricing-hero[b-ip627akke0] {
    padding-top: clamp(96px, 12vw, 148px);
}

@media (max-width: 768px) {
    .lh-stage .lh-pricing-hero[b-ip627akke0] {
        padding-top: clamp(56px, 14vw, 96px);
    }
}
/* /Components/Landing/Pages/Privacy.razor.rz.scp.css */
/* Legal Page Styling */
/* Note: width/padding intentionally come from the shared .landing-container rule
   in landing.css so legal pages match the rest of the landing shell. */
.landing-container[b-91zssh6tzp] {
    line-height: 1.6;
}

.landing-container main[b-91zssh6tzp] {
    background: var(--c-bg-deep);
    padding: 3rem;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    box-shadow: 0 4px 20px rgba(var(--c-black-rgb), 0.3);
    margin: 2rem 0;
}

.landing-container h1[b-91zssh6tzp] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--c-gold);
    margin-bottom: 0.5rem;
    border-bottom: 3px solid var(--c-gold);
    padding-bottom: 1rem;
}

.landing-container h2[b-91zssh6tzp] {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--c-gold);
    margin: 2.5rem 0 1rem 0;
    padding-top: 1rem;
}

.landing-container h3[b-91zssh6tzp] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--c-gold-soft);
    margin: 1.5rem 0 0.8rem 0;
}

.landing-container p[b-91zssh6tzp] {
    margin-bottom: 1rem;
    color: var(--c-gold-soft);
    font-size: 1rem;
}

.landing-container main ul[b-91zssh6tzp] {
    margin: 1rem 0 1.5rem 0;
    padding-left: 0;
    list-style: none;
}

.landing-container main ul li[b-91zssh6tzp] {
    position: relative;
    padding: 0.5rem 0 0.5rem 2rem;
    color: var(--c-gold-soft);
    border-left: 2px solid rgba(var(--c-gold-rgb), 0.2);
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}

.landing-container main ul li[b-91zssh6tzp]:before {
    content: "•";
    position: absolute;
    left: -0.5rem;
    color: var(--c-gold);
    font-weight: bold;
    font-size: 1.2rem;
    background: var(--c-bg-deep);
    padding: 0 0.25rem;
}

.landing-container strong[b-91zssh6tzp] {
    color: var(--c-gold);
    font-weight: 600;
}

.landing-container a[b-91zssh6tzp] {
    color: var(--c-gold);
    text-decoration: none;
    font-weight: 500;
}

.landing-container a:hover[b-91zssh6tzp] {
    text-decoration: underline;
    color: var(--c-gold-soft);
}

.landing-container em[b-91zssh6tzp] {
    color: rgba(var(--c-gold-soft-rgb), 0.7);
    font-style: italic;
}

/* Contact info styling */
.landing-container p:has(> strong:first-child)[b-91zssh6tzp] {
    background: var(--c-bg-surface);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--c-gold);
    margin: 1.5rem 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .landing-container[b-91zssh6tzp] {
        padding: 10px;
    }
    
    .landing-container main[b-91zssh6tzp] {
        padding: 1.5rem;
        margin: 1rem 0;
    }
    
    .landing-container h1[b-91zssh6tzp] {
        font-size: 2rem;
    }
    
    .landing-container h2[b-91zssh6tzp] {
        font-size: 1.5rem;
    }
    
    .landing-container ul li[b-91zssh6tzp] {
        padding-left: 1.5rem;
        margin-left: 0.5rem;
    }
}
/* /Components/Landing/Pages/Terms.razor.rz.scp.css */
/* Legal Page Styling */
/* Note: width/padding intentionally come from the shared .landing-container rule
   in landing.css so legal pages match the rest of the landing shell. */
.landing-container[b-bpraa2mw8w] {
    line-height: 1.6;
}

.landing-container main[b-bpraa2mw8w] {
    background: var(--c-bg-deep);
    padding: 3rem;
    border-radius: 12px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    box-shadow: 0 4px 20px rgba(var(--c-black-rgb), 0.3);
    margin: 2rem 0;
}

.landing-container h1[b-bpraa2mw8w] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--c-gold);
    margin-bottom: 0.5rem;
    border-bottom: 3px solid var(--c-gold);
    padding-bottom: 1rem;
}

.landing-container h2[b-bpraa2mw8w] {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--c-gold);
    margin: 2.5rem 0 1rem 0;
    padding-top: 1rem;
}

.landing-container h3[b-bpraa2mw8w] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--c-gold-soft);
    margin: 1.5rem 0 0.8rem 0;
}

.landing-container p[b-bpraa2mw8w] {
    margin-bottom: 1rem;
    color: var(--c-gold-soft);
    font-size: 1rem;
}

.landing-container main ul[b-bpraa2mw8w] {
    margin: 1rem 0 1.5rem 0;
    padding-left: 0;
    list-style: none;
}

.landing-container main ul li[b-bpraa2mw8w] {
    position: relative;
    padding: 0.5rem 0 0.5rem 2rem;
    color: var(--c-gold-soft);
    border-left: 2px solid rgba(var(--c-gold-rgb), 0.2);
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}

.landing-container main ul li[b-bpraa2mw8w]:before {
    content: "•";
    position: absolute;
    left: -0.5rem;
    color: var(--c-gold);
    font-weight: bold;
    font-size: 1.2rem;
    background: var(--c-bg-deep);
    padding: 0 0.25rem;
}

.landing-container strong[b-bpraa2mw8w] {
    color: var(--c-gold);
    font-weight: 600;
}

.landing-container a[b-bpraa2mw8w] {
    color: var(--c-gold);
    text-decoration: none;
    font-weight: 500;
}

.landing-container a:hover[b-bpraa2mw8w] {
    text-decoration: underline;
    color: var(--c-gold-soft);
}

.landing-container em[b-bpraa2mw8w] {
    color: rgba(var(--c-gold-soft-rgb), 0.7);
    font-style: italic;
}

/* Contact info styling */
.landing-container p:has(> strong:first-child)[b-bpraa2mw8w] {
    background: var(--c-bg-surface);
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid var(--c-gold);
    margin: 1.5rem 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .landing-container[b-bpraa2mw8w] {
        padding: 10px;
    }
    
    .landing-container main[b-bpraa2mw8w] {
        padding: 1.5rem;
        margin: 1rem 0;
    }
    
    .landing-container h1[b-bpraa2mw8w] {
        font-size: 2rem;
    }
    
    .landing-container h2[b-bpraa2mw8w] {
        font-size: 1.5rem;
    }
    
    .landing-container ul li[b-bpraa2mw8w] {
        padding-left: 1.5rem;
        margin-left: 0.5rem;
    }
}
/* /Components/Landing/Pages/WhiskyLandingA.razor.rz.scp.css */
/* Hero Section */
.landing-hero[b-3l4jefmsym] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
}

.landing-container[b-3l4jefmsym] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* No whisky hero photo yet, so the hero is a single centred column. */
.whisky-landing-a-hero[b-3l4jefmsym] {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.hero-text h1[b-3l4jefmsym] {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--c-gold);
}

.subtitle[b-3l4jefmsym] {
    font-size: 1.3rem;
    color: var(--c-gold-soft);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.benefits[b-3l4jefmsym] {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.whisky-landing-a-benefits[b-3l4jefmsym] {
    display: inline-block;
    text-align: left;
}

.benefits li[b-3l4jefmsym] {
    padding: 0.5rem 0;
    color: var(--c-gold-soft);
    position: relative;
    padding-left: 1.5rem;
}

.benefits li[b-3l4jefmsym]:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-gold);
    font-weight: bold;
}

.cta-section[b-3l4jefmsym] {
    margin-top: 3rem;
}

.cta-primary[b-3l4jefmsym] {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 1rem;
    background: var(--c-gold);
    color: var(--c-bg-deep);
}

.cta-primary:hover[b-3l4jefmsym] {
    color: var(--c-bg-deep);
    text-decoration: none;
    background: var(--c-gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.3);
}

.trust-signals[b-3l4jefmsym] {
    margin-top: 2rem;
    color: var(--c-gold-soft);
    font-size: 0.9rem;
}

/* Features Section */
.features-section[b-3l4jefmsym] {
    padding: 100px 0;
    background: var(--c-bg-surface);
}

.features-grid[b-3l4jefmsym] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.feature-card[b-3l4jefmsym] {
    text-align: center;
    padding: 40px 30px;
    border-radius: 12px;
    background: var(--c-bg-deep);
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover[b-3l4jefmsym] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.2);
    border-color: var(--c-gold);
}

.feature-icon[b-3l4jefmsym] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3[b-3l4jefmsym] {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--c-gold);
}

.feature-card p[b-3l4jefmsym] {
    color: var(--c-gold-soft);
    line-height: 1.6;
}

/* FAQ */
.faq-card[b-3l4jefmsym] {
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.faq-card:hover[b-3l4jefmsym] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.2);
    border-color: var(--c-gold);
}

/* Utility classes, mirroring the beer and wine landing pages */
.whisky-landing-a-size-2[b-3l4jefmsym] {
    font-size: 1.2rem;
    color: var(--c-gold-soft);
    max-width: 600px;
    margin: 0 auto;
}

.whisky-landing-a-size-3[b-3l4jefmsym] {
    max-width: 800px;
    margin: 0 auto;
}

.whisky-landing-a-spacing[b-3l4jefmsym] {
    margin-top: 80px;
}

.whisky-landing-a-surface[b-3l4jefmsym] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    text-decoration: none;
    display: inline-block;
}

.whisky-landing-a-surface-2[b-3l4jefmsym] {
    text-align: center;
    margin-top: 80px;
    padding: 60px 40px;
    background: var(--c-bg-deep);
    border: 2px solid var(--c-gold);
    border-radius: 12px;
    color: white;
}

.whisky-landing-a-surface-3[b-3l4jefmsym] {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--c-bg-deep);
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(var(--c-black-rgb), 0.3);
}

.whisky-landing-a-text[b-3l4jefmsym] {
    margin-bottom: 1rem;
    color: var(--c-gold);
}

.whisky-landing-a-text-2[b-3l4jefmsym] {
    text-align: center;
    margin-bottom: 60px;
}

.whisky-landing-a-text-3[b-3l4jefmsym] {
    font-size: 2.5rem;
    color: var(--c-gold);
    margin-bottom: 1rem;
}

.whisky-landing-a-text-4[b-3l4jefmsym] {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--c-gold);
}

.whisky-landing-a-text-5[b-3l4jefmsym] {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    color: var(--c-gold-soft);
}

.whisky-landing-a-text-5 a[b-3l4jefmsym] {
    color: var(--c-gold);
}

.whisky-landing-a-text-6[b-3l4jefmsym] {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
    color: var(--c-gold);
}

.whisky-landing-a-text-7[b-3l4jefmsym] {
    color: var(--c-gold);
    margin-bottom: 0.5rem;
}

.whisky-landing-a-text-8[b-3l4jefmsym] {
    color: var(--c-gold-soft);
    margin: 0;
}

.whisky-landing-a-text-8 a[b-3l4jefmsym] {
    color: var(--c-gold);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-text h1[b-3l4jefmsym] {
        font-size: 2.5rem;
    }

    .features-grid[b-3l4jefmsym] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .landing-hero[b-3l4jefmsym] {
        padding: 60px 0;
    }

    .features-section[b-3l4jefmsym] {
        padding: 80px 0;
    }
}
/* /Components/Landing/Pages/WineLandingA.razor.rz.scp.css */
/* Hero Section */
.landing-hero[b-4ml5frsfus] {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--c-bg-deep) 0%, var(--c-bg-surface) 100%);
}

.landing-container[b-4ml5frsfus] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.landing-content[b-4ml5frsfus] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero-text h1[b-4ml5frsfus] {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--c-gold);
}

.subtitle[b-4ml5frsfus] {
    font-size: 1.3rem;
    color: var(--c-gold-soft);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.benefits[b-4ml5frsfus] {
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.benefits li[b-4ml5frsfus] {
    padding: 0.5rem 0;
    color: var(--c-gold-soft);
    position: relative;
    padding-left: 1.5rem;
}

.benefits li[b-4ml5frsfus]:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-gold);
    font-weight: bold;
}

.cta-section[b-4ml5frsfus] {
    margin-top: 3rem;
}

.cta-primary[b-4ml5frsfus], .cta-secondary[b-4ml5frsfus] {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.cta-primary[b-4ml5frsfus] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
}

.cta-primary:hover[b-4ml5frsfus] {
    color: var(--c-bg-deep);
    text-decoration: none;
    background: var(--c-gold-soft);
}

.cta-secondary[b-4ml5frsfus] {
    background: transparent;
    color: var(--c-gold);
    border: 2px solid var(--c-gold);
}

.cta-primary:hover[b-4ml5frsfus], .cta-secondary:hover[b-4ml5frsfus] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.3);
}

.trust-signals[b-4ml5frsfus] {
    margin-top: 2rem;
    color: var(--c-gold-soft);
    font-size: 0.9rem;
}

/* Features Section */
.features-section[b-4ml5frsfus] {
    padding: 100px 0;
    background: var(--c-bg-surface);
}

.features-grid[b-4ml5frsfus] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    margin-top: 60px;
}

.feature-card[b-4ml5frsfus] {
    text-align: center;
    padding: 40px 30px;
    border-radius: 12px;
    background: var(--c-bg-deep);
    border: 1px solid rgba(var(--c-gold-rgb), 0.2);
    transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover[b-4ml5frsfus] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.2);
    border-color: var(--c-gold);
}

.feature-icon[b-4ml5frsfus] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3[b-4ml5frsfus] {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--c-gold);
}

.feature-card p[b-4ml5frsfus] {
    color: var(--c-gold-soft);
    line-height: 1.6;
}

/* FAQ Card Styles */
.faq-card[b-4ml5frsfus] {
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
    cursor: pointer;
}

.faq-card:hover[b-4ml5frsfus] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(var(--c-gold-rgb), 0.2) !important;
    border-color: var(--c-gold) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .landing-content[b-4ml5frsfus] {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    
    .hero-text h1[b-4ml5frsfus] {
        font-size: 2.5rem;
    }
    
    .features-grid[b-4ml5frsfus] {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .landing-hero[b-4ml5frsfus] {
        padding: 60px 0;
    }
    
    .features-section[b-4ml5frsfus] {
        padding: 80px 0;
    }
}
/* /Components/Landing/PricingPlans.razor.rz.scp.css */
.pricing-toggle-wrap[b-moya638sbb] {
    text-align: center;
    margin-bottom: 60px;
}

.pricing-cards-container[b-moya638sbb] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0 auto 40px;
    max-width: 1280px;
    align-items: stretch;
}

@media (max-width: 1100px) {
    .pricing-cards-container[b-moya638sbb] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 720px;
    }
}

@media (max-width: 600px) {
    .pricing-cards-container[b-moya638sbb] {
        grid-template-columns: 1fr;
        max-width: 360px;
    }
}

.pricing-toggle-group[b-moya638sbb] {
    display: inline-flex;
    background: var(--c-bg-deep);
    border: 1px solid rgba(var(--c-gold-rgb), 0.3);
    border-radius: 50px;
    padding: 4px;
}

.pricing-toggle-save[b-moya638sbb] {
    background: var(--c-sage);
    color: var(--c-bg-deep);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 6px;
}

.pricing-card[b-moya638sbb] {
    background: var(--c-bg-deep);
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(var(--c-black-rgb), 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border: 2px solid rgba(var(--c-gold-rgb), 0.2);
    min-height: 600px;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover[b-moya638sbb] {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(var(--c-gold-rgb), 0.2);
    border-color: var(--c-gold);
}

.pricing-card-featured[b-moya638sbb] {
    border-color: var(--c-gold);
    border-width: 3px;
    box-shadow: 0 5px 30px rgba(var(--c-gold-rgb), 0.25);
}

.pricing-card-featured:hover[b-moya638sbb] {
    transform: translateY(-5px);
}

.pricing-card-content[b-moya638sbb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: center;
    padding: 36px 24px;
}

.pricing-card-header[b-moya638sbb] {
    flex-shrink: 0;
}

.pp-title[b-moya638sbb] {
    font-size: 1.5rem;
    color: var(--c-gold);
    margin: 0 0 1rem;
    min-height: 2.25rem;
    line-height: 2.25rem;
}

.pp-price[b-moya638sbb] {
    margin: 0 0 1.5rem;
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pp-price-amount[b-moya638sbb] {
    font-size: 3rem;
    font-weight: bold;
    color: var(--c-gold);
    line-height: 1;
}

.pp-price-period[b-moya638sbb] {
    color: var(--c-gold-soft);
    font-size: 1rem;
}

.pp-price-custom[b-moya638sbb] {
    font-size: 1.6rem;
    font-weight: bold;
    color: var(--c-gold);
    white-space: nowrap;
}

.pp-tagline[b-moya638sbb] {
    color: var(--c-gold-soft);
    margin: 0 0 0.5rem;
    min-height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pricing-card-features[b-moya638sbb] {
    flex-grow: 1;
    margin: 2rem 0;
}

.pricing-card-button[b-moya638sbb] {
    flex-shrink: 0;
    margin-top: auto;
}

.featured-badge[b-moya638sbb] {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-gold);
    color: var(--c-bg-deep);
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
}

.pricing-toggle-btn[b-moya638sbb] {
    padding: 12px 24px;
    border: none;
    background: transparent;
    color: var(--c-gold-soft);
    font-weight: 500;
    border-radius: 46px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.pricing-toggle-btn.is-active[b-moya638sbb] {
    background: var(--c-gold);
    color: var(--c-bg-deep);
    font-weight: 600;
    box-shadow: 0 2px 10px rgba(var(--c-gold-rgb), 0.3);
}

.price-monthly[b-moya638sbb],
.price-annual[b-moya638sbb] {
    display: none;
}

.pricing-cards-container[data-billing="monthly"] .price-monthly[b-moya638sbb],
.pricing-cards-container[data-billing="annual"] .price-annual[b-moya638sbb] {
    display: inline;
}

.get-started-button[b-moya638sbb] {
    display: inline-block;
    width: 100%;
    padding: 16px 32px;
    background: var(--c-gold);
    color: var(--c-bg-deep);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(var(--c-gold-rgb), 0.3);
}

.get-started-button:hover[b-moya638sbb] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--c-gold-rgb), 0.4);
    text-decoration: none;
    color: var(--c-bg-deep);
    background: var(--c-gold-soft);
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout Mobile Responsive Styles */
/* Note: MudBlazor component overrides are in wwwroot/app.css (global CSS)
   because scoped CSS cannot effectively target MudBlazor's dynamically rendered elements */

/* Desktop: show drawer and hamburger menu */
.desktop-drawer[b-fr7alhf2i8] {
    display: block;
}

.desktop-menu-toggle[b-fr7alhf2i8] {
    display: flex;
}
/* /Components/Layout/MobileBottomNav.razor.rz.scp.css */
/* Mobile Bottom Navigation - YouTube Style */

.mobile-bottom-nav[b-dzryu3bxfl] {
    display: none; /* Hidden by default on desktop */
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    min-height: calc(64px + env(safe-area-inset-bottom, 0px));
    background: var(--c-bg-deep);
    border-top: 1px solid rgba(var(--c-gold-rgb), 0.2);
    box-shadow: 0 -2px 10px rgba(var(--c-black-rgb), 0.3);
    z-index: 1100;
    justify-content: space-around;
    align-items: center;
    padding: 0 8px;
    padding-bottom: env(safe-area-inset-bottom, 0px); /* Support for iOS notch */
    flex-shrink: 0; /* Don't shrink the nav */
}

.mobile-bottom-nav.hidden[b-dzryu3bxfl] {
    display: none !important;
}

.bottom-nav-item[b-dzryu3bxfl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    max-width: 80px;
    height: 100%;
    text-decoration: none;
    color: var(--c-gold-soft);
    font-size: 0.7rem;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 8px 4px;
    border-radius: 8px;
    gap: 2px;
    background: none;
    border: none;
    cursor: pointer;
}

.bottom-nav-item:hover[b-dzryu3bxfl] {
    background: rgba(var(--c-gold-rgb), 0.1);
    color: var(--c-gold);
}

.bottom-nav-item.active[b-dzryu3bxfl] {
    color: var(--c-gold);
}

.bottom-nav-item.active[b-dzryu3bxfl]  .mud-icon-root {
    color: var(--c-gold);
}

.bottom-nav-item[b-dzryu3bxfl]  .mud-icon-root {
    color: inherit;
    font-size: 1.5rem;
}

.bottom-nav-item span[b-dzryu3bxfl] {
    margin-top: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

/* Admin Menu Overlay 
   Note: Using z-index values below MudBlazor's dialog/overlay range (1400+)
   so MudDialogs and MudMenus properly appear above the admin menu */
.admin-menu-overlay[b-dzryu3bxfl] {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--c-black-rgb), 0.5);
    z-index: 1150;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.admin-menu-overlay.visible[b-dzryu3bxfl] {
    display: block;
    opacity: 1;
}

/* Admin Menu Panel - Slide up from bottom
   z-index 1200 is above bottom nav (1100) but below MudBlazor overlays (1400+) */
.admin-menu-panel[b-dzryu3bxfl] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--c-bg-surface);
    border-top: 1px solid rgba(var(--c-gold-rgb), 0.3);
    border-radius: 16px 16px 0 0;
    z-index: 1200;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    max-height: 70vh;
    overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

.admin-menu-panel.visible[b-dzryu3bxfl] {
    display: block;
    transform: translateY(0);
}

.admin-menu-header[b-dzryu3bxfl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(var(--c-gold-rgb), 0.2);
    color: var(--c-gold);
    font-weight: 600;
    font-size: 1.1rem;
    position: sticky;
    top: 0;
    background: var(--c-bg-surface);
}

.admin-menu-header[b-dzryu3bxfl]  .mud-icon-button {
    color: var(--c-gold-soft);
}

.admin-menu-items[b-dzryu3bxfl] {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.admin-menu-item[b-dzryu3bxfl] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    color: var(--c-gold-soft);
    text-decoration: none;
    transition: background 0.2s ease;
}

.admin-menu-item:hover[b-dzryu3bxfl],
.admin-menu-item:active[b-dzryu3bxfl] {
    background: rgba(var(--c-gold-rgb), 0.1);
    color: var(--c-gold);
}

.admin-menu-item[b-dzryu3bxfl]  .mud-icon-root {
    color: var(--c-gold);
    font-size: 1.25rem;
}

.admin-menu-item span[b-dzryu3bxfl] {
    font-size: 0.95rem;
}

/* Show bottom nav only on mobile/tablet */
@media (max-width: 960px) {
    .mobile-bottom-nav[b-dzryu3bxfl] {
        display: flex;
    }
    
    .admin-menu-panel[b-dzryu3bxfl] {
        display: block;
    }
}

/* Extra small screens - slightly smaller text */
@media (max-width: 400px) {
    .bottom-nav-item[b-dzryu3bxfl] {
        font-size: 0.65rem;
    }
    
    .bottom-nav-item[b-dzryu3bxfl]  .mud-icon-root {
        font-size: 1.3rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.bi[b-0cpqyuw8ug] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -0.75rem;
    background-size: cover;
    font-size: large;
}

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

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

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

    .nav-item[b-0cpqyuw8ug]  .nav-link {
        color: var(--c-grey-300);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-0cpqyuw8ug]  a.active {
    background-color: rgba(var(--c-white-rgb), 0.37);
    color: white;
}

.nav-item[b-0cpqyuw8ug]  .nav-link:hover {
    background-color: rgba(var(--c-white-rgb), 0.1);
    color: white;
}

/* /Components/Pages/DiscoverShowcase.razor.rz.scp.css */
.discover-alt-container .hero-panel[b-2gt7ln0y56] {
    background: linear-gradient(135deg, rgba(var(--c-bg-deep-rgb), 0.95), rgba(var(--c-bg-plum-rgb), 0.9));
    border-radius: 24px;
    color: var(--c-white);
}

.detail-list .mud-list-item[b-2gt7ln0y56] {
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    background-color: rgba(var(--c-white-rgb), 0.04);
}
/* /Components/Pages/Edit.razor.rz.scp.css */
.edit-stage[b-8kgbsgszgj] {
    position: relative;
    min-height: 100vh;
    overflow-x: clip;
    overflow-y: visible;
    background: var(--c-bg-abyss);
    color: var(--c-gold-soft);
}

.edit-stage__ambient[b-8kgbsgszgj] {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 45%, rgba(var(--c-gold-rgb), 0.10) 0%, rgba(var(--c-gold-rgb), 0.04) 30%, rgba(var(--c-gold-rgb), 0.01) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 25%, rgba(var(--c-violet-rgb), 0.16) 0%, rgba(var(--c-violet-rgb), 0.07) 35%, rgba(var(--c-violet-rgb), 0.018) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 110%, rgba(var(--c-parchment-rgb), 0.055) 0%, rgba(var(--c-parchment-rgb), 0.018) 50%, transparent 100%);
    animation: editAmbientDrift-b-8kgbsgszgj 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

.edit-stage__noise[b-8kgbsgszgj] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.032;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.edit-stage__vignette[b-8kgbsgszgj] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(var(--c-black-rgb), 0.50) 100%);
}

[b-8kgbsgszgj] .edit-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1720px;
    padding: clamp(24px, 3vw, 40px) clamp(16px, 3.2vw, 40px) clamp(40px, 5vw, 64px);
}

.edit-state-card[b-8kgbsgszgj] {
    position: relative;
    z-index: 1;
    width: min(92vw, 520px);
    margin: 15vh auto;
    padding: 28px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    color: rgba(var(--c-gold-soft-rgb), 0.85);
    text-align: center;
    box-shadow: 0 30px 60px -20px rgba(var(--c-black-rgb), 0.6), inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

.edit-hero[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(300px, 0.82fr);
    align-items: end;
    gap: clamp(20px, 3vw, 40px);
    margin-bottom: clamp(20px, 3vh, 32px);
}

.edit-hero__copy[b-8kgbsgszgj] {
    min-width: 0;
}

[b-8kgbsgszgj] .edit-eyebrow {
    display: block;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

[b-8kgbsgszgj] .edit-title {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.2rem, 4.4vw, 3.8rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.98;
    margin: 0;
    overflow-wrap: anywhere;
    text-shadow: 0 0 26px rgba(var(--c-gold-rgb), 0.12), 0 8px 20px rgba(var(--c-black-rgb), 0.38);
}

.edit-title-accent[b-8kgbsgszgj] {
    width: 64px;
    height: 4px;
    margin: 18px 0 16px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

[b-8kgbsgszgj] .edit-lede {
    max-width: 64ch;
    color: rgba(var(--c-stone-rgb), 0.85);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: clamp(0.98rem, 1.12vw, 1.18rem);
    font-weight: 300;
    line-height: 1.55;
}

[b-8kgbsgszgj] .edit-upload-modal {
    position: relative;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 20px 48px -28px rgba(var(--c-black-rgb), 0.64),
        0 0 34px rgba(var(--c-gold-rgb), 0.03),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

.edit-workbench[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(22px, 3vw, 36px);
}

.edit-main-panel[b-8kgbsgszgj] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.echo-halo[b-8kgbsgszgj] {
    position: absolute;
    inset: -70% -80% -70% -80%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.08) 0%, rgba(var(--c-gold-rgb), 0.035) 25%, rgba(var(--c-gold-rgb), 0.01) 55%, transparent 100%);
    filter: blur(28px);
}

.edit-compact-row[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: clamp(14px, 2vw, 20px);
}

.edit-compact-panel[b-8kgbsgszgj] {
    min-width: 0;
}

.edit-options-panel[b-8kgbsgszgj] {
    position: relative;
    display: grid;
    gap: 16px;
    margin-top: 0;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.13);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(var(--c-violet-rgb), 0.12), rgba(var(--c-white-rgb), 0.018)),
        rgba(var(--c-bg-abyss-rgb), 0.32);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.055);
    padding: clamp(14px, 2vw, 18px);
}

.edit-options-panel--expanded[b-8kgbsgszgj] {
    border-color: rgba(var(--c-gold-rgb), 0.18);
    background:
        linear-gradient(135deg, rgba(var(--c-violet-rgb), 0.14), rgba(var(--c-gold-rgb), 0.025)),
        rgba(var(--c-bg-abyss-rgb), 0.38);
}

.edit-options-panel__summary[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.edit-options-panel__icon[b-8kgbsgszgj] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.18);
    border-radius: 12px;
    background: rgba(var(--c-gold-rgb), 0.065);
    color: rgba(var(--c-gold-light-rgb), 0.88);
}

.edit-options-panel__copy[b-8kgbsgszgj] {
    min-width: 0;
}

.edit-options-panel__eyebrow[b-8kgbsgszgj] {
    display: block;
    color: rgba(var(--c-gold-soft-rgb), 0.54);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.edit-options-panel__summary-line[b-8kgbsgszgj] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-top: 4px;
}

.edit-options-panel__summary-line strong[b-8kgbsgszgj] {
    color: rgba(var(--c-gold-light-rgb), 0.94);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.12rem, 1.8vw, 1.42rem);
    font-weight: 900;
    line-height: 1;
}

.edit-options-panel__summary-line span[b-8kgbsgszgj] {
    color: rgba(var(--c-stone-rgb), 0.7);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.edit-options-panel__actions[b-8kgbsgszgj] {
    display: flex;
    justify-content: flex-end;
}

.edit-options-panel__actions[b-8kgbsgszgj]  .mud-button-root {
    border-radius: 12px;
    text-transform: none;
}

.edit-options-panel__content[b-8kgbsgszgj] {
    margin-top: 2px;
    padding-top: 14px;
    border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
}

.edit-options-layout[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(360px, 1.22fr);
    align-items: stretch;
    gap: 14px;
}

.edit-options-card[b-8kgbsgszgj] {
    display: grid;
    align-content: start;
    gap: 14px;
    min-width: 0;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.10);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(var(--c-white-rgb), 0.032), rgba(var(--c-white-rgb), 0.008)),
        rgba(var(--c-bg-abyss-rgb), 0.20);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.055);
    padding: clamp(14px, 1.7vw, 18px);
}

.edit-options-card--ratings[b-8kgbsgszgj] {
    grid-column: 1 / -1;
}

.edit-options-card__header[b-8kgbsgszgj] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.edit-options-card__icon[b-8kgbsgszgj] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.18);
    border-radius: 12px;
    background: rgba(var(--c-gold-rgb), 0.065);
    color: rgba(var(--c-gold-light-rgb), 0.86);
}

.edit-options-card__header div[b-8kgbsgszgj] {
    min-width: 0;
}

.edit-options-card__header span:not(.edit-options-card__icon)[b-8kgbsgszgj] {
    display: block;
    color: rgba(var(--c-gold-soft-rgb), 0.52);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    line-height: 1.1;
    text-transform: uppercase;
}

.edit-options-card__header strong[b-8kgbsgszgj] {
    display: block;
    color: rgba(var(--c-gold-light-rgb), 0.93);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.98rem;
    font-weight: 850;
    line-height: 1.25;
    margin-top: 3px;
    overflow-wrap: anywhere;
}

.edit-options-name-form[b-8kgbsgszgj] {
    min-width: 0;
}

.edit-toggle-grid[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}

.edit-toggle-tile[b-8kgbsgszgj] {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.08);
    border-radius: 14px;
    background: rgba(var(--c-white-rgb), 0.02);
    padding: 12px;
}

.edit-toggle-tile--nested[b-8kgbsgszgj] {
    border-color: rgba(var(--c-gold-rgb), 0.16);
    background: rgba(var(--c-gold-rgb), 0.04);
}

.edit-toggle-tile__control[b-8kgbsgszgj] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
}

.edit-toggle-tile p[b-8kgbsgszgj] {
    color: rgba(var(--c-stone-rgb), 0.68);
    font-size: 0.78rem;
    line-height: 1.42;
    margin: 0;
}

.edit-rating-panel[b-8kgbsgszgj] {
    min-width: 0;
    overflow-x: auto;
    border-radius: 10px;
}

[b-8kgbsgszgj] .edit-rating-panel .mud-simple-table {
    background: transparent;
}

[b-8kgbsgszgj] .edit-rating-panel table {
    min-width: 720px;
    color: rgba(var(--c-gold-soft-rgb), 0.84);
}

[b-8kgbsgszgj] .edit-rating-panel th {
    color: rgba(var(--c-gold-light-rgb), 0.78);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

[b-8kgbsgszgj] .edit-rating-panel td,
[b-8kgbsgszgj] .edit-rating-panel th {
    border-color: rgba(var(--c-gold-soft-rgb), 0.075) !important;
}

[b-8kgbsgszgj] .edit-rating-panel tfoot tr {
    background: rgba(var(--c-gold-rgb), 0.045) !important;
}

[b-8kgbsgszgj] .edit-options-panel .mud-collapse-container {
    overflow: hidden;
}

[b-8kgbsgszgj] .tasting-options .mud-button-root,
[b-8kgbsgszgj] .edit-primary-action.mud-button-root {
    border-radius: 14px;
    font-weight: 750;
    text-transform: none;
}

[b-8kgbsgszgj] .edit-primary-action.mud-button-root {
    background: linear-gradient(135deg, rgba(var(--c-parchment-rgb), 0.96) 0%, rgba(var(--c-gold-light-rgb), 0.96) 100%) !important;
    color: var(--c-bg-deep) !important;
    box-shadow: 0 14px 30px -20px rgba(var(--c-gold-rgb), 0.42);
}

[b-8kgbsgszgj] .edit-danger-action.mud-button-root {
    margin-top: 16px;
    border-radius: 14px;
}

.edit-add-actions[b-8kgbsgszgj] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

[b-8kgbsgszgj] .edit-muted-caption {
    color: rgba(var(--c-gold-soft-rgb), 0.55) !important;
}

[b-8kgbsgszgj] .edit-options-card .mud-switch .mud-typography {
    color: rgba(var(--c-gold-soft-rgb), 0.86);
    font-weight: 700;
}

[b-8kgbsgszgj] .edit-options-card .mud-input-control {
    margin-top: 0;
}

.edit-sequence-section[b-8kgbsgszgj] {
    position: relative;
}

[b-8kgbsgszgj] .edit-add-slide-button.mud-icon-button {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(var(--c-parchment-rgb), 0.96), rgba(var(--c-gold-light-rgb), 0.96)) !important;
    color: var(--c-bg-deep) !important;
    box-shadow: 0 16px 34px -22px rgba(var(--c-gold-rgb), 0.56);
}

.edit-add-slide-menu[b-8kgbsgszgj] {
    position: static;
    z-index: 6;
    display: grid;
    gap: 8px;
    width: 100%;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.16);
    border-radius: 16px;
    background: rgba(var(--c-bg-deep-rgb), 0.96);
    box-shadow: 0 24px 58px -28px rgba(var(--c-black-rgb), 0.78), inset 0 1px 0 rgba(var(--c-white-rgb), 0.06);
    padding: 8px;
}

.edit-add-slide-menu button[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.11);
    border-radius: 12px;
    background: rgba(var(--c-white-rgb), 0.035);
    color: rgba(var(--c-gold-soft-rgb), 0.9);
    cursor: pointer;
    padding: 11px 12px;
    text-align: left;
}

.edit-add-slide-menu button:hover[b-8kgbsgszgj],
.edit-add-slide-menu button:focus-visible[b-8kgbsgszgj] {
    border-color: rgba(var(--c-gold-rgb), 0.30);
    background: rgba(var(--c-gold-rgb), 0.07);
    outline: none;
}

.edit-add-slide-menu[b-8kgbsgszgj]  .mud-icon-root {
    color: rgba(var(--c-gold-light-rgb), 0.84);
}

.edit-add-slide-menu strong[b-8kgbsgszgj],
.edit-add-slide-menu small[b-8kgbsgszgj] {
    display: block;
}

.edit-add-slide-menu strong[b-8kgbsgszgj] {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 850;
}

.edit-add-slide-menu small[b-8kgbsgszgj] {
    color: rgba(var(--c-stone-rgb), 0.64);
    font-size: 0.78rem;
    line-height: 1.35;
    margin-top: 2px;
}

.edit-deck-layout[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(14px, 1.8vw, 22px);
}

.edit-slide-rail[b-8kgbsgszgj] {
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.13);
    border-radius: 18px;
    background: rgba(var(--c-white-rgb), 0.028);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.05), 0 18px 36px -30px rgba(var(--c-black-rgb), 0.64);
}

.edit-slide-rail[b-8kgbsgszgj] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
    padding: 12px;
}

.edit-slide-rail__list[b-8kgbsgszgj] {
    --edit-slide-divider-outside-gap: 10px;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    overflow: visible;
    padding: 4px 14px 4px 4px;
}

.edit-slide-thumb__actions[b-8kgbsgszgj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(var(--c-gold-soft-rgb), 0.56);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.edit-slide-rail__empty[b-8kgbsgszgj] {
    border: 1px dashed rgba(var(--c-gold-soft-rgb), 0.16);
    border-radius: 16px;
    color: rgba(var(--c-stone-rgb), 0.72);
    font-size: 0.92rem;
    line-height: 1.45;
    padding: 16px;
}

.edit-slide-rail__empty[b-8kgbsgszgj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.edit-slide-rail__empty-hint[b-8kgbsgszgj] {
    margin: 0;
}

.edit-slide-insert--pulse[b-8kgbsgszgj] {
    position: relative;
    height: auto;
    pointer-events: auto;
    isolation: isolate;
}

[b-8kgbsgszgj] .edit-slide-insert--pulse .edit-add-slide-button.mud-icon-button {
    position: relative;
    overflow: visible;
    animation: editAddSlidePulseTint-b-8kgbsgszgj 2200ms ease-in-out infinite;
}

[b-8kgbsgszgj] .edit-slide-insert--pulse .edit-add-slide-button.mud-icon-button::before,
[b-8kgbsgszgj] .edit-slide-insert--pulse .edit-add-slide-button.mud-icon-button::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid rgba(var(--c-gold-rgb), 0.7);
    pointer-events: none;
    opacity: 0;
    animation: editAddSlidePulseRing-b-8kgbsgszgj 1800ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

[b-8kgbsgszgj] .edit-slide-insert--pulse .edit-add-slide-button.mud-icon-button::after {
    animation-delay: 900ms;
}

@keyframes editAddSlidePulseTint-b-8kgbsgszgj {
    0%, 100% {
        box-shadow: 0 16px 34px -22px rgba(var(--c-gold-rgb), 0.56);
    }
    50% {
        box-shadow: 0 0 36px rgba(var(--c-gold-rgb), 0.55);
    }
}

@keyframes editAddSlidePulseRing-b-8kgbsgszgj {
    0% {
        transform: scale(1);
        opacity: 0.8;
        border-width: 2px;
    }
    80% {
        opacity: 0;
        border-width: 1px;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
        border-width: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [b-8kgbsgszgj] .edit-slide-insert--pulse .edit-add-slide-button.mud-icon-button,
    [b-8kgbsgszgj] .edit-slide-insert--pulse .edit-add-slide-button.mud-icon-button::before,
    [b-8kgbsgszgj] .edit-slide-insert--pulse .edit-add-slide-button.mud-icon-button::after {
        animation: none !important;
    }
}

.edit-slide-insert[b-8kgbsgszgj] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 0;
    height: 0;
    margin: 0;
    padding-right: 2px;
    isolation: isolate;
    pointer-events: none;
    z-index: 4;
}

.edit-slide-insert[b-8kgbsgszgj]::before {
    display: none;
}

[b-8kgbsgszgj] .edit-slide-insert .edit-add-slide-button.mud-icon-button {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.26);
    transform: translateX(8px);
    box-shadow: 0 12px 26px -18px rgba(var(--c-gold-rgb), 0.58), 0 0 0 5px rgba(var(--c-bg-abyss-rgb), 0.9);
}

.edit-slide-insert--active[b-8kgbsgszgj] {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 4px 0 8px;
    z-index: 5;
}

.edit-slide-insert--start[b-8kgbsgszgj] {
    justify-content: center;
    min-height: 32px;
    height: auto;
    margin: 0 0 var(--edit-slide-divider-outside-gap);
    padding-bottom: 10px;
    padding-right: 0;
    border-bottom: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
    pointer-events: auto;
}

[b-8kgbsgszgj] .edit-slide-insert--start .edit-add-slide-button.mud-icon-button {
    transform: none;
}

.edit-slide-insert--active[b-8kgbsgszgj]::before {
    top: 16px;
}

.edit-slide-insert .edit-add-slide-menu[b-8kgbsgszgj] {
    position: static !important;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin-top: 2px;
}

.edit-slide-insert--end[b-8kgbsgszgj] {
    justify-content: center;
    min-height: 32px;
    height: auto;
    pointer-events: auto;
    flex: 0 0 auto;
    margin-top: var(--edit-slide-divider-outside-gap);
    padding-top: 10px;
    padding-right: 0;
    border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
}

[b-8kgbsgszgj] .edit-slide-insert--end .edit-add-slide-button.mud-icon-button {
    transform: none;
}

.edit-slide-insert--end.edit-slide-insert--active .edit-add-slide-menu[b-8kgbsgszgj] {
    order: -1;
    margin: 0 0 6px;
}

.edit-slide-thumb[b-8kgbsgszgj] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    width: 100%;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.13);
    border-radius: 14px;
    background: rgba(var(--c-bg-abyss-rgb), 0.36);
    color: rgba(var(--c-gold-soft-rgb), 0.88);
    padding: 8px;
    margin-bottom: 0;
    transition: border-color 160ms ease-out, background 160ms ease-out, transform 160ms ease-out;
}

.edit-slide-rail__list .edit-slide-thumb:last-child[b-8kgbsgszgj] {
    margin-bottom: 0;
}

.edit-slide-thumb:hover[b-8kgbsgszgj],
.edit-slide-thumb:focus-within[b-8kgbsgszgj] {
    border-color: rgba(var(--c-gold-rgb), 0.26);
    background: rgba(var(--c-gold-rgb), 0.045);
    transform: translateY(-1px);
}

.edit-slide-thumb--selected[b-8kgbsgszgj] {
    border-color: rgba(var(--c-gold-rgb), 0.38);
    background: rgba(var(--c-gold-rgb), 0.075);
    box-shadow: inset 3px 0 0 rgba(var(--c-gold-rgb), 0.52), inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

.edit-slide-thumb__select[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-height: 82px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 2px;
    text-align: left;
}

.edit-slide-thumb__select:focus-visible[b-8kgbsgszgj] {
    border-radius: 10px;
    outline: 2px solid rgba(var(--c-gold-rgb), 0.34);
    outline-offset: 2px;
}

.edit-slide-thumb__number[b-8kgbsgszgj] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(var(--c-gold-soft-rgb), 0.09);
    color: rgba(var(--c-gold-soft-rgb), 0.74);
    font-size: 0.75rem;
    font-weight: 900;
}

.edit-slide-thumb__body[b-8kgbsgszgj] {
    min-width: 0;
}

.edit-slide-thumb__type[b-8kgbsgszgj] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(var(--c-gold-light-rgb), 0.74);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.edit-slide-thumb__type[b-8kgbsgszgj]  .mud-icon-root {
    font-size: 1rem;
}

.edit-slide-thumb strong[b-8kgbsgszgj] {
    display: -webkit-box;
    color: rgba(var(--c-gold-soft-rgb), 0.96);
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 8px 0 6px;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.edit-slide-thumb__actions[b-8kgbsgszgj] {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 6px;
    border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.10);
}

.edit-slide-thumb__actions[b-8kgbsgszgj]  .mud-icon-button {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border-color: rgba(var(--c-gold-soft-rgb), 0.14) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.68) !important;
}

.edit-slide-thumb__actions[b-8kgbsgszgj]  .mud-icon-button:hover {
    border-color: rgba(var(--c-gold-rgb), 0.26) !important;
    background: rgba(var(--c-gold-rgb), 0.06) !important;
    color: rgba(var(--c-gold-light-rgb), 0.88) !important;
}

.edit-preview-sticky[b-8kgbsgszgj] {
    position: sticky;
    top: calc(64px + clamp(12px, 1.6vw, 22px));
    align-self: start;
    min-width: 0;
    z-index: 2;
}

.edit-preview-frame[b-8kgbsgszgj] {
    position: relative;
    display: grid;
    min-width: 0;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.13);
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(var(--c-gold-soft-rgb), 0.045), transparent 42px),
        rgba(var(--c-white-rgb), 0.026);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.055), 0 24px 50px -36px rgba(var(--c-black-rgb), 0.72);
    padding: clamp(10px, 1.35vw, 16px);
}

.edit-preview-frame[b-8kgbsgszgj]::before {
    content: "";
    position: absolute;
    top: 9px;
    left: clamp(18px, 2vw, 28px);
    right: clamp(18px, 2vw, 28px);
    height: 1px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--c-gold-soft-rgb), 0.22) 50%, transparent 100%);
    pointer-events: none;
}

.edit-preview-frame[b-8kgbsgszgj]  .slide-preview-viewport {
    justify-self: center;
    width: min(100%, calc((100vh - 220px) * 16 / 9));
    min-width: 0;
}

.edit-preview-frame[b-8kgbsgszgj]  .slide-preview-canvas {
    min-width: 0;
}

[b-8kgbsgszgj] .edit-slide-dialog.mud-dialog,
[b-8kgbsgszgj] .edit-slide-dialog .mud-dialog {
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.16);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(var(--c-gold-soft-rgb), 0.055), transparent 76px),
        linear-gradient(145deg, rgba(var(--c-white-rgb), 0.052), rgba(var(--c-white-rgb), 0.018)),
        var(--c-bg-deep);
    color: rgba(var(--c-gold-soft-rgb), 0.9);
    box-shadow:
        0 34px 82px -34px rgba(var(--c-black-rgb), 0.78),
        0 0 42px rgba(var(--c-gold-rgb), 0.045),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.075);
    overflow: hidden;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-dialog-title {
    border-bottom: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
    background: linear-gradient(90deg, rgba(var(--c-gold-rgb), 0.075), rgba(var(--c-violet-rgb), 0.06), transparent);
    padding: clamp(18px, 2.3vw, 24px) clamp(18px, 2.6vw, 28px) !important;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-dialog-content {
    color: rgba(var(--c-gold-soft-rgb), 0.88);
    padding: clamp(18px, 2.6vw, 28px) !important;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
    background: rgba(var(--c-bg-abyss-rgb), 0.34);
    padding: 14px clamp(18px, 2.6vw, 28px) clamp(18px, 2.4vw, 24px) !important;
}

.edit-slide-dialog__title[b-8kgbsgszgj] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.edit-slide-dialog__title .mud-typography-h6[b-8kgbsgszgj] {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.edit-slide-dialog__icon[b-8kgbsgszgj] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.22);
    border-radius: 12px;
    background: rgba(var(--c-gold-rgb), 0.07);
    color: rgba(var(--c-gold-light-rgb), 0.9);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.07), 0 14px 28px -24px rgba(var(--c-gold-rgb), 0.6);
}

.edit-slide-dialog__form[b-8kgbsgszgj] {
    display: grid;
    gap: 16px;
    padding-top: 4px;
}

.edit-slide-dialog__section[b-8kgbsgszgj] {
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
    border-radius: 18px;
    background: rgba(var(--c-bg-abyss-rgb), 0.34);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.045);
    padding: clamp(14px, 2vw, 18px);
}

.edit-slide-dialog__section--choice[b-8kgbsgszgj] {
    background: linear-gradient(135deg, rgba(var(--c-violet-rgb), 0.11), rgba(var(--c-white-rgb), 0.014));
}

.edit-slide-dialog__section-heading[b-8kgbsgszgj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.edit-slide-dialog__section-title[b-8kgbsgszgj] {
    color: rgba(var(--c-gold-light-rgb), 0.86) !important;
    font-weight: 850 !important;
    letter-spacing: 0.02em;
    margin: 0 !important;
}

.edit-slide-dialog__radio-group[b-8kgbsgszgj] {
    display: grid;
    gap: 8px;
}

.edit-slide-dialog__answer-row[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.10);
    border-radius: 14px;
    background: rgba(var(--c-white-rgb), 0.024);
}

.edit-slide-dialog__answer-row + .edit-slide-dialog__answer-row[b-8kgbsgszgj] {
    margin-top: 8px;
}

.edit-slide-dialog__answer-input[b-8kgbsgszgj] {
    min-width: 0;
}

.edit-slide-dialog__answer-actions[b-8kgbsgszgj] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.edit-slide-dialog__form-actions[b-8kgbsgszgj] {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

.edit-selected-beverage[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: 136px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
    border: 1px solid rgba(var(--c-gold-rgb), 0.18);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(var(--c-gold-rgb), 0.065), rgba(var(--c-violet-rgb), 0.055)),
        rgba(var(--c-bg-abyss-rgb), 0.38);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.055), 0 20px 44px -34px rgba(var(--c-black-rgb), 0.72);
    padding: clamp(14px, 2vw, 18px);
}

.edit-selected-beverage__media[b-8kgbsgszgj] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 154px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.13);
    border-radius: 16px;
    background: rgba(var(--c-bg-deep-rgb), 0.62);
    overflow: hidden;
}

.edit-selected-beverage__media[b-8kgbsgszgj]::before {
    content: "";
    position: absolute;
    inset: -32%;
    background: radial-gradient(ellipse at center, rgba(var(--c-gold-rgb), 0.16), rgba(var(--c-gold-rgb), 0.04) 45%, transparent 72%);
    pointer-events: none;
}

.edit-selected-beverage__media img[b-8kgbsgszgj] {
    position: relative;
    z-index: 1;
    width: min(78%, 108px);
    max-height: 138px;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgba(var(--c-black-rgb), 0.56));
}

.edit-selected-beverage__content[b-8kgbsgszgj] {
    min-width: 0;
}

.edit-selected-beverage h3[b-8kgbsgszgj] {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.28rem, 2.8vw, 1.8rem);
    font-weight: 900;
    line-height: 1.05;
    margin: 6px 0 8px;
    overflow-wrap: anywhere;
}

.edit-selected-beverage__producer[b-8kgbsgszgj] {
    color: rgba(var(--c-gold-soft-rgb), 0.82);
    font-size: 0.96rem;
    font-weight: 650;
    margin: 0;
}

.edit-selected-beverage__facts[b-8kgbsgszgj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0;
}

.edit-selected-beverage__description[b-8kgbsgszgj] {
    display: -webkit-box;
    color: rgba(var(--c-stone-rgb), 0.78);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 14px 0 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.edit-slide-dialog__beverage[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
}

.edit-slide-dialog__media[b-8kgbsgszgj] {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 150px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.13);
    border-radius: 16px;
    background: rgba(var(--c-bg-deep-rgb), 0.58);
    overflow: hidden;
}

.edit-slide-dialog__media[b-8kgbsgszgj]::before {
    content: "";
    position: absolute;
    inset: -28%;
    background: radial-gradient(ellipse at center, rgba(var(--c-gold-rgb), 0.15), rgba(var(--c-gold-rgb), 0.035) 42%, transparent 70%);
    pointer-events: none;
}

.edit-slide-dialog__media img[b-8kgbsgszgj] {
    position: relative;
    z-index: 1;
    width: min(78%, 104px);
    max-height: 132px;
    object-fit: contain;
    filter: drop-shadow(0 12px 20px rgba(var(--c-black-rgb), 0.48));
}

.edit-slide-dialog__details[b-8kgbsgszgj] {
    min-width: 0;
}

.edit-slide-dialog__details .mud-typography-h5[b-8kgbsgszgj] {
    color: rgba(var(--c-gold-soft-rgb), 0.96);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.edit-slide-dialog__facts[b-8kgbsgszgj],
.edit-slide-dialog__actions[b-8kgbsgszgj] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.edit-slide-dialog__actions[b-8kgbsgszgj] {
    align-items: center;
    justify-content: flex-end;
    margin-top: 8px;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-chip {
    border-color: rgba(var(--c-gold-soft-rgb), 0.2) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.82) !important;
}

.edit-add-slide-dialog__chooser[b-8kgbsgszgj],
.edit-add-slide-dialog__form[b-8kgbsgszgj] {
    display: grid;
    gap: 16px;
    padding-top: 4px;
}

.edit-add-slide-dialog__chooser .edit-add-slide-menu[b-8kgbsgszgj] {
    width: 100%;
}

.edit-add-slide-dialog__form--custom[b-8kgbsgszgj] {
    gap: 12px;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-input-label,
[b-8kgbsgszgj] .edit-slide-dialog .mud-input-slot,
[b-8kgbsgszgj] .edit-slide-dialog .mud-input-root,
[b-8kgbsgszgj] .edit-slide-dialog .mud-select-input {
    color: rgba(var(--c-gold-soft-rgb), 0.88) !important;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-input-outlined-border {
    border-color: rgba(var(--c-gold-soft-rgb), 0.22) !important;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-input-control-helper-text {
    color: rgba(var(--c-gold-soft-rgb), 0.55) !important;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-radio,
[b-8kgbsgszgj] .edit-slide-dialog .mud-radio .mud-typography,
[b-8kgbsgszgj] .edit-slide-dialog .mud-input-control-helper-text {
    color: rgba(var(--c-stone-rgb), 0.78) !important;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-button-root {
    border-radius: 14px;
    font-weight: 750;
    text-transform: none;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-button-filled-primary {
    background: linear-gradient(135deg, rgba(var(--c-parchment-rgb), 0.96) 0%, rgba(var(--c-gold-light-rgb), 0.96) 100%) !important;
    color: var(--c-bg-deep) !important;
    box-shadow: 0 14px 30px -20px rgba(var(--c-gold-rgb), 0.42);
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-button-outlined {
    border-color: rgba(var(--c-gold-soft-rgb), 0.2) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.82) !important;
}

[b-8kgbsgszgj] .edit-slide-dialog .mud-icon-button {
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
    border-radius: 12px;
}

@media (max-width: 640px) {
    .edit-slide-dialog__beverage[b-8kgbsgszgj] {
        grid-template-columns: 1fr;
    }

    .edit-selected-beverage[b-8kgbsgszgj] {
        grid-template-columns: 1fr;
    }

    .edit-slide-dialog__answer-row[b-8kgbsgszgj] {
        grid-template-columns: 1fr;
    }

    .edit-slide-dialog__answer-actions[b-8kgbsgszgj],
    .edit-slide-dialog__form-actions[b-8kgbsgszgj] {
        justify-content: flex-end;
    }

    .edit-slide-dialog__actions[b-8kgbsgszgj] {
        justify-content: stretch;
    }

    .edit-slide-dialog__actions[b-8kgbsgszgj]  .mud-button-root,
    .edit-slide-dialog__form-actions[b-8kgbsgszgj]  .mud-button-root,
    [b-8kgbsgszgj] .edit-slide-dialog .mud-dialog-actions .mud-button-root {
        flex: 1 1 100%;
    }
}

.edit-story-image-preview[b-8kgbsgszgj] {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    margin-bottom: 12px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.16);
    border-radius: 12px;
    background: rgba(var(--c-bg-deep-rgb), 0.5);
}

.edit-map-location-row[b-8kgbsgszgj] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

@media (max-width: 640px) {
    .edit-map-location-row[b-8kgbsgszgj] {
        grid-template-columns: 1fr 1fr;
    }

    .edit-map-location-row__label[b-8kgbsgszgj] {
        grid-column: 1 / -1;
    }
}

.edit-footer-actions[b-8kgbsgszgj] {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
}

[b-8kgbsgszgj] .edit-upload-modal {
    width: min(92vw, 500px);
    margin: auto;
    padding: 24px;
    border-radius: 24px;
    color: rgba(var(--c-gold-soft-rgb), 0.88);
}

.entrance-fade[b-8kgbsgszgj] {
    animation: editEntranceFadeIn-b-8kgbsgszgj 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes editAmbientDrift-b-8kgbsgszgj {
    0%   { transform: translate3d(-15%, -10%, 0) scale(1.10); }
    100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
}

@keyframes editEntranceFadeIn-b-8kgbsgszgj {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .edit-stage__ambient[b-8kgbsgszgj],
    .entrance-fade[b-8kgbsgszgj] {
        animation: none;
    }
}

@media (max-width: 1320px) {
    .edit-hero[b-8kgbsgszgj],
    .edit-workbench[b-8kgbsgszgj] {
        grid-template-columns: 1fr;
    }

    .edit-deck-layout[b-8kgbsgszgj] {
        grid-template-columns: 1fr;
    }

    .edit-slide-rail[b-8kgbsgszgj] {
        flex-direction: column;
        overflow: visible;
        padding: 12px;
    }

    .edit-slide-rail__list[b-8kgbsgszgj] {
        flex-direction: column;
        overflow: visible;
        padding: 18px 14px 4px 4px;
    }

    .edit-slide-insert[b-8kgbsgszgj] {
        justify-content: flex-end;
        align-self: auto;
        flex: 0 0 auto;
        width: auto;
        min-height: 0;
        height: 0;
        margin: 0;
        padding-right: 2px;
    }

    .edit-slide-insert[b-8kgbsgszgj]::before {
        display: none;
    }

    [b-8kgbsgszgj] .edit-slide-insert .edit-add-slide-button.mud-icon-button {
        transform: translateX(8px);
    }

    .edit-slide-insert--active[b-8kgbsgszgj] {
        margin: 4px 0 8px;
    }

    .edit-slide-insert--active[b-8kgbsgszgj]::before {
        display: none;
    }

    .edit-slide-insert--start[b-8kgbsgszgj] {
        flex: 0 0 auto;
        width: auto;
        height: auto;
        margin: 0 0 var(--edit-slide-divider-outside-gap);
        padding-right: 0;
    }

    [b-8kgbsgszgj] .edit-slide-insert--start .edit-add-slide-button.mud-icon-button {
        transform: none;
    }

    .edit-slide-insert--end[b-8kgbsgszgj] {
        justify-content: center;
        flex: 0 0 auto;
        width: auto;
        min-height: 32px;
        height: auto;
        margin: var(--edit-slide-divider-outside-gap) 0 0;
        padding: 10px 0 0;
        border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
        border-left: 0;
    }

    [b-8kgbsgszgj] .edit-slide-insert--end .edit-add-slide-button.mud-icon-button {
        transform: none;
    }

    .edit-slide-insert--end.edit-slide-insert--active .edit-add-slide-menu[b-8kgbsgszgj] {
        order: 0;
        margin: 0 0 0 2px;
    }

    .edit-slide-thumb[b-8kgbsgszgj] {
        min-width: 0;
        margin: 0;
    }

}

@media (max-width: 1040px) {
    .edit-options-layout[b-8kgbsgszgj] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .edit-compact-row[b-8kgbsgszgj] {
        grid-template-columns: 1fr;
    }

    [b-8kgbsgszgj] .edit-shell {
        padding: 24px 14px 40px;
    }

    .edit-add-actions[b-8kgbsgszgj],
    .edit-footer-actions[b-8kgbsgszgj] {
        align-items: stretch;
        flex-direction: column;
    }

    .edit-add-slide-menu[b-8kgbsgszgj] {
        left: auto;
        right: 0;
        width: min(88vw, 320px);
    }

    .edit-options-panel__summary[b-8kgbsgszgj] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .edit-options-panel__actions[b-8kgbsgszgj] {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .edit-options-layout[b-8kgbsgszgj],
    .edit-toggle-grid[b-8kgbsgszgj] {
        gap: 12px;
    }

    .edit-options-card[b-8kgbsgszgj] {
        border-radius: 14px;
        padding: 14px;
    }

    .edit-toggle-grid[b-8kgbsgszgj] {
        grid-template-columns: 1fr;
    }

    .edit-toggle-tile__control[b-8kgbsgszgj] {
        align-items: flex-start;
        flex-direction: column;
    }

    .edit-slide-thumb[b-8kgbsgszgj] {
        min-width: 164px;
    }

    .edit-preview-frame[b-8kgbsgszgj] {
        border-radius: 18px;
        padding: 8px;
    }

    .edit-slide-rail[b-8kgbsgszgj] {
        border-radius: 16px;
        padding: 10px;
    }
}
/* /Components/Pages/History.razor.rz.scp.css */
.history-table[b-x123m7x14a] {
    overflow-x: auto;
}

.tasting-name[b-x123m7x14a] {
    font-weight: 600;
    font-size: 1rem;
}
/* /Components/Pages/HistoryDetail.razor.rz.scp.css */
.leaderboard-list[b-1mism3ry7f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scoreboard-detail[b-1mism3ry7f] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 1.5rem;
    padding: 1.25rem 0 0.5rem;
    border-top: 1px solid rgba(var(--c-white-rgb), 0.15);
}

.scoreboard-detail-info[b-1mism3ry7f] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scoreboard-detail-chart[b-1mism3ry7f] {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    .scoreboard-detail[b-1mism3ry7f] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Host.razor.rz.scp.css */
/* Host Controls Grid - responsive layout */
.host-controls-grid[b-fnl4ppp8ud] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
}

/* ============================================================
   Host quiz — quiz-show stage. Question is the star (left of
   hero, oversized). Live "X / Y answered" pill anchors the
   right. Alternatives become large lettered glass chips that
   fill the screen via auto-fit grid (works for 2 - 12+ answers).
   On reveal the same chips stay in place and grow gold fills
   + vote counts inside, so the layout never jumps.
   ============================================================ */
[b-fnl4ppp8ud] .host-quiz {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.5vh, 44px);
    padding: clamp(8px, 1.6vw, 24px) clamp(8px, 1.6vw, 24px) 0;
    width: 100%;
    animation: host-quiz-enter-b-fnl4ppp8ud 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Live progress donut anchors the right of the hero — same
   visual treatment as the beverage "voted" glass on Host. */
[b-fnl4ppp8ud] .host-quiz__progress {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: clamp(8px, 2vh, 24px);
}

[b-fnl4ppp8ud] .host-quiz__progress-card {
    margin: 0;
}

@keyframes host-quiz-enter-b-fnl4ppp8ud {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    [b-fnl4ppp8ud] .host-quiz { animation: none; }
}

/* ============================================================
   Depth treatments — atmospheric layers behind the stage.
   Subtle. Each layer adds a small amount of dimension so the
   page feels like a lit room rather than a flat document.
   ============================================================ */

/* Soft, painterly ambient lighting — multiple radial pools
   of warm gold + cool deep blue feeding the dark base. */
.host-stage__ambient[b-fnl4ppp8ud] {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 45%, rgba(var(--c-gold-rgb), 0.18) 0%, rgba(var(--c-gold-rgb), 0.08) 30%, rgba(var(--c-gold-rgb), 0.02) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 25%, rgba(var(--c-violet-rgb), 0.28) 0%, rgba(var(--c-violet-rgb), 0.12) 35%, rgba(var(--c-violet-rgb), 0.03) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 110%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    /* Slow drift so the page breathes */
    animation: hostAmbientDrift-b-fnl4ppp8ud 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes hostAmbientDrift-b-fnl4ppp8ud {
    0%   { transform: translate3d(-15%, -10%, 0) scale(1.1); }
    100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
    .host-stage__ambient[b-fnl4ppp8ud] { animation: none; }
}

/* High-frequency noise grain for texture. Scoped opacity so
   it never fights the content. SVG is inlined as data URI. */
.host-stage__noise[b-fnl4ppp8ud] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

/* Corner vignette draws focus toward the center stage. */
.host-stage__vignette[b-fnl4ppp8ud] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(var(--c-black-rgb), 0.55) 100%);
}

/* Glassmorphism card behind the donut so it feels lifted. */
.host-donut-card[b-fnl4ppp8ud] {
    position: relative;
    padding: 24px;
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 60px rgba(var(--c-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

/* Painterly halo behind the donut card — visual rhyme with the bottle halo. */
.host-donut-card__halo[b-fnl4ppp8ud] {
    position: absolute;
    inset: -70% -80% -70% -80%;
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.16) 0%, rgba(var(--c-gold-rgb), 0.08) 25%, rgba(var(--c-gold-rgb), 0.025) 55%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    filter: blur(28px);
}

/* Vote-arrived pulse — pure CSS, no JS. A keyed overlay element is mounted
   each time the count changes (Blazor @key); it runs the ring once on mount
   and is layered on top of the card so it doesn't interrupt anything. */
.host-donut-card__pulse-overlay[b-fnl4ppp8ud] {
    position: absolute;
    inset: -2px;
    border-radius: 30px;
    pointer-events: none;
    z-index: 5;
    border: 2px solid rgba(var(--c-gold-rgb), 0.85);
    opacity: 0;
    animation: hostDonutPulse-b-fnl4ppp8ud 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.host-donut-card__pulse-overlay[b-fnl4ppp8ud]::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(var(--c-gold-rgb), 0.55);
    opacity: 0;
    animation: hostDonutPulseRing-b-fnl4ppp8ud 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

@keyframes hostDonutPulse-b-fnl4ppp8ud {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(var(--c-gold-rgb), 0.55),
            0 0 36px rgba(var(--c-gold-rgb), 0.45);
    }
    100% {
        opacity: 0;
        transform: scale(1.12);
        box-shadow:
            0 0 0 24px rgba(var(--c-gold-rgb), 0),
            0 0 64px rgba(var(--c-gold-rgb), 0);
    }
}

@keyframes hostDonutPulseRing-b-fnl4ppp8ud {
    0%   { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0;   transform: scale(1.22); }
}

/* Number bump — keyed span re-mounts on every new count and runs this once. */
.host-vote-count[b-fnl4ppp8ud] {
    display: inline-block;
    animation: hostVoteCountBump-b-fnl4ppp8ud 600ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
    will-change: transform;
}

@keyframes hostVoteCountBump-b-fnl4ppp8ud {
    0%   { transform: scale(0.78); filter: brightness(1.8) drop-shadow(0 0 16px rgba(var(--c-gold-rgb), 0.7)); }
    50%  { transform: scale(1.18); filter: brightness(1.35) drop-shadow(0 0 10px rgba(var(--c-gold-rgb), 0.45)); }
    100% { transform: scale(1);    filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .host-donut-card__pulse-overlay[b-fnl4ppp8ud],
    .host-donut-card__pulse-overlay[b-fnl4ppp8ud]::after,
    .host-vote-count[b-fnl4ppp8ud] { animation: none; opacity: 1; }
}

/* Make the donut ring track visible (faint warm tint instead of fully transparent)
   so the unfilled portion reads as a complete circle that's filling up. */
[b-fnl4ppp8ud] .host-donut .mud-progress-circular-circle.mud-progress-circular-circle-determinate {
    stroke: var(--c-parchment);
}
[b-fnl4ppp8ud] .host-donut svg circle:first-child {
    stroke: rgba(var(--c-parchment-rgb), 0.14);
}

/* Header gradient divider — soft fade-out edges instead of crisp line */
[b-fnl4ppp8ud] .host-header {
    position: relative;
}
[b-fnl4ppp8ud] .host-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--c-gold-soft-rgb), 0.22) 50%, transparent 100%);
    pointer-events: none;
}

/* Subtle accent line above the host controls — visual rhyme with the title accent bar. */
.host-controls-wrapper[b-fnl4ppp8ud] {
    background: linear-gradient(180deg, rgba(var(--c-bg-abyss-rgb), 0) 0%, rgba(var(--c-gold-rgb), 0.025) 55%, rgba(var(--c-gold-rgb), 0.05) 100%);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

.host-controls-wrapper[b-fnl4ppp8ud]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--c-gold-rgb), 0.18) 50%, transparent 100%);
    pointer-events: none;
}

.prev-btn[b-fnl4ppp8ud] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Ensure Previous and Next buttons share the same minimum width */
.prev-btn[b-fnl4ppp8ud]  .nav-btn,
.next-btn[b-fnl4ppp8ud]  .mud-button-root {
    min-width: 130px;
}

.center-btns[b-fnl4ppp8ud] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.next-btn[b-fnl4ppp8ud] {
    margin-left: auto;
}

/* Mobile layout: Previous and Next on first row, action buttons below */
@media (max-width: 959.95px) {
    /* Hide the desktop fullscreen icon — we don't show the fullscreen toggle
       on mobile at all. */
    .fullscreen-desktop-slot[b-fnl4ppp8ud] {
        display: none;
    }

    .host-controls-grid[b-fnl4ppp8ud] {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-areas: "prev center next";
        gap: 12px;
        position: static;
        align-items: center;
        justify-content: space-between;
    }

    .prev-btn[b-fnl4ppp8ud] {
        grid-area: prev;
        justify-self: start;
    }

    .next-btn[b-fnl4ppp8ud] {
        grid-area: next;
        justify-self: end;
        margin-left: 0;
        width: auto;
    }

    .host-controls-grid[b-fnl4ppp8ud]  .nav-btn {
        width: auto;
    }

    .center-btns[b-fnl4ppp8ud] {
        grid-area: center;
        position: static;
        transform: none;
        flex-direction: row;
        width: auto;
        max-width: none;
        justify-self: center;
        gap: 12px;
    }
    
    .center-btns[b-fnl4ppp8ud]  .mud-button {
        width: auto;
        min-width: unset;
    }
}

/* Host control buttons — quiet glass chrome by default. Only the primary
   Reveal action carries warm gold so it reads as the single intended action. */
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn,
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn .mud-button-root {
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    border-radius: 12px;
    padding: 8px 18px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14) !important;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.05);
    transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
    text-transform: none;
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn:hover {
    color: var(--c-gold-light) !important;
    border-color: rgba(var(--c-gold-soft-rgb), 0.28) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.08) 0%, rgba(var(--c-gold-light-rgb), 0.02) 100%) !important;
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn.mud-button-disabled,
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn:disabled {
    color: rgba(var(--c-gold-soft-rgb), 0.3) !important;
    border-color: rgba(var(--c-gold-soft-rgb), 0.08) !important;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.025) 0%, rgba(var(--c-white-rgb), 0.005) 100%) !important;
}

/* Primary action variant (Reveal Results / Reveal Quiz Results) — quiet by
   default, just slightly warmer cream tint than the nav buttons. Stays calm
   while the room is still voting; transforms into a confident gold CTA with
   expanding rings only once the donut crosses the 80% mark (--ready). */
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--primary {
    color: var(--c-gold-light) !important;
    border-color: rgba(var(--c-gold-soft-rgb), 0.22) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.06) 0%, rgba(var(--c-gold-light-rgb), 0.015) 100%) !important;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.06);
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--primary:hover {
    color: var(--c-gold-light) !important;
    border-color: rgba(var(--c-gold-soft-rgb), 0.4) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.12) 0%, rgba(var(--c-gold-light-rgb), 0.04) 100%) !important;
}

/* Ready state — ≥80% have voted. Button blooms into solid gold and the
   warm color animates softly. Two expanding gold rings emanate outward,
   echoing the X/Y voted donut card pulse so the eye understands "go". */
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready {
    position: relative;
    overflow: visible;
    color: var(--c-bg-deep) !important;
    border-color: rgba(var(--c-gold-soft-rgb), 0.5) !important;
    background: linear-gradient(145deg, var(--c-gold) 0%, var(--c-gold-deep) 100%) !important;
    box-shadow:
        0 8px 18px -10px rgba(var(--c-black-rgb), 0.5),
        0 0 18px rgba(var(--c-gold-rgb), 0.18),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.28);
    animation: hostRevealReadyTint-b-fnl4ppp8ud 2200ms ease-in-out infinite;
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready:hover {
    color: var(--c-bg-deep) !important;
    background: linear-gradient(145deg, var(--c-gold-light) 0%, var(--c-gold-deep) 100%) !important;
    box-shadow:
        0 10px 22px -10px rgba(var(--c-black-rgb), 0.55),
        0 0 28px rgba(var(--c-gold-rgb), 0.32),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.32);
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready::before,
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    border: 2px solid rgba(var(--c-gold-rgb), 0.7);
    pointer-events: none;
    opacity: 0;
    animation: hostRevealReadyRing-b-fnl4ppp8ud 1800ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready::after {
    animation-delay: 900ms;
}

@keyframes hostRevealReadyTint-b-fnl4ppp8ud {
    0%, 100% {
        box-shadow:
            0 8px 18px -10px rgba(var(--c-black-rgb), 0.5),
            0 0 18px rgba(var(--c-gold-rgb), 0.18),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.28);
    }
    50% {
        box-shadow:
            0 10px 24px -10px rgba(var(--c-black-rgb), 0.55),
            0 0 40px rgba(var(--c-gold-rgb), 0.55),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.36);
    }
}

@keyframes hostRevealReadyRing-b-fnl4ppp8ud {
    0% {
        transform: scale(1);
        opacity: 0.8;
        border-width: 2px;
    }
    80% {
        opacity: 0;
    }
    100% {
        transform: scale(1.45);
        opacity: 0;
        border-width: 1px;
    }
}

/* Complete variant — quiet outlined treatment with warm amber accent. Stays
   unobtrusive until the host is actually ready to finish. */
.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--complete {
    background: linear-gradient(145deg, rgba(var(--c-gold-warm-rgb), 0.06) 0%, rgba(var(--c-copper-rgb), 0.02) 100%) !important;
    color: var(--c-gold-warm) !important;
    border: 1px solid rgba(var(--c-gold-warm-rgb), 0.32) !important;
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.06);
}

.host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--complete:hover {
    color: var(--c-gold-cream) !important;
    border-color: rgba(var(--c-gold-warm-rgb), 0.5) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-warm-rgb), 0.12) 0%, rgba(var(--c-copper-rgb), 0.04) 100%) !important;
}

/* Fullscreen icon button — same glass-chrome recipe as the nav buttons. */
.host-controls-grid[b-fnl4ppp8ud]  .host-fullscreen-btn {
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.7) !important;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14) !important;
    border-radius: 12px;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.05);
    transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
}

.host-controls-grid[b-fnl4ppp8ud]  .host-fullscreen-btn:hover {
    color: var(--c-gold-light) !important;
    border-color: rgba(var(--c-gold-soft-rgb), 0.28) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.08) 0%, rgba(var(--c-gold-light-rgb), 0.02) 100%) !important;
}

@media (prefers-reduced-motion: reduce) {
    .host-controls-grid[b-fnl4ppp8ud]  .host-control-btn,
    .host-controls-grid[b-fnl4ppp8ud]  .host-fullscreen-btn {
        transition: none;
    }
    .host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready,
    .host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready::before,
    .host-controls-grid[b-fnl4ppp8ud]  .host-control-btn--ready::after {
        animation: none;
    }
}

/* ============================================================
   Reveal panel — lives in the LEFT column under the producer/eyebrow
   when the host has revealed results, so the bottle image on the
   right stays visible. Brand-aligned hero score + single radar.
   ============================================================ */

[b-fnl4ppp8ud] .host-reveal-panel {
    position: relative;
    margin-top: clamp(16px, 2vh, 24px);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Reserve a bit of room for rim labels (Appearance / Mouthfeel / etc.)
       which render OUTSIDE the SVG bounds via overflow: visible. Kept
       tighter so the polygon fills the right column. */
    padding: 0 clamp(28px, 3.5vw, 56px);
    box-sizing: border-box;
    animation: host-reveal-enter-b-fnl4ppp8ud 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[b-fnl4ppp8ud] .host-reveal-panel__chart {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: clamp(220px, 50vw, 760px);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

[b-fnl4ppp8ud] .host-reveal-panel__chart-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ensure the chart's own SVG fills the inner wrapper. MudChart writes the
   svg with width/height attributes set from MatchBoundsToSize, but only if
   the surrounding div has a measurable size. */
[b-fnl4ppp8ud] .host-reveal-panel__chart-inner .radar-chart-shell,
[b-fnl4ppp8ud] .host-reveal-panel__chart-inner .mud-chart {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}

[b-fnl4ppp8ud] .host-reveal-panel__chart-inner svg {
    width: 100% !important;
    height: 100% !important;
}

/* Hide the MudChart legend entirely — both the label text and its colored
   dot marker, which would otherwise bleed onto the score readout below. */
[b-fnl4ppp8ud] .host-reveal-panel .mud-chart-legend,
[b-fnl4ppp8ud] .host-reveal-panel .mud-chart-legend-item {
    display: none !important;
}

/* The warm-gold halo that used to sit behind the bottle now backs the
   radar chart — the chart is the new star of the right reveal moment. */
[b-fnl4ppp8ud] .host-reveal-panel__halo {
    position: absolute;
    inset: -18% -18% -18% -18%;
    background:
        radial-gradient(ellipse 50% 45% at 50% 50%, rgba(var(--c-gold-rgb), 0.22) 0%, rgba(var(--c-gold-rgb), 0.14) 22%, rgba(var(--c-gold-rgb), 0.06) 45%, rgba(var(--c-gold-rgb), 0.015) 70%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 50%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(36px);
}

/* Override the chart's grid + axis colors so the polygon, gridlines and
   axis labels all share the producer-tone gold. */
[b-fnl4ppp8ud] .host-reveal-panel__chart svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Grid + axis lines */
[b-fnl4ppp8ud] .host-reveal-panel__chart .mud-charts-grid line,
[b-fnl4ppp8ud] .host-reveal-panel__chart .mud-charts-grid path,
[b-fnl4ppp8ud] .host-reveal-panel__chart .mud-charts-grid polygon {
    stroke: rgba(var(--c-gold-light-rgb), 0.85) !important;
    fill: none !important;
}

/* Axis labels (Aroma / Taste / Mouthfeel / etc.) */
[b-fnl4ppp8ud] .host-reveal-panel__chart text {
    fill: rgba(var(--c-gold-light-rgb), 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: clamp(14px, 1.6vw, 22px) !important;
    letter-spacing: 0.02em;
}

/* Score readout living under the bottle image. */
[b-fnl4ppp8ud] .host-reveal-score {
    text-align: center;
    margin-top: clamp(20px, 3vh, 32px);
    animation: host-reveal-enter-b-fnl4ppp8ud 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[b-fnl4ppp8ud] .host-reveal-score__eyebrow {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    margin-bottom: 6px;
}

[b-fnl4ppp8ud] .host-reveal-score__readout {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    line-height: 0.96;
}

[b-fnl4ppp8ud] .host-reveal-score__value {
    font-weight: 900;
    font-size: clamp(3rem, 5.5vw, 4.6rem);
    letter-spacing: -0.035em;
    color: var(--c-gold);
    text-shadow: 0 0 56px rgba(var(--c-gold-rgb), 0.32);
    animation: host-reveal-pop-b-fnl4ppp8ud 720ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}

[b-fnl4ppp8ud] .host-reveal-score__meta {
    margin-top: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
}

/* Strip the duplicate score caption rendered by LiveFeedbackResults
   (our hero readout under the image owns it now). Handled by the
   .mud-chart-legend rule above. */

@keyframes host-reveal-enter-b-fnl4ppp8ud {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes host-reveal-pop-b-fnl4ppp8ud {
    0%   { opacity: 0; transform: scale(0.7); filter: blur(6px); }
    70%  { opacity: 1; transform: scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    [b-fnl4ppp8ud] .host-reveal-panel,
    [b-fnl4ppp8ud] .host-reveal-score__value { animation: none; }
}
/* /Components/Pages/HostQA.razor.rz.scp.css */
/* MudTabs renders its own markup, so these elements never carry this component's
   CSS isolation attribute. ::deep anchors the rules to the page wrapper that does. */
[b-6i8d97630b] .qa-tabs,
[b-6i8d97630b] .qa-tabs .mud-tabs-toolbar,
[b-6i8d97630b] .qa-tabs .mud-tabs-toolbar-content {
    background: transparent !important;
    background-color: transparent !important;
}

[b-6i8d97630b] .qa-tabs .mud-tabs-tabbar {
    background-color: transparent !important;
}

[b-6i8d97630b] .qa-tabs .mud-tab {
    color: rgba(var(--c-white-rgb), 0.7) !important;
}

[b-6i8d97630b] .qa-tabs .mud-tabs-slider.mud-warning {
    background: var(--c-gold) !important;
    background-color: var(--c-gold) !important;
}
/* /Components/Pages/Join.razor.rz.scp.css */
/* End Tasting Early panel — brand glass card with warm amber signal tone.
   Used by both the Tasting and Quiz consensus-mode panels. */
[b-p20p02x8cf] .end-early-panel.mud-expansion-panels {
    background: transparent !important;
    box-shadow: none !important;
}

[b-p20p02x8cf] .end-early-panel .mud-expansion-panel {
    position: relative;
    background: linear-gradient(145deg, rgba(var(--c-amber-rgb), 0.08) 0%, rgba(var(--c-amber-rgb), 0.02) 100%) !important;
    border: 1px solid rgba(var(--c-amber-rgb), 0.28) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow:
        0 20px 40px -16px rgba(var(--c-black-rgb), 0.55),
        0 0 32px rgba(var(--c-amber-rgb), 0.08),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.05);
    overflow: hidden;
}

[b-p20p02x8cf] .end-early-panel .mud-expand-panel-header {
    padding: 14px 20px;
}

[b-p20p02x8cf] .end-early-panel .mud-expand-panel-text {
    color: var(--c-amber);
    font-weight: 600;
    letter-spacing: 0.01em;
}

[b-p20p02x8cf] .end-early-panel .mud-expand-panel-icon .mud-icon-root {
    color: rgba(var(--c-amber-rgb), 0.75);
}

.end-early-panel__signal[b-p20p02x8cf] {
    color: var(--c-amber);
    font-weight: 600;
}

.end-early-panel__live-dot[b-p20p02x8cf] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-amber);
    margin-left: 12px;
    vertical-align: middle;
    position: relative;
    box-shadow: 0 0 8px rgba(var(--c-amber-rgb), 0.65);
    animation: endEarlyDotPulse-b-p20p02x8cf 1600ms ease-in-out infinite;
}

.end-early-panel__live-dot[b-p20p02x8cf]::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(var(--c-amber-rgb), 0.4);
    animation: endEarlyDotRing-b-p20p02x8cf 1600ms ease-out infinite;
}

.end-early-panel__live-label[b-p20p02x8cf] {
    margin-left: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--c-amber-rgb), 0.75);
    vertical-align: middle;
}

@keyframes endEarlyDotPulse-b-p20p02x8cf {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--c-amber-rgb), 0.65); }
    50%      { box-shadow: 0 0 14px rgba(var(--c-amber-rgb), 0.95); }
}

@keyframes endEarlyDotRing-b-p20p02x8cf {
    0%   { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(2.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .end-early-panel__live-dot[b-p20p02x8cf],
    .end-early-panel__live-dot[b-p20p02x8cf]::before { animation: none; }
}

.end-early-panel__body[b-p20p02x8cf] {
    padding: 8px 20px 20px;
}

.end-early-panel__copy[b-p20p02x8cf] {
    color: rgba(var(--c-gold-soft-rgb), 0.75);
    font-size: 0.92rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

[b-p20p02x8cf] .end-early-panel__progress.mud-progress-linear {
    height: 8px;
    border-radius: 6px;
    background-color: rgba(var(--c-amber-rgb), 0.12) !important;
    --mud-palette-error: var(--c-amber);
    margin-bottom: 10px;
    overflow: hidden;
}

.end-early-panel__count[b-p20p02x8cf] {
    color: rgba(var(--c-gold-soft-rgb), 0.65);
    font-size: 0.86rem;
    text-align: center;
    margin-bottom: 16px;
}

[b-p20p02x8cf] .end-early-panel__vote-btn.mud-button-root {
    border-color: rgba(var(--c-amber-rgb), 0.55) !important;
    color: var(--c-amber) !important;
    background: linear-gradient(145deg, rgba(var(--c-amber-rgb), 0.04) 0%, rgba(var(--c-amber-rgb), 0.01) 100%);
    border-radius: 12px;
    padding: 10px 22px;
    font-weight: 600;
    letter-spacing: 0.02em;
    transition: transform 180ms ease-out, box-shadow 180ms ease-out, background 180ms ease-out;
}

[b-p20p02x8cf] .end-early-panel__vote-btn.mud-button-root:hover {
    background: linear-gradient(145deg, rgba(var(--c-amber-rgb), 0.12) 0%, rgba(var(--c-amber-rgb), 0.04) 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -8px rgba(var(--c-amber-rgb), 0.3);
}

[b-p20p02x8cf] .end-early-panel__cancel-btn.mud-button-root {
    color: rgba(var(--c-gold-soft-rgb), 0.55) !important;
    font-size: 0.82rem;
    text-transform: none;
}

[b-p20p02x8cf] .end-early-panel__cancel-btn.mud-button-root:hover {
    color: rgba(var(--c-gold-soft-rgb), 0.85) !important;
    background: rgba(var(--c-gold-soft-rgb), 0.04) !important;
}

.join-overlay[b-p20p02x8cf] {
    background: var(--c-bg-deep);
    color: var(--c-white);
    min-height: calc(100vh - 64px);
    position: relative;
    width: 100%;
    padding: clamp(24px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.join-overlay--scrollable[b-p20p02x8cf] {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
}

.join-overlay__footer[b-p20p02x8cf] {
    position: absolute;
    left: clamp(16px, 5vw, 48px);
    bottom: 16px;
}

@keyframes fadeInUp-b-p20p02x8cf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.completed-wrapper[b-p20p02x8cf] {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(16px, 3vw, 32px) clamp(16px, 5vw, 48px) clamp(24px, 5vw, 48px);
}

.completed-card[b-p20p02x8cf] {
    position: relative;
    width: min(640px, 100%);
    border-radius: 28px;
    padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 56px);
    background: linear-gradient(160deg, rgba(var(--c-bg-navy-rgb), 0.96) 0%, rgba(var(--c-bg-deep-rgb), 0.98) 100%);
    box-shadow: 0 30px 80px rgba(var(--c-black-rgb), 0.55), 0 0 0 1px rgba(var(--c-parchment-rgb), 0.18) inset;
    overflow: hidden;
    text-align: center;
    animation: fadeInUp-b-p20p02x8cf 0.5s ease both;
}

.completed-card[b-p20p02x8cf]::before {
    content: "";
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 70%;
    background: radial-gradient(ellipse at center top, rgba(var(--c-gold-rgb), 0.18) 0%, transparent 65%);
    pointer-events: none;
}

.completed-card > *[b-p20p02x8cf] {
    position: relative;
    z-index: 1;
}

.completed-eyebrow[b-p20p02x8cf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(var(--c-gold-rgb), 0.12);
    color: var(--c-gold);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.completed-trophy[b-p20p02x8cf] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(var(--c-gold-rgb), 0.35), rgba(var(--c-gold-rgb), 0.05) 70%);
    color: var(--c-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    margin: 0 auto 20px;
    box-shadow: 0 12px 30px rgba(var(--c-gold-rgb), 0.25);
}

.completed-title[b-p20p02x8cf] {
    color: var(--c-white);
    font-weight: 800;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    line-height: 1.15;
    margin-bottom: 12px;
    word-break: break-word;
}

.completed-title .completed-title-name[b-p20p02x8cf] {
    color: var(--c-gold);
}

.completed-subtitle[b-p20p02x8cf] {
    color: rgba(var(--c-white-rgb), 0.7);
    font-size: 1rem;
    max-width: 460px;
    margin: 0 auto 28px;
    line-height: 1.5;
}

.completed-cta-stack[b-p20p02x8cf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    max-width: 360px;
    margin: 0 auto;
}

[b-p20p02x8cf] .completed-primary-btn {
    background: linear-gradient(135deg, var(--c-gold), var(--c-gold-pale)) !important;
    color: var(--c-bg-deep) !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    padding: 14px 24px !important;
    font-size: 1rem !important;
    text-transform: none !important;
    letter-spacing: 0.02em;
    box-shadow: 0 14px 32px rgba(var(--c-gold-pale-rgb), 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

[b-p20p02x8cf] .completed-primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(var(--c-gold-pale-rgb), 0.45);
}

[b-p20p02x8cf] .completed-secondary-btn {
    color: var(--c-gold) !important;
    border: 1px solid rgba(var(--c-gold-rgb), 0.45) !important;
    background: rgba(var(--c-gold-rgb), 0.04) !important;
    border-radius: 14px !important;
    padding: 13px 24px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.02em;
    transition: background 0.2s ease, border-color 0.2s ease;
}

[b-p20p02x8cf] .completed-secondary-btn:hover {
    background: rgba(var(--c-gold-rgb), 0.1) !important;
    border-color: rgba(var(--c-gold-rgb), 0.7) !important;
}

[b-p20p02x8cf] .completed-tertiary-btn {
    color: rgba(var(--c-white-rgb), 0.7) !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

[b-p20p02x8cf] .completed-tertiary-btn:hover {
    color: var(--c-gold) !important;
    background: transparent !important;
}

.completed-divider[b-p20p02x8cf] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(var(--c-white-rgb), 0.35);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 24px auto 16px;
    max-width: 360px;
}

.completed-divider[b-p20p02x8cf]::before,
.completed-divider[b-p20p02x8cf]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--c-white-rgb), 0.15), transparent);
}

/* ============================================================
   Voting view — atmospheric depth stack + hero treatment.
   Mirrors the Host page brand language.
   ============================================================ */

.join-overlay--depth[b-p20p02x8cf] {
    background: var(--c-bg-abyss);
    /* Bleed past MudMainContent's pa-4 (16px) horizontal padding
       and bottom safe-area so the dark stage reaches the screen edge
       on every side. Top sits flush with the AppBar. */
    box-sizing: border-box;
    margin: -16px -16px 0 -16px;
    width: calc(100% + 32px);
    padding-left: clamp(16px, 4vw, 48px);
    padding-right: clamp(16px, 4vw, 48px);
    padding-top: clamp(20px, 4vh, 40px);
}

/* The depth variant lets the page body scroll naturally — no inner
   scroll container, so we never get two scrollbars. The atmospheric
   layers are locked to the viewport so they never stretch with content. */
.join-overlay--depth.join-overlay--scrollable[b-p20p02x8cf] {
    overflow: hidden;
    -webkit-overflow-scrolling: auto;
    min-height: 100vh;
}

@media (max-width: 960px) {
    .join-overlay--depth[b-p20p02x8cf],
    .landing-stage[b-p20p02x8cf],
    .waiting-stage[b-p20p02x8cf] {
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
        max-width: none;
    }
}

.join-overlay--depth > *:not(.join-stage__ambient):not(.join-stage__noise):not(.join-stage__vignette)[b-p20p02x8cf] {
    position: relative;
    z-index: 1;
}

.join-overlay--depth .join-stage__ambient[b-p20p02x8cf],
.join-overlay--depth .join-stage__noise[b-p20p02x8cf],
.join-overlay--depth .join-stage__vignette[b-p20p02x8cf] {
    position: fixed;
}

.join-stage__ambient[b-p20p02x8cf] {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 45%, rgba(var(--c-gold-rgb), 0.18) 0%, rgba(var(--c-gold-rgb), 0.08) 30%, rgba(var(--c-gold-rgb), 0.02) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 25%, rgba(var(--c-violet-rgb), 0.28) 0%, rgba(var(--c-violet-rgb), 0.12) 35%, rgba(var(--c-violet-rgb), 0.03) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 110%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    animation: joinAmbientDrift-b-p20p02x8cf 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes joinAmbientDrift-b-p20p02x8cf {
    0%   { transform: translate3d(-15%, -10%, 0) scale(1.10); }
    100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
}

.join-stage__noise[b-p20p02x8cf] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.join-stage__vignette[b-p20p02x8cf] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(var(--c-black-rgb), 0.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .join-stage__ambient[b-p20p02x8cf] { animation: none; }
}

/* Voting hero — bottle as the star, with halo + pedestal. */
.vote-hero[b-p20p02x8cf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 48px);
    width: 100%;
    max-width: 1080px;
    margin: 0 auto clamp(16px, 2.5vw, 32px);
    padding: 0 clamp(8px, 2vw, 16px);
}

.vote-hero__media[b-p20p02x8cf] {
    position: relative;
    flex: 0 0 auto;
    width: clamp(180px, 28vw, 300px);
    height: clamp(220px, 32vh, 380px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vote-hero__halo[b-p20p02x8cf] {
    position: absolute;
    inset: -55% -60% -50% -60%;
    background:
        radial-gradient(ellipse 50% 45% at 50% 45%, rgba(var(--c-gold-rgb), 0.22) 0%, rgba(var(--c-gold-rgb), 0.14) 22%, rgba(var(--c-gold-rgb), 0.06) 45%, rgba(var(--c-gold-rgb), 0.015) 70%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 40%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(28px);
}

.vote-hero__image[b-p20p02x8cf] {
    position: relative;
    z-index: 1;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 24px 40px rgba(var(--c-black-rgb), 0.65)) drop-shadow(0 4px 12px rgba(var(--c-gold-rgb), 0.08));
}

.vote-hero__pedestal[b-p20p02x8cf] {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -2%;
    height: 32px;
    background: radial-gradient(ellipse at center, rgba(var(--c-black-rgb), 0.6) 0%, rgba(var(--c-black-rgb), 0.25) 45%, transparent 75%);
    pointer-events: none;
    z-index: 1;
    filter: blur(6px);
}

.vote-hero__copy[b-p20p02x8cf] {
    flex: 1 1 360px;
    min-width: 0;
    max-width: 560px;
}

.vote-eyebrow[b-p20p02x8cf] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    margin-bottom: 16px;
}

.vote-eyebrow__dot[b-p20p02x8cf] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-gold);
    box-shadow: 0 0 10px rgba(var(--c-gold-rgb), 0.7);
}

.vote-display-title[b-p20p02x8cf] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.98;
    font-size: clamp(2.2rem, 5.2vw, 4.2rem);
    color: var(--c-gold);
    margin: 0 0 18px 0;
    word-break: break-word;
}

.vote-title-accent[b-p20p02x8cf] {
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
    margin-bottom: 24px;
}

[b-p20p02x8cf] .vote-description-toggle {
    background-color: rgba(var(--c-gold-soft-rgb), 0.06) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.85) !important;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.22) !important;
    border-radius: 999px !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    padding: 6px 16px !important;
    text-transform: none !important;
    letter-spacing: 0.02em;
}

.vote-description[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.55;
    color: rgba(var(--c-stone-rgb), 0.85);
    max-width: 60ch;
    margin: 16px 0 0 0;
}

.vote-description[b-p20p02x8cf]::first-letter {
    color: rgba(var(--c-gold-light-rgb), 0.85);
    font-weight: 600;
    font-size: 1.15em;
    padding-right: 0.04em;
}

/* Glass card hosting the rating controls — visual rhyme with Host donut card. */
.vote-rating-card[b-p20p02x8cf] {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 0 auto clamp(20px, 3vw, 32px);
    padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 60px rgba(var(--c-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

.vote-rating-card__halo[b-p20p02x8cf] {
    position: absolute;
    inset: -70% -80% -70% -80%;
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.16) 0%, rgba(var(--c-gold-rgb), 0.08) 25%, rgba(var(--c-gold-rgb), 0.025) 55%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    filter: blur(28px);
}

.vote-rating-eyebrow[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    text-align: center;
    margin-bottom: 18px;
}

.vote-rating-row[b-p20p02x8cf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.vote-rating-row:last-child[b-p20p02x8cf] {
    margin-bottom: 0;
}

.vote-rating-row__label[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 1rem;
    color: rgba(var(--c-gold-light-rgb), 0.85);
    letter-spacing: 0.02em;
}

.vote-rating-divider[b-p20p02x8cf] {
    height: 1px;
    margin: 14px auto;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--c-gold-soft-rgb), 0.18) 50%, transparent 100%);
}

/* ========================================================================
   Quiz view styles live in wwwroot/app.css (shared with the host page).
   ======================================================================== */

/* Entrance animation per item — keyed via @key to taste item id. */
.vote-enter[b-p20p02x8cf] {
    animation: voteEnter-b-p20p02x8cf 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.vote-enter--delay-1[b-p20p02x8cf] {
    animation-delay: 80ms;
}

.vote-enter--delay-2[b-p20p02x8cf] {
    animation-delay: 160ms;
}

@keyframes voteEnter-b-p20p02x8cf {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .vote-enter[b-p20p02x8cf] { animation: none; }
}

@media (max-width: 720px) {
    .vote-hero[b-p20p02x8cf] {
        flex-direction: column;
        gap: 8px;
    }

    .vote-hero__copy[b-p20p02x8cf] {
        /* On column flex, `flex-basis` becomes a height, which would
           reserve ~360px even with the description hidden. Reset to
           content-driven sizing. */
        flex: 0 0 auto;
        text-align: center;
    }

    .vote-hero__media[b-p20p02x8cf] {
        width: clamp(180px, 52vw, 240px);
        height: clamp(200px, 32vh, 280px);
    }

    .vote-title-accent[b-p20p02x8cf] {
        margin-left: auto;
        margin-right: auto;
    }

    .vote-eyebrow[b-p20p02x8cf] {
        justify-content: center;
        margin-bottom: 8px;
    }

    .vote-display-title[b-p20p02x8cf] {
        margin-bottom: 12px;
    }

    .vote-title-accent[b-p20p02x8cf] {
        margin-bottom: 16px;
    }
}

/* ============================================================
   Reveal results card — the moment everyone has been waiting
   for. Star of the show: the score. Glass card visually rhymes
   with the rating card; halo echoes the bottle hero.
   ============================================================ */

.reveal-card[b-p20p02x8cf] {
    position: relative;
    max-width: 920px;
    width: min(920px, 100%);
    margin: clamp(28px, 4vh, 40px) auto 0;
    padding: clamp(24px, 3vw, 40px) clamp(20px, 3vw, 36px) clamp(28px, 3.5vw, 44px);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 80px rgba(var(--c-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    overflow: hidden;
}

.reveal-card__halo[b-p20p02x8cf] {
    position: absolute;
    inset: -50% -50% -40% -50%;
    background:
        radial-gradient(ellipse 50% 45% at 50% 30%, rgba(var(--c-gold-rgb), 0.20) 0%, rgba(var(--c-gold-rgb), 0.10) 28%, rgba(var(--c-gold-rgb), 0.03) 55%, transparent 100%),
        radial-gradient(ellipse 60% 55% at 50% 80%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(28px);
}

/* One-shot diagonal sweep that runs on entrance — the "curtain pulled back" feel. */
.reveal-card__sweep[b-p20p02x8cf] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(var(--c-gold-rgb), 0.18) 50%, transparent 65%);
    opacity: 0;
    animation: revealSweep-b-p20p02x8cf 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}

@keyframes revealSweep-b-p20p02x8cf {
    0%   { transform: translateX(-30%); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translateX(30%); opacity: 0; }
}

.reveal-card > *[b-p20p02x8cf] {
    position: relative;
    z-index: 1;
}

.reveal-header[b-p20p02x8cf] {
    text-align: center;
    margin-bottom: clamp(20px, 2.5vw, 28px);
}

.reveal-eyebrow[b-p20p02x8cf] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    margin-bottom: 10px;
}

.reveal-eyebrow__dot[b-p20p02x8cf] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-gold);
    box-shadow: 0 0 10px rgba(var(--c-gold-rgb), 0.7);
}

.reveal-accent[b-p20p02x8cf] {
    width: 56px;
    height: 3px;
    border-radius: 2px;
    margin: 0 auto;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

/* Hero score readout — the star of the page. */
.reveal-score[b-p20p02x8cf] {
    text-align: center;
    margin: 0 auto clamp(20px, 3vh, 32px);
}

.reveal-score__label[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    margin-bottom: 6px;
}

.reveal-score__readout[b-p20p02x8cf] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    line-height: 0.96;
}

.reveal-score__value[b-p20p02x8cf] {
    font-weight: 900;
    font-size: clamp(3.2rem, 9vw, 6.4rem);
    letter-spacing: -0.04em;
    color: var(--c-gold);
    text-shadow: 0 8px 32px rgba(var(--c-gold-rgb), 0.25);
    animation: revealScorePop-b-p20p02x8cf 720ms cubic-bezier(0.22, 1, 0.36, 1) 250ms both;
}

.reveal-score__denominator[b-p20p02x8cf] {
    font-weight: 600;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    color: rgba(var(--c-gold-soft-rgb), 0.45);
    letter-spacing: -0.01em;
}

@keyframes revealScorePop-b-p20p02x8cf {
    0%   { opacity: 0; transform: scale(0.6); filter: blur(6px); }
    70%  { opacity: 1; transform: scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.reveal-score__meta[b-p20p02x8cf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
}

.reveal-chart[b-p20p02x8cf] {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.reveal-chart[b-p20p02x8cf]  .mud-grid,
.reveal-chart[b-p20p02x8cf]  .mud-grid-item {
    max-width: 100%;
}

.reveal-chart[b-p20p02x8cf]  .mud-chart-legend,
.reveal-chart[b-p20p02x8cf]  .mud-chart-legend-item {
    display: none !important;
}

/* Quiet the duplicate score caption that LiveFeedbackResults renders
   below the chart — our hero score is now the headline. The component
   still keeps it for context, just dialed down. */
.reveal-chart[b-p20p02x8cf]  .mud-typography {
    font-size: 0.95rem !important;
}

.reveal-card--enter[b-p20p02x8cf] {
    animation: revealCardEnter-b-p20p02x8cf 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes revealCardEnter-b-p20p02x8cf {
    0%   { opacity: 0; transform: translateY(18px) scale(0.985); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-card--enter[b-p20p02x8cf],
    .reveal-card__sweep[b-p20p02x8cf],
    .reveal-score__value[b-p20p02x8cf] { animation: none; }
    .reveal-score__value[b-p20p02x8cf] { text-shadow: none; }
}

/* ============================================================
   Default landing — atmospheric stage + hero typography +
   glass cards. Mirrors the voting view brand language so the
   transition from "enter code" → "rate beverages" feels seamless.
   ============================================================ */

.landing-stage[b-p20p02x8cf] {
    position: relative;
    background: var(--c-bg-abyss);
    color: var(--c-white);
    box-sizing: border-box;
    min-height: calc(100vh - 64px);
    margin: -16px -16px 0 -16px;
    width: calc(100% + 32px);
    padding: clamp(24px, 5vh, 56px) clamp(16px, 4vw, 56px) clamp(48px, 6vh, 80px);
    overflow: hidden;
}

.landing-stage__content[b-p20p02x8cf] {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
}

.landing-stage__ambient[b-p20p02x8cf] {
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 45%, rgba(var(--c-gold-rgb), 0.18) 0%, rgba(var(--c-gold-rgb), 0.08) 30%, rgba(var(--c-gold-rgb), 0.02) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 25%, rgba(var(--c-violet-rgb), 0.28) 0%, rgba(var(--c-violet-rgb), 0.12) 35%, rgba(var(--c-violet-rgb), 0.03) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 110%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    animation: landingAmbientDrift-b-p20p02x8cf 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes landingAmbientDrift-b-p20p02x8cf {
    0%   { transform: translate3d(-15%, -10%, 0) scale(1.10); }
    100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
}

.landing-stage__noise[b-p20p02x8cf] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.landing-stage__vignette[b-p20p02x8cf] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(var(--c-black-rgb), 0.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .landing-stage__ambient[b-p20p02x8cf] { animation: none; }
}

.landing-hero[b-p20p02x8cf] {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(28px, 4vh, 48px);
    animation: landingEnter-b-p20p02x8cf 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.landing-hero__title[b-p20p02x8cf] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.96;
    font-size: clamp(2.6rem, 6.5vw, 5rem);
    color: var(--c-gold);
    margin: 0 0 16px 0;
    word-break: break-word;
}

.landing-hero__accent[b-p20p02x8cf] {
    width: 64px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto 22px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

.landing-hero__sub[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.5;
    color: rgba(var(--c-gold-soft-rgb), 0.85);
    margin: 0 auto;
    max-width: 52ch;
}

.landing-grid[b-p20p02x8cf] {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 36px);
    align-items: stretch;
    justify-content: center;
    width: 100%;
}

.landing-col[b-p20p02x8cf] {
    position: relative;
    flex: 1 1 auto;
    max-width: 540px;
    width: 100%;
    margin: 0 auto;
    display: flex;
}

.landing-card[b-p20p02x8cf] {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    padding: clamp(24px, 3vw, 36px);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 60px rgba(var(--c-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.landing-card__halo[b-p20p02x8cf] {
    position: absolute;
    inset: -50% -60% -50% -60%;
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.16) 0%, rgba(var(--c-gold-rgb), 0.08) 25%, rgba(var(--c-gold-rgb), 0.025) 55%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    filter: blur(28px);
}

.landing-card--enter[b-p20p02x8cf] {
    animation: landingEnter-b-p20p02x8cf 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 80ms;
}

.landing-card--enter-delay-2[b-p20p02x8cf] {
    animation-delay: 160ms;
}

@keyframes landingEnter-b-p20p02x8cf {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero[b-p20p02x8cf],
    .landing-card--enter[b-p20p02x8cf] { animation: none; }
}

.landing-card__eyebrow[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
}

.landing-card__heading[b-p20p02x8cf] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    color: rgba(var(--c-gold-light-rgb), 0.95);
    margin: 6px 0 0;
}

.landing-card__sub[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.98rem;
    line-height: 1.55;
    color: rgba(var(--c-gold-soft-rgb), 0.75);
    margin: 0;
    max-width: 48ch;
}

[b-p20p02x8cf] .landing-primary-cta {
    width: 100%;
    background: linear-gradient(135deg, var(--c-gold), var(--c-gold-pale)) !important;
    color: var(--c-bg-deep) !important;
    font-weight: 700 !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    letter-spacing: 0.01em;
    text-transform: none !important;
    box-shadow: 0 16px 30px rgba(var(--c-gold-pale-rgb), 0.32);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

[b-p20p02x8cf] .landing-primary-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 36px rgba(var(--c-gold-pale-rgb), 0.42);
}

[b-p20p02x8cf] .landing-primary-cta.mud-button-disabled,
[b-p20p02x8cf] .landing-primary-cta:disabled {
    background: linear-gradient(135deg, var(--c-gold), var(--c-gold-pale)) !important;
    color: var(--c-bg-deep) !important;
    opacity: 0.7;
}

[b-p20p02x8cf] .landing-primary-cta .mud-progress-circular-circle {
    color: var(--c-bg-deep) !important;
    stroke: var(--c-bg-deep) !important;
}

[b-p20p02x8cf] .landing-secondary-cta {
    margin-top: 8px;
    width: 100%;
    background: transparent !important;
    color: rgba(var(--c-gold-light-rgb), 0.95) !important;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.45) !important;
    font-weight: 600 !important;
    border-radius: 14px !important;
    padding: 13px 18px !important;
    font-size: 0.98rem !important;
    letter-spacing: 0.01em;
    text-transform: none !important;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

[b-p20p02x8cf] .landing-secondary-cta:hover {
    background: rgba(var(--c-gold-rgb), 0.08) !important;
    border-color: rgba(var(--c-gold-rgb), 0.7) !important;
    transform: translateY(-1px);
}

.landing-feature-list[b-p20p02x8cf] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 4px 0 8px;
}

.landing-feature-item[b-p20p02x8cf] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(var(--c-white-rgb), 0.025);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.10);
}

.landing-feature-icon[b-p20p02x8cf] {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--c-gold-rgb), 0.10);
    color: var(--c-gold-soft);
}

.landing-feature-text[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: rgba(var(--c-gold-soft-rgb), 0.85);
}

.landing-error[b-p20p02x8cf] {
    background: linear-gradient(145deg, rgba(var(--c-red-rgb), 0.12) 0%, rgba(var(--c-red-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--c-red-rgb), 0.32);
    color: var(--c-red-soft);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.92rem;
    line-height: 1.45;
}

.landing-card__divider[b-p20p02x8cf] {
    height: 1px;
    margin: 4px 0;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--c-gold-soft-rgb), 0.18) 50%, transparent 100%);
}

/* Inputs inside the join form — bring them into the brand. */
.landing-card[b-p20p02x8cf]  .mud-input.mud-input-filled {
    background: rgba(var(--c-white-rgb), 0.04) !important;
    border-radius: 12px;
}

.landing-card[b-p20p02x8cf]  .mud-input-filled-input {
    color: var(--c-gold-soft);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.landing-card[b-p20p02x8cf]  .mud-input-label {
    color: rgba(var(--c-gold-soft-rgb), 0.55) !important;
}

.landing-card[b-p20p02x8cf]  .mud-input-filled:after,
.landing-card[b-p20p02x8cf]  .mud-input-filled:before {
    border-bottom-color: rgba(var(--c-gold-soft-rgb), 0.35) !important;
}

.landing-card[b-p20p02x8cf]  .mud-input-filled.mud-focused:after {
    border-bottom-color: var(--c-gold) !important;
}

@media (min-width: 960px) {
    .landing-grid--with-secondary[b-p20p02x8cf] {
        flex-direction: row;
        align-items: stretch;
    }

    .landing-grid--with-secondary .landing-col[b-p20p02x8cf] {
        flex: 1 1 0;
        max-width: 520px;
        margin: 0;
    }
}

/* ---------- Tagline rotator (under hero subhead) ---------- */
.landing-tagline[b-p20p02x8cf] {
    position: relative;
    height: 1.5em;
    margin-top: 14px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
}

.landing-tagline__phrase[b-p20p02x8cf] {
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(4px);
    animation: taglineRotate-b-p20p02x8cf 12s ease-in-out infinite;
}

.landing-tagline__phrase:nth-child(1)[b-p20p02x8cf] { animation-delay: 0s; }
.landing-tagline__phrase:nth-child(2)[b-p20p02x8cf] { animation-delay: 4s; }
.landing-tagline__phrase:nth-child(3)[b-p20p02x8cf] { animation-delay: 8s; }

@keyframes taglineRotate-b-p20p02x8cf {
    0%   { opacity: 0; transform: translateY(4px); }
    4%   { opacity: 1; transform: translateY(0); }
    29%  { opacity: 1; transform: translateY(0); }
    33%  { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 0; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .landing-tagline__phrase[b-p20p02x8cf] {
        animation: none;
    }
    .landing-tagline__phrase:nth-child(1)[b-p20p02x8cf] { opacity: 1; transform: none; }
    .landing-tagline__phrase:nth-child(2)[b-p20p02x8cf],
    .landing-tagline__phrase:nth-child(3)[b-p20p02x8cf] { display: none; }
}

/* ---------- 7-digit chip input (typographic display) ---------- */
.code-chips[b-p20p02x8cf] {
    display: flex;
    justify-content: center;
    gap: clamp(4px, 1vw, 10px);
    width: 100%;
    margin: 12px 0 6px;
}

.code-chip[b-p20p02x8cf] {
    flex: 1 1 0;
    min-width: 0;
    max-width: 78px;
    aspect-ratio: 3 / 4;
    background: rgba(var(--c-white-rgb), 0.025);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.16);
    border-radius: 14px;
    color: rgba(var(--c-gold-rgb), 0.18);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-size: clamp(2rem, 6vw, 3.4rem);
    line-height: 1;
    text-align: center;
    text-shadow: 0 4px 18px rgba(var(--c-gold-rgb), 0.18);
    outline: none;
    caret-color: transparent;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.25s ease, transform 0.18s ease;
    padding: 0;
}

.code-chip[b-p20p02x8cf]::placeholder {
    color: rgba(var(--c-gold-soft-rgb), 0.10);
}

.code-chip:hover:not(:disabled)[b-p20p02x8cf] {
    border-color: rgba(var(--c-gold-soft-rgb), 0.32);
}

.code-chip:focus-visible[b-p20p02x8cf] {
    border-color: rgba(var(--c-gold-rgb), 0.7);
    background: rgba(var(--c-gold-rgb), 0.04);
    box-shadow: 0 0 0 3px rgba(var(--c-gold-rgb), 0.18), 0 10px 24px -8px rgba(var(--c-gold-rgb), 0.28);
    transform: translateY(-1px);
}

.code-chip--filled[b-p20p02x8cf] {
    color: var(--c-gold);
    border-color: rgba(var(--c-gold-rgb), 0.45);
    background: rgba(var(--c-gold-rgb), 0.04);
}

.code-chip:disabled[b-p20p02x8cf] {
    opacity: 0.5;
    cursor: not-allowed;
}

.code-chip--invalid[b-p20p02x8cf] {
    border-color: rgba(var(--c-red-rgb), 0.55);
    animation: chipShake-b-p20p02x8cf 360ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes chipShake-b-p20p02x8cf {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
}

@media (prefers-reduced-motion: reduce) {
    .code-chip--invalid[b-p20p02x8cf] { animation: none; }
}

/* ============================================================
   Waiting screen — host hasn't started or moved to first item.
   Reuses the landing depth stack + hero typography so the
   transition into the voting view feels continuous.
   ============================================================ */

.waiting-stage[b-p20p02x8cf] {
    position: relative;
    background: var(--c-bg-abyss);
    color: var(--c-white);
    box-sizing: border-box;
    min-height: calc(100vh - 64px);
    margin: -16px -16px 0 -16px;
    width: calc(100% + 32px);
    padding: clamp(24px, 5vh, 56px) clamp(16px, 4vw, 56px) clamp(48px, 6vh, 80px);
    overflow: hidden;
}

.waiting-stage__content[b-p20p02x8cf] {
    position: relative;
    z-index: 1;
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
    animation: landingEnter-b-p20p02x8cf 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.waiting-eyebrow[b-p20p02x8cf] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    margin-bottom: 18px;
}

.waiting-eyebrow__pulse[b-p20p02x8cf] {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-gold);
    box-shadow: 0 0 10px rgba(var(--c-gold-rgb), 0.7);
}

.waiting-eyebrow__pulse[b-p20p02x8cf]::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(var(--c-gold-rgb), 0.55);
    animation: waitingPulse-b-p20p02x8cf 1.8s ease-out infinite;
}

@keyframes waitingPulse-b-p20p02x8cf {
    0%   { transform: scale(0.6); opacity: 0.85; }
    80%  { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}

.waiting-title[b-p20p02x8cf] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.96;
    font-size: clamp(2.4rem, 6.5vw, 5rem);
    color: var(--c-gold);
    margin: 0 0 16px 0;
    word-break: break-word;
}

.waiting-accent[b-p20p02x8cf] {
    width: 64px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto 22px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

.waiting-sub[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    line-height: 1.55;
    color: rgba(var(--c-gold-soft-rgb), 0.85);
    margin: 0 auto;
    max-width: 52ch;
}

.waiting-status[b-p20p02x8cf] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: clamp(28px, 4vh, 40px) auto 0;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    color: rgba(var(--c-gold-light-rgb), 0.85);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.01em;
    box-shadow: 0 18px 36px -16px rgba(var(--c-black-rgb), 0.55);
}

.waiting-status__dots[b-p20p02x8cf] {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.waiting-status__dots span[b-p20p02x8cf] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(var(--c-gold-rgb), 0.85);
    animation: waitingDots-b-p20p02x8cf 1.4s ease-in-out infinite;
}

.waiting-status__dots span:nth-child(2)[b-p20p02x8cf] { animation-delay: 0.2s; }
.waiting-status__dots span:nth-child(3)[b-p20p02x8cf] { animation-delay: 0.4s; }

@keyframes waitingDots-b-p20p02x8cf {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(-3px); }
}

.waiting-cta-row[b-p20p02x8cf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: clamp(28px, 4vh, 40px);
}

.waiting-card[b-p20p02x8cf] {
    position: relative;
    max-width: 560px;
    margin: clamp(28px, 4vh, 40px) auto 0;
    padding: clamp(20px, 2.5vw, 28px);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 60px rgba(var(--c-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    text-align: left;
}

.waiting-card__halo[b-p20p02x8cf] {
    position: absolute;
    inset: -50% -60% -50% -60%;
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.16) 0%, rgba(var(--c-gold-rgb), 0.08) 25%, rgba(var(--c-gold-rgb), 0.025) 55%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    filter: blur(28px);
}

.waiting-card__row[b-p20p02x8cf] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.waiting-card__copy[b-p20p02x8cf] {
    flex: 1 1 260px;
    min-width: 0;
}

.waiting-card__eyebrow[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    margin-bottom: 6px;
}

.waiting-card__text[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 0.98rem;
    line-height: 1.5;
    color: rgba(var(--c-gold-soft-rgb), 0.85);
    margin: 0;
}

.waiting-warning[b-p20p02x8cf] {
    max-width: 560px;
    margin: clamp(24px, 3vh, 32px) auto 0;
    padding: 14px 18px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(var(--c-gold-rgb), 0.10) 0%, rgba(var(--c-gold-rgb), 0.03) 100%);
    border: 1px solid rgba(var(--c-gold-rgb), 0.32);
    color: rgba(var(--c-gold-light-rgb), 0.95);
    font-size: 0.96rem;
    line-height: 1.5;
    text-align: left;
}

/* Live "X others in the room" chip — visual rhyme with the status pill but smaller. */
.waiting-room-count[b-p20p02x8cf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: clamp(14px, 2vh, 18px) auto 0;
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.04) 0%, rgba(var(--c-white-rgb), 0.01) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: rgba(var(--c-gold-soft-rgb), 0.7);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
}

.waiting-room-count__num[b-p20p02x8cf] {
    color: var(--c-gold);
    font-weight: 700;
}

.waiting-room-count--pulse[b-p20p02x8cf] {
    animation: roomCountPulse-b-p20p02x8cf 520ms ease-out;
}

@keyframes roomCountPulse-b-p20p02x8cf {
    0% {
        border-color: rgba(var(--c-gold-rgb), 0.55);
        box-shadow: 0 0 0 0 rgba(var(--c-gold-rgb), 0.35);
    }
    100% {
        border-color: rgba(var(--c-gold-soft-rgb), 0.14);
        box-shadow: 0 0 0 10px rgba(var(--c-gold-rgb), 0);
    }
}

/* Lineup teaser — horizontal drift strip of upcoming bottle silhouettes. */
.lineup-teaser[b-p20p02x8cf] {
    position: relative;
    margin: clamp(36px, 5vh, 56px) calc(-1 * clamp(16px, 4vw, 56px)) 0;
    padding: 8px 0;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.lineup-teaser__eyebrow[b-p20p02x8cf] {
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.45);
    text-align: center;
    margin-bottom: 14px;
}

.lineup-teaser__track[b-p20p02x8cf] {
    display: flex;
    gap: clamp(28px, 4vw, 56px);
    width: max-content;
    animation: lineupDrift-b-p20p02x8cf 48s linear infinite;
    will-change: transform;
}

.lineup-teaser__item[b-p20p02x8cf] {
    flex: 0 0 auto;
    height: clamp(96px, 14vh, 140px);
    opacity: 0.55;
    filter: drop-shadow(0 14px 24px rgba(var(--c-black-rgb), 0.55)) drop-shadow(0 2px 8px rgba(var(--c-gold-rgb), 0.06));
    transition: opacity 240ms ease;
}

.lineup-teaser__item img[b-p20p02x8cf] {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.lineup-teaser:hover .lineup-teaser__item[b-p20p02x8cf] { opacity: 0.7; }

@keyframes lineupDrift-b-p20p02x8cf {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Theatrical handoff: brief expanding gold ring when the host starts. */
.start-primer[b-p20p02x8cf] {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(var(--c-gold-rgb), 0.12) 0%, rgba(var(--c-bg-abyss-rgb), 0) 60%);
    animation: primerWash-b-p20p02x8cf 700ms ease-out forwards;
}

.start-primer__ring[b-p20p02x8cf] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(var(--c-gold-rgb), 0.9) 0%, rgba(var(--c-gold-rgb), 0.4) 40%, transparent 70%);
    box-shadow: 0 0 0 0 rgba(var(--c-gold-rgb), 0.8);
    animation: primerRing-b-p20p02x8cf 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes primerWash-b-p20p02x8cf {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes primerRing-b-p20p02x8cf {
    0%   { transform: scale(0.4); box-shadow: 0 0 0 0 rgba(var(--c-gold-rgb), 0.8), 0 0 40px 10px rgba(var(--c-gold-rgb), 0.3); opacity: 1; }
    100% { transform: scale(60); box-shadow: 0 0 0 0 rgba(var(--c-gold-rgb), 0), 0 0 80px 30px rgba(var(--c-gold-rgb), 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .waiting-stage__content[b-p20p02x8cf] { animation: none; }
    .waiting-eyebrow__pulse[b-p20p02x8cf]::before,
    .waiting-status__dots span[b-p20p02x8cf] { animation: none; }
    .lineup-teaser__track[b-p20p02x8cf] { animation: none; }
    .waiting-room-count--pulse[b-p20p02x8cf] { animation: none; }
    .start-primer[b-p20p02x8cf],
    .start-primer__ring[b-p20p02x8cf] { animation-duration: 200ms; }
}
/* /Components/Pages/Results.razor.rz.scp.css */
/* ============================================================================
   Results page — brand-aligned podium + leaderboard + quiz recap.

   Star of the show: the rank-1 podium card (gold halo + glass surface).
   Visual rhyming: hero accent bar + podium halos + scoreboard borders all
   echo the same gold/cream alpha vocabulary used elsewhere in the app.
   Depth: page-level ambient + noise + vignette stack mirrors Host/Join.

   Overflow rules:
   - Hero wrapper does NOT clip (was previously max-height: 90vh; overflow:hidden
     which clipped the rank-1 elevator translate on shorter laptops).
   - Podium row sizes from content; elevator translate is absorbed by padding-top.
   - All long item names use clamp + balance + overflow-wrap to never escape.
   ============================================================================ */

/* -------- Page depth stage --------------------------------------------- */
.results-stage[b-lzxdkti7e2] {
    position: relative;
    min-height: 100vh;
    background: var(--c-bg-abyss);
    /* Clip both axes. max-width pins the stage to the viewport on mobile so
       off-stage podium columns at translateX(120%) cannot push horizontal
       page width. */
    overflow: hidden;
    max-width: 100vw;
}

.results-stage__content[b-lzxdkti7e2] {
    position: relative;
    z-index: 1;
}

.results-stage__ambient[b-lzxdkti7e2] {
    /* Fixed (not absolute) so the animated scale/translate is clipped by the
       viewport instead of extending the document height — otherwise the page
       scrollbar thumb oscillates in time with the 22s drift animation. */
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 25%, rgba(var(--c-gold-rgb), 0.18) 0%, rgba(var(--c-gold-rgb), 0.08) 30%, rgba(var(--c-gold-rgb), 0.02) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 18%, rgba(var(--c-violet-rgb), 0.28) 0%, rgba(var(--c-violet-rgb), 0.12) 35%, rgba(var(--c-violet-rgb), 0.03) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 105%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    animation: resultsAmbientDrift-b-lzxdkti7e2 22s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes resultsAmbientDrift-b-lzxdkti7e2 {
    0%   { transform: translate3d(-12%, -8%, 0) scale(1.10); }
    100% { transform: translate3d(12%, 10%, 0) scale(1.22); }
}

.results-stage__noise[b-lzxdkti7e2] {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.results-stage__vignette[b-lzxdkti7e2] {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(var(--c-black-rgb), 0.55) 100%);
}

@media (prefers-reduced-motion: reduce) {
    .results-stage__ambient[b-lzxdkti7e2] { animation: none; }
}

/* -------- Loading -------------------------------------------------------- */
.loading-state[b-lzxdkti7e2] {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: rgba(var(--c-gold-soft-rgb), 0.7);
}

/* -------- Hero ---------------------------------------------------------- */
.hero-wrapper[b-lzxdkti7e2] {
    position: relative;
    width: min(1800px, 96vw);
    margin: 0 auto;
    padding: clamp(2.4rem, 5vh, 4.5rem) clamp(1.2rem, 4vw, 4rem) clamp(2.4rem, 4vh, 4rem);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Explicit starting max-height is required for the collapse transition to
       interpolate. `auto` cannot be animated. 4000px easily fits the podium
       on any viewport without clipping. */
    max-height: 4000px;
    transform-origin: top center;
    /* Two staged transitions:
       • Visual fade (opacity / transform / blur) runs first — 1100ms.
       • Layout collapse (max-height / padding / margin) is delayed so the
         page doesn't snap up while the podium is still visible. */
    transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 1100ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 1100ms cubic-bezier(0.22, 1, 0.36, 1),
                max-height 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms,
                padding 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms,
                margin 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms;
    will-change: opacity, transform, filter, max-height;
}

.hero-wrapper.hero-hidden[b-lzxdkti7e2] {
    opacity: 0;
    transform: translateY(-32px) scale(0.96);
    filter: blur(6px);
    pointer-events: none;
    max-height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0 auto;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .hero-wrapper[b-lzxdkti7e2] { transition: opacity 250ms linear, max-height 250ms linear; }
    .hero-wrapper.hero-hidden[b-lzxdkti7e2] { transform: none; filter: none; }
}

.results-hero[b-lzxdkti7e2] {
    text-align: center;
    container-type: inline-size;
    container-name: results-hero;
    margin-bottom: clamp(1rem, 2vh, 2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

/* MudText emits its own h1; ::deep is required so this scoped rule applies. */
[b-lzxdkti7e2] .tasting-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    letter-spacing: -0.035em !important;
    line-height: 0.98 !important;
    color: var(--c-gold) !important;
    font-size: clamp(2.6rem, 11cqi, 6rem) !important;
    text-shadow: 0 0 60px rgba(var(--c-gold-rgb), 0.30), 0 8px 28px rgba(var(--c-black-rgb), 0.55);
    text-wrap: balance;
    overflow-wrap: anywhere;
    max-width: 22ch;
    margin: 0 !important;
    text-transform: none !important;
}

[b-lzxdkti7e2] .tasting-title.tasting-title--mid {
    font-size: clamp(2.2rem, 9.5cqi, 4.4rem) !important;
    line-height: 1.02 !important;
}
[b-lzxdkti7e2] .tasting-title.tasting-title--long {
    font-size: clamp(1.9rem, 8cqi, 3.6rem) !important;
    line-height: 1.06 !important;
}
[b-lzxdkti7e2] .tasting-title.tasting-title--xlong {
    font-size: clamp(1.6rem, 6.5cqi, 2.8rem) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.02em !important;
}

.results-hero__accent[b-lzxdkti7e2] {
    width: 72px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
    margin-top: 22px;
}

/* -------- Podium -------------------------------------------------------- */
.podium-wrapper[b-lzxdkti7e2] {
    position: relative;
    margin-top: clamp(2.5rem, 5vh, 5rem);
    /* leave room above for the rank-1 elevator translate (-90px) */
    padding-top: clamp(60px, 10vh, 110px);
    width: min(1500px, 94vw);
    margin-left: auto;
    margin-right: auto;
}

.podium-halo[b-lzxdkti7e2] {
    position: absolute;
    left: 50%;
    top: 12%;
    width: clamp(420px, 50%, 720px);
    height: clamp(360px, 60%, 640px);
    transform: translateX(-50%);
    background: radial-gradient(ellipse 50% 45% at 50% 45%, rgba(var(--c-gold-rgb), 0.22) 0%, rgba(var(--c-gold-rgb), 0.10) 28%, rgba(var(--c-gold-rgb), 0.03) 55%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(30px);
    /* Stay hidden until at least one podium column has revealed — otherwise
       a lone gold blob hovers in the middle of the screen during the wait. */
    opacity: 0;
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.podium-wrapper:has(.podium-column.revealed) .podium-halo[b-lzxdkti7e2] {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .podium-halo[b-lzxdkti7e2] { transition: none; }
}

.podium-grid[b-lzxdkti7e2] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: clamp(1rem, 1.8vw, 2.4rem);
    align-items: end;
}

.podium-column[b-lzxdkti7e2] {
    position: relative;
    padding-bottom: clamp(2rem, 4vh, 3.5rem);
    overflow: visible;
    --podium-elevation: 0px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    min-width: 0;
}

.podium-column.revealed[b-lzxdkti7e2] {
    opacity: 1;
    pointer-events: auto;
}

.podium-column.empty-slot[b-lzxdkti7e2] {
    visibility: hidden;
    pointer-events: none;
}

/* Per-rank elevation: rank-1 lifts highest, rank-2 mid, rank-3 lowest. */
.podium-column.rank-1[b-lzxdkti7e2] { --podium-elevation: -56px; }
.podium-column.rank-2[b-lzxdkti7e2] { --podium-elevation: 18px; }
.podium-column.rank-3[b-lzxdkti7e2] { --podium-elevation: 50px; }

.podium-elevator[b-lzxdkti7e2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transform: translateY(140%);
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), filter 0.9s ease;
    min-width: 0;
}

.podium-column.revealed .podium-elevator[b-lzxdkti7e2] {
    transform: translateY(var(--podium-elevation));
    filter: drop-shadow(0 28px 54px rgba(var(--c-bg-ink-rgb), 0.55));
}

@media (prefers-reduced-motion: reduce) {
    .podium-elevator[b-lzxdkti7e2] { transition: opacity 0.4s ease; transform: none; }
    .podium-column.revealed .podium-elevator[b-lzxdkti7e2] { transform: none; }
}

/* Glass card recipe shared with the rest of the app, tinted per rank. */
.podium-stage[b-lzxdkti7e2] {
    position: relative;
    padding: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1.2rem, 2vw, 2rem) clamp(1.4rem, 2vw, 2rem);
    border-radius: 26px 26px 18px 18px;
    background: linear-gradient(160deg, rgba(var(--c-white-rgb), 0.06) 0%, rgba(var(--c-white-rgb), 0.018) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.18);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 30px 60px -20px rgba(var(--c-black-rgb), 0.65), inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.7rem, 1.2vw, 1.1rem);
    text-align: center;
    overflow: hidden;
    min-width: 0;
    width: 100%;
}

.podium-stage__halo[b-lzxdkti7e2] {
    position: absolute;
    inset: -55% -65% -55% -65%;
    pointer-events: none;
    z-index: -1;
    filter: blur(28px);
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.16) 0%, rgba(var(--c-gold-rgb), 0.06) 30%, transparent 65%);
}

/* Rank tinting — gold for #1, cream for #2, bronze for #3, all in brand alpha. */
.podium-stage.podium-rank-1[b-lzxdkti7e2] {
    border-color: rgba(var(--c-gold-rgb), 0.42);
    box-shadow: 0 36px 80px -22px rgba(var(--c-black-rgb), 0.7), inset 0 1px 0 rgba(var(--c-white-rgb), 0.10), 0 0 80px rgba(var(--c-gold-rgb), 0.12);
}
.podium-stage.podium-rank-1 .podium-stage__halo[b-lzxdkti7e2] {
    background: radial-gradient(ellipse 50% 45% at 50% 45%, rgba(var(--c-gold-rgb), 0.30) 0%, rgba(var(--c-gold-rgb), 0.12) 28%, rgba(var(--c-gold-rgb), 0.03) 55%, transparent 100%);
}
/* Silver lighting for rank-2 (cool platinum, brand-tinted). */
.podium-stage.podium-rank-2[b-lzxdkti7e2] {
    border-color: rgba(var(--c-mist-rgb), 0.40);
    box-shadow: 0 32px 70px -22px rgba(var(--c-black-rgb), 0.65), inset 0 1px 0 rgba(var(--c-white-rgb), 0.10), 0 0 60px rgba(var(--c-mist-rgb), 0.10);
}
.podium-stage.podium-rank-2 .podium-stage__halo[b-lzxdkti7e2] {
    background:
        radial-gradient(ellipse 50% 45% at 50% 45%, rgba(var(--c-mist-light-rgb), 0.28) 0%, rgba(var(--c-mist-rgb), 0.12) 28%, rgba(var(--c-mist-rgb), 0.03) 55%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 40%, rgba(var(--c-mist-muted-rgb), 0.10) 0%, rgba(var(--c-mist-muted-rgb), 0.03) 50%, transparent 100%);
}

/* Bronze lighting for rank-3 (warm copper). */
.podium-stage.podium-rank-3[b-lzxdkti7e2] {
    border-color: rgba(var(--c-bronze-rgb), 0.40);
    box-shadow: 0 32px 70px -22px rgba(var(--c-black-rgb), 0.65), inset 0 1px 0 rgba(var(--c-white-rgb), 0.10), 0 0 60px rgba(var(--c-bronze-rgb), 0.10);
}
.podium-stage.podium-rank-3 .podium-stage__halo[b-lzxdkti7e2] {
    background:
        radial-gradient(ellipse 50% 45% at 50% 45%, rgba(var(--c-bronze-rgb), 0.28) 0%, rgba(var(--c-tan-rgb), 0.12) 28%, rgba(var(--c-tan-rgb), 0.03) 55%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 40%, rgba(var(--c-tan-deep-rgb), 0.10) 0%, rgba(var(--c-tan-deep-rgb), 0.03) 50%, transparent 100%);
}

/* Rank-1 stage is taller than the others to anchor the eye. Heights use min()
   so the cards never get *taller* than the viewport allows, regardless of
   aspect ratio. On 21:9 (short + wide) we collapse to vh; on 4:3 (tall) we
   collapse to vw so the columns stay legible. */
.podium-column.rank-1 .podium-stage[b-lzxdkti7e2] { min-height: min(clamp(340px, 46vh, 480px), 38vw); }
.podium-column.rank-2 .podium-stage[b-lzxdkti7e2] { min-height: min(clamp(300px, 40vh, 420px), 34vw); }
.podium-column.rank-3 .podium-stage[b-lzxdkti7e2] { min-height: min(clamp(280px, 36vh, 380px), 31vw); }

/* -------- Aspect-ratio fitting ------------------------------------------ */
/* Short / wide viewports (21:9 ultrawide laptops) — pull the podium in
   visually instead of letting it stretch all the way to 1500px, and shrink
   the rank-1 elevation so the card doesn't punch into the hero text. */
@media (min-aspect-ratio: 16/9) and (min-width: 1024px) {
    .podium-wrapper[b-lzxdkti7e2] { width: min(1300px, 88vw); }
    .podium-column.rank-1[b-lzxdkti7e2] { --podium-elevation: -36px; }
    .hero-wrapper[b-lzxdkti7e2] { padding-top: clamp(1.6rem, 3vh, 3rem); padding-bottom: clamp(1.6rem, 3vh, 3rem); }
    .results-hero[b-lzxdkti7e2] { margin-bottom: clamp(0.8rem, 1.5vh, 1.6rem); }
    .podium-wrapper[b-lzxdkti7e2] { padding-top: clamp(40px, 6vh, 80px); margin-top: clamp(1.2rem, 3vh, 3rem); }
}

/* Tall viewports (4:3, portrait laptops, scaled tablets) — give cards more
   air at the top and shrink the platform so the layout doesn't look squat. */
@media (max-aspect-ratio: 5/4) and (min-width: 700px) {
    .podium-wrapper[b-lzxdkti7e2] { width: min(960px, 90vw); }
    .podium-column.rank-1 .podium-stage[b-lzxdkti7e2] { min-height: min(420px, 32vh); }
    .podium-column.rank-2 .podium-stage[b-lzxdkti7e2] { min-height: min(360px, 28vh); }
    .podium-column.rank-3 .podium-stage[b-lzxdkti7e2] { min-height: min(340px, 26vh); }
}

/* Subtle slow lift for the empty card (no scale overshoot — sub-elements
   stage in next, so the stage itself stays calm). */
.podium-column.revealed .podium-stage[b-lzxdkti7e2] {
    animation: podium-rise-b-lzxdkti7e2 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes podium-rise-b-lzxdkti7e2 {
    0%   { transform: translateY(36px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .podium-column.revealed .podium-stage[b-lzxdkti7e2] { animation: none; }
}

/* -------- Staged podium sub-reveal -------------------------------------- */
/* Each child of .podium-stage starts hidden and animates in with a delay
   keyed on its position in the reveal sequence. The sequence is:
     0ms       card lifts in (handled by .podium-stage above, ~900ms)
     900ms     points appear + count-up begins (JS-driven via tasteParty.countUpPodium)
     1700ms    image + medal fade in
     2200ms    label fades in
     2500ms    caption fades in
     2800ms    rank-tinted halo blooms
   Total settle: ~3300ms per rank. */

/* MudText labels are scoped behind ::deep because MudText emits its own DOM. */
.podium-image-container[b-lzxdkti7e2],
[b-lzxdkti7e2] .podium-stage .podium-medal,
[b-lzxdkti7e2] .podium-stage .podium-label,
[b-lzxdkti7e2] .podium-stage .podium-caption,
.podium-stage .podium-points[b-lzxdkti7e2] {
    opacity: 0;
    transform: translateY(8px);
    transition: none;
}

/* Halo defaults to hidden so it cannot leak before the label arrives. */
.podium-stage__halo[b-lzxdkti7e2] {
    opacity: 0;
    transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.podium-column.revealed .podium-points[b-lzxdkti7e2] {
    animation: podiumChildIn-b-lzxdkti7e2 600ms cubic-bezier(0.22, 1, 0.36, 1) 900ms both;
}
.podium-column.revealed .podium-image-container[b-lzxdkti7e2] {
    animation: podiumChildIn-b-lzxdkti7e2 700ms cubic-bezier(0.22, 1, 0.36, 1) 1700ms both;
}
.podium-column.revealed[b-lzxdkti7e2]  .podium-stage .podium-medal {
    animation: podiumMedalIn-b-lzxdkti7e2 600ms cubic-bezier(0.22, 1, 0.36, 1) 1900ms both;
}
.podium-column.revealed[b-lzxdkti7e2]  .podium-stage .podium-label {
    animation: podiumChildIn-b-lzxdkti7e2 600ms cubic-bezier(0.22, 1, 0.36, 1) 2200ms both;
}
.podium-column.revealed[b-lzxdkti7e2]  .podium-stage .podium-caption {
    animation: podiumChildIn-b-lzxdkti7e2 600ms cubic-bezier(0.22, 1, 0.36, 1) 2500ms both;
}
.podium-column.revealed .podium-stage__halo[b-lzxdkti7e2] {
    opacity: 1;
    transition-delay: 2800ms;
}
.podium-column.rank-1.revealed .podium-stage__halo[b-lzxdkti7e2] {
    transition-delay: 3000ms;
}

@keyframes podiumChildIn-b-lzxdkti7e2 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes podiumMedalIn-b-lzxdkti7e2 {
    0%   { opacity: 0; transform: scale(0.6) rotate(-12deg); }
    60%  { opacity: 1; transform: scale(1.12) rotate(4deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
    .podium-image-container[b-lzxdkti7e2],
    [b-lzxdkti7e2] .podium-stage .podium-medal,
    [b-lzxdkti7e2] .podium-stage .podium-label,
    [b-lzxdkti7e2] .podium-stage .podium-caption,
    .podium-stage .podium-points[b-lzxdkti7e2] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .podium-stage__halo[b-lzxdkti7e2] { opacity: 1 !important; transition: none !important; }
}

/* -------- Custom podium points readout (replaces MudChip) --------------- */
.podium-points[b-lzxdkti7e2] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    background: rgba(var(--c-gold-rgb), 0.18);
    border: 1px solid rgba(var(--c-gold-rgb), 0.35);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    color: var(--c-gold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.podium-points__value[b-lzxdkti7e2] {
    font-weight: 800;
    font-size: 1.18em;
    color: var(--c-gold);
    min-width: 2.2ch;
    text-align: right;
}

.podium-points__sep[b-lzxdkti7e2] {
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    margin: 0 0.05em;
}

.podium-points__max[b-lzxdkti7e2] {
    color: rgba(var(--c-gold-light-rgb), 0.85);
}

.podium-points__unit[b-lzxdkti7e2] {
    margin-left: 0.25em;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-weight: 700;
}

/* Silver tinting for rank-2 chip. */
.podium-stage.podium-rank-2 .podium-points[b-lzxdkti7e2] {
    background: rgba(var(--c-mist-rgb), 0.16);
    border-color: rgba(var(--c-mist-rgb), 0.40);
    color: rgba(var(--c-mist-light-rgb), 0.95);
}
.podium-stage.podium-rank-2 .podium-points__value[b-lzxdkti7e2] { color: rgba(var(--c-mist-pale-rgb), 1); }
.podium-stage.podium-rank-2 .podium-points__max[b-lzxdkti7e2] { color: rgba(var(--c-mist-light-rgb), 0.85); }

/* Bronze tinting for rank-3 chip. */
.podium-stage.podium-rank-3 .podium-points[b-lzxdkti7e2] {
    background: rgba(var(--c-bronze-rgb), 0.16);
    border-color: rgba(var(--c-bronze-rgb), 0.40);
    color: rgba(var(--c-sand-rgb), 0.95);
}
.podium-stage.podium-rank-3 .podium-points__value[b-lzxdkti7e2] { color: rgba(var(--c-peach-rgb), 1); }
.podium-stage.podium-rank-3 .podium-points__max[b-lzxdkti7e2] { color: rgba(var(--c-sand-rgb), 0.85); }

.podium-platform[b-lzxdkti7e2] {
    margin-top: -16px;
    width: 88%;
    height: 36px;
    border-radius: 0 0 28px 28px;
    background: linear-gradient(180deg, rgba(var(--c-bg-abyss-rgb), 0.85) 0%, rgba(var(--c-bg-abyss-rgb), 0.4) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.10);
    border-top: none;
    box-shadow: 0 22px 40px rgba(var(--c-black-rgb), 0.45);
    align-self: center;
}

.podium-platform.podium-rank-1[b-lzxdkti7e2] { box-shadow: 0 26px 48px rgba(var(--c-gold-rgb), 0.10), 0 22px 40px rgba(var(--c-black-rgb), 0.5); }

.podium-medal[b-lzxdkti7e2] {
    font-size: clamp(2rem, 3.5vw, 3rem);
    filter: drop-shadow(0 8px 16px rgba(var(--c-gold-rgb), 0.5));
    position: absolute;
    top: -10px;
    right: -10px;
    z-index: 2;
}

.podium-image-container[b-lzxdkti7e2] {
    position: relative;
    display: inline-block;
    width: 78%;
    max-width: clamp(160px, 18vw, 260px);
    aspect-ratio: 1;
    flex-shrink: 0;
}

.podium-beverage-image[b-lzxdkti7e2] {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 18px 36px rgba(var(--c-black-rgb), 0.55), 0 0 0 1px rgba(var(--c-gold-soft-rgb), 0.10);
}

/* Star item label — clamps text and never escapes the card. MudText emits a
   <p> inside its own component scope, so the bare class doesn't reach without
   ::deep. The bare rule is kept too for non-MudText nodes (e.g. placeholder). */
.podium-label[b-lzxdkti7e2],
[b-lzxdkti7e2] .podium-label {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    color: var(--c-gold) !important;
    letter-spacing: -0.01em !important;
    font-size: clamp(1.2rem, 2vw, 1.9rem) !important;
    line-height: 1.15 !important;
    margin: 0 !important;
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: anywhere;
    hyphens: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.podium-stage.podium-rank-2 .podium-label[b-lzxdkti7e2],
.podium-stage.podium-rank-2[b-lzxdkti7e2]  .podium-label,
.podium-stage.podium-rank-3 .podium-label[b-lzxdkti7e2],
.podium-stage.podium-rank-3[b-lzxdkti7e2]  .podium-label {
    color: rgba(var(--c-gold-light-rgb), 0.95) !important;
}

.podium-caption[b-lzxdkti7e2],
[b-lzxdkti7e2] .podium-caption {
    color: rgba(var(--c-stone-rgb), 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    max-width: 100%;
    text-wrap: balance;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.podium-stage .mud-chip-root[b-lzxdkti7e2] {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem) !important;
    padding: 0.55rem 1.4rem !important;
    border-radius: 999px !important;
    background: rgba(var(--c-gold-rgb), 0.18) !important;
    color: var(--c-gold) !important;
    border: 1px solid rgba(var(--c-gold-rgb), 0.35) !important;
    font-variant-numeric: tabular-nums;
}

.podium-placeholder[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
}

.podium-placeholder .mud-icon-root[b-lzxdkti7e2] {
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    color: rgba(var(--c-gold-soft-rgb), 0.45);
}

/* -------- Leaderboard -------------------------------------------------- */
.leaderboard-showcase[b-lzxdkti7e2] {
    margin: clamp(3rem, 6vh, 6rem) auto clamp(2rem, 4vh, 4rem);
    max-width: min(1250px, 92vw);
    padding: clamp(2rem, 3.6vw, 3.4rem) clamp(1.4rem, 3.4vw, 3.2rem) clamp(2.4rem, 4vw, 4rem);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.04) 0%, rgba(var(--c-white-rgb), 0.012) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 30px 60px -20px rgba(var(--c-black-rgb), 0.5), inset 0 1px 0 rgba(var(--c-white-rgb), 0.06);
    box-sizing: border-box;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.leaderboard-showcase.lb-visible[b-lzxdkti7e2] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    margin-top: clamp(2rem, 4vh, 3.5rem);
    animation: lbEnter-b-lzxdkti7e2 1100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes lbEnter-b-lzxdkti7e2 {
    from { opacity: 0; transform: translateY(56px) scale(0.985); filter: blur(6px); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .leaderboard-showcase.lb-visible[b-lzxdkti7e2] { animation: none; }
}

.leaderboard-header[b-lzxdkti7e2] {
    text-align: center;
    margin-bottom: clamp(1.6rem, 2.6vh, 2.4rem);
}

[b-lzxdkti7e2] .leaderboard-header .mud-typography {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    color: var(--c-gold) !important;
    letter-spacing: -0.025em !important;
    font-size: clamp(2rem, 4.6vw, 3.4rem) !important;
    text-shadow: 0 0 56px rgba(var(--c-gold-rgb), 0.28), 0 8px 24px rgba(var(--c-black-rgb), 0.5);
    text-transform: none !important;
}

.leaderboard-header[b-lzxdkti7e2]::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
    margin: 14px auto 0;
}

.leaderboard-list[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.8rem, 1.4vw, 1.4rem);
}

/* Individual scoreboard rows are self-contained glass cards. */
.scoreboard-row[b-lzxdkti7e2] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 0.9rem);
    padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1.1rem, 2.2vw, 1.8rem);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.018) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: 0 20px 44px -22px rgba(var(--c-black-rgb), 0.55);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    color: rgba(var(--c-gold-soft-rgb), 0.92);
}

.scoreboard-row:hover[b-lzxdkti7e2] {
    transform: translateY(-4px);
    box-shadow: 0 28px 58px -22px rgba(var(--c-black-rgb), 0.65);
    border-color: rgba(var(--c-gold-soft-rgb), 0.22);
}

.leaderboard-first[b-lzxdkti7e2] {
    border-color: rgba(var(--c-gold-rgb), 0.45);
    /* Subtler gradient than before — the earlier 0.10 → 0.02 wash painted the
       whole card amber-on-amber and read as muddy. Pull the warm tint back to
       the left edge only and let the dark base show through on the right. */
    background: linear-gradient(105deg, rgba(var(--c-gold-rgb), 0.10) 0%, rgba(var(--c-gold-rgb), 0.025) 35%, rgba(var(--c-white-rgb), 0.022) 100%);
    /* Outer warm glow bleeds into the page stage so the row's edges feel
       lit-from-within rather than terminating with a hard rounded rectangle.
       Layer order: deep grounding shadow + wide soft gold spill + tight inner
       highlight. */
    box-shadow:
        0 24px 48px -22px rgba(var(--c-black-rgb), 0.6),
        0 0 80px -10px rgba(var(--c-gold-rgb), 0.22),
        0 0 160px -40px rgba(var(--c-gold-rgb), 0.18),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.06);
}
.leaderboard-first[b-lzxdkti7e2]::before {
    /* Gold left-edge accent rhymes with the title accent bar. */
    content: "";
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.4));
    box-shadow: 0 0 12px rgba(var(--c-gold-rgb), 0.5);
}
.leaderboard-second[b-lzxdkti7e2] {
    border-color: rgba(var(--c-mist-rgb), 0.32);
    background: linear-gradient(105deg, rgba(var(--c-mist-rgb), 0.08) 0%, rgba(var(--c-mist-rgb), 0.02) 35%, rgba(var(--c-white-rgb), 0.018) 100%);
}
.leaderboard-second[b-lzxdkti7e2]::before {
    content: "";
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, rgba(var(--c-mist-light-rgb), 0.85), rgba(var(--c-mist-rgb), 0.3));
}
.leaderboard-third[b-lzxdkti7e2] {
    border-color: rgba(var(--c-bronze-rgb), 0.32);
    background: linear-gradient(105deg, rgba(var(--c-bronze-rgb), 0.08) 0%, rgba(var(--c-bronze-rgb), 0.02) 35%, rgba(var(--c-white-rgb), 0.018) 100%);
}
.leaderboard-third[b-lzxdkti7e2]::before {
    content: "";
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, rgba(var(--c-sand-rgb), 0.85), rgba(var(--c-bronze-rgb), 0.3));
}

.scoreboard-main[b-lzxdkti7e2] {
    display: grid;
    grid-template-columns: clamp(72px, 9vw, 110px) minmax(0, 1fr) auto;
    gap: clamp(0.8rem, 1.6vw, 1.4rem);
    align-items: center;
    width: 100%;
    min-width: 0;
}

.scoreboard-image-container[b-lzxdkti7e2] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(64px, 8vw, 96px);
    height: clamp(64px, 8vw, 96px);
    flex-shrink: 0;
}

.scoreboard-medal[b-lzxdkti7e2] {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: clamp(1.5rem, 1.8vw, 2rem);
    font-weight: 700;
    z-index: 2;
    filter: drop-shadow(0 4px 10px rgba(var(--c-black-rgb), 0.55));
    line-height: 1;
}

.scoreboard-beverage-image[b-lzxdkti7e2] {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(var(--c-black-rgb), 0.4);
}

.scoreboard-body[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.25rem, 0.6vw, 0.5rem);
    min-width: 0;
}

.scoreboard-name[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* BeverageScoreboardRow is a child component, so its MudText DOM lives in a
   separate scope — every text rule needs ::deep to reach it. */
[b-lzxdkti7e2] .scoreboard-name .mud-typography:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: var(--c-gold) !important;
    letter-spacing: -0.015em !important;
    font-size: clamp(1.15rem, 1.7vw, 1.6rem) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-shadow: 0 0 24px rgba(var(--c-gold-rgb), 0.20);
    overflow-wrap: anywhere;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

[b-lzxdkti7e2] .scoreboard-name .mud-typography:last-child {
    color: rgba(var(--c-gold-light-rgb), 0.78) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(0.9rem, 1.1vw, 1.05rem) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    opacity: 1 !important;
    overflow-wrap: anywhere;
}

.scoreboard-points[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
    min-width: 0;
}

[b-lzxdkti7e2] .scoreboard-points .mud-typography:first-child {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    color: var(--c-gold) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em !important;
    font-size: clamp(1.4rem, 2vw, 2.1rem) !important;
    line-height: 1 !important;
    margin: 0 !important;
    text-shadow: 0 0 24px rgba(var(--c-gold-rgb), 0.25);
}

[b-lzxdkti7e2] .scoreboard-points .mud-typography:nth-child(2) {
    color: rgba(var(--c-gold-soft-rgb), 0.55) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.18em !important;
    font-size: clamp(0.72rem, 0.95vw, 0.88rem) !important;
    margin: 0 !important;
    opacity: 1 !important;
}

/* Silver / bronze tinting for runner-up rows so the gold #1 actually pops. */
.leaderboard-second[b-lzxdkti7e2]  .scoreboard-points .mud-typography:first-child,
.leaderboard-second[b-lzxdkti7e2]  .scoreboard-name .mud-typography:first-child {
    color: rgba(var(--c-mist-pale-rgb), 1) !important;
    text-shadow: 0 0 20px rgba(var(--c-mist-rgb), 0.2);
}
.leaderboard-third[b-lzxdkti7e2]  .scoreboard-points .mud-typography:first-child,
.leaderboard-third[b-lzxdkti7e2]  .scoreboard-name .mud-typography:first-child {
    color: rgba(var(--c-peach-rgb), 1) !important;
    text-shadow: 0 0 20px rgba(var(--c-bronze-rgb), 0.2);
}

[b-lzxdkti7e2] .scoreboard-points .mud-button-root {
    margin-top: 8px;
    color: rgba(var(--c-gold-soft-rgb), 0.7) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.14em !important;
    font-size: 0.78rem !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
}

[b-lzxdkti7e2] .scoreboard-points .mud-button-root:hover {
    color: var(--c-gold) !important;
    background: rgba(var(--c-gold-rgb), 0.06) !important;
}

.scoreboard-detail[b-lzxdkti7e2] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    width: 100%;
    margin-top: 0.6rem;
    padding: 1.2rem 0 0.4rem;
    /* No divider — the row's background and the detail's halo should bleed
       into one another. A border line creates a visible seam between the
       row header and the detail strip. */
    color: rgba(var(--c-stone-rgb), 0.85);
    box-sizing: border-box;
    min-width: 0;
    /* Don't clip the row-wide halo. */
    overflow: visible;
}

/* Row-wide ambient halo. Spanning the entire .scoreboard-detail (and bleeding
   upward into the row header above) means the lighting fills the whole card
   uniformly — no internal transition between "chart cell" and "description
   cell". The halo is the FIRST child so it sits behind everything.

   `mix-blend-mode: screen` adds the gold pool to whatever the row background
   already paints (the leaderboard-first gradient, glass card noise, etc.)
   instead of laying a separate layer on top. Screen-blended additive light
   never produces a hard edge with what's behind it — it can only brighten
   pixels, so the falloff to "transparent" reads as the halo dissolving into
   the underlying surface. */
.scoreboard-detail__halo[b-lzxdkti7e2] {
    position: absolute;
    inset: -260% -15% -40% -15%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 65% 45% at 50% 70%,
            rgba(var(--c-gold-rgb), 0.16) 0%,
            rgba(var(--c-gold-rgb), 0.11) 18%,
            rgba(var(--c-gold-rgb), 0.07) 36%,
            rgba(var(--c-gold-rgb), 0.04) 55%,
            rgba(var(--c-gold-rgb), 0.018) 75%,
            rgba(var(--c-gold-rgb), 0.006) 90%,
            transparent 100%);
    mix-blend-mode: screen;
    filter: blur(72px);
    will-change: filter;
}

/* Stack content above the halo. */
.scoreboard-detail > .scoreboard-detail-info[b-lzxdkti7e2],
.scoreboard-detail > .scoreboard-detail-chart[b-lzxdkti7e2] {
    position: relative;
    z-index: 1;
}

/* MudCollapse wraps the details and uses overflow:hidden during animation,
   which would clip the halo. Once expanded the wrapper sometimes leaves a
   `mud-collapse-wrapper` whose computed height differs from the content by
   a sub-pixel during the animation tail \u2014 enough to surface a vertical
   scrollbar. Allow visible overflow on every entered/wrapper variant. */
[b-lzxdkti7e2] .scoreboard-row .mud-collapse-container.mud-collapse-entered,
[b-lzxdkti7e2] .scoreboard-row .mud-collapse-container.mud-collapse-entered .mud-collapse-wrapper,
[b-lzxdkti7e2] .scoreboard-row .mud-collapse-container.mud-collapse-entered .mud-collapse-wrapper-inner {
    overflow: visible !important;
}

.scoreboard-detail-info[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

/* "Description" heading echoes the Final Results title: Montserrat 900 gold +
   gradient accent dash beneath. Smaller scale than the section header so the
   visual rhyming is felt without competing with the row's own name. */
.scoreboard-detail-heading[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 4px;
}

[b-lzxdkti7e2] .scoreboard-detail-heading__title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    color: var(--c-gold) !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
    font-size: clamp(1.05rem, 1.6vw, 1.4rem) !important;
    text-transform: none !important;
    text-shadow: 0 0 36px rgba(var(--c-gold-rgb), 0.18);
    margin: 0 !important;
}

.scoreboard-detail-heading__accent[b-lzxdkti7e2] {
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

[b-lzxdkti7e2] .scoreboard-detail-body {
    color: rgba(var(--c-stone-rgb), 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    overflow-wrap: anywhere;
    text-wrap: balance;
    margin: 0 !important;
}

.scoreboard-detail-chart[b-lzxdkti7e2] {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    /* Single fixed-ish height so the chart never has to negotiate min vs max
       with MudChart's MatchBoundsToSize. With min/max-height the SVG could
       briefly request more space than the cell, surfacing a scrollbar. */
    height: clamp(220px, 30vh, 360px);
    /* Belt + braces against the chart scrollbar: hidden as a universal
       fallback, clip preferred where supported. */
    overflow: hidden;
    overflow: clip;
    contain: paint;
}

.scoreboard-detail-chart canvas[b-lzxdkti7e2] {
    width: 100% !important;
    height: 100% !important;
    max-height: 100%;
}

/* -------- Quiz results --------------------------------------------------- */
.quiz-results-showcase[b-lzxdkti7e2] {
    margin: clamp(2rem, 4vh, 4rem) auto clamp(3rem, 5vh, 5rem);
    max-width: min(1100px, 92vw);
    padding: 0 clamp(0.8rem, 2vw, 1.6rem);
}

/* -------- Email section -------------------------------------------------- */
.email-results-section[b-lzxdkti7e2] {
    margin: clamp(2.5rem, 5vh, 4.5rem) auto clamp(2rem, 4vh, 3rem);
    padding: 0 clamp(0.8rem, 2vw, 1.6rem);
    max-width: min(560px, 92vw);
    container-type: inline-size;
    container-name: email-results;
}

.email-results-card[b-lzxdkti7e2] {
    position: relative;
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.012) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.18);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    /* Outer warm glow bleeds into the page stage so the card sits in soft
       lit space instead of as a hard-edged rectangle. */
    box-shadow:
        0 26px 60px -20px rgba(var(--c-black-rgb), 0.65),
        0 0 80px -10px rgba(var(--c-gold-rgb), 0.16),
        0 0 160px -40px rgba(var(--c-gold-rgb), 0.12),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    isolation: isolate;
}

/* Echo halo behind the card — visual rhyme with the podium halo. */
.email-results-card__halo[b-lzxdkti7e2] {
    position: absolute;
    inset: -45% -55% -45% -55%;
    pointer-events: none;
    z-index: -1;
    filter: blur(34px);
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.16) 0%, rgba(var(--c-gold-rgb), 0.06) 28%, rgba(var(--c-gold-rgb), 0.02) 55%, transparent 100%);
}

.email-results-card__inner[b-lzxdkti7e2] {
    position: relative;
    z-index: 1;
    padding: clamp(1.8rem, 3.2vw, 2.8rem) clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.8rem, 3.2vw, 2.6rem);
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 2.4vh, 1.8rem);
}

.email-results-header[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.email-results-header__eyebrow[b-lzxdkti7e2] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: clamp(0.72rem, 1.1cqi, 0.85rem);
    font-weight: 700;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', 'Montserrat', sans-serif;
}

.email-results-header__eyebrow-dot[b-lzxdkti7e2] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-gold);
    box-shadow: 0 0 10px rgba(var(--c-gold-rgb), 0.7);
    animation: emailDotPulse-b-lzxdkti7e2 2.4s ease-in-out infinite;
}

@keyframes emailDotPulse-b-lzxdkti7e2 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
}

[b-lzxdkti7e2] .email-results-title {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 900 !important;
    color: var(--c-gold) !important;
    letter-spacing: -0.025em !important;
    line-height: 1.05 !important;
    font-size: clamp(1.6rem, 6.5cqi, 2.6rem) !important;
    text-shadow: 0 0 36px rgba(var(--c-gold-rgb), 0.22), 0 6px 18px rgba(var(--c-black-rgb), 0.5);
    margin: 0 !important;
    text-wrap: balance;
    text-transform: none !important;
}

.email-results-accent[b-lzxdkti7e2] {
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

[b-lzxdkti7e2] .email-results-subtitle {
    color: rgba(var(--c-stone-rgb), 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem) !important;
    margin: 0 !important;
    max-width: 42ch;
}

.email-results-form[b-lzxdkti7e2] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Brand the MudTextField. MudBlazor's outlined input uses these inner classes. */
[b-lzxdkti7e2] .email-results-input .mud-input-control,
[b-lzxdkti7e2] .email-results-input .mud-input {
    background: transparent !important;
}

[b-lzxdkti7e2] .email-results-input .mud-input-outlined-border {
    border-color: rgba(var(--c-gold-soft-rgb), 0.22) !important;
    border-radius: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

[b-lzxdkti7e2] .email-results-input:hover .mud-input-outlined-border {
    border-color: rgba(var(--c-gold-soft-rgb), 0.40) !important;
}

[b-lzxdkti7e2] .email-results-input .mud-input.mud-input-focused .mud-input-outlined-border,
[b-lzxdkti7e2] .email-results-input .mud-input-control:focus-within .mud-input-outlined-border {
    border-color: var(--c-gold) !important;
    box-shadow: 0 0 0 3px rgba(var(--c-gold-rgb), 0.14);
}

[b-lzxdkti7e2] .email-results-input input {
    color: rgba(var(--c-gold-light-rgb), 0.95) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 1rem !important;
    letter-spacing: 0;
}

[b-lzxdkti7e2] .email-results-input input::placeholder {
    color: rgba(var(--c-gold-soft-rgb), 0.35) !important;
    opacity: 1;
}

[b-lzxdkti7e2] .email-results-input .mud-input-label {
    color: rgba(var(--c-gold-soft-rgb), 0.55) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}

[b-lzxdkti7e2] .email-results-input .mud-input-label.mud-input-label-animated.mud-input-label-outlined {
    background: var(--c-bg-deep) !important;
    padding: 0 6px !important;
}

/* Brand the newsletter opt-in checkbox so it reads as a piece of the same form
   surface, not a stock MudBlazor purple control. */
[b-lzxdkti7e2] .email-results-checkbox .mud-checkbox-icon,
[b-lzxdkti7e2] .email-results-checkbox svg {
    color: rgba(var(--c-gold-soft-rgb), 0.55) !important;
    transition: color 0.2s ease, filter 0.2s ease;
}

[b-lzxdkti7e2] .email-results-checkbox.mud-checkbox-true .mud-checkbox-icon,
[b-lzxdkti7e2] .email-results-checkbox.mud-checkbox-true svg {
    color: var(--c-gold) !important;
    filter: drop-shadow(0 0 8px rgba(var(--c-gold-rgb), 0.4));
}

[b-lzxdkti7e2] .email-results-checkbox .mud-typography {
    color: rgba(var(--c-gold-soft-rgb), 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em;
}

/* Quiet supporting line under the newsletter checkbox \u2014 muted meta tier so it
   reassures without competing with the form label or the Get Results CTA. */
[b-lzxdkti7e2] .email-results-checkbox-hint {
    display: block;
    color: rgba(var(--c-gold-soft-rgb), 0.55) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 400 !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    letter-spacing: 0.01em;
    margin: -8px 0 0 34px !important;
}

.email-results-actions[b-lzxdkti7e2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 4px;
}

@container email-results (max-width: 480px) {
    .email-results-actions[b-lzxdkti7e2] {
        justify-content: center;
    }
}

[b-lzxdkti7e2] .email-results-submit {
    width: 100%;
    background: linear-gradient(145deg, var(--c-gold) 0%, var(--c-gold-deep) 100%) !important;
    color: var(--c-bg-abyss) !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.16em !important;
    font-size: 0.9rem !important;
    border-radius: 14px !important;
    padding: 14px 26px !important;
    box-shadow: 0 12px 28px -8px rgba(var(--c-gold-rgb), 0.5), inset 0 1px 0 rgba(var(--c-white-rgb), 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

[b-lzxdkti7e2] .email-results-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -8px rgba(var(--c-gold-rgb), 0.55), inset 0 1px 0 rgba(var(--c-white-rgb), 0.5);
    filter: brightness(1.05);
}

[b-lzxdkti7e2] .email-results-submit:disabled {
    opacity: 0.55;
    box-shadow: none;
    filter: grayscale(0.3);
}

[b-lzxdkti7e2] .email-results-submit .mud-icon-root {
    color: var(--c-bg-abyss) !important;
}

/* Validation + alert styling — keep them on-brand instead of MudBlazor defaults. */
[b-lzxdkti7e2] .email-results-alert.mud-alert {
    border-radius: 14px !important;
    background: rgba(var(--c-white-rgb), 0.04) !important;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.18) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.92) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
}

[b-lzxdkti7e2] .email-results-alert--success.mud-alert {
    background: rgba(var(--c-lime-rgb), 0.08) !important;
    border-color: rgba(var(--c-lime-rgb), 0.4) !important;
    color: rgba(var(--c-lime-pale-rgb), 0.95) !important;
}

[b-lzxdkti7e2] .email-results-alert--error.mud-alert {
    background: rgba(var(--c-coral-rgb), 0.06) !important;
    border-color: rgba(var(--c-coral-rgb), 0.4) !important;
    color: rgba(var(--c-coral-pale-rgb), 0.95) !important;
}

[b-lzxdkti7e2] .email-results-form .validation-message,
[b-lzxdkti7e2] .email-results-form .field-validation-error {
    color: rgba(var(--c-coral-pale-rgb), 0.95) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    margin-top: 4px;
}

/* -------- Fullscreen toggle anchor -------------------------------------- */
/* Explicitly cancel the bottom/left defaults from app.css \u2014 otherwise all four
   anchors are set, the div stretches edge-to-edge, and the wrapper's onclick
   intercepts every click on the page (including "Show details"). */
.fullscreen-toggle-anchor[b-lzxdkti7e2] {
    position: fixed;
    /* Sit below the MudAppBar so its SVGs can't intercept the click. */
    top: 80px;
    right: 18px;
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    z-index: 1500;
    cursor: pointer;
}

/* -------- Mobile (≤700px): single-stage podium reel ---------------------- */
@media (max-width: 700px) {
    .hero-wrapper[b-lzxdkti7e2] {
        padding: clamp(1.4rem, 3.5vh, 2.4rem) 12px clamp(1rem, 2vh, 1.6rem);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .results-hero[b-lzxdkti7e2] {
        margin-bottom: clamp(0.6rem, 1.2vh, 1.2rem);
    }

    /* Long titles were rendering at 2.8rem and wrapping to two huge lines on a
       phone. Cap the upper bound and reduce side-padding in the hero so the
       text breathes without forcing the page wider. */
    [b-lzxdkti7e2] .tasting-title {
        font-size: clamp(1.8rem, 9vw, 3.2rem) !important;
        max-width: 18ch;
    }
    [b-lzxdkti7e2] .tasting-title.tasting-title--mid { font-size: clamp(1.6rem, 8vw, 2.6rem) !important; }
    [b-lzxdkti7e2] .tasting-title.tasting-title--long { font-size: clamp(1.4rem, 7vw, 2.2rem) !important; }
    [b-lzxdkti7e2] .tasting-title.tasting-title--xlong { font-size: clamp(1.2rem, 6vw, 1.9rem) !important; }

    .results-hero__accent[b-lzxdkti7e2] {
        margin-top: 14px;
        width: 56px;
        height: 3px;
    }

    .podium-wrapper[b-lzxdkti7e2] {
        margin-top: 1rem;
        padding-top: 16px;
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .podium-halo[b-lzxdkti7e2] {
        top: 6%;
        height: 70%;
    }

    /* Single-stage swipe reel. Constrain width to viewport so the off-stage
       columns (translateX(120%)) can't push horizontal page width.

       The grid needs an explicit height because every column is absolutely
       positioned (inset: 0). Without it the grid collapses to 0px and you
       see nothing during the staged reveal. Use a content-derived clamp
       sized for one card, NOT 64vh which left a huge dead bay before. */
    .podium-grid[b-lzxdkti7e2] {
        position: relative;
        display: block;
        min-height: clamp(360px, 56vh, 460px);
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        border-radius: 22px;
    }

    /* Active card needs an explicit height so absolutely-positioned siblings
       have something to size against. Use the active stage's intrinsic height
       via the column position trick: the visible rank gets a relative wrapper. */
    .podium-stage[b-lzxdkti7e2] {
        max-width: min(380px, 88vw);
        margin: 0 auto;
        padding: 16px 16px 18px;
        gap: 0.55rem;
    }

    .podium-column.rank-1 .podium-stage[b-lzxdkti7e2],
    .podium-column.rank-2 .podium-stage[b-lzxdkti7e2],
    .podium-column.rank-3 .podium-stage[b-lzxdkti7e2] {
        min-height: 0;
    }

    .podium-column[b-lzxdkti7e2] {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        padding-bottom: 0;
        opacity: 0;
        transform: translateX(120%);
        transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
        z-index: 1;
    }

    .podium-column.rank-1[b-lzxdkti7e2],
    .podium-column.rank-2[b-lzxdkti7e2],
    .podium-column.rank-3[b-lzxdkti7e2] {
        --podium-elevation: 0px;
    }

    .podium-column .podium-elevator[b-lzxdkti7e2] {
        transform: none;
    }

    .hero-wrapper.mobile-stage-standby .podium-column[b-lzxdkti7e2] {
        transform: translateX(120%);
        opacity: 0;
    }

    .hero-wrapper.mobile-stage-third .podium-column.rank-3[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-second .podium-column.rank-2[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-first .podium-column.rank-1[b-lzxdkti7e2] {
        transform: translateX(0);
        opacity: 1;
        z-index: 3;
    }

    .hero-wrapper.mobile-stage-third .podium-column.rank-2[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-third .podium-column.rank-1[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-second .podium-column.rank-3[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-first .podium-column.rank-2[b-lzxdkti7e2],
    .hero-wrapper.mobile-stage-first .podium-column.rank-3[b-lzxdkti7e2] {
        transform: translateX(-120%);
        opacity: 0;
        z-index: 2;
    }

    .hero-wrapper.mobile-stage-second .podium-column.rank-1[b-lzxdkti7e2] {
        transform: translateX(120%);
        opacity: 0;
    }

    .podium-image-container[b-lzxdkti7e2] {
        width: 56%;
        max-width: 160px;
    }

    .podium-label[b-lzxdkti7e2] {
        font-size: clamp(1.1rem, 5vw, 1.45rem) !important;
    }
    .podium-caption[b-lzxdkti7e2] {
        font-size: clamp(0.85rem, 3.2vw, 1rem) !important;
    }

    /* Mobile glass cards: drop backdrop-filter (Safari unreliable) and lift surface. */
    .podium-stage[b-lzxdkti7e2],
    .scoreboard-row[b-lzxdkti7e2],
    .leaderboard-showcase[b-lzxdkti7e2],
    .email-results-card[b-lzxdkti7e2] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.10) 0%, rgba(var(--c-white-rgb), 0.035) 100%) !important;
        border-color: rgba(var(--c-gold-soft-rgb), 0.32) !important;
    }

    .leaderboard-first[b-lzxdkti7e2] {
        background: linear-gradient(145deg, rgba(var(--c-gold-rgb), 0.18) 0%, rgba(var(--c-gold-rgb), 0.04) 100%) !important;
        border-color: rgba(var(--c-gold-rgb), 0.5) !important;
    }

    .leaderboard-showcase[b-lzxdkti7e2] {
        padding: clamp(1.2rem, 4vw, 1.8rem) clamp(0.8rem, 3vw, 1.4rem) clamp(1.6rem, 4vw, 2rem);
        margin: clamp(1.6rem, 3.5vh, 2.4rem) auto clamp(1.5rem, 3vh, 2.4rem);
        max-width: calc(100vw - 24px);
        border-radius: 18px;
        box-sizing: border-box;
    }

    .scoreboard-main[b-lzxdkti7e2] {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        gap: 0.75rem;
    }

    .scoreboard-image-container[b-lzxdkti7e2] {
        margin: 0 auto;
        width: clamp(140px, 50vw, 200px);
        height: clamp(140px, 50vw, 200px);
    }

    .scoreboard-medal[b-lzxdkti7e2] {
        font-size: clamp(2rem, 6vw, 2.6rem);
        top: 8px;
        right: 8px;
    }

    .scoreboard-beverage-image[b-lzxdkti7e2] {
        width: 100%;
        height: 100%;
    }

    .scoreboard-points[b-lzxdkti7e2] {
        align-items: center;
    }

    .scoreboard-detail[b-lzxdkti7e2] {
        grid-template-columns: 1fr;
    }

    .scoreboard-detail-chart[b-lzxdkti7e2] {
        min-height: 220px;
    }

    .scoreboard-row[b-lzxdkti7e2] {
        padding: clamp(0.8rem, 3vw, 1rem);
    }
}

/* -------- Desktop (≥1024px) ---------------------------------------------- */
@media (min-width: 1024px) {
    .scoreboard-detail-chart[b-lzxdkti7e2] {
        min-height: 320px;
        max-height: 420px;
    }

    .scoreboard-main[b-lzxdkti7e2] {
        grid-template-columns: 130px minmax(0, 1fr) minmax(150px, auto);
    }

    .scoreboard-image-container[b-lzxdkti7e2] {
        width: 110px;
        height: 110px;
    }

    .scoreboard-beverage-image[b-lzxdkti7e2] {
        width: 110px;
        height: 110px;
    }
}

/* -------- Ultra-wide (≥1600px) ------------------------------------------- */
@media (min-width: 1600px) {
    .hero-wrapper[b-lzxdkti7e2] {
        max-width: min(2000px, 92vw);
    }

    .leaderboard-showcase[b-lzxdkti7e2] {
        max-width: min(1600px, 86vw);
    }

    .scoreboard-main[b-lzxdkti7e2] {
        grid-template-columns: 150px minmax(0, 1fr) minmax(180px, auto);
    }

    .scoreboard-image-container[b-lzxdkti7e2],
    .scoreboard-beverage-image[b-lzxdkti7e2] {
        width: 130px;
        height: 130px;
    }
}

/* ============================================================================
   Iteration patches: Scoreboard radar chart container — re-skinned to match
   host-reveal-panel with a warm halo, brand-aligned grid lines, and
   producer-tone axis labels.
   (Title tiers + podium halo bloom now live with their canonical rules above.)
   ============================================================================ */

/* Scoreboard radar chart — host-reveal-panel recipe re-applied here. */
.scoreboard-detail-chart[b-lzxdkti7e2] {
    /* Reset the earlier flex layout so the halo positions from the chart wrapper. */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Row-wide ambient halo. (Old per-chart halo lived on .scoreboard-detail-chart;
   it's been replaced by .scoreboard-detail__halo above so the lighting fills
   the entire row uniformly.) */

.scoreboard-detail-chart__inner[b-lzxdkti7e2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Cell now provides a strict box; absolute positioning makes the chart
       paint into it without participating in flex height negotiation. */
    overflow: clip;
    /* Hidden until the MudCollapse open animation finishes — otherwise the
       full-height chart shows through the partially-open wrapper, which
       reads as the chart "sliding into view" instead of an organic reveal.
       The .mud-collapse-entered rule below fades it in cleanly. */
    opacity: 0;
    transition: opacity 240ms ease-out 80ms;
}

[b-lzxdkti7e2] .scoreboard-row .mud-collapse-container.mud-collapse-entered .scoreboard-detail-chart__inner {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .scoreboard-detail-chart__inner[b-lzxdkti7e2] { transition: none; opacity: 1; }
}

/* MudChart radar fills its parent. The radar shell + .mud-chart live inside
   a child component, so scoped CSS won't reach them without ::deep. Without
   ::deep the prior rules never matched, which is why MudChart was still able
   to scroll the wrapper. */
.scoreboard-detail-chart__inner[b-lzxdkti7e2]  .radar-chart-shell,
.scoreboard-detail-chart__inner[b-lzxdkti7e2]  .mud-chart {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    /* `clip` suppresses scrollbars without establishing a scroll container. */
    overflow: clip !important;
}

.scoreboard-detail-chart__inner[b-lzxdkti7e2]  svg {
    width: 100% !important;
    height: 100% !important;
}

/* Hide the mud chart legend entirely — its label/dot conflict with our
   description column. ::deep is required because the legend lives inside the
   RadarChart child component. */
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-chart-legend,
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-chart-legend-item {
    display: none !important;
}

[b-lzxdkti7e2] .scoreboard-detail-chart svg {
    overflow: visible;
}

/* Brand grid + axis lines — same producer-tone cream used on the host reveal. */
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-charts-grid line,
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-charts-grid path,
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-charts-grid polygon {
    stroke: rgba(var(--c-gold-light-rgb), 0.85) !important;
    fill: none !important;
}

/* Axis labels — match the host reveal panel exactly: producer-tone gold,
   Inter 600, viewport-clamped size. */
[b-lzxdkti7e2] .scoreboard-detail-chart text {
    fill: rgba(var(--c-gold-light-rgb), 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(14px, 1.6vw, 22px) !important;
    letter-spacing: 0.02em;
}

/* The data polygon itself — gold fill + glow. */
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-chart-serie path {
    stroke: var(--c-gold) !important;
    stroke-width: 2.5 !important;
    fill: rgba(var(--c-gold-rgb), 0.20) !important;
    filter: drop-shadow(0 0 12px rgba(var(--c-gold-rgb), 0.35));
}

/* Data points */
[b-lzxdkti7e2] .scoreboard-detail-chart .mud-chart-serie circle {
    fill: var(--c-gold) !important;
    stroke: rgba(var(--c-bg-abyss-rgb), 0.9) !important;
    stroke-width: 1.5 !important;
}

/* Score count-up entrance — fade + lift the value when leaderboard becomes visible. */
.leaderboard-showcase.lb-visible[b-lzxdkti7e2]  .scoreboard-points .mud-typography:first-child {
    animation: scoreboardScoreEnter-b-lzxdkti7e2 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes scoreboardScoreEnter-b-lzxdkti7e2 {
    from { opacity: 0; transform: translateY(8px); filter: blur(2px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .leaderboard-showcase.lb-visible[b-lzxdkti7e2]  .scoreboard-points .mud-typography:first-child {
        animation: none;
    }
}
/* /Components/Pages/ShareTasting.razor.rz.scp.css */
.cropper-frame[b-vhxb8vclrq] {
    width: min(420px, 90vw);
    height: min(420px, 90vw);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(var(--c-black-rgb), 0.3);
}

.cropper-surface[b-vhxb8vclrq],
.cropper-frame .cropper-container[b-vhxb8vclrq],
.cropper-frame .cropper-wrap-box[b-vhxb8vclrq],
.cropper-frame .cropper-canvas[b-vhxb8vclrq],
.cropper-frame .cropper-drag-box[b-vhxb8vclrq] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

.cropper-zoom-slider[b-vhxb8vclrq] {
    padding-inline: 0.5rem;
}
/* /Components/Pages/Tastings.razor.rz.scp.css */
.tastings-stage[b-67wh98knmw] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--c-bg-abyss);
    color: var(--c-gold-soft);
}

.tastings-stage__ambient[b-67wh98knmw] {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 45%, rgba(var(--c-gold-rgb), 0.08) 0%, rgba(var(--c-gold-rgb), 0.03) 34%, rgba(var(--c-gold-rgb), 0.008) 62%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 25%, rgba(var(--c-violet-rgb), 0.14) 0%, rgba(var(--c-violet-rgb), 0.055) 38%, rgba(var(--c-violet-rgb), 0.015) 66%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 110%, rgba(var(--c-parchment-rgb), 0.045) 0%, rgba(var(--c-parchment-rgb), 0.015) 50%, transparent 100%);
    animation: tastingsAmbientDrift-b-67wh98knmw 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

.tastings-stage__noise[b-67wh98knmw] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.028;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.tastings-stage__vignette[b-67wh98knmw] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(var(--c-black-rgb), 0.48) 100%);
}

[b-67wh98knmw] .tastings-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
    padding: clamp(24px, 3vw, 40px) clamp(16px, 3.2vw, 40px) clamp(40px, 5vw, 64px);
}

.tastings-hero[b-67wh98knmw] {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
    align-items: end;
    gap: clamp(20px, 3vw, 40px);
    margin-bottom: clamp(20px, 3vh, 32px);
}

.tastings-hero--wizard[b-67wh98knmw] {
    align-items: center;
}

.tastings-hero__copy[b-67wh98knmw] {
    max-width: 860px;
}

[b-67wh98knmw] .tastings-eyebrow {
    display: block;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

[b-67wh98knmw] .tastings-title {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.15rem, 4.2vw, 3.5rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.98;
    margin: 0;
    overflow-wrap: anywhere;
    text-shadow: 0 0 24px rgba(var(--c-gold-rgb), 0.10), 0 8px 20px rgba(var(--c-black-rgb), 0.34);
}

.tastings-title-accent[b-67wh98knmw] {
    width: 64px;
    height: 4px;
    margin: 18px 0 16px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

[b-67wh98knmw] .tastings-lede {
    max-width: 62ch;
    color: rgba(var(--c-stone-rgb), 0.85);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: clamp(0.96rem, 1.05vw, 1.12rem);
    font-weight: 300;
    line-height: 1.55;
}

.tastings-stat-grid[b-67wh98knmw] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tastings-stat-card[b-67wh98knmw],
.tastings-progress-card[b-67wh98knmw],
[b-67wh98knmw] .tastings-panel {
    position: relative;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 18px 42px -28px rgba(var(--c-black-rgb), 0.62),
        0 0 28px rgba(var(--c-gold-rgb), 0.02),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

.tastings-stat-card[b-67wh98knmw] {
    padding: 14px 16px 16px;
    border-radius: 18px;
    min-height: 92px;
}

.tastings-stat-card span[b-67wh98knmw],
.tastings-progress-card__eyebrow[b-67wh98knmw] {
    display: block;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tastings-stat-card strong[b-67wh98knmw] {
    display: block;
    color: rgba(var(--c-gold-light-rgb), 0.9);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1;
    margin-top: 10px;
}

.tastings-progress-card[b-67wh98knmw] {
    justify-self: end;
    width: min(100%, 360px);
    padding: 24px;
    border-radius: 22px;
}

.tastings-progress-card strong[b-67wh98knmw] {
    display: block;
    color: rgba(var(--c-gold-light-rgb), 0.85);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 600;
    line-height: 1.25;
    margin: 10px 0 18px;
}

[b-67wh98knmw] .tastings-progress-card__bar.mud-progress-linear {
    height: 8px;
    border-radius: 999px;
    background-color: rgba(var(--c-parchment-rgb), 0.14) !important;
    --mud-palette-primary: var(--c-parchment);
}

.echo-halo[b-67wh98knmw] {
    position: absolute;
    inset: -70% -80% -70% -80%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.08) 0%, rgba(var(--c-gold-rgb), 0.035) 25%, rgba(var(--c-gold-rgb), 0.01) 55%, transparent 100%);
    filter: blur(28px);
}

[b-67wh98knmw] .tastings-panel {
    border-radius: 22px;
    padding: clamp(20px, 3vw, 32px);
    overflow: visible;
}

[b-67wh98knmw] .tastings-panel--wizard {
    max-width: 1180px;
}

.tastings-toolbar[b-67wh98knmw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
}

[b-67wh98knmw] .tastings-primary-action.mud-button-root,
[b-67wh98knmw] .tastings-panel .mud-button-filled-primary,
[b-67wh98knmw] .tastings-panel .mud-button-filled-default {
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--c-parchment-rgb), 0.96) 0%, rgba(var(--c-gold-light-rgb), 0.96) 100%) !important;
    color: var(--c-bg-deep) !important;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow: 0 12px 24px -18px rgba(var(--c-gold-rgb), 0.36);
}

[b-67wh98knmw] .tastings-panel .mud-button-outlined,
[b-67wh98knmw] .tastings-filter-toggle__button.mud-button-root {
    border-color: rgba(var(--c-gold-soft-rgb), 0.18) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.78) !important;
    border-radius: 14px;
}

.tastings-filter-toggle[b-67wh98knmw] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 16px;
    background: rgba(var(--c-bg-abyss-rgb), 0.42);
}

[b-67wh98knmw] .tastings-filter-toggle__button--selected.mud-button-root {
    background: rgba(var(--c-gold-rgb), 0.09) !important;
    color: rgba(var(--c-gold-light-rgb), 0.9) !important;
    border-color: rgba(var(--c-gold-rgb), 0.24) !important;
}

[b-67wh98knmw] .tastings-stepper.mud-stepper {
    background: transparent;
    box-shadow: none;
    margin-bottom: 24px;
}

[b-67wh98knmw] .tastings-stepper .mud-step-label,
[b-67wh98knmw] .tastings-stepper .mud-step-label-completed,
[b-67wh98knmw] .tastings-stepper .mud-step-label-active {
    color: rgba(var(--c-gold-soft-rgb), 0.72);
}

[b-67wh98knmw] .tastings-step-surface,
[b-67wh98knmw] .tastings-choice-card {
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.045) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.06), 0 22px 48px -28px rgba(var(--c-black-rgb), 0.68);
}

[b-67wh98knmw] .tastings-step-surface {
    margin-top: 24px;
    padding: clamp(20px, 3vw, 28px);
    border-radius: 22px;
}

[b-67wh98knmw] .tastings-section-title {
    color: rgba(var(--c-gold-light-rgb), 0.88);
    font-weight: 700;
    margin-bottom: 18px;
}

[b-67wh98knmw] .tastings-section-title--spaced {
    margin-top: 24px;
}

[b-67wh98knmw] .tastings-subsection-title {
    color: rgba(var(--c-gold-light-rgb), 0.82);
    font-weight: 600;
    margin: 24px 0 8px;
}

[b-67wh98knmw] .tastings-option-grid {
    margin-top: 18px;
}

[b-67wh98knmw] .tastings-choice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: clamp(148px, 18vh, 220px);
    padding: 24px;
    border-radius: 22px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 180ms ease-out, border-color 180ms ease-out, box-shadow 180ms ease-out, background 180ms ease-out;
}

[b-67wh98knmw] .tastings-choice-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--c-gold-rgb), 0.24);
    box-shadow: 0 22px 44px -28px rgba(var(--c-black-rgb), 0.68), 0 0 24px rgba(var(--c-gold-rgb), 0.045), inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

[b-67wh98knmw] .tastings-choice-card--selected {
    border-color: rgba(var(--c-gold-rgb), 0.38);
    background: linear-gradient(145deg, rgba(var(--c-gold-rgb), 0.085) 0%, rgba(var(--c-white-rgb), 0.022) 100%);
    box-shadow: 0 24px 48px -28px rgba(var(--c-black-rgb), 0.68), 0 0 34px rgba(var(--c-gold-rgb), 0.075), inset 0 1px 0 rgba(var(--c-white-rgb), 0.09);
}

[b-67wh98knmw] .tastings-choice-card .mud-icon-root {
    color: rgba(var(--c-gold-light-rgb), 0.86) !important;
}

[b-67wh98knmw] .tastings-choice-card--selected .mud-icon-root {
    color: var(--c-gold) !important;
}

[b-67wh98knmw] .tastings-choice-card .mud-typography-h6 {
    color: rgba(var(--c-gold-soft-rgb), 0.98);
    font-weight: 800;
}

[b-67wh98knmw] .tastings-choice-card .mud-typography-body2,
[b-67wh98knmw] .tastings-choice-card .mud-typography-caption {
    color: rgba(var(--c-stone-rgb), 0.76);
}

[b-67wh98knmw] .tastings-card-chip {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
}

.tastings-rating-card__intro[b-67wh98knmw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

[b-67wh98knmw] .tastings-rating-card__divider {
    flex: none;
    margin: 18px 0;
    border-color: rgba(var(--c-gold-soft-rgb), 0.14);
}

.tastings-rating-card__criteria[b-67wh98knmw],
.tastings-rating-card__total[b-67wh98knmw] {
    width: 100%;
}

.tastings-rating-card__criterion[b-67wh98knmw],
.tastings-rating-card__total-row[b-67wh98knmw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    text-align: left;
}

.tastings-rating-card__criterion-copy[b-67wh98knmw] {
    flex: 1;
    min-width: 0;
}

.tastings-rating-card__criterion-score[b-67wh98knmw] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

[b-67wh98knmw] .tastings-rating-card__criterion-name {
    font-weight: 700;
}

[b-67wh98knmw] .tastings-rating-card__points {
    opacity: 0.6;
}

.tastings-rating-card__spacer[b-67wh98knmw] {
    flex: 1;
}

.tastings-step-actions[b-67wh98knmw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}

.tastings-step-actions--end[b-67wh98knmw] {
    justify-content: flex-end;
}

[b-67wh98knmw] .tastings-rating-table {
    margin-top: 20px;
    background: transparent !important;
}

[b-67wh98knmw] .tastings-empty-state.mud-alert {
    margin-top: 24px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 18px;
    background: rgba(var(--c-gold-soft-rgb), 0.045);
    color: rgba(var(--c-stone-rgb), 0.86);
}

.tastings-list[b-67wh98knmw] {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}

.tastings-card[b-67wh98knmw] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(14px, 2.4vw, 24px);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.13);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.034), rgba(var(--c-white-rgb), 0.012));
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.05), 0 16px 34px -28px rgba(var(--c-black-rgb), 0.62);
    padding: clamp(14px, 1.9vw, 20px);
    transition: border-color 160ms ease-out, background 160ms ease-out;
}

.tastings-card:hover[b-67wh98knmw] {
    border-color: rgba(var(--c-gold-rgb), 0.22);
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.046), rgba(var(--c-gold-rgb), 0.016));
}

.tastings-card__content[b-67wh98knmw] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tastings-card__content h2[b-67wh98knmw] {
    color: rgba(var(--c-gold-soft-rgb), 0.96);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: clamp(1.12rem, 1.4vw, 1.35rem);
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    overflow-wrap: anywhere;
}

.tastings-card__meta[b-67wh98knmw] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tastings-card__meta span[b-67wh98knmw] {
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 999px;
    background: rgba(var(--c-gold-soft-rgb), 0.035);
    color: rgba(var(--c-stone-rgb), 0.68);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    padding: 5px 9px;
    text-transform: uppercase;
}

.tastings-card__actions[b-67wh98knmw] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.tastings-card__start-blocked[b-67wh98knmw] {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(var(--c-orange-light-rgb), 0.32);
    border-radius: 12px;
    background: rgba(var(--c-orange-rgb), 0.10);
    color: rgba(var(--c-gold-sand-rgb), 0.92);
    font-size: 0.85rem;
    line-height: 1.35;
    padding: 6px 12px;
    max-width: 100%;
}

.tastings-card__start-blocked[b-67wh98knmw]  .mud-icon-root {
    color: rgba(var(--c-orange-light-rgb), 0.92);
    flex: 0 0 auto;
}

.tastings-card__start-blocked[b-67wh98knmw]  .mud-typography,
.tastings-card__start-blocked[b-67wh98knmw]  a {
    color: inherit;
}

[b-67wh98knmw] .tastings-card__primary-action.mud-button-root {
    min-width: 112px;
    min-height: 38px;
    border-radius: 12px;
    font-weight: 800;
    padding-inline: 14px;
    text-transform: none;
}

.tastings-card__quick-actions[b-67wh98knmw] {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.11);
    border-radius: 12px;
    background: rgba(var(--c-bg-abyss-rgb), 0.22);
    padding: 3px;
}

.tastings-card__quick-actions[b-67wh98knmw]  .mud-icon-button {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    border-color: rgba(var(--c-gold-soft-rgb), 0.11) !important;
    background: transparent !important;
    color: rgba(var(--c-gold-soft-rgb), 0.66) !important;
}

.tastings-card__quick-actions[b-67wh98knmw]  .mud-icon-button:hover {
    border-color: rgba(var(--c-gold-rgb), 0.24) !important;
    background: rgba(var(--c-gold-rgb), 0.06) !important;
    color: rgba(var(--c-gold-light-rgb), 0.88) !important;
}

.tastings-card__quick-actions[b-67wh98knmw]  .mud-icon-button:disabled {
    opacity: 0.38;
}

.tastings-card__quick-actions[b-67wh98knmw]  .mud-icon-button[aria-label="Archive"],
.tastings-card__quick-actions[b-67wh98knmw]  .mud-icon-button[aria-label="Delete"] {
    color: rgba(var(--c-gold-soft-rgb), 0.58) !important;
}

.tastings-status-pill[b-67wh98knmw] {
    align-self: flex-start;
    padding: 4px 9px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 999px;
    color: rgba(var(--c-gold-soft-rgb), 0.7);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tastings-status-pill--live[b-67wh98knmw] {
    border-color: rgba(var(--c-gold-rgb), 0.30);
    color: rgba(var(--c-gold-light-rgb), 0.9);
    box-shadow: 0 0 14px rgba(var(--c-gold-rgb), 0.06);
}

.tastings-status-pill--completed[b-67wh98knmw] {
    border-color: rgba(var(--c-lime-rgb), 0.34);
    color: rgba(var(--c-lime-rgb), 0.86);
}

.tastings-status-pill--archived[b-67wh98knmw] {
    color: rgba(var(--c-gold-soft-rgb), 0.48);
}

[b-67wh98knmw] .tastings-panel .mud-input-label,
[b-67wh98knmw] .tastings-panel .mud-input-slot,
[b-67wh98knmw] .tastings-panel .mud-input-root,
[b-67wh98knmw] .tastings-panel .mud-select-input {
    color: rgba(var(--c-gold-soft-rgb), 0.88) !important;
}

[b-67wh98knmw] .tastings-panel .mud-input-outlined-border {
    border-color: rgba(var(--c-gold-soft-rgb), 0.22) !important;
}

.entrance-fade[b-67wh98knmw] {
    animation: tastingsEntranceFadeIn-b-67wh98knmw 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tastingsAmbientDrift-b-67wh98knmw {
    0%   { transform: translate3d(-15%, -10%, 0) scale(1.10); }
    100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
}

@keyframes tastingsEntranceFadeIn-b-67wh98knmw {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .tastings-stage__ambient[b-67wh98knmw],
    .entrance-fade[b-67wh98knmw] {
        animation: none;
    }
}

@media (max-width: 1040px) {
    .tastings-hero[b-67wh98knmw] {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .tastings-progress-card[b-67wh98knmw] {
        justify-self: stretch;
        width: 100%;
    }
}

@media (max-width: 760px) {
    [b-67wh98knmw] .tastings-shell {
        padding: 24px 14px 40px;
    }

    .tastings-stat-grid[b-67wh98knmw] {
        grid-template-columns: 1fr;
    }

    .tastings-toolbar[b-67wh98knmw],
    .tastings-step-actions[b-67wh98knmw] {
        align-items: stretch;
        flex-direction: column;
    }

    .tastings-card[b-67wh98knmw] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .tastings-card__actions[b-67wh98knmw] {
        display: grid;
        grid-template-columns: minmax(112px, 1fr) auto;
        align-items: center;
        gap: 10px;
    }

    [b-67wh98knmw] .tastings-card__primary-action.mud-button-root {
        min-width: 0;
        width: auto;
    }

    .tastings-card__quick-actions[b-67wh98knmw] {
        justify-content: flex-end;
        width: auto;
    }

    .tastings-filter-toggle[b-67wh98knmw] {
        width: 100%;
    }

    [b-67wh98knmw] .tastings-filter-toggle__button {
        flex: 1;
    }
}

@media (max-width: 390px) {
    .tastings-card__actions[b-67wh98knmw] {
        grid-template-columns: 1fr;
    }

    .tastings-card__quick-actions[b-67wh98knmw] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(34px, 1fr));
        justify-content: stretch;
        width: 100%;
    }

    .tastings-card__quick-actions[b-67wh98knmw]  .mud-icon-button {
        justify-self: center;
    }
}
/* /Components/Pages/Unsubscribe.razor.rz.scp.css */
/* Colours come from the shared landing palette rather than being hardcoded, so
   a brand change flows through here automatically. */

.unsubscribe-page[b-1gftuwugkj] {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.unsubscribe-card[b-1gftuwugkj] {
    max-width: 540px;
    text-align: center;
    color: var(--gold-soft);
}

.unsubscribe-card h1[b-1gftuwugkj] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: var(--gold);
    margin-bottom: 20px;
}

.unsubscribe-card p[b-1gftuwugkj] {
    line-height: 1.7;
    margin-bottom: 16px;
}

.unsubscribe-note[b-1gftuwugkj] {
    font-size: 0.9rem;
    opacity: 0.75;
}

.unsubscribe-card a[b-1gftuwugkj] {
    color: var(--gold);
}

.unsubscribe-home[b-1gftuwugkj] {
    display: inline-block;
    margin-top: 24px;
    padding: 12px 28px;
    border: 2px solid var(--gold);
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.2s ease, color 0.2s ease;
}

.unsubscribe-home:hover[b-1gftuwugkj] {
    background: var(--gold);
    color: var(--bg-deep);
}
/* /Components/Shared/AnswerQuestionDialog.razor.rz.scp.css */
/* MudTextField renders the .golden-input element itself, so it never carries this
   component's CSS isolation attribute. The rules are anchored to .golden-input-scope,
   a plain wrapper in this component's own markup, and reach inward with ::deep. */
.golden-input-scope[b-q4h308tjev]  .golden-input .mud-input-label,
.golden-input-scope[b-q4h308tjev]  .golden-input .mud-input,
.golden-input-scope[b-q4h308tjev]  .golden-input .mud-input-slot,
.golden-input-scope[b-q4h308tjev]  .golden-input textarea {
    color: var(--c-parchment) !important;
}

.golden-input-scope[b-q4h308tjev]  .golden-input .mud-input-helper-text {
    color: rgba(var(--c-parchment-rgb), 0.7) !important;
}

/* Replaces the inline background that used to sit on the MudTextField. */
.golden-input-scope[b-q4h308tjev]  .answer-field .mud-input-slot {
    background-color: rgba(var(--c-white-rgb), 0.05);
}
/* /Components/Shared/BeverageImageUpload.razor.rz.scp.css */
.biu-row[b-d4ovhvxsjy] {
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.biu-overlay[b-d4ovhvxsjy] {
    position: fixed;
    inset: 0;
    background-color: rgba(var(--c-bg-midnight-rgb), 0.72);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3vh 1rem;
    z-index: 1200;
    overflow-y: auto;
    overflow-x: hidden;
}

.biu-modal[b-d4ovhvxsjy] {
    width: min(520px, calc(100vw - 2rem));
    max-height: 88vh;
    overflow-y: auto;
    background-color: rgba(var(--c-bg-indigo-rgb), 0.96);
    border-radius: 20px;
    border: 1px solid rgba(var(--c-white-rgb), 0.08);
}

.biu-preview[b-d4ovhvxsjy] {
    width: min(160px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    border: 1px dashed rgba(var(--c-white-rgb), 0.2);
    background-color: rgba(var(--c-white-rgb), 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.biu-preview img[b-d4ovhvxsjy] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.biu-upload-button[b-d4ovhvxsjy] {
    position: relative;
    overflow: hidden;
}

.biu-upload-button .biu-file-input[b-d4ovhvxsjy] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.biu-cropper-frame[b-d4ovhvxsjy] {
    width: min(420px, 90vw);
    height: min(420px, 90vw);
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    background-color: rgba(var(--c-black-rgb), 0.3);
}

.biu-cropper-surface[b-d4ovhvxsjy],
.biu-cropper-frame .cropper-container[b-d4ovhvxsjy],
.biu-cropper-frame .cropper-wrap-box[b-d4ovhvxsjy],
.biu-cropper-frame .cropper-canvas[b-d4ovhvxsjy],
.biu-cropper-frame .cropper-drag-box[b-d4ovhvxsjy] {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
}

.biu-cropper-zoom-slider[b-d4ovhvxsjy] {
    padding-inline: 0.5rem;
}
/* /Components/Shared/BeverageScoreboardRow.razor.rz.scp.css */
.scoreboard-row[b-vl5t7z9st3] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.5rem, 1vw, 1rem);
    padding: clamp(1.2rem, 2vw, 1.75rem) clamp(1.2rem, 2.4vw, 2rem);
    border-radius: 22px;
    background: rgba(var(--c-white-rgb), 0.06);
    box-shadow: 0 22px 44px rgba(var(--c-bg-void-rgb), 0.28);
    /* overflow:visible so the radar's gold halo can bleed past the card edge
       and blend into the surrounding ambient lighting instead of cutting off
       sharply at the rounded border. The bg + border-radius still clip the
       glass surface itself; only out-of-flow decorative layers escape. */
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    min-height: clamp(120px, 18vh, 180px);
}

.scoreboard-row:hover[b-vl5t7z9st3] {
    transform: translateY(-6px);
    box-shadow: 0 28px 58px rgba(var(--c-bg-void-rgb), 0.38);
}

.leaderboard-first[b-vl5t7z9st3] {
    background: linear-gradient(135deg, rgba(var(--c-gold-rgb), 0.35), rgba(var(--c-purple-rgb), 0.25));
}

.leaderboard-second[b-vl5t7z9st3] {
    background: linear-gradient(135deg, rgba(var(--c-silver-rgb), 0.35), rgba(var(--c-blue-rgb), 0.28));
}

.leaderboard-third[b-vl5t7z9st3] {
    background: linear-gradient(135deg, rgba(var(--c-bronze-medal-rgb), 0.35), rgba(var(--c-orange-deep-rgb), 0.28));
}

.scoreboard-main[b-vl5t7z9st3] {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr) 110px;
    gap: 1rem;
    align-items: center;
    width: 100%;
}

.scoreboard-image-container[b-vl5t7z9st3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
}

.scoreboard-medal[b-vl5t7z9st3] {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 1.6rem;
    font-weight: 700;
    z-index: 1;
    filter: drop-shadow(0 4px 8px rgba(var(--c-black-rgb), 0.4));
}

.scoreboard-beverage-image[b-vl5t7z9st3] {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 6px 16px rgba(var(--c-black-rgb), 0.3);
}

.scoreboard-body[b-vl5t7z9st3] {
    display: flex;
    flex-direction: column;
    gap: clamp(0.45rem, 0.8vw, 0.9rem);
}

.scoreboard-name[b-vl5t7z9st3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scoreboard-points[b-vl5t7z9st3] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: clamp(0.2rem, 0.5vw, 0.45rem);
    min-width: 100px;
}

/* Mobile styles */
@media (max-width: 700px) {
    .scoreboard-main[b-vl5t7z9st3] {
        grid-template-columns: minmax(0, 1fr);
        text-align: center;
        gap: 0.75rem;
    }

    .scoreboard-image-container[b-vl5t7z9st3] {
        margin: 0 auto;
        width: 210px;
        height: 210px;
    }

    .scoreboard-medal[b-vl5t7z9st3] {
        font-size: 3rem;
        top: -2px;
        right: -2px;
    }

    .scoreboard-beverage-image[b-vl5t7z9st3] {
        width: 200px;
        height: 200px;
    }

    .scoreboard-points[b-vl5t7z9st3] {
        align-items: center;
    }

    .scoreboard-row[b-vl5t7z9st3] {
        padding: 0.6rem 0.4rem;
    }
}

/* Large screens */
@media (min-width: 1024px) {
    .scoreboard-main[b-vl5t7z9st3] {
        grid-template-columns: 130px minmax(0, 1fr) 150px;
    }

    .scoreboard-image-container[b-vl5t7z9st3] {
        width: 110px;
        height: 110px;
    }

    .scoreboard-medal[b-vl5t7z9st3] {
        font-size: 2rem;
        top: 4px;
        right: 4px;
    }

    .scoreboard-beverage-image[b-vl5t7z9st3] {
        width: 95px;
        height: 95px;
    }
}

/* Extra large screens */
@media (min-width: 1600px) {
    .scoreboard-row[b-vl5t7z9st3] {
        padding: 1.25rem 2rem;
    }

    .scoreboard-main[b-vl5t7z9st3] {
        grid-template-columns: 150px minmax(0, 1fr) 180px;
    }

    .scoreboard-image-container[b-vl5t7z9st3] {
        width: 130px;
        height: 130px;
    }

    .scoreboard-medal[b-vl5t7z9st3] {
        font-size: 2.2rem;
        top: 6px;
        right: 6px;
    }

    .scoreboard-beverage-image[b-vl5t7z9st3] {
        width: 115px;
        height: 115px;
    }
}
/* /Components/Shared/DiscoverPlaylistCard.razor.rz.scp.css */
.playlist-card[b-z2ii8t5nfm] {
    border-radius: 18px;
    min-height: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.playlist-card-content[b-z2ii8t5nfm] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.playlist-card-actions[b-z2ii8t5nfm] {
    margin-top: auto;
}

.hero-row[b-z2ii8t5nfm] {
    display: flex;
    gap: 16px;
}

.hero-avatar[b-z2ii8t5nfm] {
    background: linear-gradient(135deg, var(--c-gold), var(--c-amber-muted));
    color: var(--c-bg-charcoal);
}

.hero-text .tags-row[b-z2ii8t5nfm] {
    margin-top: 8px;
}

.stat-chip[b-z2ii8t5nfm] {
    background-color: rgba(var(--c-black-rgb), 0.04);
}

.tag-chip[b-z2ii8t5nfm] {
    font-size: 0.75rem;
}
/* /Components/Shared/DiscoverSpotlightCard.razor.rz.scp.css */
.spotlight-card[b-pp0kifozl6] {
    border-radius: 20px;
    background-color: var(--c-bg-indigo);
    color: var(--c-white-pure);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.spotlight-card .mud-grid-item[b-pp0kifozl6] {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
}

.spotlight-content[b-pp0kifozl6] {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1 1 auto;
}

.spotlight-actions[b-pp0kifozl6] {
    margin-top: auto;
}

.card-hero[b-pp0kifozl6] {
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
}

.card-hero img[b-pp0kifozl6] {
    width: 100%;
    object-fit: cover;
}

.spotlight-card .stats-small .mud-typography[b-pp0kifozl6] {
    margin-right: 16px;
}
.spotlight-card .mud-grid[b-pp0kifozl6] {
    height: 100%;
}

.spotlight-grid[b-pp0kifozl6] {
    height: 100%;
}

.save-tasting-button[b-pp0kifozl6] {
    border-radius: 12px;
    font-weight: 600;
    padding: 10px 24px;
    color: var(--c-white);
}

.spotlight-button-row[b-pp0kifozl6] {
    align-items: center;
}
/* /Components/Shared/HostBeverageRevealPanel.razor.rz.scp.css */
.host-reveal-panel[b-wpizyhrux3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: clamp(16px, 2vh, 24px);
    padding: 0 clamp(28px, 3.5vw, 56px);
    box-sizing: border-box;
    animation: host-reveal-enter-b-wpizyhrux3 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.host-reveal-panel__chart[b-wpizyhrux3] {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: clamp(220px, 50vw, 760px);
    aspect-ratio: 1 / 1;
}

.host-reveal-panel__chart-inner[b-wpizyhrux3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

[b-wpizyhrux3] .host-reveal-panel__chart-inner .radar-chart-shell,
[b-wpizyhrux3] .host-reveal-panel__chart-inner .mud-chart {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}

[b-wpizyhrux3] .host-reveal-panel__chart-inner svg {
    width: 100% !important;
    height: 100% !important;
}

[b-wpizyhrux3] .host-reveal-panel .mud-chart-legend,
[b-wpizyhrux3] .host-reveal-panel .mud-chart-legend-item {
    display: none !important;
}

.host-reveal-panel__halo[b-wpizyhrux3] {
    position: absolute;
    inset: -18% -18% -18% -18%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 45% at 50% 50%, rgba(var(--c-gold-rgb), 0.22) 0%, rgba(var(--c-gold-rgb), 0.14) 22%, rgba(var(--c-gold-rgb), 0.06) 45%, rgba(var(--c-gold-rgb), 0.015) 70%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 50%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    filter: blur(36px);
}

.host-reveal-panel__chart[b-wpizyhrux3]  svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.host-reveal-panel__chart[b-wpizyhrux3]  .mud-charts-grid line,
.host-reveal-panel__chart[b-wpizyhrux3]  .mud-charts-grid path,
.host-reveal-panel__chart[b-wpizyhrux3]  .mud-charts-grid polygon {
    stroke: rgba(var(--c-gold-light-rgb), 0.85) !important;
    fill: none !important;
}

.host-reveal-panel__chart[b-wpizyhrux3]  text {
    fill: rgba(var(--c-gold-light-rgb), 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.6vw, 22px) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.host-reveal-score[b-wpizyhrux3] {
    margin-top: clamp(20px, 3vh, 32px);
    text-align: center;
    animation: host-reveal-enter-b-wpizyhrux3 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.host-reveal-score__eyebrow[b-wpizyhrux3] {
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.host-reveal-score__readout[b-wpizyhrux3] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    line-height: 0.96;
}

.host-reveal-score__value[b-wpizyhrux3] {
    color: var(--c-gold);
    font-size: clamp(3rem, 5.5vw, 4.6rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    text-shadow: 0 0 56px rgba(var(--c-gold-rgb), 0.32);
    animation: host-reveal-pop-b-wpizyhrux3 720ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}

.host-reveal-score__meta[b-wpizyhrux3] {
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 8px;
}

@keyframes host-reveal-enter-b-wpizyhrux3 {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes host-reveal-pop-b-wpizyhrux3 {
    0% { opacity: 0; transform: scale(0.7); filter: blur(6px); }
    70% { opacity: 1; transform: scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .host-reveal-panel[b-wpizyhrux3],
    .host-reveal-score__value[b-wpizyhrux3] {
        animation: none;
    }
}
/* /Components/Shared/HostProgressDonut.razor.rz.scp.css */
.host-donut-card[b-dovet6hb0i] {
    position: relative;
    padding: 24px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 60px rgba(var(--c-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

.host-quiz__progress-card[b-dovet6hb0i] {
    margin: 0;
}

.host-donut-card__halo[b-dovet6hb0i] {
    position: absolute;
    inset: -70% -80% -70% -80%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.16) 0%, rgba(var(--c-gold-rgb), 0.08) 25%, rgba(var(--c-gold-rgb), 0.025) 55%, transparent 100%);
    filter: blur(28px);
}

.host-donut-card__pulse-overlay[b-dovet6hb0i] {
    position: absolute;
    inset: -2px;
    z-index: 5;
    border: 2px solid rgba(var(--c-gold-rgb), 0.85);
    border-radius: 30px;
    opacity: 0;
    pointer-events: none;
    animation: hostDonutPulse-b-dovet6hb0i 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.host-donut-card__pulse-overlay[b-dovet6hb0i]::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.55);
    border-radius: inherit;
    opacity: 0;
    animation: hostDonutPulseRing-b-dovet6hb0i 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

.host-donut-card__content[b-dovet6hb0i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

[b-dovet6hb0i] .host-donut-card__count {
    color: var(--c-gold);
    font-weight: 800;
    line-height: 1;
    margin: 0;
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.9rem, 2.5vw, 2.6rem);
}

/* Sizing that callers used to supply as SizeStyle/CountStyle strings. */
[b-dovet6hb0i] .host-donut {
    height: clamp(160px, 22vh, 216px);
    width: clamp(160px, 22vh, 216px);
    --mud-palette-primary: var(--c-parchment);
}

[b-dovet6hb0i] .host-donut--compact {
    height: clamp(140px, 18vh, 188px);
    width: clamp(140px, 18vh, 188px);
}

[b-dovet6hb0i] .host-donut--compact .host-donut-card__count {
    font-size: clamp(1.7rem, 2.2vw, 2.3rem);
}

.host-donut-card__expected[b-dovet6hb0i] {
    color: rgba(var(--c-gold-soft-rgb), 0.45);
    font-weight: 500;
}

[b-dovet6hb0i] .host-donut-card__label {
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    line-height: 1.2;
    margin: 6px 0 0;
    text-transform: uppercase;
}

.host-vote-count[b-dovet6hb0i] {
    display: inline-block;
    animation: hostVoteCountBump-b-dovet6hb0i 600ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
    will-change: transform;
}

[b-dovet6hb0i] .host-donut .mud-progress-circular-circle.mud-progress-circular-circle-determinate {
    stroke: var(--c-parchment);
}

[b-dovet6hb0i] .host-donut svg circle:first-child {
    stroke: rgba(var(--c-parchment-rgb), 0.14);
}

@keyframes hostDonutPulse-b-dovet6hb0i {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(var(--c-gold-rgb), 0.55),
            0 0 36px rgba(var(--c-gold-rgb), 0.45);
    }
    100% {
        opacity: 0;
        transform: scale(1.12);
        box-shadow:
            0 0 0 24px rgba(var(--c-gold-rgb), 0),
            0 0 64px rgba(var(--c-gold-rgb), 0);
    }
}

@keyframes hostDonutPulseRing-b-dovet6hb0i {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.22); }
}

@keyframes hostVoteCountBump-b-dovet6hb0i {
    0% { transform: scale(0.78); filter: brightness(1.8) drop-shadow(0 0 16px rgba(var(--c-gold-rgb), 0.7)); }
    50% { transform: scale(1.18); filter: brightness(1.35) drop-shadow(0 0 10px rgba(var(--c-gold-rgb), 0.45)); }
    100% { transform: scale(1); filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .host-donut-card__pulse-overlay[b-dovet6hb0i],
    .host-donut-card__pulse-overlay[b-dovet6hb0i]::after,
    .host-vote-count[b-dovet6hb0i] {
        animation: none;
    }
}
/* /Components/Shared/HostTastingView.razor.rz.scp.css */
.host-stage[b-lbwlakr09m] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--c-bg-abyss);
    color: var(--c-gold-soft);
}

.host-stage--preview[b-lbwlakr09m] {
    width: 100%;
    height: 100%;
    min-height: 0;
}

[b-lbwlakr09m] .host-stage__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 0;
}

.host-stage--preview[b-lbwlakr09m]  .host-stage__container {
    height: 100%;
    min-height: 0;
}

.host-stage__main[b-lbwlakr09m] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 24px 32px 0;
}

.host-stage__ambient[b-lbwlakr09m],
.host-stage__noise[b-lbwlakr09m],
.host-stage__vignette[b-lbwlakr09m] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.host-stage__ambient[b-lbwlakr09m] {
    inset: -20%;
    background:
        radial-gradient(ellipse 55% 45% at 78% 45%, rgba(var(--c-gold-rgb), 0.18) 0%, rgba(var(--c-gold-rgb), 0.08) 30%, rgba(var(--c-gold-rgb), 0.02) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 25%, rgba(var(--c-violet-rgb), 0.28) 0%, rgba(var(--c-violet-rgb), 0.12) 35%, rgba(var(--c-violet-rgb), 0.03) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 110%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    animation: hostAmbientDrift-b-lbwlakr09m 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes hostAmbientDrift-b-lbwlakr09m {
    0% { transform: translate3d(-15%, -10%, 0) scale(1.1); }
    100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
}

.host-stage__noise[b-lbwlakr09m] {
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

.host-stage__vignette[b-lbwlakr09m] {
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(var(--c-black-rgb), 0.55) 100%);
}

[b-lbwlakr09m] .host-header {
    position: relative;
    width: 100%;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
}

[b-lbwlakr09m] .host-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--c-gold-soft-rgb), 0.22) 50%, transparent 100%);
    pointer-events: none;
}

.host-header__item--left[b-lbwlakr09m] {
    text-align: left;
}

.host-header__item--center[b-lbwlakr09m] {
    text-align: center;
}

.host-header__item--right[b-lbwlakr09m] {
    text-align: right;
}

[b-lbwlakr09m] .host-header__text {
    color: var(--c-gold-soft);
    font-size: 1.75rem;
    font-weight: 400;
}

.host-header__meta[b-lbwlakr09m] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.host-header__elapsed[b-lbwlakr09m] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(var(--c-gold-soft-rgb), 0.65);
    font-size: 1.25rem;
}

.host-header__elapsed span[b-lbwlakr09m] {
    font-variant-numeric: tabular-nums;
}

.host-header__elapsed[b-lbwlakr09m]  .mud-icon-root {
    font-size: 1.4rem;
}

[b-lbwlakr09m] .host-header__qa-button {
    color: var(--c-gold);
}

[b-lbwlakr09m] .host-header__people-icon {
    color: var(--c-gold-soft);
    font-size: 1.75rem;
}

.host-controls-wrapper[b-lbwlakr09m] {
    position: relative;
    flex-shrink: 0;
    margin-top: auto;
    padding: 24px 32px 20px;
    background: linear-gradient(180deg, rgba(var(--c-bg-abyss-rgb), 0) 0%, rgba(var(--c-gold-rgb), 0.025) 55%, rgba(var(--c-gold-rgb), 0.05) 100%);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

.host-controls-wrapper[b-lbwlakr09m]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 32px;
    right: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--c-gold-rgb), 0.18) 50%, transparent 100%);
    pointer-events: none;
}

.host-controls-grid[b-lbwlakr09m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: relative;
}

.prev-btn[b-lbwlakr09m] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prev-btn[b-lbwlakr09m]  .nav-btn,
.next-btn[b-lbwlakr09m]  .mud-button-root {
    min-width: 130px;
}

.center-btns[b-lbwlakr09m] {
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transform: translate(-50%, -50%);
}

.next-btn[b-lbwlakr09m] {
    margin-left: auto;
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn,
.host-controls-grid[b-lbwlakr09m]  .host-control-btn .mud-button-root {
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14) !important;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 8px 18px;
    text-transform: none;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.05);
    transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn:hover {
    border-color: rgba(var(--c-gold-soft-rgb), 0.28) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.08) 0%, rgba(var(--c-gold-light-rgb), 0.02) 100%) !important;
    color: var(--c-gold-light) !important;
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn.mud-button-disabled,
.host-controls-grid[b-lbwlakr09m]  .host-control-btn:disabled {
    border-color: rgba(var(--c-gold-soft-rgb), 0.08) !important;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.025) 0%, rgba(var(--c-white-rgb), 0.005) 100%) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.3) !important;
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn--primary {
    border-color: rgba(var(--c-gold-soft-rgb), 0.22) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.06) 0%, rgba(var(--c-gold-light-rgb), 0.015) 100%) !important;
    color: var(--c-gold-light) !important;
    font-weight: 600;
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn--primary:hover {
    border-color: rgba(var(--c-gold-soft-rgb), 0.4) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.12) 0%, rgba(var(--c-gold-light-rgb), 0.04) 100%) !important;
    color: var(--c-gold-light) !important;
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn--ready {
    position: relative;
    overflow: visible;
    border-color: rgba(var(--c-gold-soft-rgb), 0.5) !important;
    background: linear-gradient(145deg, var(--c-gold) 0%, var(--c-gold-deep) 100%) !important;
    color: var(--c-bg-deep) !important;
    box-shadow:
        0 8px 18px -10px rgba(var(--c-black-rgb), 0.5),
        0 0 18px rgba(var(--c-gold-rgb), 0.18),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.28);
    animation: hostRevealReadyTint-b-lbwlakr09m 2200ms ease-in-out infinite;
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn--ready:hover {
    background: linear-gradient(145deg, var(--c-gold-light) 0%, var(--c-gold-deep) 100%) !important;
    color: var(--c-bg-deep) !important;
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn--ready::before,
.host-controls-grid[b-lbwlakr09m]  .host-control-btn--ready::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid rgba(var(--c-gold-rgb), 0.7);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: hostRevealReadyRing-b-lbwlakr09m 1800ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn--ready::after {
    animation-delay: 900ms;
}

@keyframes hostRevealReadyTint-b-lbwlakr09m {
    0%, 100% {
        box-shadow:
            0 8px 18px -10px rgba(var(--c-black-rgb), 0.5),
            0 0 18px rgba(var(--c-gold-rgb), 0.18),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.28);
    }
    50% {
        box-shadow:
            0 10px 24px -10px rgba(var(--c-black-rgb), 0.55),
            0 0 40px rgba(var(--c-gold-rgb), 0.55),
            inset 0 1px 0 rgba(var(--c-white-rgb), 0.36);
    }
}

@keyframes hostRevealReadyRing-b-lbwlakr09m {
    0% {
        border-width: 2px;
        opacity: 0.8;
        transform: scale(1);
    }
    80% {
        opacity: 0;
    }
    100% {
        border-width: 1px;
        opacity: 0;
        transform: scale(1.45);
    }
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn--complete {
    border: 1px solid rgba(var(--c-gold-warm-rgb), 0.32) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-warm-rgb), 0.06) 0%, rgba(var(--c-copper-rgb), 0.02) 100%) !important;
    color: var(--c-gold-warm) !important;
}

.host-controls-grid[b-lbwlakr09m]  .host-control-btn--complete:hover {
    border-color: rgba(var(--c-gold-warm-rgb), 0.5) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-warm-rgb), 0.12) 0%, rgba(var(--c-copper-rgb), 0.04) 100%) !important;
    color: var(--c-gold-cream) !important;
}

.host-controls-grid[b-lbwlakr09m]  .host-fullscreen-btn {
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14) !important;
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.7) !important;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.05);
    transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
}

.host-controls-grid[b-lbwlakr09m]  .host-fullscreen-btn:hover {
    border-color: rgba(var(--c-gold-soft-rgb), 0.28) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.08) 0%, rgba(var(--c-gold-light-rgb), 0.02) 100%) !important;
    color: var(--c-gold-light) !important;
}

[b-lbwlakr09m] .host-quiz__progress-card {
    margin: 0;
}

[b-lbwlakr09m] .host-donut-card {
    position: relative;
    padding: 24px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 60px rgba(var(--c-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

[b-lbwlakr09m] .host-donut-card__halo {
    position: absolute;
    inset: -70% -80% -70% -80%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 45% 42% at 50% 50%, rgba(var(--c-gold-rgb), 0.16) 0%, rgba(var(--c-gold-rgb), 0.08) 25%, rgba(var(--c-gold-rgb), 0.025) 55%, transparent 100%);
    filter: blur(28px);
}

[b-lbwlakr09m] .host-donut-card__pulse-overlay {
    position: absolute;
    inset: -2px;
    z-index: 5;
    border: 2px solid rgba(var(--c-gold-rgb), 0.85);
    border-radius: 30px;
    opacity: 0;
    pointer-events: none;
    animation: hostDonutPulse-b-lbwlakr09m 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

[b-lbwlakr09m] .host-donut-card__pulse-overlay::after {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.55);
    border-radius: inherit;
    opacity: 0;
    animation: hostDonutPulseRing-b-lbwlakr09m 900ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

@keyframes hostDonutPulse-b-lbwlakr09m {
    0% {
        opacity: 1;
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(var(--c-gold-rgb), 0.55),
            0 0 36px rgba(var(--c-gold-rgb), 0.45);
    }
    100% {
        opacity: 0;
        transform: scale(1.12);
        box-shadow:
            0 0 0 24px rgba(var(--c-gold-rgb), 0),
            0 0 64px rgba(var(--c-gold-rgb), 0);
    }
}

@keyframes hostDonutPulseRing-b-lbwlakr09m {
    0% { opacity: 0.7; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.22); }
}

[b-lbwlakr09m] .host-vote-count {
    display: inline-block;
    animation: hostVoteCountBump-b-lbwlakr09m 600ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
    will-change: transform;
}

@keyframes hostVoteCountBump-b-lbwlakr09m {
    0% { transform: scale(0.78); filter: brightness(1.8) drop-shadow(0 0 16px rgba(var(--c-gold-rgb), 0.7)); }
    50% { transform: scale(1.18); filter: brightness(1.35) drop-shadow(0 0 10px rgba(var(--c-gold-rgb), 0.45)); }
    100% { transform: scale(1); filter: none; }
}

[b-lbwlakr09m] .host-donut .mud-progress-circular-circle.mud-progress-circular-circle-determinate {
    stroke: var(--c-parchment);
}

[b-lbwlakr09m] .host-donut svg circle:first-child {
    stroke: rgba(var(--c-parchment-rgb), 0.14);
}

[b-lbwlakr09m] .host-reveal-panel {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: clamp(16px, 2vh, 24px);
    padding: 0 clamp(28px, 3.5vw, 56px);
    box-sizing: border-box;
    animation: host-reveal-enter-b-lbwlakr09m 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[b-lbwlakr09m] .host-reveal-panel__chart {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: clamp(220px, 50vw, 760px);
    aspect-ratio: 1 / 1;
}

[b-lbwlakr09m] .host-reveal-panel__chart-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

[b-lbwlakr09m] .host-reveal-panel__chart-inner .radar-chart-shell,
[b-lbwlakr09m] .host-reveal-panel__chart-inner .mud-chart {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
}

[b-lbwlakr09m] .host-reveal-panel__chart-inner svg {
    width: 100% !important;
    height: 100% !important;
}

[b-lbwlakr09m] .host-reveal-panel .mud-chart-legend,
[b-lbwlakr09m] .host-reveal-panel .mud-chart-legend-item {
    display: none !important;
}

[b-lbwlakr09m] .host-reveal-panel__halo {
    position: absolute;
    inset: -18% -18% -18% -18%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 45% at 50% 50%, rgba(var(--c-gold-rgb), 0.22) 0%, rgba(var(--c-gold-rgb), 0.14) 22%, rgba(var(--c-gold-rgb), 0.06) 45%, rgba(var(--c-gold-rgb), 0.015) 70%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 50%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    filter: blur(36px);
}

[b-lbwlakr09m] .host-reveal-panel__chart svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
}

[b-lbwlakr09m] .host-reveal-panel__chart .mud-charts-grid line,
[b-lbwlakr09m] .host-reveal-panel__chart .mud-charts-grid path,
[b-lbwlakr09m] .host-reveal-panel__chart .mud-charts-grid polygon {
    stroke: rgba(var(--c-gold-light-rgb), 0.85) !important;
    fill: none !important;
}

[b-lbwlakr09m] .host-reveal-panel__chart text {
    fill: rgba(var(--c-gold-light-rgb), 0.85) !important;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: clamp(14px, 1.6vw, 22px) !important;
    font-weight: 600;
    letter-spacing: 0.02em;
}

[b-lbwlakr09m] .host-reveal-score {
    margin-top: clamp(20px, 3vh, 32px);
    text-align: center;
    animation: host-reveal-enter-b-lbwlakr09m 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

[b-lbwlakr09m] .host-reveal-score__eyebrow {
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

[b-lbwlakr09m] .host-reveal-score__readout {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Montserrat', sans-serif;
    line-height: 0.96;
}

[b-lbwlakr09m] .host-reveal-score__value {
    color: var(--c-gold);
    font-size: clamp(3rem, 5.5vw, 4.6rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    text-shadow: 0 0 56px rgba(var(--c-gold-rgb), 0.32);
    animation: host-reveal-pop-b-lbwlakr09m 720ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both;
}

[b-lbwlakr09m] .host-reveal-score__meta {
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 8px;
}

@keyframes host-reveal-enter-b-lbwlakr09m {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes host-reveal-pop-b-lbwlakr09m {
    0% { opacity: 0; transform: scale(0.7); filter: blur(6px); }
    70% { opacity: 1; transform: scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .host-stage__ambient[b-lbwlakr09m],
    .host-controls-grid[b-lbwlakr09m]  .host-control-btn,
    .host-controls-grid[b-lbwlakr09m]  .host-fullscreen-btn,
    .host-controls-grid[b-lbwlakr09m]  .host-control-btn--ready,
    .host-controls-grid[b-lbwlakr09m]  .host-control-btn--ready::before,
    .host-controls-grid[b-lbwlakr09m]  .host-control-btn--ready::after,
    [b-lbwlakr09m] .host-donut-card__pulse-overlay,
    [b-lbwlakr09m] .host-donut-card__pulse-overlay::after,
    [b-lbwlakr09m] .host-vote-count,
    [b-lbwlakr09m] .host-reveal-panel,
    [b-lbwlakr09m] .host-reveal-score__value {
        animation: none;
        transition: none;
    }
}

@media (max-width: 959.95px) {
    .fullscreen-desktop-slot[b-lbwlakr09m] {
        display: none;
    }

    .host-stage__main[b-lbwlakr09m] {
        padding: 18px 18px 0;
    }

    [b-lbwlakr09m] .host-header {
        margin-bottom: 18px;
    }

    [b-lbwlakr09m] .host-header__text {
        font-size: clamp(0.9rem, 2.8vw, 1.15rem);
    }

    .host-header__meta[b-lbwlakr09m] {
        gap: 8px;
    }

    .host-controls-grid[b-lbwlakr09m] {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-template-areas: "prev center next";
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        position: static;
    }

    .prev-btn[b-lbwlakr09m] {
        grid-area: prev;
        justify-self: start;
    }

    .next-btn[b-lbwlakr09m] {
        grid-area: next;
        justify-self: end;
        width: auto;
        margin-left: 0;
    }

    .center-btns[b-lbwlakr09m] {
        position: static;
        grid-area: center;
        justify-self: center;
        flex-direction: row;
        width: auto;
        max-width: none;
        transform: none;
    }
}
/* /Components/Shared/LiveFeedbackResults.razor.rz.scp.css */
.radar-chart-container[b-fxg93g0603] {
    width: 100%;
    height: min(35vh, 350px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* For tablets and up - constrain height to prevent scrollbars */
@media (min-width: 768px) {
    .radar-chart-container[b-fxg93g0603] {
        height: min(35vh, 350px);
    }
}

/* For larger screens - account for header/footer taking ~200px */
@media (min-width: 1200px) {
    .radar-chart-container[b-fxg93g0603] {
        height: min(38vh, 380px);
    }
}
/* /Components/Shared/RevealCountdownOverlay.razor.rz.scp.css */
/* Full-screen 3-2-1 countdown shown to host + participants right before the
   reveal lands. Brand-aligned: deep base wash + warm-gold halo + Montserrat
   900 numeral. */

.reveal-countdown[b-78rcw0andp] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(var(--c-bg-abyss-rgb), 0.78) 0%, rgba(var(--c-bg-abyss-rgb), 0.92) 100%);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    color: var(--c-gold);
    pointer-events: none;
    animation: revealCountdownFade-b-78rcw0andp 220ms ease-out both;
}

.reveal-countdown__halo[b-78rcw0andp] {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(ellipse 45% 40% at 50% 50%, rgba(var(--c-gold-rgb), 0.22) 0%, rgba(var(--c-gold-rgb), 0.08) 35%, rgba(var(--c-gold-rgb), 0.02) 65%, transparent 100%),
        radial-gradient(ellipse 55% 50% at 50% 50%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    pointer-events: none;
    filter: blur(40px);
}

.reveal-countdown__num[b-78rcw0andp] {
    position: relative;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(8rem, 28vw, 22rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--c-gold);
    text-shadow:
        0 0 56px rgba(var(--c-gold-rgb), 0.45),
        0 8px 32px rgba(var(--c-black-rgb), 0.6);
    animation: revealCountdownPop-b-78rcw0andp 1s cubic-bezier(0.22, 1, 0.36, 1);
    font-variant-numeric: tabular-nums;
}

.reveal-countdown__label[b-78rcw0andp] {
    position: relative;
    margin-top: 24px;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
}

@keyframes revealCountdownPop-b-78rcw0andp {
    0%   { transform: scale(0.5); opacity: 0; filter: blur(8px); }
    45%  { transform: scale(1.12); opacity: 1; filter: blur(0); }
    100% { transform: scale(1); opacity: 1; filter: blur(0); }
}

@keyframes revealCountdownFade-b-78rcw0andp {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .reveal-countdown[b-78rcw0andp],
    .reveal-countdown__num[b-78rcw0andp] { animation: none; }
}
/* /Components/Shared/ShoppingListPanel.razor.rz.scp.css */
.shopping-list-panel[b-024q0h33va] {
    position: relative;
    display: grid;
    gap: 16px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.13);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(var(--c-violet-rgb), 0.12), rgba(var(--c-white-rgb), 0.018)),
        rgba(var(--c-bg-abyss-rgb), 0.32);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.055);
    padding: clamp(14px, 2vw, 18px);
    min-width: 0;
}

.shopping-list-panel--expanded[b-024q0h33va] {
    border-color: rgba(var(--c-gold-rgb), 0.18);
    background:
        linear-gradient(135deg, rgba(var(--c-violet-rgb), 0.14), rgba(var(--c-gold-rgb), 0.025)),
        rgba(var(--c-bg-abyss-rgb), 0.38);
}

.shopping-list-panel__summary[b-024q0h33va] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.shopping-list-panel__icon[b-024q0h33va] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.18);
    border-radius: 12px;
    background: rgba(var(--c-gold-rgb), 0.065);
    color: rgba(var(--c-gold-light-rgb), 0.88);
}

.shopping-list-panel__eyebrow[b-024q0h33va] {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--c-gold-light-rgb), 0.72);
}

.shopping-list-panel__summary-line[b-024q0h33va] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.shopping-list-panel__summary-line strong[b-024q0h33va] {
    font-size: 1.05rem;
}

.shopping-list-panel__summary-line span[b-024q0h33va] {
    font-size: 0.85rem;
    opacity: 0.72;
}

.shopping-list-panel__content[b-024q0h33va] {
    display: grid;
    gap: 14px;
    padding-top: 14px;
}

.shopping-list-panel__layout[b-024q0h33va] {
    display: grid;
    gap: 20px;
    align-items: start;
}

.shopping-list-panel__settings[b-024q0h33va],
.shopping-list-panel__visuals[b-024q0h33va] {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
}

@media (min-width: 900px) {
    .shopping-list-panel__layout[b-024q0h33va] {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
}

.shopping-list-panel__controls[b-024q0h33va] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    align-items: start;
    gap: 12px;
}

.shopping-list-panel__gauges[b-024q0h33va] {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.1);
    border-radius: 14px;
    background: rgba(var(--c-bg-abyss-rgb), 0.28);
}

.shopping-list-gauge__head[b-024q0h33va] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
}

.shopping-list-gauge__label[b-024q0h33va] {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
}

.shopping-list-gauge__value[b-024q0h33va] {
    font-weight: 600;
}

.shopping-list-gauge__verdict[b-024q0h33va] {
    margin-left: auto;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.shopping-list-gauge__verdict--good[b-024q0h33va] {
    border: 1px solid rgba(var(--c-gold-rgb), 0.35);
    background: rgba(var(--c-gold-rgb), 0.12);
    color: rgba(var(--c-gold-light-rgb), 0.95);
}

.shopping-list-gauge__verdict--low[b-024q0h33va],
.shopping-list-gauge__verdict--high[b-024q0h33va] {
    border: 1px solid rgba(var(--c-white-rgb), 0.14);
    background: rgba(var(--c-white-rgb), 0.05);
    opacity: 0.75;
}

.shopping-list-gauge__track[b-024q0h33va] {
    position: relative;
    display: flex;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
}

.shopping-list-gauge__zone[b-024q0h33va] {
    display: block;
    height: 100%;
    width: var(--gauge-zone-width, 0%);
}

.shopping-list-gauge__zone--low[b-024q0h33va] {
    background: rgba(var(--c-white-rgb), 0.08);
}

.shopping-list-gauge__zone--good[b-024q0h33va] {
    background: linear-gradient(90deg, rgba(var(--c-gold-rgb), 0.5), rgba(var(--c-gold-light-rgb), 0.75));
}

.shopping-list-gauge__zone--high[b-024q0h33va] {
    background: rgba(var(--c-violet-rgb), 0.35);
}

.shopping-list-gauge__marker[b-024q0h33va] {
    position: absolute;
    top: -3px;
    left: var(--gauge-marker-offset, 0%);
    width: 3px;
    height: 16px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: rgba(var(--c-white-rgb), 0.92);
    box-shadow: 0 0 6px rgba(var(--c-black-rgb), 0.55);
}

.shopping-list-panel__presets[b-024q0h33va] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.shopping-list-panel__presets-head[b-024q0h33va] {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.shopping-list-panel__presets-label[b-024q0h33va] {
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
}

.shopping-list-panel__units[b-024q0h33va] {
    display: flex;
    gap: 2px;
    border: 1px solid rgba(var(--c-white-rgb), 0.18);
    padding: 2px;
}

/* Landing pages force .mud-button square with !important; match that here so the
   segmented control lines up with its own border on every page that hosts it. */
.shopping-list-panel__units[b-024q0h33va]  .mud-button-root {
    min-width: 44px;
    border-radius: 0;
}

.shopping-list-panel__custom-pour[b-024q0h33va] {
    width: 90px;
}

.shopping-list-chart[b-024q0h33va] {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.1);
    border-radius: 14px;
    background: rgba(var(--c-bg-abyss-rgb), 0.28);
}

.shopping-list-chart__head[b-024q0h33va] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.shopping-list-chart__label[b-024q0h33va] {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
}

.shopping-list-chart__legend[b-024q0h33va] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    opacity: 0.75;
}

.shopping-list-chart__key[b-024q0h33va] {
    display: inline-block;
    width: 14px;
    height: 3px;
    border-radius: 2px;
}

.shopping-list-chart__key--consumed[b-024q0h33va] {
    background: rgba(var(--c-white-rgb), 0.4);
}

.shopping-list-chart__key--body[b-024q0h33va] {
    background: rgba(var(--c-gold-light-rgb), 0.9);
}

.shopping-list-chart__svg[b-024q0h33va] {
    display: block;
    width: 100%;
    height: 110px;
    overflow: visible;
}

.shopping-list-chart__line[b-024q0h33va] {
    fill: none;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.shopping-list-chart__line--consumed[b-024q0h33va] {
    stroke: rgba(var(--c-white-rgb), 0.35);
    stroke-dasharray: 4 3;
}

.shopping-list-chart__line--body[b-024q0h33va] {
    stroke: rgba(var(--c-gold-light-rgb), 0.95);
}

.shopping-list-chart__fill[b-024q0h33va] {
    fill: rgba(var(--c-gold-rgb), 0.16);
    stroke: none;
}

.shopping-list-chart__threshold[b-024q0h33va] {
    stroke: rgba(var(--c-violet-rgb), 0.8);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    vector-effect: non-scaling-stroke;
}

.shopping-list-chart__axis[b-024q0h33va] {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    opacity: 0.6;
}

.shopping-list-panel__table[b-024q0h33va] {
    overflow-x: auto;
}


.shopping-list-panel__table table[b-024q0h33va] {
    width: 100%;
    border-collapse: collapse;
}

.shopping-list-panel__table th[b-024q0h33va] {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.6;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(var(--c-gold-soft-rgb), 0.18);
}

.shopping-list-panel__table td[b-024q0h33va] {
    padding: 6px 8px;
    border-bottom: 1px solid rgba(var(--c-white-rgb), 0.06);
    vertical-align: middle;
}

.shopping-list-panel__num[b-024q0h33va] {
    text-align: right;
    white-space: nowrap;
}

.shopping-list-panel__name[b-024q0h33va] {
    display: block;
}

.shopping-list-panel__producer[b-024q0h33va] {
    display: block;
    font-size: 0.75rem;
    opacity: 0.6;
}

.shopping-list-panel__row-actions[b-024q0h33va] {
    display: flex;
    gap: 8px;
}

.shopping-list-panel__actions-row[b-024q0h33va] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Filled and outlined variants size differently on their own - the outline adds
   a border box the filled one does not have - so the box is pinned here. */
.shopping-list-panel__actions-row[b-024q0h33va]  .mud-button-root {
    flex: 1 1 220px;
    min-height: 44px;
    margin: 0;
}

.shopping-list-panel__capture[b-024q0h33va] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    max-width: 560px;
}

/* The input carries helper text below it, so the button aligns to the top of the
   pair rather than to the centre of the taller column. */
.shopping-list-panel__capture[b-024q0h33va]  .mud-input-control {
    flex: 1 1 260px;
}

/* MudBlazor gives the dense field an 8px top margin of its own; the button takes
   the same so the two boxes line up instead of the button floating above it. */
.shopping-list-panel__capture[b-024q0h33va]  .mud-button-root {
    flex: 0 0 auto;
    min-height: 40px;
    margin-top: 8px;
}

.shopping-list-panel__empty[b-024q0h33va] {
    opacity: 0.7;
}

.shopping-list-panel__remove[b-024q0h33va] {
    width: 40px;
    text-align: right;
}

.shopping-list-panel__sr-only[b-024q0h33va] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* MudCollapse clips with overflow:auto so it can animate a height. A panel that
   is never collapsible never animates, and the wrapper's rounded height is a few
   pixels short of its content, which shows up as a stray scrollbar. */
.shopping-list-panel--static[b-024q0h33va]  .mud-collapse-wrapper {
    overflow: visible;
}
/* /Components/Shared/StorySlideView.razor.rz.scp.css */
.story-slide[b-tvcuruuqxj] {
    display: grid;
    place-items: center;
    width: 100%;
    /* Fill the stage via flex stretch rather than height:100% — the host stage's height
       chain bottoms out at min-height:100vh, so a percentage height collapses toward
       content height. align-self:stretch fills the flex line regardless. */
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    height: auto;
    padding: clamp(20px, 4vw, 64px);
    box-sizing: border-box;
    text-align: center;
    color: var(--c-gold-soft);
}

.story-slide__center[b-tvcuruuqxj] {
    max-width: 210ch;
}

/* Text & Text+Image slides anchor their title to the top-left, like beverage/quiz slides. */
.story-slide--text[b-tvcuruuqxj],
.story-slide--imagetext[b-tvcuruuqxj] {
    place-items: stretch;
    text-align: left;
}

.story-slide__prose[b-tvcuruuqxj] {
    align-self: start;
    justify-self: start;
    max-width: 70ch;
    text-align: left;
}

/* Text+Image: copy on the left, image on the right. */
.story-slide__split[b-tvcuruuqxj] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: minmax(0, 1fr);  /* the row fills the full height, not just the taller column's content */
    align-items: stretch;                /* columns fill that full height so the image can center within it */
    gap: clamp(20px, 4vw, 56px);
    width: 100%;
    height: 100%;
}

.story-slide__split-copy[b-tvcuruuqxj] {
    align-self: start;           /* keep title/text anchored to the top */
    min-width: 0;
}

.story-slide__split-media[b-tvcuruuqxj] {
    display: flex;
    align-items: center;         /* vertically center the image in the right half */
    justify-content: center;
    min-width: 0;
    height: 100%;
}

@media (max-width: 720px) {
    .story-slide__split[b-tvcuruuqxj] {
        grid-template-columns: 1fr;
        align-content: center;
    }
}

.story-slide__title[b-tvcuruuqxj] {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.02;
    margin: 0;
    text-shadow: 0 0 26px rgba(var(--c-gold-rgb), 0.14), 0 8px 20px rgba(var(--c-black-rgb), 0.4);
    overflow-wrap: anywhere;
}

.story-slide__heading[b-tvcuruuqxj] {
    color: rgba(var(--c-gold-light-rgb), 0.95);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 3.6vw, 2.8rem);
    font-weight: 850;
    line-height: 1.1;
    margin: 0;
    overflow-wrap: anywhere;
}

.story-slide__accent[b-tvcuruuqxj] {
    width: clamp(56px, 6vw, 96px);
    height: 4px;
    margin: clamp(14px, 1.6vw, 22px) auto;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

.story-slide__prose .story-slide__accent[b-tvcuruuqxj],
.story-slide__split-copy .story-slide__accent[b-tvcuruuqxj] {
    margin-left: 0;
}

.story-slide__subtitle[b-tvcuruuqxj] {
    color: rgba(var(--c-stone-rgb), 0.88);
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.05rem, 1.8vw, 1.6rem);
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
    overflow-wrap: anywhere;
}

.story-slide__body[b-tvcuruuqxj] {
    color: rgba(var(--c-linen-rgb), 0.92);
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.05rem, 1.7vw, 1.5rem);
    font-weight: 320;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Image */
.story-slide__figure[b-tvcuruuqxj] {
    display: grid;
    place-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    width: 100%;
    height: 100%;
    margin: 0;
}

.story-slide__image[b-tvcuruuqxj] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 16px;
    box-shadow: 0 30px 60px -28px rgba(var(--c-black-rgb), 0.7);
}

.story-slide__caption[b-tvcuruuqxj] {
    display: grid;
    gap: 4px;
}

.story-slide__caption strong[b-tvcuruuqxj] {
    color: rgba(var(--c-gold-light-rgb), 0.95);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    font-weight: 800;
}

.story-slide__caption span[b-tvcuruuqxj] {
    color: rgba(var(--c-stone-rgb), 0.82);
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
}

/* Video + Map embeds */
.story-slide__media[b-tvcuruuqxj] {
    display: grid;
    gap: clamp(10px, 1.4vw, 18px);
    width: 100%;
    height: 100%;
    align-content: center;
    justify-items: center;
}

/* Video: lay the media out as a column so the embed can shrink to fit the area that's
   left after the title/caption, instead of overflowing the container. */
.story-slide--video .story-slide__media[b-tvcuruuqxj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.story-slide__embed[b-tvcuruuqxj] {
    position: relative;
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    max-height: 100%;       /* never taller than the available area */
    min-height: 0;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 30px 60px -28px rgba(var(--c-black-rgb), 0.72);
}

.story-slide__embed iframe[b-tvcuruuqxj] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.story-slide__media-title[b-tvcuruuqxj] {
    color: rgba(var(--c-gold-light-rgb), 0.92);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.4rem);
    font-weight: 800;
    margin: 0;
    overflow-wrap: anywhere;
}

.story-slide__media-caption[b-tvcuruuqxj] {
    color: rgba(var(--c-stone-rgb), 0.82);
    font-size: clamp(0.85rem, 1.2vw, 1.05rem);
    line-height: 1.45;
    margin: 0;
    overflow-wrap: anywhere;
}

.story-slide__map[b-tvcuruuqxj] {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 240px;
    flex: 1 1 auto;
    border-radius: 16px;
    overflow: hidden;          /* clip the oversized canvas to the visible frame */
    box-shadow: 0 30px 60px -28px rgba(var(--c-black-rgb), 0.72);
    /* A neutral "map paper" fill so any tiles not yet loaded during a zoom-out
       read as loading map rather than a black void. */
    background: var(--c-bone);
}

/* The actual Leaflet element is rendered 2x the visible size and centered, so a ring
   of off-screen tiles is always loaded around the view. Only the centre quarter shows. */
.story-slide__map-canvas[b-tvcuruuqxj] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
}

.story-slide__map[b-tvcuruuqxj]  .leaflet-container {
    background: var(--c-bone);
}

/* OSM attribution must stay visible — the default control sits in the clipped area,
   so we render our own in the visible frame. */
.story-slide__map-credit[b-tvcuruuqxj] {
    position: absolute;
    right: 6px;
    bottom: 4px;
    z-index: 500;
    padding: 1px 6px;
    border-radius: 6px;
    background: rgba(var(--c-white-rgb), 0.75);
    color: var(--c-grey-800);
    font-size: 0.68rem;
    line-height: 1.4;
    pointer-events: none;
}

/* The map slide's media column must give Leaflet a concrete height to fill. */
.story-slide--map .story-slide__media[b-tvcuruuqxj] {
    height: 100%;
    grid-template-rows: 1fr auto;
}

/* Missing-media placeholder */
.story-slide__missing[b-tvcuruuqxj] {
    display: grid;
    place-items: center;
    gap: 10px;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px dashed rgba(var(--c-gold-soft-rgb), 0.24);
    border-radius: 16px;
    color: rgba(var(--c-stone-rgb), 0.6);
    font-size: 1rem;
}

.story-slide__missing[b-tvcuruuqxj]  .mud-icon-root {
    font-size: 3rem;
    color: rgba(var(--c-gold-soft-rgb), 0.4);
}
/* /Components/Shared/TastingJoinPage.razor.rz.scp.css */
/* ============================================================
   Pre-start lobby — projected on a TV while the room fills up.
   Star: tasting NAME (the personality of the night).
   Anchor pair: join CODE + QR (the "how to enter" signal).
   Live signal: joined counter pulse on every new arrival.
   Action: Start Tasting.
   ============================================================ */

.lobby-stage[b-e337s2hj3c] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: var(--c-bg-abyss);
    color: var(--c-white);
    display: flex;
    flex-direction: column;
}

/* ---- Layer 1: Ambient drift ---- */
.lobby-stage__ambient[b-e337s2hj3c] {
    position: absolute;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 78% 45%, rgba(var(--c-gold-rgb), 0.18) 0%, rgba(var(--c-gold-rgb), 0.08) 30%, rgba(var(--c-gold-rgb), 0.02) 60%, transparent 100%),
        radial-gradient(ellipse 45% 40% at 18% 25%, rgba(var(--c-violet-rgb), 0.28) 0%, rgba(var(--c-violet-rgb), 0.12) 35%, rgba(var(--c-violet-rgb), 0.03) 65%, transparent 100%),
        radial-gradient(ellipse 65% 50% at 50% 110%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    animation: lobbyAmbientDrift-b-e337s2hj3c 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes lobbyAmbientDrift-b-e337s2hj3c {
    0%   { transform: translate3d(-15%, -10%, 0) scale(1.10); }
    100% { transform: translate3d(15%, 12%, 0) scale(1.25); }
}

/* ---- Layer 2: Noise ---- */
.lobby-stage__noise[b-e337s2hj3c] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.045;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.78  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 240px 240px;
}

/* ---- Layer 3: Vignette ---- */
.lobby-stage__vignette[b-e337s2hj3c] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 110% 95% at 50% 45%, transparent 55%, rgba(var(--c-black-rgb), 0.55) 100%);
}

/* ---- Content shell ---- */
.lobby-shell[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4.5vh, 56px);
    padding: clamp(32px, 6vh, 64px) clamp(20px, 4vw, 64px);
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
}

/* ---- Header — the real anchor: tasting name + accent ---- */
.lobby-header[b-e337s2hj3c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 1100px;
    width: 100%;
}

.lobby-eyebrow[b-e337s2hj3c] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.95rem;
}

.lobby-eyebrow__pulse[b-e337s2hj3c] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-gold);
    box-shadow: 0 0 10px rgba(var(--c-gold-rgb), 0.7);
    position: relative;
}

.lobby-eyebrow__pulse[b-e337s2hj3c]::before {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(var(--c-gold-rgb), 0.4);
    animation: lobbyEyebrowRing-b-e337s2hj3c 1800ms ease-out infinite;
}

@keyframes lobbyEyebrowRing-b-e337s2hj3c {
    0%   { transform: scale(0.6); opacity: 0.7; }
    100% { transform: scale(2.6); opacity: 0; }
}

.lobby-title[b-e337s2hj3c] {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: var(--c-gold);
    letter-spacing: -0.025em;
    line-height: 0.98;
    margin: 0;
    font-size: clamp(2.6rem, 6.5vw, 5.4rem);
    text-shadow: 0 4px 28px rgba(var(--c-gold-rgb), 0.18);
    word-break: break-word;
    overflow-wrap: anywhere;
}

.lobby-title--long[b-e337s2hj3c]  { font-size: clamp(2.2rem, 5vw, 4.2rem); }
.lobby-title--xlong[b-e337s2hj3c] { font-size: clamp(1.9rem, 4vw, 3.4rem); }

.lobby-accent[b-e337s2hj3c] {
    width: 96px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
}

/* ---- Hero pair: code + QR side by side, balanced weights ---- */
.lobby-hero[b-e337s2hj3c] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(32px, 5vw, 72px);
    width: 100%;
    flex-wrap: wrap;
}

.lobby-hero__code[b-e337s2hj3c] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    min-width: 0;
}

.lobby-hero__code-card[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    padding: clamp(14px, 1.8vh, 20px) clamp(20px, 3vw, 40px);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 60px rgba(var(--c-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: calc(clamp(180px, 16vw, 220px) + 2 * clamp(14px, 1.8vh, 20px));
    box-sizing: border-box;
}

.lobby-hero__code-eyebrow[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.85rem;
}

.lobby-hero__code-halo[b-e337s2hj3c] {
    position: absolute;
    inset: -30% -20% -30% -20%;
    background:
        radial-gradient(ellipse 55% 50% at 50% 50%, rgba(var(--c-gold-rgb), 0.22) 0%, rgba(var(--c-gold-rgb), 0.10) 30%, rgba(var(--c-gold-rgb), 0.025) 60%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 50%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(28px);
}

.lobby-hero__code-value[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    color: var(--c-gold);
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0;
    font-size: clamp(2.6rem, 6vw, 5rem);
    font-variant-numeric: tabular-nums;
    text-shadow:
        0 6px 32px rgba(var(--c-gold-rgb), 0.32),
        0 2px 12px rgba(var(--c-black-rgb), 0.55);
    word-break: break-all;
}

.lobby-hero__code-url[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    color: rgba(var(--c-gold-soft-rgb), 0.65);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    letter-spacing: 0.04em;
}

.lobby-hero__code-url-domain[b-e337s2hj3c] {
    color: rgba(var(--c-gold-light-rgb), 0.85);
    font-weight: 500;
}

/* QR card — supporting glass card with echo halo */
.lobby-hero__qr[b-e337s2hj3c] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.lobby-hero__qr-halo[b-e337s2hj3c] {
    position: absolute;
    inset: -25% -25% -10% -25%;
    background: radial-gradient(ellipse 45% 45% at 50% 50%, rgba(var(--c-gold-rgb), 0.14) 0%, rgba(var(--c-gold-rgb), 0.06) 30%, rgba(var(--c-gold-rgb), 0.02) 60%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(28px);
}

.lobby-hero__qr-card[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    padding: clamp(14px, 1.8vh, 20px);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
        0 30px 60px -20px rgba(var(--c-black-rgb), 0.6),
        0 0 60px rgba(var(--c-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    line-height: 0;
}

.lobby-hero__qr-card[b-e337s2hj3c]  > * {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: clamp(180px, 16vw, 220px) !important;
    height: clamp(180px, 16vw, 220px) !important;
    line-height: 0;
}

.lobby-hero__qr-card[b-e337s2hj3c]  svg,
.lobby-hero__qr-card[b-e337s2hj3c]  img,
.lobby-hero__qr-card[b-e337s2hj3c]  canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain;
}

.lobby-hero__qr-caption[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* ---- Joined counter — live signal, animates per re-key ---- */
.lobby-counter[b-e337s2hj3c] {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    border-radius: 999px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.04) 0%, rgba(var(--c-white-rgb), 0.01) 100%);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.18);
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.lobby-counter__icon[b-e337s2hj3c] {
    color: rgba(var(--c-gold-light-rgb), 0.85);
    display: inline-flex;
}

.lobby-counter__icon .mud-icon-root[b-e337s2hj3c] {
    font-size: 1.4rem;
}

.lobby-counter__num[b-e337s2hj3c] {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    transform-origin: center;
    animation: lobbyCounterBump-b-e337s2hj3c 600ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform, filter;
}

@keyframes lobbyCounterBump-b-e337s2hj3c {
    0%   { transform: scale(0.78); filter: brightness(1.8) drop-shadow(0 0 16px rgba(var(--c-gold-rgb), 0.7)); }
    50%  { transform: scale(1.18); filter: brightness(1.35) drop-shadow(0 0 10px rgba(var(--c-gold-rgb), 0.45)); }
    100% { transform: scale(1);    filter: none; }
}

.lobby-counter__label[b-e337s2hj3c] {
    color: rgba(var(--c-gold-soft-rgb), 0.75);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---- Start button — solid gold CTA, no pulse. Always visible thanks
   to the warm static glow. ::deep is mandatory — MudButton renders its
   own <button> from inside the MudBlazor component, so without ::deep
   the Blazor-scoped attribute selector never matches. ---- */
.lobby-shell[b-e337s2hj3c]  .lobby-start.mud-button-root {
    background: linear-gradient(145deg, var(--c-gold) 0%, var(--c-gold-deep) 100%) !important;
    color: var(--c-bg-deep) !important;
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.15vw, 1.05rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 12px 32px !important;
    border-radius: 14px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.5) !important;
    box-shadow:
        0 12px 26px -10px rgba(var(--c-black-rgb), 0.55),
        0 0 24px rgba(var(--c-gold-rgb), 0.3),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.35) !important;
    transition: transform 180ms ease-out, filter 180ms ease-out, box-shadow 180ms ease-out;
}

.lobby-shell[b-e337s2hj3c]  .lobby-start.mud-button-root .mud-icon-root {
    color: var(--c-bg-deep) !important;
}

.lobby-shell[b-e337s2hj3c]  .lobby-start.mud-button-root:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    background: linear-gradient(145deg, var(--c-gold-light) 0%, var(--c-gold-deep) 100%) !important;
    box-shadow:
        0 14px 30px -10px rgba(var(--c-black-rgb), 0.6),
        0 0 32px rgba(var(--c-gold-rgb), 0.42),
        inset 0 1px 0 rgba(var(--c-white-rgb), 0.4) !important;
}

.lobby-shell[b-e337s2hj3c]  .lobby-start.mud-button-root:active {
    transform: translateY(0);
}

/* ---- Footer caption ---- */
.lobby-footer[b-e337s2hj3c] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 16px;
    color: rgba(var(--c-gold-soft-rgb), 0.45);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
}

/* ---- Fullscreen icon — floating top-right, glass chrome.
   The global .fullscreen-toggle-anchor in app.css pins all four edges,
   so we explicitly cancel bottom/left/width/height to stop the wrapper
   stretching across the screen and swallowing every click. ---- */
.lobby-fullscreen[b-e337s2hj3c] {
    position: fixed;
    top: clamp(16px, 2.5vh, 28px);
    right: clamp(16px, 2vw, 28px);
    bottom: auto;
    left: auto;
    width: auto;
    height: auto;
    z-index: 50;
    cursor: pointer;
}

.lobby-fullscreen[b-e337s2hj3c]  .mud-icon-button {
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%) !important;
    color: rgba(var(--c-gold-soft-rgb), 0.7) !important;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14) !important;
    border-radius: 12px;
    backdrop-filter: blur(10px) saturate(130%);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.05);
    transition: color 180ms ease-out, border-color 180ms ease-out, background 180ms ease-out;
}

.lobby-fullscreen[b-e337s2hj3c]  .mud-icon-button:hover {
    color: var(--c-gold-light) !important;
    border-color: rgba(var(--c-gold-soft-rgb), 0.28) !important;
    background: linear-gradient(145deg, rgba(var(--c-gold-light-rgb), 0.08) 0%, rgba(var(--c-gold-light-rgb), 0.02) 100%) !important;
}

/* ---- Responsive: when stacked, keep things tidy ---- */
@media (max-width: 720px) {
    .lobby-hero__code-value[b-e337s2hj3c] {
        font-size: clamp(2.4rem, 13vw, 4.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lobby-stage__ambient[b-e337s2hj3c],
    .lobby-eyebrow__pulse[b-e337s2hj3c]::before,
    .lobby-counter__num[b-e337s2hj3c],
    .lobby-shell[b-e337s2hj3c]  .lobby-start.mud-button-root { animation: none; transition: none; }
    .lobby-counter__num[b-e337s2hj3c] { transform: none; filter: none; }
}
/* /Components/Shared/TastingPrintSheet.razor.rz.scp.css */
.tasting-print-sheet[b-lewd7djzja] {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 24px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    background: white;
    position: relative;
    overflow: hidden;
}

/* Color scheme */
.print-color[b-lewd7djzja] {
    --primary-color: var(--c-bg-deep);
    --accent-color: var(--c-parchment);
    --accent-dark: var(--c-olive-gold);
    --text-color: var(--c-grey-800);
    --text-muted: var(--c-grey-600);
    --border-color: var(--c-parchment);
    --bg-accent: rgba(var(--c-parchment-rgb), 0.15);
    --bg-highlight: rgba(var(--c-parchment-rgb), 0.08);
    --shadow-color: rgba(var(--c-black-rgb), 0.1);
}

.print-bw[b-lewd7djzja] {
    --primary-color: var(--c-black);
    --accent-color: var(--c-grey-750);
    --accent-dark: var(--c-grey-800);
    --text-color: var(--c-black);
    --text-muted: var(--c-grey-700);
    --border-color: var(--c-grey-500);
    --bg-accent: var(--c-grey-100);
    --bg-highlight: var(--c-grey-75);
    --shadow-color: rgba(var(--c-black-rgb), 0.15);
}

/* Header */
.print-header[b-lewd7djzja] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--border-color);
    position: relative;
}

.print-header[b-lewd7djzja]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bg-highlight);
}

.print-logo[b-lewd7djzja] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    min-width: 150px;
}

.print-logo img[b-lewd7djzja] {
    height: 56px;
    width: auto;
    filter: drop-shadow(0 2px 4px var(--shadow-color));
}

.print-bw .logo-bw[b-lewd7djzja] {
    filter: grayscale(100%) drop-shadow(0 2px 4px var(--shadow-color));
}

.print-title[b-lewd7djzja] {
    flex: 1;
    text-align: center;
}

.print-title h1[b-lewd7djzja] {
    margin: 0 0 4px 0;
    font-size: 2.2em;
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: -0.5px;
}

.print-subtitle[b-lewd7djzja] {
    display: block;
    font-size: 0.9em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.print-header-spacer[b-lewd7djzja] {
    min-width: 150px;
    flex-shrink: 0;
}

/* Body */
.print-body[b-lewd7djzja] {
    flex: 1;
    display: flex;
    flex-direction: row;
    gap: 24px;
    min-height: 0;
}

/* Join Section */
.print-join-section[b-lewd7djzja] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    background: linear-gradient(145deg, var(--bg-accent), var(--bg-highlight));
    border-radius: 16px;
    border: 2px solid var(--border-color);
    flex: 0 0 auto;
    min-width: 200px;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.qr-container[b-lewd7djzja] {
    padding: 12px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px var(--shadow-color);
}

.qr-divider[b-lewd7djzja] {
    width: 100%;
    text-align: center;
    margin: 12px 0;
    color: var(--text-muted);
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.qr-divider[b-lewd7djzja]::before,
.qr-divider[b-lewd7djzja]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.join-info[b-lewd7djzja] {
    text-align: center;
    width: 100%;
}

.join-url[b-lewd7djzja], .join-code[b-lewd7djzja] {
    margin-bottom: 10px;
}

.join-url .label[b-lewd7djzja], .join-code .label[b-lewd7djzja] {
    display: block;
    font-size: 0.8em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.join-url .value[b-lewd7djzja] {
    font-size: 1em;
    font-weight: 600;
    color: var(--primary-color);
    word-break: break-all;
}

.join-code .value.code[b-lewd7djzja] {
    font-size: 2em;
    font-weight: 800;
    letter-spacing: 4px;
    color: var(--primary-color);
    font-family: 'Courier New', monospace;
    background: var(--bg-highlight);
    padding: 4px 12px;
    border-radius: 8px;
    display: inline-block;
}

/* Divider */
.print-divider[b-lewd7djzja] {
    width: 3px;
    background: linear-gradient(to bottom, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
    margin: 0 8px;
    border-radius: 2px;
}

/* Beverages Section */
.print-beverages-section[b-lewd7djzja] {
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-highlight);
    border-radius: 12px;
    min-width: 0;
    overflow: hidden;
}

.print-beverages-section h2[b-lewd7djzja] {
    margin: 0 0 12px 0;
    font-size: 1.4em;
    color: var(--primary-color);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}



.blind-notice[b-lewd7djzja] {
    font-size: 1.1em;
    padding: 20px;
    background: var(--bg-accent);
    border-radius: 12px;
    text-align: center;
    border: 2px dashed var(--border-color);
}

.blind-notice strong[b-lewd7djzja] {
    color: var(--primary-color);
}

.beverage-list[b-lewd7djzja] {
    margin: 0;
    padding-left: 0;
    line-height: 1.7;
    list-style: none;
    counter-reset: beverage-counter;
}

.beverage-list li[b-lewd7djzja] {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: white;
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
    display: flex;
    align-items: baseline;
    gap: 8px;
    counter-increment: beverage-counter;
    box-shadow: 0 1px 3px var(--shadow-color);
}

.beverage-list li[b-lewd7djzja]::before {
    content: counter(beverage-counter) ".";
    font-weight: 700;
    color: var(--accent-dark);
    min-width: 24px;
}

.beverage-name[b-lewd7djzja] {
    font-weight: 600;
    color: var(--primary-color);
}

.beverage-producer[b-lewd7djzja] {
    color: var(--text-muted);
    font-style: italic;
}

.no-beverages[b-lewd7djzja] {
    font-style: italic;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

/* Instructions Section */
.print-instructions-section[b-lewd7djzja] {
    flex: 0 0 auto;
    width: 220px;
    padding: 12px 16px;
    background: var(--bg-highlight);
    border-radius: 12px;
    color: var(--c-black);
}

.print-instructions-section h2[b-lewd7djzja] {
    margin: 0 0 12px 0;
    font-size: 1.2em;
    color: var(--c-black);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}



.tasting-mode[b-lewd7djzja] {
    margin-bottom: 16px;
    font-size: 0.95em;
    line-height: 1.5;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
    box-shadow: 0 1px 3px var(--shadow-color);
    color: var(--c-black);
}

.tasting-mode p[b-lewd7djzja] {
    margin: 0;
}

.tasting-mode strong[b-lewd7djzja] {
    color: var(--c-black);
    display: block;
    margin-bottom: 4px;
}

.voting-note[b-lewd7djzja] {
    background: linear-gradient(145deg, var(--bg-accent), white);
    padding: 12px;
    border-radius: 12px;
    font-size: 0.9em;
    border: 1px solid var(--border-color);
    text-align: center;
    color: var(--c-black);
}

.voting-note p[b-lewd7djzja] {
    margin: 0;
    line-height: 1.4;
}

/* Footer */
.print-footer[b-lewd7djzja] {
    margin-top: auto;
    padding-top: 12px;
    border-top: 2px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9em;
    color: var(--text-muted);
}

.footer-center[b-lewd7djzja] {
    flex: 1;
    text-align: center;
}

/* Print-specific styles */
@media print {
    .tasting-print-sheet[b-lewd7djzja] {
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-bw[b-lewd7djzja] {
        filter: grayscale(100%);
    }
}

/* Compact mode for multiple sheets per page
   Switches from 3-column horizontal layout to vertical stacking
   so content fits within grid cells without overflow. */
.print-compact[b-lewd7djzja] {
    padding: 6px 8px !important;
}

.print-compact .print-header[b-lewd7djzja] {
    margin-bottom: 4px;
    padding-bottom: 3px;
    gap: 6px;
    border-bottom-width: 2px;
}

.print-compact .print-logo[b-lewd7djzja] {
    min-width: unset;
}

.print-compact .print-logo img[b-lewd7djzja] {
    height: 20px !important;
}

.print-compact .print-title h1[b-lewd7djzja] {
    font-size: 1.1em;
}

.print-compact .print-subtitle[b-lewd7djzja] {
    font-size: 0.65em;
    letter-spacing: 1px;
}

.print-compact .print-header-spacer[b-lewd7djzja] {
    display: none;
}

/* Switch body from horizontal 3-column to vertical stack */
.print-compact .print-body[b-lewd7djzja] {
    flex-direction: column;
    gap: 4px;
}

/* Hide vertical dividers — not needed in column layout */
.print-compact .print-divider[b-lewd7djzja] {
    display: none;
}

/* Join section: side-by-side (info left, QR right) to save vertical space */
.print-compact .print-join-section[b-lewd7djzja] {
    flex-direction: row;
    align-items: center;
    min-width: unset !important;
    padding: 5px 8px;
    border-radius: 8px;
    gap: 8px;
}

.print-compact .join-info[b-lewd7djzja] {
    text-align: left;
    flex: 1;
}

.print-compact .join-url[b-lewd7djzja],
.print-compact .join-code[b-lewd7djzja] {
    margin-bottom: 2px;
}

.print-compact .join-url .label[b-lewd7djzja],
.print-compact .join-code .label[b-lewd7djzja] {
    font-size: 0.7em;
    margin-bottom: 0;
    display: inline;
}

.print-compact .join-url .value[b-lewd7djzja] {
    font-size: 0.85em;
}

.print-compact .join-code .value.code[b-lewd7djzja] {
    font-size: 1.1em;
    letter-spacing: 2px;
    padding: 1px 4px;
}

.print-compact .qr-divider[b-lewd7djzja] {
    display: none;
}

.print-compact .qr-container[b-lewd7djzja] {
    padding: 4px;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Beverages section: full width, compact padding */
.print-compact .print-beverages-section[b-lewd7djzja] {
    padding: 4px 8px;
    border-radius: 6px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.print-compact .print-beverages-section h2[b-lewd7djzja] {
    font-size: 0.85em;
    margin-bottom: 3px;
    padding-bottom: 2px;
}

.print-compact .beverage-list[b-lewd7djzja] {
    line-height: 1.4;
}

.print-compact .beverage-list li[b-lewd7djzja] {
    margin-bottom: 1px;
    padding: 2px 5px;
    font-size: 0.78em;
    border-left-width: 3px;
    border-radius: 4px;
}

.print-compact .blind-notice[b-lewd7djzja] {
    font-size: 0.8em;
    padding: 6px;
}

/* Instructions section: horizontal row, no heading */
.print-compact .print-instructions-section[b-lewd7djzja] {
    width: 100% !important;
    padding: 3px 6px;
    border-radius: 6px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: stretch;
    overflow: hidden;
    flex-shrink: 0;
}

.print-compact .print-instructions-section h2[b-lewd7djzja] {
    display: none;
}

.print-compact .tasting-mode[b-lewd7djzja] {
    font-size: 0.65em;
    line-height: 1.2;
    padding: 3px 5px;
    margin-bottom: 0;
    flex: 1;
    overflow: hidden;
}

.print-compact .tasting-mode strong[b-lewd7djzja] {
    display: inline;
}

.print-compact .voting-note[b-lewd7djzja] {
    padding: 3px 5px;
    font-size: 0.6em;
    flex: 1;
    overflow: hidden;
    line-height: 1.2;
}

.print-compact .print-footer[b-lewd7djzja] {
    padding-top: 3px;
    font-size: 0.6em;
}
/* /Components/Shared/TastingQuestionsPanel.razor.rz.scp.css */
.questions-panel[b-9ywu9zctfd] {
    background-color: rgba(var(--c-parchment-rgb), 0.1);
    border: 1px solid rgba(var(--c-parchment-rgb), 0.3);
    border-radius: 16px;
    padding: 16px;
    margin-top: 24px;
}

.question-card[b-9ywu9zctfd] {
    background-color: rgba(var(--c-white-rgb), 0.05);
    border: 1px solid rgba(var(--c-parchment-rgb), 0.2);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.question-card:hover[b-9ywu9zctfd] {
    border-color: rgba(var(--c-parchment-rgb), 0.4);
}

.question-card.answered[b-9ywu9zctfd] {
    background-color: rgba(var(--c-green-rgb), 0.1);
    border-color: rgba(var(--c-green-rgb), 0.3);
}

.question-card.own-question[b-9ywu9zctfd] {
    border-left: 3px solid var(--c-gold);
}

.upvote-button[b-9ywu9zctfd] {
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.upvote-button.upvoted[b-9ywu9zctfd] {
    color: var(--c-gold);
}

.beverage-tag[b-9ywu9zctfd] {
    background-color: rgba(var(--c-parchment-rgb), 0.2);
    color: var(--c-parchment);
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.answer-text[b-9ywu9zctfd] {
    background-color: rgba(var(--c-green-rgb), 0.15);
    border-left: 3px solid var(--c-green);
    padding: 12px;
    border-radius: 0 8px 8px 0;
    margin-top: 12px;
}
/* /Components/Shared/TastingSharingSection.razor.rz.scp.css */
.sharing-section[b-e26keq5mt6] {
    position: relative;
    display: grid;
    gap: 16px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.13);
    border-radius: 18px;
    background:
        linear-gradient(135deg, rgba(var(--c-gold-rgb), 0.055), rgba(var(--c-white-rgb), 0.018)),
        rgba(var(--c-bg-abyss-rgb), 0.36);
    box-shadow: inset 0 1px 0 rgba(var(--c-white-rgb), 0.06);
    padding: clamp(14px, 2vw, 18px);
}

.sharing-section__summary[b-e26keq5mt6] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.sharing-section__icon[b-e26keq5mt6] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(var(--c-gold-rgb), 0.18);
    border-radius: 12px;
    background: rgba(var(--c-gold-rgb), 0.07);
    color: rgba(var(--c-gold-light-rgb), 0.88);
}

.sharing-section__copy[b-e26keq5mt6] {
    min-width: 0;
}

.sharing-section__eyebrow[b-e26keq5mt6] {
    display: block;
    color: rgba(var(--c-gold-soft-rgb), 0.54);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sharing-section__join-row[b-e26keq5mt6] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin-top: 4px;
}

.sharing-section__join-row strong[b-e26keq5mt6] {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.26rem, 2.2vw, 1.72rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1;
}

.sharing-section__join-row span[b-e26keq5mt6] {
    color: rgba(var(--c-stone-rgb), 0.7);
    font-size: 0.86rem;
    overflow-wrap: anywhere;
}

.sharing-section__actions[b-e26keq5mt6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.sharing-section__actions[b-e26keq5mt6]  .mud-button-root,
.sharing-section__actions[b-e26keq5mt6]  .mud-icon-button {
    border-radius: 12px;
    text-transform: none;
}

.sharing-section__tools[b-e26keq5mt6] {
    margin-top: 2px;
    padding-top: 16px;
    border-top: 1px solid rgba(var(--c-gold-soft-rgb), 0.12);
}

.sharing-section[b-e26keq5mt6]  .mud-typography,
.sharing-section[b-e26keq5mt6]  .mud-input-slot,
.sharing-section[b-e26keq5mt6]  .mud-input-label,
.sharing-section[b-e26keq5mt6]  .mud-select-input {
    color: rgba(var(--c-gold-soft-rgb), 0.84) !important;
}

.sharing-section[b-e26keq5mt6]  .mud-input-outlined-border {
    border-color: rgba(var(--c-gold-soft-rgb), 0.2) !important;
}

/* Fix MudCollapse overflow issue - ensure content is hidden when collapsed */
[b-e26keq5mt6] .mud-collapse-container {
    overflow: hidden;
}

/* Print Preview */
.print-preview-container[b-e26keq5mt6] {
    position: relative;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    background: var(--mud-palette-background-grey);
    overflow: hidden;
}

.print-preview-label[b-e26keq5mt6] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.print-preview-frame[b-e26keq5mt6] {
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.preview-placeholder[b-e26keq5mt6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 720px) {
    .sharing-section__summary[b-e26keq5mt6] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sharing-section__actions[b-e26keq5mt6] {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
/* /Components/Shared/TastingSlideStage.razor.rz.scp.css */
.tasting-slide-stage[b-6int42cn5y] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    color: var(--c-gold-soft);
    container-type: size;
    overflow: hidden;
}

.tasting-slide-stage--empty[b-6int42cn5y] {
    display: grid;
    place-items: center;
}

.tasting-slide-stage__empty[b-6int42cn5y] {
    display: grid;
    place-items: center;
    gap: 22px;
    padding: 96px;
    text-align: center;
}

.tasting-slide-stage__empty[b-6int42cn5y]  .mud-icon-root {
    color: rgba(var(--c-gold-light-rgb), 0.82);
    font-size: 104px;
}

.tasting-slide-stage__empty h2[b-6int42cn5y] {
    color: rgba(var(--c-gold-light-rgb), 0.9);
    font-family: 'Montserrat', sans-serif;
    font-size: 76px;
    font-weight: 900;
    letter-spacing: 0;
    margin: 0;
}

.tasting-slide-stage__empty p[b-6int42cn5y] {
    color: rgba(var(--c-stone-rgb), 0.78);
    font-size: 28px;
    margin: 0;
}

.tasting-slide-stage__beverage-grid[b-6int42cn5y] {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(300px, 0.9fr);
    align-items: stretch;
    gap: clamp(16px, 2vw, 32px);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 0;
}

.tasting-slide-stage__beverage-copy[b-6int42cn5y] {
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.tasting-slide-stage__beverage-copy-inner[b-6int42cn5y] {
    min-width: 0;
    max-width: min(100%, 1060px);
    text-align: left;
}

.tasting-slide-stage__title[b-6int42cn5y] {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 6.5vw, 5.4rem);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 0.98;
    margin: clamp(16px, 4vh, 40px) 0 20px;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-shadow: 0 0 56px rgba(var(--c-gold-rgb), 0.28), 0 8px 24px rgba(var(--c-black-rgb), 0.5);
}

.tasting-slide-stage__title--blind[b-6int42cn5y] {
    font-size: clamp(3.6rem, 7.5vw, 6rem);
    margin: 48px 0 32px;
    text-shadow: none;
}

.tasting-slide-stage__accent[b-6int42cn5y] {
    width: 64px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--c-gold), rgba(var(--c-gold-rgb), 0.3));
    margin-bottom: 20px;
}

.tasting-slide-stage__accent--echo[b-6int42cn5y] {
    width: 32px;
    height: 2px;
    background: rgba(var(--c-gold-rgb), 0.35);
    margin-bottom: 18px;
}

.tasting-slide-stage__producer[b-6int42cn5y] {
    color: rgba(var(--c-gold-light-rgb), 0.85);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: clamp(1.9rem, 3.4vw, 2.4rem);
    font-weight: 500;
    line-height: 1.4;
    margin: 0 0 14px;
}

.tasting-slide-stage__eyebrow[b-6int42cn5y] {
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.tasting-slide-stage__description[b-6int42cn5y] {
    max-width: 60ch;
    color: rgba(var(--c-stone-rgb), 0.85);
    font-size: clamp(1.3rem, 1.55vw, 1.7rem);
    font-weight: 300;
    line-height: 1.55;
    margin: 0 0 24px;
}

.tasting-slide-stage__description[b-6int42cn5y]::first-letter {
    color: rgba(var(--c-gold-light-rgb), 0.85);
    font-weight: 600;
    font-size: 1.15em;
    padding-right: 0.04em;
}

.tasting-slide-stage__beverage-panel[b-6int42cn5y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding-top: clamp(48px, 8vh, 110px);
}

.tasting-slide-stage__bottle[b-6int42cn5y] {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.tasting-slide-stage__bottle-halo[b-6int42cn5y] {
    position: absolute;
    inset: -55% -60% -50% -60%;
    background:
        radial-gradient(ellipse 50% 45% at 50% 45%, rgba(var(--c-gold-rgb), 0.22) 0%, rgba(var(--c-gold-rgb), 0.14) 22%, rgba(var(--c-gold-rgb), 0.06) 45%, rgba(var(--c-gold-rgb), 0.015) 70%, transparent 100%),
        radial-gradient(ellipse 65% 60% at 50% 40%, rgba(var(--c-parchment-rgb), 0.10) 0%, rgba(var(--c-parchment-rgb), 0.03) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
    filter: blur(28px);
}

.tasting-slide-stage__bottle-pedestal[b-6int42cn5y] {
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -4%;
    height: 32px;
    background: radial-gradient(ellipse at center, rgba(var(--c-black-rgb), 0.6) 0%, rgba(var(--c-black-rgb), 0.25) 45%, transparent 75%);
    pointer-events: none;
    z-index: 1;
    filter: blur(6px);
}

.tasting-slide-stage__bottle img[b-6int42cn5y] {
    position: relative;
    z-index: 2;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: clamp(220px, 36vh, 400px);
    border-radius: 16px;
    object-fit: contain;
    filter: drop-shadow(0 24px 40px rgba(var(--c-black-rgb), 0.65)) drop-shadow(0 4px 12px rgba(var(--c-gold-rgb), 0.08));
}

.tasting-slide-stage__mobile-image[b-6int42cn5y] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
}

.tasting-slide-stage__mobile-image img[b-6int42cn5y] {
    max-width: 100%;
    max-height: 300px;
    border-radius: 16px;
    object-fit: contain;
}

@media (min-width: 960px) {
    .tasting-slide-stage__mobile-image[b-6int42cn5y] {
        display: none;
    }
}

.tasting-slide-stage__beverage-extra[b-6int42cn5y] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding-top: clamp(20px, 4vh, 48px);
}

.tasting-slide-stage__quiz[b-6int42cn5y] {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 3.5vh, 44px);
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(8px, 1.6vw, 24px) clamp(8px, 1.6vw, 24px) 0;
}

.tasting-slide-stage__quiz-hero[b-6int42cn5y] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
    width: 100%;
}

.tasting-slide-stage__quiz-hero-text[b-6int42cn5y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    container-type: inline-size;
}

.tasting-slide-stage__quiz-title[b-6int42cn5y] {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    letter-spacing: -0.035em;
    font-size: clamp(2.6rem, 11cqi, 6rem);
    line-height: 0.98;
    margin: clamp(16px, 4vh, 40px) 0 20px;
    text-shadow: 0 0 56px rgba(var(--c-gold-rgb), 0.28), 0 8px 24px rgba(var(--c-black-rgb), 0.5);
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.tasting-slide-stage__quiz-title--long[b-6int42cn5y] {
    font-size: clamp(2.2rem, 8.5cqi, 4.4rem);
    line-height: 1.02;
}

.tasting-slide-stage__quiz-title--xlong[b-6int42cn5y] {
    font-size: clamp(1.8rem, 6.5cqi, 3.4rem);
    line-height: 1.08;
}

.tasting-slide-stage__quiz-hero-meta[b-6int42cn5y] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: clamp(20px, 4vh, 48px);
    min-width: 0;
}

.tasting-slide-stage__quiz-progress[b-6int42cn5y] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: clamp(8px, 2vh, 24px);
}

.tasting-slide-stage__chips[b-6int42cn5y] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 18px);
    width: 100%;
    min-height: 0;
}

.tasting-slide-stage__chips[data-count="2"][b-6int42cn5y],
.tasting-slide-stage__chips[data-count="4"][b-6int42cn5y] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tasting-slide-stage__chip[b-6int42cn5y] {
    position: relative;
    padding: clamp(16px, 1.8vh, 22px) clamp(20px, 2.2vw, 28px);
    min-height: clamp(86px, 10vh, 124px);
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.18);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.05) 0%, rgba(var(--c-white-rgb), 0.015) 100%);
    box-shadow: 0 22px 48px -20px rgba(var(--c-black-rgb), 0.6), inset 0 1px 0 rgba(var(--c-white-rgb), 0.06);
    overflow: hidden;
    container-type: inline-size;
}

.tasting-slide-stage__chip-fill[b-6int42cn5y] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, rgba(var(--c-gold-rgb), 0.22) 0%, rgba(var(--c-gold-rgb), 0.06) 100%);
    border-right: 1px solid rgba(var(--c-gold-rgb), 0.35);
    pointer-events: none;
    z-index: 0;
    transition: width 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tasting-slide-stage__chip--revealed .tasting-slide-stage__chip-fill[b-6int42cn5y] {
    width: var(--chip-pct, 0%);
}

.tasting-slide-stage__chip--correct[b-6int42cn5y] {
    border-color: rgba(var(--c-lime-rgb), 0.55);
    box-shadow: 0 22px 48px -20px rgba(var(--c-black-rgb), 0.6), 0 0 32px rgba(var(--c-lime-rgb), 0.18), inset 0 1px 0 rgba(var(--c-white-rgb), 0.08);
}

.tasting-slide-stage__chip--correct .tasting-slide-stage__chip-fill[b-6int42cn5y] {
    background: linear-gradient(90deg, rgba(var(--c-lime-rgb), 0.22) 0%, rgba(var(--c-lime-rgb), 0.06) 100%);
    border-right-color: rgba(var(--c-lime-rgb), 0.45);
}

.tasting-slide-stage__chip-content[b-6int42cn5y] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: clamp(56px, 5vw, 88px) 1fr auto;
    column-gap: clamp(18px, 2vw, 28px);
    align-items: center;
    height: 100%;
    width: 100%;
}

.tasting-slide-stage__chip-letter[b-6int42cn5y] {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1;
    text-shadow: 0 0 24px rgba(var(--c-gold-rgb), 0.35);
    font-variant-numeric: tabular-nums;
}

.tasting-slide-stage__chip--correct .tasting-slide-stage__chip-letter[b-6int42cn5y],
.tasting-slide-stage__chip--correct .tasting-slide-stage__chip-pct[b-6int42cn5y] {
    color: var(--c-lime);
    text-shadow: 0 0 24px rgba(var(--c-lime-rgb), 0.35);
}

.tasting-slide-stage__chip-text[b-6int42cn5y] {
    color: rgba(var(--c-gold-soft-rgb), 0.95);
    font-family: 'Inter', 'Montserrat', sans-serif;
    font-size: clamp(1.3rem, 5.6cqi, 2rem);
    font-weight: 500;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.tasting-slide-stage__chips--long .tasting-slide-stage__chip-text[b-6int42cn5y] {
    font-size: clamp(1.15rem, 4.6cqi, 1.55rem);
}

.tasting-slide-stage__chips--xlong .tasting-slide-stage__chip-text[b-6int42cn5y] {
    font-size: clamp(1rem, 3.6cqi, 1.25rem);
    line-height: 1.32;
}

.tasting-slide-stage__chips--long .tasting-slide-stage__chip-letter[b-6int42cn5y] {
    font-size: clamp(2.2rem, 3.6vw, 3.2rem);
}

.tasting-slide-stage__chips--xlong .tasting-slide-stage__chip-letter[b-6int42cn5y] {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

.tasting-slide-stage__chip-stat[b-6int42cn5y] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: clamp(12px, 1.5vw, 20px);
    text-align: right;
}

.tasting-slide-stage__chip-pct[b-6int42cn5y] {
    color: var(--c-gold);
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 2.8vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.tasting-slide-stage__chip-votes[b-6int42cn5y] {
    color: rgba(var(--c-gold-soft-rgb), 0.55);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.tasting-slide-stage__discussion-card[b-6int42cn5y] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 18px;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.14);
    border-radius: 28px;
    background: linear-gradient(145deg, rgba(var(--c-white-rgb), 0.044), rgba(var(--c-white-rgb), 0.014));
    box-shadow: 0 18px 42px -30px rgba(var(--c-black-rgb), 0.72), inset 0 1px 0 rgba(var(--c-white-rgb), 0.06);
    color: rgba(var(--c-gold-soft-rgb), 0.84);
    font-size: clamp(24px, 2.5cqw, 34px);
    font-weight: 800;
    padding: 28px 32px;
}

.tasting-slide-stage__discussion-card[b-6int42cn5y]  .mud-icon-root {
    color: var(--c-gold);
}

@container (max-width: 900px) {
    .tasting-slide-stage__beverage-grid[b-6int42cn5y],
    .tasting-slide-stage__quiz-hero[b-6int42cn5y] {
        grid-template-columns: 1fr;
    }

    .tasting-slide-stage__beverage-panel[b-6int42cn5y] {
        display: none;
    }

    .tasting-slide-stage__chips[b-6int42cn5y],
    .tasting-slide-stage__chips[data-count="2"][b-6int42cn5y],
    .tasting-slide-stage__chips[data-count="4"][b-6int42cn5y] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tasting-slide-stage__chip-fill[b-6int42cn5y] {
        transition: none;
    }
}
/* /Components/TastingEditor/TastingSlidePreview.razor.rz.scp.css */
.slide-preview-viewport[b-k33vb0cit3] {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    container-type: inline-size;
    overflow: hidden;
    border: 1px solid rgba(var(--c-gold-soft-rgb), 0.13);
    border-radius: 14px;
    background: var(--c-bg-deep);
    box-shadow: 0 24px 64px -38px rgba(var(--c-black-rgb), 0.78), inset 0 1px 0 rgba(var(--c-white-rgb), 0.065);
}

.slide-preview-canvas[b-k33vb0cit3] {
    --slide-preview-scale: 1;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: var(--c-bg-abyss);
    color: var(--c-gold-soft);
    transform: scale(var(--slide-preview-scale));
    transform-origin: top left;
}

@supports (transform: scale(calc(100cqw / 1920px))) {
    .slide-preview-canvas[b-k33vb0cit3] {
        --slide-preview-scale: calc(100cqw / 1920px);
    }
}