/* /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/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 Comms, MyProfile (name/handle), 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;
    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 (shared shell pulled from MyOrganizations) ───────── */

.empty-state-card[b-qfrjanulef] {
    max-width: 520px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 48px 40px;
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.5);
}

.empty-state-icon-wrap[b-qfrjanulef] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(220, 53, 69, 0.10);
    border: 1px solid rgba(220, 53, 69, 0.25);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #ff7a88;
}

.empty-state-heading[b-qfrjanulef] {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.empty-state-body[b-qfrjanulef] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* ── 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;
}

[b-qfrjanulef] .eb-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(249, 115, 22, 0.4);
    color: #F97316;
    background: transparent;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}

[b-qfrjanulef] .eb-new-btn:hover {
    background: rgba(249, 115, 22, 0.1);
    border-color: #F97316;
    color: #F97316;
}

/* ── 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);
}

/* ── Back link ── */

.eb-back-link[b-qfrjanulef] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(84, 110, 250, 0.35);
    color: #93c5fd;
    background: rgba(84, 110, 250, 0.08);
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.eb-back-link:hover[b-qfrjanulef] {
    background: rgba(84, 110, 250, 0.18);
    border-color: rgba(84, 110, 250, 0.6);
    color: #c7d2fe;
    transform: translateX(-2px);
}

.eb-back-link i[b-qfrjanulef] {
    font-size: 12px;
}

/* ── 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);
}

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

[b-qfrjanulef] .eb-btn-primary {
    background: rgba(249, 115, 22, 0.18);
    border: 1px solid rgba(249, 115, 22, 0.35);
    color: #F97316;
}

[b-qfrjanulef] .eb-btn-primary:hover {
    background: rgba(249, 115, 22, 0.28);
    color: #ffb37a;
}

[b-qfrjanulef] .eb-btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #d1d5db;
}

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

[b-qfrjanulef] .eb-btn-danger {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.25);
    color: #ff7a88;
}

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

[b-qfrjanulef] .eb-btn:disabled,
[b-qfrjanulef] .eb-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── 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/FeedOnboarding.razor.rz.scp.css */
.feed-onboarding[b-738xrl6tmt] {
    background-color: #0d1526;
    border-radius: 1rem;
    padding: 3rem 2.5rem;
    min-height: 480px;
}

/* Left column */
.onboarding-left[b-738xrl6tmt] {
    padding-right: 2rem;
}

.badge-pill[b-738xrl6tmt] {
    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-738xrl6tmt] {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #ffffff;
}

.onboarding-headline--orange[b-738xrl6tmt] {
    color: #f97316;
}

.onboarding-headline--purple[b-738xrl6tmt] {
    background: linear-gradient(90deg, #a78bfa, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.onboarding-body[b-738xrl6tmt] {
    color: #94a3b8;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 480px;
}



.onboarding-hint[b-738xrl6tmt] {
    color: #64748b;
    font-size: 0.8rem;
}

/* CTA button */
.btn-claim[b-738xrl6tmt] {
    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-738xrl6tmt] {
    background-color: #78350f;
    color: #fef3c7;
}

.btn-claim:disabled[b-738xrl6tmt] {
    opacity: 0.7;
}

.onboarding-fine-print[b-738xrl6tmt] {
    color: #64748b;
    font-size: 0.8rem;
    text-align: center;
    max-width: 480px;
}

/* Right column — decorative cards */
.onboarding-right[b-738xrl6tmt] {
    padding-left: 2rem;
}

.feedback-cards[b-738xrl6tmt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feedback-card[b-738xrl6tmt] {
    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-738xrl6tmt] { margin-left: 0; }
.feedback-card--offset-2[b-738xrl6tmt] { margin-left: 1.5rem; }
.feedback-card--offset-3[b-738xrl6tmt] { margin-left: 0.5rem; }

.feedback-card__label[b-738xrl6tmt] {
    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-738xrl6tmt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.dot--blue[b-738xrl6tmt] { background-color: #3b82f6; }
.dot--green[b-738xrl6tmt] { background-color: #22c55e; }

.feedback-card__text[b-738xrl6tmt] {
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}
/* /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/Organizations/Create/CreateOrganization.razor.rz.scp.css */
/* === Header === */
.co-header[b-5pxeazxhgx] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

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

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

/* === Card wrapper === */
.co-card[b-5pxeazxhgx] {
    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-5pxeazxhgx] {
    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-5pxeazxhgx] {
    margin-top: 1px;
    flex-shrink: 0;
}

.co-alert-danger[b-5pxeazxhgx] {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.30);
    color: #ff7a88;
}

/* === Success panel === */
.co-success[b-5pxeazxhgx] {
    margin-bottom: 20px;
}

.co-success-badge[b-5pxeazxhgx] {
    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-5pxeazxhgx] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* === Form fields === */
.co-label[b-5pxeazxhgx] {
    display: block;
    margin-bottom: 6px;
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 500;
    font-family: "Lexend", system-ui, sans-serif;
}

[b-5pxeazxhgx] .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-5pxeazxhgx] .co-input:focus {
    border-color: rgba(249, 115, 22, 0.5);
}

[b-5pxeazxhgx] .co-input::placeholder {
    color: #6b7280;
}

[b-5pxeazxhgx] .co-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.co-slug-preview[b-5pxeazxhgx] {
    font-family: "Lexend", monospace;
    letter-spacing: 0.01em;
    margin-top: 6px;
}

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

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

/* === Buttons === */
.co-btn-primary[b-5pxeazxhgx] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    background: #F97316;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 10px -4px rgba(249, 115, 22, 0.35);
    transition: background 0.15s;
}

.co-btn-primary:hover:not(:disabled)[b-5pxeazxhgx] {
    background: #EA580C;
    color: #fff;
}

.co-btn-primary:disabled[b-5pxeazxhgx] {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-5pxeazxhgx] .co-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

[b-5pxeazxhgx] .co-btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
/* /Components/Features/Organizations/List/MyOrganizations.razor.rz.scp.css */
/* ── Empty state ─────────────────────────────────────────────────── */

.empty-state-card[b-lxw9gc8qo4] {
    max-width: 520px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 48px 40px;
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.5);
}

.empty-state-icon-wrap[b-lxw9gc8qo4] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #F97316;
}

.empty-state-heading[b-lxw9gc8qo4] {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.empty-state-body[b-lxw9gc8qo4] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

[b-lxw9gc8qo4] .btn-empty-state-cta {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    background: #F97316;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 6px 16px -6px rgba(249, 115, 22, 0.45);
}

[b-lxw9gc8qo4] .btn-empty-state-cta:hover {
    background: #EA580C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(249, 115, 22, 0.55);
}

.empty-state-hint[b-lxw9gc8qo4] {
    color: #6c757d;
    font-size: 12.5px;
    margin: 0;
}

/* ── List header ─────────────────────────────────────────────────── */

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

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

[b-lxw9gc8qo4] .orgs-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid rgba(249, 115, 22, 0.4);
    color: #F97316;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

[b-lxw9gc8qo4] .orgs-new-btn:hover {
    background: rgba(249, 115, 22, 0.1);
    border-color: #F97316;
    color: #F97316;
}

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

.org-card[b-lxw9gc8qo4] {
    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-lxw9gc8qo4] {
    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-lxw9gc8qo4] {
    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-lxw9gc8qo4] {
    border-color: rgba(84, 110, 250, 0.65);
    box-shadow: 0 16px 40px -16px rgba(84, 110, 250, 0.35);
}

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

.oc-avatar[b-lxw9gc8qo4] {
    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-lxw9gc8qo4] {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.oc-identity[b-lxw9gc8qo4] {
    flex: 1;
    min-width: 0;
}

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

.oc-handle[b-lxw9gc8qo4] {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oc-type-badge[b-lxw9gc8qo4] {
    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-lxw9gc8qo4] {
    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-lxw9gc8qo4] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 18px;
}

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

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

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

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

.oc-row-link[b-lxw9gc8qo4] {
    color: #8c9dfc;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-decoration: none;
}

.oc-row-link:hover[b-lxw9gc8qo4] {
    color: #a9b8fd;
    text-decoration: underline;
}

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

.oc-row-label[b-lxw9gc8qo4] {
    color: #6c757d;
    font-size: 12.5px;
    flex-shrink: 0;
}

.oc-plan-badge[b-lxw9gc8qo4] {
    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-lxw9gc8qo4] {
    margin-top: auto;
}

.oc-invite-label[b-lxw9gc8qo4] {
    color: #9ca3af;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.oc-invite-row[b-lxw9gc8qo4] {
    display: flex;
    gap: 8px;
}

[b-lxw9gc8qo4] .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-lxw9gc8qo4] .oc-invite-input::placeholder {
    color: #6c757d;
}

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

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

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

[b-lxw9gc8qo4] .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-lxw9gc8qo4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

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

[b-lxw9gc8qo4] .oc-btn-primary {
    background: rgba(84, 110, 250, 0.18);
    border: 1px solid rgba(84, 110, 250, 0.35);
    color: #8c9dfc;
}

[b-lxw9gc8qo4] .oc-btn-primary:hover {
    background: rgba(84, 110, 250, 0.28);
    color: #c0cafd;
}

[b-lxw9gc8qo4] .oc-btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #d1d5db;
}

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

[b-lxw9gc8qo4] .oc-btn-danger {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.25);
    color: #ff7a88;
}

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

[b-lxw9gc8qo4] .oc-btn:disabled,
[b-lxw9gc8qo4] .oc-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /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--org[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);
}

.pc-btn[b-899o1229g8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 8px;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pc-btn-outline[b-899o1229g8] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #d1d5db;
}

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

.pc-btn-danger[b-899o1229g8] {
    background: rgba(220, 53, 69, 0.12);
    border: 1px solid rgba(220, 53, 69, 0.25);
    color: #ff7a88;
}

.pc-btn-danger:hover[b-899o1229g8] {
    background: rgba(220, 53, 69, 0.22);
    color: #fff;
}
/* /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;
}

/* ===== 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 ──────────────────────────────────────────────── */

.mr-btn[b-a3s5p613rd] {
    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;
    transition: background 0.15s, color 0.15s;
}

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

.mr-btn-danger:hover[b-a3s5p613rd] {
    background: rgba(220, 53, 69, 0.22);
    color: #fff;
}
/* /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;
}

.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 */

.mr-btn[b-uzq5um4n4v] {
    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;
    transition: background 0.15s, color 0.15s;
}

.mr-btn[disabled][b-uzq5um4n4v] {
    opacity: 0.6;
    cursor: not-allowed;
}

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

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

.mr-btn-secondary[b-uzq5um4n4v] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #d1d5db;
}

.mr-btn-secondary:hover[b-uzq5um4n4v] {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* 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/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 ──────────────────────────────────────────────── */

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

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

.cs-btn-primary:disabled[b-dw05uh36cy] {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-dw05uh36cy] .cs-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

[b-dw05uh36cy] .cs-btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}
/* /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;
}

/* ─── Breadcrumb / back link ─── */
.story-back[b-17i5fbrw7x] {
    margin-bottom: 28px;
}

[b-17i5fbrw7x] .story-back-link {
    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-back-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateX(-2px);
}

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

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

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

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

/* ─── 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;
}

/* ─── 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 ──────────────────────────────────────────── */

[b-noo6znse63] .ls-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
    white-space: nowrap;
}

[b-noo6znse63] .ls-action-btn.ls-action-sm {
    padding: 5px 10px;
    font-size: 12px;
}

[b-noo6znse63] .ls-action-primary {
    background: #F97316;
    color: #fff;
    border-color: #F97316;
    box-shadow: 0 4px 10px -4px rgba(249, 115, 22, 0.4);
}

[b-noo6znse63] .ls-action-primary:hover {
    background: #EA580C;
    border-color: #EA580C;
    color: #fff;
    transform: translateY(-1px);
}

[b-noo6znse63] .ls-action-outline {
    background: transparent;
    border-color: rgba(249, 115, 22, 0.4);
    color: #F97316;
}

[b-noo6znse63] .ls-action-outline:hover {
    background: rgba(249, 115, 22, 0.1);
    border-color: #F97316;
    color: #F97316;
}

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

.ls-empty-card[b-noo6znse63] {
    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);
}

.ls-empty-icon[b-noo6znse63] {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 14px;
    background: rgba(249, 115, 22, 0.10);
    border: 1px solid rgba(249, 115, 22, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #F97316;
}

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

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

/* ── 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/Topics/Create/CreateTopic.razor.rz.scp.css */
/* === Header === */
.ct-header[b-q92zsh4h54] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

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

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

/* === Card wrapper === */
.ct-card[b-q92zsh4h54] {
    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 === */
.ct-alert[b-q92zsh4h54] {
    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;
}

.ct-alert-icon[b-q92zsh4h54] {
    margin-top: 1px;
    flex-shrink: 0;
}

.ct-alert-info[b-q92zsh4h54] {
    background: rgba(96, 165, 250, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #60A5FA;
}

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

/* === Success panel === */
.ct-success[b-q92zsh4h54] {
    margin-bottom: 20px;
}

.ct-success-badge[b-q92zsh4h54] {
    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;
}

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

/* === Form fields === */
.ct-label[b-q92zsh4h54] {
    display: block;
    margin-bottom: 6px;
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 500;
    font-family: "Lexend", system-ui, sans-serif;
}

.ct-check-label[b-q92zsh4h54] {
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 500;
    font-family: "Lexend", system-ui, sans-serif;
}

[b-q92zsh4h54] .ct-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-q92zsh4h54] .ct-input:focus {
    border-color: rgba(249, 115, 22, 0.5);
}

[b-q92zsh4h54] .ct-input::placeholder {
    color: #6b7280;
}

[b-q92zsh4h54] .ct-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


.ct-slug-preview[b-q92zsh4h54] {
    font-family: "Lexend", monospace;
    letter-spacing: 0.01em;
    margin-top: 6px;
}

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

/* === Buttons === */
/* ::deep so NavLink-rendered <a> elements pick up the same styles
   as direct <button> children. */
[b-q92zsh4h54] .ct-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    background: #F97316;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 10px -4px rgba(249, 115, 22, 0.35);
    transition: background 0.15s;
}

[b-q92zsh4h54] .ct-btn-primary:hover {
    background: #EA580C;
    color: #fff;
}

[b-q92zsh4h54] .ct-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-q92zsh4h54] .ct-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

[b-q92zsh4h54] .ct-btn-outline:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
/* /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/List/MyTopics.razor.rz.scp.css */
/* ── Empty state ────────────────────────────────────────────────── */

.empty-state-card[b-z0utmlvms0] {
    max-width: 520px;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 48px 40px;
    box-shadow: 0 20px 50px -16px rgba(0, 0, 0, 0.5);
}

.empty-state-icon-wrap[b-z0utmlvms0] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: #F97316;
}

.empty-state-heading[b-z0utmlvms0] {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

.empty-state-body[b-z0utmlvms0] {
    color: #9ca3af;
    font-size: 15px;
    line-height: 1.65;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

.btn-empty-state-cta[b-z0utmlvms0] {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    background: #F97316;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 6px 16px -6px rgba(249, 115, 22, 0.45);
}

.btn-empty-state-cta:hover[b-z0utmlvms0] {
    background: #EA580C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -6px rgba(249, 115, 22, 0.55);
}

.empty-state-hint[b-z0utmlvms0] {
    color: #6b7280;
    font-size: 12.5px;
    margin: 0;
}

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

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

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

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

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

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

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

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

.feed-subtitle-new[b-z0utmlvms0] {
    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. */
.feed-new-btn[b-z0utmlvms0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #F97316;
    border: 1px solid #F97316;
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 12px -4px rgba(249, 115, 22, 0.5);
}

.feed-new-btn:hover[b-z0utmlvms0] {
    background: #EA580C;
    border-color: #EA580C;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -4px rgba(249, 115, 22, 0.6);
}

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

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

.feed-search[b-z0utmlvms0] {
    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-z0utmlvms0] {
    border-color: rgba(249, 115, 22, 0.4);
}

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


/* Topic list items */
.topic-item[b-z0utmlvms0] {
    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-z0utmlvms0] {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

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

.topic-item-active:hover[b-z0utmlvms0] {
    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-z0utmlvms0] {
    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-z0utmlvms0] {
    animation: topicFlash-b-z0utmlvms0 1.8s ease-out;
}

@keyframes topicFlash-b-z0utmlvms0 {
    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-z0utmlvms0] {
    animation: unreadPulse-b-z0utmlvms0 0.9s ease-out;
}

@keyframes unreadPulse-b-z0utmlvms0 {
    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-z0utmlvms0] {
        animation: none;
        background: rgba(74, 222, 128, 0.12);
    }
    .topic-badge-unread-pulse[b-z0utmlvms0] {
        animation: none;
    }
}

.topic-item-name[b-z0utmlvms0] {
    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-z0utmlvms0] {
    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-z0utmlvms0] {
    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-z0utmlvms0] {
    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-z0utmlvms0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

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

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

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

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

/* Action buttons */
.detail-action-btn[b-z0utmlvms0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #d1d5db;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.detail-action-btn:hover[b-z0utmlvms0] {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

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

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

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

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

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

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

/* AI Summary card */
.ai-summary-card[b-z0utmlvms0] {
    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-z0utmlvms0] {
    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-z0utmlvms0] {
    font-size: 12px;
    color: #A5B4FC;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}

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

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

/* Responses heading */
.responses-title[b-z0utmlvms0] {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.responses-count[b-z0utmlvms0] {
    color: #6b7280;
    font-weight: 500;
}

/* Sentiment filter chips */
.sent-filter[b-z0utmlvms0] {
    padding: 4px 10px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: #9ca3af;
    font-size: 11.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-transform: capitalize;
    transition: all 0.15s;
}

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

/* Active-state pills — quieted so they read as filter chips rather than
   competing with the page CTA. Border-only treatment with a faint tinted
   background keeps the affordance readable without shouting. */
.sent-filter-all[b-z0utmlvms0]      { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.03); color: #e5e7eb; }
.sent-filter-positive[b-z0utmlvms0] { border-color: rgba(74,222,128,.45);  background: rgba(34,197,94,.06);   color: #4ade80; }
.sent-filter-neutral[b-z0utmlvms0]  { border-color: rgba(156,163,175,.4);  background: rgba(156,163,175,.06); color: #d1d5db; }
.sent-filter-critical[b-z0utmlvms0] { border-color: rgba(248,113,113,.45); background: rgba(239,68,68,.06);   color: #f87171; }

/* Response items */
.response-item[b-z0utmlvms0] {
    display: block;
    width: 100%;
    text-align: left;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 16px 18px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.12s;
    color: inherit;
    /* Entrance animation runs once per DOM mount: gives a "lands into place"
       cue both on initial render of a topic's list and — most importantly —
       when a SignalR push prepends a fresh response. No separate NEW pill or
       3s tint required; the slide-in itself is the arrival signal, and the
       green left rail + glow from .response-item-unread persists naturally
       until the user opens it. */
    animation: responseArrive-b-z0utmlvms0 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@keyframes responseArrive-b-z0utmlvms0 {
    0%   { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .response-item[b-z0utmlvms0] { animation: none; }
}

.response-item:hover[b-z0utmlvms0] {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Unread response — green left rail + faint wash + soft glow. Reuses the same
   left-rail idiom as the selected-topic card (orange) so the visual grammar
   stays consistent across the feed: a coloured rail is always a "this needs
   your attention" cue. Green matches the existing unread/fresh semantic
   already used by the topic-card badge and the SignalR NEW pill. */
.response-item-unread[b-z0utmlvms0] {
    background: rgba(74, 222, 128, 0.045);
    border-color: rgba(74, 222, 128, 0.18);
    border-left: 3px solid #4ade80;
    padding-left: 15px;     /* offset the +1px the thicker rail steals */
    box-shadow: -4px 0 18px -8px rgba(74, 222, 128, 0.35);
}

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

.response-item-unread .response-handle[b-z0utmlvms0] {
    color: #fff;
    font-weight: 600;
}

.response-item-unread .response-content[b-z0utmlvms0] {
    color: #e5e7eb;
}

/* Read response — muted treatment so the eye glides past it and lands on the
   unread cards above. Restraint here is the whole point: read items shouldn't
   disappear, they should *recede*. */
.response-item-read .response-handle[b-z0utmlvms0] {
    color: #9ca3af;
    font-weight: 500;
}

.response-item-read .response-content[b-z0utmlvms0] {
    color: #9ca3af;
}

.response-item-read .response-avatar[b-z0utmlvms0] {
    opacity: 0.6;
}

.response-avatar[b-z0utmlvms0] {
    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;
}

.response-avatar-lg[b-z0utmlvms0] {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.response-handle[b-z0utmlvms0] {
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
}

.response-time[b-z0utmlvms0] {
    color: #6b7280;
    font-size: 12px;
}

/* Sentiment pills */
.sent-pill[b-z0utmlvms0] {
    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-z0utmlvms0] {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    flex-shrink: 0;
}

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

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

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

.response-content[b-z0utmlvms0] {
    color: #d1d5db;
    font-size: 14px;
    line-height: 1.6;
}

.response-read-full[b-z0utmlvms0] {
    font-size: 12px;
    color: #60A5FA;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Feedback dialog ─────────────────────────────────────────────── */

.feedback-backdrop[b-z0utmlvms0] {
    position: fixed;
    inset: 0;
    background: rgba(13, 24, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: feedbackFadeIn-b-z0utmlvms0 0.15s ease;
}

.feedback-dialog[b-z0utmlvms0] {
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    background: #12213A;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 28px;
    overflow-y: auto;
    box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.6);
    animation: feedbackSlideUp-b-z0utmlvms0 0.2s ease;
}

@keyframes feedbackFadeIn-b-z0utmlvms0 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes feedbackSlideUp-b-z0utmlvms0 {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.feedback-dialog-on[b-z0utmlvms0] {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 3px;
}

.feedback-dialog-topic-name[b-z0utmlvms0] {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
}

.feedback-dialog-close[b-z0utmlvms0] {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #d1d5db;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-dialog-close:hover[b-z0utmlvms0] {
    background: rgba(255, 255, 255, 0.06);
}

.feedback-dialog-content[b-z0utmlvms0] {
    color: #e5e7eb;
    font-size: 15.5px;
    line-height: 1.65;
}

/* Acknowledge button */
.btn-acknowledge[b-z0utmlvms0] {
    padding: 10px 16px;
    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: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s;
}

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

/* Delete response — destructive secondary action. Outlined red so it sits
   alongside Acknowledge without competing for primary attention. */
.btn-delete-response[b-z0utmlvms0] {
    padding: 10px 14px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #f87171;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s;
}

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

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

/* ── Acknowledge toast ───────────────────────────────────────────── */

.ack-toast[b-z0utmlvms0] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
    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: feedbackSlideUp-b-z0utmlvms0 0.2s ease;
}

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

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

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

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

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

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

    .feed-right[b-z0utmlvms0] {
        padding: 20px 16px;
    }
}
/* /Components/Features/Topics/Manage/ManageTopic.razor.rz.scp.css */
/* === Header === */
.mt-header[b-e9w86nvv6x] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
}

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

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

/* === Card wrapper === */
.mt-card[b-e9w86nvv6x] {
    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;
    margin-bottom: 20px;
}

.mt-card-danger[b-e9w86nvv6x] {
    border-color: rgba(239, 68, 68, 0.30);
}

/* === Section label === */
.mt-section-label[b-e9w86nvv6x] {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: "Lexend", system-ui, sans-serif;
    margin-bottom: 18px;
}

/* === Alerts === */
.mt-alert[b-e9w86nvv6x] {
    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;
}

.mt-alert-icon[b-e9w86nvv6x] {
    margin-top: 1px;
    flex-shrink: 0;
}

.mt-alert-info[b-e9w86nvv6x] {
    background: rgba(96, 165, 250, 0.10);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #60A5FA;
}

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

.mt-alert-warning[b-e9w86nvv6x] {
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.30);
    color: #fbbf24;
}

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

/* === Success badge === */
.mt-success-badge[b-e9w86nvv6x] {
    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;
}

/* === Status badge (Public / Private) === */
.mt-status-badge[b-e9w86nvv6x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    font-family: "Lexend", system-ui, sans-serif;
}

.mt-status-badge-public[b-e9w86nvv6x] {
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.25);
    color: #4ade80;
}

.mt-status-badge-private[b-e9w86nvv6x] {
    background: rgba(156, 163, 175, 0.10);
    border: 1px solid rgba(156, 163, 175, 0.20);
    color: #9ca3af;
}

/* === Form fields === */
.mt-label[b-e9w86nvv6x] {
    display: block;
    margin-bottom: 6px;
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 500;
    font-family: "Lexend", system-ui, sans-serif;
}

.mt-check-label[b-e9w86nvv6x] {
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 500;
    font-family: "Lexend", system-ui, sans-serif;
}

[b-e9w86nvv6x] .mt-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-e9w86nvv6x] .mt-input:focus {
    border-color: rgba(249, 115, 22, 0.5);
}

[b-e9w86nvv6x] .mt-input::placeholder {
    color: #6b7280;
}

[b-e9w86nvv6x] .mt-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mt-slug-preview[b-e9w86nvv6x] {
    font-family: "Lexend", monospace;
    letter-spacing: 0.01em;
    margin-top: 6px;
}

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

/* === Image preview === */
.mt-image-preview[b-e9w86nvv6x] {
    min-height: 200px;
    border-radius: 10px;
    background: #0d1b2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 16px;
}

.mt-image-preview-empty[b-e9w86nvv6x] {
    color: #6b7280;
    font-size: 13px;
    font-family: "Lexend", system-ui, sans-serif;
    text-align: center;
    padding: 16px;
}

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

.mt-btn-primary:hover[b-e9w86nvv6x] {
    background: #EA580C;
    color: #fff;
}

.mt-btn-primary:disabled[b-e9w86nvv6x] {
    opacity: 0.6;
    cursor: not-allowed;
}

.mt-btn-danger[b-e9w86nvv6x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

.mt-btn-danger:hover[b-e9w86nvv6x] {
    background: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
}

.mt-btn-danger-toggle[b-e9w86nvv6x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    background: transparent;
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.15s;
}

.mt-btn-danger-toggle:hover[b-e9w86nvv6x] {
    background: rgba(239, 68, 68, 0.12);
}

[b-e9w86nvv6x] .mt-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    cursor: pointer;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s;
}

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

[b-e9w86nvv6x] .mt-btn-outline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Danger zone === */
.mt-danger-zone-header[b-e9w86nvv6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.mt-danger-title[b-e9w86nvv6x] {
    color: #f87171;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mt-danger-description[b-e9w86nvv6x] {
    color: #6b7280;
    font-size: 13px;
    margin-bottom: 16px;
}
/* /Components/Layout/AnonymousLayout.razor.rz.scp.css */
/* 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;
}

/* Material Symbols */
[b-rp4gr71z2e] .material-symbols-outlined {
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    vertical-align: middle;
}

/* 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 */
footer[b-rp4gr71z2e] {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    /* Fallback/Adjustment */
}
/* /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;
}

/* ===== 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;
    }
}
/* /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 */
.topnav-blur[b-ydg7gfw8hc] {
    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)) {
    .topnav-blur[b-ydg7gfw8hc] {
        background-color: rgba(11, 18, 32, 0.95);
    }
}

[b-ydg7gfw8hc] .nav-link {
    position: relative;
    border-radius: 0.5rem;
    transition: color 0.2s ease, font-weight 0.2s ease;
}

[b-ydg7gfw8hc] .nav-link:hover,
[b-ydg7gfw8hc] .nav-link:focus-visible {
    color: #fff !important;
    font-weight: 700;
}

[b-ydg7gfw8hc] .nav-link.active {
    color: #fff !important;
    font-weight: 700;
    background-color: #1f2937;
}

[b-ydg7gfw8hc] .sign-in-link {
    color: #3B82F6 !important;
    font-weight: 700 !important;
}

[b-ydg7gfw8hc] .sign-in-link:hover,
[b-ydg7gfw8hc] .sign-in-link:focus,
[b-ydg7gfw8hc] .sign-in-link:focus-visible {
    color: #fff !important;
    font-weight: 700 !important;
}

@media (max-width: 767.98px) {
    .navbar-nav[b-ydg7gfw8hc] {
        width: 100%;
        padding-left: 0;
    }

    .nav-item[b-ydg7gfw8hc] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        width: 100%;
        padding: 0;
    }

    .nav-item:last-child[b-ydg7gfw8hc] {
        border-bottom: none;
    }

    .nav-item[b-ydg7gfw8hc]  .nav-link {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        padding-left: 0.5rem !important; /* Keep some left padding */
        width: 100%;
        border-radius: 0; /* Remove border radius if any */
    }
}
/* /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 */
.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-btn[b-l5c4k1s5a5]::after {
    display: none;
}

.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] {
    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);
    margin-top: 8px !important;
}

.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;
}

/* ===== 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;
}

/* hide default Bootstrap caret */
.persona-pill[b-8x3w8rv3ul]::after {
    display: none;
}

.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] {
    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);
    margin-top: 8px !important;
}

.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/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;
}

[b-i2cugzj7xq] .dash-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    background: transparent;
    color: #d1d5db;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

[b-i2cugzj7xq] .dash-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

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

[b-i2cugzj7xq] .dash-btn-primary:hover {
    background: #EA580C;
    color: #fff;
}

[b-i2cugzj7xq] .dash-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    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: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}

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

/* ===== 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/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;
    inset: 4% 6% 12% 10%;
    width: 84%;
    height: 88%;
    object-fit: cover;
    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/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/MyOrganizationsPage.razor.rz.scp.css */
.ap-header[b-dkgmte0gxr] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

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

.ap-subtitle[b-dkgmte0gxr] {
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 13.5px;
    margin: 4px 0 0;
}
/* /Components/Pages/Pricing.razor.rz.scp.css */
/* ===== Hero ===== */
.pr-hero[b-5y7xpnkoc5] {
    margin-bottom: 40px;
}

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

.pr-title[b-5y7xpnkoc5] {
    color: #fff;
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    line-height: 1.15;
}

.pr-sub[b-5y7xpnkoc5] {
    color: #9ca3af;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* ===== Table wrapper (enables horizontal scroll on small screens) ===== */
.pr-table-wrap[b-5y7xpnkoc5] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    /* shadow so the border-radius clips the inner table */
    box-shadow: 0 0 0 1px rgba(255,255,255,.07);
}

/* ===== Flat grid — ALL cells are direct children, renders row-by-row ===== */
/* 5 cells per row = perfect auto-placement in a 5-col grid                 */
.pr-table[b-5y7xpnkoc5] {
    display: grid;
    grid-template-columns: 160px repeat(4, 1fr);
    min-width: 620px;          /* keeps the table readable before scroll kicks in */
    background: #12213A;
    border-radius: 16px;
    overflow: hidden;          /* clips child borders to the rounded corners */
}

/* ===== Corner cells (label column spacers in header / CTA rows) ===== */
.pr-corner[b-5y7xpnkoc5] {
    background: #12213A;
}

.pr-corner-top[b-5y7xpnkoc5] {
    border-bottom: 1px solid rgba(255,255,255,.07);
}

/* ===== Plan header cells ===== */
.pr-header[b-5y7xpnkoc5] {
    padding: 28px 20px 22px;
    border-left: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.07);
    position: relative;
}

/* Popular column — highlighted with orange accent                          */
/* Box-shadow inset fakes left + right borders without breaking the grid    */
.pr-popular[b-5y7xpnkoc5] {
    background: linear-gradient(180deg, rgba(249,115,22,.11) 0%, rgba(249,115,22,.02) 100%);
    /* left + right + top accent */
    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,.45);
    border-left-color: transparent;
}

/* Fixed-height row present in every header cell — keeps plan names aligned
   regardless of whether the badge is shown */
.pr-badge-row[b-5y7xpnkoc5] {
    height: 28px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.pr-badge[b-5y7xpnkoc5] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 50px;
    background: rgba(249,115,22,.18);
    color: #F97316;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.pr-plan-name[b-5y7xpnkoc5] {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}

.pr-plan-price[b-5y7xpnkoc5] {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 10px;
}

.pr-plan-period[b-5y7xpnkoc5] {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    letter-spacing: 0;
}

.pr-plan-desc[b-5y7xpnkoc5] {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
}

/* ===== Label column (feature names) ===== */
.pr-label-cell[b-5y7xpnkoc5] {
    display: flex;
    align-items: center;
    padding: 0 16px;
    min-height: 52px;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,.05);
    border-right: 1px solid rgba(255,255,255,.05);
}

/* ===== Feature value cells ===== */
.pr-feat-cell[b-5y7xpnkoc5] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    min-height: 52px;
    border-left: 1px solid rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.05);
}

.pr-popular-col[b-5y7xpnkoc5] {
    background: rgba(249,115,22,.03);
    /* left + right accent, no top/bottom */
    box-shadow:
        inset  1px 0 0 rgba(249,115,22,.28),
        inset -1px 0 0 rgba(249,115,22,.28);
    border-left-color: transparent;
}

.pr-feat-text[b-5y7xpnkoc5] {
    color: #d1d5db;
    font-size: 13.5px;
    font-weight: 500;
}

.pr-icon-yes[b-5y7xpnkoc5]  { color: #4ade80; font-size: 17px; }
.pr-icon-no[b-5y7xpnkoc5]   { color: #1f2937; font-size: 17px; }
.pr-icon-some[b-5y7xpnkoc5] { color: #F97316; font-size: 17px; }

/* ===== CTA cells ===== */
.pr-cta-cell[b-5y7xpnkoc5] {
    padding: 20px;
    display: flex;
    justify-content: center;
    background: #12213A;
    border-left: 1px solid rgba(255,255,255,.04);
}

.pr-popular-cta[b-5y7xpnkoc5] {
    background: rgba(249,115,22,.03);
    /* left + right + bottom accent */
    box-shadow:
        inset  1px 0 0 rgba(249,115,22,.28),
        inset -1px 0 0 rgba(249,115,22,.28),
        inset  0 -2px 0 rgba(249,115,22,.35);
    border-left-color: transparent;
}

/* ===== Buttons (::deep because NavLink renders <a>) ===== */
[b-5y7xpnkoc5] .pr-btn-primary {
    display: block;
    width: 100%;
    padding: 11px 18px;
    border-radius: 8px;
    background: #FF7F27;
    color: #fff;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.15s ease;
    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 {
    display: block;
    width: 100%;
    padding: 11px 18px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.14);
    color: #9ca3af;
    font-family: "Lexend", system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

[b-5y7xpnkoc5] .pr-btn-ghost:hover {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.25);
    color: #fff;
}

/* ===== Responsive ===== */

/* Tablet: hide label column, show 4 plans side-by-side */
@media (max-width: 992px) {
    .pr-table[b-5y7xpnkoc5] {
        grid-template-columns: repeat(4, 1fr);
        min-width: 540px;
    }

    .pr-corner[b-5y7xpnkoc5],
    .pr-label-cell[b-5y7xpnkoc5] {
        display: none;
    }

    /* Without the label column, plan cells lose their left separator;
       restore it on all but the first visible cell */
    .pr-header + .pr-header[b-5y7xpnkoc5],
    .pr-feat-cell + .pr-feat-cell[b-5y7xpnkoc5],
    .pr-cta-cell + .pr-cta-cell[b-5y7xpnkoc5] {
        border-left: 1px solid rgba(255,255,255,.06);
    }

    /* Popular col: restore clean left border (the sibling rule above would add one) */
    .pr-popular-col[b-5y7xpnkoc5],
    .pr-popular[b-5y7xpnkoc5],
    .pr-popular-cta[b-5y7xpnkoc5] {
        border-left-color: transparent;
    }
}
/* /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/Shared/CursorPager.razor.rz.scp.css */
.pager[b-949xrob072] {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 8px 0;
    font-family: "Lexend", system-ui, sans-serif;
}

.pager-btn[b-949xrob072] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: #d1d5db;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
}

.pager-btn:hover[b-949xrob072] {
    background: rgba(249, 115, 22, 0.10);
    border-color: rgba(249, 115, 22, 0.35);
    color: #fff;
    transform: translateY(-1px);
}

.pager-btn-disabled[b-949xrob072] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.pager-icon[b-949xrob072] {
    font-size: 12px;
    color: #F97316;
}

.pager-btn-disabled .pager-icon[b-949xrob072] {
    color: #6b7280;
}