/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-r5gbe049r3] {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

header.top-bar[b-r5gbe049r3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--dx-border-color, #dee2e6);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
    min-height: 46px;
}

main[b-r5gbe049r3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.app-brand[b-r5gbe049r3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
    flex-shrink: 0;
}

.app-brand:hover[b-r5gbe049r3] { color: inherit; opacity: 0.85; }

.app-logo[b-r5gbe049r3] {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 6px;
}

/* Brand title rendered as a read-only DxTextBox; keep it compact and sized to its content. */
.app-title[b-r5gbe049r3] {
    width: 170px;
    white-space: nowrap;
}

.top-bar-actions[b-r5gbe049r3] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    flex-shrink: 0;
}

.content[b-r5gbe049r3] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem 0.5rem;
}

@media (max-width: 576px) {
    header.top-bar[b-r5gbe049r3] {
        gap: 0.375rem;
        padding: 0 0.5rem;
    }

    /* Hide username on very small screens to save header space */
    .top-bar-actions .user-name[b-r5gbe049r3] {
        display: none;
    }
}

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

#blazor-error-ui .dismiss[b-r5gbe049r3] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* The host wrapper only exists so scoped-CSS ::deep rules have a scope-attributed
   ancestor to attach to (DxMenu is a component, so no scope attribute lands on it).
   display: contents keeps it out of the box tree, preserving the header flex layout. */
.nav-menu-host[b-r8e8gnhtmr] {
    display: contents;
}

[b-r8e8gnhtmr] .nav-menu {
    flex: 1;
    margin: 0;
}

/* Suppress DxMenu's own bottom border – header already provides a separator */
[b-r8e8gnhtmr] .nav-menu .dxbl-menu,
[b-r8e8gnhtmr] .nav-menu .dxbl-menu-horizontal {
    border-bottom: none !important;
    box-shadow: none !important;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-7ix0ndj12z],
.components-reconnect-repeated-attempt-visible[b-7ix0ndj12z],
.components-reconnect-failed-visible[b-7ix0ndj12z],
.components-pause-visible[b-7ix0ndj12z],
.components-resume-failed-visible[b-7ix0ndj12z],
.components-rejoining-animation[b-7ix0ndj12z] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Benchmark.razor.rz.scp.css */
.benchmark-page[b-3yyv3x6tli] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.benchmark-header[b-3yyv3x6tli] {
    flex-shrink: 0;
    margin-bottom: 0.5rem;
}

/* Responsive filter bar: each field grows to fill the row and wraps to the next line
   when space runs out, so fields are never clipped and stay evenly aligned.
   Mirrors the layout used by DashboardInputSelector. */
.filter-bar[b-3yyv3x6tli] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
}

.filter-field[b-3yyv3x6tli] {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 170px;
}

.filter-field--narrow[b-3yyv3x6tli] {
    flex: 1 1 120px;
    min-width: 110px;
    max-width: 160px;
}

.filter-field--wide[b-3yyv3x6tli] {
    flex: 1 1 240px;
}

.filter-label[b-3yyv3x6tli] {
    margin-bottom: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--dx-text-color-secondary, #6c757d);
}

/* DevExpress editors fill their field block. */
.filter-field[b-3yyv3x6tli]  .dxbl-edit {
    width: 100%;
}

/* ── Collapsible filter bar (iPad width and below) ───────────────────────
   The toolbar (toggle + selection summary) is hidden on large screens where the
   full filter bar always fits. From iPad width down it appears and the filter bar
   can collapse to save vertical space; the summary keeps the selection visible. */
.filter-toolbar[b-3yyv3x6tli] {
    display: none;
}

.filter-summary[b-3yyv3x6tli] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    align-items: center;
    font-size: 0.8rem;
}

.filter-summary .label[b-3yyv3x6tli] {
    color: var(--dx-text-color-secondary, #6c757d);
    font-weight: 600;
    margin-right: 0.25rem;
}

@media (max-width: 1024px) {
    .filter-toolbar[b-3yyv3x6tli] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.9rem;
        margin-bottom: 0.5rem;
    }

    .filter-bar--collapsed[b-3yyv3x6tli] {
        display: none;
    }
}

.benchmark-treelist-container[b-3yyv3x6tli] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

[b-3yyv3x6tli] .benchmark-treelist {
    height: 100%;
}

[b-3yyv3x6tli] td.deviation-positive {
    color: var(--dxds-color-content-success-default-rest);
    font-weight: 600;
}

[b-3yyv3x6tli] td.deviation-negative {
    color: var(--dxds-color-content-danger-default-rest);
    font-weight: 600;
}

[b-3yyv3x6tli] .trend-positive {
    color: var(--dxds-color-content-success-default-rest);
}

[b-3yyv3x6tli] .trend-negative {
    color: var(--dxds-color-content-danger-default-rest);
}

[b-3yyv3x6tli] .trend-icon {
    margin-right: 0.2em;
    font-size: 0.75em;
    vertical-align: middle;
}
/* /Components/Pages/Dashboard/DashboardInputSelectorForReports.razor.rz.scp.css */
/* Responsive filter bar: each field grows to fill the row and wraps to the next line
   when space runs out, so fields are never clipped and stay evenly aligned. */
.filter-bar[b-r90inyb1qc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
}

.filter-field[b-r90inyb1qc] {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 170px;
}

.filter-field--narrow[b-r90inyb1qc] {
    flex: 1 1 120px;
    min-width: 110px;
    max-width: 160px;
}

.filter-field--wide[b-r90inyb1qc] {
    flex: 2 1 300px;
}

.filter-label[b-r90inyb1qc] {
    margin-bottom: 0.25rem;
    font-size: var(--font-size-info);
    font-weight: 600;
    color: var(--dx-text-color-secondary, #6c757d);
}

/* DevExpress editors fill their field block. */
.filter-field[b-r90inyb1qc]  .dxbl-edit {
    width: 100%;
}

/* ── Collapsible filter bar (iPad width and below) ───────────────────────
   The toolbar (toggle + selection summary) is hidden on large screens where the
   full filter bar always fits. From iPad width down it appears and the filter bar
   can collapse to save vertical space; the summary keeps the selection visible. */
.filter-toolbar[b-r90inyb1qc] {
    display: none;
}

.filter-summary[b-r90inyb1qc] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    align-items: center;
    font-size: var(--font-size-info);
}

.filter-summary .label[b-r90inyb1qc] {
    color: var(--dx-text-color-secondary, #6c757d);
    font-weight: 600;
    margin-right: 0.25rem;
}

@media (max-width: 1024px) {
    .filter-toolbar[b-r90inyb1qc] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.9rem;
        margin-bottom: 0.5rem;
    }

    .filter-bar--collapsed[b-r90inyb1qc] {
        display: none;
    }
}
/* /Components/Pages/Dashboard/DashboardInputSelectorForStatisticData.razor.rz.scp.css */
/* Responsive filter bar: each field grows to fill the row and wraps to the next line
   when space runs out, so fields are never clipped and stay evenly aligned. */
.filter-bar[b-2ifcq83thh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: flex-end;
}

.filter-field[b-2ifcq83thh] {
    display: flex;
    flex-direction: column;
    flex: 1 1 200px;
    min-width: 170px;
}

.filter-field--narrow[b-2ifcq83thh] {
    flex: 1 1 120px;
    min-width: 110px;
    max-width: 160px;
}

.filter-field--wide[b-2ifcq83thh] {
    flex: 2 1 300px;
}

/* The expanded statistics account group tree needs the full row width; the collapsed selection display uses --wide instead. */
.filter-field--tree[b-2ifcq83thh] {
    flex: 1 1 100%;
}

.filter-label[b-2ifcq83thh] {
    margin-bottom: 0.25rem;
    font-size: var(--font-size-info);
    font-weight: 600;
    color: var(--dx-text-color-secondary, #6c757d);
}

/* DevExpress editors fill their field block. */
.filter-field[b-2ifcq83thh]  .dxbl-edit {
    width: 100%;
}

/* ── Collapsible filter bar (iPad width and below) ───────────────────────
   The toolbar (toggle + selection summary) is hidden on large screens where the
   full filter bar always fits. From iPad width down it appears and the filter bar
   can collapse to save vertical space; the summary keeps the selection visible. */
.filter-toolbar[b-2ifcq83thh] {
    display: none;
}

.filter-summary[b-2ifcq83thh] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
    align-items: center;
    font-size: var(--font-size-info);
}

.filter-summary .label[b-2ifcq83thh] {
    color: var(--dx-text-color-secondary, #6c757d);
    font-weight: 600;
    margin-right: 0.25rem;
}

@media (max-width: 1024px) {
    .filter-toolbar[b-2ifcq83thh] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.9rem;
        margin-bottom: 0.5rem;
    }

    .filter-bar--collapsed[b-2ifcq83thh] {
        display: none;
    }
}

/* Collapsed statistics account group: read-only name grows, "Ändern" button stays right on the same line. */
.account-group-collapsed[b-2ifcq83thh] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}

.account-group-collapsed[b-2ifcq83thh]  .dxbl-edit {
    flex: 1 1 auto;
    min-width: 0;
}

.account-group-collapsed[b-2ifcq83thh]  .dxbl-btn {
    flex: 0 0 auto;
}
/* /Components/Pages/Dashboard/RankingChart.razor.rz.scp.css */
/* Horizontal scroll when the table has no room (keeps cells from wrapping). */
.ranking-table-scroll[b-12pl3vwswe] {
    overflow-x: auto;
}

/* Never wrap cell or header content; the table scrolls horizontally instead. */
.ranking-table-scroll[b-12pl3vwswe]  td,
.ranking-table-scroll[b-12pl3vwswe]  th {
    white-space: nowrap;
}
/* /Components/Pages/DashboardPage.razor.rz.scp.css */
/* The app layout (.content) adds 0.5rem/1rem padding around every page. The drawer should
   reach the edges of the content area, so bleed out into that padding with matching negative
   margins. Inner spacing is restored by .dashboard-target's own padding. */
.dashboard-root[b-sl7glohoap] {
    height: calc(100% + 1rem);
    margin: -0.5rem -1rem;
}

/* Make the drawer fill the page content area so the side panel spans full height. */
.dashboard-root[b-sl7glohoap]  .dashboard-drawer {
    height: 100%;
}

/* The chart/table area scrolls internally; the drawer panel stays put. */
.dashboard-target[b-sl7glohoap] {
    height: 100%;
    overflow-y: auto;
    padding: 1rem;
}

/* Toolbar: toggle button and title side by side (Bootstrap utilities are not loaded). */
.dashboard-toolbar[b-sl7glohoap] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.dashboard-toolbar-title[b-sl7glohoap] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.dashboard-toolbar-title .bi-trophy-fill[b-sl7glohoap] {
    color: var(--primary);
}

.dashboard-toolbar-title .bi-bar-chart-fill[b-sl7glohoap] {
    color: var(--primary);
}

/* Align the first drawer menu item with the content toolbar, which starts 1rem
   down from .dashboard-target's own padding. */
.dashboard-root[b-sl7glohoap]  .dashboard-menu {
    padding-top: 5px;
}

/* Highlight the active chart in the navigation panel — matches NavMenu's active item
   (brand petrol). Vertical menu, so the accent bar sits on the left edge instead of the bottom.
   DevExpress theme rules out-specify single-class selectors, so the active state needs !important. */
.dashboard-root[b-sl7glohoap]  .dashboard-menu-item-active {
    background-color: var(--primary-subtle) !important;
    box-shadow: inset 2px 0 0 0 var(--primary);
}

/* The clickable element is a <button class="dxbl-btn"> that sets its own text color,
   so override the button, the text span and the icon span explicitly. */
.dashboard-root[b-sl7glohoap]  .dashboard-menu-item-active .dxbl-btn,
.dashboard-root[b-sl7glohoap]  .dashboard-menu-item-active .dxbl-menu-item-text,
.dashboard-root[b-sl7glohoap]  .dashboard-menu-item-active .dxbl-image {
    color: var(--primary) !important;
    font-weight: 500 !important;
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* Landing page — scrolls itself, full width; text sections cap themselves */
.home-page[b-yjffbwaxwo] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    width: 100%;
    padding: 0 0.25rem;
    gap: clamp(1.25rem, 3vh, 2.75rem); /* more air between text parts on larger screens */
}

/* ── Hero (Branchenvergleich) ─────────────────────── */
.hero[b-yjffbwaxwo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 6vw, 5rem);
    width: 100%;
    max-width: 1200px;
    margin: auto auto 0; /* top auto + features' margin-top auto → hero+topics center vertically */
    padding: 0.75rem 0 0.5rem;
    animation: fade-in-b-yjffbwaxwo 0.5s ease-out both;
}

.hero-text[b-yjffbwaxwo] { flex: 0 1 520px; }

.hero-text h1[b-yjffbwaxwo] {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

.hero-text p[b-yjffbwaxwo] {
    font-size: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
    line-height: 1.6;
    opacity: 0.75;
    margin: 0 0 1rem;
    max-width: 520px;
}

.hero-graphic[b-yjffbwaxwo] { flex: 0 0 auto; }

/* ── Topic cards (Marktanalyse · Verwaltung) ──────── */
.topics[b-yjffbwaxwo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.topic[b-yjffbwaxwo] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--app-border-radius);
    padding: 1.25rem 1.5rem;
    opacity: 0;
    animation: slide-up-b-yjffbwaxwo 0.5s ease-out var(--d, 0s) both;
}

.topic-text h2[b-yjffbwaxwo] {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.4rem;
}

.topic-text p[b-yjffbwaxwo] {
    font-size: 0.875rem;
    line-height: 1.6;
    opacity: 0.75;
    margin: 0;
    max-width: 60ch;
}

.cta[b-yjffbwaxwo] {
    display: inline-block;
    background: var(--primary);
    color: var(--on-primary);
    padding: 0.5rem 1.5rem;
    border-radius: var(--app-border-radius);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.2s, transform 0.15s;
}

.cta:hover[b-yjffbwaxwo] { background: var(--primary-hover); transform: translateY(-1px); color: var(--on-primary); }

/* Topic media – illustrative icon badge in each card */
.topic-media[b-yjffbwaxwo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: var(--app-border-radius);
    background: var(--primary-subtle);
}

.topic-media i[b-yjffbwaxwo] {
    font-size: 1.75rem;
    color: var(--primary);
}

.bars[b-yjffbwaxwo] {
    display: flex;
    align-items: flex-end;
    gap: clamp(12px, 1.2vw, 18px);
    height: clamp(140px, 22vh, 220px);
}

.bars span[b-yjffbwaxwo] {
    width: clamp(28px, 2.6vw, 42px);
    height: var(--h);
    background: var(--primary);
    opacity: 0.3;
    border-radius: 3px 3px 0 0;
    transform: scaleY(0);
    transform-origin: bottom;
    animation: bar-grow-b-yjffbwaxwo 0.5s ease-out var(--d, 0s) forwards;
}

.bars span.accent[b-yjffbwaxwo] { opacity: 0.8; }

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

/* ── Features ─────────────────────────────────────── */
.features[b-yjffbwaxwo] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    flex: 0 0 auto;
    margin-top: auto; /* pin features/steps/contact to the bottom on tall screens */
}

.feat[b-yjffbwaxwo] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border: 1px solid var(--border);
    border-radius: var(--app-border-radius);
    padding: 0.6rem 0.75rem;
    opacity: 0;
    animation: slide-up-b-yjffbwaxwo 0.4s ease-out var(--d, 0s) both;
}

.feat i[b-yjffbwaxwo] {
    font-size: 1.25rem;
    color: var(--primary);
}

.feat strong[b-yjffbwaxwo] { font-size: 0.8125rem; }

.feat span[b-yjffbwaxwo] {
    font-size: 0.75rem;
    opacity: 0.7;
    line-height: 1.4;
}

/* ── Steps ────────────────────────────────────────── */
.steps[b-yjffbwaxwo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex: 0 0 auto;
    padding: 0.5rem 0;
    animation: fade-in-b-yjffbwaxwo 0.5s ease-out 0.3s both;
}

.step[b-yjffbwaxwo] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.num[b-yjffbwaxwo] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.arrow[b-yjffbwaxwo] { opacity: 0.3; font-size: 0.75rem; }

/* ── Contact banner ───────────────────────────────── */
.contact[b-yjffbwaxwo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.6rem 1rem;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--app-border-radius);
    font-size: 0.8125rem;
    animation: fade-in-b-yjffbwaxwo 0.5s ease-out 0.5s both;
}

.contact a[b-yjffbwaxwo] { color: var(--on-primary); text-decoration: underline; font-weight: 500; }
.contact .sep[b-yjffbwaxwo] { opacity: 0.4; }

/* ── Animations ───────────────────────────────────── */
@keyframes fade-in-b-yjffbwaxwo {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slide-up-b-yjffbwaxwo {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 900px) {
    .topics[b-yjffbwaxwo] { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .hero[b-yjffbwaxwo] { flex-direction: column; text-align: center; gap: 1.5rem; }
    .hero-text[b-yjffbwaxwo] { flex: 0 1 auto; }
    .bars[b-yjffbwaxwo] { height: 100px; }
    .features[b-yjffbwaxwo] { grid-template-columns: repeat(2, 1fr); }
    .steps[b-yjffbwaxwo] { flex-wrap: wrap; }
    .contact[b-yjffbwaxwo] { flex-wrap: wrap; text-align: center; }
}
/* /Components/Shared/InfoBox.razor.rz.scp.css */
.info-box[b-hw903h4whh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.1rem;
    font-size: var(--font-size-info);
    color: var(--text-muted);
}

.info-box-icon[b-hw903h4whh] {
    flex: none;
    display: inline-flex;
    align-items: center;
    /* Softer, slightly transparent petrol so the icon reads as a hint, not a hard dot. */
    color: var(--primary);
    opacity: 0.7;
}

.info-box-badge[b-hw903h4whh] {
    white-space: nowrap;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.8125rem;
    color: var(--primary);
    border: 1px solid var(--primary-border);
    background: var(--primary-subtle);
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
}
/* /Components/Shared/InputPrompt.razor.rz.scp.css */
.input-prompt[b-wfvzhr5ocs] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0.1rem;
    font-size: var(--font-size-info);
    /* Full text color (not muted) so it reads as an active "please choose" instruction. */
    color: var(--text);
}

.input-prompt-icon[b-wfvzhr5ocs] {
    flex: none;
    display: inline-flex;
    align-items: center;
    color: var(--primary);
}