/* /Account/Login.razor.rz.scp.css */
/* Shared auth-page/auth-panel/field/button styling now lives in wwwroot/app.css -
   Login.razor has nothing left that is genuinely its own. */
/* /Account/Profile.razor.rz.scp.css */
.account-facts[b-bvqzf11rkc] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .5rem 1.2rem;
    margin: 0 0 1.6rem;
}

.account-facts dt[b-bvqzf11rkc] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
}

.account-facts dd[b-bvqzf11rkc] {
    color: var(--text-primary);
    font-size: .9rem;
    margin: 0;
}

.account-facts dd a[b-bvqzf11rkc] {
    color: var(--accent);
}

.result-note[b-bvqzf11rkc] {
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.6;
    margin: 0 0 1.6rem;
}
/* /Account/Register.razor.rz.scp.css */
/* Shared auth-page/auth-panel/field/button styling now lives in wwwroot/app.css -
   Register.razor has nothing left that is genuinely its own. */
/* /Dashboard/AssetHeader.razor.rz.scp.css */
.asset-header[b-gs39djoem9] {
    align-items: flex-end;
    border-bottom: 1px solid var(--border-subtle);
    display: grid;
    gap: 1.8rem;
    grid-template-columns: minmax(17rem, 1.2fr) minmax(15rem, .9fr) auto;
    margin-bottom: 1.7rem;
    padding-bottom: 1.6rem;
}

.asset-identity[b-gs39djoem9],
.asset-title-row[b-gs39djoem9],
.asset-context[b-gs39djoem9],
.quote-meta[b-gs39djoem9] {
    align-items: center;
    display: flex;
}

.asset-identity[b-gs39djoem9] {
    gap: .9rem;
}

.asset-icon[b-gs39djoem9] {
    align-items: center;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    display: flex;
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 1.3rem;
    height: 2.7rem;
    justify-content: center;
    width: 2.7rem;
}

.asset-context[b-gs39djoem9] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 500;
    gap: .5rem;
    margin-bottom: .3rem;
}

.asset-title-row[b-gs39djoem9] {
    flex-wrap: wrap;
    gap: .75rem;
}

.asset-title-row h1[b-gs39djoem9] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.8rem;
    letter-spacing: -.015em;
    margin: 0;
}

.quote-block[b-gs39djoem9] {
    border-left: 1px solid var(--border-subtle);
    padding-left: 1.6rem;
}

.quote-price[b-gs39djoem9] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: -.015em;
    line-height: 1;
}

.quote-meta[b-gs39djoem9] {
    color: var(--text-quiet);
    flex-wrap: wrap;
    font-size: 0.74rem;
    font-weight: 400;
    gap: .45rem;
    margin-top: .4rem;
}

.change[b-gs39djoem9] {
    font-weight: 650;
}

.quote-separator[b-gs39djoem9] {
    color: var(--text-quiet);
}

.source-line[b-gs39djoem9] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    margin-top: .4rem;
}

.source-line strong[b-gs39djoem9] {
    color: var(--text-muted);
    font-weight: 500;
}

.timeframe-control[b-gs39djoem9] {
    justify-self: end;
}

.control-label[b-gs39djoem9] {
    color: var(--text-quiet);
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: .5rem;
}

.timeframe-options[b-gs39djoem9] {
    display: flex;
    gap: 1.1rem;
}

.timeframe-options button[b-gs39djoem9] {
    /* --text-faint (22-24% opacity) is meant for static captions, not clickable controls -
       at that opacity these buttons were nearly unreadable. --text-muted is a solid color
       with real contrast, reserved for text that still needs to be legible and actionable. */
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: .05em;
    padding: 0;
}

.timeframe-options button:hover:not(:disabled)[b-gs39djoem9] {
    color: var(--text-primary);
}

.timeframe-options button.active[b-gs39djoem9] {
    color: var(--text-primary);
    font-weight: 650;
}

.timeframe-options button:focus-visible[b-gs39djoem9] {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

.timeframe-options button:disabled[b-gs39djoem9] {
    cursor: wait;
    opacity: .55;
}

@media (max-width: 1200px) {
    .asset-header[b-gs39djoem9] {
        grid-template-columns: 1fr auto;
    }

    .timeframe-control[b-gs39djoem9] {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 650px) {
    .asset-header[b-gs39djoem9] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .quote-block[b-gs39djoem9] {
        border-left: 0;
        border-top: 1px solid var(--border-subtle);
        padding: .85rem 0 0;
    }

    .timeframe-options[b-gs39djoem9] {
        max-width: 100%;
        overflow-x: auto;
    }
}
/* /Dashboard/AssetSearch.razor.rz.scp.css */
.asset-search[b-37bf4wcsvy] {
    align-items: center;
    display: flex;
    gap: .5rem;
    position: relative;
}

.search-icon[b-37bf4wcsvy] {
    color: var(--text-quiet);
    flex: none;
    fill: none;
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.8;
    transition: color .2s var(--ease-out);
    width: 1rem;
}

.asset-search:focus-within .search-icon[b-37bf4wcsvy] {
    color: var(--accent);
}

.asset-search input[b-37bf4wcsvy] {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    flex: 1;
    font: inherit;
    font-size: .85rem;
    min-width: 0;
    padding: .5rem 0;
    transition: border-color .2s var(--ease-out);
}

.asset-search input:focus[b-37bf4wcsvy] {
    border-bottom-color: var(--accent);
    outline: none;
}

.search-clear[b-37bf4wcsvy] {
    background: none;
    border: 0;
    color: var(--text-quiet);
    cursor: pointer;
    flex: none;
    font-size: 1.1rem;
    line-height: 1;
    padding: .2rem;
    transition: color .18s var(--ease-out);
}

.search-clear:hover[b-37bf4wcsvy] {
    color: var(--text-primary);
}

.search-status[b-37bf4wcsvy] {
    color: var(--text-quiet);
    font-size: 0.78rem;
    list-style: none;
    padding: .8rem .9rem;
}

.search-results[b-37bf4wcsvy] {
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-card);
    list-style: none;
    margin: .4rem 0 0;
    max-height: 20rem;
    overflow-y: auto;
    padding: 0;
    position: absolute;
    right: 0;
    top: 100%;
    transform-origin: top right;
    width: max(100%, 22rem);
    z-index: 30;
}

@media (prefers-reduced-motion: no-preference) {
    .search-results[b-37bf4wcsvy] {
        animation: search-in-b-37bf4wcsvy .16s var(--ease-out) both;
    }

    @keyframes search-in-b-37bf4wcsvy {
        from {
            opacity: 0;
            transform: scale(.97) translateY(-4px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}

.search-results li[b-37bf4wcsvy] {
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    gap: .5rem;
    padding: 0;
}

.search-results li:last-child[b-37bf4wcsvy] {
    border-bottom: 0;
}

.search-results li.is-active[b-37bf4wcsvy],
.search-results li:hover[b-37bf4wcsvy] {
    background: var(--surface-hover);
}

.result-link[b-37bf4wcsvy] {
    align-items: center;
    color: inherit;
    display: flex;
    flex: 1;
    gap: .6rem;
    min-width: 0;
    padding: .55rem .7rem;
    text-decoration: none;
}

.result-logo[b-37bf4wcsvy],
.result-logo-fallback[b-37bf4wcsvy] {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 1.6rem;
    object-fit: cover;
    width: 1.6rem;
}

.result-logo-fallback[b-37bf4wcsvy] {
    align-items: center;
    background: var(--surface-inset, rgba(127, 127, 127, .18));
    color: var(--text-quiet);
    display: none;
    font-size: 0.74rem;
    font-weight: 700;
    justify-content: center;
    letter-spacing: .02em;
}

.result-symbol[b-37bf4wcsvy] {
    color: var(--text-primary);
    flex: none;
    font-size: .78rem;
    font-weight: 600;
    min-width: 3.2rem;
}

.result-name[b-37bf4wcsvy] {
    color: var(--text-muted);
    flex: 1;
    font-size: .74rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.result-class[b-37bf4wcsvy] {
    color: var(--text-quiet);
    flex: none;
    font-size: 0.7rem;
    letter-spacing: .06em;
}

.result-fav[b-37bf4wcsvy] {
    background: none;
    border: 0;
    color: var(--text-quiet);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: .95rem;
    margin-right: .6rem;
    padding: .3rem;
    transition: color .18s var(--ease-out), transform .18s var(--ease-out);
}

.result-fav:hover:not(:disabled)[b-37bf4wcsvy] {
    color: var(--accent);
    transform: scale(1.15);
}

.result-fav:disabled[b-37bf4wcsvy] {
    cursor: default;
    opacity: .5;
}
/* /Dashboard/AssetSwitcher.razor.rz.scp.css */
.asset-switcher[b-z5y74as98o] {
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1.6rem;
}

.control-label[b-z5y74as98o] {
    color: var(--text-quiet);
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
    margin-bottom: .7rem;
}

.asset-options[b-z5y74as98o] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.7rem;
    padding-bottom: 1rem;
}

.asset-options button[b-z5y74as98o] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--text-quiet);
    cursor: pointer;
    display: flex;
    flex-direction: row;
    gap: .45rem;
    padding: 0;
    text-align: left;
    transition: color .3s ease;
}

.asset-options button:hover:not(:disabled)[b-z5y74as98o] {
    color: var(--text-primary);
}

.asset-options button.active[b-z5y74as98o] {
    color: var(--text-primary);
}

.asset-options button:focus-visible[b-z5y74as98o] {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

.asset-options button:disabled[b-z5y74as98o] {
    cursor: wait;
    opacity: .55;
}

.option-symbol[b-z5y74as98o] {
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .03em;
}

.asset-options button.active .option-symbol[b-z5y74as98o] {
    font-weight: 650;
}

.option-class[b-z5y74as98o] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
}

/* Same logo language as the watchlist and the depot table, so a tab here is recognisable as
   the same asset. A missing icon hides itself - the ticker alone still identifies the tab. */
.option-logo[b-z5y74as98o] {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 1.15rem;
    object-fit: cover;
    width: 1.15rem;
}

.option-text[b-z5y74as98o] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}
/* /Dashboard/ConceptWidget.razor.rz.scp.css */
/* Dieselbe harte Kante wie ein echtes Panel - der Unterschied ist der hohle Status,
   nicht die Form. Eine Kachel darf nie wie befüllt aussehen, aber auch nicht wie eine
   andere Materialwelt (kein Karteikarten-Stempel mehr). */
.concept-widget[b-ite5t145lu] {
    background: var(--paper-raised);
    border: 1px solid var(--border-strong);
    padding: 1.1rem 1.15rem 1rem;
    position: relative;
}

.widget-head[b-ite5t145lu] {
    align-items: flex-start;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    margin-bottom: .75rem;
    padding-bottom: .6rem;
}

.widget-head h2[b-ite5t145lu] {
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}

.concept-body[b-ite5t145lu] {
    display: flex;
    flex-direction: column;
    gap: .42rem;
}

.concept-note[b-ite5t145lu] {
    border-top: 1px solid var(--border-subtle);
    color: var(--text-quiet);
    font-size: 0.76rem;
    line-height: 1.5;
    margin: .7rem 0 0;
    padding-top: .55rem;
}

[b-ite5t145lu] .concept-row {
    align-items: center;
    display: grid;
    gap: .5rem;
    /* minmax(3rem, auto), not a fixed 3rem: a longer key label (e.g. "UNREALISIERT")
       must grow the column instead of visually overlapping the slot bar next to it. */
    grid-template-columns: minmax(3rem, auto) minmax(0, 1fr) auto;
}

[b-ite5t145lu] .concept-slot {
    background: repeating-linear-gradient(
        90deg,
        var(--border-subtle) 0 6px,
        transparent 6px 10px);
    height: .38rem;
    opacity: .75;
}

[b-ite5t145lu] .concept-key {
    color: var(--text-quiet);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    white-space: nowrap;
    letter-spacing: .04em;
}

[b-ite5t145lu] .concept-value {
    color: var(--text-quiet);
    font-family: var(--font-mono);
    font-size: 0.74rem;
}
/* /Dashboard/MarketChart.razor.rz.scp.css */
.chart-card[b-t5f8gnk386] {
    border-top: 1px solid var(--border-subtle);
    min-height: 31rem;
    padding-top: 1.6rem;
    position: relative;
}

.chart-header[b-t5f8gnk386] {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
}

.chart-header h2[b-t5f8gnk386] {
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin: .3rem 0 0;
}

.chart-meta[b-t5f8gnk386] {
    align-items: center;
    color: var(--text-quiet);
    display: flex;
    font-size: 0.74rem;
    gap: .45rem;
}

.chart-meta a[b-t5f8gnk386] {
    color: var(--text-quiet);
    text-decoration: none;
}

.chart-meta a:hover[b-t5f8gnk386] {
    color: var(--text-primary);
}

.chart-host[b-t5f8gnk386] {
    height: 25.8rem;
    margin-top: 1rem;
    min-width: 0;
    overflow: hidden;
    width: 100%;
}

.chart-host.has-error[b-t5f8gnk386] {
    display: none;
}

.chart-loading[b-t5f8gnk386] {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font-size: 0.74rem;
    gap: .55rem;
    left: 50%;
    position: absolute;
    top: 52%;
    transform: translate(-50%, -50%);
}

.chart-loading span[b-t5f8gnk386] {
    animation: pulse-b-t5f8gnk386 1.15s ease-in-out infinite;
    background: var(--accent);
    border-radius: 50%;
    height: .45rem;
    width: .45rem;
}

.chart-empty[b-t5f8gnk386] {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    font-size: .78rem;
    font-weight: 400;
    height: 24rem;
    justify-content: center;
    text-align: center;
}

.chart-empty strong[b-t5f8gnk386] {
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: .4rem;
}

.chart-fallback[b-t5f8gnk386] {
    margin-top: 1.1rem;
}

.fallback-message[b-t5f8gnk386] {
    align-items: flex-start;
    border-left: 2px solid var(--warning);
    display: flex;
    gap: .75rem;
    padding: .1rem 0 .1rem .85rem;
}

.fallback-message > span[b-t5f8gnk386] {
    display: none;
}

.fallback-message strong[b-t5f8gnk386] {
    color: var(--warning);
    font-size: .74rem;
}

.fallback-message p[b-t5f8gnk386] {
    color: var(--text-muted);
    font-size: 0.74rem;
    margin: .25rem 0 0;
}

.fallback-table-wrap[b-t5f8gnk386] {
    margin-top: .9rem;
    overflow-x: auto;
}

table[b-t5f8gnk386] {
    border-collapse: collapse;
    color: var(--text-secondary);
    font-size: 0.74rem;
    width: 100%;
}

caption[b-t5f8gnk386] {
    color: var(--text-quiet);
    padding: 0 0 .5rem;
    text-align: left;
}

th[b-t5f8gnk386],
td[b-t5f8gnk386] {
    border-bottom: 1px solid var(--border-subtle);
    padding: .5rem;
    text-align: right;
}

th:first-child[b-t5f8gnk386],
td:first-child[b-t5f8gnk386] {
    text-align: left;
}

th[b-t5f8gnk386] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .1em;
}

@keyframes pulse-b-t5f8gnk386 {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

@media (max-width: 650px) {
    .chart-card[b-t5f8gnk386] {
        min-height: 27rem;
    }

    .chart-host[b-t5f8gnk386] {
        height: 22rem;
    }

    .chart-meta span[b-t5f8gnk386] {
        display: none;
    }
}
/* /Dashboard/PositionPerformance.razor.rz.scp.css */
/* This stylesheet must live beside the COMPONENT, not on the page that hosts it. Blazor scopes
   isolated CSS with a per-component attribute, and a child component's markup never receives the
   parent's - the identical rules sitting in Depot.razor.css matched nothing, so the <path> fell
   back to the SVG default fill (solid black) and the chart had no height at all. */

.perf-state[b-l075s2f6ox] {
    color: var(--text-quiet);
    font-size: .76rem;
    margin: 0;
}

.perf[b-l075s2f6ox] {
    display: flex;
    flex-direction: column;
}

.perf-head[b-l075s2f6ox] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 2.2rem;
    margin-bottom: .4rem;
}

.perf-figure[b-l075s2f6ox] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.perf-label[b-l075s2f6ox] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
}

.perf-change[b-l075s2f6ox] {
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
}

/* Tone classes are declared here as well as on the page: isolated CSS is per component, so the
   page's copies do not reach this markup either. */
.perf-change.positive[b-l075s2f6ox] { color: var(--positive); }
.perf-change.negative[b-l075s2f6ox] { color: var(--negative); }

.perf-facts[b-l075s2f6ox] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.8rem;
    margin: 0;
}

.perf-facts > div[b-l075s2f6ox] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.perf-facts dt[b-l075s2f6ox] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.perf-facts dd[b-l075s2f6ox] {
    color: var(--text-secondary);
    font-size: .78rem;
    margin: 0;
}

/* Scales UNIFORMLY (xMidYMid meet in the markup). The first version stretched a flat box to the
   row's full width, which compressed a year of price action into a strip of noise - the aspect
   ratio is what makes the curve readable, so it is fixed here and the box is capped rather than
   filling whatever space exists. */
.perf-chart[b-l075s2f6ox] {
    display: block;
    margin: .2rem 0 0;
    max-width: 62rem;
    width: 100%;
}

.perf-line[b-l075s2f6ox] {
    fill: none;
    stroke: var(--accent);
    stroke-linejoin: round;
    stroke-width: 1.6;
    vector-effect: non-scaling-stroke;
}

.perf-area[b-l075s2f6ox] {
    fill: var(--accent);
    opacity: .16;
    stroke: none;
}

/* Split at the entry line: above it the position is in profit, below it in loss. The tone
   classes further down deliberately do not reach these two - they colour by the NET result,
   which is the thing this split exists to stop doing. */
.perf-area.gain[b-l075s2f6ox] { fill: var(--positive); }
.perf-area.loss[b-l075s2f6ox] { fill: var(--negative); }

.perf-detail[b-l075s2f6ox] {
    color: var(--text-muted);
    font-size: .74rem;
    margin-top: .1rem;
}

.perf-cross[b-l075s2f6ox] {
    stroke: var(--text-faint);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.perf-cursor[b-l075s2f6ox] {
    fill: var(--text-primary);
    stroke: var(--app-background);
    stroke-width: 1.5;
}

/* Invisible, but it must still take the pointer - "fill: none" would let events fall through. */
.perf-hit[b-l075s2f6ox] {
    fill: transparent;
}

.perf-last[b-l075s2f6ox] {
    fill: var(--accent);
    stroke: var(--app-background);
    stroke-width: 1.5;
}

.perf-chart.positive .perf-line[b-l075s2f6ox],
.perf-chart.positive .perf-last[b-l075s2f6ox] { stroke: var(--positive); }
.perf-chart.positive .perf-area:not(.gain):not(.loss)[b-l075s2f6ox],
.perf-chart.positive .perf-last[b-l075s2f6ox] { fill: var(--positive); }
.perf-chart.negative .perf-line[b-l075s2f6ox],
.perf-chart.negative .perf-last[b-l075s2f6ox] { stroke: var(--negative); }
.perf-chart.negative .perf-area:not(.gain):not(.loss)[b-l075s2f6ox],
.perf-chart.negative .perf-last[b-l075s2f6ox] { fill: var(--negative); }

.perf-chart.positive .perf-last[b-l075s2f6ox],
.perf-chart.negative .perf-last[b-l075s2f6ox] { stroke: var(--app-background); }

/* Price levels. Faint enough to sit behind the curve, present enough to read a value off. */
.perf-grid[b-l075s2f6ox] {
    stroke: var(--border-subtle);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.perf-axis-value[b-l075s2f6ox],
.perf-axis-time[b-l075s2f6ox] {
    fill: var(--text-faint);
    font-family: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* The entry price, labelled on the line itself - the shaded band is bounded by it, so it reads
   as gain or loss against what was actually paid rather than as area under the curve. */
.perf-baseline[b-l075s2f6ox] {
    stroke: var(--text-muted);
    stroke-dasharray: 5 4;
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.perf-baseline-label[b-l075s2f6ox] {
    fill: var(--text-muted);
    font-family: inherit;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

.perf-note[b-l075s2f6ox] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    line-height: 1.6;
    margin: .7rem 0 0;
    max-width: 52rem;
}
/* /Dashboard/TradabilityScoreCard.razor.rz.scp.css */
.score-strip[b-aqu2qvbv04] {
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding-top: 1.4rem;
}

.strip-head[b-aqu2qvbv04] {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
}

.strip-value[b-aqu2qvbv04] {
    align-items: baseline;
    display: flex;
    gap: .6rem;
}

.strip-value > span:first-child[b-aqu2qvbv04] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.9rem;
    letter-spacing: -.02em;
    line-height: 1;
}

.strip-scale[b-aqu2qvbv04] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 500;
}

.strip-coverage[b-aqu2qvbv04],
.strip-notice[b-aqu2qvbv04] {
    /* This is explanatory copy the user is meant to actually read (what the score means, why
       two coverage numbers can differ) - --text-faint's 22-24% opacity made it too easy to
       skip past, so it uses the same readable muted tone as the strip-breakdown table below. */
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
    max-width: 42rem;
}

.strip-breakdown[b-aqu2qvbv04] {
    max-width: 42rem;
}

.strip-breakdown summary[b-aqu2qvbv04] {
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .3rem 0;
}

.strip-breakdown table[b-aqu2qvbv04] {
    border-collapse: collapse;
    font-size: 0.72rem;
    margin-top: .5rem;
    width: 100%;
}

.strip-breakdown th[b-aqu2qvbv04],
.strip-breakdown td[b-aqu2qvbv04] {
    border-bottom: 1px solid var(--border-subtle);
    padding: .45rem .5rem .45rem 0;
    text-align: left;
    white-space: nowrap;
}

.strip-breakdown th[b-aqu2qvbv04] {
    color: var(--text-muted);
    font-weight: 600;
}

.strip-breakdown-source[b-aqu2qvbv04] {
    color: var(--text-muted);
    white-space: normal;
}
/* /Layout/AuthLayout.razor.rz.scp.css */
/* Zwei Spalten: die Collage auf einer eine Stufe dunkleren Papierfläche, daneben das Blatt
   mit dem Formular. Unter 900px wird die Collage zu einem Streifen über dem Formular. */
.auth-shell[b-fam011jlgv] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(24rem, 1fr);
    min-height: 100dvh;
}

.auth-art[b-fam011jlgv] {
    align-items: stretch;
    border-right: 1px solid var(--border-strong);
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    position: sticky;
    top: 0;
    height: 100dvh;
}

.auth-side[b-fam011jlgv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1.6rem clamp(1.4rem, 4vw, 4rem) 1.4rem;
}

.auth-brand[b-fam011jlgv] {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

.auth-brand a[b-fam011jlgv] {
    color: var(--text-primary);
    text-decoration: none;
}

.auth-body[b-fam011jlgv] {
    align-content: center;
    display: grid;
    flex: 1;
    padding-block: 2rem;
}

.auth-foot[b-fam011jlgv] {
    border-top: 1px solid var(--border-subtle);
    color: var(--text-quiet);
    font-size: .74rem;
    line-height: 1.55;
    padding-top: .9rem;
}

@media (max-width: 900px) {
    .auth-shell[b-fam011jlgv] {
        grid-template-columns: 1fr;
    }

    .auth-art[b-fam011jlgv] {
        border-bottom: 1px solid var(--border-strong);
        border-right: 0;
        height: 15rem;
        order: -1;
        position: relative;
    }

    .auth-body[b-fam011jlgv] {
        padding-block: 1.4rem;
    }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-fzqntqyask] {
    background: transparent;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    z-index: var(--z-base);
}

/* Kopfleiste wie bei einer echten Trading-App: Logo, Navigation, Suche, Konto - eine
   durchgehende Zeile, keine zweite Ebene daneben. */
.topbar[b-fzqntqyask] {
    align-items: center;
    background: color-mix(in srgb, var(--app-background) 92%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border-strong);
    display: flex;
    gap: 1.4rem;
    height: 4rem;
    padding: 0 clamp(1.1rem, 3vw, 2.4rem);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.brand[b-fzqntqyask] {
    align-items: center;
    color: var(--text-primary);
    display: flex;
    flex: none;
    gap: .5rem;
    text-decoration: none;
}

.brand:hover[b-fzqntqyask] {
    color: var(--text-primary);
}

/* flex:1 + justify-content:center statt neben der Marke zu hängen: die vier Punkte
   sitzen mittig in der Zeile, mit echtem Abstand dazwischen statt der alten, engen
   .15rem (die für sieben Punkte gedacht war, nicht für vier). */
.primary-nav[b-fzqntqyask] {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 2rem;
    justify-content: center;
}

/* .nav-item's own look lives in the global app.css (see the note there) - NavLink's
   rendered <a> never carries this file's scope attribute, so a scoped rule here would
   silently never match it. Only this dropdown's positioning is scoped, since it targets
   plain elements this component itself renders. */
.nav-more[b-fzqntqyask] {
    position: relative;
}

.nav-more-toggle[b-fzqntqyask] {
    align-items: center;
    display: flex;
    gap: .3rem;
}

/* app.css' .nav-item::after (die Hover-Linie) setzt position:absolute für jedes
   ::after auf .nav-item - auch dieses hier, weil position pro Eigenschaft und nicht
   pro Regel kaskadiert. Der Chevron braucht seinen Platz im Fluss zurück. */
.nav-more-toggle[b-fzqntqyask]::after {
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    bottom: auto;
    content: "";
    height: .34rem;
    left: auto;
    position: static;
    right: auto;
    transform: rotate(45deg);
    width: .34rem;
}

.nav-more-panel[b-fzqntqyask] {
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    display: none;
    flex-direction: column;
    gap: .1rem;
    left: 0;
    margin-top: .4rem;
    padding: .4rem;
    position: absolute;
    top: 100%;
    transform-origin: top left;
    width: 13.5rem;
    z-index: var(--z-overlay);
}

.nav-more-group[b-fzqntqyask] {
    color: var(--text-quiet);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .08em;
    padding: .5rem .5rem .3rem;
    text-transform: uppercase;
}

.nav-more-group:not(:first-child)[b-fzqntqyask] {
    border-top: 1px solid var(--border-subtle);
    margin-top: .2rem;
}

.nav-more-panel.is-open[b-fzqntqyask] {
    display: flex;
}

@media (prefers-reduced-motion: no-preference) {
    .nav-more-panel.is-open[b-fzqntqyask] {
        animation: dropdown-in-b-fzqntqyask .18s var(--ease-out) both;
    }

    @keyframes dropdown-in-b-fzqntqyask {
        from {
            opacity: 0;
            transform: scale(.96) translateY(-4px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}

.topbar-actions[b-fzqntqyask] {
    align-items: center;
    display: flex;
    flex: none;
    gap: 1rem;
    margin-left: auto;
}

.account-status[b-fzqntqyask] {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 500;
    max-width: 12rem;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: color .18s ease;
    white-space: nowrap;
}

a.account-status:hover[b-fzqntqyask] {
    color: var(--text-primary);
}

.api-link[b-fzqntqyask],
.account-action[b-fzqntqyask] {
    background: none;
    border: 0;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 500;
    padding: 0;
    text-decoration: none;
    transition: color .18s ease;
    white-space: nowrap;
}

.api-link:hover[b-fzqntqyask],
.account-action:hover[b-fzqntqyask] {
    color: var(--accent);
}

.menu-button[b-fzqntqyask] {
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: none;
    flex: none;
    height: 2.3rem;
    position: relative;
    width: 2.3rem;
}

.menu-button span[aria-hidden][b-fzqntqyask] {
    background: var(--text-primary);
    box-shadow: 0 -6px 0 var(--text-primary), 0 6px 0 var(--text-primary);
    height: 2px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 1.05rem;
}

.nav-scrim[b-fzqntqyask] {
    display: none;
}

.content[b-fzqntqyask] {
    flex: 1;
    margin: 0 auto;
    max-width: 96rem;
    padding: clamp(1.6rem, 2.8vw, 2.6rem) clamp(1.1rem, 3vw, 2.4rem) 3.5rem;
    width: 100%;
}

.research-disclaimer[b-fzqntqyask] {
    background: transparent;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.6;
    padding: 1.1rem clamp(1.1rem, 3vw, 2.4rem) 1.4rem;
}

.research-disclaimer p[b-fzqntqyask] {
    margin: 0;
    max-width: 62rem;
}

.research-disclaimer strong[b-fzqntqyask] {
    color: var(--text-primary);
    font-weight: 600;
}

@media (max-width: 900px) {
    .topbar[b-fzqntqyask] {
        flex-wrap: wrap;
        height: auto;
        padding-block: .7rem;
    }

    .menu-button[b-fzqntqyask] {
        display: block;
        order: 1;
    }

    .brand[b-fzqntqyask] {
        order: 0;
    }

    .topbar-actions[b-fzqntqyask] {
        order: 2;
    }

    .primary-nav[b-fzqntqyask] {
        background: var(--surface-raised);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius);
        box-shadow: var(--shadow-card);
        display: none;
        flex-direction: column;
        gap: .1rem;
        left: 1rem;
        order: 3;
        padding: .5rem;
        position: fixed;
        right: 1rem;
        top: 4.4rem;
        width: auto;
        z-index: var(--z-modal);
    }

    .primary-nav.is-open[b-fzqntqyask] {
        display: flex;
    }

    @media (prefers-reduced-motion: no-preference) {
        .primary-nav.is-open[b-fzqntqyask] {
            animation: dropdown-in-b-fzqntqyask .2s var(--ease-out) both;
        }
    }

    .nav-more-panel[b-fzqntqyask] {
        position: static;
        width: 100%;
    }
}

@media (max-width: 560px) {
    .topbar-actions[b-fzqntqyask] {
        flex: 0 1 auto;
        flex-wrap: wrap;
        gap: .7rem;
        justify-content: flex-end;
        min-width: 0;
    }

    .account-status[b-fzqntqyask] {
        display: none;
    }
}

/* Hinweis, wenn ein Kursalarm auslöst - über allem, unten links, damit er weder das Coach-Fenster
   (unten rechts) noch die Kopfleiste verdeckt. */
.alert-toast[b-fzqntqyask] {
    align-items: center;
    background: var(--surface-raised, var(--app-background));
    border: 1px solid var(--accent);
    bottom: 1.2rem;
    box-shadow: 0 8px 28px rgb(0 0 0 / 22%);
    display: flex;
    font-size: .84rem;
    gap: .9rem;
    left: 1.2rem;
    max-width: min(28rem, calc(100vw - 2.4rem));
    padding: .8rem 1rem;
    position: fixed;
    z-index: 60;
}

.alert-toast a[b-fzqntqyask] {
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}

.alert-toast button[b-fzqntqyask] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 .2rem;
}
/* /Layout/SiteLayout.razor.rz.scp.css */
/* Der Rest der App ist Gold/Schwarz-Weiß (app.css --accent), diese Hülle nutzt dieselben
   globalen Tokens - keine eigene Palette mehr, damit Kopf- und Fußzeile automatisch mit
   jedem künftigen Token-Update Schritt halten. */
.site[b-6ncn1zh0mp] {
    background: var(--app-background);
    display: flex;
    flex-direction: column;
    isolation: isolate;
    min-height: 100vh;
    position: relative;
    z-index: var(--z-base);
}

/* Kopf wie der Titelkopf eines Magazins: Marke links, Rubriken, rechts die eine Aktion.
   Unten eine feine Regel statt einer harten Tintenlinie. */
.site-header[b-6ncn1zh0mp] {
    align-items: center;
    background: color-mix(in srgb, var(--app-background) 90%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-strong);
    display: flex;
    gap: 2.4rem;
    height: 4.2rem;
    padding: 0 clamp(1.1rem, 4vw, 3rem);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
}

.site-brand[b-6ncn1zh0mp] {
    align-items: center;
    color: var(--text-primary);
    display: flex;
    text-decoration: none;
}

.site-brand:hover[b-6ncn1zh0mp] {
    color: var(--text-primary);
}

.site-nav[b-6ncn1zh0mp] {
    display: flex;
    gap: 1.8rem;
    margin-right: auto;
}

.site-nav a[b-6ncn1zh0mp] {
    color: var(--text-secondary);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .18s ease;
}

.site-nav a:hover[b-6ncn1zh0mp] {
    color: var(--accent);
}

.site-actions[b-6ncn1zh0mp] {
    align-items: center;
    display: flex;
    gap: 1.3rem;
}

.site-actions .btn[b-6ncn1zh0mp] {
    border-color: var(--text-primary);
    color: var(--text-primary);
    padding: .72rem 1.15rem;
}

.site-actions .btn:hover[b-6ncn1zh0mp] {
    background: var(--text-primary);
    color: var(--app-background);
}

.site-actions .btn-primary[b-6ncn1zh0mp] {
    background: var(--text-primary);
    color: var(--app-background);
}

.site-actions .btn-primary:hover[b-6ncn1zh0mp] {
    background: transparent;
    color: var(--text-primary);
}

.site-link[b-6ncn1zh0mp] {
    color: var(--text-secondary);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
    transition: color .18s ease;
}

.site-link:hover[b-6ncn1zh0mp] {
    color: var(--accent);
}

main[b-6ncn1zh0mp] {
    flex: 1;
}

.site-footer[b-6ncn1zh0mp] {
    border-top: 1px solid var(--border-strong);
    margin-top: 5rem;
    padding: 2.4rem clamp(1.1rem, 4vw, 3rem) 3rem;
}

.site-footer-mark[b-6ncn1zh0mp] {
    --brand-counter: var(--app-background);
    color: var(--text-primary);
}

.site-footer-inner[b-6ncn1zh0mp] {
    align-items: start;
    display: grid;
    gap: 1.6rem 3rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin: 0 auto;
    max-width: 82rem;
}

.site-footer-note[b-6ncn1zh0mp] {
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.65;
    margin: 0;
    max-width: 40rem;
}

.site-footer-note strong[b-6ncn1zh0mp] {
    color: var(--text-primary);
    font-weight: 600;
}

.site-footer-links[b-6ncn1zh0mp] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.site-footer-links a[b-6ncn1zh0mp] {
    color: var(--text-secondary);
    font-size: .84rem;
    text-decoration: none;
}

.site-footer-links a:hover[b-6ncn1zh0mp] {
    color: var(--accent);
}

@media (max-width: 860px) {
    .site-nav[b-6ncn1zh0mp] {
        display: none;
    }

    .site-header[b-6ncn1zh0mp] {
        gap: 1rem;
        justify-content: space-between;
    }

    .site-footer-inner[b-6ncn1zh0mp] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 460px) {
    .site-link[b-6ncn1zh0mp] {
        display: none;
    }
}
/* /Layout/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-35uacznybo] {
    align-items: center;
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    height: 2.25rem;
    justify-content: center;
    overflow: hidden;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
    width: 2.25rem;
}

.theme-toggle:hover[b-35uacznybo] {
    background: var(--ink);
    color: var(--paper);
}

.theme-toggle:focus-visible[b-35uacznybo] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.theme-toggle svg[b-35uacznybo] {
    fill: none;
    height: 1.05rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 1.05rem;
}

/* Ein frisches SVG (Sonne <-> Mond) ist ein neuer DOM-Knoten - dieselbe
   "Animation läuft beim Einhängen"-Regel wie bei den Dropdown-Panels. */
@media (prefers-reduced-motion: no-preference) {
    .theme-toggle svg[b-35uacznybo] {
        animation: theme-icon-in-b-35uacznybo .3s var(--ease-spring) both;
    }

    @keyframes theme-icon-in-b-35uacznybo {
        from {
            opacity: 0;
            rotate: -90deg;
            scale: .5;
        }

        to {
            opacity: 1;
            rotate: 0deg;
            scale: 1;
        }
    }
}
/* /Layout/WalletWidget.razor.rz.scp.css */
.wallet-widget[b-w9sqts2648] {
    position: relative;
}

.wallet-summary[b-w9sqts2648] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), transform .15s var(--ease-out);
}

.wallet-summary:hover[b-w9sqts2648] {
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-1px);
}

.wallet-balance[b-w9sqts2648] {
    font-weight: 600;
}

.wallet-level[b-w9sqts2648] {
    padding: 0.1rem 0.4rem;
    border: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.wallet-summary:hover .wallet-level[b-w9sqts2648] {
    color: inherit;
}

.wallet-popover[b-w9sqts2648] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 20;
    width: 15rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    background: var(--surface-raised);
    box-shadow: var(--shadow-card);
    transform-origin: top right;
}

/* @if in WalletWidget.razor mounts/unmounts this element outright (no display
   toggle) - a plain CSS animation still runs on mount, since it starts fresh every
   time the node enters the DOM. */
@media (prefers-reduced-motion: no-preference) {
    .wallet-popover[b-w9sqts2648] {
        animation: wallet-popover-in-b-w9sqts2648 .18s var(--ease-out) both;
    }

    @keyframes wallet-popover-in-b-w9sqts2648 {
        from {
            opacity: 0;
            transform: scale(.96) translateY(-4px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }
}

.wallet-popover-row[b-w9sqts2648] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.wallet-xp-text[b-w9sqts2648] {
    font-size: 0.74rem;
    color: var(--text-quiet);
}

.wallet-xp-bar[b-w9sqts2648] {
    height: 5px;
    border-radius: 0;
    background: var(--border-subtle);
    overflow: hidden;
    margin-bottom: 0.8rem;
}

.wallet-xp-fill[b-w9sqts2648] {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s ease;
}

.wallet-claim[b-w9sqts2648] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: 0;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}

.wallet-claim:hover:not(:disabled)[b-w9sqts2648] {
    background: var(--ink);
    color: var(--paper);
}

.wallet-claim:disabled[b-w9sqts2648] {
    color: var(--text-quiet);
    background: transparent;
    cursor: default;
}

.wallet-error[b-w9sqts2648] {
    margin: 0.5rem 0 0;
    font-size: 0.74rem;
    color: var(--negative);
}
/* /Pages/AdminAnalytics.razor.rz.scp.css */
.admin-page[b-rvq5kb8ks2] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 62rem;
    min-width: 0;
}

.admin-head[b-rvq5kb8ks2] {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
}

.admin-head h1[b-rvq5kb8ks2] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    letter-spacing: -.015em;
    margin: .4rem 0 0;
}

.admin-controls[b-rvq5kb8ks2] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
}

.range[b-rvq5kb8ks2] {
    display: flex;
}

.range button[b-rvq5kb8ks2],
.refresh[b-rvq5kb8ks2] {
    background: none;
    border: 1px solid var(--border-strong, var(--border-subtle));
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    padding: .45rem .8rem;
}

.range button + button[b-rvq5kb8ks2] {
    border-left: 0;
}

.range button.is-on[b-rvq5kb8ks2] {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.refresh:disabled[b-rvq5kb8ks2] {
    cursor: default;
    opacity: .5;
}

.admin-note[b-rvq5kb8ks2] {
    color: var(--text-quiet);
    font-size: .76rem;
    line-height: 1.55;
    margin: 0;
}

.cards[b-rvq5kb8ks2] {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.card[b-rvq5kb8ks2] {
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 0 -1px -1px 0;
    padding: .9rem 1rem;
}

.card-label[b-rvq5kb8ks2] {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.card strong[b-rvq5kb8ks2] {
    color: var(--text-primary);
    font-size: 1.7rem;
    font-weight: 700;
}

.block[b-rvq5kb8ks2] {
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    min-width: 0;
    padding-top: 1.2rem;
}

.block h2[b-rvq5kb8ks2] {
    font-size: 1.05rem;
    margin: 0;
}

.block-head[b-rvq5kb8ks2] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    justify-content: space-between;
}

.funnel-pick select[b-rvq5kb8ks2] {
    background: var(--surface-inset, transparent);
    border: 1px solid var(--border-strong, var(--border-subtle));
    color: var(--text-primary);
    font: inherit;
    font-size: .82rem;
    padding: .45rem .6rem;
}

.funnel[b-rvq5kb8ks2] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.funnel-label[b-rvq5kb8ks2] {
    align-items: baseline;
    display: flex;
    font-size: .86rem;
    gap: 1rem;
    justify-content: space-between;
}

.funnel-label small[b-rvq5kb8ks2] {
    color: var(--text-quiet);
    font-size: .72rem;
    margin-left: .6rem;
}

.funnel-track[b-rvq5kb8ks2] {
    background: var(--surface-inset, var(--border-subtle));
    height: .7rem;
    margin-top: .35rem;
}

.funnel-track span[b-rvq5kb8ks2] {
    background: var(--accent);
    display: block;
    height: 100%;
    min-width: 2px;
}

.funnel-step.is-worst .funnel-track span[b-rvq5kb8ks2] {
    background: var(--negative);
}

.funnel-drop[b-rvq5kb8ks2] {
    color: var(--text-quiet);
    font-size: .74rem;
    margin: .3rem 0 0;
}

.funnel-step.is-worst .funnel-drop[b-rvq5kb8ks2] {
    color: var(--negative);
    font-weight: 600;
}

.two-col[b-rvq5kb8ks2] {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

.stack[b-rvq5kb8ks2] {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    min-width: 0;
}

.table[b-rvq5kb8ks2] {
    border-collapse: collapse;
    font-size: .82rem;
    width: 100%;
}

.table th[b-rvq5kb8ks2] {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: .4rem .5rem;
    text-align: left;
    text-transform: uppercase;
}

.table td[b-rvq5kb8ks2] {
    border-top: 1px solid var(--border-subtle);
    padding: .5rem;
    vertical-align: top;
}

.table .num[b-rvq5kb8ks2] {
    text-align: right;
    white-space: nowrap;
}

.bar[b-rvq5kb8ks2] {
    background: var(--surface-inset, var(--border-subtle));
    display: block;
    height: .3rem;
    margin-top: .3rem;
}

.bar span[b-rvq5kb8ks2] {
    background: var(--accent);
    display: block;
    height: 100%;
}

.toplist[b-rvq5kb8ks2] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toplist li[b-rvq5kb8ks2] {
    border-top: 1px solid var(--border-subtle);
    display: flex;
    font-size: .82rem;
    gap: 1rem;
    justify-content: space-between;
    padding: .45rem 0;
}

.recent .context[b-rvq5kb8ks2] {
    color: var(--text-quiet);
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    word-break: break-all;
}

@media (max-width: 820px) {
    .two-col[b-rvq5kb8ks2] {
        grid-template-columns: 1fr;
    }

    .recent[b-rvq5kb8ks2] {
        display: block;
        overflow-x: auto;
    }
}
/* /Pages/Analyse.razor.rz.scp.css */
.dashboard-page[b-hx53exttv0] {
    min-width: 0;
    position: relative;
}

.dashboard-grid[b-hx53exttv0] {
    display: flex;
    flex-direction: column;
}

.refresh-status[b-hx53exttv0] {
    align-items: center;
    color: var(--text-quiet);
    display: flex;
    font-size: 0.74rem;
    gap: .5rem;
    margin: 0 0 1rem;
}

.refresh-status span[b-hx53exttv0] {
    animation: dashboard-pulse-b-hx53exttv0 1.1s ease-in-out infinite;
    background: var(--accent);
    border-radius: 50%;
    height: .42rem;
    width: .42rem;
}

.inline-error[b-hx53exttv0] {
    align-items: center;
    border-left: 2px solid var(--negative);
    color: var(--text-secondary);
    display: flex;
    font-size: .74rem;
    gap: .75rem;
    margin: 0 0 1.1rem;
    padding: .1rem 0 .1rem .85rem;
}

.inline-error > span[b-hx53exttv0],
.state-icon[b-hx53exttv0] {
    display: none;
}

.inline-error p[b-hx53exttv0] {
    flex: 1;
    margin: 0;
}

.inline-error button[b-hx53exttv0],
.page-state button[b-hx53exttv0] {
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.74rem;
    font-weight: 500;
    padding: 0;
}

.inline-error button:hover:not(:disabled)[b-hx53exttv0],
.page-state button:hover[b-hx53exttv0] {
    color: var(--accent-bright);
}

.inline-error button:focus-visible[b-hx53exttv0],
.page-state button:focus-visible[b-hx53exttv0] {
    outline: 2px solid var(--accent-bright);
    outline-offset: 2px;
}

.inline-error button:disabled[b-hx53exttv0] {
    cursor: wait;
    opacity: .55;
}

.dashboard-footnote[b-hx53exttv0] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    margin: .7rem .15rem 0;
    text-align: right;
}

.footnote-stale[b-hx53exttv0] {
    color: var(--negative);
}

.page-state[b-hx53exttv0] {
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: 1.3rem;
    min-height: 16rem;
    padding-top: clamp(1.5rem, 4vw, 2.5rem);
}

.page-state h1[b-hx53exttv0] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    letter-spacing: -.015em;
    margin: .4rem 0 .5rem;
}

.page-state p:not(.eyebrow)[b-hx53exttv0] {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 400;
    margin-bottom: 1rem;
}

.loading-mark[b-hx53exttv0] {
    align-items: end;
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
    height: 1.8rem;
    justify-content: center;
    width: 1.8rem;
}

.loading-mark span[b-hx53exttv0] {
    animation: dashboard-bars-b-hx53exttv0 1.15s ease-in-out infinite;
    background: var(--accent);
    border-radius: 5px;
    height: 45%;
    width: 4px;
}

.loading-mark span:nth-child(2)[b-hx53exttv0] {
    animation-delay: .12s;
    height: 90%;
}

.loading-mark span:nth-child(3)[b-hx53exttv0] {
    animation-delay: .24s;
    height: 65%;
}

.error-state[b-hx53exttv0] {
    border-color: color-mix(in srgb, var(--negative) 28%, var(--border-subtle));
}

.error-state .state-icon[b-hx53exttv0] {
    height: 2rem;
    width: 2rem;
}

@keyframes dashboard-pulse-b-hx53exttv0 {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes dashboard-bars-b-hx53exttv0 {
    0%, 100% { opacity: .35; transform: scaleY(.72); }
    50% { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 1120px) {
    .dashboard-grid[b-hx53exttv0] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 580px) {
    .inline-error[b-hx53exttv0] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .inline-error p[b-hx53exttv0] {
        min-width: calc(100% - 2rem);
    }

    .inline-error button[b-hx53exttv0] {
        margin-left: 1.85rem;
    }

    .dashboard-footnote[b-hx53exttv0] {
        line-height: 1.5;
        text-align: left;
    }

    .page-state[b-hx53exttv0] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .refresh-status span[b-hx53exttv0],
    .loading-mark span[b-hx53exttv0] {
        animation: none;
    }
}
/* /Pages/Backtesting.razor.rz.scp.css */
.concept-page[b-tppogfe92c] {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    max-width: 60rem;
}

.concept-page-intro h1[b-tppogfe92c] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .6rem;
}

.concept-page-intro p:not(.eyebrow)[b-tppogfe92c] {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
}

.concept-page-intro a[b-tppogfe92c] {
    color: var(--accent-bright);
}

.concept-grid[b-tppogfe92c] {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}
/* /Pages/ChartLab.razor.rz.scp.css */
.lab[b-qorciea9ml] { max-width: 1400px; margin: auto; padding: clamp(16px, 3vw, 40px); color: #e7edf6; background: #0b111b; min-height: 100vh; }
.lab h1[b-qorciea9ml] { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 16px 0; }
.lab h2[b-qorciea9ml] { font-size: 1.3rem; margin-top: 0; }
.lab p[b-qorciea9ml], .provenance[b-qorciea9ml] { line-height: 1.6; }
.lab a[b-qorciea9ml] { color: #83ccff; }
.badge[b-qorciea9ml] { color: #ffc96a; font-size: .8rem; letter-spacing: .08em; }
.panel[b-qorciea9ml] { padding: clamp(16px, 2vw, 26px); margin-top: 20px; border: 1px solid #2e3c50; border-radius: 14px; background: #101a28; }
.provenance[b-qorciea9ml] { display: grid; gap: 8px; color: #bfcde0; }
.toolbar[b-qorciea9ml] { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.lab button[b-qorciea9ml], .lab input[b-qorciea9ml] { background: #1b2c41; color: #f3f7fd; border: 1px solid #6381a4; border-radius: 6px; padding: 10px 12px; min-height: 44px; font: inherit; }
.lab button[b-qorciea9ml] { cursor: pointer; }
.lab button:hover:not(:disabled)[b-qorciea9ml] { background: #2c4663; }
.lab button:disabled[b-qorciea9ml] { opacity: .45; cursor: default; }
.lab :focus-visible[b-qorciea9ml] { outline: 3px solid #ffc96a; outline-offset: 3px; }
.lab label[b-qorciea9ml] { display: grid; gap: 6px; }
.lab input[b-qorciea9ml] { width: 145px; max-width: 100%; }
.chart[b-qorciea9ml] { height: 430px; margin-top: 18px; position: relative; }
.chart-line-handle[b-qorciea9ml] { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #bd9aff; border: 2px solid #101a28; pointer-events: none; z-index: 5; }
.readout[b-qorciea9ml] { font-variant-numeric: tabular-nums; min-height: 3.2em; color: #cfdeef; }
.table-scroll[b-qorciea9ml] { overflow: auto; max-height: 460px; }
table[b-qorciea9ml] { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption[b-qorciea9ml] { text-align: left; padding: 14px 0; color: #bfcde0; }
th[b-qorciea9ml], td[b-qorciea9ml] { padding: 10px; white-space: nowrap; text-align: right; border-bottom: 1px solid #30415a; }
th:first-child[b-qorciea9ml] { text-align: left; }
.selected[b-qorciea9ml] { background: #263e56; }
pre[b-qorciea9ml] { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 600px) { .chart[b-qorciea9ml] { height: 340px; } .toolbar button[b-qorciea9ml] { flex-grow: 1; } }
/* /Pages/Coach.razor.rz.scp.css */
.coach-page[b-tlarpzwyzv] {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    max-width: 50rem;
    min-width: 0;
}

.coach-intro h1[b-tlarpzwyzv] {
    margin: 0 0 .6rem;
}

.coach-intro p[b-tlarpzwyzv] {
    color: var(--text-muted);
    font-size: .93rem;
    line-height: 1.7;
    margin: 0;
    max-width: 62ch;
}
/* /Pages/Datenschutz.razor.rz.scp.css */
.privacy-page[b-hj59r387qb] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 44rem;
    min-width: 0;
}

.privacy-page h1[b-hj59r387qb] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .8rem;
}

.privacy-page h2[b-hj59r387qb] {
    font-size: 1.15rem;
    margin: 0 0 .6rem;
}

.privacy-page h3[b-hj59r387qb] {
    font-size: .8rem;
    letter-spacing: .06em;
    margin: 1.2rem 0 .3rem;
    text-transform: uppercase;
}

.privacy-page p[b-hj59r387qb],
.privacy-page li[b-hj59r387qb] {
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.65;
}

.privacy-page ul[b-hj59r387qb] {
    margin: 0;
    padding-left: 1.2rem;
}

.placeholder-note[b-hj59r387qb] {
    border: 1px dashed var(--accent);
    margin: 0;
    padding: .7rem .9rem;
}

.privacy-choice[b-hj59r387qb] {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1.3rem;
}

.privacy-actions[b-hj59r387qb] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.privacy-actions button[b-hj59r387qb] {
    background: none;
    border: 1px solid var(--border-strong, var(--border-subtle));
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    padding: .55rem 1rem;
}

.privacy-actions button:disabled[b-hj59r387qb] {
    cursor: default;
    opacity: .45;
}
/* /Pages/Depot.razor.rz.scp.css */
.depot-page[b-e60jlhcbmo] {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    min-width: 0;
}

.depot-intro h1[b-e60jlhcbmo] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .6rem;
}

.depot-intro p:not(.eyebrow)[b-e60jlhcbmo] {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    max-width: 44rem;
}

.add-position[b-e60jlhcbmo] {
    align-items: end;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1.2rem 0;
}

.add-position .field[b-e60jlhcbmo] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.add-position label[b-e60jlhcbmo] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.add-position input[b-e60jlhcbmo] {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    font: inherit;
    font-size: .85rem;
    padding: .4rem .1rem;
    width: 8rem;
}

.add-position input:focus[b-e60jlhcbmo] {
    border-bottom-color: var(--accent);
    outline: none;
}

.add-position button[b-e60jlhcbmo] {
    background: var(--accent);
    border: 0;
    color: var(--app-background);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    padding: .6rem 1.2rem;
}

.add-position button:hover:not(:disabled)[b-e60jlhcbmo] {
    background: var(--accent-bright);
}

.add-position button:disabled[b-e60jlhcbmo] {
    cursor: not-allowed;
    opacity: .5;
}

.form-error[b-e60jlhcbmo] {
    color: var(--negative);
    font-size: .78rem;
}

.page-state[b-e60jlhcbmo] {
    color: var(--text-muted);
    font-size: .82rem;
    padding: 1rem 0;
}

.table-scroll[b-e60jlhcbmo] {
    overflow-x: auto;
}

table[b-e60jlhcbmo] {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    width: 100%;
}

th[b-e60jlhcbmo] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .1em;
    padding: .6rem;
    text-align: right;
    white-space: nowrap;
}

th:first-child[b-e60jlhcbmo] {
    text-align: left;
}

td[b-e60jlhcbmo] {
    border-top: 1px solid var(--border-subtle);
    padding: .7rem .6rem;
    text-align: right;
    white-space: nowrap;
}

td:first-child[b-e60jlhcbmo] {
    text-align: left;
}

.positive[b-e60jlhcbmo] { color: var(--positive); }
.negative[b-e60jlhcbmo] { color: var(--negative); }
.neutral[b-e60jlhcbmo] { color: var(--text-muted); }

.link-button[b-e60jlhcbmo] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.74rem;
    text-decoration: underline;
}

.link-button:hover[b-e60jlhcbmo] {
    color: var(--negative);
}

.csv-import[b-e60jlhcbmo] {
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-bottom: 1.2rem;
}

.csv-import label[b-e60jlhcbmo] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.csv-import-errors[b-e60jlhcbmo] {
    color: var(--negative);
    font-size: .78rem;
    margin: 0;
    padding-left: 1.2rem;
}

.csv-import-hint[b-e60jlhcbmo] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    line-height: 1.6;
    margin: 0;
    max-width: 42rem;
}

/* Hides the native, browser-styled file input entirely rather than trying to restyle it
   in place (its own button + "no file chosen" text render very differently per browser) -
   the invisible <InputFile> stacks on top of this label and receives the click instead. No
   box/border here on purpose - matches the plain underlined "Entfernen"/link-button language
   used everywhere else on this page, not a boxed button. */
.file-input-button[b-e60jlhcbmo] {
    color: var(--text-quiet);
    cursor: pointer;
    display: inline-flex;
    font-size: .78rem;
    position: relative;
    text-decoration: underline;
    width: fit-content;
}

.file-input-button:hover[b-e60jlhcbmo] {
    color: var(--accent);
}

.broker-manage[b-e60jlhcbmo] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ::deep is required, not decorative. <InputFile> is a separate component, so the <input> it
   renders never receives THIS component's scope attribute - a plain
   `.file-input-button input[type="file"]` rule compiles to a selector that can never match, and
   the browser's own file button plus its "no file chosen" text stayed fully visible next to the
   label. ::deep moves the scope onto the ancestor instead, which this component does own. */
.file-input-button[b-e60jlhcbmo]  input[type="file"] {
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.position-cell[b-e60jlhcbmo] {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.position-logo[b-e60jlhcbmo],
.position-logo-fallback[b-e60jlhcbmo] {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 1.55rem;
    object-fit: cover;
    width: 1.55rem;
}

/* Shown only when there is no logo, or when the CDN 404s for this ticker - a neutral badge,
   never another company's icon. */
.position-logo-fallback[b-e60jlhcbmo] {
    align-items: center;
    background: var(--surface-inset, rgb(127 127 127 / 18%));
    color: var(--text-quiet);
    display: none;
    font-size: 0.74rem;
    font-weight: 700;
    justify-content: center;
    letter-spacing: .02em;
}

.position-identity[b-e60jlhcbmo] {
    min-width: 0;
}

/* The readable company name leads, the ticker is the quiet second line - a broker export
   keys rows by ISIN, which says nothing to a reader. */
.position-name[b-e60jlhcbmo] {
    color: var(--text-primary);
    display: block;
    font-size: .82rem;
    font-weight: 550;
    white-space: nowrap;
}

.position-ticker[b-e60jlhcbmo] {
    color: var(--text-quiet);
    display: block;
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: .04em;
    white-space: nowrap;
}

.depot-body[b-e60jlhcbmo] {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) 18rem;
}

.depot-list[b-e60jlhcbmo] {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    min-width: 0;
}

.depot-tabs[b-e60jlhcbmo] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.depot-tabs button[b-e60jlhcbmo] {
    background: none;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.74rem;
    padding: .35rem .8rem;
}

.depot-tabs button.active[b-e60jlhcbmo] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--app-background);
    font-weight: 600;
}

.depot-tabs button:disabled[b-e60jlhcbmo] {
    cursor: not-allowed;
    opacity: .4;
}

.tab-count[b-e60jlhcbmo] {
    color: inherit;
    font-size: 0.74rem;
    opacity: .9;
}

.depot-allocation[b-e60jlhcbmo] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.depot-allocation h2[b-e60jlhcbmo] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: .95rem;
    margin: 0;
}

/* Plain block + aspect-ratio does NOT give a box a "definite" height for its own children's
   percentage heights to resolve against in Chromium - only a flex item with aspect-ratio does
   (the flex algorithm resolves its main-size from the cross-size *before* layout, which is
   definite by construction; a bare block's aspect-ratio height is not). This wrapper's own
   height already works this way because IT is a flex item of `.depot-allocation` (column flex,
   see below) - `display: flex` here extends the same trick to its child, the chart bundle's
   host div, which otherwise has no definite height for its own "tc-chart" (height: 100%) child
   to resolve against, and the ring silently never appears. */
.allocation-ring-wrap[b-e60jlhcbmo] {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
}

/* `::deep` is required: `.bklit-chart` is owned by the BklitChart component, not this page, so
   its rendered element never carries this file's scope attribute - a plain scoped selector here
   would silently never match it. `height: auto !important` beats the inline `height: 100%` that
   BklitChart.razor always sets (the one case a stylesheet rule legitimately overrides an inline
   style), clearing the way for aspect-ratio to size the box instead. */
.allocation-ring-wrap[b-e60jlhcbmo]  .bklit-chart {
    aspect-ratio: 1;
    height: auto !important;
    position: relative;
}

/* The chart bundle's own "tc-chart" (height: 100%) is the actual broken link: even against a
   parent with a real, measured 288px height, that percentage still resolved to 0 here - a
   deeper version of the same class of bug, one level in, that nothing short of `position:
   absolute; inset: 0` reliably escapes (unconditional per spec, unlike a percentage height).
   ".bklit-chart" above is the positioned ancestor this needs. */
.allocation-ring-wrap[b-e60jlhcbmo]  .tc-chart {
    height: auto;
    inset: 0;
    position: absolute;
}

/* Same fix, one level deeper still: @visx/responsive's ParentSize (inside "tc-ring") measures
   its own wrapping div, which was the same silently-zero percentage height again. */
.allocation-ring-wrap[b-e60jlhcbmo]  .tc-ring {
    height: auto;
    inset: 0;
    position: absolute;
}

/* And one level deeper again: the SVG itself sizes from its own viewBox (unaffected, which is
   why the donut already drew correctly), but the centre readout text is centred via this
   flex stage's height: 100% - the same broken link, which is why it rendered below the ring
   instead of inside it. */
.allocation-ring-wrap[b-e60jlhcbmo]  .tc-ring-stage {
    height: auto;
    inset: 0;
    position: absolute;
}

/* The actual last hop: the chart's own CSS Grid stacks the SVG and the centre-readout layer
   into one cell via default grid stretch - which never kicked in here (measured: the readout
   layer's box came back exactly its own content size, not the grid cell's), so the centre
   layer rendered below the ring instead of inside it. It's always the element right after the
   SVG in the DOM; sizing it via inset instead of relying on stretch fixes it unconditionally,
   matching every other hop in this same chain. */
.allocation-ring-wrap[b-e60jlhcbmo]  .tc-ring-stage svg + div {
    align-items: center;
    display: flex;
    height: auto !important;
    inset: 0;
    justify-content: center;
    position: absolute;
    width: auto !important;
}

.allocation-ring[b-e60jlhcbmo] {
    display: block;
    height: 100%;
    overflow: visible;
    width: 100%;
}

.allocation-track[b-e60jlhcbmo] {
    stroke: var(--surface-inset, rgb(127 127 127 / 12%));
}

/* The hovered segment lifts out of the ring along its own mid-angle. The direction comes from
   the geometry (--shift-x/--shift-y are a unit vector); only the distance lives here. */
.allocation-seg[b-e60jlhcbmo] {
    cursor: default;
    transform: translate(0, 0);
    transition: transform 280ms cubic-bezier(.2, .8, .2, 1), opacity 200ms ease;
}

.allocation-seg[data-hovered][b-e60jlhcbmo] {
    transform: translate(calc(var(--shift-x) * 7px), calc(var(--shift-y) * 7px));
}

.allocation-seg circle[b-e60jlhcbmo] {
    transition: stroke-width 280ms cubic-bezier(.2, .8, .2, 1);
}

.allocation-readout[b-e60jlhcbmo] {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    inset: 0;
    justify-content: center;
    /* The ring underneath must stay hoverable through the middle. */
    pointer-events: none;
    position: absolute;
    text-align: center;
    /* Keeps a long total off the ring itself. */
    padding: 0 22%;
}

.allocation-readout-label[b-e60jlhcbmo] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.allocation-readout-value[b-e60jlhcbmo] {
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1.1;
    transition: color 220ms ease;
}

.allocation-readout-meta[b-e60jlhcbmo] {
    color: var(--text-muted);
    font-size: 0.74rem;
}

/* The generic tone classes are declared earlier in this file, so they lose the tie on
   specificity - the result in the ring's centre has to state them again to win. */
.allocation-readout-meta.positive[b-e60jlhcbmo] { color: var(--positive); }
.allocation-readout-meta.negative[b-e60jlhcbmo] { color: var(--negative); }

.legend-row[b-e60jlhcbmo] {
    transition: opacity 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .allocation-seg[b-e60jlhcbmo],
    .allocation-seg circle[b-e60jlhcbmo],
    .allocation-readout-value[b-e60jlhcbmo],
    .legend-row[b-e60jlhcbmo] {
        transition: none;
    }
}

.allocation-legend[b-e60jlhcbmo] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.allocation-legend li[b-e60jlhcbmo] {
    align-items: center;
    display: flex;
    gap: .5rem;
}

.legend-swatch[b-e60jlhcbmo] {
    border-radius: 50%;
    flex: 0 0 auto;
    height: .6rem;
    width: .6rem;
}

.legend-identity[b-e60jlhcbmo] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .05rem;
    min-width: 0;
}

.legend-label[b-e60jlhcbmo] {
    color: var(--text-primary);
    font-size: .74rem;
}

/* What the slice is actually worth. A share on its own ("3,2 %") never answers the question the
   panel is opened for. */
.legend-amount[b-e60jlhcbmo] {
    color: var(--text-quiet);
    font-size: 0.74rem;
}

.legend-value[b-e60jlhcbmo] {
    color: var(--text-muted);
    font-size: .74rem;
}

.allocation-note[b-e60jlhcbmo] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .depot-body[b-e60jlhcbmo] {
        grid-template-columns: minmax(0, 1fr);
    }

    .depot-allocation[b-e60jlhcbmo] {
        order: -1;
    }
}

/* --- expandable position history -------------------------------------------------- */

.position-toggle[b-e60jlhcbmo] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 0.74rem;
    line-height: 1;
    padding: .25rem;
    transition: color .2s ease;
}

.position-toggle:hover[b-e60jlhcbmo] {
    color: var(--accent);
}

tr.expanded .position-toggle[b-e60jlhcbmo] {
    color: var(--accent);
}

.position-detail-row > td[b-e60jlhcbmo] {
    background: var(--surface-inset, rgb(127 127 127 / 7%));
    padding: 1.1rem 1.2rem 1.3rem;
}

.position-edit-row > td[b-e60jlhcbmo] {
    background: var(--surface-inset, rgb(127 127 127 / 7%));
    padding: 1rem 1.2rem;
}

.position-edit-form[b-e60jlhcbmo] {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.position-edit-form label[b-e60jlhcbmo] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.position-edit-form label span[b-e60jlhcbmo] {
    color: var(--text-quiet);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.position-edit-form input[b-e60jlhcbmo] {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    font: inherit;
    font-size: .85rem;
    padding: .4rem .1rem;
    width: 8rem;
}

.position-edit-form input:focus[b-e60jlhcbmo] {
    border-bottom-color: var(--accent);
    outline: none;
}

.position-edit-actions[b-e60jlhcbmo] {
    align-items: center;
    display: flex;
    gap: .8rem;
}

.position-edit-actions button[type="submit"][b-e60jlhcbmo] {
    background: var(--accent);
    border: 0;
    color: var(--app-background);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    padding: .6rem 1.2rem;
}

.position-edit-actions button[type="submit"]:hover:not(:disabled)[b-e60jlhcbmo] {
    background: var(--accent-bright);
}

.position-edit-actions button[type="submit"]:disabled[b-e60jlhcbmo] {
    cursor: not-allowed;
    opacity: .5;
}

/* The .perf-* rules that used to sit here now live in PositionPerformance.razor.css. They style a
   CHILD component's markup, which never carries this page's scope attribute - from here they
   matched nothing, so the chart's <path> fell back to the SVG default fill (solid black) and the
   panel had no layout at all. Isolated CSS belongs beside the component it styles. */

.beginner-intro[b-e60jlhcbmo] {
    align-items: center;
    background: var(--surface-raised);
    border: 1px solid var(--accent);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
}

.beginner-intro h2[b-e60jlhcbmo] {
    font-size: 1.05rem;
    margin: 0 0 .35rem;
}

.beginner-intro p[b-e60jlhcbmo] {
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.65;
    margin: 0;
    max-width: 40rem;
}

.beginner-cta[b-e60jlhcbmo] {
    background: var(--accent);
    color: var(--app-background);
    font-size: .84rem;
    font-weight: 600;
    padding: .6rem 1.1rem;
    text-decoration: none;
    white-space: nowrap;
}

.beginner-cta:hover[b-e60jlhcbmo] {
    background: var(--accent-bright);
}

.savings-progress[b-e60jlhcbmo] {
    align-items: center;
    background: var(--surface-raised);
    border: 1px solid var(--accent);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    justify-content: space-between;
    padding: 1.1rem 1.3rem;
}

.savings-progress h2[b-e60jlhcbmo] {
    font-size: 1.05rem;
    margin: 0 0 .35rem;
}

.savings-progress p[b-e60jlhcbmo] {
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.65;
    margin: 0;
    max-width: 40rem;
}

.savings-progress-figures[b-e60jlhcbmo] {
    color: var(--text) !important;
    margin-top: .35rem !important;
}

.savings-progress-figures strong[b-e60jlhcbmo] {
    color: var(--accent);
}

.savings-progress-disclaimer[b-e60jlhcbmo] {
    font-size: .76rem !important;
    margin-top: .35rem !important;
}

.depot-view-tabs[b-e60jlhcbmo] {
    display: flex;
    gap: .5rem;
}

.depot-view-tabs button[b-e60jlhcbmo] {
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    font-weight: 600;
    padding: .55rem 1.2rem;
}

.depot-view-tabs button.active[b-e60jlhcbmo] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--app-background);
}

.savings-tab[b-e60jlhcbmo] {
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
}

.savings-tab p[b-e60jlhcbmo] {
    max-width: none;
}

.savings-compare[b-e60jlhcbmo] {
    display: grid;
    gap: 1rem 2rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.savings-compare > div[b-e60jlhcbmo] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.savings-label[b-e60jlhcbmo] {
    color: var(--text-quiet);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
}

.savings-compare strong[b-e60jlhcbmo] {
    font-size: 1.15rem;
}

.savings-sub[b-e60jlhcbmo] {
    color: var(--text-muted);
    font-size: .82rem;
}

.savings-whatif[b-e60jlhcbmo] {
    border-top: 1px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding-top: 1rem;
}

.savings-tab h3[b-e60jlhcbmo] { font-size: .9rem; margin: 0 0 .5rem; }
.savings-chart[b-e60jlhcbmo]  .savings-svg { display: block; height: 14rem; width: 100%; }
.savings-chart[b-e60jlhcbmo]  .savings-svg polyline { stroke-width: 2; vector-effect: non-scaling-stroke; }
.savings-chart[b-e60jlhcbmo]  .savings-svg .plan { stroke: var(--text-muted); }
.savings-chart[b-e60jlhcbmo]  .savings-svg .plan.dashed { stroke-dasharray: 6 5; }
.savings-chart[b-e60jlhcbmo]  .savings-svg .actual { stroke: var(--accent); stroke-width: 3; }
.savings-chart[b-e60jlhcbmo]  .savings-svg .now { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.savings-legend[b-e60jlhcbmo] { display: flex; flex-wrap: wrap; font-size: .76rem !important; gap: .4rem 1.5rem; }
.lg-plan[b-e60jlhcbmo]::before, .lg-actual[b-e60jlhcbmo]::before { content: ""; display: inline-block; height: 3px; margin-right: .4rem; vertical-align: middle; width: 1.4rem; }
.lg-plan[b-e60jlhcbmo]::before { background: var(--text-muted); }
.lg-actual[b-e60jlhcbmo]::before { background: var(--accent); }
.savings-etfs ul[b-e60jlhcbmo] { display: flex; flex-direction: column; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.savings-etfs li[b-e60jlhcbmo] { display: grid; font-size: .84rem; gap: 1rem; grid-template-columns: 1fr auto auto; }
.savings-whatif-actions button[b-e60jlhcbmo] { background: var(--accent); border: 0; color: var(--app-background); cursor: pointer; font-weight: 600; padding: .6rem 1.2rem; }
.savings-whatif-actions button:disabled[b-e60jlhcbmo] { cursor: not-allowed; opacity: .5; }

.depot-history[b-e60jlhcbmo] { display: flex; flex-direction: column; gap: .6rem; }
.depot-history h2[b-e60jlhcbmo] { font-size: 1rem; margin: 0; }
.depot-history-note[b-e60jlhcbmo] { color: var(--text-muted); font-size: .8rem; margin: 0; max-width: 46rem; }

.dividends[b-e60jlhcbmo] { display: flex; flex-direction: column; gap: .7rem; }
.dividends h2[b-e60jlhcbmo] { font-size: 1rem; margin: 0; }
.dividend-form[b-e60jlhcbmo] { align-items: end; display: flex; flex-wrap: wrap; gap: 1rem; }
.dividend-form label[b-e60jlhcbmo] { color: var(--text-quiet); display: flex; flex-direction: column; font-size: .74rem; gap: .3rem; }
.dividend-form input[b-e60jlhcbmo], .dividend-form select[b-e60jlhcbmo] { background: none; border: 0; border-bottom: 1px solid var(--border-strong); color: var(--text-primary); font: inherit; font-size: .85rem; padding: .4rem .1rem; width: 8rem; }
.dividend-form select option[b-e60jlhcbmo] { background: var(--surface-raised, #1a1a1a); }
.dividend-form button[b-e60jlhcbmo] { background: var(--accent); border: 0; color: var(--app-background); cursor: pointer; font-weight: 600; padding: .6rem 1.2rem; }
.dividend-list[b-e60jlhcbmo] { display: flex; flex-direction: column; font-size: .84rem; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.dividend-list li[b-e60jlhcbmo] { display: grid; gap: 1rem; grid-template-columns: 6rem 1fr auto auto; }

.savings-tab[b-e60jlhcbmo] { flex-wrap: nowrap; max-width: 100%; min-width: 0; }
.savings-tab > *[b-e60jlhcbmo] { min-width: 0; }
.savings-compare[b-e60jlhcbmo] { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }

@media (max-width: 640px) {
    .savings-etfs li[b-e60jlhcbmo] { grid-template-columns: 1fr; gap: .1rem; }
    .dividend-list li[b-e60jlhcbmo] { grid-template-columns: 1fr auto; }
}

.export-row[b-e60jlhcbmo] { display: flex; gap: 1.2rem; }
.savings-reminder[b-e60jlhcbmo] { border-left: 3px solid var(--accent); color: var(--text-primary) !important; padding-left: .8rem; }
/* /Pages/FriendProfile.razor.rz.scp.css */
.friend-page[b-upxrvvx52u] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 46rem;
}

.back-link[b-upxrvvx52u] {
    color: var(--text-muted);
    font-size: .84rem;
    text-decoration: none;
}

.back-link[b-upxrvvx52u]::before {
    content: "‹ ";
}

.back-link:hover[b-upxrvvx52u] {
    color: var(--text-primary);
}

.friend-missing h1[b-upxrvvx52u] {
    margin: 0 0 .6rem;
}

.friend-missing p[b-upxrvvx52u] {
    color: var(--text-muted);
    font-size: .95rem;
    line-height: 1.65;
    margin: 0;
    max-width: 52ch;
}

.friend-header[b-upxrvvx52u] {
    align-items: center;
    display: flex;
    gap: 1.2rem;
}

.friend-header h1[b-upxrvvx52u] {
    font-size: clamp(2rem, 4vw, 2.8rem);
    margin: 0 0 .25rem;
}

.friend-header p[b-upxrvvx52u] {
    color: var(--text-muted);
    font-size: .88rem;
    margin: 0;
}

.friend-stats[b-upxrvvx52u] {
    border-block: 1px solid var(--border-subtle);
    display: grid;
    gap: 1.5rem 3rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin: 0;
    padding: 1.2rem 0;
}

.friend-stats dt[b-upxrvvx52u] {
    color: var(--text-quiet);
    font-size: .8rem;
    margin-bottom: .35rem;
}

.friend-stats dd[b-upxrvvx52u] {
    display: flex;
    flex-direction: column;
    font-size: 1.05rem;
    gap: .4rem;
    margin: 0;
}

.friend-stats dd.is-empty[b-upxrvvx52u] {
    color: var(--text-muted);
    font-size: .92rem;
}

.friend-stats small[b-upxrvvx52u] {
    color: var(--text-quiet);
    font-size: .76rem;
}

.xp-track[b-upxrvvx52u] {
    background: var(--surface-inset);
    display: block;
    height: .35rem;
    max-width: 12rem;
}

.xp-fill[b-upxrvvx52u] {
    background: var(--accent);
    display: block;
    height: 100%;
}

.friend-depot h2[b-upxrvvx52u] {
    font-size: 1.55rem;
    margin: 0 0 .5rem;
}

.depot-note[b-upxrvvx52u],
.depot-private[b-upxrvvx52u] {
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.6;
    margin: 0;
    max-width: 56ch;
}

/* Die Depot-Aufteilung ist die einzige Messfläche der Seite - also angehoben. */
.depot-body[b-upxrvvx52u] {
    align-items: center;
    background: var(--surface-raised);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    display: grid;
    gap: 2rem;
    grid-template-columns: 11rem minmax(0, 1fr);
    margin: 1.1rem 0 .8rem;
    padding: 1.4rem;
}

.depot-ring[b-upxrvvx52u] {
    width: 11rem;
}

.ring-track[b-upxrvvx52u] {
    stroke: var(--surface-inset);
}

.ring-count[b-upxrvvx52u] {
    fill: var(--text-primary);
    font-family: var(--font-display);
    font-size: 34px;
}

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

.holdings li[b-upxrvvx52u] {
    align-items: center;
    display: grid;
    gap: .75rem;
    grid-template-columns: .7rem minmax(0, 1fr) auto;
    padding: .5rem 0;
}

.holdings li + li[b-upxrvvx52u] {
    border-top: 1px solid var(--border-subtle);
}

.holding-swatch[b-upxrvvx52u] {
    border-radius: 2px;
    height: .7rem;
    width: .7rem;
}

.holding-name[b-upxrvvx52u] {
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.holding-name small[b-upxrvvx52u] {
    color: var(--text-quiet);
    font-family: var(--font-mono);
    font-size: .74rem;
    margin-left: .45rem;
}

.holding-weight[b-upxrvvx52u] {
    font-size: .9rem;
}

.friend-chat[b-upxrvvx52u] {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1.2rem;
}

.friend-chat h2[b-upxrvvx52u] {
    font-size: 1.1rem;
    margin: 0 0 .8rem;
}

.chat-log[b-upxrvvx52u] {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-height: 22rem;
    overflow-y: auto;
    padding: .9rem 1rem;
}

.chat-empty[b-upxrvvx52u] {
    color: var(--text-quiet);
    font-size: .84rem;
    margin: 0;
}

.chat-message[b-upxrvvx52u] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    max-width: 80%;
}

.chat-message.mine[b-upxrvvx52u] {
    align-items: flex-end;
    align-self: flex-end;
}

.chat-message.theirs[b-upxrvvx52u] {
    align-items: flex-start;
    align-self: flex-start;
}

.chat-text[b-upxrvvx52u] {
    background: var(--surface-inset);
    border: 1px solid var(--border-subtle);
    font-size: .86rem;
    line-height: 1.5;
    overflow-wrap: break-word;
    padding: .45rem .7rem;
    white-space: pre-wrap;
}

.chat-message.mine .chat-text[b-upxrvvx52u] {
    background: color-mix(in srgb, var(--accent) 16%, var(--surface-inset));
    border-color: var(--accent);
}

.chat-time[b-upxrvvx52u] {
    color: var(--text-quiet);
    font-size: .68rem;
}

.chat-composer[b-upxrvvx52u] {
    display: flex;
    gap: .6rem;
    margin-top: .8rem;
}

.chat-composer input[b-upxrvvx52u] {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    flex: 1;
    font: inherit;
    font-size: .86rem;
    padding: .45rem .1rem;
}

.chat-composer input:focus[b-upxrvvx52u] {
    border-bottom-color: var(--accent);
    outline: none;
}

.chat-composer button[b-upxrvvx52u] {
    background: var(--accent);
    border: 0;
    color: var(--app-background);
    cursor: pointer;
    font-size: .82rem;
    font-weight: 600;
    padding: .5rem 1rem;
}

.chat-composer button:disabled[b-upxrvvx52u] {
    cursor: not-allowed;
    opacity: .45;
}

.chat-composer button:not(:disabled):hover[b-upxrvvx52u] {
    background: var(--accent-bright);
}

.friend-footer[b-upxrvvx52u] {
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .85rem;
    gap: .8rem;
    padding-top: 1.2rem;
}

.remove-start[b-upxrvvx52u],
.remove-confirm[b-upxrvvx52u],
.remove-cancel[b-upxrvvx52u] {
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    padding: .45rem .8rem;
}

.remove-start[b-upxrvvx52u] {
    border: 0;
    padding-inline: 0;
}

.remove-start:hover[b-upxrvvx52u],
.remove-confirm[b-upxrvvx52u] {
    color: var(--negative);
}

.remove-confirm[b-upxrvvx52u] {
    border-color: var(--negative);
}

.remove-cancel:hover[b-upxrvvx52u] {
    color: var(--text-primary);
}

@media (max-width: 620px) {
    .depot-body[b-upxrvvx52u] {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }

    .holdings[b-upxrvvx52u] {
        width: 100%;
    }
}

.friend-challenge[b-upxrvvx52u] {
    border: 1px solid var(--accent);
    color: var(--accent);
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    margin-top: .7rem;
    padding: .45rem .9rem;
    text-decoration: none;
}

.friend-challenge:hover[b-upxrvvx52u] {
    background: var(--accent);
    color: var(--app-background);
}
/* /Pages/Home.razor.rz.scp.css */
.dashboard[b-wausq5zc34] {
    align-content: start;
    align-items: start;
    display: grid;
    gap: 2.4rem 3rem;
    grid-template-areas:
        "masthead masthead"
        "watch    note"
        "news     movers"
        "setups   setups"
        "planned  planned";
    grid-template-columns: minmax(0, 1.6fr) minmax(16rem, .8fr);
    min-width: 0;
}

/* Die ASCII-Studie gehört zum Seitenkopf, nicht zur Datenfläche. */
.dash-masthead[b-wausq5zc34] {
    align-items: center;
    display: grid;
    gap: 2rem;
    grid-area: masthead;
    grid-template-columns: minmax(0, 1fr) auto;
    padding-bottom: .4rem;
}

.dash-masthead-copy[b-wausq5zc34] { min-width: 0; max-width: 42rem; }

@media (max-width: 700px) {
    .dash-masthead[b-wausq5zc34] { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
    .dash-masthead[b-wausq5zc34]  .ascii-illustration { justify-self: center; }
}

.dash-masthead .section-index[b-wausq5zc34] {
    border-top: none;
    margin-bottom: 1rem;
    padding-top: 0;
}

.dash-masthead h1[b-wausq5zc34] {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    margin: 0 0 .7rem;
}

.dash-masthead p[b-wausq5zc34] {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
    max-width: 42ch;
}

.widget-watch[b-wausq5zc34] {
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    grid-area: watch;
    padding: 1.6rem;
}

.widget-head[b-wausq5zc34] {
    align-items: baseline;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 0;
    padding-bottom: .55rem;
}

.widget-head h2[b-wausq5zc34] {
    color: var(--text-primary);
    font-size: 1.6rem;
    margin: 0;
}

.widget-meta[b-wausq5zc34] {
    color: var(--text-quiet);
    font-size: .76rem;
}

.widget-body[b-wausq5zc34] {
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.65;
    margin: 0;
}

/* Spaltenköpfe wie über einer Kurstabelle in der Zeitung: klein, gesperrt, Mono. */
.watchlist-head[b-wausq5zc34] {
    color: var(--text-quiet);
    display: grid;
    font-family: var(--font-mono);
    font-size: .64rem;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr) 8rem 5rem;
    letter-spacing: .1em;
    padding: .7rem 1.25rem .45rem .9rem;
    text-transform: uppercase;
}

.watchlist-head.has-actions[b-wausq5zc34] {
    padding-right: 2.95rem;
}

.watchlist-head span:nth-child(2)[b-wausq5zc34],
.watchlist-head span:nth-child(3)[b-wausq5zc34] {
    text-align: right;
}

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

.watchlist li[b-wausq5zc34] {
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    min-height: 3.6rem;
    padding-right: .35rem;
}

.watchlist a[b-wausq5zc34] {
    align-items: center;
    color: inherit;
    display: grid;
    flex: 1;
    gap: .7rem 1rem;
    grid-template-columns: 1.7rem 3.6rem minmax(0, 1fr) 8rem 5rem;
    min-width: 0;
    padding: .85rem .9rem;
    text-decoration: none;
    transition: background-color .18s ease;
}

.watchlist a:hover[b-wausq5zc34] {
    background: var(--surface-hover);
    border-radius: var(--radius-sm);
}

.watchlist a:hover .wl-logo[b-wausq5zc34],
.watchlist a:hover .wl-logo-fallback[b-wausq5zc34] {
    transform: scale(1.08);
}

.wl-logo[b-wausq5zc34],
.wl-logo-fallback[b-wausq5zc34] {
    transition: transform .18s var(--ease-spring);
}

.watchlist a:hover .wl-symbol[b-wausq5zc34] {
    color: var(--accent);
}

.wl-logo[b-wausq5zc34],
.wl-logo-fallback[b-wausq5zc34] {
    border-radius: 50%;
    flex: 0 0 auto;
    height: 1.7rem;
    object-fit: cover;
    width: 1.7rem;
}

.wl-logo[b-wausq5zc34] {
    filter: grayscale(.2);
}

.wl-logo-fallback[b-wausq5zc34] {
    align-items: center;
    background: var(--text-primary);
    color: var(--app-background);
    display: none;
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    justify-content: center;
}

.wl-remove[b-wausq5zc34] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: .75rem;
    padding: .45rem;
}

.wl-remove:hover[b-wausq5zc34] {
    background: var(--surface-hover);
    color: var(--negative);
}

.wl-symbol[b-wausq5zc34] {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: .84rem;
    font-weight: 600;
    transition: color .18s ease;
}

.wl-name[b-wausq5zc34] {
    color: var(--text-secondary);
    font-size: .9rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-name small[b-wausq5zc34] {
    color: var(--text-quiet);
    font-size: .76rem;
    margin-left: .5rem;
}

.wl-price[b-wausq5zc34] {
    color: var(--text-primary);
    font-size: .95rem;
    font-weight: 500;
    justify-self: end;
}

.wl-change[b-wausq5zc34] {
    font-size: .88rem;
    font-weight: 600;
    justify-self: end;
}

.wl-unavailable[b-wausq5zc34] {
    color: var(--text-quiet);
    font-family: var(--font-body);
    font-size: .78rem;
}

/* Laden: Zeilen in der Form der echten Zeilen, kein Kreisel. */
.wl-skeleton[b-wausq5zc34] {
    background: linear-gradient(90deg, var(--surface-inset) 0 30%, var(--surface-hover) 50%, var(--surface-inset) 70% 100%);
    background-size: 300% 100%;
    display: block;
    height: .8rem;
    margin: 0 .9rem;
    width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .wl-skeleton[b-wausq5zc34] {
        animation: shimmer-b-wausq5zc34 1.4s linear infinite;
    }

    @keyframes shimmer-b-wausq5zc34 {
        from { background-position: 100% 0; }
        to { background-position: 0 0; }
    }
}

.widget-empty-state[b-wausq5zc34] {
    padding: 1.4rem .9rem;
}

.widget-empty-state p[b-wausq5zc34] {
    color: var(--text-secondary);
    font-size: .92rem;
    margin: 0;
}

.widget-empty-state strong[b-wausq5zc34] {
    color: var(--text-primary);
}

.widget-footnote[b-wausq5zc34] {
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.6;
    margin: .9rem 0 0;
}

.widget-note[b-wausq5zc34] {
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    grid-area: note;
    padding: 1.6rem;
}

.widget-note h2[b-wausq5zc34] {
    font-size: 1.35rem;
    margin: 0 0 .7rem;
}

.note-cta[b-wausq5zc34] {
    margin-top: 1.2rem;
    padding: .75rem 1.1rem;
}

/* In Vorbereitung: ein Inhaltsverzeichnis statt Platzhalter-Kacheln. Zwei Spalten, jede
   Zeile ein Titel und woran er hängt. */
.planned[b-wausq5zc34] {
    border-top: 1px solid var(--border-subtle);
    display: grid;
    gap: 1.5rem 3rem;
    grid-area: planned;
    grid-template-columns: minmax(14rem, .7fr) minmax(0, 2fr);
    padding-top: 1.6rem;
}

.planned-head h2[b-wausq5zc34] {
    font-size: 1.6rem;
    margin: 0 0 .6rem;
}

.planned-head p[b-wausq5zc34] {
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.6;
    margin: 0;
}

.planned-list[b-wausq5zc34] {
    counter-reset: planned;
    display: grid;
    gap: 0 2.4rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.planned-list li[b-wausq5zc34] {
    border-bottom: 1px solid var(--border-subtle);
    counter-increment: planned;
    display: grid;
    gap: 0 .9rem;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    padding: .85rem 0;
}

.planned-list li[b-wausq5zc34]::before {
    color: var(--accent);
    content: counter(planned, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: .74rem;
    grid-row: span 2;
    padding-top: .2rem;
}

.planned-list h3[b-wausq5zc34] {
    font-size: 1rem;
    margin: 0 0 .2rem;
}

.planned-list p[b-wausq5zc34] {
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 1000px) {
    .dashboard[b-wausq5zc34] {
        grid-template-areas:
            "masthead"
            "watch"
            "note"
            "news"
            "movers"
            "setups"
            "planned";
        grid-template-columns: minmax(0, 1fr);
    }

    .planned[b-wausq5zc34] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .watchlist-head[b-wausq5zc34] {
        display: none;
    }

    .watchlist a[b-wausq5zc34] {
        grid-template-columns: 1.5rem minmax(0, 1fr) auto;
        row-gap: .2rem;
    }

    .wl-name[b-wausq5zc34] {
        display: none;
    }

    .wl-price[b-wausq5zc34] {
        grid-column: 3;
    }

    .wl-change[b-wausq5zc34] {
        grid-column: 3;
    }

    .planned-list[b-wausq5zc34] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Nachrichten und Tagesbewegung: dieselbe Papierfläche wie die Watchlist, nur Text. */
.widget-news[b-wausq5zc34] { grid-area: news; min-width: 0; }
.widget-movers[b-wausq5zc34] { grid-area: movers; min-width: 0; }

.news-list[b-wausq5zc34],
.mover-list[b-wausq5zc34] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-list li + li[b-wausq5zc34],
.mover-list li + li[b-wausq5zc34] {
    border-top: 1px solid var(--border-subtle);
}

.news-list a[b-wausq5zc34] {
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .75rem 0;
    text-decoration: none;
}

.news-list a:hover .news-title[b-wausq5zc34] {
    color: var(--accent);
}

.news-title[b-wausq5zc34] {
    color: var(--text-primary);
    font-size: .9rem;
    line-height: 1.45;
}

.news-meta[b-wausq5zc34] {
    color: var(--text-quiet);
    font-size: .74rem;
}

.mover-title[b-wausq5zc34] {
    color: var(--text-quiet);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .08em;
    margin: 1rem 0 .3rem;
    text-transform: uppercase;
}

.mover-title:first-of-type[b-wausq5zc34] {
    margin-top: 0;
}

.mover-list a[b-wausq5zc34] {
    align-items: baseline;
    color: inherit;
    display: grid;
    gap: .6rem;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    padding: .45rem 0;
    text-decoration: none;
}

.mover-list a:hover .wl-symbol[b-wausq5zc34] {
    color: var(--accent);
}

.mover-name[b-wausq5zc34] {
    color: var(--text-muted);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Erkannte Setups: eine Karte je Muster, getönt nach der Richtung, die das Muster selbst vorgibt. */
.widget-setups[b-wausq5zc34] { grid-area: setups; min-width: 0; }

.setup-list[b-wausq5zc34] {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.setup-card[b-wausq5zc34] {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--border-strong);
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    height: 100%;
    padding: .8rem .9rem;
    text-decoration: none;
}

.setup-card.up[b-wausq5zc34] { border-left-color: var(--positive); }
.setup-card.down[b-wausq5zc34] { border-left-color: var(--negative); }
.setup-card:hover[b-wausq5zc34] { border-color: var(--accent); }

.setup-head[b-wausq5zc34] {
    align-items: baseline;
    display: flex;
    gap: .6rem;
}

.setup-name[b-wausq5zc34] { color: var(--text-primary); font-size: .88rem; font-weight: 600; }
.setup-tf[b-wausq5zc34] { color: var(--text-quiet); font-size: .72rem; font-weight: 400; margin-left: .3rem; }
.setup-dir[b-wausq5zc34] { color: var(--text-primary); font-size: .8rem; }
.setup-status[b-wausq5zc34],
.setup-target[b-wausq5zc34],
.setup-invalid[b-wausq5zc34] { color: var(--text-muted); font-size: .76rem; line-height: 1.5; }
.setup-invalid[b-wausq5zc34] { color: var(--negative); }
/* /Pages/Landing.razor.rz.scp.css */
/* Der ASCII-Hero und alles darunter nutzt dieselben globalen Tokens wie der Rest der App
   (app.css: --paper/--ink schon fast Schwarz/Weiß, --accent jetzt Gold statt Rot) - keine
   eigene Palette mehr hier, damit Startseite und App optisch ein Stück sind. Herkunft der
   Hero-Struktur: Downloads/Tradability-ASCII-Hero/dist/index.html. */

.readout-inner[b-mq1o1sw1gu],
.factors-inner[b-mq1o1sw1gu],
.creed-inner[b-mq1o1sw1gu],
.tools-inner[b-mq1o1sw1gu],
.cta-inner[b-mq1o1sw1gu] {
    margin: 0 auto;
    max-width: 82rem;
    padding-inline: clamp(1.2rem, 4vw, 3.5rem);
    width: 100%;
}

/* ── Aufmacher: der ASCII-Hero ──────────────────────────────────────────────── */

.hero[b-mq1o1sw1gu] {
    overflow: clip;
    padding: clamp(1.6rem, 4vh, 2.6rem) clamp(1.2rem, 4vw, 3.5rem) clamp(2.8rem, 6vh, 4.5rem);
}

/* Szene und Textkarte liegen im selben Grid-Feld übereinander (grid-area:1/1 auf
   beiden Kindern) statt nebeneinander - exakt die Stapelung aus dem Referenz-main. */
.hero-stack[b-mq1o1sw1gu] {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0 auto;
    max-width: 82rem;
    position: relative;
    width: 100%;
}

.scene[b-mq1o1sw1gu] {
    grid-area: 1 / 1;
    isolation: isolate;
    margin: 24px 0;
    position: relative;
    width: 100%;
}

.scene-meta[b-mq1o1sw1gu] {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font: 12px var(--font-mono);
    height: 24px;
    justify-content: space-between;
    letter-spacing: .08em;
}

.scene-meta .location[b-mq1o1sw1gu] {
    color: var(--text-secondary);
}

.scene-meta .separator[b-mq1o1sw1gu] {
    color: var(--text-quiet);
    padding: 0 10px;
}

.art[b-mq1o1sw1gu] {
    height: clamp(590px, 72svh, 800px);
    position: relative;
    width: 100%;
}

/* Nicht mehr raumfüllend: das Canvas steht rechts bei 78% Breite, damit links Platz
   für die Textkarte bleibt, die als eigene Ebene darüber liegt (siehe .hero-stack). */
.art canvas[b-mq1o1sw1gu] {
    display: block;
    height: 100%;
    position: absolute;
    right: 0;
    width: 78%;
}

.art[b-mq1o1sw1gu]::after {
    box-shadow: inset 0 -18px 30px var(--app-background);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.corner[b-mq1o1sw1gu] {
    border-color: var(--border-strong);
    height: 13px;
    pointer-events: none;
    position: absolute;
    width: 13px;
}

.corner.tl[b-mq1o1sw1gu] { border-left: 1px solid; border-top: 1px solid; left: 0; top: 0; }
.corner.tr[b-mq1o1sw1gu] { border-right: 1px solid; border-top: 1px solid; right: 0; top: 0; }
.corner.bl[b-mq1o1sw1gu] { border-bottom: 1px solid; border-left: 1px solid; bottom: 0; left: 0; }
.corner.br[b-mq1o1sw1gu] { border-bottom: 1px solid; border-right: 1px solid; bottom: 0; right: 0; }

.no-js[b-mq1o1sw1gu] {
    align-items: center;
    color: var(--accent);
    display: flex;
    font: clamp(5px, 1vw, 12px)/1.2 var(--font-mono);
    inset: 20px;
    justify-content: center;
    overflow: hidden;
    position: absolute;
    text-align: center;
    white-space: pre;
}

.scene-footer[b-mq1o1sw1gu] {
    align-items: center;
    color: var(--text-muted);
    display: flex;
    font: 12px var(--font-mono);
    gap: 20px;
    height: 35px;
    justify-content: space-between;
    letter-spacing: .045em;
    margin-top: 6px;
}

.scene-index[b-mq1o1sw1gu] { color: var(--text-secondary); }
.flight-label[b-mq1o1sw1gu] { color: var(--accent); }

/* Die Textkarte, jetzt in beiden Themes: helles Glas im Hellen, dunkles Glas im Dunklen -
   Werte fest pro Theme (nicht über --paper/--ink), weil beides ein eigener Glas-Look ist,
   kein Umfärben derselben Fläche. Dunkel hat gegenüber dem Referenzprojekt etwas mehr
   "Liquid Glass": höhere Unschärfe/Sättigung, ein zweiter, weicherer Glanzlicht-Layer -
   bewusst moderat, nicht übertrieben. */
.intro[b-mq1o1sw1gu] {
    background: linear-gradient(138deg, #fcfcfbee 0%, #f4f4f2f5 45%, #e9e9e6f7 100%);
    border: 1px solid rgb(18 18 18 / 8%);
    border-radius: 28px;
    box-shadow: inset 0 1px 0 #ffffffcc, inset 0 -1px 0 rgb(18 18 18 / 5%), 0 28px 70px rgb(18 18 18 / 16%);
    grid-area: 1 / 1;
    isolation: isolate;
    justify-self: start;
    margin: 24px 0 24px 20px;
    padding: 32px 30px 28px;
    position: relative;
    text-align: left;
    transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
    width: min(520px, 48%);
    z-index: 2;
}

.intro[b-mq1o1sw1gu]::before {
    background: linear-gradient(130deg, #c99a4a52, #ffffff00 34%, #ffffff00 70%, #c99a4a3d);
    border-radius: inherit;
    content: "";
    inset: -1px;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.intro[b-mq1o1sw1gu]::after {
    background: radial-gradient(ellipse at 3% 0%, #ffffffb0, transparent 55%), linear-gradient(118deg, #ffffff70, transparent 46%);
    border-radius: inherit;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

@supports (backdrop-filter: blur(18px)) {
    .intro[b-mq1o1sw1gu] {
        background: linear-gradient(138deg, #fcfcfbcc 0%, #f4f4f2d6 45%, #e5e5e2d9 100%);
        backdrop-filter: blur(20px) saturate(1.15);
        -webkit-backdrop-filter: blur(20px) saturate(1.15);
    }
}

:root[data-theme="dark"] .intro[b-mq1o1sw1gu] {
    background: linear-gradient(138deg, #2e3231ea 0%, #14181af4 45%, #0c1010f7 100%);
    border-color: #ffffff1e;
    box-shadow: inset 0 1px 0 #ffffff1c, inset 0 -1px 0 #00000099, 0 30px 76px #00000066;
}

:root[data-theme="dark"] .intro[b-mq1o1sw1gu]::before {
    background: linear-gradient(130deg, #e3d1ac80, #ffffff0e 34%, #ffffff0a 70%, #d2bc9458);
}

:root[data-theme="dark"] .intro[b-mq1o1sw1gu]::after {
    background: radial-gradient(ellipse at 3% 0%, #ffffff14, transparent 58%), linear-gradient(118deg, #ffffff06, transparent 46%);
}

@supports (backdrop-filter: blur(18px)) {
    :root[data-theme="dark"] .intro[b-mq1o1sw1gu] {
        background: linear-gradient(138deg, #2b2f2ecc 0%, #121616d6 45%, #0a0e0ee2 100%);
        backdrop-filter: blur(24px) saturate(.82);
        -webkit-backdrop-filter: blur(24px) saturate(.82);
    }
}

.hero-eyebrow[b-mq1o1sw1gu] {
    align-items: center;
    color: #8a6a35;
    display: flex;
    font-family: var(--font-mono);
    font-size: .75rem;
    gap: .625rem;
    letter-spacing: .13em;
    margin: 0 0 1.75rem;
    transition: color .3s ease;
}

.hero-eyebrow[b-mq1o1sw1gu]::before {
    background: #8a6a35;
    box-shadow: 0 0 12px #8a6a3533;
    content: "";
    flex: none;
    height: 5px;
    transition: background-color .3s ease;
    width: 5px;
}

:root[data-theme="dark"] .hero-eyebrow[b-mq1o1sw1gu] {
    color: #d7bc91;
}

:root[data-theme="dark"] .hero-eyebrow[b-mq1o1sw1gu]::before {
    background: #d7bc91;
    box-shadow: 0 0 12px #d7bc9133;
}

.hero h1[b-mq1o1sw1gu] {
    color: #1d1b16;
    font-family: "Syne", var(--font-body);
    font-size: clamp(2rem, 3.7vw, 3.2rem);
    font-weight: 700;
    letter-spacing: -.065em;
    line-height: .99;
    margin: 0;
    transition: color .3s ease;
}

.hero h1 .headline-block[b-mq1o1sw1gu] {
    display: block;
}

:root[data-theme="dark"] .hero h1[b-mq1o1sw1gu] {
    color: #f3f3ed;
}

/* Serifen-Kursiv nur hier, als Zitat innerhalb der sonst durchgehenden Sans/Mono-Type. */
.hero h1 em[b-mq1o1sw1gu] {
    color: #8a6a35;
    display: block;
    font-family: "Instrument Serif", Georgia, "Times New Roman", serif;
    font-size: 1.37em;
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.04em;
    line-height: .98;
    margin-top: .56rem;
    transition: color .3s ease;
    white-space: nowrap;
}

:root[data-theme="dark"] .hero h1 em[b-mq1o1sw1gu] {
    color: #dec8a3;
}

.hero-lead[b-mq1o1sw1gu] {
    color: #55534b;
    font-size: .95rem;
    letter-spacing: -.015em;
    line-height: 1.65;
    margin: 1.25rem 0 0;
    max-width: 36ch;
    transition: color .3s ease;
}

:root[data-theme="dark"] .hero-lead[b-mq1o1sw1gu] {
    color: #b6bdb8;
}

.hero-actions[b-mq1o1sw1gu] {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

.hero-link[b-mq1o1sw1gu] {
    align-items: center;
    background: #1d1b16;
    border: 1px solid #1d1b16;
    border-radius: 3px;
    color: #f6f3ec;
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: .75rem;
    gap: .875rem;
    justify-content: center;
    letter-spacing: .025em;
    min-height: 2.875rem;
    padding: .8125rem 1.0625rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}

.hero-link:hover[b-mq1o1sw1gu] {
    background: #38352c;
    border-color: #38352c;
}

.hero-link.secondary[b-mq1o1sw1gu] {
    background: transparent;
    border-color: rgb(18 18 18 / 22%);
    color: #1d1b16;
}

.hero-link.secondary:hover[b-mq1o1sw1gu] {
    background: rgb(18 18 18 / 6%);
    border-color: rgb(18 18 18 / 40%);
}

.hero-link:focus-visible[b-mq1o1sw1gu] {
    outline: 2px solid #8a6a35;
    outline-offset: 5px;
}

:root[data-theme="dark"] .hero-link[b-mq1o1sw1gu] {
    background: #e9e8df;
    border-color: #efeee6;
    color: #111615;
}

:root[data-theme="dark"] .hero-link:hover[b-mq1o1sw1gu] {
    background: #fff9ec;
    border-color: #fff9ec;
}

:root[data-theme="dark"] .hero-link.secondary[b-mq1o1sw1gu] {
    background: #ffffff04;
    border-color: #ffffff2e;
    color: #d0d4ce;
}

:root[data-theme="dark"] .hero-link.secondary:hover[b-mq1o1sw1gu] {
    background: #ffffff0c;
    border-color: #ffffff60;
}

:root[data-theme="dark"] .hero-link:focus-visible[b-mq1o1sw1gu] {
    outline-color: #d7bc91;
}

@media (max-width: 1100px) and (min-width: 761px) {
    .intro[b-mq1o1sw1gu] {
        margin-left: 8px;
        padding: 28px 24px;
        width: 52%;
    }

    .hero-actions[b-mq1o1sw1gu] {
        gap: .5625rem;
    }

    .hero-link[b-mq1o1sw1gu] {
        padding: .75rem .8125rem;
    }
}

@media (max-width: 760px) {
    .hero-stack[b-mq1o1sw1gu] {
        align-items: stretch;
        display: flex;
        flex-direction: column;
    }

    .scene[b-mq1o1sw1gu] {
        margin: 28px 0 20px;
        order: 1;
    }

    .intro[b-mq1o1sw1gu] {
        border-radius: 24px;
        margin: 28px 0 0;
        padding: 26px;
        width: 100%;
    }

    .art[b-mq1o1sw1gu] {
        height: 350px;
    }

    .art canvas[b-mq1o1sw1gu] {
        width: 100%;
    }

    .scene-meta .secondary[b-mq1o1sw1gu] {
        display: none;
    }

    .flight-label[b-mq1o1sw1gu] {
        display: none;
    }

    .hero-eyebrow[b-mq1o1sw1gu] {
        margin-bottom: 1.5rem;
    }

    .hero-lead[b-mq1o1sw1gu] {
        max-width: 27ch;
    }
}

@media (max-width: 440px) {
    .intro[b-mq1o1sw1gu] {
        padding: 24px 21px;
    }

    .art[b-mq1o1sw1gu] {
        height: 300px;
    }

    .hero-eyebrow[b-mq1o1sw1gu] {
        font-size: .7rem;
        letter-spacing: .09em;
    }

    .hero-actions[b-mq1o1sw1gu] {
        flex-direction: column;
    }

    .hero-link[b-mq1o1sw1gu] {
        width: 100%;
    }
}

/* ── Ablesewert ───────────────────────────────────────────────────────────── */

.readout-band[b-mq1o1sw1gu] {
    border-block: 1px solid var(--border-strong);
}

.readout-inner[b-mq1o1sw1gu] {
    align-items: center;
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.gauge-cell[b-mq1o1sw1gu] {
    display: grid;
    place-items: center;
    position: relative;
}

.gauge[b-mq1o1sw1gu] {
    display: block;
    width: min(20rem, 68vw);
}

.gauge-track[b-mq1o1sw1gu] {
    fill: none;
    stroke: var(--border-subtle);
    stroke-width: 16;
}

.gauge-value[b-mq1o1sw1gu] {
    animation: gauge-sweep-b-mq1o1sw1gu 1.5s cubic-bezier(.22, .9, .25, 1) both;
    fill: none;
    stroke: var(--accent);
    stroke-width: 16;
}

@keyframes gauge-sweep-b-mq1o1sw1gu {
    from { stroke-dashoffset: 622.04; }
}

@media (prefers-reduced-motion: reduce) {
    .gauge-value[b-mq1o1sw1gu] {
        animation: none;
    }
}

.gauge-tick[b-mq1o1sw1gu] {
    stroke: var(--border-strong);
    stroke-width: 1;
}

.gauge-tick.major[b-mq1o1sw1gu] {
    stroke: var(--text-primary);
    stroke-width: 1.5;
}

.gauge-center[b-mq1o1sw1gu] {
    display: grid;
    gap: .35rem;
    justify-items: center;
    position: absolute;
    text-align: center;
    top: 46%;
    transform: translateY(-50%);
}

.gauge-score[b-mq1o1sw1gu] {
    color: var(--text-primary);
    display: block;
    font-family: var(--font-display);
    font-variant-numeric: lining-nums tabular-nums;
    font-size: clamp(3.4rem, 7vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
}

.gauge-caption[b-mq1o1sw1gu] {
    color: var(--text-muted);
    font-size: .8rem;
}

.gauge-fallback[b-mq1o1sw1gu] {
    color: var(--text-muted);
    font-size: .9rem;
    margin: 0;
    max-width: 22ch;
    text-align: center;
}

.readout-kicker[b-mq1o1sw1gu] {
    color: var(--accent);
    font-size: .84rem;
    font-weight: 600;
    margin: 0 0 .7rem;
}

.readout-claim[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2.7vw, 2.15rem);
    font-weight: 500;
    letter-spacing: -.018em;
    line-height: 1.2;
    margin: 0 0 2rem;
    max-width: 26ch;
}

.readout-stats[b-mq1o1sw1gu] {
    border-top: 1px solid var(--border-strong);
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 0;
    padding-top: 1.3rem;
}

.readout-stats dt[b-mq1o1sw1gu] {
    color: var(--text-muted);
    font-size: .8rem;
    margin-bottom: .35rem;
}

.readout-stats dd[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-size: 2.1rem;
    font-weight: 500;
    letter-spacing: -.03em;
    line-height: 1;
    margin: 0;
}

.readout-stats dd small[b-mq1o1sw1gu] {
    color: var(--text-quiet);
    font-size: .95rem;
    font-weight: 400;
    margin-left: .12rem;
}

/* Die dritte Zahl ist die Lücke. Sie steht im Gold-Akzent, weil sie kein Makel der
   Anzeige ist, sondern ihre wichtigste Angabe. */
.readout-stats .is-gap dd[b-mq1o1sw1gu] {
    color: var(--accent);
}

.readout-stamp[b-mq1o1sw1gu] {
    color: var(--text-muted);
    font-size: .8rem;
    margin: 1.4rem 0 0;
}

/* ── Eingangsgrößen ───────────────────────────────────────────────────────── */

.factors[b-mq1o1sw1gu] {
    padding: clamp(3.5rem, 8vw, 6rem) 0 0;
}

.factors-head[b-mq1o1sw1gu] {
    margin-bottom: 2rem;
    max-width: 50ch;
}

.factors-head h2[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-size: clamp(1.9rem, 3.6vw, 2.8rem);
    font-weight: 500;
    margin: 0 0 .7rem;
}

.factors-head p[b-mq1o1sw1gu] {
    color: var(--text-muted);
    font-size: .95rem;
    line-height: 1.7;
    margin: 0;
}

.factor-list[b-mq1o1sw1gu] {
    border-top: 1px solid var(--border-strong);
    list-style: none;
    margin: 0;
    padding: 0;
}

.factor[b-mq1o1sw1gu] {
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr) 3.5rem 3.5rem;
    padding: .95rem 0;
}

.factor-name[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-size: .98rem;
    font-weight: 500;
}

.factor-track[b-mq1o1sw1gu] {
    display: block;
    height: .6rem;
    position: relative;
}

.factor-fill[b-mq1o1sw1gu] {
    background: var(--accent);
    display: block;
    height: 100%;
    transition: width .8s var(--ease-out);
}

/* Der Balken zieht erst dann auf seine echte Breite, wenn die Zeile selbst ins Bild
   scrollt - dasselbe .reveal/.is-visible-Paar wie überall sonst, hier zusätzlich auf
   den Balken angewendet statt nur auf Deckkraft/Transform. */
@media (prefers-reduced-motion: no-preference) {
    html.reveal-armed .factor.reveal:not(.is-visible) .factor-fill[b-mq1o1sw1gu] {
        width: 0 !important;
    }
}

/* Eine fehlende Größe wird nicht ausgeblendet, sondern schraffiert gezeigt: die leere
   Rille ist die Aussage. */
.factor.is-missing .factor-track[b-mq1o1sw1gu] {
    background: repeating-linear-gradient(-45deg, var(--border-strong) 0 1px, transparent 1px 7px);
}

.factor.is-missing .factor-name[b-mq1o1sw1gu] {
    color: var(--text-muted);
}

.factor-read[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-size: 1.05rem;
    text-align: right;
}

.factor-gap[b-mq1o1sw1gu] {
    color: var(--accent);
    font-family: var(--font-body);
    font-size: .78rem;
    white-space: nowrap;
}

.factor-weight[b-mq1o1sw1gu] {
    color: var(--text-muted);
    font-size: .85rem;
    text-align: right;
}

/* ── Kursband ─────────────────────────────────────────────────────────────── */

.marquee[b-mq1o1sw1gu] {
    border-block: 1px solid var(--border-strong);
    margin-top: clamp(3.5rem, 8vw, 6rem);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    overflow: hidden;
    padding: 1rem 0;
}

.marquee-rail[b-mq1o1sw1gu] {
    animation: marquee-b-mq1o1sw1gu 38s linear infinite;
    display: flex;
    width: max-content;
}

@keyframes marquee-b-mq1o1sw1gu {
    to { transform: translateX(-50%); }
}

.marquee-run[b-mq1o1sw1gu] {
    display: flex;
    gap: 3.5rem;
    padding-right: 3.5rem;
}

.tick[b-mq1o1sw1gu] {
    align-items: baseline;
    display: flex;
    gap: .8rem;
    white-space: nowrap;
}

.tick-symbol[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
}

.tick-price[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-size: 1.05rem;
}

.tick-change[b-mq1o1sw1gu] {
    font-size: .95rem;
}

.tick-change.positive[b-mq1o1sw1gu] {
    color: var(--text-primary) !important;
}

.tick-change.negative[b-mq1o1sw1gu] {
    color: var(--negative) !important;
}

.tick-missing[b-mq1o1sw1gu] {
    color: var(--text-quiet);
    font-family: var(--font-body);
    font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
    .marquee-rail[b-mq1o1sw1gu] {
        animation: none;
    }
}

/* ── Drei Absagen ─────────────────────────────────────────────────────────── */

.creed[b-mq1o1sw1gu] {
    padding: clamp(4rem, 9vw, 7rem) 0 0;
}

.creed-inner[b-mq1o1sw1gu] {
    display: grid;
    gap: 2rem clamp(2rem, 5vw, 5rem);
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
}

.creed-head[b-mq1o1sw1gu] {
    position: relative;
}

.creed h2[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-size: clamp(2rem, 4.2vw, 3.2rem);
    font-weight: 500;
    line-height: 1.08;
    margin: 0;
    max-width: 12ch;
}

.creed h2 em[b-mq1o1sw1gu] {
    color: var(--accent-bright);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
}

.creed-list[b-mq1o1sw1gu] {
    counter-reset: creed;
    list-style: none;
    margin: 0;
    padding: 0;
}

.creed-list li[b-mq1o1sw1gu] {
    border-top: 1px solid var(--border-strong);
    counter-increment: creed;
    display: grid;
    gap: 0 1.6rem;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    padding: 1.3rem 0 1.6rem;
}

.creed-list li[b-mq1o1sw1gu]::before {
    color: var(--accent);
    content: counter(creed, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 600;
    grid-row: span 2;
    line-height: 1;
}

.creed-list h3[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-size: 1.45rem;
    font-weight: 500;
    margin: 0 0 .5rem;
}

.creed-list p[b-mq1o1sw1gu] {
    color: var(--text-secondary);
    font-size: .96rem;
    line-height: 1.7;
    margin: 0;
    max-width: 56ch;
}

/* ── Werkzeuge ────────────────────────────────────────────────────────────── */

.tools[b-mq1o1sw1gu] {
    padding: clamp(4rem, 9vw, 7rem) 0 0;
}

.tools h2[b-mq1o1sw1gu] {
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-size: clamp(2.2rem, 4.6vw, 3.6rem);
    font-weight: 500;
    margin: 0 0 2rem;
    padding-bottom: .8rem;
}

/* Ein großes Werkzeug links (Asset-Analyse, der Kern), zwei kleinere rechts gestapelt. */
.tool-grid[b-mq1o1sw1gu] {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
}

.tool[b-mq1o1sw1gu] {
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    display: grid;
    gap: 1.2rem;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    overflow: hidden;
    padding: 1.6rem;
    position: relative;
    transition: background-color .2s ease;
}

.tool:hover[b-mq1o1sw1gu] {
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-raised));
}

.tool-lead[b-mq1o1sw1gu] {
    align-content: center;
    grid-row: span 2;
}

.tool-idx[b-mq1o1sw1gu] {
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
}

.tool h3[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 .6rem;
}

.tool-lead h3[b-mq1o1sw1gu] {
    font-size: 2rem;
}

.tool p[b-mq1o1sw1gu] {
    color: var(--text-secondary);
    font-size: .93rem;
    line-height: 1.65;
    margin: 0 0 1rem;
}

.tool-link[b-mq1o1sw1gu] {
    border-bottom: 1px solid var(--accent);
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 600;
    padding-bottom: .1rem;
    text-decoration: none;
}

.tool-link[b-mq1o1sw1gu]::after {
    content: " →";
}

/* ── Abschluss ────────────────────────────────────────────────────────────── */

.cta[b-mq1o1sw1gu] {
    padding: clamp(4.5rem, 10vw, 8rem) 0 0;
}

.cta-inner[b-mq1o1sw1gu] {
    text-align: center;
}

.cta h2[b-mq1o1sw1gu] {
    color: var(--text-primary);
    font-size: clamp(2.4rem, 5.4vw, 4.2rem);
    font-weight: 500;
    line-height: 1.02;
    margin: 0 auto 1rem;
    max-width: 15ch;
}

.cta p[b-mq1o1sw1gu] {
    color: var(--text-secondary);
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 auto 2rem;
    max-width: 44ch;
}

.cta-actions[b-mq1o1sw1gu] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.4rem;
    justify-content: center;
}

.cta-actions .btn[b-mq1o1sw1gu] {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.cta-actions .btn:hover[b-mq1o1sw1gu] {
    background: var(--text-primary);
    color: var(--app-background);
}

.cta-actions .btn-primary[b-mq1o1sw1gu] {
    background: var(--text-primary);
    color: var(--app-background);
}

.cta-actions .btn-primary:hover[b-mq1o1sw1gu] {
    background: transparent;
    color: var(--text-primary);
}

@media (max-width: 960px) {
    .creed-inner[b-mq1o1sw1gu] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 860px) {
    .readout-inner[b-mq1o1sw1gu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tool-grid[b-mq1o1sw1gu] {
        grid-template-columns: minmax(0, 1fr);
    }

    .tool-lead[b-mq1o1sw1gu] {
        grid-row: auto;
    }

    .factor[b-mq1o1sw1gu] {
        gap: .5rem 1rem;
        grid-template-columns: minmax(0, 1fr) 3.2rem 3.2rem;
    }

    .factor-track[b-mq1o1sw1gu] {
        grid-column: 1 / -1;
        order: 3;
    }
}

@media (max-width: 520px) {
    .tool[b-mq1o1sw1gu] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Pages/Lernen.razor.rz.scp.css */
.concept-page[b-morv29nfkf] {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    max-width: 60rem;
}

.concept-page-intro h1[b-morv29nfkf] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .6rem;
}

.concept-page-intro p:not(.eyebrow)[b-morv29nfkf] {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
}

.loop[b-morv29nfkf] {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1.4rem;
}

.loop h2[b-morv29nfkf] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

.loop-steps[b-morv29nfkf] {
    color: var(--text-muted);
    display: grid;
    font-size: .82rem;
    gap: .6rem;
    line-height: 1.6;
    margin: 0;
    padding-left: 1.3rem;
}

.loop-steps li[b-morv29nfkf]::marker {
    color: var(--text-quiet);
    font-family: var(--font-mono);
}

.concept-grid[b-morv29nfkf] {
    border-top: 1px solid var(--border-subtle);
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    padding-top: 1.4rem;
}
/* /Pages/NotFound.razor.rz.scp.css */
.not-found[b-47tyz05dg8] {
    margin: 0 auto;
    max-width: 30rem;
    padding: clamp(3rem, 12vh, 6rem) 1.4rem 3rem;
    text-align: center;
}

.not-found-code[b-47tyz05dg8] {
    border: 1px solid var(--border-strong);
    color: var(--text-quiet);
    font-family: var(--font-mono);
    font-size: clamp(3.6rem, 14vw, 5.6rem);
    font-weight: 700;
    line-height: 1;
    margin: 0 auto 1.8rem;
    padding: 1.4rem 0;
    width: min(16rem, 70%);
}

.not-found .eyebrow[b-47tyz05dg8] {
    justify-content: center;
}

.not-found h1[b-47tyz05dg8] {
    font-size: clamp(1.7rem, 3.4vw, 2.3rem);
    margin: .6rem 0 1.1rem;
}

.not-found-lead[b-47tyz05dg8] {
    color: var(--text-secondary);
    font-size: .95rem;
    line-height: 1.65;
}

.not-found-lead a[b-47tyz05dg8] {
    color: var(--accent);
}
/* /Pages/OneVsOne.razor.rz.scp.css */
.concept-page[b-4uksa1b6o9] {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    max-width: 64rem;
}

.concept-page-intro h1[b-4uksa1b6o9] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .6rem;
}

.concept-page-intro p:not(.eyebrow)[b-4uksa1b6o9] {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
}

.mode-grid[b-4uksa1b6o9] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}

.mode-card[b-4uksa1b6o9] {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1rem;
}

.mode-head[b-4uksa1b6o9] {
    align-items: baseline;
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.mode-head h2[b-4uksa1b6o9] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin: 0;
}

.mode-card p[b-4uksa1b6o9] {
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.6;
    margin: 0;
}

/* --- duel hub: rating, quick actions, pending invites --------------------------- */

.duel-hub[b-4uksa1b6o9] {
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding-top: 1.4rem;
}

.duel-rating[b-4uksa1b6o9] {
    color: var(--text-primary);
    font-size: .88rem;
    margin: 0;
}

.duel-rating-record[b-4uksa1b6o9] {
    color: var(--text-quiet);
    font-size: .78rem;
}

.duel-quick-actions[b-4uksa1b6o9] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.duel-queue-btn[b-4uksa1b6o9] {
    background: var(--surface-raised);
    border: 1px solid var(--accent);
    color: var(--accent);
}

.duel-queue-btn:hover[b-4uksa1b6o9] {
    background: var(--accent);
    color: var(--app-background);
}

.duel-invites[b-4uksa1b6o9] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.duel-invite-row[b-4uksa1b6o9] {
    align-items: center;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    display: flex;
    gap: .6rem;
    padding: .5rem .7rem;
}

.duel-invite-row span:nth-child(2)[b-4uksa1b6o9] {
    color: var(--text-muted);
    flex: 1;
    font-size: .8rem;
}

.duel-invite-row button[b-4uksa1b6o9] {
    background: var(--accent);
    border: 0;
    color: var(--app-background);
    cursor: pointer;
    flex-shrink: 0;
    font-size: .76rem;
    font-weight: 600;
    padding: .4rem .8rem;
}

.duel-invite-row button:hover[b-4uksa1b6o9] {
    background: var(--accent-bright);
}

.duel-invite-row .invite-decline[b-4uksa1b6o9] {
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
}

.duel-invite-row .invite-decline:hover[b-4uksa1b6o9] {
    background: none;
    border-color: var(--negative);
    color: var(--negative);
}

.duel-public-link[b-4uksa1b6o9],
.duel-friend-result[b-4uksa1b6o9] {
    align-items: center;
}

.duel-public-link .duel-sub[b-4uksa1b6o9] {
    color: var(--text-muted);
    font-size: .74rem;
}

/* --- the real Replay-Duell flow ------------------------------------------------ */

.duel-start[b-4uksa1b6o9] {
    background: var(--accent);
    border: 0;
    color: var(--app-background);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    margin-top: .8rem;
    padding: .5rem 1rem;
}

.duel-start:hover[b-4uksa1b6o9] {
    background: var(--accent-bright);
}

.duel-panel[b-4uksa1b6o9] {
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding-top: 1.4rem;
}

.section-label[b-4uksa1b6o9] {
    color: var(--text-quiet);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    margin: 0;
}

.duel-search[b-4uksa1b6o9] {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    font: inherit;
    font-size: .85rem;
    padding: .4rem .1rem;
    width: 100%;
    max-width: 24rem;
}

.duel-search:focus[b-4uksa1b6o9] {
    border-bottom-color: var(--accent);
    outline: none;
}

.duel-results[b-4uksa1b6o9] {
    display: grid;
    gap: .4rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.duel-result[b-4uksa1b6o9] {
    align-items: baseline;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: .5rem;
    padding: .55rem .7rem;
    text-align: left;
}

.duel-result:hover[b-4uksa1b6o9] {
    border-color: var(--accent);
}

.duel-result span:last-child[b-4uksa1b6o9] {
    color: var(--text-muted);
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-error[b-4uksa1b6o9] {
    color: var(--negative);
    font-size: .78rem;
}

.link-button[b-4uksa1b6o9] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .74rem;
    text-decoration: underline;
}

.link-button:hover[b-4uksa1b6o9] {
    color: var(--negative);
}

.duel-invite[b-4uksa1b6o9] {
    align-items: center;
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    display: flex;
    gap: .6rem;
    padding: .6rem .8rem;
}

.duel-invite-link[b-4uksa1b6o9] {
    color: var(--text-primary);
    flex: 1;
    font-size: .78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duel-invite button[b-4uksa1b6o9] {
    background: var(--accent);
    border: 0;
    color: var(--app-background);
    cursor: pointer;
    flex-shrink: 0;
    font-size: .76rem;
    font-weight: 600;
    padding: .4rem .8rem;
}

.duel-invite button:hover[b-4uksa1b6o9] {
    background: var(--accent-bright);
}

.duel-progress[b-4uksa1b6o9] {
    color: var(--text-quiet);
    display: flex;
    font-size: .78rem;
    gap: .8rem;
    justify-content: space-between;
}

.duel-chart-host[b-4uksa1b6o9] {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    width: 100%;
}

.duel-sides[b-4uksa1b6o9] {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.duel-side[b-4uksa1b6o9] {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: .2rem;
    padding: .8rem 1rem;
}

.duel-side h3[b-4uksa1b6o9] {
    color: var(--text-quiet);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .08em;
    margin: 0;
    text-transform: uppercase;
}

.duel-total[b-4uksa1b6o9] {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 600;
}

.duel-sub[b-4uksa1b6o9] {
    color: var(--text-muted);
    font-size: .76rem;
}

.duel-controls[b-4uksa1b6o9] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.duel-controls button[b-4uksa1b6o9] {
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: .8rem;
    padding: .5rem .9rem;
}

.duel-controls button:disabled[b-4uksa1b6o9] {
    cursor: not-allowed;
    opacity: .45;
}

.duel-controls button:not(:disabled):hover[b-4uksa1b6o9] {
    border-color: var(--accent);
}

.duel-controls .duel-next[b-4uksa1b6o9] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--app-background);
    font-weight: 600;
    margin-left: auto;
}

.duel-controls .duel-next:hover[b-4uksa1b6o9] {
    background: var(--accent-bright);
}

.duel-note[b-4uksa1b6o9] {
    color: var(--text-quiet);
    font-size: .72rem;
    line-height: 1.6;
    margin: 0;
}

/* --- the result screen: its own layer above the page, not an inline section ---- */

.duel-result-overlay[b-4uksa1b6o9] {
    align-items: center;
    animation: duel-overlay-in-b-4uksa1b6o9 220ms var(--motion-settle);
    background: color-mix(in srgb, var(--app-background) 78%, transparent);
    backdrop-filter: blur(6px);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 1.2rem;
    position: fixed;
    z-index: 60;
}

@keyframes duel-overlay-in-b-4uksa1b6o9 { from { opacity: 0; } to { opacity: 1; } }

.duel-result-card[b-4uksa1b6o9] {
    animation: duel-card-in-b-4uksa1b6o9 420ms var(--motion-spring);
    background: var(--surface-raised);
    border: 1px solid var(--border-strong);
    box-shadow: 0 24px 64px color-mix(in srgb, black 45%, transparent);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 30rem;
    padding: 1.8rem 1.6rem;
    position: relative;
    width: 100%;
}

@keyframes duel-card-in-b-4uksa1b6o9 {
    from { opacity: 0; scale: .92; translate: 0 12px; }
    to { opacity: 1; scale: 1; translate: 0 0; }
}

.duel-result-card h2[b-4uksa1b6o9] {
    font-size: 1.3rem;
    margin: 0;
}

.duel-result-card.win h2[b-4uksa1b6o9] { color: var(--positive); }
.duel-result-card.lose h2[b-4uksa1b6o9] { color: var(--negative); }
.duel-result-card.tie h2[b-4uksa1b6o9] { color: var(--text-muted); }

.duel-result-close[b-4uksa1b6o9] {
    background: none;
    border: 0;
    color: var(--text-quiet);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    padding: .2rem;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.duel-result-close:hover[b-4uksa1b6o9] {
    color: var(--text-primary);
}

.duel-rating-delta[b-4uksa1b6o9] {
    font-size: .78rem;
    font-weight: 600;
}

.duel-rating-delta.up[b-4uksa1b6o9] { color: var(--positive); }
.duel-rating-delta.down[b-4uksa1b6o9] { color: var(--negative); }

/* --- Bestenliste und letzte Duelle ---------------------------------------------- */

.duel-history[b-4uksa1b6o9],
.duel-leaderboard[b-4uksa1b6o9],
.duel-prizes[b-4uksa1b6o9] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.duel-history ul[b-4uksa1b6o9],
.duel-leaderboard ol[b-4uksa1b6o9],
.prize-card ol[b-4uksa1b6o9],
.prize-winners[b-4uksa1b6o9] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.history-row[b-4uksa1b6o9],
.board-row[b-4uksa1b6o9] {
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    display: grid;
    gap: .7rem;
    padding: .55rem 0;
}

.history-row[b-4uksa1b6o9] {
    grid-template-columns: 6.2rem minmax(0, 1fr) auto;
}

.history-result[b-4uksa1b6o9] {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.history-row.win .history-result[b-4uksa1b6o9] { color: var(--positive); }
.history-row.loss .history-result[b-4uksa1b6o9] { color: var(--negative); }
.history-row.draw .history-result[b-4uksa1b6o9] { color: var(--text-muted); }

.history-main[b-4uksa1b6o9] {
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    font-size: .84rem;
    min-width: 0;
}

.history-main small[b-4uksa1b6o9] {
    color: var(--text-quiet);
    font-size: .72rem;
}

.history-rating[b-4uksa1b6o9] {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 600;
}

.history-rating.up[b-4uksa1b6o9] { color: var(--positive); }
.history-rating.down[b-4uksa1b6o9] { color: var(--negative); }

.board-row[b-4uksa1b6o9] {
    grid-template-columns: 2rem 26px minmax(0, 1fr) auto auto;
}

.board-row.you[b-4uksa1b6o9] {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
    padding-left: .5rem;
}

.board-rank[b-4uksa1b6o9] {
    color: var(--text-quiet);
    font-size: .78rem;
}

.board-anon[b-4uksa1b6o9] {
    background: var(--surface-inset);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    height: 26px;
    width: 26px;
}

.board-name[b-4uksa1b6o9] {
    color: var(--text-primary);
    font-size: .84rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.board-record[b-4uksa1b6o9] {
    color: var(--text-quiet);
    font-size: .72rem;
}

.board-rating[b-4uksa1b6o9] {
    color: var(--accent);
    font-size: .92rem;
    font-weight: 700;
    min-width: 3rem;
    text-align: right;
}

@media (max-width: 520px) {
    .board-record[b-4uksa1b6o9] { display: none; }
    .board-row[b-4uksa1b6o9] { grid-template-columns: 2rem 26px minmax(0, 1fr) auto; }
    .history-row[b-4uksa1b6o9] { grid-template-columns: minmax(0, 1fr) auto; }
    .history-result[b-4uksa1b6o9] { grid-column: 1 / -1; }
}

/* --- Wochen- und Monatspreise ---------------------------------------------------- */

.prize-grid[b-4uksa1b6o9] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.prize-card[b-4uksa1b6o9] {
    border: 1px solid var(--border-strong, var(--border-subtle));
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .9rem 1rem;
}

.prize-card header[b-4uksa1b6o9] {
    align-items: baseline;
    display: flex;
    justify-content: space-between;
}

.prize-kind[b-4uksa1b6o9] {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.prize-amount[b-4uksa1b6o9] {
    color: var(--accent);
    font-size: 1.15rem;
    font-weight: 700;
}

.prize-period[b-4uksa1b6o9] {
    color: var(--text-quiet);
    font-size: .74rem;
    margin: 0 0 .25rem;
}

.prize-row[b-4uksa1b6o9] {
    grid-template-columns: 1.6rem 26px minmax(0, 1fr) auto auto;
}

.prize-winners li[b-4uksa1b6o9] {
    align-items: baseline;
    border-bottom: 1px solid var(--border-subtle);
    display: grid;
    font-size: .82rem;
    gap: .7rem;
    grid-template-columns: 8.5rem minmax(0, 1fr) auto;
    padding: .45rem 0;
}

.prize-winners li.you[b-4uksa1b6o9] {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    box-shadow: inset 3px 0 0 var(--accent);
    padding-left: .5rem;
}

.prize-won[b-4uksa1b6o9] {
    background: color-mix(in srgb, var(--positive) 12%, transparent);
    border: 1px solid var(--positive);
    font-size: .86rem;
    font-weight: 600;
    margin: 0;
    padding: .6rem .8rem;
}

@media (max-width: 520px) {
    .prize-winners li[b-4uksa1b6o9] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .prize-winners li .prize-kind[b-4uksa1b6o9] {
        grid-column: 1 / -1;
    }
}

/* --- Revanche auf dem Ergebnis-Bildschirm --------------------------------------- */

.rematch-offer[b-4uksa1b6o9] {
    color: var(--accent);
    font-weight: 600;
}

.rematch-error[b-4uksa1b6o9] {
    color: var(--negative);
}

/* --- Teilorders --------------------------------------------------------------------- */

.duel-holdings[b-4uksa1b6o9] {
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    font-size: .8rem;
    gap: .4rem 1.4rem;
}

.duel-holdings strong[b-4uksa1b6o9] {
    color: var(--text-primary);
}

.duel-order[b-4uksa1b6o9] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.order-row[b-4uksa1b6o9] {
    align-items: center;
    display: grid;
    gap: .5rem;
    grid-template-columns: 5.6rem repeat(4, minmax(0, 1fr));
}

.order-row.custom[b-4uksa1b6o9] {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.order-row.custom label[b-4uksa1b6o9] {
    align-items: center;
    display: grid;
    gap: .5rem;
    grid-template-columns: 5.6rem minmax(0, 1fr);
}

.order-label[b-4uksa1b6o9] {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.order-row button[b-4uksa1b6o9] {
    background: none;
    border: 1px solid var(--border-strong, var(--border-subtle));
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    padding: .5rem .3rem;
}

.order-row.buy button:not(:disabled):hover[b-4uksa1b6o9] { border-color: var(--positive); color: var(--positive); }
.order-row.sell button:not(:disabled):hover[b-4uksa1b6o9] { border-color: var(--negative); color: var(--negative); }
.order-row button:disabled[b-4uksa1b6o9] { cursor: not-allowed; opacity: .4; }

.order-row.custom input[b-4uksa1b6o9] {
    background: var(--surface-inset, transparent);
    border: 1px solid var(--border-strong, var(--border-subtle));
    color: var(--text-primary);
    font: inherit;
    min-width: 0;
    padding: .5rem .6rem;
    width: 100%;
}

@media (max-width: 520px) {
    .order-row[b-4uksa1b6o9],
    .order-row.custom[b-4uksa1b6o9] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .order-row .order-label[b-4uksa1b6o9],
    .order-row.custom label[b-4uksa1b6o9] {
        grid-column: 1 / -1;
    }

    .order-row.custom label[b-4uksa1b6o9] {
        grid-template-columns: 1fr;
    }

    .order-row.custom button[b-4uksa1b6o9] {
        grid-column: span 2;
    }
}

/* --- Kerzenlänge wählen ------------------------------------------------------------- */

.duel-timeframes[b-4uksa1b6o9] {
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0;
    padding: 0;
}

.duel-timeframes legend[b-4uksa1b6o9] {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin-bottom: .4rem;
    padding: 0;
    text-transform: uppercase;
}

.duel-timeframes label[b-4uksa1b6o9] {
    border: 1px solid var(--border-strong, var(--border-subtle));
    cursor: pointer;
    font-size: .84rem;
    padding: .5rem .9rem;
}

.duel-timeframes label + label[b-4uksa1b6o9] {
    border-left: 0;
}

.duel-timeframes label.is-on[b-4uksa1b6o9] {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.duel-timeframes input[b-4uksa1b6o9] {
    opacity: 0;
    pointer-events: none;
    position: absolute;
}

.duel-timeframes label:focus-within[b-4uksa1b6o9] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* --- Bilanz und Freunde-Wertung ------------------------------------------------------- */

.duel-stats[b-4uksa1b6o9] {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.stat-grid[b-4uksa1b6o9] {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
}

.stat[b-4uksa1b6o9] {
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0 -1px -1px 0;
    padding: .7rem .8rem;
}

.stat-label[b-4uksa1b6o9] {
    color: var(--text-muted);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.stat strong[b-4uksa1b6o9] {
    color: var(--text-primary);
    font-size: 1.1rem;
}

.stat strong.up[b-4uksa1b6o9] { color: var(--positive); }
.stat strong.down[b-4uksa1b6o9] { color: var(--negative); }

.stat-groups[b-4uksa1b6o9] {
    display: grid;
    gap: 1.4rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.stat-groups table[b-4uksa1b6o9] {
    border-collapse: collapse;
    font-size: .8rem;
    width: 100%;
}

.stat-groups caption[b-4uksa1b6o9] {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding-bottom: .3rem;
    text-align: left;
    text-transform: uppercase;
}

.stat-groups th[b-4uksa1b6o9] {
    color: var(--text-quiet);
    font-size: .68rem;
    font-weight: 600;
    padding: .25rem .3rem;
    text-align: left;
}

.stat-groups td[b-4uksa1b6o9] {
    border-top: 1px solid var(--border-subtle);
    padding: .4rem .3rem;
}

.stat-groups .num[b-4uksa1b6o9] {
    text-align: right;
}

.board-head[b-4uksa1b6o9] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    justify-content: space-between;
}

.board-scope[b-4uksa1b6o9] {
    display: flex;
}

.board-scope button[b-4uksa1b6o9] {
    background: none;
    border: 1px solid var(--border-strong, var(--border-subtle));
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: .76rem;
    padding: .35rem .8rem;
}

.board-scope button + button[b-4uksa1b6o9] {
    border-left: 0;
}

.board-scope button.is-on[b-4uksa1b6o9] {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.board-row.provisional[b-4uksa1b6o9] {
    opacity: .6;
}

.duel-process[b-4uksa1b6o9] {
    border-top: 1px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: .8rem;
}

.duel-process h4[b-4uksa1b6o9] {
    font-size: .8rem;
    margin: 0;
}

.duel-process-hint[b-4uksa1b6o9] {
    color: var(--text-quiet);
    font-weight: 400;
}

.duel-process-rows[b-4uksa1b6o9] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.duel-process-row[b-4uksa1b6o9] {
    display: grid;
    font-size: .8rem;
    gap: .4rem .8rem;
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.duel-process-row > span:first-child[b-4uksa1b6o9] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.duel-process-opp[b-4uksa1b6o9] {
    color: var(--text-quiet);
}
/* /Pages/PlacementTest.razor.rz.scp.css */
.test-page[b-o4c9wzxcaw] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.test-loading[b-o4c9wzxcaw] {
    color: var(--text-muted);
    margin: auto;
}

.test-head[b-o4c9wzxcaw] {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 1rem clamp(1.4rem, 4vw, 3.5rem);
}

.test-head a[b-o4c9wzxcaw] {
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
    text-decoration: none;
}

.test-head a:hover[b-o4c9wzxcaw] {
    color: var(--text-primary);
}

.test-brand[b-o4c9wzxcaw] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-align: center;
}

.test-head-right[b-o4c9wzxcaw] {
    align-items: center;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.test-count[b-o4c9wzxcaw] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-align: right;
}

.test-skip[b-o4c9wzxcaw] {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0;
}

.question[b-o4c9wzxcaw] {
    flex: 1;
    margin: 0 auto;
    max-width: 44rem;
    padding: clamp(2.5rem, 8vh, 5.5rem) clamp(1.4rem, 4vw, 0) 2rem;
    width: 100%;
}

.question-category[b-o4c9wzxcaw] {
    color: var(--accent);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0;
    margin: 0 0 1.3rem;
}

.question h1[b-o4c9wzxcaw] {
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    line-height: 1.28;
    margin: 0 0 2.8rem;
}

.options[b-o4c9wzxcaw] {
    display: flex;
    flex-direction: column;
}

.options button[b-o4c9wzxcaw] {
    align-items: baseline;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 1rem;
    padding: 1.05rem 0;
    text-align: left;
    transition: color .3s ease;
}

.options button:hover[b-o4c9wzxcaw] {
    color: var(--text-primary);
}

.options button.selected[b-o4c9wzxcaw] {
    color: var(--text-primary);
}

.option-letter[b-o4c9wzxcaw] {
    color: var(--text-quiet);
    flex: 0 0 auto;
    font-family: var(--font-display);
    font-size: 1.15rem;
    width: 1.4rem;
}

.options button.selected .option-letter[b-o4c9wzxcaw] {
    color: var(--accent);
}

.option-text[b-o4c9wzxcaw] {
    display: flex;
    flex-direction: column;
    font-size: .95rem;
    font-weight: 400;
    gap: .15rem;
    line-height: 1.5;
}

.option-text strong[b-o4c9wzxcaw] {
    font-weight: 600;
}

.option-hint[b-o4c9wzxcaw] {
    color: var(--text-quiet);
    font-size: .8rem;
}

.options button:disabled[b-o4c9wzxcaw] {
    cursor: wait;
    opacity: .6;
}

.question-foot[b-o4c9wzxcaw] {
    align-items: center;
    color: var(--text-quiet);
    display: flex;
    font-size: 0.74rem;
    gap: 1.4rem;
    justify-content: space-between;
    margin-top: 1.8rem;
}

.link-button[b-o4c9wzxcaw] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .1em;
    padding: 0;
}

.link-button:hover[b-o4c9wzxcaw] {
    color: var(--text-primary);
}

.result[b-o4c9wzxcaw] {
    margin: auto;
    max-width: 34rem;
    padding: 2rem clamp(1.4rem, 4vw, 0);
    text-align: center;
}

.result h1[b-o4c9wzxcaw] {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin: .5rem 0 1.3rem;
}

.result-tally[b-o4c9wzxcaw] {
    color: var(--text-muted);
    font-size: .78rem;
}

.result-body[b-o4c9wzxcaw] {
    color: var(--text-secondary);
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 1rem 0 1.6rem;
}

.result-note[b-o4c9wzxcaw] {
    color: var(--text-muted);
    font-size: .78rem;
    margin-bottom: 2rem;
}

.result-note-error[b-o4c9wzxcaw] {
    color: var(--negative);
}

.result-note-error .link-button[b-o4c9wzxcaw] {
    color: inherit;
    text-decoration: underline;
}

.result .lede[b-o4c9wzxcaw] {
    color: var(--text-primary);
    display: inline-block;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
}

.result .lede span[b-o4c9wzxcaw] {
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}
/* /Pages/Premium.razor.rz.scp.css */
.concept-page[b-6i8ig6qaaa] {
    display: flex;
    flex-direction: column;
    /* Tighter than the shared 2.2rem default (scoped to this page only, via Blazor CSS
       isolation) - the chart is this page's actual content, not the intro text above it, so it
       should not need a long scroll to reach. */
    gap: 1.3rem;
    max-width: 80rem;
}

.concept-page-intro h1[b-6i8ig6qaaa] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .6rem;
}

.concept-page-intro p:not(.eyebrow)[b-6i8ig6qaaa] {
    max-width: 60rem;
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
}

.ew-panel[b-6i8ig6qaaa] {
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem 0;
}

.widget-head[b-6i8ig6qaaa] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    justify-content: space-between;
}

.widget-head h2[b-6i8ig6qaaa] {
    color: var(--text-primary);
    margin: 0;
}

.widget-meta[b-6i8ig6qaaa] {
    color: var(--text-quiet);
    font-size: .72rem;
}

.ew-form[b-6i8ig6qaaa] {
    align-items: center;
    display: flex;
    gap: .8rem;
}

.ew-form input[b-6i8ig6qaaa] {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    font: inherit;
    font-size: .85rem;
    padding: .4rem .1rem;
    width: 12rem;
}

.ew-form input:focus[b-6i8ig6qaaa] {
    border-bottom-color: var(--accent);
    outline: none;
}

.ew-form button[b-6i8ig6qaaa] {
    background: var(--accent);
    border: 0;
    color: var(--app-background);
    cursor: pointer;
    font-size: .8rem;
    font-weight: 600;
    padding: .5rem 1.1rem;
}

.ew-form button:hover:not(:disabled)[b-6i8ig6qaaa] {
    background: var(--accent-bright);
}

.ew-form button:disabled[b-6i8ig6qaaa] {
    cursor: not-allowed;
    opacity: .5;
}

.form-error[b-6i8ig6qaaa] {
    color: var(--negative);
    font-size: .78rem;
}

.page-state[b-6i8ig6qaaa] {
    color: var(--text-quiet);
    font-size: .8rem;
}

.ew-tabs[b-6i8ig6qaaa] {
    display: grid;
    gap: .5rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.ew-tabs button[b-6i8ig6qaaa] {
    align-items: baseline;
    background: var(--surface-raised);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    font: inherit;
    font-size: .8rem;
    gap: .15rem .6rem;
    grid-template-columns: auto 1fr;
    padding: .6rem .8rem;
    text-align: left;
}

.ew-tabs button:hover[b-6i8ig6qaaa] {
    border-color: var(--border-strong);
}

.ew-tabs button.active[b-6i8ig6qaaa] {
    border-color: var(--accent);
    color: var(--text-primary);
}

.ew-tabs button:focus-visible[b-6i8ig6qaaa],
.ew-segment button:focus-visible[b-6i8ig6qaaa] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ew-tab-rank[b-6i8ig6qaaa] {
    color: var(--text-quiet);
    font-variant-numeric: tabular-nums;
    grid-row: span 2;
}

.ew-fit[b-6i8ig6qaaa] {
    font-size: .72rem;
    font-weight: 600;
}

.ew-fit.positive[b-6i8ig6qaaa] { color: var(--positive); }
.ew-fit.neutral[b-6i8ig6qaaa] { color: var(--accent); }
.ew-fit.negative[b-6i8ig6qaaa] { color: var(--text-muted); }

.ew-toolbar[b-6i8ig6qaaa] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.2rem;
}

.ew-segment[b-6i8ig6qaaa] {
    border: 1px solid var(--border-strong);
    display: inline-flex;
}

.ew-segment button[b-6i8ig6qaaa] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    padding: .35rem .8rem;
}

.ew-segment button + button[b-6i8ig6qaaa] {
    border-left: 1px solid var(--border-strong);
}

.ew-segment button.active[b-6i8ig6qaaa] {
    background: var(--accent);
    color: var(--app-background);
    font-weight: 600;
}

.ew-check[b-6i8ig6qaaa] {
    align-items: center;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    font-size: .78rem;
    gap: .4rem;
}

.ew-check input[b-6i8ig6qaaa] {
    accent-color: var(--accent);
}

.ew-plain[b-6i8ig6qaaa] {
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    padding: .35rem .8rem;
}

.ew-plain:hover[b-6i8ig6qaaa] {
    border-color: var(--accent);
    color: var(--text-primary);
}

.ew-plain:focus-visible[b-6i8ig6qaaa] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ew-hint[b-6i8ig6qaaa] {
    color: var(--text-quiet);
    font-size: .72rem;
}

.ew-chart-host[b-6i8ig6qaaa] {
    background: var(--surface-raised);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--text-primary);
    /* Taller ceiling (was 40rem/62vh) - on an ordinary laptop viewport the old cap left the
       chart needing a scroll to see in full even though there was still headroom; "Vollbild"
       exists for a true full-screen view, this is about the default view actually using the
       screen it has. */
    height: clamp(26rem, 74vh, 52rem);
    width: 100%;
}

.ew-where h3[b-6i8ig6qaaa] {
    color: var(--text-primary);
    font-size: .9rem;
    margin: 0 0 .5rem;
}

.ew-where table[b-6i8ig6qaaa] {
    border-collapse: collapse;
    font-size: .8rem;
    width: 100%;
}

.ew-where th[b-6i8ig6qaaa] {
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-quiet);
    font-weight: 500;
    padding: .35rem .6rem .35rem 0;
    text-align: left;
}

.ew-where td[b-6i8ig6qaaa] {
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: .4rem .6rem .4rem 0;
}

.ew-where td.negative[b-6i8ig6qaaa] { color: var(--negative); }
.ew-where .muted[b-6i8ig6qaaa] { color: var(--text-quiet); }

.ew-wave-label[b-6i8ig6qaaa] {
    font-weight: 700;
}

.ew-wave-label.degree-0[b-6i8ig6qaaa] { color: var(--text-primary); }
/* Dieselben Gradfarben wie im Chart (Premium.razor.js, readPalette) - nie Grün oder Rot. */
.ew-wave-label.degree-1[b-6i8ig6qaaa] { color: var(--accent); }
.ew-wave-label.degree-2[b-6i8ig6qaaa] { color: #0E6874; }
.ew-wave-label.degree-3[b-6i8ig6qaaa] { color: #8A5F00; }
.ew-wave-label.degree-4[b-6i8ig6qaaa] { color: #6B2D8F; }
.ew-wave-label.degree-5[b-6i8ig6qaaa] { color: #8A4B2A; }

:root[data-theme="dark"] .ew-wave-label.degree-2[b-6i8ig6qaaa] { color: #5FC2CD; }
:root[data-theme="dark"] .ew-wave-label.degree-3[b-6i8ig6qaaa] { color: #E2B04E; }
:root[data-theme="dark"] .ew-wave-label.degree-4[b-6i8ig6qaaa] { color: #C49BE0; }
:root[data-theme="dark"] .ew-wave-label.degree-5[b-6i8ig6qaaa] { color: #D39A73; }

.ew-note[b-6i8ig6qaaa] {
    color: var(--text-quiet);
    font-size: .72rem;
    line-height: 1.6;
    margin: .6rem 0 0;
}

.mono-number[b-6i8ig6qaaa] {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
    .ew-form input[b-6i8ig6qaaa] { width: 100%; }
    .ew-hint[b-6i8ig6qaaa] { display: none; }
}

.concept-grid[b-6i8ig6qaaa] {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
}


.ew-layers[b-6i8ig6qaaa] {
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    gap: 1.4rem;
}

.ew-layers button[b-6i8ig6qaaa] {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    margin-bottom: -1px;
    padding: .4rem 0 .55rem;
}

.ew-layers button.active[b-6i8ig6qaaa] {
    border-bottom-color: var(--accent);
    color: var(--text-primary);
}

.ew-layers button:focus-visible[b-6i8ig6qaaa] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.ew-count[b-6i8ig6qaaa] {
    color: var(--text-quiet);
    font-size: .72rem;
    font-weight: 500;
    margin-left: .35rem;
}

.pt-list[b-6i8ig6qaaa] {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    margin-bottom: 1rem;
}

.pt-card[b-6i8ig6qaaa] {
    background: var(--surface-raised);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--warning);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    font-size: .8rem;
    gap: .3rem;
    padding: .75rem .9rem;
    text-align: left;
}

.pt-card.up[b-6i8ig6qaaa] { border-left-color: var(--positive); }
.pt-card.down[b-6i8ig6qaaa] { border-left-color: var(--negative); }

.pt-card:hover[b-6i8ig6qaaa] {
    border-color: var(--border-strong);
}

.pt-card:focus-visible[b-6i8ig6qaaa] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.pt-name[b-6i8ig6qaaa] {
    color: var(--text-primary);
    font-size: .9rem;
    font-weight: 600;
}

.pt-tf[b-6i8ig6qaaa] {
    color: var(--text-quiet);
    font-size: .72rem;
    font-weight: 500;
    margin-left: .3rem;
}

.pt-target.positive[b-6i8ig6qaaa] { color: var(--positive); }
.pt-target.negative[b-6i8ig6qaaa] { color: var(--negative); }
.pt-invalid[b-6i8ig6qaaa] { color: var(--negative); }

.pt-muted[b-6i8ig6qaaa] {
    color: var(--text-quiet);
}

.pt-meta[b-6i8ig6qaaa] {
    color: var(--text-quiet);
    font-size: .72rem;
}

.pt-sub[b-6i8ig6qaaa] {
    margin-top: .4rem !important;
}

.pt-records[b-6i8ig6qaaa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1.2rem 2rem;
}

.pt-record-title[b-6i8ig6qaaa] {
    margin: 0 0 .4rem;
    color: var(--text-muted);
    font-size: .8rem;
}

.pt-row[b-6i8ig6qaaa] {
    cursor: pointer;
}

.pt-row:hover td[b-6i8ig6qaaa] {
    color: var(--text-primary);
}

.ew-where td.positive[b-6i8ig6qaaa] { color: var(--positive); }
/* /Pages/PriceAlerts.razor.rz.scp.css */
.alerts-page[b-v3oruo8n05] {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    max-width: 46rem;
    min-width: 0;
}

.alerts-intro h1[b-v3oruo8n05] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.1rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .8rem;
}

.alerts-intro p:not(.eyebrow)[b-v3oruo8n05] {
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.7;
    margin: 0;
    max-width: 40rem;
}

.alerts-section[b-v3oruo8n05] {
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.3rem;
}

.alerts-section h2[b-v3oruo8n05] {
    align-items: baseline;
    display: flex;
    font-size: 1.1rem;
    gap: .7rem;
    margin: 0;
}

.alerts-section h2 small[b-v3oruo8n05] {
    color: var(--text-quiet);
    font-size: .74rem;
    font-weight: 500;
}

.alert-search input[b-v3oruo8n05],
.target input[b-v3oruo8n05] {
    background: var(--surface-inset, transparent);
    border: 1px solid var(--border-strong, var(--border-subtle));
    border-radius: 0;
    color: var(--text-primary);
    font: inherit;
    padding: .65rem .8rem;
    width: 100%;
}

.alert-results[b-v3oruo8n05] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alert-results button[b-v3oruo8n05] {
    align-items: baseline;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    cursor: pointer;
    display: grid;
    font: inherit;
    gap: .8rem;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    padding: .6rem .2rem;
    text-align: left;
    width: 100%;
}

.alert-results button:hover[b-v3oruo8n05],
.alert-results button:focus-visible[b-v3oruo8n05] {
    background: var(--accent-soft);
}

.result-name[b-v3oruo8n05] {
    color: var(--text-muted);
    font-size: .82rem;
    margin-left: .5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-results .result-name[b-v3oruo8n05] {
    margin-left: 0;
}

.alert-results small[b-v3oruo8n05] {
    color: var(--text-quiet);
}

.alert-form[b-v3oruo8n05] {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.selected-asset[b-v3oruo8n05] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    justify-content: space-between;
}

.current-price[b-v3oruo8n05] {
    color: var(--text-muted);
    font-size: .86rem;
    margin: 0;
}

.current-price strong[b-v3oruo8n05] {
    color: var(--text-primary);
}

.direction[b-v3oruo8n05] {
    border: 0;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
}

.direction label[b-v3oruo8n05] {
    border: 1px solid var(--border-strong, var(--border-subtle));
    cursor: pointer;
    flex: 1;
    font-size: .86rem;
    padding: .6rem .8rem;
    text-align: center;
}

.direction label + label[b-v3oruo8n05] {
    border-left: 0;
}

.direction label.is-on[b-v3oruo8n05] {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.direction input[b-v3oruo8n05] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.direction label:focus-within[b-v3oruo8n05] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.target[b-v3oruo8n05] {
    display: flex;
    flex-direction: column;
    font-size: .8rem;
    gap: .35rem;
}

.quick-targets[b-v3oruo8n05] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.quick-targets button[b-v3oruo8n05] {
    background: none;
    border: 1px solid var(--border-strong, var(--border-subtle));
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    padding: .35rem .7rem;
}

.quick-targets button:hover[b-v3oruo8n05] {
    border-color: var(--accent);
}

.target-hint[b-v3oruo8n05] {
    color: var(--text-quiet);
    font-size: .76rem;
    margin: 0;
}

.alert-submit[b-v3oruo8n05] {
    align-self: flex-start;
    background: var(--accent);
    border: 0;
    color: var(--on-accent);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    padding: .7rem 1.4rem;
}

.alert-submit:disabled[b-v3oruo8n05] {
    cursor: not-allowed;
    opacity: .45;
}

.alert-message[b-v3oruo8n05] {
    font-size: .84rem;
    margin: 0;
}

.alert-message.is-ok[b-v3oruo8n05] { color: var(--positive); }
.alert-message.is-error[b-v3oruo8n05] { color: var(--negative); }

.alert-list[b-v3oruo8n05] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alert-row[b-v3oruo8n05] {
    align-items: baseline;
    border-bottom: 1px solid var(--border-subtle);
    display: grid;
    gap: .8rem;
    grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1.4fr) auto;
    padding: .7rem 0;
}

.alert-main[b-v3oruo8n05] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.alert-main small[b-v3oruo8n05] {
    color: var(--text-quiet);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-target[b-v3oruo8n05] {
    font-weight: 600;
}

.alert-distance[b-v3oruo8n05] {
    color: var(--text-muted);
    font-size: .78rem;
}

.alert-row.is-done[b-v3oruo8n05] {
    opacity: .75;
}

@media (max-width: 560px) {
    .alert-row[b-v3oruo8n05] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .alert-distance[b-v3oruo8n05] {
        grid-column: 1 / -1;
    }
}
/* /Pages/ReplayLab.razor.rz.scp.css */
/* Matches ChartLab.razor.css's palette so the two internal lab/experiment tools
   (both gated behind Development and marked EXPERIMENT) look like one consistent
   toolset - deliberately not the main app's Kalk/Olive tokens, since these pages
   are never shown to end users. */
.lab[b-ccmscj600m] { max-width: 1400px; margin: auto; padding: clamp(16px, 3vw, 40px); color: #e7edf6; background: #0b111b; min-height: 100vh; }
.lab h1[b-ccmscj600m] { font-size: clamp(1.7rem, 4vw, 2.6rem); margin: 16px 0; }
.lab h2[b-ccmscj600m] { font-size: 1.3rem; margin-top: 0; }
.lab p[b-ccmscj600m], .provenance[b-ccmscj600m] { line-height: 1.6; }
.lab a[b-ccmscj600m] { color: #83ccff; }
.badge[b-ccmscj600m] { color: #ffc96a; font-size: .8rem; letter-spacing: .08em; }
.panel[b-ccmscj600m] { padding: clamp(16px, 2vw, 26px); margin-top: 20px; border: 1px solid #2e3c50; border-radius: 14px; background: #101a28; }
.provenance[b-ccmscj600m] { display: grid; gap: 8px; color: #bfcde0; }
.table-scroll[b-ccmscj600m] { overflow: auto; max-height: 460px; }
table[b-ccmscj600m] { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
caption[b-ccmscj600m] { text-align: left; padding: 14px 0; color: #bfcde0; }
th[b-ccmscj600m], td[b-ccmscj600m] { padding: 10px; white-space: nowrap; text-align: right; border-bottom: 1px solid #30415a; }
th:first-child[b-ccmscj600m], td:first-child[b-ccmscj600m] { text-align: left; }
.positive[b-ccmscj600m] { color: #6fe0a8; }
.negative[b-ccmscj600m] { color: #ff9c9c; }
.neutral[b-ccmscj600m] { color: #bfcde0; }
details[b-ccmscj600m] { color: #cfdeef; }
details summary[b-ccmscj600m] { cursor: pointer; }
details ul[b-ccmscj600m] { margin: 8px 0 0; padding-left: 1.2em; }
@media (max-width: 600px) { .lab[b-ccmscj600m] { padding: 16px; } }
/* /Pages/SavingsPlan.razor.rz.scp.css */
.plan-page[b-3zleh5sv0p] {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    max-width: 52rem;
    min-width: 0;
}

.plan-intro h1[b-3zleh5sv0p] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .8rem;
}

.plan-intro p:not(.eyebrow)[b-3zleh5sv0p] {
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.7;
    margin: 0;
    max-width: 44rem;
}

.plan-section[b-3zleh5sv0p] {
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding-top: 1.4rem;
}

.plan-section h2[b-3zleh5sv0p] {
    align-items: center;
    display: flex;
    font-size: 1.15rem;
    gap: .7rem;
    margin: 0;
}

.step[b-3zleh5sv0p] {
    align-items: center;
    background: var(--accent);
    color: var(--app-background);
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: .74rem;
    font-weight: 700;
    height: 1.5rem;
    justify-content: center;
    width: 1.5rem;
}

.sliders[b-3zleh5sv0p] {
    display: grid;
    gap: 1.2rem;
}

.slider[b-3zleh5sv0p] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.slider-head[b-3zleh5sv0p] {
    align-items: baseline;
    color: var(--text-muted);
    display: flex;
    font-size: .84rem;
    justify-content: space-between;
}

.slider-head strong[b-3zleh5sv0p] {
    color: var(--text-primary);
    font-size: 1.05rem;
}

.slider input[type="range"][b-3zleh5sv0p] {
    accent-color: var(--accent);
    cursor: pointer;
    width: 100%;
}

.plan-figures[b-3zleh5sv0p] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin: 0;
}

.plan-figures > div[b-3zleh5sv0p] {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    padding: .8rem 1rem;
}

.plan-figures dt[b-3zleh5sv0p] {
    color: var(--text-quiet);
    font-size: .74rem;
    margin-bottom: .25rem;
}

.plan-figures dd[b-3zleh5sv0p] {
    color: var(--text-primary);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}

.plan-figures .figure-main[b-3zleh5sv0p] {
    color: var(--accent);
    font-size: 1.4rem;
}

.plan-chart[b-3zleh5sv0p] {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    width: 100%;
}

.plan-legend[b-3zleh5sv0p] {
    color: var(--text-quiet);
    font-size: .76rem;
    margin: -.5rem 0 0;
}

.plan-range[b-3zleh5sv0p],
.plan-hint[b-3zleh5sv0p],
.plan-summary[b-3zleh5sv0p] {
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.65;
    margin: 0;
}

.plan-disclaimer[b-3zleh5sv0p] {
    color: var(--text-quiet);
    font-size: .74rem;
    line-height: 1.6;
    margin: 0;
}

.mode-switch[b-3zleh5sv0p] {
    display: inline-flex;
    max-width: 100%;
}

.mode-switch button[b-3zleh5sv0p] {
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    padding: .55rem 1rem;
}

.mode-switch button + button[b-3zleh5sv0p] {
    border-left: 0;
}

.mode-switch button.on[b-3zleh5sv0p] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--app-background);
    font-weight: 600;
}

.market-grid[b-3zleh5sv0p] {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.market[b-3zleh5sv0p] {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font: inherit;
    gap: .3rem;
    padding: .8rem .9rem;
    text-align: left;
}

.market:hover[b-3zleh5sv0p] {
    border-color: var(--accent);
}

.market.on[b-3zleh5sv0p] {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.market-name[b-3zleh5sv0p] {
    font-weight: 600;
}

.market-desc[b-3zleh5sv0p] {
    color: var(--text-muted);
    font-size: .76rem;
    line-height: 1.5;
}

.market-weight[b-3zleh5sv0p] {
    color: var(--accent);
    font-size: .8rem;
    font-weight: 600;
}

.plan-actions[b-3zleh5sv0p] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.plan-save[b-3zleh5sv0p] {
    background: var(--accent);
    border: 0;
    color: var(--app-background);
    cursor: pointer;
    font-size: .86rem;
    font-weight: 600;
    padding: .65rem 1.3rem;
}

.plan-save:disabled[b-3zleh5sv0p] {
    cursor: not-allowed;
    opacity: .5;
}

.plan-save:not(:disabled):hover[b-3zleh5sv0p] {
    background: var(--accent-bright);
}

.plan-saved[b-3zleh5sv0p] {
    color: var(--positive);
    font-size: .8rem;
    margin: 0;
}

.form-error[b-3zleh5sv0p] {
    color: var(--negative);
    font-size: .8rem;
    margin: 0;
}

.link-button[b-3zleh5sv0p] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .78rem;
    text-decoration: underline;
}

.link-button:hover[b-3zleh5sv0p] {
    color: var(--negative);
}

.broker-step[b-3zleh5sv0p] {
    border: 1px dashed var(--border-strong);
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1rem;
}

.broker-step button[b-3zleh5sv0p] {
    align-self: flex-start;
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--text-quiet);
    cursor: not-allowed;
    font: inherit;
    font-size: .82rem;
    padding: .55rem 1rem;
}

.broker-step p[b-3zleh5sv0p] {
    color: var(--text-quiet);
    font-size: .76rem;
    line-height: 1.6;
    margin: 0;
}
/* /Pages/Scanner.razor.rz.scp.css */
.scanner-page[b-pk94epsio7] {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    min-width: 0;
}

.scanner-intro h1[b-pk94epsio7] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .6rem;
}

.scanner-intro p:not(.eyebrow)[b-pk94epsio7] {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    max-width: 44rem;
}

.scanner-intro a[b-pk94epsio7] {
    color: var(--accent-bright);
}

.page-state[b-pk94epsio7] {
    color: var(--text-muted);
    font-size: .82rem;
    padding: 2rem 0;
}

.page-state.inline-error[b-pk94epsio7] {
    color: var(--negative);
}

.table-scroll[b-pk94epsio7] {
    border-top: 1px solid var(--border-subtle);
    overflow-x: auto;
}

table[b-pk94epsio7] {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    width: 100%;
}

th[b-pk94epsio7] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .1em;
    padding: .7rem .6rem;
    text-align: right;
    white-space: nowrap;
}

th:first-child[b-pk94epsio7] {
    text-align: left;
}

td[b-pk94epsio7] {
    border-top: 1px solid var(--border-subtle);
    padding: .7rem .6rem;
    text-align: right;
    white-space: nowrap;
}

td:first-child[b-pk94epsio7] {
    text-align: left;
}

td a[b-pk94epsio7] {
    color: inherit;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

td a:hover .mono-number[b-pk94epsio7] {
    color: var(--accent-bright);
}

td a small[b-pk94epsio7] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 400;
}

.positive[b-pk94epsio7] { color: var(--positive); }
.negative[b-pk94epsio7] { color: var(--negative); }
.neutral[b-pk94epsio7] { color: var(--text-muted); }

.scanner-source[b-pk94epsio7] {
    color: var(--text-quiet);
    font-size: 0.74rem;
}

.scanner-meta[b-pk94epsio7] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    text-align: right;
}

@media (max-width: 700px) {
    table[b-pk94epsio7] { font-size: .8rem; }
}

/* Search sits between the intro and the table: it is the page's action, the table its result.
   AssetSearch brings its own internal styling, so this only reserves the space around it. */
.scanner-search[b-pk94epsio7] {
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 1.4rem;
    padding-bottom: 1.2rem;
}
/* /Pages/Settings.razor.rz.scp.css */
.settings-page[b-657asqh5gw] {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    max-width: 44rem;
}

.settings-intro h1[b-657asqh5gw] {
    color: var(--text-primary);
    margin: 0 0 .55rem;
}

.settings-intro p[b-657asqh5gw] {
    color: var(--text-muted);
    font-size: .93rem;
    line-height: 1.65;
    margin: 0;
    max-width: 58ch;
}

.settings-group h2[b-657asqh5gw] {
    margin: 0 0 .8rem;
}

.theme-grid[b-657asqh5gw] {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

/* Ein Farbfeld ist anfassbar, also bekommt es den Radius der Bedienelemente. */
.theme-swatch[b-657asqh5gw] {
    background: var(--surface-raised);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
    cursor: pointer;
    font: inherit;
    padding: 1rem .9rem;
    position: relative;
    text-align: left;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.theme-swatch:hover[b-657asqh5gw] {
    border-color: var(--border-strong);
}

/* Die aktive Wahl wird vom Rahmen getragen, nicht von einer Füllung: sonst
   verfälscht die Markierung genau die Farbe, die beurteilt werden soll. */
.theme-swatch.active[b-657asqh5gw] {
    border-color: currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
}

.swatch-label[b-657asqh5gw] {
    display: block;
    font-size: .85rem;
    font-weight: 550;
}

.swatch-check[b-657asqh5gw] {
    font-size: .8rem;
    position: absolute;
    right: .75rem;
    top: .7rem;
}

.social-form[b-657asqh5gw] {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.social-field[b-657asqh5gw] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    max-width: 24rem;
}

.social-field > span[b-657asqh5gw] {
    color: var(--text-secondary);
    font-size: .84rem;
    font-weight: 550;
}

.social-field input[b-657asqh5gw] {
    background: var(--surface-raised);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
    font: inherit;
    font-size: .92rem;
    padding: .62rem .7rem;
}

.social-field input:focus[b-657asqh5gw] {
    border-color: var(--accent);
    outline: none;
}

.social-field small[b-657asqh5gw],
.toggle-text small[b-657asqh5gw] {
    color: var(--text-quiet);
    font-size: .78rem;
    line-height: 1.55;
}

/* Schalter statt Häkchen: es ist ein Zustand, der gilt, bis er umgelegt wird - keine
   einmalige Bestätigung. Das echte Kontrollkästchen bleibt für Tastatur und Screenreader. */
.social-toggle[b-657asqh5gw] {
    align-items: flex-start;
    cursor: pointer;
    display: grid;
    gap: .9rem;
    grid-template-columns: auto minmax(0, 1fr);
    max-width: 38rem;
    position: relative;
}

.social-toggle input[b-657asqh5gw] {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.toggle-track[b-657asqh5gw] {
    background: var(--surface-inset);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    display: block;
    height: 1.4rem;
    margin-top: .1rem;
    position: relative;
    transition: background-color .18s ease, border-color .18s ease;
    width: 2.5rem;
}

.toggle-thumb[b-657asqh5gw] {
    background: var(--text-muted);
    border-radius: 50%;
    height: 1rem;
    left: .15rem;
    position: absolute;
    top: .15rem;
    transition: transform .18s ease, background-color .18s ease;
    width: 1rem;
}

.social-toggle input:checked + .toggle-track[b-657asqh5gw] {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.social-toggle input:checked + .toggle-track .toggle-thumb[b-657asqh5gw] {
    background: var(--accent);
    transform: translateX(1.1rem);
}

.social-toggle input:focus-visible + .toggle-track[b-657asqh5gw] {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.toggle-text[b-657asqh5gw] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.toggle-text strong[b-657asqh5gw] {
    font-size: .9rem;
    font-weight: 550;
}

.social-actions[b-657asqh5gw] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.social-feedback[b-657asqh5gw] {
    font-size: .82rem;
}

.social-feedback.is-ok[b-657asqh5gw] {
    color: var(--positive);
}

.social-feedback.is-error[b-657asqh5gw] {
    color: var(--negative);
}

.settings-note[b-657asqh5gw] {
    color: var(--text-quiet);
    font-size: .8rem;
    line-height: 1.55;
    margin: -.3rem 0 .8rem;
    max-width: 56ch;
}

/* ── Profilbild ───────────────────────────────────────────────────────────── */

.avatar-row[b-657asqh5gw] {
    align-items: center;
    display: flex;
    gap: 1.1rem;
    margin-bottom: 1.2rem;
}

.avatar-actions[b-657asqh5gw] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
}

/* Unsichtbares <input type=file> über einem einfachen Link-Text - dieselbe Idee wie beim
   Broker-Import im Depot: kein Kasten, nur ein Link, der wie ein Link aussieht. ::deep ist
   nötig, weil <InputFile> sein eigenes <input> rendert und dabei nie den Scope dieser
   Komponente trägt. */
.file-input-button[b-657asqh5gw] {
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    font-size: .84rem;
    font-weight: 550;
    position: relative;
    text-decoration: underline;
    width: fit-content;
}

.file-input-button:hover[b-657asqh5gw] {
    color: var(--accent-bright);
}

.file-input-button[b-657asqh5gw]  input[type="file"] {
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.link-button[b-657asqh5gw] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .82rem;
    padding: 0;
    text-decoration: underline;
}

.link-button:hover[b-657asqh5gw] {
    color: var(--negative);
}

.avatar-status[b-657asqh5gw] {
    color: var(--text-quiet);
    font-size: .78rem;
}

.avatar-status.is-error[b-657asqh5gw] {
    color: var(--negative);
}

/* ── Rahmenauswahl ────────────────────────────────────────────────────────── */

.frame-picker[b-657asqh5gw] {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    margin-bottom: 1.4rem;
}

.frame-tile[b-657asqh5gw] {
    background: var(--surface-raised);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .45rem;
    font-size: .74rem;
    padding: .7rem .5rem;
    text-align: center;
}

.frame-tile:hover:not(:disabled)[b-657asqh5gw] {
    border-color: var(--border-strong);
}

.frame-tile.active[b-657asqh5gw] {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    color: var(--text-primary);
}

.frame-tile.is-locked[b-657asqh5gw] {
    color: var(--text-quiet);
}

.frame-tile:disabled[b-657asqh5gw] {
    cursor: not-allowed;
}

.frame-tile-preview[b-657asqh5gw] {
    display: block;
    height: 40px;
    width: 40px;
}

/* ── Hintergrundmuster ────────────────────────────────────────────────────── */

.pattern-grid[b-657asqh5gw] {
    display: grid;
    gap: .7rem;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}

/* Ein gezoomter Ausschnitt statt der ganzen 1600x1000-Zeichnung auf 42px Höhe gestaucht -
   in der winzigen Kachel wäre von den inzwischen feinen Linien/Punkten (design/topo/) sonst
   kaum mehr etwas zu erkennen. mask-size ist bewusst größer als die Kachel: es zeigt einen
   Ausschnitt in echter Größe, ungefähr so, wie ihn der Aufdeckradius selbst zeigen würde. */
.pattern-swatch[b-657asqh5gw] {
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    border-radius: var(--radius);
    display: block;
    height: 5.5rem;
    margin-bottom: .7rem;
    mask-position: 35% 55%;
    mask-repeat: no-repeat;
    mask-size: 800px 500px;
    -webkit-mask-position: 35% 55%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 800px 500px;
    width: 100%;
}

.pattern-swatch.is-off[b-657asqh5gw] {
    align-items: center;
    background: var(--surface-inset);
    color: var(--text-quiet);
    display: flex;
    justify-content: center;
}
/* /Pages/Setups.razor.rz.scp.css */
.concept-page[b-7vxfxzmoy3] {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
    max-width: 60rem;
}

.concept-page-intro h1[b-7vxfxzmoy3] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .6rem;
}

.concept-page-intro p:not(.eyebrow)[b-7vxfxzmoy3] {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
}

.concept-page-intro a[b-7vxfxzmoy3] {
    color: var(--accent-bright);
}

.widget-head[b-7vxfxzmoy3] {
    align-items: baseline;
    display: flex;
    gap: .6rem;
    justify-content: space-between;
    margin-bottom: .8rem;
}

.widget-head h2[b-7vxfxzmoy3] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0;
}

.real-setup[b-7vxfxzmoy3] {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1.4rem;
}

.real-setup-name[b-7vxfxzmoy3] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin: 0 0 .4rem;
}

.real-setup-detail[b-7vxfxzmoy3] {
    color: var(--text-muted);
    font-size: .82rem;
    line-height: 1.6;
    margin: 0;
}

.real-setup-detail a[b-7vxfxzmoy3] {
    color: var(--accent-bright);
}

.lifecycle[b-7vxfxzmoy3] {
    border-top: 1px solid var(--border-subtle);
    padding-top: 1.4rem;
}

.lifecycle h2[b-7vxfxzmoy3] {
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

.lifecycle-flow[b-7vxfxzmoy3] {
    align-items: center;
    color: var(--text-primary);
    display: flex;
    flex-wrap: wrap;
    font-size: .82rem;
    font-weight: 550;
    gap: .5rem;
}

.lifecycle-flow .arrow[b-7vxfxzmoy3] {
    color: var(--text-quiet);
    font-weight: 400;
}

.lifecycle-branches[b-7vxfxzmoy3] {
    color: var(--text-quiet);
    display: flex;
    font-size: 0.74rem;
    gap: 1.5rem;
    margin-top: .5rem;
}

.lifecycle-note[b-7vxfxzmoy3] {
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.6;
    margin: 1rem 0 0;
}

.concept-grid[b-7vxfxzmoy3] {
    border-top: 1px solid var(--border-subtle);
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    padding-top: 1.4rem;
}
/* /Pages/Wallet.razor.rz.scp.css */
.wallet-page[b-vcthzqcmc3] {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    min-width: 0;
}

.wallet-intro h1[b-vcthzqcmc3] {
    color: var(--text-primary);
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    letter-spacing: -.015em;
    margin: .5rem 0 .6rem;
}

.wallet-intro p[b-vcthzqcmc3] {
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.7;
    margin: 0;
    max-width: 54ch;
}

.wallet-intro a[b-vcthzqcmc3] {
    color: var(--accent-bright);
}

.wallet-summary[b-vcthzqcmc3] {
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    gap: 2.5rem;
    padding-bottom: 1.2rem;
}

.wallet-summary > div[b-vcthzqcmc3] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.summary-label[b-vcthzqcmc3] {
    color: var(--text-quiet);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: .1em;
}

.summary-value[b-vcthzqcmc3] {
    color: var(--text-primary);
    font-size: 1.3rem;
}

/* --- asset picker: tabs, search, panels ------------------------------------------ */

.asset-picker[b-vcthzqcmc3] {
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.2rem 0;
}

.picker-tabs[b-vcthzqcmc3] {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.picker-tab[b-vcthzqcmc3] {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    font-size: .78rem;
    padding: .4rem .9rem;
}

.picker-tab:hover[b-vcthzqcmc3] {
    border-color: var(--accent);
    color: var(--text-primary);
}

.picker-tab.active[b-vcthzqcmc3] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--app-background);
}

.picker-search[b-vcthzqcmc3] {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    font: inherit;
    font-size: .85rem;
    padding: .5rem .1rem;
    width: 100%;
}

.picker-search:focus[b-vcthzqcmc3] {
    border-bottom-color: var(--accent);
    outline: none;
}

.asset-grid[b-vcthzqcmc3] {
    display: grid;
    gap: .8rem;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}

.asset-card[b-vcthzqcmc3] {
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    padding: .9rem;
}

.card-main[b-vcthzqcmc3] {
    background: none;
    border: 0;
    cursor: pointer;
    display: grid;
    gap: .2rem .6rem;
    grid-template-columns: 1.8rem 1fr;
    padding: 0;
    text-align: left;
}

.card-logo[b-vcthzqcmc3],
.card-logo-fallback[b-vcthzqcmc3] {
    border-radius: 50%;
    grid-row: span 2;
    height: 1.8rem;
    object-fit: cover;
    width: 1.8rem;
}

.card-logo-fallback[b-vcthzqcmc3] {
    align-items: center;
    background: var(--surface-inset);
    color: var(--text-quiet);
    display: none;
    font-size: 0.74rem;
    font-weight: 700;
    justify-content: center;
}

.card-symbol[b-vcthzqcmc3] {
    align-self: end;
    color: var(--text-primary);
    font-size: .88rem;
    font-weight: 600;
}

.card-name[b-vcthzqcmc3] {
    color: var(--text-muted);
    font-size: .74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-class[b-vcthzqcmc3] {
    color: var(--text-quiet);
    font-size: .68rem;
    grid-column: 2;
    letter-spacing: .06em;
}

.card-buy[b-vcthzqcmc3] {
    align-items: center;
    display: flex;
    gap: .5rem;
    margin-top: .8rem;
}

.card-buy input[b-vcthzqcmc3] {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    flex: 1;
    font: inherit;
    font-size: .82rem;
    min-width: 0;
    padding: .3rem .1rem;
}

.card-buy button[b-vcthzqcmc3] {
    background: var(--accent);
    border: 0;
    color: var(--app-background);
    cursor: pointer;
    flex: 0 0 auto;
    font-size: .76rem;
    font-weight: 600;
    padding: .4rem .8rem;
}

.card-buy button:hover:not(:disabled)[b-vcthzqcmc3] {
    background: var(--accent-bright);
}

.card-buy button:disabled[b-vcthzqcmc3] {
    cursor: not-allowed;
    opacity: .5;
}

.form-error[b-vcthzqcmc3] {
    color: var(--negative);
    font-size: .78rem;
}

.form-success[b-vcthzqcmc3] {
    color: var(--positive);
    font-size: .78rem;
}

.page-state[b-vcthzqcmc3] {
    color: var(--text-muted);
    font-size: .82rem;
    padding: 1rem 0;
}

.page-state a[b-vcthzqcmc3] {
    color: var(--accent-bright);
}

.positive[b-vcthzqcmc3] { color: var(--positive); }
.negative[b-vcthzqcmc3] { color: var(--negative); }
.neutral[b-vcthzqcmc3] { color: var(--text-muted); }

/* --- positions: one consolidated row per symbol -------------------------------- */

.section-label[b-vcthzqcmc3] {
    color: var(--text-quiet);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    margin: 0 0 .7rem;
}

.positions-section[b-vcthzqcmc3] {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1.4rem;
}

.performance-section[b-vcthzqcmc3] {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1.4rem;
}

.position-list[b-vcthzqcmc3] {
    display: flex;
    flex-direction: column;
}

.position-row[b-vcthzqcmc3] {
    align-items: center;
    background: none;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 1.2rem;
    padding: .8rem .5rem;
    text-align: left;
    width: 100%;
}

.position-row:hover[b-vcthzqcmc3] {
    background: var(--surface-hover);
}

.row-avatar[b-vcthzqcmc3] {
    align-items: center;
    border-radius: 50%;
    color: var(--app-background);
    display: flex;
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    height: 2.2rem;
    justify-content: center;
    opacity: .85;
    width: 2.2rem;
}

.row-id[b-vcthzqcmc3] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 7rem;
}

.row-symbol[b-vcthzqcmc3] {
    color: var(--text-primary);
    font-size: .92rem;
    font-weight: 500;
}

.row-lots[b-vcthzqcmc3] {
    color: var(--text-quiet);
    font-size: .68rem;
    text-decoration: underline;
}

.row-figure[b-vcthzqcmc3] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}

.figure-label[b-vcthzqcmc3] {
    color: var(--text-quiet);
    font-size: .62rem;
    letter-spacing: .06em;
}

.row-figure .mono-number[b-vcthzqcmc3] {
    color: var(--text-primary);
    font-size: .85rem;
}

.row-chevron[b-vcthzqcmc3] {
    color: var(--text-quiet);
    flex: 0 0 auto;
    font-size: 1.1rem;
}

@media (max-width: 900px) {
    .position-row[b-vcthzqcmc3] {
        flex-wrap: wrap;
    }

    .row-figure[b-vcthzqcmc3] {
        flex: 1 1 40%;
    }
}

/* --- trade pop-out: dimmed/blurred backdrop, centered panel --------------------- */

@keyframes trade-backdrop-in-b-vcthzqcmc3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes trade-modal-in-b-vcthzqcmc3 {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.92); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.trade-backdrop[b-vcthzqcmc3] {
    animation: trade-backdrop-in-b-vcthzqcmc3 .2s ease-out;
    background: rgb(8 7 5 / 62%);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    inset: 0;
    position: fixed;
    z-index: 100;
}

.trade-modal[b-vcthzqcmc3] {
    animation: trade-modal-in-b-vcthzqcmc3 .24s cubic-bezier(.2, .8, .2, 1);
    background: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card, 0 24px 60px rgb(0 0 0 / 55%));
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    left: 50%;
    max-height: 84vh;
    max-width: 92vw;
    overflow-y: auto;
    padding: 1.8rem 2.2rem 2.2rem;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(70vw, 52rem);
    z-index: 101;
}

@media (prefers-reduced-motion: reduce) {
    .trade-backdrop[b-vcthzqcmc3],
    .trade-modal[b-vcthzqcmc3] {
        animation: none;
    }
}

.trade-head[b-vcthzqcmc3] {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
}

.trade-id[b-vcthzqcmc3] {
    align-items: center;
    display: flex;
    gap: .9rem;
}

.trade-id > div[b-vcthzqcmc3] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.trade-avatar[b-vcthzqcmc3] {
    align-items: center;
    border-radius: 50%;
    color: var(--app-background);
    display: flex;
    flex: 0 0 auto;
    font-size: 1rem;
    font-weight: 700;
    height: 3.2rem;
    justify-content: center;
    opacity: .85;
    width: 3.2rem;
}

.trade-symbol[b-vcthzqcmc3] {
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 500;
}

.trade-sub[b-vcthzqcmc3] {
    color: var(--text-muted);
    font-size: .8rem;
}

.trade-head-actions[b-vcthzqcmc3] {
    align-items: center;
    display: flex;
    gap: 1rem;
}

.trade-tabs[b-vcthzqcmc3] {
    display: flex;
    border: 1px solid var(--border-subtle);
}

.trade-tabs button[b-vcthzqcmc3] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: .8rem;
    padding: .5rem 1.2rem;
}

.trade-tabs button.active[b-vcthzqcmc3] {
    background: var(--accent);
    color: var(--app-background);
    font-weight: 600;
}

.trade-tabs button:disabled[b-vcthzqcmc3] {
    cursor: not-allowed;
    opacity: .4;
}

.trade-close[b-vcthzqcmc3] {
    align-items: center;
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    color: var(--text-quiet);
    cursor: pointer;
    display: flex;
    font-size: .85rem;
    height: 1.8rem;
    justify-content: center;
    width: 1.8rem;
}

.trade-close:hover[b-vcthzqcmc3] {
    border-color: var(--negative);
    color: var(--negative);
}

.trade-action[b-vcthzqcmc3] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    padding-top: 1rem;
}

.qty-stepper[b-vcthzqcmc3] {
    align-items: center;
    border: 1px solid var(--border-strong);
    display: flex;
}

.qty-stepper button[b-vcthzqcmc3] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    height: 2.5rem;
    width: 2.5rem;
}

.qty-stepper button:hover[b-vcthzqcmc3] {
    color: var(--text-primary);
}

.qty-stepper input[b-vcthzqcmc3] {
    background: none;
    border: 0;
    border-left: 1px solid var(--border-strong);
    border-right: 1px solid var(--border-strong);
    color: var(--text-primary);
    font-size: .95rem;
    height: 2.5rem;
    text-align: center;
    width: 4.5rem;
}

.trade-readout[b-vcthzqcmc3] {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.trade-readout .mono-number[b-vcthzqcmc3] {
    color: var(--text-secondary);
    font-size: .82rem;
}

.trade-readout small[b-vcthzqcmc3] {
    color: var(--text-quiet);
    font-size: .72rem;
}

.trade-cta-slot[b-vcthzqcmc3] {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.trade-cta[b-vcthzqcmc3] {
    background: var(--accent);
    border: 0;
    box-shadow: var(--glow-accent, 0 0 60px rgb(217 190 126 / 20%));
    color: var(--app-background);
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    padding: .9rem 2.4rem;
}

.trade-cta:hover:not(:disabled)[b-vcthzqcmc3] {
    background: var(--accent-bright);
}

.trade-cta:disabled[b-vcthzqcmc3] {
    cursor: not-allowed;
    opacity: .5;
}

@media (max-width: 700px) {
    .trade-modal[b-vcthzqcmc3] {
        max-width: 96vw;
        padding: 1.4rem 1.4rem 1.8rem;
        width: min(96vw, 30rem);
    }

    .trade-action[b-vcthzqcmc3] {
        flex-direction: column;
        align-items: stretch;
    }

    .trade-cta-slot[b-vcthzqcmc3] {
        justify-content: stretch;
    }

    .trade-cta[b-vcthzqcmc3] {
        width: 100%;
    }
}

/* --- Journal (D-068): jeder Trade mit seinem realisierten Ergebnis --------------------------- */

.journal-section[b-vcthzqcmc3] {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 1.4rem;
}

.journal-head[b-vcthzqcmc3] {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem 1rem;
    justify-content: space-between;
}

.journal-head .section-label[b-vcthzqcmc3] {
    margin: 0;
}

.journal-summary[b-vcthzqcmc3] {
    font-size: .78rem;
    font-weight: 600;
}

.journal-list[b-vcthzqcmc3] {
    display: flex;
    flex-direction: column;
    max-height: 26rem;
    overflow-y: auto;
}

.journal-row[b-vcthzqcmc3] {
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    display: grid;
    gap: .8rem;
    grid-template-columns: 5.5rem minmax(0, 1fr) 6rem 6rem;
    padding: .6rem .3rem;
}

.journal-kind[b-vcthzqcmc3] {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.journal-kind.is-buy[b-vcthzqcmc3] { color: var(--negative); }
.journal-kind.is-sell[b-vcthzqcmc3] { color: var(--positive); }
.journal-kind.is-credit[b-vcthzqcmc3] { color: var(--text-quiet); }

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

.journal-main small[b-vcthzqcmc3] {
    color: var(--text-quiet);
    font-size: .72rem;
}

.journal-amount[b-vcthzqcmc3],
.journal-pnl[b-vcthzqcmc3] {
    font-size: .84rem;
    text-align: right;
}

.journal-note[b-vcthzqcmc3] {
    color: var(--text-quiet);
    font-size: .74rem;
    margin: .6rem 0 0;
}

@media (max-width: 640px) {
    .journal-row[b-vcthzqcmc3] {
        grid-template-columns: 4.5rem minmax(0, 1fr) 5rem;
    }

    .journal-pnl[b-vcthzqcmc3] {
        grid-column: 2 / -1;
        text-align: left;
    }
}
/* /Shared/AsciiIllustration.razor.rz.scp.css */
.ascii-illustration[b-m3d85bc92m] {
    --ascii-ink: var(--text-primary);
    --ascii-accent: var(--accent);
    --ascii-dim: var(--text-muted);
    flex: 0 0 auto;
    margin: 0;
    position: relative;
    width: clamp(15rem, 24vw, 19rem);
    max-width: 100%;
    contain: layout;
}

.ascii-object-stage[b-m3d85bc92m] {
    aspect-ratio: 1.6;
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 65%, var(--accent-soft), transparent 66%);
}

.ascii-object-stage[b-m3d85bc92m]::before,
.ascii-object-stage[b-m3d85bc92m]::after {
    border-color: var(--border-subtle);
    border-style: solid;
    content: "";
    height: .55rem;
    width: .55rem;
    position: absolute;
    top: .6rem;
    pointer-events: none;
}

.ascii-object-stage[b-m3d85bc92m]::before { left: 0; border-width: 1px 0 0 1px; }
.ascii-object-stage[b-m3d85bc92m]::after { right: 0; border-width: 1px 1px 0 0; }

canvas[b-m3d85bc92m] { display: block; width: 100%; height: 100%; opacity: 0; }
.is-ready canvas[b-m3d85bc92m] { opacity: 1; }

.ascii-object-fallback[b-m3d85bc92m] {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    margin: 0;
    color: var(--accent);
    font: .65rem/1.2 Consolas, "Courier New", monospace;
    white-space: pre;
}
.is-ready .ascii-object-fallback[b-m3d85bc92m] { display: none; }

.ascii-object-caption[b-m3d85bc92m] {
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    display: flex;
    font: .57rem/1.5 var(--font-mono);
    gap: .75rem;
    justify-content: space-between;
    letter-spacing: .13em;
    min-height: 2rem;
    text-transform: uppercase;
}

.ascii-motion-control[b-m3d85bc92m] {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font: 1rem/1 var(--font-mono);
    height: 2rem;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    width: 2rem;
}
.ascii-motion-control:hover[b-m3d85bc92m] { color: var(--accent-bright); background: var(--accent-soft); }
.ascii-motion-control:focus-visible[b-m3d85bc92m] { outline: 2px solid var(--accent); outline-offset: 2px; }

.ascii-illustration--compact[b-m3d85bc92m] { width: 7.5rem; }
.ascii-illustration--compact .ascii-object-stage[b-m3d85bc92m] { aspect-ratio: 1.15; background: none; }
.ascii-illustration--compact .ascii-object-stage[b-m3d85bc92m]::before,
.ascii-illustration--compact .ascii-object-stage[b-m3d85bc92m]::after { display: none; }
.ascii-illustration--compact .ascii-object-caption[b-m3d85bc92m] { border: 0; position: absolute; bottom: -.5rem; right: -.3rem; }
.ascii-illustration--compact .ascii-object-fallback[b-m3d85bc92m] { font-size: .38rem; }

@media (max-width: 700px) {
    .ascii-illustration[b-m3d85bc92m] { align-self: center; width: 17rem; }
    .ascii-object-stage[b-m3d85bc92m] { aspect-ratio: 1.85; }
    .ascii-illustration--compact[b-m3d85bc92m] { width: 6rem; }
    .ascii-illustration--compact .ascii-object-stage[b-m3d85bc92m] { aspect-ratio: 1.1; }
}

@media (prefers-reduced-motion: reduce) {
    .ascii-motion-control[b-m3d85bc92m] { display: none; }
}
/* /Shared/AuthCollage.razor.rz.scp.css */
/* Volltönig statt umrandet: die eine Fläche im ganzen UI, die in Tinte gefüllt ist. */
.auth-terminal[b-9j04dq3yzl] {
    background: var(--ink);
    color: var(--paper);
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    max-width: 34rem;
    padding: 1.6rem;
    width: 100%;
}

.auth-terminal-head[b-9j04dq3yzl] {
    align-items: center;
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
    display: flex;
    font-family: var(--font-mono);
    font-size: .72rem;
    justify-content: space-between;
    letter-spacing: .08em;
    padding-bottom: .9rem;
}

.auth-terminal-head .status[b-9j04dq3yzl] {
    color: color-mix(in srgb, var(--paper) 65%, transparent);
}

.auth-terminal-line[b-9j04dq3yzl] {
    color: var(--paper);
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.14;
    margin: 2rem 0;
}

.auth-terminal-line .idx[b-9j04dq3yzl] {
    color: var(--accent);
}

.auth-terminal-foot[b-9j04dq3yzl] {
    border-top: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
    color: color-mix(in srgb, var(--paper) 65%, transparent);
    display: flex;
    font-family: var(--font-mono);
    font-size: .7rem;
    gap: 1.4rem;
    letter-spacing: .06em;
    padding-top: .9rem;
}
/* /Shared/BklitChart.razor.rz.scp.css */
/* Base sizing only - all theming/typography lives in the bundle's own tc-root (see
   charts/src/index.css). This isolated stylesheet only ever touches the host div itself, so it
   cannot leak into the JS-rendered chart contents even by accident. */
.bklit-chart[b-p4rrmect3s] {
    display: block;
    width: 100%;
}
/* /Shared/BrandLogo.razor.rz.scp.css */
.brand-logo[b-obhvloy7h7] {
    color: var(--text-primary);
    display: block;
    flex: none;
}

.brand-logo-lockup[b-obhvloy7h7] {
    align-items: center;
    display: inline-flex;
    gap: .62em;
}

.brand-logo-lockup svg[b-obhvloy7h7] {
    display: block;
    flex: none;
}
/* /Shared/CoachChat.razor.rz.scp.css */
.coach-chat[b-ag7tfagzda] {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-height: 0;
}

.coach-chat.is-compact[b-ag7tfagzda] {
    flex: 1;
    gap: .8rem;
}

.coach-state[b-ag7tfagzda] {
    color: var(--text-muted);
    font-size: .88rem;
    line-height: 1.65;
    margin: 0;
    padding: .5rem 0;
}

.coach-thread[b-ag7tfagzda] {
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

/* Im Eckfenster scrollt nur der Verlauf, Eingabe und Hinweis bleiben stehen. */
.is-compact .coach-thread[b-ag7tfagzda] {
    flex: 1;
    gap: 1rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .2rem;
}

.coach-empty p[b-ag7tfagzda] {
    color: var(--text-quiet);
    font-size: .8rem;
    margin: 0 0 .6rem;
}

.coach-suggestions[b-ag7tfagzda] {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.coach-suggestion[b-ag7tfagzda] {
    background: none;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: .84rem;
    line-height: 1.45;
    padding: .55rem .75rem;
    text-align: left;
    transition: border-color .18s ease, color .18s ease;
}

.coach-suggestion:hover[b-ag7tfagzda] {
    border-color: var(--accent);
    color: var(--text-primary);
}

.coach-turn[b-ag7tfagzda] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.coach-role[b-ag7tfagzda] {
    color: var(--text-quiet);
    font-size: .76rem;
    font-weight: 550;
}

.from-user .coach-role[b-ag7tfagzda] {
    color: var(--accent);
}

.coach-text[b-ag7tfagzda] {
    color: var(--text-secondary);
    font-size: .92rem;
    line-height: 1.72;
    margin: 0;
    /* The model writes real paragraphs; collapsing them would run the whole answer together. */
    white-space: pre-wrap;
}

.is-compact .coach-text[b-ag7tfagzda] {
    font-size: .86rem;
    line-height: 1.65;
}

.from-user .coach-text[b-ag7tfagzda] {
    color: var(--text-primary);
}

/* What the coach looked up, under its answer. Quiet on purpose: it is provenance, not content -
   but it stays visible, because it separates figures from this app's live data from figures the
   model wrote from memory. */
.coach-lookups[b-ag7tfagzda] {
    border-left: 1px solid var(--border-strong);
    color: var(--text-quiet);
    display: flex;
    flex-direction: column;
    font-size: .76rem;
    gap: .2rem;
    line-height: 1.5;
    list-style: none;
    margin: .45rem 0 0;
    padding: .1rem 0 .1rem .7rem;
}

/* Marks the answer as still being written, so a pause reads as "thinking", not as "finished". */
.coach-caret[b-ag7tfagzda] {
    animation: coach-blink-b-ag7tfagzda 1s steps(2, start) infinite;
    background: var(--accent);
    display: inline-block;
    height: .9em;
    margin-left: .15em;
    vertical-align: text-bottom;
    width: .5ch;
}

@keyframes coach-blink-b-ag7tfagzda {
    to { visibility: hidden; }
}

.coach-composer[b-ag7tfagzda] {
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: .7rem;
    padding-top: 1rem;
}

.coach-composer input[b-ag7tfagzda] {
    background: var(--surface-inset);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
    flex: 1;
    font: inherit;
    font-size: .9rem;
    min-width: 0;
    padding: .65rem .75rem;
}

.coach-composer input:focus[b-ag7tfagzda] {
    border-color: var(--accent);
    outline: none;
}

.coach-send[b-ag7tfagzda],
.coach-stop[b-ag7tfagzda] {
    border-radius: var(--radius);
    cursor: pointer;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    padding: .66rem 1rem;
    white-space: nowrap;
}

.coach-send[b-ag7tfagzda] {
    background: var(--accent);
    border: 0;
    color: #14120C;
}

.coach-send:hover:not(:disabled)[b-ag7tfagzda] {
    background: var(--accent-bright);
}

.coach-send:disabled[b-ag7tfagzda] {
    cursor: not-allowed;
    opacity: .45;
}

.coach-stop[b-ag7tfagzda] {
    background: none;
    border: 1px solid var(--border-strong);
    color: var(--text-secondary);
}

.coach-stop:hover[b-ag7tfagzda] {
    border-color: var(--negative);
    color: var(--negative);
}

.coach-disclaimer[b-ag7tfagzda] {
    color: var(--text-quiet);
    font-size: .74rem;
    line-height: 1.55;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .coach-caret[b-ag7tfagzda] {
        animation: none;
    }
}
/* /Shared/CoachLauncher.razor.rz.scp.css */
.coach-launcher[b-1u24v1a57l] {
    bottom: 1.5rem;
    position: fixed;
    right: 1.5rem;
    z-index: 60;
}

/* Der Knopf: die eine leuchtende Stelle, die immer da ist. Rund, weil er als einziges
   Element frei über dem Inhalt schwebt und sich klar vom Raster darunter lösen soll. */
.coach-fab[b-1u24v1a57l] {
    align-items: center;
    background: var(--accent);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgb(0 0 0 / 35%), 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--on-accent);
    cursor: pointer;
    display: flex;
    height: 3.4rem;
    justify-content: center;
    transition: transform .18s ease, box-shadow .25s ease, background-color .18s ease;
    width: 3.4rem;
}

.coach-fab:hover[b-1u24v1a57l] {
    background: var(--accent-bright);
    box-shadow: 0 12px 34px rgb(0 0 0 / 40%), 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
    transform: translateY(-1px);
}

.coach-fab.is-open[b-1u24v1a57l] {
    background: var(--surface-raised);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: 0 10px 30px rgb(0 0 0 / 35%), inset 0 0 0 1px var(--border-strong);
    color: var(--text-primary);
}

.coach-panel[b-1u24v1a57l] {
    background: var(--surface-raised);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-subtle);
    bottom: 4.4rem;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: .9rem;
    height: min(38rem, calc(100vh - 8rem));
    padding: 1.1rem 1.1rem 1rem;
    position: absolute;
    right: 0;
    transform-origin: bottom right;
    width: min(25rem, calc(100vw - 2rem));
    /* Bewegung als Antwort auf den Klick: das Fenster wächst aus dem Knopf, statt einfach
       dazustehen - so bleibt sichtbar, woher es kam. */
    animation: coach-panel-in-b-1u24v1a57l .2s cubic-bezier(.2, .8, .3, 1);
}

@keyframes coach-panel-in-b-1u24v1a57l {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.96);
    }
}

.coach-panel-head[b-1u24v1a57l] {
    align-items: flex-start;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding-bottom: .8rem;
}

.coach-panel-head h2[b-1u24v1a57l] {
    font-size: 1.35rem;
    margin: 0;
}

.coach-panel-head p[b-1u24v1a57l] {
    color: var(--text-quiet);
    font-size: .78rem;
    margin: .15rem 0 0;
}

.coach-panel-tools[b-1u24v1a57l] {
    align-items: center;
    display: flex;
    gap: .6rem;
}

.coach-panel-link[b-1u24v1a57l] {
    color: var(--text-muted);
    font-size: .78rem;
    text-decoration: none;
}

.coach-panel-link:hover[b-1u24v1a57l] {
    color: var(--text-primary);
}

.coach-panel-close[b-1u24v1a57l] {
    align-items: center;
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    padding: .3rem;
}

.coach-panel-close:hover[b-1u24v1a57l] {
    background: var(--surface-hover);
    color: var(--text-primary);
}

.coach-guest[b-1u24v1a57l] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: .3rem;
}

.coach-guest p[b-1u24v1a57l] {
    color: var(--text-secondary);
    font-size: .9rem;
    line-height: 1.65;
    margin: 0;
}

.coach-guest .btn[b-1u24v1a57l] {
    align-self: flex-start;
}

@media (max-width: 580px) {
    .coach-launcher[b-1u24v1a57l] {
        bottom: 1rem;
        right: 1rem;
    }

    .coach-panel[b-1u24v1a57l] {
        height: min(36rem, calc(100vh - 6.5rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .coach-panel[b-1u24v1a57l] {
        animation: none;
    }
}
/* /Shared/FriendsRail.razor.rz.scp.css */
/* Die Leiste steht auf dem Grund, getrennt durch eine Haarlinie - wie die Navigation links.
   Keine Karten: jede Gruppe ist eine Liste, getrennt durch Abstand, nicht durch Kästen. */
.friends[b-s2z5fklywa] {
    border-left: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    height: 100vh;
    overflow-y: auto;
    /* Unten Platz lassen: der Coach-Knopf schwebt in dieser Ecke. */
    padding: 1.4rem 1.2rem 6rem;
    position: sticky;
    top: 0;
    width: 17.5rem;
}

.friends.is-wide[b-s2z5fklywa] {
    border-left: 0;
    height: auto;
    max-width: 34rem;
    overflow: visible;
    padding: 0 0 2rem;
    position: static;
    width: 100%;
}

.friends-head[b-s2z5fklywa] {
    align-items: baseline;
    display: flex;
    gap: .6rem;
}

.friends-head h2[b-s2z5fklywa] {
    font-size: 1.45rem;
    margin: 0;
}

.friends-count[b-s2z5fklywa] {
    color: var(--text-quiet);
    font-size: .8rem;
}

.friends-note[b-s2z5fklywa],
.friends-empty[b-s2z5fklywa] {
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.6;
    margin: 0;
}

.friends-hint[b-s2z5fklywa] {
    border-left: 1px solid var(--accent);
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.55;
    margin: 0;
    padding: .1rem 0 .1rem .7rem;
}

.friends-hint a[b-s2z5fklywa] {
    display: inline-block;
    margin-top: .15rem;
}

.friends-block h3[b-s2z5fklywa],
.friends-add h3[b-s2z5fklywa] {
    color: var(--text-quiet);
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 550;
    letter-spacing: 0;
    margin: 0 0 .5rem;
}

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

.friend-row[b-s2z5fklywa],
.friend-request[b-s2z5fklywa] {
    align-items: center;
    border-radius: var(--radius);
    display: grid;
    gap: .7rem;
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
    padding: .45rem .4rem;
}

.friend-row[b-s2z5fklywa] {
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
}

.friend-row:hover[b-s2z5fklywa] {
    background: var(--surface-hover);
}

.friend-row:hover .friend-chevron[b-s2z5fklywa] {
    color: var(--accent);
    transform: translateX(2px);
}

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

.friend-name[b-s2z5fklywa] {
    font-size: .88rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-sub[b-s2z5fklywa] {
    color: var(--text-quiet);
    font-size: .76rem;
}

.friend-chevron[b-s2z5fklywa] {
    color: var(--text-quiet);
    transition: color .15s ease, transform .15s ease;
}

.friend-request[b-s2z5fklywa] {
    grid-template-columns: 2.1rem minmax(0, 1fr);
    padding-inline: 0;
}

.request-actions[b-s2z5fklywa] {
    display: flex;
    gap: .4rem;
    grid-column: 2;
}

.friend-request.is-outgoing[b-s2z5fklywa] {
    grid-template-columns: 2.1rem minmax(0, 1fr) auto;
}

.request-accept[b-s2z5fklywa],
.request-decline[b-s2z5fklywa],
.request-withdraw[b-s2z5fklywa] {
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-secondary);
    cursor: pointer;
    font: inherit;
    font-size: .76rem;
    font-weight: 550;
    padding: .34rem .6rem;
}

.request-accept[b-s2z5fklywa] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.request-accept:hover:not(:disabled)[b-s2z5fklywa] {
    background: var(--accent-bright);
}

.request-decline:hover:not(:disabled)[b-s2z5fklywa],
.request-withdraw:hover:not(:disabled)[b-s2z5fklywa] {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

.request-accept:disabled[b-s2z5fklywa],
.request-decline:disabled[b-s2z5fklywa],
.request-withdraw:disabled[b-s2z5fklywa] {
    cursor: not-allowed;
    opacity: .5;
}

.request-withdraw[b-s2z5fklywa] {
    border: 0;
    color: var(--text-quiet);
    padding-inline: .2rem;
}

.friends-add[b-s2z5fklywa] {
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin-top: auto;
    padding-top: 1.1rem;
}

.friends.is-wide .friends-add[b-s2z5fklywa] {
    margin-top: .5rem;
}

.my-code[b-s2z5fklywa] {
    align-items: baseline;
    display: grid;
    gap: .15rem .6rem;
    grid-template-columns: minmax(0, 1fr) auto;
}

.my-code-label[b-s2z5fklywa] {
    color: var(--text-quiet);
    font-size: .74rem;
    grid-column: 1 / -1;
}

.my-code-value[b-s2z5fklywa] {
    color: var(--accent);
    font-size: 1.12rem;
    letter-spacing: .06em;
}

.my-code-copy[b-s2z5fklywa] {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: .76rem;
    padding: 0;
}

.my-code-copy:hover[b-s2z5fklywa] {
    color: var(--text-primary);
}

.add-form[b-s2z5fklywa] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.add-form input[b-s2z5fklywa] {
    background: var(--surface-inset);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: .88rem;
    letter-spacing: .05em;
    padding: .58rem .65rem;
    text-transform: uppercase;
}

.add-form input[b-s2z5fklywa]::placeholder {
    font-family: var(--font-body);
    letter-spacing: 0;
    text-transform: none;
}

.add-form input:focus[b-s2z5fklywa] {
    border-color: var(--accent);
    outline: none;
}

.add-form button[b-s2z5fklywa] {
    background: none;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    padding: .55rem .8rem;
}

.add-form button:hover:not(:disabled)[b-s2z5fklywa] {
    background: var(--accent-soft);
}

.add-form button:disabled[b-s2z5fklywa] {
    border-color: var(--border-subtle);
    color: var(--text-quiet);
    cursor: not-allowed;
}

.add-feedback[b-s2z5fklywa] {
    color: var(--text-muted);
    font-size: .78rem;
    line-height: 1.55;
    margin: 0;
    min-height: 1.2em;
}

.add-feedback.is-ok[b-s2z5fklywa] {
    color: var(--positive);
}

.add-feedback.is-error[b-s2z5fklywa] {
    color: var(--negative);
}
/* /Shared/SavingsTools.razor.rz.scp.css */
.tools[b-rk8zf93wd9] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.tool[b-rk8zf93wd9] {
    border-top: 1px solid var(--border-strong);
    display: flex;
    flex-direction: column;
    gap: .8rem;
    padding-top: 1.2rem;
}

.tool h3[b-rk8zf93wd9] {
    font-size: 1rem;
    margin: 0;
}

.field[b-rk8zf93wd9] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.field span[b-rk8zf93wd9],
.scenario label[b-rk8zf93wd9] {
    color: var(--text-muted);
    font-size: .8rem;
}

.tool input[type="number"][b-rk8zf93wd9] {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border-strong);
    color: var(--text-primary);
    font: inherit;
    padding: .4rem .1rem;
    width: 9rem;
}

.tool-result[b-rk8zf93wd9],
.tool-note[b-rk8zf93wd9] {
    color: var(--text-muted);
    font-size: .84rem;
    line-height: 1.65;
    margin: 0;
    max-width: 46rem;
}

.tool-result strong[b-rk8zf93wd9] {
    color: var(--text-primary);
}

.scenarios[b-rk8zf93wd9] {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.scenario[b-rk8zf93wd9] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
}

.scenario input[b-rk8zf93wd9] {
    width: 5rem !important;
}

.tool th[b-rk8zf93wd9],
.tool td[b-rk8zf93wd9] {
    padding: .5rem 1.2rem .5rem 0;
    text-align: left;
}
/* /Shared/SectionHeading.razor.rz.scp.css */
.section-heading[b-wla5qtvdow] {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: .9rem;
}

.section-heading h2[b-wla5qtvdow] {
    color: var(--text-primary);
    font-size: .95rem;
    font-weight: 670;
    letter-spacing: -.01em;
    margin: .25rem 0 0;
}

.description[b-wla5qtvdow] {
    color: var(--text-muted);
    font-size: 0.74rem;
    margin: .28rem 0 0;
}

.heading-action[b-wla5qtvdow] {
    flex: 0 0 auto;
}
/* /Shared/StatusPill.razor.rz.scp.css */
/* Kein Chip, keine Fläche: ein Quadrat und ein gesperrtes Wort, wie im Protokoll -
   §sq/.status in app.css tragen die Form, hier nur die Ton-Farbe pro Zustand. */
.status-pill[b-i8de3u40ox] {
    align-items: center;
    color: var(--text-muted);
    display: inline-flex;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    gap: .45rem;
    letter-spacing: .06em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-pill.positive[b-i8de3u40ox] {
    color: var(--text-primary);
}

.status-pill.warning[b-i8de3u40ox] {
    color: var(--warning);
}

.status-pill.info[b-i8de3u40ox] {
    color: var(--info);
}

.status-pill.muted[b-i8de3u40ox],
.status-pill.neutral[b-i8de3u40ox] {
    color: var(--text-muted);
}
/* /Shared/TrackingHost.razor.rz.scp.css */
.consent[b-1i1m3c4dqg] {
    align-items: center;
    background: var(--paper-raised, var(--app-background));
    border: 1px solid var(--border-strong, var(--border-subtle));
    bottom: 1rem;
    box-shadow: 0 10px 34px rgb(0 0 0 / 26%);
    display: flex;
    flex-wrap: wrap;
    gap: .9rem 1.4rem;
    justify-content: space-between;
    left: 50%;
    max-width: min(46rem, calc(100vw - 2rem));
    padding: 1rem 1.2rem;
    position: fixed;
    transform: translateX(-50%);
    width: 100%;
    z-index: 80;
}

.consent h2[b-1i1m3c4dqg] {
    font-size: .95rem;
    margin: 0 0 .35rem;
}

.consent p[b-1i1m3c4dqg] {
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1.55;
    margin: 0;
}

.consent-text[b-1i1m3c4dqg] {
    flex: 1 1 22rem;
}

.consent-actions[b-1i1m3c4dqg] {
    display: flex;
    flex: 0 0 auto;
    gap: .6rem;
}

.consent-actions button[b-1i1m3c4dqg] {
    border: 1px solid var(--border-strong, var(--border-subtle));
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    padding: .55rem 1rem;
}

.consent-yes[b-1i1m3c4dqg] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.consent-no[b-1i1m3c4dqg] {
    background: none;
    color: var(--text-primary);
}
/* /Shared/UserAvatar.razor.rz.scp.css */
.user-avatar[b-squ8n6v2rm] {
    display: inline-block;
    flex: 0 0 auto;
    position: relative;
}

/* Das Bild sitzt um die Rahmenbreite eingerückt, damit jeder Rahmen Platz hat. */
.avatar-face[b-squ8n6v2rm] {
    background: var(--surface-inset);
    border-radius: 50%;
    display: block;
    height: calc(100% - 2 * var(--avatar-inset));
    left: var(--avatar-inset);
    object-fit: cover;
    position: absolute;
    top: var(--avatar-inset);
    width: calc(100% - 2 * var(--avatar-inset));
}

.avatar-initials[b-squ8n6v2rm] {
    align-items: center;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    display: flex;
    font-family: var(--font-body);
    font-size: var(--avatar-font);
    font-weight: 600;
    justify-content: center;
    letter-spacing: 0;
}

.user-avatar[b-squ8n6v2rm]  .avatar-frame {
    inset: 0;
    position: absolute;
}
/* /Shared/WorldDotMap.razor.rz.scp.css */
.dotmap[b-dz2t4suec8] {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
}

.dotmap svg[b-dz2t4suec8] {
    display: block;
    height: auto;
    width: 100%;
}

.dotmap path[b-dz2t4suec8] {
    fill: none;
    stroke-linecap: round;
}

.land[b-dz2t4suec8] {
    stroke: var(--border-subtle);
    stroke-width: .5;
}

.dots[b-dz2t4suec8] {
    stroke: var(--text-muted);
    stroke-width: .62;
    transition: stroke .18s ease;
}

.hit[b-dz2t4suec8] {
    pointer-events: stroke;
    stroke: transparent;
    stroke-width: 1.05;
}

.region[b-dz2t4suec8] {
    cursor: pointer;
    outline: none;
}

.region:hover .dots[b-dz2t4suec8],
.region:focus-visible .dots[b-dz2t4suec8] {
    stroke: var(--text-primary);
}

.region.on .dots[b-dz2t4suec8] {
    stroke: var(--accent);
}

.region.on:hover .dots[b-dz2t4suec8] {
    stroke: var(--accent-bright);
}

.region:focus-visible .dots[b-dz2t4suec8] {
    stroke-width: .8;
}

.is-global .region[b-dz2t4suec8] {
    cursor: default;
}

.is-global .land[b-dz2t4suec8] {
    stroke: var(--text-muted);
}

.tag[b-dz2t4suec8] {
    fill: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 3.2px;
    font-weight: 700;
    opacity: 0;
    paint-order: stroke;
    pointer-events: none;
    stroke: var(--app-background);
    stroke-linejoin: round;
    stroke-width: .9px;
    text-anchor: middle;
    transition: opacity .18s ease;
}

.region:hover .tag[b-dz2t4suec8],
.region:focus-visible .tag[b-dz2t4suec8],
.region.on .tag[b-dz2t4suec8] {
    opacity: 1;
}

.dotmap-caption[b-dz2t4suec8] {
    color: var(--text-quiet);
    font-size: .74rem;
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dots[b-dz2t4suec8],
    .tag[b-dz2t4suec8] {
        transition: none;
    }
}