/* /Components/App.razor.rz.scp.css */
[b-qvq6cm5ylx] .btn-cta {
    padding: 15px 30px; /* More generous padding */
    font-size: 2rem; /* Slightly larger text */
    background-color: #007BFF;
    color: white;
    border: none;
}

    [b-qvq6cm5ylx] .btn-cta:hover {
        background-color: #3399FF;
    }

    [b-qvq6cm5ylx] .btn-cta:active {
        background-color: #0066CC;
        box-shadow: inset 0px 3px 5px rgba(0, 0, 0, 0.3);
    }


[b-qvq6cm5ylx] .hovering-card-buttons {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

[b-qvq6cm5ylx] .hovering-card:hover .hovering-card-buttons,
[b-qvq6cm5ylx] .hovering-card.active .hovering-card-buttons {
    opacity: 1;
    visibility: visible;
}
/* /Components/EnvironmentRibbon.razor.rz.scp.css */
/* Top-left diagonal caution ribbon. Warm amber on purpose — it clashes with the
   app's sky-blue brand so "you're not in production" registers instantly. */

.env-ribbon[b-5dw1wx5k6n] {
    position: fixed;
    top: 0;
    left: 0;
    width: 152px;
    height: 152px;
    overflow: hidden;
    pointer-events: none; /* never block the logo / nav underneath */
    z-index: 2000;        /* above Bootstrap modals (1050) and toasts (~1090) */
}

.env-ribbon__text[b-5dw1wx5k6n] {
    position: absolute;
    top: 34px;
    left: -52px;
    width: 200px;
    padding: 7px 0;
    text-align: center;

    /* Technical, build-log feel — and distinct from the app's Lexend/Helvetica. */
    font: 700 0.78rem/1 "SFMono-Regular", "JetBrains Mono", "Cascadia Code", ui-monospace, Consolas, monospace;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    text-indent: 0.22em; /* offset trailing letter-spacing so glyphs stay centred */
    color: #2a1c00;      /* warm near-black: high contrast on amber */

    /* Hazard-tape texture layered over the amber gradient. */
    background-image:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.16) 0 6px, transparent 6px 16px),
        linear-gradient(180deg, #fbbf24 0%, #f59e0b 55%, #e08c08 100%);

    /* Printed-band edges + lift off the page. */
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(0, 0, 0, 0.28);
    box-shadow:
        0 6px 16px -4px rgba(0, 0, 0, 0.55),
        0 2px 4px rgba(0, 0, 0, 0.4);

    transform: rotate(-45deg);
    transform-origin: center;
    animation: env-ribbon-in-b-5dw1wx5k6n 0.65s cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

@keyframes env-ribbon-in-b-5dw1wx5k6n {
    from {
        opacity: 0;
        transform: rotate(-45deg) translate3d(0, -180%, 0);
    }
    to {
        opacity: 1;
        transform: rotate(-45deg) translate3d(0, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .env-ribbon__text[b-5dw1wx5k6n] {
        animation: none;
    }
}
/* /Components/Features/Account/MyPlan.razor.rz.scp.css */
/* MyPlan owns its own styling so it renders correctly wherever it's hosted
   (My profile and the Manage team page). MyProfilePage.razor.css carries an
   equivalent ::deep set for the name/handle card it also wraps; the duplicated
   card-chrome rules are identical, so co-hosting on My profile is harmless. */

.mp-card[b-c6wz8dt1yq] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
}

.mp-card-header[b-c6wz8dt1yq] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mp-card-icon[b-c6wz8dt1yq] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.mp-card-icon-orange[b-c6wz8dt1yq] {
    background: rgba(249, 115, 22, 0.14);
    color: #F97316;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.mp-card-title[b-c6wz8dt1yq] {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.005em;
}

.mp-card-subtitle[b-c6wz8dt1yq] {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 2px 0 0;
    line-height: 1.5;
}

.mp-card-body[b-c6wz8dt1yq] {
    padding: 20px 22px;
}

.mp-plan-text[b-c6wz8dt1yq] {
    color: #d1d5db;
    font-size: 13.5px;
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mp-plan-badge[b-c6wz8dt1yq] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 50px;
    background: rgba(249, 115, 22, 0.14);
    color: #F97316;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mp-upgrade-row[b-c6wz8dt1yq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: #9ca3af;
    font-size: 13.5px;
}

/* NavLink renders an <a> as a child component, so it never receives MyPlan's
   scope attribute — reach it with ::deep from a scoped ancestor. */
.mp-upgrade-row[b-c6wz8dt1yq]  .mp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #d1d5db;
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.mp-upgrade-row[b-c6wz8dt1yq]  .mp-btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
/* /Components/Features/Account/MyProfilePage.razor.rz.scp.css */
.mp-page[b-1lm4uag06d] {
    font-family: "Lexend", system-ui, sans-serif;
}

.mp-header[b-1lm4uag06d] {
    margin-bottom: 24px;
}

.mp-title[b-1lm4uag06d] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 2px;
}

.mp-subtitle[b-1lm4uag06d] {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 0;
}

.mp-sections[b-1lm4uag06d] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Brand card styles shared by MyProfile (name/handle) and MyPlan child components. */

[b-1lm4uag06d] .mp-card {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
}

[b-1lm4uag06d] .mp-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

[b-1lm4uag06d] .mp-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

[b-1lm4uag06d] .mp-card-icon-blue {
    background: rgba(84, 110, 250, 0.16);
    color: #8c9dfc;
    border: 1px solid rgba(84, 110, 250, 0.3);
}

[b-1lm4uag06d] .mp-card-icon-orange {
    background: rgba(249, 115, 22, 0.14);
    color: #F97316;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

[b-1lm4uag06d] .mp-card-title {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.005em;
}

[b-1lm4uag06d] .mp-card-subtitle {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 2px 0 0;
    line-height: 1.5;
}

[b-1lm4uag06d] .mp-card-body {
    padding: 20px 22px;
}

[b-1lm4uag06d] .mp-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    padding: 14px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.12);
}

[b-1lm4uag06d] .mp-label {
    display: block;
    color: #d1d5db;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
}

[b-1lm4uag06d] .mp-input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s;
}

[b-1lm4uag06d] .mp-input::placeholder {
    color: #6b7280;
}

[b-1lm4uag06d] .mp-input:focus {
    border-color: rgba(249, 115, 22, 0.5);
}

[b-1lm4uag06d] .mp-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

[b-1lm4uag06d] .mp-help-text {
    color: #6b7280;
    font-size: 12px;
    margin-top: 5px;
}

[b-1lm4uag06d] .mp-switch-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

[b-1lm4uag06d] .mp-switch {
    cursor: pointer;
}

[b-1lm4uag06d] .mp-switch-label {
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
}

[b-1lm4uag06d] .mp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    background: #F97316;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 10px -4px rgba(249, 115, 22, 0.35);
    transition: background 0.15s;
}

[b-1lm4uag06d] .mp-btn-primary:hover:not(:disabled) {
    background: #EA580C;
    color: #fff;
}

[b-1lm4uag06d] .mp-btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

[b-1lm4uag06d] .mp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #d1d5db;
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

[b-1lm4uag06d] .mp-btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

[b-1lm4uag06d] .mp-feedback {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 500;
}

[b-1lm4uag06d] .mp-feedback-success {
    background: rgba(74, 222, 128, 0.10);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.20);
}

[b-1lm4uag06d] .mp-feedback-error {
    background: rgba(220, 53, 69, 0.10);
    color: #ff7a88;
    border: 1px solid rgba(220, 53, 69, 0.20);
}

[b-1lm4uag06d] .mp-plan-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 50px;
    background: rgba(249, 115, 22, 0.14);
    color: #F97316;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-1lm4uag06d] .mp-plan-text {
    color: #d1d5db;
    font-size: 13.5px;
    margin: 0 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

[b-1lm4uag06d] .mp-upgrade-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: #9ca3af;
    font-size: 13.5px;
}

[b-1lm4uag06d] .mp-validation {
    color: #ff7a88;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}
/* /Components/Features/Blacklist/List/EmailBlacklist.razor.rz.scp.css */
/* Empty state comes from .hl-state (icon --danger). */


/* ── Header ── */

.eb-title[b-qfrjanulef] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.eb-subtitle[b-qfrjanulef] {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 0;
}

/* Header, add-form, row and search buttons all come from .hl-btn
   (--primary / --outline / --danger, --sm). No page-local button styles. */

/* ── Add card ── */

.eb-add-card[b-qfrjanulef] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
}

.eb-add-row[b-qfrjanulef] {
    display: flex;
    gap: 8px;
}

[b-qfrjanulef] .eb-add-input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 8px 12px;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease;
}

[b-qfrjanulef] .eb-add-input::placeholder {
    color: #6c757d;
}

[b-qfrjanulef] .eb-add-input:focus {
    border-color: rgba(249, 115, 22, 0.5);
    background: rgba(255, 255, 255, 0.07);
}

/* ── Search ── */

.eb-search-form[b-qfrjanulef] {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: wrap;
}

.eb-search-row[b-qfrjanulef] {
    position: relative;
    flex: 1 1 280px;
    max-width: 380px;
}

.eb-search-icon[b-qfrjanulef] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 13px;
    pointer-events: none;
}

[b-qfrjanulef] .eb-search-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 8px 12px 8px 34px;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease;
}

[b-qfrjanulef] .eb-search-input::placeholder {
    color: #6c757d;
}

[b-qfrjanulef] .eb-search-input:focus {
    border-color: rgba(84, 110, 250, 0.5);
    background: rgba(255, 255, 255, 0.07);
}

/* ── Cards ── */

.eb-card[b-qfrjanulef] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.eb-card:hover[b-qfrjanulef] {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7);
    transform: translateY(-2px);
}

.eb-card--disabled[b-qfrjanulef] {
    opacity: 0.7;
}

.eb-card-header[b-qfrjanulef] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.eb-icon-wrap[b-qfrjanulef] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff7a88;
    font-size: 16px;
    flex-shrink: 0;
}

.eb-identity[b-qfrjanulef] {
    flex: 1;
    min-width: 0;
}

.eb-email[b-qfrjanulef] {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eb-status[b-qfrjanulef] {
    margin-top: 4px;
}

.eb-status-badge[b-qfrjanulef] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.eb-status-badge--active[b-qfrjanulef] {
    background: rgba(220, 53, 69, 0.14);
    color: #ff7a88;
}

.eb-status-badge--disabled[b-qfrjanulef] {
    background: rgba(108, 117, 125, 0.18);
    color: #adb5bd;
}

/* ── Body ── */

.eb-card-body[b-qfrjanulef] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
}

.eb-meta-grid[b-qfrjanulef] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
}

.eb-meta-cell[b-qfrjanulef] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.eb-row-icon[b-qfrjanulef] {
    color: #6c757d;
    font-size: 13px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.eb-row-text[b-qfrjanulef] {
    color: #d1d5db;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* ── Footer ── */

.eb-card-footer[b-qfrjanulef] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}


/* ── Inline feedback ── */

[b-qfrjanulef] .eb-feedback {
    margin-top: 8px;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12.5px;
}

[b-qfrjanulef] .eb-feedback--success {
    background: rgba(74, 222, 128, 0.10);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.20);
}

[b-qfrjanulef] .eb-feedback--error {
    background: rgba(220, 53, 69, 0.10);
    color: #ff7a88;
    border: 1px solid rgba(220, 53, 69, 0.20);
}
/* /Components/Features/Feed/FeedTopics.razor.rz.scp.css */
/* ── Empty state ────────────────────────────────────────────────── */

/* Wrap fills its parent (.app-content is flex:1 inside the app shell,
   so it has a definite height) and centres the card. No viewport math —
   that risks overshooting the available area and triggering the parent's
   overflow:auto scrollbar. */
.empty-state-wrap[b-61qspi24h2] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
}

/* The card, icon, heading and body all come from .hl-state now — only the
   trailing reassurance line has no design-system equivalent. */
.empty-state-hint[b-61qspi24h2] {
    color: #6b7280;
    font-size: 12.5px;
    margin: 0;
}

/* ── Feed page wrapper ──────────────────────────────────────────── */

.feed-page[b-61qspi24h2] {
    height: 100%;
    margin: -32px;                 /* cancel app-content padding */
    overflow: hidden;
}

/* ── Feed master/detail layout ──────────────────────────────────── */

.feed-layout[b-61qspi24h2] {
    display: grid;
    grid-template-columns: 360px 1fr;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* ── Left pane ──────────────────────────────────────────────────── */

.feed-left[b-61qspi24h2] {
    background: rgba(13, 24, 42, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 20px 16px;
}

.feed-title[b-61qspi24h2] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.feed-subtitle[b-61qspi24h2] {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 0;
}

.feed-subtitle-new[b-61qspi24h2] {
    color: #4ade80;
    font-weight: 600;
}

/* New topic CTA — solid orange so it reads as the primary action, in line
   with empty-state and other page CTAs. */
/* The list-header pair (Manage / New topic) is hl-btn--outline--sm and
   hl-btn--primary--sm. Drafts notice uses .hl-alert. No custom styles. */

/* Search */
.feed-search-wrap[b-61qspi24h2] {
    position: relative;
}

.feed-search-icon[b-61qspi24h2] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 12px;
    pointer-events: none;
}

.feed-search[b-61qspi24h2] {
    width: 100%;
    padding: 8px 12px 8px 32px;
    font-size: 13px;
    font-family: inherit;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    color: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.feed-search:focus[b-61qspi24h2] {
    border-color: rgba(249, 115, 22, 0.4);
}

.feed-search[b-61qspi24h2]::placeholder {
    color: #6b7280;
}


/* Topic list items */
.topic-item[b-61qspi24h2] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
    color: inherit;
}

.topic-item:hover[b-61qspi24h2] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

.topic-item-active[b-61qspi24h2] {
    background: rgba(249, 115, 22, 0.08);
    border-color: rgba(249, 115, 22, 0.3);
}

.topic-item-active:hover[b-61qspi24h2] {
    background: rgba(249, 115, 22, 0.1);
}

/* Orange left rail marks the *selected* card, not the default one. The
   default badge alone communicates "default"; reserve the rail for selection
   feedback so a non-selected default topic doesn't look perpetually active. */
.topic-item-active[b-61qspi24h2] {
    border-left: 3px solid #F97316;
    padding-left: 11px;     /* offset the +1px the thicker rail steals */
}

/* New-response flash — short green tint that fades back, plus a subtle lift.
   ::deep-free because this card markup is owned by the same component. */
.topic-item-flash[b-61qspi24h2] {
    animation: topicFlash-b-61qspi24h2 1.8s ease-out;
}

@keyframes topicFlash-b-61qspi24h2 {
    0%   { background: rgba(74, 222, 128, 0.22); transform: translateY(-1px); }
    60%  { background: rgba(74, 222, 128, 0.10); transform: translateY(0); }
    100% { background: transparent;              transform: translateY(0); }
}

.topic-badge-unread-pulse[b-61qspi24h2] {
    animation: unreadPulse-b-61qspi24h2 0.9s ease-out;
}

@keyframes unreadPulse-b-61qspi24h2 {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
    50%  { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .topic-item-flash[b-61qspi24h2] {
        animation: none;
        background: rgba(74, 222, 128, 0.12);
    }
    .topic-badge-unread-pulse[b-61qspi24h2] {
        animation: none;
    }
}

.topic-item-name[b-61qspi24h2] {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
}

/* Default topic badge — ghosted orange tag. Same brand colour family as the
   "New topic" CTA but recessed: transparent tint, low-opacity border, lighter
   orange-300 type. Slightly squared corners (4px) and wider letter-spacing
   distinguish it visually as a *label* rather than an action button. */
.topic-badge-default[b-61qspi24h2] {
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.35);
    color: #FDBA74;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Unread responses badge */
.topic-badge-unread[b-61qspi24h2] {
    background: rgba(74, 222, 128, 0.18);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.topic-item-meta[b-61qspi24h2] {
    font-size: 11.5px;
    color: #9ca3af;
}

/* Public/Private label cluster — keeps icon + word on one line and matches
   the rest of the meta row (12px, muted). */
.topic-visibility[b-61qspi24h2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.topic-visibility i[b-61qspi24h2] {
    font-size: 11px;
    opacity: 0.85;
}

/* Globe (Public) — light-blue duotone so it pops against the muted meta row.
   The lock (Private) intentionally inherits the gray meta color and stays
   monochrome — public state is the one we want to draw the eye. */
.topic-visibility .fa-globe[b-61qspi24h2] {
    --fa-primary-color: #93C5FD;
    --fa-secondary-color: #60A5FA;
    --fa-primary-opacity: 1;
    --fa-secondary-opacity: 0.55;
    opacity: 1;
}

/* ── Right pane ─────────────────────────────────────────────────── */

.feed-right[b-61qspi24h2] {
    padding: 28px 36px;
}

/* Detail title */
.detail-title[b-61qspi24h2] {
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* Action buttons — none local; the Share / Edit / View row is plain `hl-btn`
   from honestli.css. See wwwroot/showcase.html for the markup. */

/* Stat strip */
.detail-stats[b-61qspi24h2] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.detail-stat-label[b-61qspi24h2] {
    font-size: 11px;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.detail-stat-value[b-61qspi24h2] {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.detail-stat-positive[b-61qspi24h2] { color: #4ade80; }
.detail-stat-neutral[b-61qspi24h2]  { color: #9ca3af; }
.detail-stat-critical[b-61qspi24h2] { color: #f87171; }

/* Sentiment bar — Bootstrap .progress handles structure; we supply size + colors */
.sentiment-bar[b-61qspi24h2] {
    width: 120px;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
}

.sentiment-seg-pos[b-61qspi24h2]  { background-color: #22c55e; }
.sentiment-seg-neu[b-61qspi24h2]  { background-color: #9ca3af; }
.sentiment-seg-crit[b-61qspi24h2] { background-color: #ef4444; }

/* AI Summary card */
.ai-summary-card[b-61qspi24h2] {
    background: linear-gradient(135deg, rgba(84, 110, 250, 0.08) 0%, rgba(249, 115, 22, 0.06) 100%);
    border: 1px solid rgba(84, 110, 250, 0.2);
    border-radius: 14px;
    padding: 20px 22px;
}

.ai-summary-icon[b-61qspi24h2] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(84, 110, 250, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #A5B4FC;
    font-size: 12px;
    flex-shrink: 0;
}

.ai-summary-label[b-61qspi24h2] {
    font-size: 12px;
    color: #A5B4FC;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.ai-summary-count[b-61qspi24h2] {
    font-size: 11px;
    color: #6b7280;
}

.ai-summary-text[b-61qspi24h2] {
    color: #e5e7eb;
    font-size: 14.5px;
    line-height: 1.65;
}

/* Responses heading */
/* ── Aggregates (detail pane) ───────────────────────────────────── */

/* Per-question distribution stack under the stat strip. */
.agg-questions[b-61qspi24h2] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Summary / Responses lens toggle ────────────────────────────── */

/* Segmented control that picks the detail pane's lens. Orange active
   segment — the same selection grammar as the topic list's active rail. */
.detail-lens[b-61qspi24h2] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    width: fit-content;
    padding: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
}

.detail-lens-btn[b-61qspi24h2] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: #9ca3af;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}

.detail-lens-btn:hover[b-61qspi24h2] {
    color: #e5e7eb;
}

.detail-lens-btn-active[b-61qspi24h2] {
    background: rgba(249, 115, 22, 0.16);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.35);
}

.detail-lens-btn-active:hover[b-61qspi24h2] {
    color: #fff;
}

.detail-lens-btn i[b-61qspi24h2] {
    font-size: 12px;
}

.detail-lens-count[b-61qspi24h2] {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.detail-lens-new[b-61qspi24h2] {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(74, 222, 128, 0.18);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.responses-title[b-61qspi24h2] {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Topic pager ────────────────────────────────────────────────── */

/* Sits at the bottom of the left pane (the list above grows to fill, pushing
   this down). flex-shrink:0 keeps it from being squeezed when the list is long. */
.feed-pager[b-61qspi24h2] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 1px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}

.feed-pager-btn[b-61qspi24h2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #d1d5db;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}

.feed-pager-btn:hover:not(:disabled)[b-61qspi24h2] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.feed-pager-btn:disabled[b-61qspi24h2] {
    opacity: 0.4;
    cursor: not-allowed;
}

.feed-pager-btn-icon[b-61qspi24h2] {
    padding: 6px 9px;
}

/* Next is the forward affordance — anchor it to the right edge of the pager. */
.feed-pager-btn-next[b-61qspi24h2] {
    margin-left: auto;
}

/* ── Misc ───────────────────────────────────────────────────────── */

.feed-no-results[b-61qspi24h2] {
    color: #9ca3af;
    font-size: 13px;
    text-align: center;
    padding: 20px 0;
    margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 767px) {
    .feed-page[b-61qspi24h2] {
        height: auto;
        margin: -20px;
        overflow: visible;
    }

    .feed-layout[b-61qspi24h2] {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .feed-left[b-61qspi24h2] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        max-height: 45vh;
    }

    .feed-right[b-61qspi24h2] {
        padding: 20px 16px;
        /* The reading pane's action bar (#336) pins with position:sticky
           against .app-content — the page's scroller at this width. A
           scroll-container ancestor would hijack the sticky reference, so
           relax the pane's overflow-y-auto utility here (it never scrolls
           at this width anyway; !important outbids Bootstrap's own). */
        overflow-y: visible !important;
    }

    /* .hl-state carries its own responsive padding and type scale. */
}
/* /Components/Features/Inreaches/Inreaches.razor.rz.scp.css */
/* ── Header ──────────────────────────────────────────────────────── */

.ir-title[b-fmmebb9pzm] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.ir-subtitle[b-fmmebb9pzm] {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 0;
}

.ir-blacklist-link[b-fmmebb9pzm] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(220, 53, 69, 0.35);
    color: #ff7a88;
    background: rgba(220, 53, 69, 0.08);
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ir-blacklist-link:hover[b-fmmebb9pzm] {
    background: rgba(220, 53, 69, 0.18);
    border-color: rgba(220, 53, 69, 0.6);
    color: #ffb3bb;
    transform: translateY(-1px);
}

.ir-blacklist-link i[b-fmmebb9pzm] {
    font-size: 12px;
}

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

.ir-empty-card[b-fmmebb9pzm] {
    max-width: 460px;
    margin-top: 40px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 36px 28px;
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.5);
    font-family: "Lexend", system-ui, sans-serif;
}

.ir-empty-icon[b-fmmebb9pzm] {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 14px;
    background: rgba(84, 110, 250, 0.10);
    border: 1px solid rgba(84, 110, 250, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #8c9dfc;
}

.ir-empty-heading[b-fmmebb9pzm] {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.ir-empty-body[b-fmmebb9pzm] {
    color: #9ca3af;
    font-size: 14px;
}

/* ── Alerts / toast ────────────────────────────────────────────── */

.ir-alert[b-fmmebb9pzm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    margin-bottom: 16px;
}

.ir-alert-danger[b-fmmebb9pzm] {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff7a88;
}

.ir-toast[b-fmmebb9pzm] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
}

.ir-toast-success[b-fmmebb9pzm] {
    background: rgba(74, 222, 128, 0.10);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.25);
}

.ir-toast-error[b-fmmebb9pzm] {
    background: rgba(220, 53, 69, 0.12);
    color: #ff7a88;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.ir-toast-close[b-fmmebb9pzm] {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.7;
}

.ir-toast-close:hover[b-fmmebb9pzm] {
    opacity: 1;
}

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

.ir-card[b-fmmebb9pzm] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ir-card:hover[b-fmmebb9pzm] {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7);
    transform: translateY(-2px);
}

.ir-card-header[b-fmmebb9pzm] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.ir-avatar[b-fmmebb9pzm] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #546EFA 0%, #8c9dfc 100%);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ir-identity[b-fmmebb9pzm] {
    flex: 1;
    min-width: 0;
}

.ir-from-name[b-fmmebb9pzm] {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ir-from-email[b-fmmebb9pzm] {
    color: #9ca3af;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.ir-icon-btn[b-fmmebb9pzm] {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

.ir-icon-btn:hover[b-fmmebb9pzm] {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
}

.ir-card-body[b-fmmebb9pzm] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
}

.ir-spam-block[b-fmmebb9pzm] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ir-spam-row[b-fmmebb9pzm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ir-spam-label[b-fmmebb9pzm] {
    color: #9ca3af;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.ir-spam-value[b-fmmebb9pzm] {
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ir-spam-bar[b-fmmebb9pzm] {
    width: 100%;
    height: 6px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.ir-spam-fill[b-fmmebb9pzm] {
    height: 100%;
    border-radius: 99px;
    transition: width 0.2s ease;
}

.ir-spam-fill.bg-danger[b-fmmebb9pzm] { background: #ef4444; }
.ir-spam-fill.bg-warning[b-fmmebb9pzm] { background: #f59e0b; }
.ir-spam-fill.bg-success[b-fmmebb9pzm] { background: #22c55e; }

.ir-spam-pending[b-fmmebb9pzm] {
    color: #9ca3af;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ir-time[b-fmmebb9pzm] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 12px;
}

.ir-summary[b-fmmebb9pzm] {
    color: #d1d5db;
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ir-card-footer[b-fmmebb9pzm] {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Buttons (reused in modal too) ─────────────────────────────── */

[b-fmmebb9pzm] .ir-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

[b-fmmebb9pzm] .ir-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.16);
    color: #d1d5db;
}

[b-fmmebb9pzm] .ir-btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

[b-fmmebb9pzm] .ir-btn-warning {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.32);
    color: #fbbf24;
}

[b-fmmebb9pzm] .ir-btn-warning:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.22);
    color: #fff;
}

[b-fmmebb9pzm] .ir-btn-danger {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.30);
    color: #ff7a88;
}

[b-fmmebb9pzm] .ir-btn-danger:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.22);
    color: #fff;
}

[b-fmmebb9pzm] .ir-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Modal ──────────────────────────────────────────────────────── */

[b-fmmebb9pzm] .ir-modal-content {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #d1d5db;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.6);
}

[b-fmmebb9pzm] .ir-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 18px 24px;
}

[b-fmmebb9pzm] .ir-modal-title {
    color: #fff;
    font-weight: 600;
}

[b-fmmebb9pzm] .ir-modal-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #d1d5db;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}

[b-fmmebb9pzm] .ir-modal-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

[b-fmmebb9pzm] .ir-modal-body {
    padding: 22px 24px;
}

[b-fmmebb9pzm] .ir-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px 22px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

[b-fmmebb9pzm] .ir-detail-list {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 10px 16px;
    margin: 0;
}

[b-fmmebb9pzm] .ir-detail-list dt {
    color: #9ca3af;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    padding-top: 2px;
}

[b-fmmebb9pzm] .ir-detail-list dd {
    color: #e5e7eb;
    font-size: 14px;
    margin: 0;
}

[b-fmmebb9pzm] .ir-detail-link {
    color: #8c9dfc;
    text-decoration: none;
}

[b-fmmebb9pzm] .ir-detail-link:hover {
    color: #c0cafd;
    text-decoration: underline;
}

[b-fmmebb9pzm] .ir-detail-message {
    color: #e5e7eb;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: inherit;
    background: transparent;
}

[b-fmmebb9pzm] .ir-detail-empty {
    color: #9ca3af;
    font-size: 13.5px;
}
/* /Components/Features/Payments/PaymentConfirmation.razor.rz.scp.css */
/* ── Page shell ───────────────────────────────────────────────── */

.pc-page[b-c8zmxlsbh7] {
    position: relative;
    font-family: "Lexend", system-ui, sans-serif;
    padding: 56px 24px 96px;
    overflow: hidden;
    min-height: calc(100vh - 80px);
}

.pc-bg[b-c8zmxlsbh7] {
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 760px;
    background:
        radial-gradient(48% 42% at 50% 0%, rgba(74, 222, 128, 0.14), transparent 70%),
        radial-gradient(70% 60% at 50% 30%, rgba(45, 212, 191, 0.06), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.pc-bg-grain[b-c8zmxlsbh7] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    z-index: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px);
    background-size: 3px 3px;
    mix-blend-mode: overlay;
}

.pc-container[b-c8zmxlsbh7] {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

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

.pc-card[b-c8zmxlsbh7] {
    position: relative;
    background: #12213A;
    border: 1px solid rgba(74, 222, 128, 0.18);
    border-radius: 22px;
    padding: 48px 44px 36px;
    overflow: hidden;
    text-align: center;
    box-shadow:
        0 24px 60px -28px rgba(74, 222, 128, 0.35),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
    animation: pc-card-rise-b-c8zmxlsbh7 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pc-card-rise-b-c8zmxlsbh7 {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pc-card-halo[b-c8zmxlsbh7] {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 380px;
    background: radial-gradient(50% 60% at 50% 30%, rgba(74, 222, 128, 0.18), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.pc-card-thermal[b-c8zmxlsbh7] {
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #4ade80 50%, transparent);
    z-index: 1;
}

/* ── Decorative sparkles ─────────────────────────────────────── */

.pc-spark[b-c8zmxlsbh7] {
    position: absolute;
    z-index: 1;
    color: #4ade80;
    --fa-primary-color: #86efac;
    --fa-secondary-color: #4ade80;
    --fa-secondary-opacity: 0.7;
    pointer-events: none;
    animation: pc-spark-twinkle-b-c8zmxlsbh7 3.2s ease-in-out infinite;
}

.pc-spark-1[b-c8zmxlsbh7] { top: 36px;  left: 18%;  font-size: 14px; animation-delay: 0.0s; }
.pc-spark-2[b-c8zmxlsbh7] { top: 70px;  right: 18%; font-size: 11px; animation-delay: 0.6s; }
.pc-spark-3[b-c8zmxlsbh7] { top: 134px; left: 10%;  font-size: 10px; animation-delay: 1.2s; opacity: 0.7; }
.pc-spark-4[b-c8zmxlsbh7] { top: 96px;  right: 9%;  font-size: 13px; animation-delay: 1.8s; }

@keyframes pc-spark-twinkle-b-c8zmxlsbh7 {
    0%, 100% { opacity: 0.2; transform: scale(0.9) rotate(0deg); }
    50%      { opacity: 1;   transform: scale(1.12) rotate(8deg); }
}

/* ── Eyebrow ─────────────────────────────────────────────────── */

.pc-eyebrow[b-c8zmxlsbh7] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.28);
    color: #4ade80;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.pc-eyebrow-dot[b-c8zmxlsbh7] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.85);
    animation: pc-pulse-b-c8zmxlsbh7 2.2s ease-in-out infinite;
}

@keyframes pc-pulse-b-c8zmxlsbh7 {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.82); }
}

/* ── Hero icon with concentric rings ─────────────────────────── */

.pc-icon-frame[b-c8zmxlsbh7] {
    position: relative;
    z-index: 2;
    width: 92px;
    height: 92px;
    margin: 0 auto 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pc-icon-ring[b-c8zmxlsbh7] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(74, 222, 128, 0.5);
    animation: pc-ring-b-c8zmxlsbh7 2.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    opacity: 0;
}

.pc-icon-ring-1[b-c8zmxlsbh7] { animation-delay: 0s;    }
.pc-icon-ring-2[b-c8zmxlsbh7] { animation-delay: 0.8s;  }
.pc-icon-ring-3[b-c8zmxlsbh7] { animation-delay: 1.6s;  }

@keyframes pc-ring-b-c8zmxlsbh7 {
    0%   { transform: scale(1);    opacity: 0.65; }
    80%  { transform: scale(1.85); opacity: 0;    }
    100% { transform: scale(1.85); opacity: 0;    }
}

.pc-icon[b-c8zmxlsbh7] {
    position: relative;
    z-index: 1;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 35%, rgba(74, 222, 128, 0.28), rgba(74, 222, 128, 0.10) 70%);
    border: 1px solid rgba(74, 222, 128, 0.55);
    color: #4ade80;
    font-size: 42px;
    box-shadow:
        0 14px 36px -10px rgba(74, 222, 128, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --fa-primary-color: #ecfdf5;
    --fa-secondary-color: #4ade80;
    --fa-secondary-opacity: 0.95;
    animation: pc-icon-pop-b-c8zmxlsbh7 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

@keyframes pc-icon-pop-b-c8zmxlsbh7 {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Hero copy ───────────────────────────────────────────────── */

.pc-headline[b-c8zmxlsbh7] {
    position: relative;
    z-index: 2;
    margin: 0 0 10px;
    color: #fff;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.pc-subtitle[b-c8zmxlsbh7] {
    position: relative;
    z-index: 2;
    color: #9ca3af;
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 460px;
    margin: 0 auto 28px;
}

/* ── Summary card ────────────────────────────────────────────── */

.pc-summary[b-c8zmxlsbh7] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 auto 28px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    max-width: 360px;
    text-align: left;
}

.pc-summary-row[b-c8zmxlsbh7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}

.pc-summary-row:last-child[b-c8zmxlsbh7] { border-bottom: 0; }

.pc-summary-label[b-c8zmxlsbh7] {
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pc-summary-value[b-c8zmxlsbh7] {
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
}

.pc-summary-value-success[b-c8zmxlsbh7] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #4ade80;
}

.pc-summary-dot[b-c8zmxlsbh7] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.85);
    animation: pc-pulse-b-c8zmxlsbh7 2.2s ease-in-out infinite;
}

/* ── CTAs ────────────────────────────────────────────────────── */

.pc-ctas[b-c8zmxlsbh7] {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.pc-cta[b-c8zmxlsbh7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    min-width: 180px;
}

.pc-cta-primary[b-c8zmxlsbh7] {
    background: linear-gradient(180deg, #F97316, #EA580C);
    color: #fff;
    border: 1px solid rgba(249, 115, 22, 0.6);
    box-shadow: 0 8px 24px -10px rgba(249, 115, 22, 0.55);
}

.pc-cta-primary:hover[b-c8zmxlsbh7] {
    background: linear-gradient(180deg, #FB923C, #F97316);
    box-shadow: 0 12px 30px -10px rgba(249, 115, 22, 0.70);
    color: #fff;
    transform: translateY(-1px);
}

.pc-cta-outline[b-c8zmxlsbh7] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
}

.pc-cta-outline:hover[b-c8zmxlsbh7] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.30);
    color: #fff;
}

.pc-cta i[b-c8zmxlsbh7] {
    font-size: 11px;
    transition: transform 0.18s ease;
}

.pc-cta-primary:hover i[b-c8zmxlsbh7] {
    transform: translateX(3px);
}

.pc-cta-outline:hover i[b-c8zmxlsbh7] {
    transform: translate(2px, -2px);
}

/* ── Fine print ──────────────────────────────────────────────── */

.pc-fineprint[b-c8zmxlsbh7] {
    position: relative;
    z-index: 2;
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pc-fineprint i[b-c8zmxlsbh7] {
    font-size: 11px;
    opacity: 0.7;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 620px) {
    .pc-card[b-c8zmxlsbh7] {
        padding: 40px 22px 28px;
        border-radius: 18px;
    }

    .pc-headline[b-c8zmxlsbh7] {
        font-size: 28px;
    }

    .pc-ctas[b-c8zmxlsbh7] { flex-direction: column; }
    .pc-cta[b-c8zmxlsbh7] { width: 100%; min-width: 0; }

    .pc-spark-3[b-c8zmxlsbh7], .pc-spark-4[b-c8zmxlsbh7] { display: none; }
}
/* /Components/Features/Plans/PlanLimitModal.razor.rz.scp.css */
.plm-backdrop[b-e5jo8s64yb] {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 35, 0.55);
    z-index: 1050;
    backdrop-filter: blur(2px);
}

.plm-modal-root[b-e5jo8s64yb] {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    pointer-events: none;
}

.plm-content[b-e5jo8s64yb] {
    pointer-events: auto;
    background: #ffffff;
    border-radius: 1rem;
    border: none;
    overflow: hidden;
    box-shadow: 0 12px 48px rgba(20, 30, 60, 0.28);
    width: 100%;
    max-width: 30rem;
}

.plm-body[b-e5jo8s64yb] {
    padding: 2rem 2rem 1.25rem;
    text-align: center;
}

.plm-icon[b-e5jo8s64yb] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6aa7ff, #4977dc);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    --fa-primary-color: #ffffff;
    --fa-secondary-color: #cfe1ff;
    --fa-secondary-opacity: 0.9;
}

.plm-title[b-e5jo8s64yb] {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1f2a44;
}

.plm-copy[b-e5jo8s64yb] {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.45;
    margin: 0 auto 1.25rem;
    max-width: 26rem;
}

.plm-stat[b-e5jo8s64yb] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    background: rgba(217, 83, 79, 0.08);
    color: #8a2c29;
    font-variant-numeric: tabular-nums;
}

.plm-stat-used[b-e5jo8s64yb] {
    font-weight: 700;
    font-size: 1.05rem;
}

.plm-stat-sep[b-e5jo8s64yb] {
    opacity: 0.55;
}

.plm-stat-max[b-e5jo8s64yb] {
    font-weight: 500;
}

.plm-stat-label[b-e5jo8s64yb] {
    margin-left: 0.4rem;
    font-size: 0.8rem;
    opacity: 0.85;
}

.plm-actions[b-e5jo8s64yb] {
    display: flex;
    gap: 0.65rem;
    padding: 0 1.5rem 1.5rem;
    justify-content: flex-end;
}

.plm-btn[b-e5jo8s64yb] {
    border: none;
    border-radius: 0.55rem;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.plm-btn-ghost[b-e5jo8s64yb] {
    background: transparent;
    color: #4a5568;
}

.plm-btn-ghost:hover[b-e5jo8s64yb] {
    background: rgba(120, 130, 150, 0.1);
}

.plm-btn-primary[b-e5jo8s64yb] {
    background: linear-gradient(135deg, #5a9bff, #4878dc);
    color: #fff;
    box-shadow: 0 4px 12px rgba(72, 120, 220, 0.25);
}

.plm-btn-primary:hover[b-e5jo8s64yb] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(72, 120, 220, 0.32);
    color: #fff;
}
/* /Components/Features/Plans/PlanUsageMeter.razor.rz.scp.css */
.pum[b-700pbl4bd8] {
    --pum-fill: #5a9bff;
    --pum-track: rgba(120, 130, 150, 0.18);
    --pum-text: #4a5568;

    padding: 0.6rem 0.75rem;
    border-radius: 0.6rem;
    background: rgba(120, 130, 150, 0.06);
    border: 1px solid rgba(120, 130, 150, 0.14);
}

.pum-state-amber[b-700pbl4bd8] {
    --pum-fill: #e8a13a;
    --pum-track: rgba(232, 161, 58, 0.18);
    --pum-text: #8c5a16;
    background: rgba(232, 161, 58, 0.06);
    border-color: rgba(232, 161, 58, 0.28);
}

.pum-state-red[b-700pbl4bd8] {
    --pum-fill: #d9534f;
    --pum-track: rgba(217, 83, 79, 0.18);
    --pum-text: #8a2c29;
    background: rgba(217, 83, 79, 0.06);
    border-color: rgba(217, 83, 79, 0.28);
}

.pum-header[b-700pbl4bd8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.35rem;
}

.pum-label[b-700pbl4bd8] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--pum-text);
}

.pum-count[b-700pbl4bd8] {
    font-size: 0.85rem;
    color: var(--pum-text);
    font-variant-numeric: tabular-nums;
}

.pum-used[b-700pbl4bd8] {
    font-weight: 600;
}

.pum-sep[b-700pbl4bd8] {
    margin: 0 0.25rem;
    opacity: 0.55;
}

.pum-max[b-700pbl4bd8] {
    opacity: 0.85;
}

.pum-bar[b-700pbl4bd8] {
    height: 6px;
    width: 100%;
    border-radius: 999px;
    background: var(--pum-track);
    overflow: hidden;
}

.pum-fill[b-700pbl4bd8] {
    height: 100%;
    background: var(--pum-fill);
    border-radius: 999px;
    transition: width 200ms ease-out;
}

.pum-footer[b-700pbl4bd8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--pum-text);
}

.pum-plan[b-700pbl4bd8] {
    opacity: 0.75;
}

.pum-status[b-700pbl4bd8] {
    font-weight: 600;
}
/* /Components/Features/Profiles/List/AllProfiles.razor.rz.scp.css */
.ap-header[b-qndkgdlr8t] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ap-title[b-qndkgdlr8t] {
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.ap-subtitle[b-qndkgdlr8t] {
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    margin: 4px 0 0;
}

.ap-count-badge[b-qndkgdlr8t] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.ap-filter-bar[b-qndkgdlr8t] {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    gap: 2px;
    margin-bottom: 20px;
}

.ap-filter-btn[b-qndkgdlr8t] {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ap-filter-btn:hover[b-qndkgdlr8t] {
    color: #fff;
    text-decoration: none;
}

.ap-filter-btn.is-active[b-qndkgdlr8t] {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}
/* /Components/Features/Profiles/List/ProfileCard.razor.rz.scp.css */
.profile-card[b-899o1229g8] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.profile-card:hover[b-899o1229g8] {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7);
    transform: translateY(-2px);
}

/* ── Header ── */
.pc-header[b-899o1229g8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pc-avatar[b-899o1229g8] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF7F27 0%, #546EFA 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.pc-avatar-img[b-899o1229g8] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-avatar-letter[b-899o1229g8] {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.pc-identity[b-899o1229g8] {
    flex: 1;
    min-width: 0;
}

.pc-handle[b-899o1229g8] {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-name[b-899o1229g8] {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-type-badge[b-899o1229g8] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pc-type-badge--user[b-899o1229g8] {
    background: rgba(255, 127, 39, 0.14);
    color: #FF7F27;
}

.pc-type-badge--team[b-899o1229g8] {
    background: rgba(84, 110, 250, 0.16);
    color: #8c9dfc;
}

/* ── Body ── */
.pc-body[b-899o1229g8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
}

.pc-row[b-899o1229g8] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pc-row-icon[b-899o1229g8] {
    color: #6c757d;
    font-size: 13px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.pc-row-text[b-899o1229g8] {
    color: #d1d5db;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.pc-email[b-899o1229g8] {
    flex: 1;
}

.pc-row-label[b-899o1229g8] {
    color: #6c757d;
    font-size: 12.5px;
}

.pc-verified-badge[b-899o1229g8] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 600;
}

.pc-verified-badge--yes[b-899o1229g8] {
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
}

.pc-verified-badge--no[b-899o1229g8] {
    background: rgba(156, 163, 175, 0.12);
    color: #9ca3af;
}

.pc-plan-badge[b-899o1229g8] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(249, 115, 22, 0.14);
    color: #F97316;
}

/* ── Footer ── */
.pc-footer[b-899o1229g8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* The footer buttons are plain `hl-btn` from honestli.css — no local button
   classes here. See wwwroot/showcase.html for the markup. */
/* /Components/Features/Responses/CreateResponse.razor.rz.scp.css */
/* ===== Page wrapper & glows ===== */
.cr-page[b-oykdjsxypp] {
    position: relative;
    overflow-x: clip;
}

.cr-glow-orange[b-oykdjsxypp] {
    position: absolute;
    top: -80px;
    left: -120px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255,127,39,.14), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.cr-glow-violet[b-oykdjsxypp] {
    position: absolute;
    bottom: 80px;
    right: -140px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(84,110,250,.11), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.cr-inner[b-oykdjsxypp] {
    position: relative;
    z-index: 1;
    padding-top: 64px;
    padding-bottom: 88px;
    max-width: 680px;
}

/* ===== Topic card ===== */
.topic-card[b-oykdjsxypp] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 24px;
    box-shadow: 0 10px 30px -16px rgba(0,0,0,.5);
}

.cr-eyebrow[b-oykdjsxypp] {
    color: #F97316;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cr-topic-title[b-oykdjsxypp] {
    color: #fff;
    font-size: clamp(20px, 3vw, 26px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    line-height: 1.2;
}

/* ===== "What they're looking for" — the author's feedback ask ===== */
.cr-ask[b-oykdjsxypp] {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(249, 115, 22, 0.06);
    border: 1px solid rgba(249, 115, 22, 0.18);
}

.cr-ask-label[b-oykdjsxypp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fdba74;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 8px;
    --fa-primary-color: #fdba74;
    --fa-secondary-color: #fdba74;
    --fa-secondary-opacity: 0.4;
}

.cr-ask-body[b-oykdjsxypp] {
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.6;
}

/* Markdown is injected via MarkupString, so its <p> tags don't carry the
   scoped attribute — reach them with ::deep to trim the trailing margin. */
.cr-ask-body[b-oykdjsxypp]  > :last-child {
    margin-bottom: 0;
}

/* ===== Form card ===== */
.form-card[b-oykdjsxypp] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 2px solid #F97316;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 30px -16px rgba(0,0,0,.5);
}

/* ===== Login-required state ===== */
.form-card.login-required[b-oykdjsxypp] {
    text-align: center;
}

.login-required-icon[b-oykdjsxypp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.25);
    color: #F97316;
    font-size: 22px;
    margin: 0 auto 16px;
}

.login-required-title[b-oykdjsxypp] {
    color: #fff;
    font-size: clamp(20px, 3vw, 24px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.login-required-body[b-oykdjsxypp] {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 auto 24px;
    max-width: 460px;
}

.login-required-footnote[b-oykdjsxypp] {
    color: #6c7a93;
    font-size: 13px;
    margin: 16px 0 0;
}

/* ===== Pre-form notification hint ===== */
.notify-hint[b-oykdjsxypp] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(96, 165, 250, 0.06);
    border: 1px solid rgba(96, 165, 250, 0.12);
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.5;
}

.notify-hint i[b-oykdjsxypp] {
    color: #60A5FA;
    margin-top: 2px;
    flex-shrink: 0;
}

.notify-hint a[b-oykdjsxypp] {
    color: #60A5FA;
    text-decoration: none;
    font-weight: 500;
}

.notify-hint a:hover[b-oykdjsxypp] {
    text-decoration: underline;
}

/* ===== Success state ===== */
.success-badge[b-oykdjsxypp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.25);
    color: #4ade80;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.success-title[b-oykdjsxypp] {
    color: #fff;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.success-body[b-oykdjsxypp] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 28px;
}

/* ===== CTA card (sign-up after success) ===== */
.cta-card[b-oykdjsxypp] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #12213A 0%, #1a2b4e 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 36px 32px;
    margin-top: 24px;
}

.cta-glow[b-oykdjsxypp] {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(255,127,39,.20), transparent 65%);
    pointer-events: none;
}

.cta-headline[b-oykdjsxypp] {
    position: relative;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.cta-body[b-oykdjsxypp] {
    position: relative;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 24px;
    max-width: 420px;
}

.cta-actions[b-oykdjsxypp] {
    position: relative;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

/* ===== Buttons ===== */
[b-oykdjsxypp] .btn-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    background: #FF7F27;
    border: none;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 16px -6px rgba(255,127,39,.45);
}

[b-oykdjsxypp] .btn-hero-cta:hover:not(:disabled) {
    background: #EA580C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(255,127,39,.6);
}

[b-oykdjsxypp] .btn-hero-cta:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

[b-oykdjsxypp] .btn-hero-cta-block {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 14px 24px;
    font-size: 16px;
}

[b-oykdjsxypp] .btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

[b-oykdjsxypp] .btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* ===== Animations ===== */
.fade-in[b-oykdjsxypp] {
    animation: fadeIn-b-oykdjsxypp 0.4s ease-in-out;
}

@keyframes fadeIn-b-oykdjsxypp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .cr-inner[b-oykdjsxypp] {
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .form-card[b-oykdjsxypp] {
        padding: 24px 20px;
    }

    .cta-card[b-oykdjsxypp] {
        padding: 28px 20px;
    }
}
/* /Components/Features/Responses/List/AllResponses.razor.rz.scp.css */
.mr-title[b-a3s5p613rd] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.mr-subtitle[b-a3s5p613rd] {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 0;
}

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

.mr-empty-card[b-a3s5p613rd] {
    max-width: 460px;
    margin-top: 40px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 36px 28px;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.5);
}

.mr-empty-icon[b-a3s5p613rd] {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 14px;
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #4ade80;
}

.mr-empty-heading[b-a3s5p613rd] {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.mr-empty-body[b-a3s5p613rd] {
    color: #9ca3af;
    font-size: 14px;
}

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

.mr-card[b-a3s5p613rd] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mr-card:hover[b-a3s5p613rd] {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.65);
    transform: translateY(-2px);
}

.mr-card-header[b-a3s5p613rd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mr-card-title-wrap[b-a3s5p613rd] {
    flex: 1;
    min-width: 0;
}

.mr-card-title[b-a3s5p613rd] {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mr-card-body[b-a3s5p613rd] {
    flex: 1;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mr-meta-row[b-a3s5p613rd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #9ca3af;
    font-size: 12px;
}

.mr-meta-row i[b-a3s5p613rd] {
    margin-right: 4px;
    color: #6b7280;
}

.mr-meta-sep[b-a3s5p613rd] {
    color: #4b5563;
}

.mr-meta-validated[b-a3s5p613rd] {
    color: #4ade80;
}

.mr-meta-validated i[b-a3s5p613rd] {
    color: #4ade80;
}

.mr-meta-flagged[b-a3s5p613rd] {
    color: #ff7a88;
}

.mr-meta-flagged i[b-a3s5p613rd] {
    color: #ff7a88;
}

.mr-section[b-a3s5p613rd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mr-section-label[b-a3s5p613rd] {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.mr-section-text[b-a3s5p613rd] {
    color: #d1d5db;
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
}

.mr-full-text[b-a3s5p613rd] {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mr-card-footer[b-a3s5p613rd] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Sentiment pill ───────────────────────────────────────── */

.mr-sent-pill[b-a3s5p613rd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.mr-sent-dot[b-a3s5p613rd] {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    flex-shrink: 0;
}

.mr-sent-positive[b-a3s5p613rd] { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.mr-sent-positive .mr-sent-dot[b-a3s5p613rd] { background: #22c55e; }

.mr-sent-neutral[b-a3s5p613rd] { background: rgba(156, 163, 175, 0.16); color: #9ca3af; }
.mr-sent-neutral .mr-sent-dot[b-a3s5p613rd] { background: #9ca3af; }

.mr-sent-critical[b-a3s5p613rd] { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.mr-sent-critical .mr-sent-dot[b-a3s5p613rd] { background: #ef4444; }

/* ── Buttons ──────────────────────────────────────────────── */

/* None local — the card actions are plain `hl-btn` from honestli.css.
   See wwwroot/showcase.html for the markup. */
/* /Components/Features/Responses/List/MyResponses.razor.rz.scp.css */
/* Card / grid styles mirror Honestli.Web/Components/Features/Responses/List/AllResponses.razor.css. */

.mr-empty-card[b-uzq5um4n4v] {
    max-width: 460px;
    margin-top: 40px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 36px 28px;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.5);
}

.mr-empty-icon[b-uzq5um4n4v] {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 14px;
    background: rgba(74, 222, 128, 0.10);
    border: 1px solid rgba(74, 222, 128, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #4ade80;
}

.mr-empty-heading[b-uzq5um4n4v] {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.mr-empty-body[b-uzq5um4n4v] {
    color: #9ca3af;
    font-size: 14px;
}

.mr-card[b-uzq5um4n4v] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mr-card:hover[b-uzq5um4n4v] {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.65);
    transform: translateY(-2px);
}

.mr-card-header[b-uzq5um4n4v] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mr-card-title-wrap[b-uzq5um4n4v] {
    flex: 1;
    min-width: 0;
}

.mr-card-title[b-uzq5um4n4v] {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mr-card-body[b-uzq5um4n4v] {
    flex: 1;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mr-meta-row[b-uzq5um4n4v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #9ca3af;
    font-size: 12px;
}

.mr-meta-row i[b-uzq5um4n4v] {
    margin-right: 4px;
    color: #6b7280;
}

.mr-meta-sep[b-uzq5um4n4v] {
    color: #4b5563;
}

.mr-section[b-uzq5um4n4v] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mr-section-label[b-uzq5um4n4v] {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

.mr-section-text[b-uzq5um4n4v] {
    color: #d1d5db;
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
}

/* Structured answers: one question/answer pair per row */

.mr-qa[b-uzq5um4n4v] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mr-qa + .mr-qa[b-uzq5um4n4v] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.mr-qa-question[b-uzq5um4n4v] {
    color: #cbd5e1;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
}

.mr-card-footer[b-uzq5um4n4v] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Status pill */

.mr-status-pill[b-uzq5um4n4v] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.mr-status-success[b-uzq5um4n4v] { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.mr-status-success .mr-sent-dot[b-uzq5um4n4v] { background: #22c55e; }

.mr-status-info[b-uzq5um4n4v] { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
.mr-status-info .mr-sent-dot[b-uzq5um4n4v] { background: #3b82f6; }

.mr-status-neutral[b-uzq5um4n4v] { background: rgba(156, 163, 175, 0.16); color: #d1d5db; }
.mr-status-neutral .mr-sent-dot[b-uzq5um4n4v] { background: #9ca3af; }

.mr-status-warning[b-uzq5um4n4v] { background: rgba(234, 179, 8, 0.18); color: #facc15; }
.mr-status-warning .mr-sent-dot[b-uzq5um4n4v] { background: #eab308; }

.mr-status-muted[b-uzq5um4n4v] { background: rgba(156, 163, 175, 0.10); color: #9ca3af; }
.mr-status-muted .mr-sent-dot[b-uzq5um4n4v] { background: #6b7280; }

/* Sentiment pill (reused for in-card sentiment hint) */

.mr-sent-pill[b-uzq5um4n4v] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.mr-sent-dot[b-uzq5um4n4v] {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    flex-shrink: 0;
}

.mr-sent-positive[b-uzq5um4n4v] { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.mr-sent-positive .mr-sent-dot[b-uzq5um4n4v] { background: #22c55e; }

.mr-sent-critical[b-uzq5um4n4v] { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.mr-sent-critical .mr-sent-dot[b-uzq5um4n4v] { background: #ef4444; }

/* Buttons */

/* None local — the card actions and the confirm modal use plain `hl-btn` from
   honestli.css. See wwwroot/showcase.html for the markup. */

/* Confirm modal */

.mr-modal-backdrop[b-uzq5um4n4v] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(4px);
}

.mr-modal[b-uzq5um4n4v] {
    background: #0f1c33;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    width: min(440px, 92vw);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65);
    font-family: "Lexend", system-ui, sans-serif;
}

.mr-modal-header[b-uzq5um4n4v] {
    padding: 16px 18px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mr-modal-title[b-uzq5um4n4v] {
    color: #fff;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.mr-modal-body[b-uzq5um4n4v] {
    padding: 14px 18px;
    color: #d1d5db;
    font-size: 13.5px;
    line-height: 1.55;
}

.mr-modal-footer[b-uzq5um4n4v] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px 16px;
}
/* /Components/Features/Responses/List/TopicResponsesPanel.razor.rz.scp.css */
/* Reading pane for the Feed detail pane (#336). Master list of compact rows
   on the left, the selected response on the right; the action bar is pinned
   below the scrolling text. Selection grammar: blue = "reading" (kept from
   the old open-card state), green rail = unread, matching the Feed. Below
   992px the panes swap in place (list <-> detail) with a back affordance. */

/* === Split layout === */

/* Fills the height feed-right has left after the topic header and lens
   toggle; the columns scroll internally, so the pane itself never does. */
.rp-split[b-31ke2cm2lk] {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(220px, 32%, 300px) minmax(0, 1fr);
    column-gap: var(--hl-sp-5);
    overflow: hidden;
}

.rp-master[b-31ke2cm2lk] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

/* === Top bar: count + sentiment filters === */
.rp-bar[b-31ke2cm2lk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hl-sp-2);
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-bottom: var(--hl-sp-3);
}

.rp-count[b-31ke2cm2lk] {
    font-size: var(--hl-fs-xs);
    color: var(--hl-text-muted);
}

.rp-filters[b-31ke2cm2lk] {
    display: flex;
    gap: var(--hl-sp-1);
    flex-wrap: wrap;
}

.sent-filter[b-31ke2cm2lk] {
    padding: 3px 9px;
    border-radius: var(--hl-r-pill);
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #9ca3af;
    font-size: 11px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-transform: capitalize;
    transition: all 0.15s;
}

.sent-filter:hover[b-31ke2cm2lk] {
    border-color: rgba(255, 255, 255, 0.2);
    color: #d1d5db;
}

.sent-filter-all[b-31ke2cm2lk]      { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.03); color: #e5e7eb; }
.sent-filter-positive[b-31ke2cm2lk] { border-color: rgba(74,222,128,.45);  background: rgba(34,197,94,.06);   color: #4ade80; }
.sent-filter-neutral[b-31ke2cm2lk]  { border-color: rgba(156,163,175,.4);  background: rgba(156,163,175,.06); color: #d1d5db; }
.sent-filter-critical[b-31ke2cm2lk] { border-color: rgba(248,113,113,.45); background: rgba(239,68,68,.06);   color: #f87171; }

/* === Master list === */
.rp-list[b-31ke2cm2lk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-2);
    padding: 1px 2px 1px 1px;   /* keep focus rings off the clip edge */
}

.rp-empty[b-31ke2cm2lk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--hl-sp-3);
    padding: var(--hl-sp-8) 0;
    color: var(--hl-text-muted);
    text-align: center;
}

.rp-empty i[b-31ke2cm2lk] {
    font-size: 32px;
}

.rp-empty p[b-31ke2cm2lk] {
    margin: 0;
}

.rp-no-results[b-31ke2cm2lk] {
    color: var(--hl-text-muted);
    font-size: var(--hl-fs-sm);
    text-align: center;
    padding: var(--hl-sp-5) 0;
    margin: 0;
}

/* === Response rows === */

/* The rail is a constant-width border so state changes never shift layout:
   transparent when read, green when unread, blue while selected. */
.rp-item[b-31ke2cm2lk] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: all 0.12s;
    flex-shrink: 0;
}

.rp-item:hover[b-31ke2cm2lk] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    border-left-color: transparent;
}

.rp-item-unread[b-31ke2cm2lk] {
    background: rgba(74, 222, 128, 0.045);
    border-color: rgba(74, 222, 128, 0.18);
    border-left-color: #4ade80;
}

.rp-item-unread:hover[b-31ke2cm2lk] {
    background: rgba(74, 222, 128, 0.085);
    border-color: rgba(74, 222, 128, 0.3);
    border-left-color: #4ade80;
}

.rp-item-active[b-31ke2cm2lk],
.rp-item-active:hover[b-31ke2cm2lk] {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.6);
    border-left-color: #60A5FA;
    box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.2),
                0 4px 16px -6px rgba(96, 165, 250, 0.4);
}

.rp-item-top[b-31ke2cm2lk] {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.rp-dot[b-31ke2cm2lk] {
    width: 8px;
    height: 8px;
    border-radius: 99px;
    flex-shrink: 0;
}

.rp-dot-positive[b-31ke2cm2lk] { background: #22c55e; }
.rp-dot-neutral[b-31ke2cm2lk]  { background: #9ca3af; }
.rp-dot-critical[b-31ke2cm2lk] { background: #ef4444; }

.rp-item-handle[b-31ke2cm2lk] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
}

.rp-item-unread .rp-item-handle[b-31ke2cm2lk],
.rp-item-active .rp-item-handle[b-31ke2cm2lk] {
    color: #fff;
}

.rp-item-unread .rp-item-handle[b-31ke2cm2lk] {
    font-weight: 600;
}

.rp-item-time[b-31ke2cm2lk] {
    flex-shrink: 0;
    color: var(--hl-text-faint);
    font-size: 11.5px;
}

.rp-item-preview[b-31ke2cm2lk] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-top: 5px;
    color: #9ca3af;
    font-size: 12.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.rp-item-unread .rp-item-preview[b-31ke2cm2lk] {
    color: #d1d5db;
}

/* === Detail pane === */

/* The reading surface is a blue-tinted card — the same "reading" accent as
   the active row, so the selected row and the open response read as one
   connected state (and the pane no longer floats on the raw page bg). */
.rp-detail[b-31ke2cm2lk] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    padding: var(--hl-sp-4) var(--hl-sp-5);
    background: rgba(96, 165, 250, 0.045);
    border: 1px solid rgba(96, 165, 250, 0.22);
    border-radius: 14px;
}

.rp-detail-head[b-31ke2cm2lk] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-3);
    flex-shrink: 0;
    padding-bottom: var(--hl-sp-3);
    border-bottom: 1px solid rgba(96, 165, 250, 0.16);
}

.response-avatar[b-31ke2cm2lk] {
    width: 28px;
    height: 28px;
    border-radius: 99px;
    background: linear-gradient(135deg, #546EFA, #60A5FA);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    flex-shrink: 0;
}

.rp-detail-avatar[b-31ke2cm2lk] {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.rp-detail-id[b-31ke2cm2lk] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.rp-detail-handle[b-31ke2cm2lk] {
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rp-detail-time[b-31ke2cm2lk] {
    color: var(--hl-text-faint);
    font-size: 12px;
}

.rp-detail-body[b-31ke2cm2lk] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--hl-sp-4) var(--hl-sp-2) var(--hl-sp-4) 0;
}

.rp-detail-text[b-31ke2cm2lk] {
    margin: 0;
    max-width: 68ch;
    color: #e5e7eb;
    font-size: 15px;
    line-height: 1.7;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.rp-detail-empty[b-31ke2cm2lk] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--hl-sp-3);
    color: var(--hl-text-faint);
    text-align: center;
}

.rp-detail-empty i[b-31ke2cm2lk] {
    font-size: 30px;
}

.rp-detail-empty p[b-31ke2cm2lk] {
    margin: 0;
    font-size: var(--hl-fs-md);
}

/* === Pinned action bar === */
.rp-detail-foot[b-31ke2cm2lk] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-2);
    flex-shrink: 0;
    padding-top: var(--hl-sp-3);
    border-top: 1px solid rgba(96, 165, 250, 0.16);
}

.btn-acknowledge[b-31ke2cm2lk] {
    padding: 9px 18px;
    border-radius: 8px;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.3);
    color: #FDBA74;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
}

.btn-acknowledge:hover:not(:disabled)[b-31ke2cm2lk] {
    background: rgba(249, 115, 22, 0.2);
    border-color: rgba(249, 115, 22, 0.5);
}

.btn-acknowledge:disabled[b-31ke2cm2lk] {
    opacity: 0.6;
    cursor: default;
}

/* Destructive action sits alone at the far edge, away from Acknowledge. */
.btn-delete-response[b-31ke2cm2lk] {
    margin-left: auto;
    flex-shrink: 0;
    padding: 9px 14px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

.btn-delete-response:hover:not(:disabled)[b-31ke2cm2lk] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.55);
    color: #fca5a5;
}

.btn-delete-response:disabled[b-31ke2cm2lk] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Sentiment pill (detail head) === */
.sent-pill[b-31ke2cm2lk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
}

.sent-pill-dot[b-31ke2cm2lk] {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    flex-shrink: 0;
}

.sent-pill-positive[b-31ke2cm2lk] { background: rgba(34,197,94,.16);    color: #4ade80; }
.sent-pill-positive .sent-pill-dot[b-31ke2cm2lk] { background: #22c55e; }

.sent-pill-neutral[b-31ke2cm2lk]  { background: rgba(156,163,175,.16);  color: #9ca3af; }
.sent-pill-neutral  .sent-pill-dot[b-31ke2cm2lk] { background: #9ca3af; }

.sent-pill-critical[b-31ke2cm2lk] { background: rgba(239,68,68,.16);    color: #f87171; }
.sent-pill-critical .sent-pill-dot[b-31ke2cm2lk] { background: #ef4444; }

/* === Pager (mirrors the Feed's topic pager) === */
.rp-pager[b-31ke2cm2lk] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 10px 1px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: var(--hl-sp-3);
}

.rp-pager-btn[b-31ke2cm2lk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #d1d5db;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
}

.rp-pager-btn:hover:not(:disabled)[b-31ke2cm2lk] {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.rp-pager-btn:disabled[b-31ke2cm2lk] {
    opacity: 0.4;
    cursor: not-allowed;
}

.rp-pager-btn-icon[b-31ke2cm2lk] {
    padding: 6px 9px;
}

.rp-pager-btn-next[b-31ke2cm2lk] {
    margin-left: auto;
}

/* === Back affordance (single-pane only) === */
.rp-back[b-31ke2cm2lk] {
    display: none;
    align-items: center;
    gap: 6px;
    width: fit-content;
    margin-bottom: var(--hl-sp-3);
    padding: 6px 10px 6px 6px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: #93C5FD;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.rp-back:hover[b-31ke2cm2lk] {
    color: #BFDBFE;
}

/* === Screen-reader-only sentiment label for the row dots === */
.rp-sr[b-31ke2cm2lk] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === Acknowledge toast === */
.ack-toast[b-31ke2cm2lk] {
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    background: linear-gradient(var(--hl-success-soft), var(--hl-success-soft)), var(--hl-bg-elev);
    border: 1px solid rgba(74, 222, 128, 0.3);
    color: var(--hl-success);
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 600;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    animation: ackToastIn-b-31ke2cm2lk 0.2s ease;
}

@keyframes ackToastIn-b-31ke2cm2lk {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* === Single-pane (narrow) === */

/* Below 992px the panes swap in place: list by default, detail while
   reading. Down to 768px the Feed still fixes the page height, so the
   visible pane keeps its internal scroll and the action bar stays pinned
   by the same flex chain as desktop. */
@media (max-width: 991.98px) {
    .rp-split[b-31ke2cm2lk] {
        display: flex;
        flex-direction: column;
    }

    .rp-master[b-31ke2cm2lk] {
        border-right: none;
        padding-right: 0;
        flex: 1 1 auto;
        min-height: 0;
    }

    .rp-detail[b-31ke2cm2lk] {
        display: none;
        padding: var(--hl-sp-4);
    }

    .rp-split-reading .rp-master[b-31ke2cm2lk] {
        display: none;
    }

    .rp-split-reading .rp-detail[b-31ke2cm2lk] {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
    }

    .rp-back[b-31ke2cm2lk] {
        display: inline-flex;
    }
}

/* Below 768px feed-page goes height:auto and .app-content becomes the
   scroller, so drop the internal scroll regions and pin the action bar
   with sticky instead (FeedTopics.razor.css relaxes .feed-right's
   overflow so .app-content stays the sticky reference). */
@media (max-width: 767.98px) {
    .rp-split[b-31ke2cm2lk] {
        overflow: visible;
    }

    .rp-list[b-31ke2cm2lk] {
        overflow-y: visible;
        padding: 1px;
    }

    .rp-detail-body[b-31ke2cm2lk] {
        flex: none;
        overflow-y: visible;
        padding-right: 0;
    }

    .rp-detail-foot[b-31ke2cm2lk] {
        position: sticky;
        bottom: 0;
        /* Reproduce the card tint over the page bg so the pinned bar
           matches the surface the text scrolls under it on. */
        background: linear-gradient(rgba(96, 165, 250, 0.045), rgba(96, 165, 250, 0.045)), var(--hl-bg);
        padding-bottom: var(--hl-sp-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ack-toast[b-31ke2cm2lk] { animation: none; }
    .rp-item[b-31ke2cm2lk],
    .sent-filter[b-31ke2cm2lk],
    .btn-acknowledge[b-31ke2cm2lk],
    .btn-delete-response[b-31ke2cm2lk],
    .rp-pager-btn[b-31ke2cm2lk] { transition: none; }
}
/* /Components/Features/Responses/OptionDistribution.razor.rz.scp.css */
/* Distribution bars for one multiple-choice question. Surfaces and colors
   come from the honestli.css tokens; this only lays out the rows. */

.od[b-w7lg6t9lqw] {
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-3);
    padding: var(--hl-sp-4);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-r-md, 12px);
    background: var(--hl-bg-elev);
}

.od__head[b-w7lg6t9lqw] {
    display: flex;
    align-items: baseline;
    gap: var(--hl-sp-2);
    flex-wrap: wrap;
}

.od__prompt[b-w7lg6t9lqw] {
    font-weight: 600;
    color: var(--hl-text);
    min-width: 0;
}

.od__legacy[b-w7lg6t9lqw] {
    font-size: var(--hl-fs-xs);
    font-weight: 600;
    padding: 1px 8px;
    border-radius: var(--hl-r-pill);
    border: 1px solid var(--hl-border-strong);
    color: var(--hl-text-muted);
    white-space: nowrap;
}

.od__answered[b-w7lg6t9lqw] {
    margin-left: auto;
    font-size: var(--hl-fs-sm);
    color: var(--hl-text-muted);
    white-space: nowrap;
}

.od__rows[b-w7lg6t9lqw] {
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-2);
}

.od__row[b-w7lg6t9lqw] {
    display: grid;
    grid-template-columns: minmax(72px, 1fr) 2fr auto;
    align-items: center;
    gap: var(--hl-sp-3);
}

.od__label[b-w7lg6t9lqw] {
    font-size: var(--hl-fs-sm);
    color: var(--hl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od__track[b-w7lg6t9lqw] {
    display: block;
    height: 8px;
    border-radius: var(--hl-r-pill);
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.od__fill[b-w7lg6t9lqw] {
    display: block;
    height: 100%;
    border-radius: var(--hl-r-pill);
    background: var(--hl-accent);
    transition: width 0.3s ease;
}

.od__value[b-w7lg6t9lqw] {
    font-size: var(--hl-fs-sm);
    color: var(--hl-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
/* /Components/Features/Responses/StructuredResponseForm.razor.rz.scp.css */
/* The structured responder form — design-system styled so it sits cleanly inside
   CreateResponse's form-card surface. Spacing uses the honestli.css scale.

   IMPORTANT: the outer element is an <EditForm> *component*, so Blazor's scoped
   attribute is never stamped on its rendered <form> — rules on .srf-form would
   silently do nothing, and a CSS custom property defined there wouldn't reach the
   children. All layout therefore lives on .srf-stack and the plain <div>s below
   (which do get the scope attribute), and the badge width is a literal, not a
   cross-element var. */

/* Vertical rhythm for every row in the form (questions stack, note, submit).
   The questions themselves render via the shared <QuestionFieldList>. */
.srf-stack[b-4piweuj7x9] {
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-7);
}

/* The optional free-text note is a separate, secondary section — a divider sets
   it apart from the required questions so it never reads as another question,
   and its content aligns (the 28px badge + gap) with the question bodies above. */
.srf-note[b-4piweuj7x9] {
    padding-top: var(--hl-sp-6);
    padding-left: calc(28px + var(--hl-sp-4));
    border-top: 1px solid var(--hl-border-strong);
}

/* On narrow screens drop the badge indent for the note so it uses full width. */
@media (max-width: 560px) {
    .srf-note[b-4piweuj7x9] {
        padding-left: 0;
    }
}

.srf-optional[b-4piweuj7x9] {
    font-weight: 400;
    color: var(--hl-text-muted);
}

/* Success panel after submit. */
.srf-success__body[b-4piweuj7x9] {
    margin: var(--hl-sp-2) 0 var(--hl-sp-3);
    font-size: var(--hl-fs-sm);
    line-height: 1.6;
}

.srf-success__cta[b-4piweuj7x9] {
    text-decoration: none;
}
/* /Components/Features/Shares/ShareModal.razor.rz.scp.css */
/* All selectors use ::deep — the markup lives under a Bootstrap-managed
   modal that JS re-parents at runtime, and the descendants still belong
   to this component's scope. Same pattern Inreaches uses for ir-modal-*. */

/* ── Modal shell ───────────────────────────────────────────────── */

[b-cx8zgad93n] .sh-modal-content {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: #d1d5db;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

[b-cx8zgad93n] .sh-modal-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.05), transparent);
}

[b-cx8zgad93n] .sh-header-text {
    flex: 1;
    min-width: 0;
}

[b-cx8zgad93n] .sh-header-eyebrow {
    color: #FDBA74;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 4px;
}

[b-cx8zgad93n] .sh-modal-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

[b-cx8zgad93n] .sh-modal-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #d1d5db;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

[b-cx8zgad93n] .sh-modal-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

[b-cx8zgad93n] .sh-modal-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

[b-cx8zgad93n] .sh-modal-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 14px 22px;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ── Alerts ────────────────────────────────────────────────────── */

[b-cx8zgad93n] .sh-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
}

[b-cx8zgad93n] .sh-alert-danger {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.3);
    color: #ff7a88;
}

[b-cx8zgad93n] .sh-alert i {
    flex-shrink: 0;
    font-size: 14px;
    margin-top: 2px;
}

/* ── Loading ───────────────────────────────────────────────────── */

[b-cx8zgad93n] .sh-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 0;
    color: #9ca3af;
    font-size: 14px;
}

[b-cx8zgad93n] .sh-loading i {
    font-size: 18px;
    color: #FDBA74;
}

/* ── Sections ──────────────────────────────────────────────────── */

[b-cx8zgad93n] .sh-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

[b-cx8zgad93n] .sh-section-label {
    color: #9ca3af;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

[b-cx8zgad93n] .sh-section-count {
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
}

[b-cx8zgad93n] .sh-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

[b-cx8zgad93n] .sh-helper {
    color: #9ca3af;
    font-size: 13.5px;
    margin: 0;
}

/* ── Public-topic card ─────────────────────────────────────────── */

[b-cx8zgad93n] .sh-public-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.07), rgba(74, 222, 128, 0.02));
    border: 1px solid rgba(74, 222, 128, 0.22);
    border-radius: 12px;
    padding: 14px 16px;
}

[b-cx8zgad93n] .sh-public-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(74, 222, 128, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4ade80;
    font-size: 15px;
    flex-shrink: 0;
}

[b-cx8zgad93n] .sh-public-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}

[b-cx8zgad93n] .sh-public-body {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.5;
}

/* ── Link pill + copy ──────────────────────────────────────────── */

[b-cx8zgad93n] .sh-link-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    flex-wrap: wrap;
}

[b-cx8zgad93n] .sh-link-pill {
    flex: 1 1 240px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #e5e7eb;
    font-size: 13px;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    min-height: 40px;
}

[b-cx8zgad93n] .sh-link-icon {
    color: #9ca3af;
    flex-shrink: 0;
}

[b-cx8zgad93n] .sh-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* ── Form ──────────────────────────────────────────────────────── */

[b-cx8zgad93n] .sh-form-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 640px) {
    [b-cx8zgad93n] .sh-form-row {
        flex-direction: row;
    }
}

[b-cx8zgad93n] .sh-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

[b-cx8zgad93n] .sh-label {
    color: #d1d5db;
    font-size: 12.5px;
    font-weight: 600;
}

[b-cx8zgad93n] .sh-label-hint {
    color: #6b7280;
    font-weight: 400;
}

[b-cx8zgad93n] .sh-input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    color-scheme: dark;     /* native date picker in dark mode */
}

[b-cx8zgad93n] .sh-input::placeholder {
    color: #6b7280;
}

[b-cx8zgad93n] .sh-input:focus {
    border-color: rgba(249, 115, 22, 0.45);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
}

[b-cx8zgad93n] .sh-field-help {
    color: #6b7280;
    font-size: 11.5px;
}

/* Validation summary text emitted by Blazor — coloured to match the danger alert. */
[b-cx8zgad93n] .validation-message {
    color: #ff7a88;
    font-size: 12px;
    margin-top: 2px;
}

/* ── Buttons ───────────────────────────────────────────────────── */

/* Buttons come from .hl-btn (--primary / --outline, --sm). */

/* ── Icon buttons (row actions) ────────────────────────────────── */

[b-cx8zgad93n] .sh-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #d1d5db;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

[b-cx8zgad93n] .sh-icon-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.18);
}

[b-cx8zgad93n] .sh-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[b-cx8zgad93n] .sh-icon-btn-success {
    border-color: rgba(74, 222, 128, 0.32);
    color: #4ade80;
}

[b-cx8zgad93n] .sh-icon-btn-success:hover:not(:disabled) {
    background: rgba(74, 222, 128, 0.14);
    color: #86efac;
    border-color: rgba(74, 222, 128, 0.5);
}

[b-cx8zgad93n] .sh-icon-btn-danger {
    border-color: rgba(239, 68, 68, 0.30);
    color: #f87171;
}

[b-cx8zgad93n] .sh-icon-btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.14);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.5);
}

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

[b-cx8zgad93n] .sh-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 16px;
    color: #6b7280;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

[b-cx8zgad93n] .sh-empty i {
    font-size: 14px;
}

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

[b-cx8zgad93n] .sh-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[b-cx8zgad93n] .sh-share-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: border-color 0.15s, background 0.15s;
}

[b-cx8zgad93n] .sh-share-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.035);
}

[b-cx8zgad93n] .sh-share-main {
    flex: 1;
    min-width: 0;
}

[b-cx8zgad93n] .sh-share-name {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

[b-cx8zgad93n] .sh-share-meta {
    color: #9ca3af;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

[b-cx8zgad93n] .sh-share-meta-dot {
    color: #4b5563;
}

[b-cx8zgad93n] .sh-share-expiry {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

[b-cx8zgad93n] .sh-share-expiry i {
    font-size: 10.5px;
    opacity: 0.7;
}

[b-cx8zgad93n] .sh-share-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* ── Status pill ───────────────────────────────────────────────── */

[b-cx8zgad93n] .sh-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

[b-cx8zgad93n] .sh-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    flex-shrink: 0;
}

[b-cx8zgad93n] .sh-status-active {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

[b-cx8zgad93n] .sh-status-active .sh-status-dot {
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

[b-cx8zgad93n] .sh-status-disabled {
    background: rgba(245, 158, 11, 0.14);
    color: #fbbf24;
}

[b-cx8zgad93n] .sh-status-disabled .sh-status-dot {
    background: #f59e0b;
}

/* ── Mobile ────────────────────────────────────────────────────── */

@media (max-width: 575px) {
    [b-cx8zgad93n] .sh-modal-header {
        padding: 16px 18px;
    }

    [b-cx8zgad93n] .sh-modal-body {
        padding: 18px 18px;
    }

    [b-cx8zgad93n] .sh-modal-footer {
        padding: 12px 16px;
    }

    [b-cx8zgad93n] .sh-share-card {
        flex-wrap: wrap;
    }

    [b-cx8zgad93n] .sh-share-actions {
        margin-left: auto;
    }
}
/* /Components/Features/Stories/CreateStory.razor.rz.scp.css */
.cs-header[b-dw05uh36cy] {
    margin-bottom: 24px;
}

.cs-title[b-dw05uh36cy] {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    font-family: "Lexend", system-ui, sans-serif;
}

.cs-subtitle[b-dw05uh36cy] {
    color: #9ca3af;
    margin: 6px 0 0;
    font-size: 14px;
    font-family: "Lexend", system-ui, sans-serif;
}

.cs-card[b-dw05uh36cy] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    font-family: "Lexend", system-ui, sans-serif;
}

/* ── Success ────────────────────────────────────────────── */

.cs-success[b-dw05uh36cy] {
    margin-bottom: 20px;
}

.cs-success-badge[b-dw05uh36cy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.25);
    color: #4ade80;
    font-size: 14px;
    font-weight: 600;
    font-family: "Lexend", system-ui, sans-serif;
    margin-bottom: 14px;
}

.cs-success-actions[b-dw05uh36cy] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ── Form fields ─────────────────────────────────────────── */

.cs-label[b-dw05uh36cy] {
    display: block;
    margin-bottom: 6px;
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 500;
    font-family: "Lexend", system-ui, sans-serif;
}

[b-dw05uh36cy] .cs-input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-family: "Lexend", system-ui, sans-serif;
    transition: border-color 0.15s;
    outline: none;
}

[b-dw05uh36cy] .cs-input:focus {
    border-color: rgba(249, 115, 22, 0.5);
}

[b-dw05uh36cy] .cs-input::placeholder {
    color: #6b7280;
}

[b-dw05uh36cy] .cs-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.55;
}

.cs-help-text[b-dw05uh36cy] {
    color: #6b7280;
    font-size: 12px;
    margin-top: 5px;
    font-family: "Lexend", system-ui, sans-serif;
}

[b-dw05uh36cy] .validation-message {
    color: #ff7a88;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* ── Buttons ──────────────────────────────────────────────────
   Form submit, success actions and Back all come from .hl-btn
   (--primary / --outline). No page-local button styles. */
/* /Components/Features/Stories/GetStory.razor.rz.scp.css */
/* ============================================================
   Story detail — /story/{slug}
   Refined dark editorial. Long-form magazine. Pairs with the
   Stories index (Stories.razor.css) — reuses brand tokens
   (orange #F97316, blue #546EFA, surface #12213A, Lexend for UI)
   and adds Source Serif 4 for prose body.
   ============================================================ */

/* ─── Scroll-driven reading progress bar ─── */
.read-progress[b-17i5fbrw7x] {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 1000;
    background: transparent;
    pointer-events: none;
}

.read-progress-bar[b-17i5fbrw7x] {
    width: 100%;
    height: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, #F97316 0%, #FB923C 50%, #FDBA74 100%);
    will-change: transform;
}

/* Native scroll-driven animation (Chrome / Edge / others) */
@supports (animation-timeline: scroll()) {
    .read-progress-bar[b-17i5fbrw7x] {
        animation: progress-grow-b-17i5fbrw7x linear;
        animation-timeline: scroll(root);
    }
}

@keyframes progress-grow-b-17i5fbrw7x {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ─── Page shell ─── */
.story-detail-wrap[b-17i5fbrw7x] {
    padding-top: 32px;
    padding-bottom: 56px;
}

.story-detail[b-17i5fbrw7x] {
    max-width: 980px;
    margin: 0 auto;
}

/* ─── Story action pill ───
   The page-level back link is <BackLink /> (.hl-backlink) — this is the quieter
   pill the 404 state and the end-of-article nav use, and it carries forward
   actions ("Edit this story") as well as backward ones, so it isn't named for
   either direction. */
[b-17i5fbrw7x] .story-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: #cbd5e1;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

[b-17i5fbrw7x] .story-pill:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
}

[b-17i5fbrw7x] .story-pill i {
    font-size: 10.5px;
    transition: transform 0.18s ease;
}

/* Only the backward-pointing pills slide left on hover. */
[b-17i5fbrw7x] .story-pill--back:hover {
    transform: translateX(-2px);
}

[b-17i5fbrw7x] .story-pill--back:hover i {
    transform: translateX(-2px);
}

[b-17i5fbrw7x] .story-pill--prominent {
    padding: 10px 22px 10px 18px;
    font-size: 14px;
    border-color: rgba(249, 115, 22, 0.40);
    color: #fdba74;
}

[b-17i5fbrw7x] .story-pill--prominent:hover {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.55);
    color: #fed7aa;
}

@media (prefers-reduced-motion: reduce) {
    [b-17i5fbrw7x] .story-pill--back:hover,
    [b-17i5fbrw7x] .story-pill--back:hover i {
        transform: none;
    }
}

/* ─── Hero ─── */
.story-hero[b-17i5fbrw7x] {
    margin-bottom: 36px;
    animation: story-fade-up-b-17i5fbrw7x 0.55s ease-out both;
}

.story-eyebrow[b-17i5fbrw7x] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #F97316;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.story-eyebrow-mark[b-17i5fbrw7x] {
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: 0.6;
}

.story-title[b-17i5fbrw7x] {
    color: #fff;
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-weight: 600;
    font-size: clamp(34px, 5vw, 54px);
    line-height: 1.06;
    letter-spacing: -0.022em;
    margin: 0 0 18px;
    max-width: 22ch;
}

.story-deck[b-17i5fbrw7x] {
    color: #cbd5e1;
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.55;
    margin: 0 0 30px;
    max-width: 58ch;
}

/* Meta strip — author + share, hairline rules above/below */
.story-meta-row[b-17i5fbrw7x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.story-author-chip[b-17i5fbrw7x] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.story-avatar[b-17i5fbrw7x] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: "Lexend", system-ui, sans-serif;
    letter-spacing: 0.02em;
}

.story-author-meta[b-17i5fbrw7x] {
    display: flex;
    flex-direction: column;
}

.story-author-name[b-17i5fbrw7x] {
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.005em;
}

.story-author-role[b-17i5fbrw7x] {
    color: #6c757d;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 11.5px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.meta-dot[b-17i5fbrw7x] {
    color: rgba(255, 255, 255, 0.20);
}

/* ─── Share buttons ─── */
.share-group[b-17i5fbrw7x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

[b-17i5fbrw7x] .share-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: #cbd5e1;
    font-size: 12.5px;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

[b-17i5fbrw7x] .share-btn:hover {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.40);
    color: #fdba74;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -8px rgba(249, 115, 22, 0.45);
}

[b-17i5fbrw7x] .share-btn:focus-visible {
    outline: 2px solid #F97316;
    outline-offset: 2px;
}

[b-17i5fbrw7x] .share-copy {
    overflow: visible;
}

[b-17i5fbrw7x] .share-copy .share-copy-tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    padding: 4px 9px;
    border-radius: 6px;
    background: #F97316;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

[b-17i5fbrw7x] .share-copy.copied .share-copy-tip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Tag pills (local re-declaration — Stories.razor.css is scope-isolated) */
.story-tags-row[b-17i5fbrw7x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

[b-17i5fbrw7x] .tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(84, 110, 250, 0.14);
    color: #a5b4fc;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-17i5fbrw7x] .tag-pill:hover {
    background: rgba(84, 110, 250, 0.28);
    color: #c7d2fe;
}

/* ─── Cover image — with dual-axis glow halo ─── */
.story-cover-frame[b-17i5fbrw7x] {
    position: relative;
    margin: 0 0 0;
    animation: story-fade-up-b-17i5fbrw7x 0.6s ease-out 0.08s both;
}

.story-cover-glow[b-17i5fbrw7x] {
    position: absolute;
    inset: -8px;
    border-radius: 28px;
    background:
        radial-gradient(60% 55% at 50% 100%, rgba(249, 115, 22, 0.22), transparent 70%),
        radial-gradient(60% 55% at 50% 0%, rgba(84, 110, 250, 0.18), transparent 70%);
    filter: blur(56px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
}

.story-cover[b-17i5fbrw7x] {
    position: relative;
    z-index: 1;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #12213A;
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.85);
}

.story-cover img[b-17i5fbrw7x] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-cover-mark[b-17i5fbrw7x] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.18);
    font-size: clamp(64px, 12vw, 140px);
    font-weight: 700;
    letter-spacing: -0.04em;
    font-family: "Lexend", system-ui, sans-serif;
}

/* ─── Article body (markdown output) ─── */
.article-prose[b-17i5fbrw7x] {
    margin: 56px auto 0;
    max-width: 680px;
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-size: 18.5px;
    line-height: 1.78;
    color: #d1d5db;
    animation: story-fade-up-b-17i5fbrw7x 0.6s ease-out 0.16s both;
}

/* Drop cap on the article's first paragraph */
.article-prose[b-17i5fbrw7x]  > p:first-child::first-letter {
    float: left;
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-weight: 600;
    font-size: 4.6em;
    line-height: 0.85;
    color: #F97316;
    padding: 6px 14px 0 0;
    margin-top: 4px;
}

.article-prose[b-17i5fbrw7x]  p {
    margin: 0 0 1.25em;
}

.article-prose[b-17i5fbrw7x]  h1,
.article-prose[b-17i5fbrw7x]  h2,
.article-prose[b-17i5fbrw7x]  h3,
.article-prose[b-17i5fbrw7x]  h4 {
    font-family: "Lexend", system-ui, sans-serif;
    color: #fff;
    letter-spacing: -0.015em;
    margin: 2em 0 0.65em;
    line-height: 1.22;
}

.article-prose[b-17i5fbrw7x]  h1 { font-size: 30px; font-weight: 700; }
.article-prose[b-17i5fbrw7x]  h2 { font-size: 24px; font-weight: 600; }
.article-prose[b-17i5fbrw7x]  h3 { font-size: 19px; font-weight: 600; color: #f3f4f6; }
.article-prose[b-17i5fbrw7x]  h4 {
    font-size: 14px;
    font-weight: 600;
    color: #fdba74;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.article-prose[b-17i5fbrw7x]  a {
    color: #FDBA74;
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    transition: color 0.15s ease, background-size 0.15s ease;
}

.article-prose[b-17i5fbrw7x]  a:hover {
    color: #FFB985;
    background-size: 100% 2px;
}

.article-prose[b-17i5fbrw7x]  strong {
    color: #fff;
    font-weight: 600;
}

.article-prose[b-17i5fbrw7x]  em {
    color: #e5e7eb;
}

/* Pull-quote blockquotes */
.article-prose[b-17i5fbrw7x]  blockquote {
    margin: 1.8em 0;
    padding: 6px 0 6px 24px;
    border-left: 3px solid #F97316;
    color: #f3f4f6;
    font-style: italic;
    font-size: 1.18em;
    line-height: 1.55;
}

.article-prose[b-17i5fbrw7x]  blockquote p { margin: 0 0 0.6em; }
.article-prose[b-17i5fbrw7x]  blockquote p:last-child { margin-bottom: 0; }

.article-prose[b-17i5fbrw7x]  ul,
.article-prose[b-17i5fbrw7x]  ol {
    margin: 0 0 1.25em;
    padding-left: 1.4em;
}

.article-prose[b-17i5fbrw7x]  li {
    margin-bottom: 0.4em;
}

.article-prose[b-17i5fbrw7x]  li::marker {
    color: #F97316;
}

.article-prose[b-17i5fbrw7x]  code {
    font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: #fdba74;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.article-prose[b-17i5fbrw7x]  pre {
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    padding: 16px 18px;
    overflow-x: auto;
    margin: 1.5em 0;
    line-height: 1.55;
}

.article-prose[b-17i5fbrw7x]  pre code {
    background: none;
    border: none;
    padding: 0;
    color: #e5e7eb;
    font-size: 14px;
}

.article-prose[b-17i5fbrw7x]  hr {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 2.6em 0;
}

.article-prose[b-17i5fbrw7x]  img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 1.6em 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
}

/* ─── End-of-article ─── */
.story-footer[b-17i5fbrw7x] {
    max-width: 680px;
    margin: 56px auto 0;
}

.story-end-rule[b-17i5fbrw7x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 8px 0 36px;
}

.story-end-dot[b-17i5fbrw7x] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.story-end-dot-orange[b-17i5fbrw7x] { background: rgba(249, 115, 22, 0.55); }
.story-end-dot-blue[b-17i5fbrw7x]   { background: rgba(84, 110, 250, 0.55); }

.story-share-bottom[b-17i5fbrw7x] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 44px;
}

.share-bottom-label[b-17i5fbrw7x] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 11.5px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin: 0;
}

.share-bottom-label i[b-17i5fbrw7x] {
    color: #F97316;
    font-size: 11px;
}

.share-group-lg[b-17i5fbrw7x] {
    gap: 10px;
}

.share-group-lg[b-17i5fbrw7x]  .share-btn {
    width: 42px;
    height: 42px;
    font-size: 14px;
}

/* ─── Contribute banner (matches the Stories index) ─── */
.contribute-banner[b-17i5fbrw7x] {
    padding: 32px 36px;
    border-radius: 18px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    background:
        linear-gradient(135deg, rgba(249, 115, 22, 0.08) 0%, rgba(84, 110, 250, 0.06) 100%),
        rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.contribute-eyebrow[b-17i5fbrw7x] {
    color: #F97316;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.contribute-title[b-17i5fbrw7x] {
    color: #fff;
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 6px;
    letter-spacing: -0.012em;
    line-height: 1.25;
}

.contribute-sub[b-17i5fbrw7x] {
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

[b-17i5fbrw7x] .contribute-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 10px;
    background: #F97316;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    box-shadow: 0 6px 18px -8px rgba(249, 115, 22, 0.55);
}

[b-17i5fbrw7x] .contribute-btn:hover {
    background: #EA580C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -12px rgba(249, 115, 22, 0.7);
}

[b-17i5fbrw7x] .contribute-btn i {
    font-size: 11px;
    transition: transform 0.18s ease;
}

[b-17i5fbrw7x] .contribute-btn:hover i {
    transform: translateX(3px);
}

.story-bottom-nav[b-17i5fbrw7x] {
    margin-top: 36px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ─── 404 / not-found state ─── */
.story-missing[b-17i5fbrw7x] {
    max-width: 520px;
    margin: 80px auto;
    text-align: center;
    padding: 20px;
}

.story-missing-glyph[b-17i5fbrw7x] {
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-size: 88px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: rgba(249, 115, 22, 0.32);
    margin-bottom: 18px;
}

.story-missing-title[b-17i5fbrw7x] {
    color: #fff;
    font-family: "Source Serif 4", "Source Serif Pro", Georgia, serif;
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 10px;
    letter-spacing: -0.01em;
}

.story-missing-sub[b-17i5fbrw7x] {
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 24px;
}

/* ─── Motion ─── */
@keyframes story-fade-up-b-17i5fbrw7x {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .story-hero[b-17i5fbrw7x],
    .story-cover-frame[b-17i5fbrw7x],
    .article-prose[b-17i5fbrw7x] {
        animation: none;
    }
    .read-progress-bar[b-17i5fbrw7x] {
        animation: none;
    }
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
    .story-detail-wrap[b-17i5fbrw7x] {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    .story-title[b-17i5fbrw7x] {
        font-size: 30px;
    }
    .story-deck[b-17i5fbrw7x] {
        font-size: 16.5px;
    }
    .story-meta-row[b-17i5fbrw7x] {
        align-items: flex-start;
    }
    .article-prose[b-17i5fbrw7x] {
        font-size: 17px;
        margin-top: 36px;
    }
    .article-prose[b-17i5fbrw7x]  > p:first-child::first-letter {
        font-size: 3.9em;
        padding-right: 10px;
    }
    .article-prose[b-17i5fbrw7x]  h2 { font-size: 22px; }
    .article-prose[b-17i5fbrw7x]  h3 { font-size: 18px; }
    .contribute-banner[b-17i5fbrw7x] {
        padding: 24px 22px;
        flex-direction: column;
        align-items: flex-start;
    }
    .story-footer[b-17i5fbrw7x] {
        margin-top: 40px;
    }
}

@media (max-width: 480px) {
    .story-title[b-17i5fbrw7x] { font-size: 26px; }
    .article-prose[b-17i5fbrw7x] { font-size: 16.5px; line-height: 1.72; }
    .share-group[b-17i5fbrw7x] { gap: 5px; }
    [b-17i5fbrw7x] .share-btn { width: 32px; height: 32px; font-size: 12px; }
    .story-missing-glyph[b-17i5fbrw7x] { font-size: 72px; }
}
/* /Components/Features/Stories/ListStories.razor.rz.scp.css */
.ls-title[b-noo6znse63] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.ls-subtitle[b-noo6znse63] {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 0;
}

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

/* Action buttons come from .hl-btn (--primary / --outline, --sm).
   The empty state comes from .hl-state. */

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

.ls-card[b-noo6znse63] {
    position: relative;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ls-card:hover[b-noo6znse63] {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.65);
    transform: translateY(-2px);
}

.ls-card-rail[b-noo6znse63] {
    height: 4px;
    background: linear-gradient(90deg, #60A5FA, transparent 85%);
    flex-shrink: 0;
}

.ls-card-body[b-noo6znse63] {
    flex: 1;
    padding: 18px 18px 12px;
    display: flex;
    flex-direction: column;
}

.ls-card-top[b-noo6znse63] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ls-cat-pill[b-noo6znse63] {
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    background: rgba(96, 165, 250, 0.12);
    color: #60A5FA;
    text-transform: uppercase;
}

.ls-time[b-noo6znse63] {
    color: #6b7280;
    font-size: 11.5px;
}

.ls-card-title[b-noo6znse63] {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 8px;
}

.ls-card-excerpt[b-noo6znse63] {
    color: #9ca3af;
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ls-card-footer[b-noo6znse63] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 10px;
}

.ls-author[b-noo6znse63] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 12.5px;
}

.ls-author i[b-noo6znse63] {
    color: #6b7280;
}
/* /Components/Features/Stories/Stories.razor.rz.scp.css */
/* ============================================================
   Stories index page
   Editorial / quiet-confidence aesthetic.
   Brand tokens reused from app: orange #F97316, blue #546EFA.
   ============================================================ */

/* ===== Header ===== */
.stories-header[b-2nknr28c4t] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.stories-eyebrow[b-2nknr28c4t] {
    color: #F97316;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.stories-title[b-2nknr28c4t] {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    line-height: 1.15;
}

.stories-accent[b-2nknr28c4t] {
    color: #FF7F27;
}

.stories-sub[b-2nknr28c4t] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 600px;
}

[b-2nknr28c4t] .stories-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    background: #F97316;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
    box-shadow: 0 4px 10px -4px rgba(249, 115, 22, 0.35);
}

[b-2nknr28c4t] .stories-submit-btn:hover {
    background: #EA580C;
    color: #fff;
    transform: translateY(-1px);
}

.stories-loading[b-2nknr28c4t] {
    padding: 48px 0;
}

/* ===== Toolbar (filter chips, search, sort) ===== */
.stories-toolbar[b-2nknr28c4t] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px 24px;
    align-items: center;
    margin: 8px 0 28px;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.filter-chips[b-2nknr28c4t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

[b-2nknr28c4t] .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    color: #cbd5e1;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    text-transform: lowercase;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

[b-2nknr28c4t] .chip:hover {
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

[b-2nknr28c4t] .chip-active {
    background: rgba(249, 115, 22, 0.18);
    border-color: rgba(249, 115, 22, 0.45);
    color: #fdba74;
}

[b-2nknr28c4t] .chip-count {
    color: #6b7280;
    font-size: 11px;
    font-weight: 600;
}

[b-2nknr28c4t] .chip-active .chip-count {
    color: #fed7aa;
}

.toolbar-controls[b-2nknr28c4t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-form[b-2nknr28c4t] {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon[b-2nknr28c4t] {
    position: absolute;
    left: 12px;
    color: #6b7280;
    font-size: 12px;
    pointer-events: none;
}

.search-input[b-2nknr28c4t] {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 8px 14px 8px 32px;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    width: 220px;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.search-input:focus[b-2nknr28c4t] {
    outline: none;
    border-color: rgba(84, 110, 250, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.search-input[b-2nknr28c4t]::placeholder {
    color: #6b7280;
}

.sort-group[b-2nknr28c4t] {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

[b-2nknr28c4t] .sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    color: #cbd5e1;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-2nknr28c4t] .sort-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

[b-2nknr28c4t] .sort-btn-active {
    background: rgba(84, 110, 250, 0.18);
    color: #c7d2fe;
}

/* ===== Filter empty state ===== */
.stories-filter-empty[b-2nknr28c4t] {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.stories-filter-empty p[b-2nknr28c4t] {
    margin: 0 0 14px;
    font-size: 14.5px;
}

[b-2nknr28c4t] .filter-clear-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: transparent;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
}

[b-2nknr28c4t] .filter-clear-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* ===== Featured story ===== */
.featured-story[b-2nknr28c4t] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(84, 110, 250, 0.12) 0%, #12213A 55%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 40px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
    margin-bottom: 32px;
    transition: border-color 0.2s ease, transform 0.2s ease;
    animation: story-fade-up-b-2nknr28c4t 0.55s ease-out both;
}

.featured-story:hover[b-2nknr28c4t] {
    border-color: rgba(255, 255, 255, 0.22);
}

/* Full-card click target — sits underneath visible content but above the
   gradient backdrop. Keyboard-focusable via :focus-visible. */
[b-2nknr28c4t] .featured-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    text-indent: -9999px;
    overflow: hidden;
    border-radius: inherit;
}

[b-2nknr28c4t] .featured-link:focus-visible {
    outline: 2px solid #F97316;
    outline-offset: -4px;
}

.featured-link-inset[b-2nknr28c4t] {
    display: block;
    width: 100%;
    height: 100%;
}

.featured-main[b-2nknr28c4t],
.featured-cover[b-2nknr28c4t] {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* But re-enable pointer events on actual interactive elements inside. */
.featured-main a[b-2nknr28c4t],
.featured-main .tag-pill[b-2nknr28c4t] {
    pointer-events: auto;
}

.featured-glow[b-2nknr28c4t] {
    position: absolute;
    top: -80px;
    right: -60px;
    width: 280px;
    height: 280px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(84, 110, 250, 0.22), transparent 60%);
}

.featured-badges[b-2nknr28c4t] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.featured-pill[b-2nknr28c4t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 50px;
    background: rgba(84, 110, 250, 0.18);
    color: #8c9dfc;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.featured-pill i[b-2nknr28c4t] {
    font-size: 9px;
}

.featured-title[b-2nknr28c4t] {
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
    margin: 0 0 16px;
}

[b-2nknr28c4t] .featured-title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

[b-2nknr28c4t] .featured-title-link:hover {
    color: #fdba74;
}

.featured-excerpt[b-2nknr28c4t] {
    color: #d1d5db;
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 24px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-meta[b-2nknr28c4t] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.featured-read-cta[b-2nknr28c4t] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.featured-story:hover .featured-read-cta[b-2nknr28c4t] {
    background: rgba(255, 255, 255, 0.06);
}

/* Featured cover image / gradient panel */
.featured-cover[b-2nknr28c4t] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.featured-cover img[b-2nknr28c4t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.featured-cover-mark[b-2nknr28c4t] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.20);
    font-size: 88px;
    font-weight: 700;
    letter-spacing: -0.04em;
    font-family: "Lexend", system-ui, sans-serif;
}

/* ===== Tag pills (shared between featured + cards) ===== */
[b-2nknr28c4t] .tag-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(84, 110, 250, 0.14);
    color: #a5b4fc;
    font-size: 11.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-2nknr28c4t] .tag-pill:hover {
    background: rgba(84, 110, 250, 0.28);
    color: #c7d2fe;
}

[b-2nknr28c4t] .tag-pill-sm {
    padding: 2px 8px;
    font-size: 11px;
}

[b-2nknr28c4t] .tag-pill-more {
    background: rgba(255, 255, 255, 0.06);
    color: #9ca3af;
    pointer-events: none;
}

/* ===== Story author chip ===== */
.story-author-chip[b-2nknr28c4t] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.story-avatar[b-2nknr28c4t] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    font-family: "Lexend", system-ui, sans-serif;
}

.story-avatar-sm[b-2nknr28c4t] {
    width: 28px;
    height: 28px;
    font-size: 10px;
}

.story-author-name[b-2nknr28c4t] {
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
}

.story-author-role[b-2nknr28c4t] {
    color: #6c757d;
    font-size: 11px;
}

/* ===== Story card grid ===== */
.stories-grid[b-2nknr28c4t] {
    display: grid;
    gap: 18px;
    margin-bottom: 32px;
}

.stories-grid-two[b-2nknr28c4t] {
    grid-template-columns: repeat(2, 1fr);
}

.stories-grid-three[b-2nknr28c4t] {
    grid-template-columns: repeat(3, 1fr);
}

.story-card[b-2nknr28c4t] {
    position: relative;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    animation: story-fade-up-b-2nknr28c4t 0.5s ease-out both;
    animation-delay: calc(var(--stagger-i, 0) * 70ms + 80ms);
}

.story-card:hover[b-2nknr28c4t] {
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.7);
    transform: translateY(-3px);
}

@keyframes story-fade-up-b-2nknr28c4t {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.story-cover[b-2nknr28c4t] {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.story-cover img[b-2nknr28c4t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.story-cover-mark[b-2nknr28c4t] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.18);
    font-size: 56px;
    font-weight: 700;
    letter-spacing: -0.04em;
    font-family: "Lexend", system-ui, sans-serif;
}

.story-card-body[b-2nknr28c4t] {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.story-card-title[b-2nknr28c4t] {
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 10px;
}

[b-2nknr28c4t] .story-card-link {
    color: #fff;
    text-decoration: none;
    transition: color 0.15s ease;
}

[b-2nknr28c4t] .story-card-link:hover {
    color: #fdba74;
}

/* Full-card click target via the title link's pseudo-element. */
[b-2nknr28c4t] .story-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.story-card-excerpt[b-2nknr28c4t] {
    color: #9ca3af;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-card-tags[b-2nknr28c4t] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

.story-card-footer[b-2nknr28c4t] {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
}

[b-2nknr28c4t] .story-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #cbd5e1;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}

[b-2nknr28c4t] .story-card-cta:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* ===== Pagination ===== */
.stories-pager[b-2nknr28c4t] {
    margin-bottom: 32px;
}

/* ===== Contribute banner ===== */
.contribute-banner[b-2nknr28c4t] {
    margin-top: 40px;
    padding: 28px 32px;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.contribute-title[b-2nknr28c4t] {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px;
}

.contribute-sub[b-2nknr28c4t] {
    color: #9ca3af;
    margin: 0;
    font-size: 14px;
}

[b-2nknr28c4t] .contribute-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

[b-2nknr28c4t] .contribute-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .featured-story[b-2nknr28c4t] {
        grid-template-columns: 1fr;
        padding: 32px;
    }

    .featured-cover[b-2nknr28c4t] {
        aspect-ratio: 16 / 9;
        order: -1;
    }

    .stories-grid-three[b-2nknr28c4t] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stories-toolbar[b-2nknr28c4t] {
        grid-template-columns: 1fr;
    }

    .toolbar-controls[b-2nknr28c4t] {
        flex-wrap: wrap;
    }

    .search-input[b-2nknr28c4t] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .stories-header[b-2nknr28c4t] {
        flex-direction: column;
        align-items: flex-start;
    }

    .stories-title[b-2nknr28c4t] {
        font-size: 26px;
    }

    .featured-story[b-2nknr28c4t] {
        padding: 24px;
    }

    .featured-title[b-2nknr28c4t] {
        font-size: 26px;
    }

    .stories-grid-two[b-2nknr28c4t],
    .stories-grid-three[b-2nknr28c4t] {
        grid-template-columns: 1fr;
    }

    /* Filter chips become a horizontal-scroll strip on mobile to avoid eating
       a tonne of vertical space when there are many tags. */
    .filter-chips[b-2nknr28c4t] {
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        margin: 0 -8px;
        padding: 0 8px;
        -webkit-overflow-scrolling: touch;
    }

    [b-2nknr28c4t] .chip {
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .toolbar-controls[b-2nknr28c4t] {
        width: 100%;
    }

    .search-form[b-2nknr28c4t] {
        flex: 1;
    }

    .contribute-banner[b-2nknr28c4t] {
        padding: 22px 20px;
    }
}
/* /Components/Features/Teams/Create/CreateTeam.razor.rz.scp.css */
/* === Header === */
.co-header[b-eyhhv2co4z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

.co-title[b-eyhhv2co4z] {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    font-family: "Lexend", system-ui, sans-serif;
}

.co-subtitle[b-eyhhv2co4z] {
    color: #9ca3af;
    margin: 6px 0 0;
    font-size: 14px;
    font-family: "Lexend", system-ui, sans-serif;
}

/* === Card wrapper === */
.co-card[b-eyhhv2co4z] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    font-family: "Lexend", system-ui, sans-serif;
}

/* === Alerts === */
.co-alert[b-eyhhv2co4z] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    margin-bottom: 20px;
}

.co-alert-icon[b-eyhhv2co4z] {
    margin-top: 1px;
    flex-shrink: 0;
}

.co-alert-danger[b-eyhhv2co4z] {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.30);
    color: #ff7a88;
}

/* === Success panel === */
.co-success[b-eyhhv2co4z] {
    margin-bottom: 20px;
}

.co-success-badge[b-eyhhv2co4z] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.25);
    color: #4ade80;
    font-size: 14px;
    font-weight: 600;
    font-family: "Lexend", system-ui, sans-serif;
    margin-bottom: 14px;
}

.co-success-actions[b-eyhhv2co4z] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* === Form fields === */
.co-label[b-eyhhv2co4z] {
    display: block;
    margin-bottom: 6px;
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 500;
    font-family: "Lexend", system-ui, sans-serif;
}

[b-eyhhv2co4z] .co-input {
    width: 100%;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-family: "Lexend", system-ui, sans-serif;
    transition: border-color 0.15s;
    outline: none;
}

[b-eyhhv2co4z] .co-input:focus {
    border-color: rgba(249, 115, 22, 0.5);
}

[b-eyhhv2co4z] .co-input::placeholder {
    color: #6b7280;
}

[b-eyhhv2co4z] .co-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.co-slug-preview[b-eyhhv2co4z] {
    font-family: "Lexend", monospace;
    letter-spacing: 0.01em;
    margin-top: 6px;
}

.co-help-text[b-eyhhv2co4z] {
    color: #6b7280;
    font-size: 12px;
    margin-top: 5px;
    font-family: "Lexend", system-ui, sans-serif;
}

[b-eyhhv2co4z] .validation-message {
    color: #ff7a88;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

/* === Buttons ===
   Form submit, success actions and Back all come from .hl-btn
   (--primary / --outline). No page-local button styles. */
/* /Components/Features/Teams/List/MyTeams.razor.rz.scp.css */
/* ── Empty state ─────────────────────────────────────────────────── */

/* Card, icon, heading and body all come from .hl-state now. */
.orgs-empty-hint[b-6h0u73zq8v] {
    color: #6c757d;
    font-size: 12.5px;
    margin: 0;
}

/* ── List header ─────────────────────────────────────────────────── */

.orgs-title[b-6h0u73zq8v] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.orgs-subtitle[b-6h0u73zq8v] {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 0;
}

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

.org-card[b-6h0u73zq8v] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.org-card:hover[b-6h0u73zq8v] {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7);
    transform: translateY(-2px);
}

.org-card--active[b-6h0u73zq8v] {
    border-color: rgba(84, 110, 250, 0.45);
    box-shadow: 0 10px 30px -16px rgba(84, 110, 250, 0.25);
}

.org-card--active:hover[b-6h0u73zq8v] {
    border-color: rgba(84, 110, 250, 0.65);
    box-shadow: 0 16px 40px -16px rgba(84, 110, 250, 0.35);
}

/* ── Header ── */
.oc-header[b-6h0u73zq8v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.oc-avatar[b-6h0u73zq8v] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #546EFA 0%, #8c9dfc 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.oc-avatar-letter[b-6h0u73zq8v] {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.oc-identity[b-6h0u73zq8v] {
    flex: 1;
    min-width: 0;
}

.oc-name[b-6h0u73zq8v] {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-handle[b-6h0u73zq8v] {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-type-badge[b-6h0u73zq8v] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(84, 110, 250, 0.16);
    color: #8c9dfc;
}

.oc-current-badge[b-6h0u73zq8v] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(84, 110, 250, 0.16);
    color: #8c9dfc;
    border: 1px solid rgba(84, 110, 250, 0.35);
}

/* ── Body ── */
.oc-body[b-6h0u73zq8v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
}

.oc-meta-grid[b-6h0u73zq8v] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 8px;
}

.oc-meta-cell[b-6h0u73zq8v] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.oc-row[b-6h0u73zq8v] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.oc-row-icon[b-6h0u73zq8v] {
    color: #6c757d;
    font-size: 13px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.oc-row-link[b-6h0u73zq8v] {
    color: #8c9dfc;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-decoration: none;
}

.oc-row-link:hover[b-6h0u73zq8v] {
    color: #a9b8fd;
    text-decoration: underline;
}

.oc-row-text[b-6h0u73zq8v] {
    color: #d1d5db;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.oc-row-label[b-6h0u73zq8v] {
    color: #6c757d;
    font-size: 12.5px;
    flex-shrink: 0;
}

.oc-plan-badge[b-6h0u73zq8v] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(249, 115, 22, 0.14);
    color: #F97316;
}

/* ── Invite ── */
.oc-invite-section[b-6h0u73zq8v] {
    margin-top: auto;
}

.oc-invite-label[b-6h0u73zq8v] {
    color: #9ca3af;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.oc-invite-row[b-6h0u73zq8v] {
    display: flex;
    gap: 8px;
}

[b-6h0u73zq8v] .oc-invite-input {
    flex: 1;
    min-width: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 7px 11px;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease;
}

[b-6h0u73zq8v] .oc-invite-input::placeholder {
    color: #6c757d;
}

[b-6h0u73zq8v] .oc-invite-input:focus {
    border-color: rgba(84, 110, 250, 0.5);
    background: rgba(255, 255, 255, 0.07);
}

[b-6h0u73zq8v] .oc-feedback {
    margin-top: 8px;
    padding: 7px 11px;
    border-radius: 8px;
    font-size: 12.5px;
}

[b-6h0u73zq8v] .oc-feedback--success {
    background: rgba(74, 222, 128, 0.10);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.20);
}

[b-6h0u73zq8v] .oc-feedback--error {
    background: rgba(220, 53, 69, 0.10);
    color: #ff7a88;
    border: 1px solid rgba(220, 53, 69, 0.20);
}

/* ── Footer ── */
.oc-footer[b-6h0u73zq8v] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}


/* Footer/invite buttons come from .hl-btn (--primary / --outline / --danger, --sm). */
/* /Components/Features/Topics/Create/FeedbackStep.razor.rz.scp.css */
/* Step 2 only owns its help-popover content now — the type toggle, the ask, and
   the question editor moved to FeedbackFields, which carries its own scoped CSS.

   The list below is authored in this component (so it keeps this scope
   attribute) but renders inside WizardShell's popover. */

.fs-help-list[b-esx2pu4xwn] {
    margin: 0;
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-2);
    font-size: var(--hl-fs-sm);
    color: var(--hl-text-muted);
}

.fs-help-list strong[b-esx2pu4xwn] {
    color: var(--hl-text);
    font-weight: 600;
}
/* /Components/Features/Topics/Create/ReviewStep.razor.rz.scp.css */
/* Preserve line breaks in the multi-line review values (Details, feedback). */
.wz-pre[b-9ujbjxpeng] {
    white-space: pre-wrap;
}

/* The structured-questions preview is a full form, not a one-line value — give it
   a little room below the label. */
.rv-questions[b-9ujbjxpeng] {
    margin-top: var(--hl-sp-3);
}
/* /Components/Features/Topics/Create/TopicStep.razor.rz.scp.css */
/* Step 1 only owns its persona banner now — the title/details fields and the AI
   helper moved to TopicFields / AiHelperPanel, which carry their own scoped CSS.
   Everything else is global honestli.css design-system. */

.wz-step-banner[b-lw0riplhej] {
    margin-bottom: var(--hl-sp-5);
}
/* /Components/Features/Topics/Create/WizardShell.razor.rz.scp.css */
/* Chrome for the create-a-topic wizard. Every visible surface (card, alert,
   buttons, stepper) comes from the global honestli.css design system; this is
   just the page shell, header layout, nav bar, and the usage popover (which the
   design system has no primitive for). */

.wz-shell[b-g9iht6p75j] {
    max-width: 780px;
    margin-inline: auto;
}

/* === Header === */
.wz-header[b-g9iht6p75j] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--hl-sp-4);
    margin-top: var(--hl-sp-7);
    margin-bottom: var(--hl-sp-6);
}

.wz-header__head[b-g9iht6p75j] {
    min-width: 0;
}

.wz-title[b-g9iht6p75j] {
    margin: 0;
}

.wz-subtitle[b-g9iht6p75j] {
    margin-top: var(--hl-sp-2);
    font-size: var(--hl-fs-md);
}

/* === Wizard navigation === */
.wz-nav[b-g9iht6p75j] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-3);
    flex-wrap: wrap;
    margin-top: var(--hl-sp-6);
    padding-top: var(--hl-sp-5);
    border-top: 1px solid var(--hl-border);
}

/* Blazor's ValidationMessage renders a child <div> outside this component's
   scope, so reach it with ::deep and give it the design-system error look. */
[b-g9iht6p75j] .validation-message {
    color: var(--hl-danger);
    font-size: var(--hl-fs-sm);
}

/* Header action buttons (help "?" and usage gauge) sit together top-right. */
.wz-header__actions[b-g9iht6p75j] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-2);
    flex-shrink: 0;
}

/* === Topic usage popover (header gauge) === */
.wz-usage[b-g9iht6p75j] {
    position: relative;
    flex-shrink: 0;
}

.wz-usage-btn[b-g9iht6p75j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--hl-r-md);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--hl-border-strong);
    color: var(--hl-text-muted);
    cursor: pointer;
    font-size: 16px;
    transition: border-color var(--hl-dur-fast) var(--hl-ease),
                color var(--hl-dur-fast) var(--hl-ease),
                background var(--hl-dur-fast) var(--hl-ease);
    --fa-primary-color: var(--hl-info);
    --fa-secondary-color: var(--hl-text-muted);
    --fa-secondary-opacity: 0.45;
}

.wz-usage-btn:hover[b-g9iht6p75j],
.wz-usage-btn-open[b-g9iht6p75j] {
    border-color: rgba(96, 165, 250, 0.5);
    color: var(--hl-text);
    background: var(--hl-info-soft);
}

.wz-usage-backdrop[b-g9iht6p75j] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: default;
}

/* Light surface — PlanUsageMeter is built for a light background (dark slate
   text), so the popover gives it one while borrowing the system's shape. */
.wz-usage-pop[b-g9iht6p75j] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 41;
    min-width: 240px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: var(--hl-r-lg);
    padding: var(--hl-sp-3);
    box-shadow: var(--hl-shadow-pop);
}

.wz-usage-pop[b-g9iht6p75j]::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 13px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    transform: rotate(45deg);
}

/* === "How this step works" help popover (header "?") ===
   Shares the usage button/backdrop styles; the popover itself uses the
   system's elevated surface (text content, unlike the light PlanUsageMeter). */
.wz-help[b-g9iht6p75j] {
    position: relative;
    flex-shrink: 0;
}

.wz-help-pop[b-g9iht6p75j] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 41;
    width: min(340px, 82vw);
    background: var(--hl-bg-elev-2);
    border: 1px solid var(--hl-border-strong);
    border-radius: var(--hl-r-lg);
    padding: var(--hl-sp-4);
    box-shadow: var(--hl-shadow-pop);
}

.wz-help-pop[b-g9iht6p75j]::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 13px;
    width: 12px;
    height: 12px;
    background: var(--hl-bg-elev-2);
    border-left: 1px solid var(--hl-border-strong);
    border-top: 1px solid var(--hl-border-strong);
    transform: rotate(45deg);
}

.wz-help-title[b-g9iht6p75j] {
    margin-bottom: var(--hl-sp-3);
}
/* /Components/Features/Topics/Feedback/QuestionFieldList.razor.rz.scp.css */
/* The numbered question stack — design-system tokens only. Lives on plain <div>s
   (which receive the scoped attribute) so it works inside an EditForm, whose
   rendered <form> never carries the component's scope. */

.qfl[b-6ejjyotiqa] {
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-7);
}

/* Each question is a numbered row: an accent index badge anchors it and the
   field body sits in the second column. The badge + generous row gap give the
   form rhythm without needing dividers between every question. */
.qfl-q[b-6ejjyotiqa] {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--hl-sp-4);
    align-items: start;
}

.qfl-q__num[b-6ejjyotiqa] {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--hl-accent-soft);
    border: 1px solid rgba(249, 115, 22, 0.20);
    color: var(--hl-accent);
    font-size: var(--hl-fs-sm);
    font-weight: 700;
    line-height: 1;
    /* nudge the badge to sit on the label's baseline */
    margin-top: 1px;
}

.qfl-q__body[b-6ejjyotiqa] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-2);
}
/* /Components/Features/Topics/Fields/AiHelperPanel.razor.rz.scp.css */
/* Field-head row (label left, AI toggle right) and the AI helper card.
   Previously duplicated in TopicStep.razor.css and FeedbackStep.razor.css —
   scoped CSS can't cross a component boundary, so pulling the markup into this
   component is what let the two copies collapse into one. */

.wz-field-head[b-tkfw7iqomq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hl-sp-3);
}

.wz-ai-toggle[b-tkfw7iqomq] {
    margin-right: calc(-1 * var(--hl-sp-3));
}

.wz-ai-panel[b-tkfw7iqomq] {
    margin-top: var(--hl-sp-1);
    margin-bottom: var(--hl-sp-3);
}

.wz-ai-body[b-tkfw7iqomq] {
    padding: var(--hl-sp-4);
}

.wz-ai-row[b-tkfw7iqomq] {
    flex-wrap: wrap;
}

.wz-ai-input[b-tkfw7iqomq] {
    flex: 1 1 240px;
    min-width: 0;
}

.wz-ai-draft[b-tkfw7iqomq] {
    flex-shrink: 0;
}

.wz-ai-close:disabled[b-tkfw7iqomq] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Features/Topics/Fields/AudienceFields.razor.rz.scp.css */
/* The "this breaks existing links" caution sits under the slug input, inside the
   field, so it reads as part of that control rather than a page-level banner. */
.au-slug-warning[b-738fpaonkc] {
    margin-top: var(--hl-sp-3);
    margin-bottom: 0;
}
/* /Components/Features/Topics/Fields/CoverImageField.razor.rz.scp.css */
/* Fixed-height preview well so the section keeps its shape whether or not a
   cover image is set. */
.ci-preview[b-slo98sqk7k] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    overflow: hidden;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-r-md, 12px);
    background: var(--hl-bg-elev);
}

.ci-preview__img[b-slo98sqk7k] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ci-upload[b-slo98sqk7k] {
    align-self: flex-start;
}

.ci-alert[b-slo98sqk7k] {
    margin-bottom: 0;
}
/* /Components/Features/Topics/Fields/DefaultTopicField.razor.rz.scp.css */
/* Read-only state: badge and sentence on one baseline, sitting where the
   checkbox it replaces would have been. */
.dt-state[b-seiebcu0ki] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hl-sp-2);
}

/* The explainer sits under the checkbox, inside the field, so it reads as part
   of that decision rather than as a page-level notice. */
.dt-explainer[b-seiebcu0ki] {
    margin-top: var(--hl-sp-3);
}

.dt-explainer__lead[b-seiebcu0ki] {
    margin: 0 0 var(--hl-sp-2);
    color: var(--hl-text);
}

.dt-explainer__list[b-seiebcu0ki] {
    margin: 0;
    padding-left: var(--hl-sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-1);
}
/* /Components/Features/Topics/Fields/FeedbackFields.razor.rz.scp.css */
/* "The feedback" fields — the type toggle, its recommended caption, the ask's
   suggestions list, the question editor, and the General-branch explainer.
   Spacing uses the honestli.css --hl-sp-* scale so the rhythm matches the rest
   of the topic form. The AI panel chrome lives in AiHelperPanel. */

/* The toggle hugs its content (a compact pill) rather than stretching to the
   full width of the flex-column .hl-field. */
.fs-segmented[b-2nz0v4qwfd] {
    align-self: flex-start;
}

/* Recommended caption — belongs to the toggle. The parent .hl-field already
   spaces it snug beneath the toggle (its 8px gap); the larger separation
   (sp-6) lives on the field below, so the two groups read apart. Lean on the
   accent so it reads as a nudge, not a second field label. */
.fs-recommended[b-2nz0v4qwfd] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-2);
    font-size: var(--hl-fs-sm);
    font-weight: 600;
    color: var(--hl-accent-strong);
}

.fs-recommended .fa-star[b-2nz0v4qwfd] {
    color: var(--hl-accent);
}

.fs-recommended--nudge[b-2nz0v4qwfd] {
    font-weight: 500;
    color: var(--hl-text-muted);
}

/* Manage-page only: editing questions doesn't rewrite answers already given. */
.fs-answered-notice[b-2nz0v4qwfd] {
    margin-top: var(--hl-sp-5);
    margin-bottom: 0;
}

/* "Areas for feedback" textarea (Specific branch) — a new field group, so give
   it clear separation from the toggle + recommended caption above. */
.fs-areas[b-2nz0v4qwfd] {
    margin-top: var(--hl-sp-6);
}

/* Open-ended feedback explainer (General branch). */
.fs-panel[b-2nz0v4qwfd] {
    margin-top: var(--hl-sp-6);
    padding: var(--hl-sp-5);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-r-md, 12px);
    background: var(--hl-bg-elev);
}

.fs-panel__title[b-2nz0v4qwfd] {
    margin: 0 0 var(--hl-sp-2);
    font-size: var(--hl-fs-lg);
}

.fs-panel__copy[b-2nz0v4qwfd] {
    margin: 0 0 var(--hl-sp-4);
    font-size: var(--hl-fs-sm);
}

.fs-panel__buckets[b-2nz0v4qwfd] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hl-sp-2);
}

/* Suggested questions — tap-to-add list rendered into the AI helper card. The
   markup is authored here (so it keeps this scope attribute) but renders inside
   AiHelperPanel's ChildContent. */
.fs-suggest[b-2nz0v4qwfd] {
    margin-top: var(--hl-sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-2);
}

.fs-suggest__head[b-2nz0v4qwfd] {
    font-weight: 600;
}

.fs-suggest__status[b-2nz0v4qwfd] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-2);
}

/* Each suggestion is a full-width, left-aligned button that reads like a chip-row. */
.fs-suggest__item[b-2nz0v4qwfd] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-3);
    width: 100%;
    text-align: left;
    padding: var(--hl-sp-3) var(--hl-sp-4);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-r-md, 12px);
    background: var(--hl-bg);
    color: var(--hl-text);
    font: inherit;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.fs-suggest__item:hover[b-2nz0v4qwfd] {
    border-color: var(--hl-accent);
    background: var(--hl-bg-elev);
}

.fs-suggest__item .fa-plus[b-2nz0v4qwfd] {
    color: var(--hl-accent);
    flex-shrink: 0;
}

/* === Your questions (Specific branch) ===
   The ask turned into editable, annotated question rows + a live preview of the
   responder-facing form. New field group, so separate it from the ask above. */
.fs-questions[b-2nz0v4qwfd] {
    margin-top: var(--hl-sp-6);
}

/* Questions header row: label left, "rebuild" action right. */
.fq-head[b-2nz0v4qwfd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--hl-sp-3);
}

.fq-rebuild[b-2nz0v4qwfd] {
    margin-right: calc(-1 * var(--hl-sp-3));
}

/* "✓ built" badge beside the section label. */
.fq-built[b-2nz0v4qwfd] {
    margin-left: var(--hl-sp-2);
    font-size: var(--hl-fs-sm);
    font-weight: 600;
    color: var(--hl-success);
}

.fq-built .fa-check[b-2nz0v4qwfd] {
    margin-right: var(--hl-sp-1);
}

.fq-help[b-2nz0v4qwfd] {
    margin: 0 0 var(--hl-sp-3);
}

.fq-build[b-2nz0v4qwfd] {
    align-self: flex-start;
}

/* Editable question rows. */
.fq-rows[b-2nz0v4qwfd] {
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-2);
    margin-bottom: var(--hl-sp-3);
}

/* Each editable question — a bordered group holding the prompt, the answer-type
   toggle, and (for multiple choice) the options editor. */
.fq-q[b-2nz0v4qwfd] {
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-3);
    padding: var(--hl-sp-4);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-r-md, 12px);
    background: var(--hl-bg-elev);
}

.fq-q__head[b-2nz0v4qwfd] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-3);
}

/* The Written / Multiple-choice toggle hugs its content. */
.fq-kind[b-2nz0v4qwfd] {
    align-self: flex-start;
}

/* Options editor for a multiple-choice question, indented to sit under the
   prompt (past the row number). */
.fq-opts[b-2nz0v4qwfd] {
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-2);
    padding-left: calc(1.5rem + var(--hl-sp-3));
}

.fq-opt[b-2nz0v4qwfd] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-2);
}

.fq-opt__dot[b-2nz0v4qwfd] {
    flex-shrink: 0;
    color: var(--hl-text-muted);
    font-size: var(--hl-fs-sm);
}

.fq-opt__input[b-2nz0v4qwfd] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Smaller, lighter sibling of .fq-row__remove for an individual option. */
.fq-opt__remove[b-2nz0v4qwfd] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-r-sm, 8px);
    background: var(--hl-bg);
    color: var(--hl-text-muted);
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.fq-opt__remove:hover[b-2nz0v4qwfd] {
    border-color: var(--hl-danger);
    color: var(--hl-danger);
    background: var(--hl-bg-elev);
}

.fq-opt-add[b-2nz0v4qwfd] {
    align-self: flex-start;
}

.fq-opt-add .fa-plus[b-2nz0v4qwfd] {
    color: var(--hl-accent);
}

.fq-row__num[b-2nz0v4qwfd] {
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
    font-size: var(--hl-fs-sm);
    font-weight: 600;
    color: var(--hl-text-muted);
}

.fq-row__input[b-2nz0v4qwfd] {
    flex: 1 1 auto;
    min-width: 0;
}

/* Square delete button mirroring the wireframe's boxed "×". */
.fq-row__remove[b-2nz0v4qwfd] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-r-md, 12px);
    background: var(--hl-bg);
    color: var(--hl-text-muted);
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.fq-row__remove:hover[b-2nz0v4qwfd] {
    border-color: var(--hl-danger);
    color: var(--hl-danger);
    background: var(--hl-bg-elev);
}

.fq-add[b-2nz0v4qwfd] {
    align-self: flex-start;
}

.fq-add .fa-plus[b-2nz0v4qwfd] {
    color: var(--hl-accent);
}

.fq-error[b-2nz0v4qwfd] {
    margin-top: var(--hl-sp-2);
}

/* Live "what the responder sees" preview — an .hl-card surface (from the design
   system); this only adds the separation from the editor above it. */
.fq-preview[b-2nz0v4qwfd] {
    margin-top: var(--hl-sp-5);
}

.fq-preview__eyebrow[b-2nz0v4qwfd] {
    margin-bottom: var(--hl-sp-4);
    font-size: var(--hl-fs-sm);
    font-weight: 600;
    color: var(--hl-text-muted);
}

.fq-preview__form[b-2nz0v4qwfd] {
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-5);
}
/* /Components/Features/Topics/Fields/TopicFields.razor.rz.scp.css */
/* The Details textarea is the one field that wants real writing room. */
.wz-textarea-lg[b-tq38vh7tot] {
    min-height: 150px;
}
/* /Components/Features/Topics/List/AllTopics.razor.rz.scp.css */
/* ── Empty state ───────────────────────────────────────────── */

.at-empty-card[b-94zm9skkzt] {
    max-width: 460px;
    margin-top: 40px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 36px 28px;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.5);
}

.at-empty-icon[b-94zm9skkzt] {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 14px;
    background: rgba(96, 165, 250, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #60A5FA;
}

.at-empty-heading[b-94zm9skkzt] {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.at-empty-body[b-94zm9skkzt] {
    color: #9ca3af;
    font-size: 14px;
}

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

.at-card[b-94zm9skkzt] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.at-card:hover[b-94zm9skkzt] {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.65);
    transform: translateY(-2px);
}

.at-image-wrap[b-94zm9skkzt] {
    aspect-ratio: 16 / 9;
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.at-image[b-94zm9skkzt] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.at-body[b-94zm9skkzt] {
    flex: 1;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
}

.at-name[b-94zm9skkzt] {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 8px;
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.at-summary[b-94zm9skkzt] {
    color: #9ca3af;
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.at-footer[b-94zm9skkzt] {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

[b-94zm9skkzt] .at-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(84, 110, 250, 0.18);
    border: 1px solid rgba(84, 110, 250, 0.35);
    color: #8c9dfc;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    margin-left: auto;
}

[b-94zm9skkzt] .at-edit-btn:hover {
    background: rgba(84, 110, 250, 0.28);
    color: #c0cafd;
}
/* /Components/Features/Topics/List/EmptyTopicSharePrompt.razor.rz.scp.css */
/* ────────────────────────────────────────────────────────────────────
   Empty-topic share prompt.

   Aesthetic: a calm dispatch bay. A paper plane glows under a soft halo;
   everything below is poised to "send" something. Restraint wins —
   generous spacing, editorial Lexend headline, refined URL chip. The
   memorable beat is the plane *flying off* in a short arc when the user
   copies the link.
   ──────────────────────────────────────────────────────────────────── */

.share-prompt[b-x3e77bv70b] {
    position: relative;
    overflow: hidden;
    isolation: isolate;                        /* contain blend modes */
    width: 100%;
    max-width: 760px;
    margin: 8px 0 0;                           /* anchor left under the topic header */
    padding: 38px 42px 34px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)) ,
        #12213A;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    box-shadow:
        0 24px 60px -24px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Aurora — soft orange radial behind the eyebrow icon, plus a faint cool
   counter-glow on the opposite corner. Gives the card depth without ever
   competing with the content. */
.share-prompt-aurora[b-x3e77bv70b] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(420px 220px at 12% 0%,
            rgba(249, 115, 22, 0.18) 0%,
            rgba(249, 115, 22, 0.06) 35%,
            transparent 70%),
        radial-gradient(520px 260px at 110% 110%,
            rgba(84, 110, 250, 0.12) 0%,
            rgba(84, 110, 250, 0.04) 40%,
            transparent 75%);
}

/* Grain — tiny SVG noise at very low opacity. Adds tactility without
   reading as a "texture". */
.share-prompt-grain[b-x3e77bv70b] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.share-prompt > *:not(.share-prompt-aurora):not(.share-prompt-grain):not(.share-prompt-qr-backdrop):not(.share-prompt-toast)[b-x3e77bv70b] {
    position: relative;
    z-index: 1;
}

/* ── Eyebrow ─────────────────────────────────────────────────────── */

.share-prompt-eyebrow[b-x3e77bv70b] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    animation: shareFadeUp-b-x3e77bv70b 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s backwards;
}

.share-prompt-eyebrow-badge[b-x3e77bv70b] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(249, 115, 22, 0.14);
    border: 1px solid rgba(249, 115, 22, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #F97316;
    font-size: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Halo that gently pulses behind the badge — the "send" signal. */
.share-prompt-eyebrow-halo[b-x3e77bv70b] {
    position: absolute;
    inset: -10px;
    border-radius: 18px;
    background: radial-gradient(circle at center,
        rgba(249, 115, 22, 0.35) 0%,
        rgba(249, 115, 22, 0) 65%);
    z-index: -1;
    filter: blur(2px);
    animation: shareHalo-b-x3e77bv70b 4.2s ease-in-out infinite;
}

@keyframes shareHalo-b-x3e77bv70b {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50%      { opacity: 0.85; transform: scale(1.08); }
}

.share-prompt-eyebrow-badge i[b-x3e77bv70b] {
    transition: transform 0.2s ease;
}

/* Paper-plane fly-off — the moment of delight on copy. */
.share-prompt-fly[b-x3e77bv70b] {
    animation: sharePlaneFly-b-x3e77bv70b 0.9s cubic-bezier(0.34, 1.18, 0.45, 1);
}

@keyframes sharePlaneFly-b-x3e77bv70b {
    0%   { transform: translate(0, 0) rotate(0deg);    opacity: 1; }
    35%  { transform: translate(18px, -18px) rotate(18deg); opacity: 1; }
    55%  { transform: translate(28px, -26px) rotate(22deg); opacity: 0.4; }
    70%  { transform: translate(28px, -26px) rotate(22deg); opacity: 0; }
    71%  { transform: translate(-14px, 8px) rotate(-10deg); opacity: 0; }
    100% { transform: translate(0, 0) rotate(0deg);    opacity: 1; }
}

.share-prompt-eyebrow-text[b-x3e77bv70b] {
    color: #FDBA74;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* ── Headline ────────────────────────────────────────────────────── */

.share-prompt-headline[b-x3e77bv70b] {
    font-family: "Lexend", system-ui, sans-serif;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.018em;
    line-height: 1.22;
    margin: 0 0 14px;
    max-width: 28ch;
    animation: shareFadeUp-b-x3e77bv70b 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.12s backwards;
}

/* The second line gets a delicate orange-to-warm gradient — just enough
   to land the "honest, anonymous feedback" payoff without shouting. */
.share-prompt-headline-accent[b-x3e77bv70b] {
    display: inline;
    background: linear-gradient(92deg, #FDBA74 0%, #F97316 55%, #FB923C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ── Body copy ───────────────────────────────────────────────────── */

.share-prompt-body[b-x3e77bv70b] {
    color: #9ca3af;
    font-size: 14.5px;
    line-height: 1.65;
    margin: 0 0 24px;
    max-width: 56ch;
    animation: shareFadeUp-b-x3e77bv70b 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.20s backwards;
}

/* ── URL chip + copy button ──────────────────────────────────────── */

.share-prompt-url-row[b-x3e77bv70b] {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    animation: shareFadeUp-b-x3e77bv70b 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s backwards;
}

.share-prompt-url[b-x3e77bv70b] {
    flex: 1 1 280px;
    min-width: 0;                /* allow ellipsis */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 44px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    color: #d1d5db;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13.5px;
    letter-spacing: -0.01em;
    overflow: hidden;
}

.share-prompt-url-icon[b-x3e77bv70b] {
    color: #9ca3af;
    font-size: 13px;
    flex-shrink: 0;
}

.share-prompt-url-text[b-x3e77bv70b] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-prompt-copy[b-x3e77bv70b] {
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    border-radius: 10px;
    border: 1px solid #F97316;
    background: #F97316;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
    transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
    box-shadow: 0 8px 22px -10px rgba(249, 115, 22, 0.7);
}

.share-prompt-copy:hover[b-x3e77bv70b] {
    background: #EA580C;
    border-color: #EA580C;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px -10px rgba(249, 115, 22, 0.85);
}

.share-prompt-copy:active[b-x3e77bv70b] {
    transform: translateY(0);
}

.share-prompt-copy-copied[b-x3e77bv70b] {
    background: rgba(74, 222, 128, 0.16);
    border-color: rgba(74, 222, 128, 0.45);
    color: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
}

.share-prompt-copy-copied:hover[b-x3e77bv70b] {
    background: rgba(74, 222, 128, 0.22);
    border-color: rgba(74, 222, 128, 0.6);
    color: #4ade80;
    box-shadow: none;
}

/* ── Action chips (QR / Email / Slack / X) ───────────────────────── */

.share-prompt-actions[b-x3e77bv70b] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    animation: shareFadeUp-b-x3e77bv70b 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.36s backwards;
}

.share-prompt-action[b-x3e77bv70b] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: #e5e7eb;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.share-prompt-action:hover[b-x3e77bv70b] {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    transform: translateY(-1px);
}

.share-prompt-action i[b-x3e77bv70b] {
    font-size: 13px;
    opacity: 0.9;
}

.share-prompt-action-active[b-x3e77bv70b] {
    background: rgba(249, 115, 22, 0.12);
    border-color: rgba(249, 115, 22, 0.45);
    color: #FDBA74;
}

/* ── Private-topic variant (single CTA) ──────────────────────────── */

.share-prompt-private[b-x3e77bv70b] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: shareFadeUp-b-x3e77bv70b 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.28s backwards;
}

.share-prompt-private-note[b-x3e77bv70b] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 13px;
}

.share-prompt-private-note i[b-x3e77bv70b] {
    color: #FDBA74;
}

.share-prompt-copy-cta[b-x3e77bv70b] {
    align-self: flex-start;
}

/* ── QR popover ──────────────────────────────────────────────────── */

.share-prompt-qr-backdrop[b-x3e77bv70b] {
    position: fixed;
    inset: 0;
    background: rgba(13, 24, 42, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: shareFadeIn-b-x3e77bv70b 0.18s ease;
}

.share-prompt-qr-card[b-x3e77bv70b] {
    position: relative;
    max-width: 320px;
    width: 100%;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px 24px 20px;
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.6);
    animation: shareQrIn-b-x3e77bv70b 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
    text-align: center;
}

@keyframes shareQrIn-b-x3e77bv70b {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.share-prompt-qr-close[b-x3e77bv70b] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #d1d5db;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.share-prompt-qr-close:hover[b-x3e77bv70b] {
    background: rgba(255, 255, 255, 0.06);
}

.share-prompt-qr-eyebrow[b-x3e77bv70b] {
    color: #FDBA74;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 4px 0 14px;
}

.share-prompt-qr-image[b-x3e77bv70b] {
    background: #fff;
    padding: 14px;
    border-radius: 12px;
    display: inline-block;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4);
}

.share-prompt-qr-image img[b-x3e77bv70b] {
    display: block;
    width: 220px;
    height: 220px;
    image-rendering: pixelated;     /* keep QR modules crisp at any DPI */
}

.share-prompt-qr-caption[b-x3e77bv70b] {
    margin-top: 14px;
    color: #9ca3af;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    word-break: break-all;
}

/* ── Slack toast ─────────────────────────────────────────────────── */

.share-prompt-toast[b-x3e77bv70b] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    padding: 12px 16px 12px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    z-index: 700;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.6);
    animation: shareToastIn-b-x3e77bv70b 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.share-prompt-toast i[b-x3e77bv70b] {
    color: #E01E5A;     /* Slack pink */
    font-size: 15px;
}

@keyframes shareToastIn-b-x3e77bv70b {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Shared keyframes ────────────────────────────────────────────── */

@keyframes shareFadeUp-b-x3e77bv70b {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes shareFadeIn-b-x3e77bv70b {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Reduced motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .share-prompt-eyebrow[b-x3e77bv70b],
    .share-prompt-headline[b-x3e77bv70b],
    .share-prompt-body[b-x3e77bv70b],
    .share-prompt-url-row[b-x3e77bv70b],
    .share-prompt-actions[b-x3e77bv70b],
    .share-prompt-private[b-x3e77bv70b],
    .share-prompt-qr-backdrop[b-x3e77bv70b],
    .share-prompt-qr-card[b-x3e77bv70b],
    .share-prompt-toast[b-x3e77bv70b] {
        animation: none;
    }

    .share-prompt-eyebrow-halo[b-x3e77bv70b],
    .share-prompt-fly[b-x3e77bv70b] {
        animation: none;
    }
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .share-prompt[b-x3e77bv70b] {
        padding: 28px 22px 24px;
        border-radius: 14px;
    }

    .share-prompt-headline[b-x3e77bv70b] {
        font-size: 22px;
    }

    .share-prompt-body[b-x3e77bv70b] {
        font-size: 14px;
    }

    .share-prompt-url-row[b-x3e77bv70b] {
        flex-direction: column;
    }

    .share-prompt-url[b-x3e77bv70b],
    .share-prompt-copy[b-x3e77bv70b] {
        width: 100%;
    }

    .share-prompt-action[b-x3e77bv70b] {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
    }
}
/* /Components/Features/Topics/Manage/ManageSection.razor.rz.scp.css */
/* The collapsible section shell used by the manage page. The card, buttons and
   eyebrow come from the global honestli.css design system; this is the
   disclosure header (a full-width button, so the whole row is the hit target),
   the body's divider, and the footer row. */

.ms-card[b-gzm58tbjxh] {
    /* .hl-card already carries the surface, border, radius and shadow. */
    transition: border-color var(--hl-dur-fast) var(--hl-ease);
}

.ms-card--danger[b-gzm58tbjxh] {
    border-color: rgba(239, 68, 68, 0.22);
}

/* === Disclosure header === */
.ms-head[b-gzm58tbjxh] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-4);
    width: 100%;
    padding: var(--hl-sp-5) var(--hl-sp-6);
    background: transparent;
    border: 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    transition: background var(--hl-dur-fast) var(--hl-ease);
}

.ms-head:hover[b-gzm58tbjxh] {
    background: rgba(255, 255, 255, 0.03);
}

.ms-head--danger:hover[b-gzm58tbjxh] {
    background: rgba(239, 68, 68, 0.05);
}

.ms-head__text[b-gzm58tbjxh] {
    flex: 1;
    min-width: 0;
}

.ms-eyebrow--danger[b-gzm58tbjxh] {
    color: var(--hl-danger);
}

.ms-head__title[b-gzm58tbjxh] {
    display: block;
    margin-top: 2px;
    color: var(--hl-text);
    font-size: var(--hl-fs-lg);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.ms-head__preview[b-gzm58tbjxh] {
    display: block;
    margin-top: var(--hl-sp-1);
    color: var(--hl-text-muted);
    font-size: var(--hl-fs-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unsaved-changes dot. */
.ms-dot[b-gzm58tbjxh] {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: var(--hl-r-pill);
    background: var(--hl-accent);
}

.ms-head__thumb[b-gzm58tbjxh] {
    flex: none;
    display: block;
}

/* The toggle wears .hl-btn--secondary; this only positions it and carries the
   row's hover through to it, so hovering anywhere on the header lights it up. */
.ms-head__toggle[b-gzm58tbjxh] {
    flex: none;
}

.ms-head:hover .ms-head__toggle[b-gzm58tbjxh] {
    background: #213657;
}

.ms-chev[b-gzm58tbjxh] {
    font-size: 11px;
    transition: transform var(--hl-dur-base) var(--hl-ease);
}

.ms-chev--open[b-gzm58tbjxh] {
    transform: rotate(180deg);
}

/* === Body === */
.ms-body[b-gzm58tbjxh] {
    padding: var(--hl-sp-5) var(--hl-sp-6) var(--hl-sp-6);
    border-top: 1px solid var(--hl-border);
    animation: ms-reveal-b-gzm58tbjxh var(--hl-dur-base) var(--hl-ease) both;
}

.ms-body--danger[b-gzm58tbjxh] {
    border-top-color: rgba(239, 68, 68, 0.18);
}

@keyframes ms-reveal-b-gzm58tbjxh {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

/* === Footer === */
.ms-foot[b-gzm58tbjxh] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-3);
    flex-wrap: wrap;
    margin-top: var(--hl-sp-6);
    padding-top: var(--hl-sp-4);
    border-top: 1px solid var(--hl-border);
}

.ms-foot--danger[b-gzm58tbjxh] {
    border-top-color: rgba(239, 68, 68, 0.18);
}

.ms-status[b-gzm58tbjxh] {
    margin-left: auto;
    color: var(--hl-text-faint);
    font-size: var(--hl-fs-sm);
}

@media (max-width: 560px) {
    .ms-head[b-gzm58tbjxh] {
        padding: var(--hl-sp-4);
    }

    .ms-body[b-gzm58tbjxh] {
        padding: var(--hl-sp-4);
    }

    .ms-status[b-gzm58tbjxh] {
        margin-left: 0;
    }
}
/* /Components/Features/Topics/Manage/ManageTopic.razor.rz.scp.css */
/* Page shell for the manage (edit) form. Every surface — cards, buttons,
   alerts, fields — comes from the global honestli.css design system; this is
   just the page width, header layout, the completeness strip, and the small
   bits the accordion sections hang off. The disclosure chrome itself lives in
   ManageSection.razor.css. */

.mt-shell[b-e9w86nvv6x] {
    max-width: 900px;
    margin-inline: auto;
}

/* === Header === */
.mt-header[b-e9w86nvv6x] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--hl-sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--hl-sp-4);
}

.mt-header__head[b-e9w86nvv6x] {
    min-width: 0;
}

.mt-title[b-e9w86nvv6x] {
    margin: 0;
    overflow-wrap: anywhere;
}

.mt-subtitle[b-e9w86nvv6x] {
    margin-top: var(--hl-sp-2);
    font-size: var(--hl-fs-md);
}

.mt-header__actions[b-e9w86nvv6x] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-2);
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* === Completeness strip === */
.mt-progress[b-e9w86nvv6x] {
    display: flex;
    align-items: center;
    gap: var(--hl-sp-3);
    background: var(--hl-bg-elev);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-r-lg);
    box-shadow: var(--hl-shadow-card);
    padding: var(--hl-sp-3) var(--hl-sp-4);
    margin-bottom: var(--hl-sp-4);
}

.mt-progress__label[b-e9w86nvv6x] {
    color: var(--hl-text-muted);
    font-size: var(--hl-fs-sm);
    white-space: nowrap;
}

.mt-progress__track[b-e9w86nvv6x] {
    flex: 1;
    height: 6px;
    min-width: 60px;
    border-radius: var(--hl-r-pill);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.mt-progress__bar[b-e9w86nvv6x] {
    display: block;
    height: 100%;
    border-radius: var(--hl-r-pill);
    background: var(--hl-accent);
    transition: width var(--hl-dur-base) var(--hl-ease);
}

.mt-progress__count[b-e9w86nvv6x] {
    color: var(--hl-text-faint);
    font-size: var(--hl-fs-sm);
    white-space: nowrap;
}

.mt-progress__count--dirty[b-e9w86nvv6x] {
    color: var(--hl-accent);
    font-weight: 600;
}

/* === Sections === */
.mt-sections[b-e9w86nvv6x] {
    display: flex;
    flex-direction: column;
    gap: var(--hl-sp-4);
    margin-bottom: var(--hl-sp-10);
}

/* Cover-image thumbnail in the closed section header. */
.mt-thumb[b-e9w86nvv6x] {
    display: block;
    width: 56px;
    height: 40px;
    border-radius: var(--hl-r-sm);
    object-fit: cover;
    border: 1px solid var(--hl-border-strong);
}

.mt-thumb--empty[b-e9w86nvv6x] {
    border-style: dashed;
    background: rgba(255, 255, 255, 0.02);
}

/* A failed section save reports inside that section, just above its footer. */
.mt-secerror[b-e9w86nvv6x] {
    margin-top: var(--hl-sp-4);
}

/* === Danger zone === */
.mt-danger__copy[b-e9w86nvv6x] {
    margin: 0;
    line-height: var(--hl-lh-relaxed);
}

.mt-confirm[b-e9w86nvv6x] {
    max-width: 320px;
}

/* Blazor's ValidationMessage renders a child <div> outside this component's
   scope, so reach it with ::deep and give it the design-system error look. */
[b-e9w86nvv6x] .validation-message {
    color: var(--hl-danger);
    font-size: var(--hl-fs-sm);
}

@media (max-width: 560px) {
    .mt-progress[b-e9w86nvv6x] {
        flex-wrap: wrap;
    }

    .mt-progress__track[b-e9w86nvv6x] {
        order: 3;
        flex-basis: 100%;
    }
}
/* /Components/Features/Topics/ManageMy/ManageMyTopics.razor.rz.scp.css */
.mmt-title[b-xs04xgm9ku] {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 2px;
}

.mmt-subtitle[b-xs04xgm9ku] {
    font-size: 0.85rem;
    color: var(--hl-text-muted, #6b7280);
    margin-bottom: 0;
}

/* Team-context banner — makes it unmistakable the list is a team's topics,
   not the user's own. Blue/info tint matches the hl-badge--info chip. */
.mmt-team-banner[b-xs04xgm9ku] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(56, 189, 248, 0.10);
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 10px;
    font-size: 0.88rem;
}

.mmt-team-banner-icon[b-xs04xgm9ku] {
    --fa-primary-color: #38bdf8;
    --fa-secondary-color: #38bdf8;
    font-size: 1rem;
}

/* Search */
.mmt-search-wrap[b-xs04xgm9ku] {
    position: relative;
    max-width: 420px;
}

.mmt-search-icon[b-xs04xgm9ku] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hl-text-muted, #6b7280);
    pointer-events: none;
}

.mmt-search[b-xs04xgm9ku] {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--hl-border, #d1d5db);
    border-radius: 8px;
    font-size: 0.9rem;
    background: transparent;
    color: inherit;
}

.mmt-no-results[b-xs04xgm9ku] {
    color: var(--hl-text-muted, #6b7280);
    font-size: 0.9rem;
}

/* Topic card — the design-system hl-card (header / body / meta / footer);
   these rules only layer equal-height + content styling on top of it. */
.mmt-card[b-xs04xgm9ku] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Body grows so the meta + footer sit flush at the bottom and cards in a
   row stay the same height regardless of summary length. */
.mmt-card .hl-card__body[b-xs04xgm9ku] {
    flex: 1 1 auto;
    min-width: 0;
}

.mmt-card--disabled[b-xs04xgm9ku] {
    opacity: 0.62;
}

.mmt-name[b-xs04xgm9ku] {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 1rem;
    color: var(--hl-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep the status badge from being squeezed by a long title. */
.mmt-card .hl-card__header .hl-badge[b-xs04xgm9ku] {
    flex-shrink: 0;
}

.mmt-summary[b-xs04xgm9ku] {
    font-size: 0.85rem;
    color: var(--hl-text-2, #d1d5db);
    margin-bottom: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mmt-summary--empty[b-xs04xgm9ku] {
    color: var(--hl-text-muted, #6b7280);
    font-style: italic;
}

.mmt-meta[b-xs04xgm9ku] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.8rem;
    color: var(--hl-text-muted, #6b7280);
}

.mmt-meta-cell[b-xs04xgm9ku] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mmt-meta-cell--default[b-xs04xgm9ku] {
    color: var(--hl-accent, #f97316);
    font-weight: 600;
}
/* /Components/Features/Topics/Moderate/ViewTopic.razor.rz.scp.css */
/* Moderation read-only topic inspector.
   Self-contained so it never depends on another component's scoped CSS.
   Mirrors the Honestli design language (Lexend, deep-navy cards, orange
   accent) but framed as a calm, editorial "dossier" rather than a form. */

.mv-shell[b-zziowxwxqr] {
    max-width: 760px;
    margin: 0 auto;
    font-family: "Lexend", system-ui, sans-serif;
}

/* === Card === */
.mv-card[b-zziowxwxqr] {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(96, 165, 250, 0.06), transparent 55%),
        #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 32px 34px 36px;
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
    animation: mv-rise-b-zziowxwxqr 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Accent rail down the left edge — the "under inspection" cue. */
.mv-rail[b-zziowxwxqr] {
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #F97316, rgba(249, 115, 22, 0.15));
}

/* === Header === */
.mv-head[b-zziowxwxqr] {
    animation: mv-rise-b-zziowxwxqr 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.mv-mode[b-zziowxwxqr] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.28);
    padding: 5px 11px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.mv-topic-title[b-zziowxwxqr] {
    color: #fff;
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.025em;
    margin: 0;
}

.mv-summary[b-zziowxwxqr] {
    color: #aeb7c4;
    font-size: 15.5px;
    line-height: 1.6;
    margin: 12px 0 0;
    max-width: 60ch;
}

/* === Cover image === */
.mv-cover[b-zziowxwxqr] {
    margin: 26px 0 4px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: #0d1b2e;
    aspect-ratio: 16 / 7;
    animation: mv-rise-b-zziowxwxqr 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.mv-cover img[b-zziowxwxqr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === Meta strip === */
.mv-meta[b-zziowxwxqr] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin: 28px 0;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    animation: mv-rise-b-zziowxwxqr 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.16s both;
}

.mv-meta-item[b-zziowxwxqr] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.mv-meta-item dt[b-zziowxwxqr] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #6b7280;
}

.mv-meta-item dd[b-zziowxwxqr] {
    margin: 0;
    color: #e5e7eb;
    font-size: 14px;
}

.mv-mono[b-zziowxwxqr] {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
    letter-spacing: 0.01em;
    color: #cbd5e1;
}

/* === Badges === */
.mv-badge[b-zziowxwxqr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 600;
}

.mv-badge-public[b-zziowxwxqr] {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.25);
    color: #4ade80;
}

.mv-badge-private[b-zziowxwxqr] {
    background: rgba(156, 163, 175, 0.10);
    border: 1px solid rgba(156, 163, 175, 0.22);
    color: #9ca3af;
}

/* === Body / description === */
.mv-body[b-zziowxwxqr] {
    animation: mv-rise-b-zziowxwxqr 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.mv-section-label[b-zziowxwxqr] {
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 14px;
}

.mv-empty-prose[b-zziowxwxqr] {
    color: #6b7280;
    font-style: italic;
    font-size: 14px;
    margin: 0;
}

/* Markdown output is injected as raw HTML, so it has no scope attribute —
   ::deep is required to reach those child elements. */
.mv-prose[b-zziowxwxqr] {
    color: #d6dbe2;
    font-size: 15.5px;
    line-height: 1.75;
}

.mv-prose[b-zziowxwxqr]  > :first-child { margin-top: 0; }
.mv-prose[b-zziowxwxqr]  > :last-child { margin-bottom: 0; }

.mv-prose[b-zziowxwxqr]  h1,
.mv-prose[b-zziowxwxqr]  h2,
.mv-prose[b-zziowxwxqr]  h3 {
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin: 1.6em 0 0.6em;
}

.mv-prose[b-zziowxwxqr]  h1 { font-size: 1.4em; }
.mv-prose[b-zziowxwxqr]  h2 { font-size: 1.2em; }
.mv-prose[b-zziowxwxqr]  h3 { font-size: 1.05em; }

.mv-prose[b-zziowxwxqr]  p { margin: 0 0 1em; }

.mv-prose[b-zziowxwxqr]  a {
    color: #60A5FA;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mv-prose[b-zziowxwxqr]  ul,
.mv-prose[b-zziowxwxqr]  ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.mv-prose[b-zziowxwxqr]  li { margin: 0.3em 0; }

.mv-prose[b-zziowxwxqr]  blockquote {
    margin: 1em 0;
    padding: 4px 0 4px 16px;
    border-left: 3px solid rgba(249, 115, 22, 0.5);
    color: #aeb7c4;
}

.mv-prose[b-zziowxwxqr]  code {
    font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", monospace;
    font-size: 0.88em;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 6px;
}

.mv-prose[b-zziowxwxqr]  pre {
    background: #0d1b2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 14px 16px;
    overflow-x: auto;
    margin: 0 0 1em;
}

.mv-prose[b-zziowxwxqr]  pre code {
    background: none;
    padding: 0;
}

.mv-prose[b-zziowxwxqr]  img {
    max-width: 100%;
    border-radius: 10px;
}

.mv-prose[b-zziowxwxqr]  hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 1.6em 0;
}

/* === States (loading / not found) === */
.mv-state[b-zziowxwxqr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    padding: 56px 34px;
}

.mv-state-icon[b-zziowxwxqr] {
    font-size: 30px;
    color: #60A5FA;
}

.mv-state-title[b-zziowxwxqr] {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    margin: 0;
}

.mv-state-text[b-zziowxwxqr] {
    color: #9ca3af;
    font-size: 14px;
    margin: 0;
}

.mv-spinner[b-zziowxwxqr] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.12);
    border-top-color: #F97316;
    animation: mv-spin-b-zziowxwxqr 0.7s linear infinite;
}

/* === Button ===
   NavLink renders its <a> outside this component's scope, so ::deep (anchored
   to the scoped .mv-shell) is required to reach it. */
.mv-shell[b-zziowxwxqr]  .mv-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 9px 18px;
    border-radius: 9px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.mv-shell[b-zziowxwxqr]  .mv-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* === Motion === */
@keyframes mv-rise-b-zziowxwxqr {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

@media (prefers-reduced-motion: reduce) {
    .mv-card[b-zziowxwxqr],
    .mv-head[b-zziowxwxqr],
    .mv-cover[b-zziowxwxqr],
    .mv-meta[b-zziowxwxqr],
    .mv-body[b-zziowxwxqr] {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .mv-card[b-zziowxwxqr] { padding: 24px 20px 28px; }
    .mv-topic-title[b-zziowxwxqr] { font-size: 24px; }
}
/* /Components/Features/Topics/TopicSaveError.razor.rz.scp.css */
.tse-banner[b-wf4gou4ysa] {
    margin-bottom: var(--hl-sp-5);
}

.tse-detail[b-wf4gou4ysa] {
    white-space: pre-wrap;
    margin: var(--hl-sp-2) 0 0;
    font-size: var(--hl-fs-sm);
    font-family: var(--hl-font-mono);
    color: var(--hl-text-2);
}
/* /Components/Layout/AnonymousLayout.razor.rz.scp.css */
/* Page shell — replaces Bootstrap d-flex flex-column min-vh-100 */
.anon-layout[b-rp4gr71z2e] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.anon-main[b-rp4gr71z2e] {
    flex: 1 1 auto;
}

/* Clip horizontal overflow so decorative glows don't create a scrollbar */
main[b-rp4gr71z2e] {
    overflow-x: hidden;
}

/* Offset for the fixed-top navbar so content doesn't sit underneath it */
.topnav-offset[b-rp4gr71z2e] {
    padding-top: 64px;
}

/* Consistent full-width content area for all public pages */
.anon-content[b-rp4gr71z2e] {
    max-width: 1240px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

/* Variables - applied to the layout wrapper so they cascade */
.layout-wrapper[b-rp4gr71z2e] {
    --honest-dark-blue: #0D182A;
    --honest-card: #12213A;
    --honest-orange: #F97316;
    --honest-orange-hover: #EA580C;
    --honest-light-blue: #60A5FA;

    /* Bootstrap Overrides */
    --bs-body-bg: var(--honest-dark-blue);
    --bs-body-color: #d1d5db;
    --bs-font-sans-serif: 'Lexend', sans-serif;
    --bs-primary: var(--honest-orange);
    --bs-primary-rgb: 249, 115, 22;

    font-family: 'Lexend', sans-serif;
    background-color: var(--honest-dark-blue);
    color: #d1d5db;
}

/* Custom Utilities - using ::deep to apply to children */
[b-rp4gr71z2e] .text-honest-orange {
    color: var(--honest-orange) !important;
}

[b-rp4gr71z2e] .text-honest-light-blue {
    color: var(--honest-light-blue) !important;
}

[b-rp4gr71z2e] .bg-honest-card {
    background-color: var(--honest-card);
}

/* Custom Button */
[b-rp4gr71z2e] .btn-honest-primary {
    background-color: var(--honest-orange);
    border-color: var(--honest-orange);
    color: white;
    box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.2);
    font-weight: 600;
    padding: 0.75rem 2rem;
}

[b-rp4gr71z2e] .btn-honest-primary:hover {
    background-color: var(--honest-orange-hover);
    border-color: var(--honest-orange-hover);
    color: white;
    transform: translateY(-1px);
}

[b-rp4gr71z2e] .card-honest {
    background-color: var(--honest-card);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
}

/* Hover Effects */
[b-rp4gr71z2e] .hover-scale {
    transition: transform 0.2s;
}

[b-rp4gr71z2e] .hover-scale:hover {
    transform: scale(1.02);
}

[b-rp4gr71z2e] .hover-text-primary {
    transition: color 0.2s;
}

[b-rp4gr71z2e] .hover-text-primary:hover {
    color: var(--honest-light-blue) !important;
}

/* Animation */
[b-rp4gr71z2e] .fade-in {
    animation: fadeIn-b-rp4gr71z2e 0.5s ease-in;
}

@keyframes fadeIn-b-rp4gr71z2e {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Footer — replaces Bootstrap container/row/col grid; mirrors fb-footer */
.anon-footer[b-rp4gr71z2e] {
    margin-top: auto;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    font-size: 13px;
}

.anon-footer-inner[b-rp4gr71z2e] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.anon-footer-links[b-rp4gr71z2e] {
    display: flex;
    gap: 24px;
}

[b-rp4gr71z2e] .anon-footer-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s ease;
}

[b-rp4gr71z2e] .anon-footer-link:hover,
[b-rp4gr71z2e] .anon-footer-link.active {
    color: #60A5FA;
}

.anon-footer-meta[b-rp4gr71z2e] {
    text-align: right;
    line-height: 1.5;
}

.anon-footer-meta p[b-rp4gr71z2e] {
    margin: 0;
}

@media (max-width: 640px) {
    .anon-footer-inner[b-rp4gr71z2e] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .anon-footer-meta[b-rp4gr71z2e] {
        text-align: center;
    }
}
/* /Components/Layout/AuthenticatedLayout.razor.rz.scp.css */
/* ===== App shell ===== */
.app-layout[b-p8jjjcyu49] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: #0D182A;
    color: #d1d5db;
    font-family: "Lexend", system-ui, sans-serif;
}

/* ===== Sidebar toggle (hidden checkbox controlling mobile drawer) ===== */
.sidebar-toggle-state[b-p8jjjcyu49] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* ===== Top bar ===== */
.app-topbar[b-p8jjjcyu49] {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 56px;
    background: rgba(11, 22, 40, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.app-topbar-inner[b-p8jjjcyu49] {
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.app-topbar-left[b-p8jjjcyu49] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.app-topbar-right[b-p8jjjcyu49] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== Hamburger (mobile only) ===== */
.topbar-hamburger[b-p8jjjcyu49] {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    font-size: 18px;
    transition: background 0.15s ease, color 0.15s ease;
    user-select: none;
}

.topbar-hamburger:hover[b-p8jjjcyu49] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* ===== Brand ===== */
.topbar-brand[b-p8jjjcyu49] {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.topbar-brand img[b-p8jjjcyu49] {
    width: 160px;
    height: 44px;
    object-fit: contain;
}

/* ===== Shell (sidebar + content) ===== */
.app-shell[b-p8jjjcyu49] {
    display: flex;
    flex: 1;
    min-height: 0;
    position: relative;
}

/* ===== Sidebar ===== */
.app-sidebar[b-p8jjjcyu49] {
    width: 240px;
    flex-shrink: 0;
    background: #0B1628;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 56px;
    align-self: flex-start;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

/* ===== Sidebar backdrop (mobile only, hidden on desktop) ===== */
.sidebar-backdrop[b-p8jjjcyu49] {
    display: none;
}

/* ===== Body ===== */
.app-body[b-p8jjjcyu49] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.app-content[b-p8jjjcyu49] {
    flex: 1;
    padding: 32px;
    overflow-y: auto;
}

/* ===== Footer ===== */
.app-footer[b-p8jjjcyu49] {
    padding: 16px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 13px;
}

.app-footer-inner[b-p8jjjcyu49] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.app-footer-links[b-p8jjjcyu49] {
    display: flex;
    gap: 24px;
}

/* NavLink renders <a> in a child component — reach it with ::deep */
[b-p8jjjcyu49] .app-footer-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s ease;
}

[b-p8jjjcyu49] .app-footer-link:hover,
[b-p8jjjcyu49] .app-footer-link.active {
    color: #60A5FA;
}

.app-footer-meta[b-p8jjjcyu49] {
    text-align: right;
    line-height: 1.5;
}

.app-footer-meta p[b-p8jjjcyu49] {
    margin: 0;
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
    .topbar-hamburger[b-p8jjjcyu49] {
        display: inline-flex;
    }

    .topbar-brand img[b-p8jjjcyu49] {
        width: 130px;
        height: 36px;
    }

    .app-topbar-inner[b-p8jjjcyu49] {
        padding: 0 16px;
    }

    .app-sidebar[b-p8jjjcyu49] {
        position: fixed;
        top: 56px;
        left: 0;
        bottom: 0;
        height: auto;
        z-index: 25;
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .sidebar-toggle-state:checked ~ .app-shell .app-sidebar[b-p8jjjcyu49] {
        transform: translateX(0);
    }

    .sidebar-backdrop[b-p8jjjcyu49] {
        display: block;
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 24;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
        cursor: pointer;
    }

    .sidebar-toggle-state:checked ~ .app-shell .sidebar-backdrop[b-p8jjjcyu49] {
        opacity: 1;
        pointer-events: auto;
    }

    .app-content[b-p8jjjcyu49] {
        padding: 20px;
    }

    .app-footer[b-p8jjjcyu49] {
        padding: 16px 20px;
    }

    .app-footer-inner[b-p8jjjcyu49] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .app-footer-meta[b-p8jjjcyu49] {
        text-align: center;
    }
}
/* /Components/Layout/FeedbackLayout.razor.rz.scp.css */
.fb-layout[b-qn37uzsv2e] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #0D182A;
    color: #d1d5db;
    font-family: "Lexend", system-ui, sans-serif;
}

.fb-topbar[b-qn37uzsv2e] {
    position: sticky;
    top: 0;
    z-index: 30;
    height: 56px;
    background: rgba(11, 22, 40, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.fb-topbar-inner[b-qn37uzsv2e] {
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.fb-brand[b-qn37uzsv2e] {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

.fb-brand img[b-qn37uzsv2e] {
    width: 160px;
    height: 44px;
    object-fit: contain;
}

.fb-topbar-right[b-qn37uzsv2e] {
    display: flex;
    align-items: center;
    gap: 16px;
}

[b-qn37uzsv2e] .fb-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d1d5db;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-qn37uzsv2e] .fb-nav-link:hover,
[b-qn37uzsv2e] .fb-nav-link.active {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.fb-body[b-qn37uzsv2e] {
    flex: 1 1 auto;
    min-height: 0;
}

.fb-footer[b-qn37uzsv2e] {
    flex-shrink: 0;
    padding: 16px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(11, 22, 40, 0.6);
    color: #9ca3af;
    font-size: 13px;
}

.fb-footer-inner[b-qn37uzsv2e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.fb-footer-links[b-qn37uzsv2e] {
    display: flex;
    gap: 24px;
}

[b-qn37uzsv2e] .fb-footer-link {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s ease;
}

[b-qn37uzsv2e] .fb-footer-link:hover,
[b-qn37uzsv2e] .fb-footer-link.active {
    color: #fff;
}

.fb-footer-meta[b-qn37uzsv2e] {
    text-align: right;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .fb-brand img[b-qn37uzsv2e] {
        width: 130px;
        height: 36px;
    }

    .fb-topbar-inner[b-qn37uzsv2e] {
        padding: 0 16px;
    }

    .fb-footer[b-qn37uzsv2e] {
        padding: 16px 20px;
    }

    .fb-footer-inner[b-qn37uzsv2e] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }

    .fb-footer-meta[b-qn37uzsv2e] {
        text-align: center;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-iwgzf595dm] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-iwgzf595dm] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Navigation/AnonTopNav.razor.rz.scp.css */
/* Public top nav — Bootstrap navbar replacement. Fixed-top, blurred, with a
   md-breakpoint (768px) "expand": vertical drawer below 768px, horizontal bar above. */

.anon-topbar[b-ydg7gfw8hc] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(11, 18, 32, 0.72);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}

@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .anon-topbar[b-ydg7gfw8hc] {
        background-color: rgba(11, 18, 32, 0.95);
    }
}

/* Hidden checkbox that drives the mobile drawer (pure-CSS toggle, no JS/circuit) */
.anon-nav-state[b-ydg7gfw8hc] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Responsive container — mirrors Bootstrap's .container widths so the nav lines up
   with page content (the marketing pages still use .container internally). */
.anon-topbar-inner[b-ydg7gfw8hc] {
    width: 100%;
    margin: 0 auto;
    padding: 0 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}

@media (min-width: 576px)  { .anon-topbar-inner[b-ydg7gfw8hc] { max-width: 540px; } }
@media (min-width: 768px)  { .anon-topbar-inner[b-ydg7gfw8hc] { max-width: 720px; } }
@media (min-width: 992px)  { .anon-topbar-inner[b-ydg7gfw8hc] { max-width: 960px; } }
@media (min-width: 1200px) { .anon-topbar-inner[b-ydg7gfw8hc] { max-width: 1140px; } }
@media (min-width: 1400px) { .anon-topbar-inner[b-ydg7gfw8hc] { max-width: 1320px; } }

/* ===== Brand ===== */
[b-ydg7gfw8hc] .anon-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}

[b-ydg7gfw8hc] .anon-brand img {
    height: 54px;
    width: auto;
    display: block;
}

/* ===== Mobile toggle (a <label> for the hidden checkbox) ===== */
.anon-toggle[b-ydg7gfw8hc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.25rem;
    line-height: 1;
    padding: 6px 8px;
    cursor: pointer;
    border-radius: 0.5rem;
    user-select: none;
}

.anon-toggle:hover[b-ydg7gfw8hc] { color: #fff; }

/* ===== Collapsible area (mobile drawer by default) ===== */
.anon-collapse[b-ydg7gfw8hc] {
    display: none;
    flex-basis: 100%;
}

/* Checkbox checked → drawer open (general-sibling + descendant from the input) */
.anon-nav-state:checked ~ .anon-topbar-inner .anon-collapse[b-ydg7gfw8hc] {
    display: block;
}

.anon-nav[b-ydg7gfw8hc] {
    list-style: none;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 12px 0 0;
    padding: 0;
}

.anon-nav-item[b-ydg7gfw8hc] {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.anon-nav-item:last-child[b-ydg7gfw8hc] {
    border-bottom: none;
}

/* NavLink renders <a> in a child component — reach it with ::deep */
[b-ydg7gfw8hc] .anon-nav-link {
    display: block;
    padding: 1rem 0.5rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

[b-ydg7gfw8hc] .anon-nav-link:hover,
[b-ydg7gfw8hc] .anon-nav-link:focus-visible {
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

[b-ydg7gfw8hc] .anon-nav-link.active {
    color: #fff;
    font-weight: 700;
    background-color: #1f2937;
}

/* "App" link — same shape as siblings; the pulsing dot is the only distinguishing mark. */
[b-ydg7gfw8hc] .anon-nav-link-app {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.01em;
}

[b-ydg7gfw8hc] .anon-nav-link-app .app-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3B82F6;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55);
    animation: app-pulse-b-ydg7gfw8hc 2.4s ease-out infinite;
}

@keyframes app-pulse-b-ydg7gfw8hc {
    0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

@media (prefers-reduced-motion: reduce) {
    [b-ydg7gfw8hc] .anon-nav-link-app .app-pulse {
        animation: none;
    }
}

/* ===== Auth buttons ===== */
.anon-auth[b-ydg7gfw8hc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}

[b-ydg7gfw8hc] .anon-log-link {
    color: #3B82F6;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 6px 0.5rem;
    transition: color 0.2s ease;
}

[b-ydg7gfw8hc] .anon-log-link:hover,
[b-ydg7gfw8hc] .anon-log-link:focus,
[b-ydg7gfw8hc] .anon-log-link:focus-visible {
    color: #fff;
}

/* ===== Desktop (>=768px) — "expand": horizontal bar, no toggle ===== */
@media (min-width: 768px) {
    .anon-topbar-inner[b-ydg7gfw8hc] {
        flex-wrap: nowrap;
    }

    .anon-toggle[b-ydg7gfw8hc] {
        display: none;
    }

    .anon-collapse[b-ydg7gfw8hc] {
        display: flex !important;
        flex-basis: auto;
        flex-grow: 1;
        align-items: center;
        gap: 8px;
    }

    .anon-nav[b-ydg7gfw8hc] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        width: auto;
        margin: 0 auto;   /* centers the links between brand and auth */
    }

    .anon-nav-item[b-ydg7gfw8hc] {
        width: auto;
        border-bottom: none;
    }

    [b-ydg7gfw8hc] .anon-nav-link {
        padding: 8px 0.5rem;
    }

    .anon-auth[b-ydg7gfw8hc] {
        margin: 0;
    }
}
/* /Components/Navigation/NavMenu.razor.rz.scp.css */
/* ===== Nav list ===== */
.sidebar-nav[b-lih8eiuou2] {
    padding: 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ===== Nav links — NavLink renders <a>, needs ::deep ===== */
[b-lih8eiuou2] .sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-lih8eiuou2] .sidebar-link:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

[b-lih8eiuou2] .sidebar-link.active {
    background: rgba(249, 115, 22, 0.12);
    color: #fff;
    font-weight: 600;
}

/* ===== Divider ===== */
.sidebar-divider[b-lih8eiuou2] {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 8px 4px;
}

/* ===== Unread badge ===== */
.sidebar-badge[b-lih8eiuou2] {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 50px;
    background: #06b6d4;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: "Lexend", system-ui, sans-serif;
}
/* /Components/Navigation/ProfileMenu.razor.rz.scp.css */
/* Anchor for the absolutely-positioned dropdown (replaces Bootstrap .btn-group + Popper) */
.pm-root[b-l5c4k1s5a5] {
    position: relative;
    display: inline-flex;
}

/* Full-viewport click-catcher that closes the menu when clicking outside it */
.pm-backdrop[b-l5c4k1s5a5] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

.pm-avatar-btn[b-l5c4k1s5a5] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: opacity 0.15s ease;
}

.pm-avatar-btn:hover[b-l5c4k1s5a5] {
    opacity: 0.85;
}

.pm-avatar[b-l5c4k1s5a5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.12);
}

.pm-avatar-fallback[b-l5c4k1s5a5] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(249, 115, 22, 0.22);
    color: #FB923C;
    font-size: 13px;
    font-weight: 700;
    font-family: "Lexend", system-ui, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(249, 115, 22, 0.3);
}

.pm-dropdown[b-l5c4k1s5a5] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    min-width: 200px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
    animation: pm-pop-b-l5c4k1s5a5 0.12s ease-out;
}

@keyframes pm-pop-b-l5c4k1s5a5 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pm-dropdown-header[b-l5c4k1s5a5] {
    padding: 8px 12px 6px;
    color: #6c757d;
    font-size: 12px;
    font-weight: 600;
    font-family: "Lexend", system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

[b-l5c4k1s5a5] .pm-dropdown-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px;
    border-radius: 8px;
    color: #d1d5db;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-l5c4k1s5a5] .pm-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.pm-dropdown-divider[b-l5c4k1s5a5] {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 6px 4px;
}
/* /Components/Navigation/ProfileSwitcher.razor.rz.scp.css */
/* ===== Add organization enticement ===== */
.add-org-pill-wrap[b-8x3w8rv3ul] {
    display: contents;
}

.add-org-pill-wrap[b-8x3w8rv3ul]  .add-org-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 20px;
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.add-org-pill-wrap[b-8x3w8rv3ul]  .add-org-pill:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.add-org-pill-wrap[b-8x3w8rv3ul]  .add-org-pill-icon {
    font-size: 13px;
    opacity: 0.7;
    flex-shrink: 0;
}

/* Anchor for the absolutely-positioned dropdown (replaces Bootstrap .btn-group + Popper) */
.persona-root[b-8x3w8rv3ul] {
    position: relative;
    display: inline-flex;
}

/* Full-viewport click-catcher that closes the menu when clicking outside it */
.persona-backdrop[b-8x3w8rv3ul] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}

/* ===== Persona pill button ===== */
.persona-pill[b-8x3w8rv3ul] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    color: #d1d5db;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    max-width: 200px;
}

.persona-pill:hover[b-8x3w8rv3ul] {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.persona-pill-icon[b-8x3w8rv3ul] {
    font-size: 13px;
    opacity: 0.75;
    flex-shrink: 0;
}

.persona-pill-name[b-8x3w8rv3ul] {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.persona-pill-chevron[b-8x3w8rv3ul] {
    font-size: 10px;
    opacity: 0.6;
    flex-shrink: 0;
}

/* ===== Persona dropdown ===== */
.persona-dropdown[b-8x3w8rv3ul] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    min-width: 220px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.7);
    animation: persona-pop-b-8x3w8rv3ul 0.12s ease-out;
}

@keyframes persona-pop-b-8x3w8rv3ul {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.persona-dropdown-name[b-8x3w8rv3ul] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.persona-dropdown-item[b-8x3w8rv3ul] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: none;
    color: #d1d5db;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.persona-dropdown-item:hover[b-8x3w8rv3ul] {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.persona-dropdown-item-active[b-8x3w8rv3ul] {
    color: #FB923C;
}

.persona-dropdown-item-active:hover[b-8x3w8rv3ul] {
    color: #FB923C;
    background: rgba(249, 115, 22, 0.08);
}

.persona-dropdown-icon[b-8x3w8rv3ul] {
    font-size: 13px;
    opacity: 0.7;
    flex-shrink: 0;
}

.persona-dropdown-check[b-8x3w8rv3ul] {
    font-size: 13px;
    color: #FB923C;
    flex-shrink: 0;
}
/* /Components/Pages/About.razor.rz.scp.css */
/* ===== Page wrapper & glows ===== */
.abt-page[b-el6vv23rnt] {
    position: relative;
    overflow-x: clip;
}

.abt-glow-orange[b-el6vv23rnt] {
    position: absolute;
    top: -100px;
    left: -120px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(249,115,22,.12), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.abt-glow-violet[b-el6vv23rnt] {
    position: absolute;
    top: 400px;
    right: -160px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(84,110,250,.12), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.abt-inner[b-el6vv23rnt] {
    position: relative;
    z-index: 1;
}

/* ===== Shared eyebrow & section titles ===== */
.abt-section-eyebrow[b-el6vv23rnt] {
    color: #F97316;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.abt-section-title[b-el6vv23rnt] {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    line-height: 1.2;
}

/* ===== Hero ===== */
.abt-hero[b-el6vv23rnt] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 80px;
}

.abt-eyebrow[b-el6vv23rnt] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(249,115,22,.14);
    color: #F97316;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.abt-headline[b-el6vv23rnt] {
    color: #fff;
    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
}

.abt-accent-orange[b-el6vv23rnt] { color: #FF7F27; }
.abt-accent-violet[b-el6vv23rnt]  { color: #546EFA; }

.abt-lead[b-el6vv23rnt] {
    color: #d1d5db;
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 520px;
}

.abt-lead strong[b-el6vv23rnt] { color: #fff; }

.abt-cta-row[b-el6vv23rnt] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

/* ===== Buttons ===== */
[b-el6vv23rnt] .btn-abt-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 8px;
    background: #FF7F27;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 16px -6px rgba(255,127,39,.45);
}

[b-el6vv23rnt] .btn-abt-primary:hover {
    background: #EA580C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(255,127,39,.6);
}

[b-el6vv23rnt] .btn-abt-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: #d1d5db;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-el6vv23rnt] .btn-abt-ghost:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

/* ===== Hero insight card ===== */
.abt-insight-card[b-el6vv23rnt] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 32px 28px;
    position: relative;
    overflow: hidden;
    /* orange top accent */
    box-shadow: inset 0 2px 0 rgba(249,115,22,.45);
}

.abt-insight-icon[b-el6vv23rnt] {
    font-size: 32px;
    color: rgba(249,115,22,.35);
    margin-bottom: 16px;
    line-height: 1;
}

.abt-insight-quote[b-el6vv23rnt] {
    color: #e5e7eb;
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 16px;
    font-style: italic;
}

.abt-insight-quote strong[b-el6vv23rnt] {
    color: #fff;
    font-style: normal;
}

.abt-insight-label[b-el6vv23rnt] {
    color: #F97316;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ===== Two-column sections ===== */
.abt-origin[b-el6vv23rnt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 72px;
}

.abt-mid[b-el6vv23rnt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 72px;
}

.abt-body-text[b-el6vv23rnt] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 16px;
}

.abt-body-text:last-child[b-el6vv23rnt] { margin-bottom: 0; }
.abt-body-text strong[b-el6vv23rnt] { color: #e5e7eb; }
.abt-body-text em[b-el6vv23rnt] { color: #d1d5db; }

/* ===== Highlight card (problem section) ===== */
.abt-highlight-card[b-el6vv23rnt] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 24px 22px;
    margin-top: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: inset 0 0 0 1px rgba(249,115,22,.18);
}

.abt-highlight-icon[b-el6vv23rnt] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: rgba(249,115,22,.15);
    color: #F97316;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.abt-highlight-text[b-el6vv23rnt] {
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.abt-highlight-text strong[b-el6vv23rnt] {
    color: #fff;
    display: block;
    margin-bottom: 4px;
}

/* ===== Feature card (What we are) ===== */
.abt-feature-card[b-el6vv23rnt] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.abt-divider[b-el6vv23rnt] {
    border: none;
    border-top: 1px solid rgba(255,255,255,.07);
    margin: 0;
}

.abt-feature-item[b-el6vv23rnt] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.abt-feature-icon[b-el6vv23rnt] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.abt-feature-icon-blue[b-el6vv23rnt]   { background: rgba(96,165,250,.18);  color: #60A5FA; }
.abt-feature-icon-orange[b-el6vv23rnt] { background: rgba(249,115,22,.18);  color: #F97316; }
.abt-feature-icon-violet[b-el6vv23rnt] { background: rgba(84,110,250,.18);  color: #546EFA; }
.abt-feature-icon-green[b-el6vv23rnt]  { background: rgba(74,222,128,.18);  color: #4ade80; }

.abt-feature-title[b-el6vv23rnt] {
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.abt-feature-desc[b-el6vv23rnt] {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* ===== Principles section ===== */
.abt-principles[b-el6vv23rnt] {
    margin-bottom: 72px;
}

.abt-mini-grid[b-el6vv23rnt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.abt-mini-card[b-el6vv23rnt] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 22px 18px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.abt-mini-card:hover[b-el6vv23rnt] {
    border-color: rgba(255,255,255,.14);
    transform: translateY(-2px);
}

.abt-mini-icon[b-el6vv23rnt] {
    font-size: 20px;
    margin-bottom: 10px;
}

.abt-mini-title[b-el6vv23rnt] {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.abt-mini-desc[b-el6vv23rnt] {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* ===== CTA banner ===== */
.abt-cta-banner[b-el6vv23rnt] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #12213A 0%, #1a2b4e 100%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    padding: 52px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.abt-cta-glow[b-el6vv23rnt] {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255,127,39,.22), transparent 65%);
    pointer-events: none;
}

.abt-cta-text[b-el6vv23rnt] {
    position: relative;
}

.abt-cta-headline[b-el6vv23rnt] {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.abt-cta-body[b-el6vv23rnt] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.abt-cta-actions[b-el6vv23rnt] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .abt-inner[b-el6vv23rnt] {
        padding: 48px 24px 72px;
    }

    .abt-hero[b-el6vv23rnt] {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-bottom: 56px;
    }

    .abt-origin[b-el6vv23rnt],
    .abt-mid[b-el6vv23rnt] {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .abt-cta-banner[b-el6vv23rnt] {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 32px;
    }
}

@media (max-width: 640px) {
    .abt-inner[b-el6vv23rnt] {
        padding: 40px 20px 56px;
    }

    .abt-headline[b-el6vv23rnt] {
        font-size: 34px;
    }

    .abt-mini-grid[b-el6vv23rnt] {
        grid-template-columns: 1fr 1fr;
    }

    .abt-cta-banner[b-el6vv23rnt] {
        padding: 32px 24px;
    }

    .abt-cta-headline[b-el6vv23rnt] {
        font-size: 22px;
    }
}
/* /Components/Pages/AnonymousFeedback.razor.rz.scp.css */
/* ===== Page wrapper & glows ===== */
.af-page[b-yq1xudwl42] {
    position: relative;
    overflow-x: clip;
}

.hero-glow-orange[b-yq1xudwl42] {
    position: absolute;
    top: -120px;
    left: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255,127,39,.16), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.hero-glow-violet[b-yq1xudwl42] {
    position: absolute;
    top: 320px;
    right: -160px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(84,110,250,.13), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.af-inner[b-yq1xudwl42] {
    position: relative;
    z-index: 1;
    padding-top: 72px;
    padding-bottom: 88px;
}

/* ===== Hero ===== */
.af-hero[b-yq1xudwl42] {
    margin-bottom: 80px;
}

.hero-text[b-yq1xudwl42] {
    max-width: 680px;
}

.hero-badge[b-yq1xudwl42] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(249,115,22,.16);
    color: #fdba74;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 20px;
}

.hero-badge-dot[b-yq1xudwl42] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF7F27;
    flex-shrink: 0;
}

.hero-headline[b-yq1xudwl42] {
    color: #fff;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
}

.hero-accent-orange[b-yq1xudwl42] { color: #FF7F27; }
.hero-accent-violet[b-yq1xudwl42]  { color: #546EFA; }

.hero-body[b-yq1xudwl42] {
    color: #d1d5db;
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 580px;
}

.hero-actions[b-yq1xudwl42] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 28px;
}

.hero-signals[b-yq1xudwl42] {
    display: flex;
    gap: 24px;
    color: #9ca3af;
    font-size: 13.5px;
    flex-wrap: wrap;
}

.hero-signals span[b-yq1xudwl42] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== Buttons ===== */
[b-yq1xudwl42] .btn-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 8px;
    background: #FF7F27;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 16px -6px rgba(255,127,39,.45);
}

[b-yq1xudwl42] .btn-hero-cta:hover {
    background: #EA580C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(255,127,39,.6);
}

[b-yq1xudwl42] .btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-yq1xudwl42] .btn-hero-outline:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

/* ===== Content sections ===== */
.af-section[b-yq1xudwl42] {
    padding: 56px 0;
    border-top: 1px solid rgba(255,255,255,.05);
}

.section-eyebrow[b-yq1xudwl42] {
    color: #F97316;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.section-title[b-yq1xudwl42] {
    color: #fff;
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    line-height: 1.15;
}

.section-sub[b-yq1xudwl42] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 0 36px;
    max-width: 640px;
}

/* ===== Feature cards ===== */
.feature-card[b-yq1xudwl42] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 28px 24px;
    box-shadow: 0 10px 30px -16px rgba(0,0,0,.5);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.feature-card:hover[b-yq1xudwl42] {
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.7);
    transform: translateY(-2px);
}

.feature-icon[b-yq1xudwl42] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.feature-title[b-yq1xudwl42] {
    color: #e5e7eb;
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
}

.feature-body[b-yq1xudwl42] {
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0;
}

/* ===== Trust / giver cards ===== */
.af-faq-item[b-yq1xudwl42] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 28px 24px;
    transition: border-color 0.2s ease;
}

.af-faq-item:hover[b-yq1xudwl42] {
    border-color: rgba(255,255,255,.14);
}

.af-faq-question[b-yq1xudwl42] {
    color: #e5e7eb;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
}

.af-faq-answer[b-yq1xudwl42] {
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.7;
    margin: 0;
}

/* ===== CTA section ===== */
.cta-section[b-yq1xudwl42] {
    padding: 32px 0 0;
}

.cta-card[b-yq1xudwl42] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #12213A 0%, #1a2b4e 100%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    padding: 52px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.cta-glow[b-yq1xudwl42] {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255,127,39,.22), transparent 65%);
    pointer-events: none;
}

.cta-text[b-yq1xudwl42] {
    position: relative;
}

.cta-headline[b-yq1xudwl42] {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.cta-body[b-yq1xudwl42] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    max-width: 480px;
}

.cta-actions[b-yq1xudwl42] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .af-inner[b-yq1xudwl42] {
        padding-top: 48px;
        padding-bottom: 72px;
    }

    .cta-card[b-yq1xudwl42] {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 32px;
    }
}

@media (max-width: 640px) {
    .af-inner[b-yq1xudwl42] {
        padding-top: 40px;
        padding-bottom: 56px;
    }

    .af-section[b-yq1xudwl42] {
        padding: 40px 0;
    }

    .cta-card[b-yq1xudwl42] {
        padding: 32px 24px;
    }

    .cta-headline[b-yq1xudwl42] {
        font-size: 22px;
    }
}
/* /Components/Pages/ConfirmPlanChange.razor.rz.scp.css */
.cc-page[b-a4l5uuu70o] {
    position: relative;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 20px;
}

.cc-bg[b-a4l5uuu70o] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(59, 130, 246, 0.10), transparent 70%);
    pointer-events: none;
}

.cc-card[b-a4l5uuu70o] {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 32px 28px;
    backdrop-filter: blur(8px);
}

.cc-head[b-a4l5uuu70o] {
    text-align: center;
    margin-bottom: 24px;
}

.cc-title[b-a4l5uuu70o] {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 18px;
}

.cc-transition[b-a4l5uuu70o] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.cc-plan[b-a4l5uuu70o] {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}

.cc-plan-from[b-a4l5uuu70o] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #9ca3af;
}

.cc-plan-to[b-a4l5uuu70o] {
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(96, 165, 250, 0.35);
    color: #bfdbfe;
}

.cc-arrow[b-a4l5uuu70o] {
    color: #6b7280;
    font-size: 13px;
}

.cc-summary[b-a4l5uuu70o] {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
}

.cc-row[b-a4l5uuu70o] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.cc-row-label[b-a4l5uuu70o] {
    color: #9ca3af;
    font-size: 14px;
}

.cc-row-value[b-a4l5uuu70o] {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.cc-note[b-a4l5uuu70o] {
    color: #6b7280;
    font-size: 12px;
    line-height: 1.5;
    margin: 12px 0 0;
}

.cc-error[b-a4l5uuu70o] {
    color: #fca5a5;
    font-size: 13px;
    text-align: center;
    margin: 0 0 16px;
}

.cc-actions[b-a4l5uuu70o] {
    display: flex;
    gap: 12px;
}

.cc-cta[b-a4l5uuu70o] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.cc-cta:disabled[b-a4l5uuu70o] {
    opacity: 0.6;
    cursor: default;
}

.cc-cta-primary[b-a4l5uuu70o] {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    color: #fff;
}

.cc-cta-primary:not(:disabled):hover[b-a4l5uuu70o] {
    transform: translateY(-1px);
}

.cc-cta-ghost[b-a4l5uuu70o] {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.10);
    color: #d1d5db;
}

.cc-cta-ghost:not(:disabled):hover[b-a4l5uuu70o] {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.cc-loading[b-a4l5uuu70o] {
    text-align: center;
    color: #9ca3af;
    padding: 20px 0;
}

.cc-loading i[b-a4l5uuu70o] {
    font-size: 28px;
    color: #60a5fa;
    margin-bottom: 12px;
}

.cc-done[b-a4l5uuu70o] {
    text-align: center;
}

.cc-done-icon[b-a4l5uuu70o] {
    font-size: 44px;
    margin-bottom: 8px;
    --fa-primary-color: #fff;
    --fa-secondary-color: #34d399;
    --fa-secondary-opacity: 1;
}

.cc-done-icon-info[b-a4l5uuu70o] {
    --fa-primary-color: #fff;
    --fa-secondary-color: #60a5fa;
    --fa-secondary-opacity: 1;
}

.cc-done-msg[b-a4l5uuu70o] {
    color: #d1d5db;
    font-size: 14px;
    margin: 0 0 22px;
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* ===== Page wrapper & glows ===== */
.ct-page[b-s69ti62nzs] {
    position: relative;
    overflow-x: clip;
}

.ct-glow-orange[b-s69ti62nzs] {
    position: absolute;
    top: -100px;
    right: -120px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(249,115,22,.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.ct-glow-violet[b-s69ti62nzs] {
    position: absolute;
    top: 350px;
    left: -160px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(84,110,250,.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.ct-inner[b-s69ti62nzs] {
    position: relative;
    z-index: 1;
}

/* ===== Two-column layout ===== */
.ct-layout[b-s69ti62nzs] {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 64px;
    align-items: start;
}

/* ===== Left — info column ===== */
.ct-eyebrow[b-s69ti62nzs] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(249,115,22,.14);
    color: #F97316;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.ct-headline[b-s69ti62nzs] {
    color: #fff;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
}

.ct-lead[b-s69ti62nzs] {
    color: #9ca3af;
    font-size: 15.5px;
    line-height: 1.7;
    margin: 0 0 36px;
}

/* ===== Info cards ===== */
.ct-info-cards[b-s69ti62nzs] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ct-info-card[b-s69ti62nzs] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 18px 20px;
    transition: border-color 0.2s ease;
}

.ct-info-card:hover[b-s69ti62nzs] {
    border-color: rgba(255,255,255,.13);
}

.ct-info-icon[b-s69ti62nzs] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.ct-info-icon-blue[b-s69ti62nzs]   { background: rgba(96,165,250,.18);  color: #60A5FA; }
.ct-info-icon-orange[b-s69ti62nzs] { background: rgba(249,115,22,.18);  color: #F97316; }
.ct-info-icon-green[b-s69ti62nzs]  { background: rgba(74,222,128,.18);  color: #4ade80; }

.ct-info-title[b-s69ti62nzs] {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.ct-info-value[b-s69ti62nzs] {
    color: #e5e7eb;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

/* ===== Right — form card ===== */
.ct-form-card[b-s69ti62nzs] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 36px 32px;
}

.ct-form-title[b-s69ti62nzs] {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 24px;
}

/* ===== Form fields ===== */
.ct-form-group[b-s69ti62nzs] {
    margin-bottom: 20px;
}

.ct-label[b-s69ti62nzs] {
    display: block;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: 7px;
}

/* Target Blazor-rendered input/textarea inside the form card */
[b-s69ti62nzs] .ct-form-card .form-control {
    display: block;
    width: 100%;
    background: rgba(13,24,42,.7);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 14.5px;
    padding: 11px 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    box-shadow: none;
    font-family: inherit;
}

[b-s69ti62nzs] .ct-form-card .form-control::placeholder {
    color: #4b5563;
}

[b-s69ti62nzs] .ct-form-card .form-control:focus {
    border-color: rgba(249,115,22,.5);
    box-shadow: 0 0 0 3px rgba(249,115,22,.10);
    background: rgba(13,24,42,.9);
    color: #f3f4f6;
}

[b-s69ti62nzs] .ct-form-card .form-control.invalid,
[b-s69ti62nzs] .ct-form-card .form-control.modified.invalid {
    border-color: rgba(248,113,113,.55);
}

[b-s69ti62nzs] .ct-form-card textarea.form-control {
    resize: vertical;
    min-height: 130px;
}

/* Blazor validation messages */
[b-s69ti62nzs] .ct-form-card .validation-message {
    color: #f87171;
    font-size: 12.5px;
    margin-top: 5px;
    display: block;
}

[b-s69ti62nzs] .ct-form-card .validation-errors {
    color: #f87171;
    font-size: 13px;
    margin-bottom: 16px;
    padding-left: 16px;
}

/* ===== Submit button ===== */
.ct-submit-btn[b-s69ti62nzs] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 8px;
    background: #FF7F27;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 16px -6px rgba(255,127,39,.45);
}

.ct-submit-btn:hover:not(:disabled)[b-s69ti62nzs] {
    background: #EA580C;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(255,127,39,.6);
}

.ct-submit-btn:disabled[b-s69ti62nzs] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Alert states ===== */
.ct-alert[b-s69ti62nzs] {
    border-radius: 12px;
    padding: 18px 22px;
    font-size: 14.5px;
    line-height: 1.6;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 24px;
}

.ct-alert-icon[b-s69ti62nzs] {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.ct-alert-success[b-s69ti62nzs] {
    background: rgba(74,222,128,.10);
    border: 1px solid rgba(74,222,128,.25);
    color: #86efac;
}

.ct-alert-error[b-s69ti62nzs] {
    background: rgba(248,113,113,.10);
    border: 1px solid rgba(248,113,113,.25);
    color: #fca5a5;
}

/* Full-width success panel (replaces the form) */
.ct-success-panel[b-s69ti62nzs] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 52px 48px;
    text-align: center;
    box-shadow: inset 0 2px 0 rgba(74,222,128,.35);
}

.ct-success-icon[b-s69ti62nzs] {
    font-size: 40px;
    color: #4ade80;
    margin-bottom: 20px;
}

.ct-success-headline[b-s69ti62nzs] {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
}

.ct-success-body[b-s69ti62nzs] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .ct-layout[b-s69ti62nzs] {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 640px) {
    .ct-form-card[b-s69ti62nzs] {
        padding: 28px 22px;
    }

    .ct-success-panel[b-s69ti62nzs] {
        padding: 40px 28px;
    }

    .ct-headline[b-s69ti62nzs] {
        font-size: 32px;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ===== Dashboard shell ===== */
.dash-header[b-i2cugzj7xq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.dash-greeting[b-i2cugzj7xq] {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    font-family: "Lexend", system-ui, sans-serif;
}

.dash-subtitle[b-i2cugzj7xq] {
    color: #9ca3af;
    margin: 6px 0 0;
    font-size: 14px;
    font-family: "Lexend", system-ui, sans-serif;
}

.dash-header-actions[b-i2cugzj7xq] {
    display: flex;
    gap: 8px;
}

/* ===== Alerts ===== */
.dash-loading[b-i2cugzj7xq] {
    padding: 32px 0;
}

.dash-alert[b-i2cugzj7xq] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 10px;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    margin-bottom: 24px;
}

.dash-alert-danger[b-i2cugzj7xq] {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.30);
    color: #ff7a88;
}

.dash-alert-info[b-i2cugzj7xq] {
    background: rgba(96, 165, 250, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #60A5FA;
}

/* ===== Stat cards ===== */
.dash-stats[b-i2cugzj7xq] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.stat-card[b-i2cugzj7xq] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    font-family: "Lexend", system-ui, sans-serif;
}

.stat-card-top[b-i2cugzj7xq] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.stat-icon[b-i2cugzj7xq] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.stat-badge[b-i2cugzj7xq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 600;
}

.stat-badge-up[b-i2cugzj7xq] {
    background: rgba(74, 222, 128, 0.14);
    color: #4ade80;
}

.stat-badge-neutral[b-i2cugzj7xq] {
    background: rgba(156, 163, 175, 0.14);
    color: #9ca3af;
}

.stat-label[b-i2cugzj7xq] {
    color: #9ca3af;
    font-size: 12.5px;
    margin-bottom: 4px;
}

.stat-value[b-i2cugzj7xq] {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-sub[b-i2cugzj7xq] {
    color: #6c757d;
    font-size: 11.5px;
}

/* ===== AI digest panel ===== */
.dash-digest[b-i2cugzj7xq] {
    background: linear-gradient(135deg, rgba(84, 110, 250, 0.18), rgba(13, 24, 42, 1) 70%);
    border: 1px solid rgba(84, 110, 250, 0.28);
    border-radius: 14px;
    padding: 22px;
    display: grid;
    grid-template-columns: 1fr 1.6fr 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 20px;
    font-family: "Lexend", system-ui, sans-serif;
}

.digest-badge[b-i2cugzj7xq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 50px;
    background: rgba(84, 110, 250, 0.18);
    color: #8c9dfc;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 10px;
}

.digest-title[b-i2cugzj7xq] {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.digest-meta[b-i2cugzj7xq] {
    color: #6c757d;
    font-size: 12px;
    margin-top: 4px;
}

.digest-themes[b-i2cugzj7xq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.digest-theme-row[b-i2cugzj7xq] {
    display: flex;
    gap: 10px;
    align-items: center;
}

.digest-num[b-i2cugzj7xq] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(84, 110, 250, 0.18);
    color: #8c9dfc;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.digest-tag[b-i2cugzj7xq] {
    color: #8c9dfc;
    font-size: 12px;
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
}

.digest-txt[b-i2cugzj7xq] {
    color: #d1d5db;
    font-size: 13px;
}

.digest-action[b-i2cugzj7xq] {
    text-align: right;
}

/* ===== Two-column grid ===== */
.dash-grid-2[b-i2cugzj7xq] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 16px;
}

/* ===== Generic card ===== */
.dash-card[b-i2cugzj7xq] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    font-family: "Lexend", system-ui, sans-serif;
}

.dash-card-header[b-i2cugzj7xq] {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dash-card-title[b-i2cugzj7xq] {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.dash-card-sub[b-i2cugzj7xq] {
    color: #6c757d;
    font-size: 12px;
    margin-top: 2px;
}

/* ===== Quick links ===== */
.dash-quick-links[b-i2cugzj7xq] {
    display: flex;
    flex-direction: column;
}

[b-i2cugzj7xq] .dash-quick-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    text-decoration: none;
    transition: background 0.15s ease;
}

[b-i2cugzj7xq] .dash-quick-link:first-child {
    border-top: none;
}

[b-i2cugzj7xq] .dash-quick-link:hover {
    background: rgba(255, 255, 255, 0.03);
}

.dash-quick-icon[b-i2cugzj7xq] {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.dash-quick-label[b-i2cugzj7xq] {
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
}

.dash-quick-desc[b-i2cugzj7xq] {
    color: #6c757d;
    font-size: 11.5px;
    margin-top: 1px;
}

/* ===== Status list ===== */
.live-dot[b-i2cugzj7xq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.2);
    flex-shrink: 0;
}

.dash-status-list[b-i2cugzj7xq] {
    padding: 8px 0;
}

.dash-status-row[b-i2cugzj7xq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.dash-status-row:first-child[b-i2cugzj7xq] {
    border-top: none;
}

.dash-status-label[b-i2cugzj7xq] {
    color: #d1d5db;
    font-size: 13.5px;
}

.dash-status-pill[b-i2cugzj7xq] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 600;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .dash-stats[b-i2cugzj7xq] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-digest[b-i2cugzj7xq] {
        grid-template-columns: 1fr 1.4fr;
    }

    .digest-action[b-i2cugzj7xq] {
        display: none;
    }
}

@media (max-width: 768px) {
    .dash-stats[b-i2cugzj7xq] {
        grid-template-columns: repeat(2, 1fr);
    }

    .dash-grid-2[b-i2cugzj7xq] {
        grid-template-columns: 1fr;
    }

    .dash-digest[b-i2cugzj7xq] {
        grid-template-columns: 1fr;
    }

    .digest-themes[b-i2cugzj7xq] {
        display: none;
    }
}

@media (max-width: 480px) {
    .dash-stats[b-i2cugzj7xq] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* ── Page shell ───────────────────────────────────────────────── */

.err-page[b-kr10mo4eqi] {
    position: relative;
    font-family: "Lexend", system-ui, sans-serif;
    padding: 32px 24px;
    overflow: hidden;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.err-bg[b-kr10mo4eqi] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(42% 38% at 50% 38%, rgba(249, 115, 22, 0.10), transparent 70%),
        radial-gradient(60% 55% at 50% 50%, rgba(220, 53, 69, 0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.err-container[b-kr10mo4eqi] {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0 auto;
}

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

.err-card[b-kr10mo4eqi] {
    position: relative;
    background: #12213A;
    border: 1px solid rgba(249, 115, 22, 0.20);
    border-radius: 22px;
    padding: 44px 40px 30px;
    overflow: hidden;
    text-align: center;
    box-shadow:
        0 24px 60px -28px rgba(249, 115, 22, 0.32),
        0 1px 0 rgba(255, 255, 255, 0.04) inset;
    animation: err-card-rise-b-kr10mo4eqi 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes err-card-rise-b-kr10mo4eqi {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.err-card-halo[b-kr10mo4eqi] {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 320px;
    background: radial-gradient(50% 60% at 50% 30%, rgba(249, 115, 22, 0.16), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.err-card-thermal[b-kr10mo4eqi] {
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #F97316 50%, transparent);
    z-index: 1;
}

/* ── Eyebrow ─────────────────────────────────────────────────── */

.err-eyebrow[b-kr10mo4eqi] {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.10);
    border: 1px solid rgba(249, 115, 22, 0.28);
    color: #F97316;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.err-eyebrow-dot[b-kr10mo4eqi] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F97316;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.85);
    animation: err-pulse-b-kr10mo4eqi 2.2s ease-in-out infinite;
}

@keyframes err-pulse-b-kr10mo4eqi {
    0%, 100% { opacity: 1;    transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.82); }
}

/* ── Hero icon ───────────────────────────────────────────────── */

.err-icon-frame[b-kr10mo4eqi] {
    position: relative;
    z-index: 2;
    width: 84px;
    height: 84px;
    margin: 0 auto 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.err-icon[b-kr10mo4eqi] {
    position: relative;
    z-index: 1;
    width: 84px;
    height: 84px;
    border-radius: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 35%, rgba(249, 115, 22, 0.28), rgba(249, 115, 22, 0.10) 70%);
    border: 1px solid rgba(249, 115, 22, 0.55);
    color: #F97316;
    font-size: 36px;
    box-shadow:
        0 14px 36px -10px rgba(249, 115, 22, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --fa-primary-color: #FED7AA;
    --fa-secondary-color: #F97316;
    --fa-secondary-opacity: 0.95;
    animation: err-icon-pop-b-kr10mo4eqi 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

@keyframes err-icon-pop-b-kr10mo4eqi {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Hero copy ───────────────────────────────────────────────── */

.err-headline[b-kr10mo4eqi] {
    position: relative;
    z-index: 2;
    margin: 0 0 10px;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.err-subtitle[b-kr10mo4eqi] {
    position: relative;
    z-index: 2;
    color: #9ca3af;
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto 24px;
}

/* ── Request ID strip ────────────────────────────────────────── */

.err-request[b-kr10mo4eqi] {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin: 0 auto 24px;
    max-width: 420px;
    text-align: left;
}

.err-request-label[b-kr10mo4eqi] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
}

.err-request-label i[b-kr10mo4eqi] {
    color: #6b7280;
    font-size: 12px;
}

.err-request-value[b-kr10mo4eqi] {
    color: #fff;
    font-size: 12.5px;
    font-family: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;
    background: transparent;
    overflow-wrap: anywhere;
    text-align: right;
}

/* ── CTAs ────────────────────────────────────────────────────── */

.err-ctas[b-kr10mo4eqi] {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.err-cta[b-kr10mo4eqi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    min-width: 180px;
}

.err-cta-primary[b-kr10mo4eqi] {
    background: linear-gradient(180deg, #F97316, #EA580C);
    color: #fff;
    border: 1px solid rgba(249, 115, 22, 0.6);
    box-shadow: 0 8px 24px -10px rgba(249, 115, 22, 0.55);
}

.err-cta-primary:hover[b-kr10mo4eqi] {
    background: linear-gradient(180deg, #FB923C, #F97316);
    box-shadow: 0 12px 30px -10px rgba(249, 115, 22, 0.70);
    color: #fff;
    transform: translateY(-1px);
}

.err-cta i[b-kr10mo4eqi] {
    font-size: 11px;
    transition: transform 0.18s ease;
}

.err-cta-primary:hover i[b-kr10mo4eqi] {
    transform: translateX(-3px);
}

/* ── Fine print ──────────────────────────────────────────────── */

.err-fineprint[b-kr10mo4eqi] {
    position: relative;
    z-index: 2;
    margin: 6px 0 0;
    color: #6b7280;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.err-fineprint i[b-kr10mo4eqi] {
    font-size: 11px;
    opacity: 0.7;
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 520px) {
    .err-card[b-kr10mo4eqi] {
        padding: 36px 22px 26px;
        border-radius: 18px;
    }

    .err-headline[b-kr10mo4eqi] { font-size: 26px; }

    .err-request[b-kr10mo4eqi] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .err-request-value[b-kr10mo4eqi] { text-align: left; }

    .err-ctas[b-kr10mo4eqi] { flex-direction: column; }
    .err-cta[b-kr10mo4eqi] { width: 100%; min-width: 0; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ===== Shared buttons ===== */
[b-qainn1r93k] .btn-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border-radius: 8px;
    background: #FF7F27;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 16px -6px rgba(255, 127, 39, 0.45);
}

[b-qainn1r93k] .btn-hero-cta:hover {
    background: #EA580C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(255, 127, 39, 0.6);
}

[b-qainn1r93k] .btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

[b-qainn1r93k] .btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* ===== Hero ===== */
.hero-section[b-qainn1r93k] {
    position: relative;
}

.hero-glow-orange[b-qainn1r93k] {
    position: absolute;
    top: -120px;
    left: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255, 127, 39, 0.16), transparent 60%);
    pointer-events: none;
}

.hero-glow-violet[b-qainn1r93k] {
    position: absolute;
    top: 80px;
    right: -140px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(84, 110, 250, 0.14), transparent 60%);
    pointer-events: none;
}

.hero-inner[b-qainn1r93k] {
    margin: 0 auto;
    padding-top: 80px;
    padding-bottom: 64px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
}

.hero-badge[b-qainn1r93k] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(249, 115, 22, 0.16);
    color: #fdba74;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 20px;
}

.hero-badge-dot[b-qainn1r93k] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF7F27;
    flex-shrink: 0;
}

.hero-headline[b-qainn1r93k] {
    color: #fff;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.04;
    letter-spacing: -0.03em;
    margin: 0;
}

.hero-accent-orange[b-qainn1r93k] { color: #FF7F27; }
.hero-accent-violet[b-qainn1r93k]  { color: #546EFA; }

.hero-body[b-qainn1r93k] {
    color: #d1d5db;
    font-size: 18px;
    line-height: 1.6;
    margin: 24px 0 0;
    max-width: 520px;
}

.hero-actions[b-qainn1r93k] {
    display: flex;
    gap: 12px;
    margin-top: 32px;
    flex-wrap: wrap;
    align-items: center;
}

.hero-signals[b-qainn1r93k] {
    display: flex;
    gap: 24px;
    margin-top: 36px;
    color: #9ca3af;
    font-size: 13.5px;
    flex-wrap: wrap;
}

.hero-signals span[b-qainn1r93k] {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ===== Polaroid image stack ===== */
.hero-image-stack[b-qainn1r93k] {
    position: relative;
    height: 480px;
}

.polaroid-back[b-qainn1r93k] {
    position: absolute;
    inset: 10% 12% 6% 6%;
    background: #12213A;
    border-radius: 16px;
    transform: rotate(4deg);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

.polaroid-img[b-qainn1r93k] {
    position: absolute;
    top: 4%;
    left: 10%;
    width: 84%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    background: #fff;
    border-radius: 16px;
    transform: rotate(-3deg);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
    border: 6px solid #fff;
}

.ai-chip[b-qainn1r93k] {
    position: absolute;
    bottom: 8px;
    right: 0;
    width: 260px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 20px 40px -16px rgba(0, 0, 0, 0.7);
    transform: rotate(2deg);
}

.ai-chip-header[b-qainn1r93k] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.ai-chip-body[b-qainn1r93k] {
    color: #d1d5db;
    font-size: 12.5px;
    line-height: 1.5;
}

/* ===== Trust strip ===== */
.trust-strip[b-qainn1r93k] {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.015);
}

.trust-strip-inner[b-qainn1r93k] {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    align-items: center;
}

.trust-label[b-qainn1r93k] {
    color: #6c757d;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    white-space: nowrap;
}

.trust-name[b-qainn1r93k] {
    color: #9ca3af;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.02em;
    opacity: 0.7;
}

/* ===== Feature section ===== */
.features-section[b-qainn1r93k] {
    padding: 80px 0;
}

.section-eyebrow[b-qainn1r93k] {
    color: #F97316;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.section-title[b-qainn1r93k] {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
    line-height: 1.15;
}

.section-sub[b-qainn1r93k] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 32px;
    max-width: 640px;
}

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

.feature-card[b-qainn1r93k] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.feature-card:hover[b-qainn1r93k] {
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.7);
    transform: translateY(-2px);
}

.feature-icon[b-qainn1r93k] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 16px;
    flex-shrink: 0;
}

.feature-title[b-qainn1r93k] {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 8px;
}

.feature-body[b-qainn1r93k] {
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* ===== CTA section ===== */
.cta-section[b-qainn1r93k] {
    padding: 24px 0 88px;
}

.cta-card[b-qainn1r93k] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #12213A 0%, #1a2b4e 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    padding: 56px 48px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 40px;
    align-items: center;
}

.cta-glow[b-qainn1r93k] {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255, 127, 39, 0.22), transparent 65%);
    pointer-events: none;
}

.cta-text[b-qainn1r93k] {
    position: relative;
}

.cta-headline[b-qainn1r93k] {
    color: #fff;
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.15;
}

.cta-body[b-qainn1r93k] {
    color: #d1d5db;
    margin: 14px 0 24px;
    font-size: 16px;
    line-height: 1.6;
    max-width: 520px;
}

.cta-actions[b-qainn1r93k] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.cta-quotes[b-qainn1r93k] {
    position: relative;
    display: grid;
    gap: 10px;
}

.cta-quote[b-qainn1r93k] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
}

.cta-quote-header[b-qainn1r93k] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    color: #6c757d;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
}

.cta-quote-text[b-qainn1r93k] {
    color: #d1d5db;
    font-size: 13.5px;
    line-height: 1.5;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .hero-inner[b-qainn1r93k] {
        grid-template-columns: 1fr;
        padding: 60px 32px 48px;
    }

    .hero-image-stack[b-qainn1r93k] {
        display: none;
    }

    .features-grid[b-qainn1r93k] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cta-card[b-qainn1r93k] {
        grid-template-columns: 1fr;
        padding: 40px 32px;
    }
}

@media (max-width: 640px) {
    .hero-inner[b-qainn1r93k] {
        padding: 48px 20px 40px;
    }

    .features-inner[b-qainn1r93k],
    .cta-inner[b-qainn1r93k] {
        padding: 0 20px;
    }

    .features-grid[b-qainn1r93k] {
        grid-template-columns: 1fr;
    }

    .trust-strip-inner[b-qainn1r93k] {
        padding: 20px;
        gap: 20px;
    }

    .cta-card[b-qainn1r93k] {
        padding: 32px 24px;
    }
}
/* /Components/Pages/HowItWorks.razor.rz.scp.css */
/* ===== Page wrapper & glows ===== */
.hiw-page[b-4f19xof1k1] {
    position: relative;
    overflow-x: clip;
}

.hiw-glow-orange[b-4f19xof1k1] {
    position: absolute;
    top: -100px;
    left: -120px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(249,115,22,.12), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.hiw-glow-violet[b-4f19xof1k1] {
    position: absolute;
    top: 320px;
    right: -160px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(84,110,250,.12), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.hiw-inner[b-4f19xof1k1] {
    position: relative;
    z-index: 1;
}

/* ===== Shared section labels ===== */
.hiw-section-eyebrow[b-4f19xof1k1] {
    color: #F97316;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.hiw-section-title[b-4f19xof1k1] {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 24px;
    line-height: 1.2;
}

/* ===== Hero ===== */
.hiw-hero[b-4f19xof1k1] {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 80px;
}

.hiw-eyebrow[b-4f19xof1k1] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(84,110,250,.14);
    color: #8c9dfc;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.hiw-headline[b-4f19xof1k1] {
    color: #fff;
    font-size: clamp(36px, 4.5vw, 58px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.03em;
    margin: 0 0 20px;
}

.hiw-accent-orange[b-4f19xof1k1] { color: #FF7F27; }
.hiw-accent-violet[b-4f19xof1k1]  { color: #546EFA; }

.hiw-lead[b-4f19xof1k1] {
    color: #d1d5db;
    font-size: 17px;
    line-height: 1.65;
    margin: 0 0 28px;
    max-width: 520px;
}

.hiw-lead strong[b-4f19xof1k1] { color: #fff; }

.hiw-cta-row[b-4f19xof1k1] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

/* ===== Shared buttons ===== */
[b-4f19xof1k1] .btn-hiw-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 8px;
    background: #FF7F27;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: 0 6px 16px -6px rgba(255,127,39,.45);
}

[b-4f19xof1k1] .btn-hiw-primary:hover {
    background: #EA580C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px -10px rgba(255,127,39,.6);
}

[b-4f19xof1k1] .btn-hiw-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: #d1d5db;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-4f19xof1k1] .btn-hiw-ghost:hover {
    background: rgba(255,255,255,.06);
    color: #fff;
}

/* ===== Hero pills ===== */
.hiw-pills[b-4f19xof1k1] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hiw-pill[b-4f19xof1k1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 13px;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 600;
}

.hiw-pill-fast[b-4f19xof1k1]   { background: rgba(74,222,128,.12);  color: #4ade80; }
.hiw-pill-anon[b-4f19xof1k1]   { background: rgba(96,165,250,.12);  color: #60A5FA; }
.hiw-pill-secure[b-4f19xof1k1] { background: rgba(156,163,175,.12); color: #9ca3af; }

/* ===== Stats grid ===== */
.hiw-stats-grid[b-4f19xof1k1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.hiw-stat-card[b-4f19xof1k1] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 24px 20px;
    text-align: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.hiw-stat-card:hover[b-4f19xof1k1] {
    border-color: rgba(255,255,255,.14);
    transform: translateY(-2px);
}

.hiw-stat-card-accent[b-4f19xof1k1] {
    background: linear-gradient(135deg, rgba(255,127,39,.18) 0%, rgba(84,110,250,.18) 100%);
    border-color: rgba(255,127,39,.22);
}

.hiw-stat-value[b-4f19xof1k1] {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 6px;
}

.hiw-stat-label[b-4f19xof1k1] {
    color: #9ca3af;
    font-size: 12.5px;
    font-weight: 500;
}

/* ===== Mid section (flow + privacy) ===== */
.hiw-mid[b-4f19xof1k1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 72px;
}

/* ===== Flow diagram ===== */
.hiw-flow[b-4f19xof1k1] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ===== Step items ===== */
.hiw-step[b-4f19xof1k1] {
    display: flex;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border-radius: 14px;
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    transition: border-color 0.2s ease;
}

.hiw-step:hover[b-4f19xof1k1] {
    border-color: rgba(255,255,255,.14);
}

/* Icon wrapper — positions the number badge relative to the icon */
.hiw-step-icon-wrap[b-4f19xof1k1] {
    position: relative;
    flex-shrink: 0;
}

.hiw-step-icon[b-4f19xof1k1] {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.hiw-step-icon-1[b-4f19xof1k1] { background: rgba(96,165,250,.18);  color: #60A5FA; }
.hiw-step-icon-2[b-4f19xof1k1] { background: rgba(249,115,22,.18);  color: #F97316; }
.hiw-step-icon-3[b-4f19xof1k1] { background: rgba(84,110,250,.18);  color: #546EFA; }
.hiw-step-icon-4[b-4f19xof1k1] { background: rgba(74,222,128,.18);  color: #4ade80; }

/* Circular number badge overlapping top-right of icon */
.hiw-step-badge[b-4f19xof1k1] {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #F97316;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #12213A;
    line-height: 1;
}

.hiw-step-title[b-4f19xof1k1] {
    color: #e5e7eb;
    font-size: 15.5px;
    font-weight: 700;
    margin: 0 0 5px;
}

.hiw-step-desc[b-4f19xof1k1] {
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0;
}

/* ===== Privacy card ===== */
.hiw-privacy-card[b-4f19xof1k1] {
    position: relative;
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 32px 28px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hiw-privacy-glow[b-4f19xof1k1] {
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(84,110,250,.16), transparent 65%);
    pointer-events: none;
}

.hiw-privacy-divider[b-4f19xof1k1] {
    border: none;
    border-top: 1px solid rgba(255,255,255,.07);
    margin: 0;
}

.hiw-privacy-item[b-4f19xof1k1] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.hiw-privacy-icon[b-4f19xof1k1] {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.hiw-privacy-title[b-4f19xof1k1] {
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    margin-bottom: 4px;
}

.hiw-privacy-desc[b-4f19xof1k1] {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* ===== Bottom section (sharing + audience) ===== */
.hiw-bottom[b-4f19xof1k1] {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 72px;
}

.hiw-mini-grid[b-4f19xof1k1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.hiw-mini-card[b-4f19xof1k1] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 14px;
    padding: 22px 18px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.hiw-mini-card:hover[b-4f19xof1k1] {
    border-color: rgba(255,255,255,.14);
    transform: translateY(-2px);
}

.hiw-mini-icon[b-4f19xof1k1] {
    font-size: 20px;
    margin-bottom: 10px;
}

.hiw-mini-title[b-4f19xof1k1] {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}

.hiw-mini-desc[b-4f19xof1k1] {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.hiw-mini-list[b-4f19xof1k1] {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.7;
    margin: 0;
    padding-left: 16px;
}

/* ===== CTA banner ===== */
.hiw-cta-banner[b-4f19xof1k1] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #12213A 0%, #1a2b4e 100%);
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    padding: 52px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.hiw-cta-glow[b-4f19xof1k1] {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(255,127,39,.22), transparent 65%);
    pointer-events: none;
}

.hiw-cta-text[b-4f19xof1k1] {
    position: relative;
}

.hiw-cta-headline[b-4f19xof1k1] {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.hiw-cta-body[b-4f19xof1k1] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

.hiw-cta-actions[b-4f19xof1k1] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .hiw-inner[b-4f19xof1k1] {
        padding: 48px 24px 72px;
    }

    .hiw-hero[b-4f19xof1k1] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hiw-mid[b-4f19xof1k1] {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hiw-bottom[b-4f19xof1k1] {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .hiw-cta-banner[b-4f19xof1k1] {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 32px;
    }
}

@media (max-width: 640px) {
    .hiw-inner[b-4f19xof1k1] {
        padding: 40px 20px 56px;
    }

    .hiw-headline[b-4f19xof1k1] {
        font-size: 34px;
    }

    .hiw-stats-grid[b-4f19xof1k1] {
        grid-template-columns: 1fr 1fr;
    }

    .hiw-mini-grid[b-4f19xof1k1] {
        grid-template-columns: 1fr;
    }

    .hiw-cta-banner[b-4f19xof1k1] {
        padding: 32px 24px;
    }

    .hiw-cta-headline[b-4f19xof1k1] {
        font-size: 22px;
    }
}
/* /Components/Pages/Invoices.razor.rz.scp.css */
.inv-page[b-9j82hkzsk3] {
    padding: 32px 0 64px;
    font-family: "Lexend", system-ui, sans-serif;
}

.inv-header[b-9j82hkzsk3] {
    margin-bottom: 24px;
}

.inv-title[b-9j82hkzsk3] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.inv-subtitle[b-9j82hkzsk3] {
    color: #9ca3af;
    font-size: 13.5px;
    margin: 4px 0 0;
}

.inv-state[b-9j82hkzsk3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 28px 22px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    color: #9ca3af;
    font-size: 14px;
}

.inv-state i[b-9j82hkzsk3] {
    color: #F97316;
    font-size: 18px;
}

.inv-state-error i[b-9j82hkzsk3] {
    color: #f87171;
}

.inv-card[b-9j82hkzsk3] {
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
}

.inv-table[b-9j82hkzsk3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.inv-table thead th[b-9j82hkzsk3] {
    text-align: left;
    padding: 14px 18px;
    color: #9ca3af;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.inv-table tbody td[b-9j82hkzsk3] {
    padding: 14px 18px;
    color: #d1d5db;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.inv-table tbody tr:last-child td[b-9j82hkzsk3] {
    border-bottom: none;
}

.inv-number[b-9j82hkzsk3] {
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.inv-col-actions[b-9j82hkzsk3] {
    text-align: right;
    white-space: nowrap;
}

.inv-badge[b-9j82hkzsk3] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inv-badge-paid[b-9j82hkzsk3] {
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
}

.inv-badge-open[b-9j82hkzsk3] {
    background: rgba(249, 115, 22, 0.14);
    color: #F97316;
}

.inv-badge-void[b-9j82hkzsk3] {
    background: rgba(248, 113, 113, 0.12);
    color: #f87171;
}

.inv-badge-draft[b-9j82hkzsk3] {
    background: rgba(255, 255, 255, 0.08);
    color: #9ca3af;
}

.inv-action[b-9j82hkzsk3] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    margin-left: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #d1d5db;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.inv-action:hover[b-9j82hkzsk3] {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.inv-action-muted[b-9j82hkzsk3] {
    border-color: transparent;
    color: #9ca3af;
}

.inv-more[b-9j82hkzsk3] {
    display: flex;
    justify-content: center;
    margin-top: 18px;
}

.inv-more-btn[b-9j82hkzsk3] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #d1d5db;
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    transition: background 0.15s, color 0.15s;
}

.inv-more-btn:hover:not(:disabled)[b-9j82hkzsk3] {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.inv-more-btn:disabled[b-9j82hkzsk3] {
    opacity: 0.6;
    cursor: default;
}
/* /Components/Pages/ManageTeam.razor.rz.scp.css */
.mt-page[b-d2mmo4uj4d] {
    min-height: 100%;
    padding: 2rem 1rem 4rem;
    font-family: "Lexend", system-ui, sans-serif;
}

/* Normal flow, not flex+gap: the back link carries its own bottom margin, and a
   flex gap would stack on top of it. */
.mt-container[b-d2mmo4uj4d] {
    max-width: 720px;
    margin: 0 auto;
}

.mt-hero[b-d2mmo4uj4d] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.5rem;
}

.mt-title[b-d2mmo4uj4d] {
    margin: 0;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.mt-sub[b-d2mmo4uj4d] {
    margin: 0;
    color: #9ca3af;
    font-size: 13.5px;
}
/* /Components/Pages/Moderate.razor.rz.scp.css */
.mt-title[b-phv8igym21] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.mt-subtitle[b-phv8igym21] {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 0;
}
/* /Components/Pages/MyResponsesPage.razor.rz.scp.css */
.mr-title[b-5r2r2pfe7g] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.mr-subtitle[b-5r2r2pfe7g] {
    color: #9ca3af;
    font-size: 12.5px;
    margin: 0;
}
/* /Components/Pages/MyTeamsPage.razor.rz.scp.css */
.ap-header[b-1psjp6f0h2] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.ap-title[b-1psjp6f0h2] {
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0;
}

.ap-subtitle[b-1psjp6f0h2] {
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    margin: 4px 0 0;
}
/* /Components/Pages/OnboardingPage.razor.rz.scp.css */
.feed-onboarding[b-t3c9mdfp6l] {
    background-color: #0d1526;
    border-radius: 1rem;
    padding: 3rem 2.5rem;
    min-height: 480px;
}

/* Left column */
.onboarding-left[b-t3c9mdfp6l] {
    padding-right: 2rem;
}

.badge-pill[b-t3c9mdfp6l] {
    display: inline-flex;
    align-items: center;
    background-color: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 999px;
    padding: 0.3rem 0.9rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #86efac;
    text-transform: uppercase;
}

.onboarding-headline[b-t3c9mdfp6l] {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
}

.onboarding-headline--orange[b-t3c9mdfp6l] {
    color: #f97316;
}

.onboarding-headline--purple[b-t3c9mdfp6l] {
    background: linear-gradient(90deg, #a78bfa, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.onboarding-body[b-t3c9mdfp6l] {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 480px;
}



.onboarding-hint[b-t3c9mdfp6l] {
    color: #64748b;
    font-size: 0.8rem;
}

/* "we still can't see it verified" — a nudge, not an error */
.onboarding-notice[b-t3c9mdfp6l] {
    max-width: 480px;
    background-color: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.35);
    border-radius: 0.5rem;
    padding: 0.7rem 0.9rem;
    color: #fdba74;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* CTA button */
.btn-claim[b-t3c9mdfp6l] {
    background-color: #92400e;
    color: #fef3c7;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    max-width: 480px;
    transition: background-color 0.15s ease;
}

.btn-claim:hover:not(:disabled)[b-t3c9mdfp6l] {
    background-color: #78350f;
    color: #fef3c7;
}

.btn-claim:disabled[b-t3c9mdfp6l] {
    opacity: 0.7;
}

.onboarding-fine-print[b-t3c9mdfp6l] {
    color: #64748b;
    font-size: 0.8rem;
    text-align: center;
    max-width: 480px;
}

/* Right column — decorative cards */
.onboarding-right[b-t3c9mdfp6l] {
    padding-left: 2rem;
}

.feedback-cards[b-t3c9mdfp6l] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feedback-card[b-t3c9mdfp6l] {
    background-color: #1e2d45;
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.feedback-card--offset-1[b-t3c9mdfp6l] { margin-left: 0; }
.feedback-card--offset-2[b-t3c9mdfp6l] { margin-left: 1.5rem; }
.feedback-card--offset-3[b-t3c9mdfp6l] { margin-left: 0.5rem; }

.feedback-card__label[b-t3c9mdfp6l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.dot[b-t3c9mdfp6l] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot--blue[b-t3c9mdfp6l] { background-color: #3b82f6; }
.dot--green[b-t3c9mdfp6l] { background-color: #22c55e; }

.feedback-card__text[b-t3c9mdfp6l] {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* =========================================================================
   PRICING PAGE
   - Two audience tabs (Individuals / Teams) selected via ?audience= param
   - Desktop (>= 992px): one shared CSS Grid with subgrid row sync, so
     every plan's rows (header / features / CTA) line up horizontally
     regardless of description length
   - Mobile (< 992px): same DOM reflows to a stacked single-column card
     layout. Labels become inline via data-label + ::before. No h-scroll.
   ========================================================================= */

/* ── Hero ───────────────────────────────────────────────────────────── */
.pr-hero[b-5y7xpnkoc5] {
    margin-bottom: 28px;
    max-width: 720px;
}

.pr-eyebrow[b-5y7xpnkoc5] {
    color: #F97316;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pr-title[b-5y7xpnkoc5] {
    color: #fff;
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0 0 12px;
}

.pr-sub[b-5y7xpnkoc5] {
    color: #9ca3af;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    max-width: 640px;
}

/* ── Tabs ───────────────────────────────────────────────────────────── */
/* Pill-style segmented control. The active tab carries the same orange
   inset glow as the highlighted plan column, creating a visual thread
   between "this tab" and "this featured plan". */
.pr-tabs[b-5y7xpnkoc5] {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin: 0 0 32px;
    background: #0d1830;
    border-radius: 999px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .06),
        inset 0 1px 0 rgba(0, 0, 0, .3);
}

[b-5y7xpnkoc5] .pr-tab {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 22px;
    border-radius: 999px;
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}

[b-5y7xpnkoc5] .pr-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, .04);
}

[b-5y7xpnkoc5] .pr-tab-active,
[b-5y7xpnkoc5] .pr-tab-active:hover {
    color: #fff;
    background: linear-gradient(180deg, rgba(249, 115, 22, .22), rgba(249, 115, 22, .08));
    box-shadow:
        inset 0 0 0 1px rgba(249, 115, 22, .42),
        0 4px 14px -6px rgba(249, 115, 22, .45);
    font-weight: 600;
}

.pr-tab-icon[b-5y7xpnkoc5] {
    font-size: 13px;
    opacity: .85;
}

/* ── Table wrapper ──────────────────────────────────────────────────── */
.pr-table-wrap[b-5y7xpnkoc5] {
    border-radius: 16px;
    background: #12213A;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .07);
    overflow: hidden;
}

/* ── Desktop layout: shared grid + subgrid rows ─────────────────────── */
/* The parent grid declares one row per content section (header, each
   feature, CTA). Each column (labels + plans) is itself a subgrid that
   inherits those rows, so cells across columns share row heights and
   stay vertically aligned no matter how much copy each plan carries. */
.pr-table[b-5y7xpnkoc5] {
    display: grid;
    grid-template-columns: 200px repeat(var(--plan-count, 4), minmax(0, 1fr));
    grid-template-rows: repeat(var(--total-rows, 8), auto);
}

.pr-col[b-5y7xpnkoc5] {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
    min-width: 0; /* allow long copy to wrap inside the track */
}

.pr-col-labels[b-5y7xpnkoc5] {
    grid-column: 1;
    border-right: 1px solid rgba(255, 255, 255, .07);
}

.pr-cell[b-5y7xpnkoc5] {
    padding: 0 22px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.pr-cell-spacer[b-5y7xpnkoc5] {
    border-bottom: none;
    min-height: 1px;
}

.pr-cell-label[b-5y7xpnkoc5] {
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.005em;
    min-height: 56px;
}

/* Plan column dividers; transparent on the highlighted column so the
   orange box-shadow outline reads cleanly */
.pr-col-plan[b-5y7xpnkoc5] {
    border-left: 1px solid rgba(255, 255, 255, .05);
}

.pr-col-plan:first-of-type[b-5y7xpnkoc5] {
    border-left-color: transparent;
}

/* ── Header cell (badge + name + price + description) ───────────────── */
.pr-cell-header[b-5y7xpnkoc5] {
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 22px 24px;
}

.pr-badge-row[b-5y7xpnkoc5] {
    height: 26px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.pr-badge[b-5y7xpnkoc5] {
    padding: 4px 11px;
    border-radius: 50px;
    background: rgba(249, 115, 22, .18);
    color: #F97316;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pr-plan-name[b-5y7xpnkoc5] {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 14px;
}

.pr-plan-price[b-5y7xpnkoc5] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

.pr-price-primary[b-5y7xpnkoc5] {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
}

.pr-price-suffix[b-5y7xpnkoc5] {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0;
    margin-left: 2px;
}

.pr-price-period[b-5y7xpnkoc5] {
    color: #6b7280;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.4;
}

.pr-plan-desc[b-5y7xpnkoc5] {
    color: #9ca3af;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

/* ── Feature cell ───────────────────────────────────────────────────── */
.pr-cell-feat[b-5y7xpnkoc5] {
    justify-content: center;
    min-height: 56px;
}

.pr-feat-text[b-5y7xpnkoc5] {
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 500;
    text-align: center;
}

.pr-icon-yes[b-5y7xpnkoc5]    { color: #4ade80; font-size: 17px; }
.pr-icon-no[b-5y7xpnkoc5]     { color: #2a3654; font-size: 17px; }
.pr-icon-accent[b-5y7xpnkoc5] { color: #F97316; font-size: 17px; }

/* ── CTA cell ───────────────────────────────────────────────────────── */
.pr-cell-cta[b-5y7xpnkoc5] {
    padding: 22px;
    border-bottom: none;
}

[b-5y7xpnkoc5] .pr-btn-primary,
[b-5y7xpnkoc5] .pr-btn-ghost {
    display: block;
    width: 100%;
    padding: 11px 18px;
    border-radius: 8px;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background .15s ease,
        transform .15s ease,
        border-color .15s ease,
        color .15s ease;
}

[b-5y7xpnkoc5] .pr-btn-primary {
    background: #FF7F27;
    color: #fff;
    box-shadow: 0 4px 12px -4px rgba(255, 127, 39, .5);
}

[b-5y7xpnkoc5] .pr-btn-primary:hover {
    background: #EA580C;
    color: #fff;
    transform: translateY(-1px);
}

[b-5y7xpnkoc5] .pr-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .14);
    color: #9ca3af;
    font-weight: 500;
}

[b-5y7xpnkoc5] .pr-btn-ghost:hover {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .25);
    color: #fff;
}

/* ── Highlighted plan column ────────────────────────────────────────── */
.pr-col-highlight[b-5y7xpnkoc5] {
    background: linear-gradient(
        180deg,
        rgba(249, 115, 22, .09) 0%,
        rgba(249, 115, 22, .015) 55%,
        rgba(249, 115, 22, .04) 100%
    );
    box-shadow:
        inset  1px 0 0 rgba(249, 115, 22, .32),
        inset -1px 0 0 rgba(249, 115, 22, .32),
        inset  0  2px 0 rgba(249, 115, 22, .5),
        inset  0 -2px 0 rgba(249, 115, 22, .42);
    border-left-color: transparent;
}

/* ── Footnote ───────────────────────────────────────────────────────── */
.pr-footnote[b-5y7xpnkoc5] {
    color: #6b7280;
    font-size: 12.5px;
    line-height: 1.6;
    margin: 22px 4px 0;
    max-width: 720px;
}

[b-5y7xpnkoc5] .pr-footnote-link {
    color: #9ca3af;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .2);
    text-underline-offset: 3px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

[b-5y7xpnkoc5] .pr-footnote-link:hover {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, .5);
}

/* =========================================================================
   MOBILE / TABLET (< 992px)
   The table reflows to a single-column stack. Each plan becomes a card.
   Feature rows use inline labels with an editorial dotted leader between
   label and value: "Topics ............... 50".
   ========================================================================= */
@media (max-width: 991px) {

    .pr-table-wrap[b-5y7xpnkoc5] {
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }

    .pr-table[b-5y7xpnkoc5] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .pr-col-labels[b-5y7xpnkoc5] {
        display: none;
    }

    .pr-col-plan[b-5y7xpnkoc5] {
        display: flex;
        flex-direction: column;
        background: #12213A;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, .08);
        overflow: hidden;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .02);
    }

    .pr-col-highlight[b-5y7xpnkoc5] {
        background: linear-gradient(
            180deg,
            rgba(249, 115, 22, .12) 0%,
            #12213A 220px
        );
        border-color: rgba(249, 115, 22, .4);
        box-shadow:
            0 12px 36px -18px rgba(249, 115, 22, .55),
            inset 0 1px 0 rgba(249, 115, 22, .25);
    }

    .pr-cell[b-5y7xpnkoc5] {
        padding: 13px 22px;
        min-height: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        border-left: none;
        border-right: none;
    }

    .pr-cell-header[b-5y7xpnkoc5] {
        padding: 26px 22px 22px;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .pr-col-highlight .pr-cell-header[b-5y7xpnkoc5] {
        border-bottom-color: rgba(249, 115, 22, .25);
    }

    /* Feature row with inline label + dotted leader.
       Order: ::before (label) → ::after (dots) → content (value) */
    .pr-cell-feat[b-5y7xpnkoc5] {
        justify-content: flex-start;
        gap: 10px;
        position: relative;
    }

    .pr-cell-feat[b-5y7xpnkoc5]::before {
        content: attr(data-label);
        order: 1;
        color: #9ca3af;
        font-size: 13.5px;
        font-weight: 500;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .pr-cell-feat[b-5y7xpnkoc5]::after {
        content: "";
        order: 2;
        flex: 1 1 auto;
        border-bottom: 1.5px dotted rgba(255, 255, 255, .14);
        align-self: center;
        transform: translateY(2px);
        margin: 0 2px;
    }

    .pr-cell-feat > *[b-5y7xpnkoc5] {
        order: 3;
        flex: 0 0 auto;
    }

    .pr-feat-text[b-5y7xpnkoc5] {
        text-align: right;
        color: #fff;
    }

    /* Last feature row sits flush against the CTA — no double divider */
    .pr-col-plan .pr-cell-feat:last-of-type[b-5y7xpnkoc5] {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .pr-cell-cta[b-5y7xpnkoc5] {
        border-bottom: none;
        padding: 18px 22px 22px;
    }

    .pr-footnote[b-5y7xpnkoc5] {
        margin-top: 24px;
        padding: 0 4px;
    }
}

/* ── Small mobile: tighter padding ──────────────────────────────────── */
@media (max-width: 480px) {

    .pr-tabs[b-5y7xpnkoc5] {
        width: 100%;
        justify-content: stretch;
    }

    [b-5y7xpnkoc5] .pr-tab {
        flex: 1;
        justify-content: center;
        padding: 10px 14px;
    }

    .pr-cell[b-5y7xpnkoc5] {
        padding: 12px 18px;
    }

    .pr-cell-header[b-5y7xpnkoc5] {
        padding: 22px 18px 18px;
    }

    .pr-cell-cta[b-5y7xpnkoc5] {
        padding: 16px 18px 20px;
    }

    .pr-price-primary[b-5y7xpnkoc5] {
        font-size: 28px;
    }
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* ===== Page wrapper & glows ===== */
.prv-page[b-4fle15j4q6] {
    position: relative;
    overflow-x: clip;
}

.prv-glow-orange[b-4fle15j4q6] {
    position: absolute;
    top: -100px;
    left: -120px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(249,115,22,.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.prv-glow-violet[b-4fle15j4q6] {
    position: absolute;
    top: 500px;
    right: -160px;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(84,110,250,.10), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.prv-inner[b-4fle15j4q6] {
    position: relative;
    z-index: 1;
}

/* ===== Hero ===== */
.prv-hero[b-4fle15j4q6] {
    margin-bottom: 48px;
}

.prv-eyebrow[b-4fle15j4q6] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    background: rgba(249,115,22,.14);
    color: #F97316;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.prv-headline[b-4fle15j4q6] {
    color: #fff;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}

.prv-lead[b-4fle15j4q6] {
    color: #9ca3af;
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 10px;
    max-width: 600px;
}

.prv-updated[b-4fle15j4q6] {
    color: #4b5563;
    font-size: 12px;
    font-weight: 500;
}

/* ===== Document card ===== */
.prv-doc-card[b-4fle15j4q6] {
    background: #12213A;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 40px;
}

/* ===== Individual sections ===== */
.prv-section[b-4fle15j4q6] {
    padding: 32px 36px;
}

.prv-divider[b-4fle15j4q6] {
    border: none;
    border-top: 1px solid rgba(255,255,255,.07);
    margin: 0;
}

.prv-section-num[b-4fle15j4q6] {
    color: #F97316;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.prv-section-title[b-4fle15j4q6] {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 16px;
}

.prv-section-body[b-4fle15j4q6] {
    color: #9ca3af;
    font-size: 14.5px;
    line-height: 1.75;
    margin: 0 0 16px;
}

.prv-section-body:last-child[b-4fle15j4q6] { margin-bottom: 0; }

.prv-section-body strong[b-4fle15j4q6] {
    color: #e5e7eb;
}

.prv-section-body a[b-4fle15j4q6] {
    color: #F97316;
    text-decoration: none;
}

.prv-section-body a:hover[b-4fle15j4q6] {
    text-decoration: underline;
}

/* ===== List items within sections ===== */
.prv-items[b-4fle15j4q6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
}

.prv-item[b-4fle15j4q6] {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.prv-item-icon[b-4fle15j4q6] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    margin-top: 1px;
}

.prv-item-icon-blue[b-4fle15j4q6]   { background: rgba(96,165,250,.15);  color: #60A5FA; }
.prv-item-icon-orange[b-4fle15j4q6] { background: rgba(249,115,22,.15);  color: #F97316; }
.prv-item-icon-violet[b-4fle15j4q6] { background: rgba(84,110,250,.15);  color: #546EFA; }
.prv-item-icon-green[b-4fle15j4q6]  { background: rgba(74,222,128,.15);  color: #4ade80; }
.prv-item-icon-gray[b-4fle15j4q6]   { background: rgba(156,163,175,.12); color: #9ca3af; }

.prv-item-title[b-4fle15j4q6] {
    color: #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 3px;
}

.prv-item-desc[b-4fle15j4q6] {
    color: #6b7280;
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0;
}

/* ===== Contact link at bottom ===== */
[b-4fle15j4q6] .prv-contact-link {
    color: #F97316;
    text-decoration: none;
    font-weight: 600;
}

[b-4fle15j4q6] .prv-contact-link:hover {
    text-decoration: underline;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .prv-section[b-4fle15j4q6] {
        padding: 24px 20px;
    }

    .prv-headline[b-4fle15j4q6] {
        font-size: 28px;
    }
}
/* /Components/Pages/Upgrade.razor.rz.scp.css */
.up-page[b-f6qosg95o0] {
    position: relative;
    font-family: "Lexend", system-ui, sans-serif;
    margin: -32px;                 /* cancel app-content padding so the halo can reach edge-to-edge */
    padding: 28px 32px 40px;
    overflow: hidden;
    min-height: calc(100% + 64px);
}

@media (max-width: 640px) {
    .up-page[b-f6qosg95o0] {
        margin: -20px;
        padding: 20px 20px 32px;
        min-height: calc(100% + 40px);
    }
}

.up-bg[b-f6qosg95o0] {
    position: absolute;
    inset: -10% -10% auto -10%;
    height: 700px;
    background: radial-gradient(60% 50% at 50% 0%, rgba(249, 115, 22, 0.10), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.up-container[b-f6qosg95o0] {
    position: relative;
    z-index: 1;
    max-width: 1080px;
    margin: 0 auto;
}

/* ── Hero ─────────────────────────────────────────────────────── */

.up-hero[b-f6qosg95o0] {
    text-align: center;
    margin-bottom: 14px;
}

.up-title[b-f6qosg95o0] {
    margin: 0 0 8px;
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.up-sub[b-f6qosg95o0] {
    color: #9ca3af;
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 480px;
    margin: 0 auto;
}

/* ── Current plan ─────────────────────────────────────────────── */

.up-current[b-f6qosg95o0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    color: #9ca3af;
}

.up-current-badge[b-f6qosg95o0] {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.up-current-pro[b-f6qosg95o0] {
    background: rgba(249, 115, 22, 0.14);
    border-color: rgba(249, 115, 22, 0.35);
    color: #F97316;
}

.up-current-max[b-f6qosg95o0] {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.38);
    color: #FBBF24;
}

/* ── Period toggle ────────────────────────────────────────────── */

.up-period[b-f6qosg95o0] {
    display: flex;
    justify-content: center;
    margin: 0 auto 16px;
    padding: 4px;
    gap: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: fit-content;
}

.up-period-opt[b-f6qosg95o0] {
    appearance: none;
    background: transparent;
    border: 0;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.up-period-opt:hover[b-f6qosg95o0] {
    color: #fff;
}

.up-period-opt.is-active[b-f6qosg95o0] {
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
}

.up-period-save[b-f6qosg95o0] {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(249, 115, 22, 0.18);
    color: #FB923C;
    padding: 2px 7px;
    border-radius: 999px;
}

/* ── Grid ─────────────────────────────────────────────────────── */

.up-grid[b-f6qosg95o0] {
    display: grid;
    gap: 20px;
}

.up-grid-3[b-f6qosg95o0] {
    grid-template-columns: repeat(3, 1fr);
}

.up-grid-2[b-f6qosg95o0] {
    grid-template-columns: 1fr 1fr;
}

.up-grid-1[b-f6qosg95o0] {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}

@media (max-width: 940px) {
    .up-grid-3[b-f6qosg95o0] {
        grid-template-columns: 1fr;
        max-width: 520px;
        margin: 0 auto;
    }
}

@media (max-width: 720px) {
    .up-grid-2[b-f6qosg95o0] {
        grid-template-columns: 1fr;
    }
}

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

.up-card[b-f6qosg95o0] {
    position: relative;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 22px 22px 20px;
    overflow: hidden;
    transition: transform 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
}

.up-card:hover[b-f6qosg95o0] {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.12);
}

.up-card-featured[b-f6qosg95o0] {
    border-color: rgba(249, 115, 22, 0.25);
    box-shadow: 0 14px 40px -20px rgba(249, 115, 22, 0.35);
}

.up-card-featured:hover[b-f6qosg95o0] {
    border-color: rgba(249, 115, 22, 0.45);
}

.up-card-thermal[b-f6qosg95o0] {
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #F97316 50%, transparent);
}

.up-card-halo[b-f6qosg95o0] {
    position: absolute;
    inset: -40% -20% auto -20%;
    height: 220px;
    background: radial-gradient(50% 50% at 50% 0%, rgba(249, 115, 22, 0.14), transparent 70%);
    pointer-events: none;
}

.up-card-eyebrow[b-f6qosg95o0] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    color: #6b7280;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.up-card-eyebrow-rec[b-f6qosg95o0] {
    color: #F97316;
}

.up-card-eyebrow-dot[b-f6qosg95o0] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #F97316;
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.7);
}

.up-card-head[b-f6qosg95o0] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.up-card-iconbox[b-f6qosg95o0] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.up-card-iconbox-basic[b-f6qosg95o0] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #d1d5db;
}

.up-card-iconbox-pro[b-f6qosg95o0] {
    background: rgba(249, 115, 22, 0.14);
    border: 1px solid rgba(249, 115, 22, 0.30);
    color: #F97316;
}

.up-card-iconbox-max[b-f6qosg95o0] {
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.32);
    color: #FBBF24;
}

.up-card-name[b-f6qosg95o0] {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.up-card-tagline[b-f6qosg95o0] {
    color: #9ca3af;
    font-size: 12.5px;
    line-height: 1.5;
    margin: 0;
}

.up-price[b-f6qosg95o0] {
    position: relative;
    z-index: 1;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.up-price-major[b-f6qosg95o0] {
    display: block;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.up-price-period[b-f6qosg95o0] {
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    margin-left: 2px;
}

.up-price-yearly[b-f6qosg95o0] {
    display: block;
    color: #6b7280;
    font-size: 12px;
    margin-top: 6px;
}

.up-stats[b-f6qosg95o0] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.up-stat[b-f6qosg95o0] {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px 14px;
}

.up-card-featured .up-stat[b-f6qosg95o0] {
    background: rgba(249, 115, 22, 0.045);
    border-color: rgba(249, 115, 22, 0.12);
}

.up-stat-num[b-f6qosg95o0] {
    display: block;
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
}

.up-stat-label[b-f6qosg95o0] {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.up-feats[b-f6qosg95o0] {
    position: relative;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.up-feats li[b-f6qosg95o0] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #d1d5db;
    font-size: 13px;
}

.up-feats li i[b-f6qosg95o0] {
    width: 14px;
    color: #4ade80;
    font-size: 13px;
}

.up-feats-muted[b-f6qosg95o0] {
    color: #6b7280 !important;
}

.up-feats-muted i[b-f6qosg95o0] {
    color: #4b5563 !important;
}

/* CTA */

/* The buttons carry the page scope attribute directly; the contact-sales CTAs
   are <NavLink>s, whose <a> is a child component and needs ::deep to inherit
   the same .up-cta styling. */
.up-cta[b-f6qosg95o0],
[b-f6qosg95o0] .up-cta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
    margin-top: auto;
}

.up-cta-outline[b-f6qosg95o0],
[b-f6qosg95o0] .up-cta-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
}

.up-cta-outline:hover[b-f6qosg95o0],
[b-f6qosg95o0] .up-cta-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.30);
    color: #fff;
}

.up-cta-primary[b-f6qosg95o0] {
    background: linear-gradient(180deg, #F97316, #EA580C);
    color: #fff;
    border: 1px solid rgba(249, 115, 22, 0.6);
    box-shadow: 0 8px 24px -10px rgba(249, 115, 22, 0.55);
}

.up-cta-primary:hover[b-f6qosg95o0] {
    background: linear-gradient(180deg, #FB923C, #F97316);
    box-shadow: 0 12px 30px -10px rgba(249, 115, 22, 0.70);
    color: #fff;
    transform: translateY(-1px);
}

.up-cta i[b-f6qosg95o0],
[b-f6qosg95o0] .up-cta i {
    font-size: 11px;
    transition: transform 0.18s ease;
}

.up-cta:hover i[b-f6qosg95o0],
[b-f6qosg95o0] .up-cta:hover i {
    transform: translateX(3px);
}

/* ── Top-tier confirmation state (Max) ───────────────────────── */

.up-top-state[b-f6qosg95o0] {
    position: relative;
    background: #12213A;
    border: 1px solid rgba(251, 191, 36, 0.28);
    border-radius: 22px;
    padding: 56px 32px 44px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 20px 50px -24px rgba(251, 191, 36, 0.32);
}

.up-top-halo[b-f6qosg95o0] {
    position: absolute;
    inset: -40% -30% auto -30%;
    height: 400px;
    background: radial-gradient(50% 60% at 50% 30%, rgba(251, 191, 36, 0.18), transparent 70%);
    pointer-events: none;
}

.up-top-icon[b-f6qosg95o0] {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    border-radius: 22px;
    margin: 0 auto 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(251, 191, 36, 0.14);
    border: 1px solid rgba(251, 191, 36, 0.40);
    color: #FBBF24;
    font-size: 32px;
    box-shadow: 0 12px 30px -10px rgba(251, 191, 36, 0.50);
    --fa-primary-color: #FBBF24;
    --fa-secondary-color: #FEF3C7;
    --fa-secondary-opacity: 0.55;
}

.up-top-headline[b-f6qosg95o0] {
    position: relative;
    z-index: 1;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.up-top-desc[b-f6qosg95o0] {
    position: relative;
    z-index: 1;
    color: #9ca3af;
    font-size: 14px;
    line-height: 1.6;
    max-width: 440px;
    margin: 0 auto 30px;
}

.up-top-stats[b-f6qosg95o0] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: stretch;
    gap: 22px;
    padding: 16px 24px;
    background: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
}

.up-top-stat[b-f6qosg95o0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.up-top-stat-num[b-f6qosg95o0] {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
}

.up-top-stat-label[b-f6qosg95o0] {
    color: #9ca3af;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.up-top-stat-divider[b-f6qosg95o0] {
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 520px) {
    .up-top-state[b-f6qosg95o0] {
        padding: 44px 22px 32px;
    }
    .up-top-stats[b-f6qosg95o0] {
        flex-direction: column;
        gap: 12px;
    }
    .up-top-stat-divider[b-f6qosg95o0] {
        width: 30px;
        height: 1px;
        align-self: center;
    }
}

/* ── Fine print ──────────────────────────────────────────────── */

.up-fineprint[b-f6qosg95o0] {
    text-align: center;
    color: #6b7280;
    font-size: 12px;
    margin: 16px 0 0;
}

/* ── Manage billing ──────────────────────────────────────────── */

.up-manage[b-f6qosg95o0] {
    text-align: center;
    margin: 22px auto 0;
    padding-top: 18px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    max-width: 520px;
}

.up-manage-link[b-f6qosg95o0] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #d1d5db;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    --fa-primary-color: #93c5fd;
    --fa-secondary-color: #60a5fa;
    --fa-secondary-opacity: 0.85;
}

.up-manage-link:hover[b-f6qosg95o0] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.20);
    color: #fff;
    transform: translateY(-1px);
}

.up-manage-link i[b-f6qosg95o0] {
    font-size: 13px;
}

.up-manage-ext[b-f6qosg95o0] {
    font-size: 10px !important;
    opacity: 0.6;
    transition: transform 0.18s ease;
}

.up-manage-link:hover .up-manage-ext[b-f6qosg95o0] {
    transform: translate(2px, -2px);
    opacity: 1;
}

.up-manage-sub[b-f6qosg95o0] {
    color: #6b7280;
    font-size: 12px;
    margin: 12px 0 0;
}

/* ── Manage subscription (downgrade + cancel) ────────────────── */

.up-sub-manage[b-f6qosg95o0] {
    max-width: 520px;
    margin: 28px auto 0;
    padding-top: 22px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
    text-align: center;
}

.up-sub-manage-title[b-f6qosg95o0] {
    font-size: 15px;
    font-weight: 600;
    color: #e5e7eb;
    margin: 0 0 6px;
}

.up-sub-manage-sub[b-f6qosg95o0] {
    color: #6b7280;
    font-size: 12px;
    margin: 0 0 14px;
}

.up-sub-downgrade[b-f6qosg95o0] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 22px;
}

.up-sub-downgrade-opt[b-f6qosg95o0] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #d1d5db;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.up-sub-downgrade-opt:hover[b-f6qosg95o0] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.20);
    color: #fff;
    transform: translateY(-1px);
}

.up-sub-downgrade-price[b-f6qosg95o0] {
    color: #9ca3af;
    font-size: 12px;
}

.up-sub-cancel-btn[b-f6qosg95o0] {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.18s ease;
}

.up-sub-cancel-btn:hover[b-f6qosg95o0] {
    color: #f87171;
}

.up-sub-cancel-note[b-f6qosg95o0] {
    color: #6b7280;
    font-size: 12px;
    margin: 10px 0 0;
}

.up-sub-cancel-state p[b-f6qosg95o0] {
    color: #d1d5db;
    font-size: 13px;
    margin: 0 0 14px;
}

.up-sub-cancel-state strong[b-f6qosg95o0] {
    color: #fff;
}

.up-sub-pending[b-f6qosg95o0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
    max-width: 420px;
    margin: 0 auto 18px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.25);
}

.up-sub-pending i[b-f6qosg95o0] {
    margin-top: 2px;
    font-size: 15px;
    --fa-primary-color: #bfdbfe;
    --fa-secondary-color: #60a5fa;
    --fa-secondary-opacity: 0.9;
}

.up-sub-pending p[b-f6qosg95o0] {
    color: #d1d5db;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.up-sub-pending strong[b-f6qosg95o0] {
    color: #fff;
}

.up-sub-pending-body[b-f6qosg95o0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.up-sub-pending-undo[b-f6qosg95o0] {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    color: #93c5fd;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.18s ease;
}

.up-sub-pending-undo:hover[b-f6qosg95o0] {
    color: #fff;
}

.up-sub-pending-undo:disabled[b-f6qosg95o0] {
    opacity: 0.6;
    cursor: default;
}
/* /Components/Shared/CursorPager.razor.rz.scp.css */
/* Bootstrap-style pagination — neutral colours fitting the dark theme.
   Connected buttons share a border, square inner corners, rounded outer
   corners. Left-justified per design preference. */

.pager[b-949xrob072] {
    display: inline-flex;
    margin: 8px 0;
    font-family: "Lexend", system-ui, sans-serif;
}

.pager-btn[b-949xrob072] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #d1d5db;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

/* Collapse the shared border so adjacent buttons read as one connected
   control, à la Bootstrap's .pagination. */
.pager-btn + .pager-btn[b-949xrob072] {
    margin-left: -1px;
}

.pager > :first-child[b-949xrob072] {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pager > :last-child[b-949xrob072] {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.pager-btn:hover:not(.pager-btn-disabled)[b-949xrob072] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    z-index: 1;
}

.pager-btn-disabled[b-949xrob072] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.pager-icon[b-949xrob072] {
    font-size: 11px;
    color: inherit;
}