/* /Layout/MainLayout.razor.rz.scp.css */
.page[b-u3ir55cyye] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-u3ir55cyye] {
    flex: 1;
}

.sidebar[b-u3ir55cyye] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-u3ir55cyye] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-u3ir55cyye]  a, .top-row[b-u3ir55cyye]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-u3ir55cyye]  a:hover, .top-row[b-u3ir55cyye]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-u3ir55cyye]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-u3ir55cyye] {
        justify-content: space-between;
    }

    .top-row[b-u3ir55cyye]  a, .top-row[b-u3ir55cyye]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-u3ir55cyye] {
        flex-direction: row;
    }

    .sidebar[b-u3ir55cyye] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-u3ir55cyye] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-u3ir55cyye]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-u3ir55cyye], article[b-u3ir55cyye] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-hogzajmrtn] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-hogzajmrtn] {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-hogzajmrtn] {
    font-size: 1.1rem;
}

.bi[b-hogzajmrtn] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-hogzajmrtn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-hogzajmrtn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-hogzajmrtn] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

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

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

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

    .nav-item[b-hogzajmrtn]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-hogzajmrtn]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-hogzajmrtn]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-hogzajmrtn] {
        display: none;
    }

    .collapse[b-hogzajmrtn] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-hogzajmrtn] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Browse.razor.rz.scp.css */
/* =========================================================
   Browse Page — Premium Education Platform Design
   ========================================================= */

/* Page container */
.bz-page[b-kygmt4aqzy] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 100px 2rem 4rem;
}

/* ── Hero ── */
.bz-hero[b-kygmt4aqzy] {
    text-align: center;
    padding: 3rem 1rem 2.5rem;
    margin-bottom: 2.5rem;
}

.bz-hero__title[b-kygmt4aqzy] {
    font-size: 2.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.035em;
    margin: 0 0 0.625rem;
    line-height: 1.15;
}

.bz-hero__sub[b-kygmt4aqzy] {
    font-size: 1.125rem;
    color: #64748b;
    margin: 0 auto 2rem;
    max-width: 480px;
    line-height: 1.6;
}

/* Search bar */
.bz-search[b-kygmt4aqzy] {
    display: flex;
    align-items: center;
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bz-search:focus-within[b-kygmt4aqzy] {
    border-color: #2A9EA6;
    box-shadow: 0 0 0 4px rgba(42, 158, 166, 0.08);
}

.bz-search__icon[b-kygmt4aqzy] {
    padding: 0 0 0 1.125rem;
    color: #94a3b8;
    font-size: 1rem;
    display: flex;
}

.bz-search__input[b-kygmt4aqzy] {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    color: #1e293b;
    background: transparent;
}

.bz-search__input[b-kygmt4aqzy]::placeholder {
    color: #94a3b8;
}

.bz-search__select[b-kygmt4aqzy] {
    border: none;
    border-left: 1.5px solid #e2e8f0;
    outline: none;
    padding: 0.875rem 1.25rem;
    font-size: 0.875rem;
    color: #475569;
    background: #f8fafc;
    cursor: pointer;
    min-width: 170px;
    -webkit-appearance: auto;
}

/* ── Results info bar ── */
.bz-results-info[b-kygmt4aqzy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #64748b;
}

.bz-clear-btn[b-kygmt4aqzy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}

.bz-clear-btn:hover[b-kygmt4aqzy] {
    background: #f1f5f9;
    color: #334155;
}

/* ── Section grouping ── */
.bz-section[b-kygmt4aqzy] {
    margin-bottom: 3rem;
}

.bz-section__header[b-kygmt4aqzy] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.bz-section__title[b-kygmt4aqzy] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.015em;
}

.bz-section__count[b-kygmt4aqzy] {
    font-size: 0.8125rem;
    color: #94a3b8;
    font-weight: 500;
}

/* ── Vendor subcategory within a group ── */
.bz-vendor-sub[b-kygmt4aqzy] {
    margin-bottom: 1.25rem;
}

.bz-vendor-sub:last-child[b-kygmt4aqzy] {
    margin-bottom: 0;
}

.bz-vendor-sub__header[b-kygmt4aqzy] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-left: 0.125rem;
}

.bz-vendor-sub__name[b-kygmt4aqzy] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.bz-vendor-sub__line[b-kygmt4aqzy] {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}

/* ── Card grid ── */
.bz-grid[b-kygmt4aqzy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1100px) {
    .bz-grid[b-kygmt4aqzy] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .bz-grid[b-kygmt4aqzy] { grid-template-columns: 1fr; }
}

/* ── Exam Card ── */
.bz-card[b-kygmt4aqzy] {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.bz-card:hover[b-kygmt4aqzy] {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Card header — vendor branded area */
.bz-card__header[b-kygmt4aqzy] {
    padding: 1.5rem 1.25rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
    position: relative;
}

.bz-card__header-content[b-kygmt4aqzy] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bz-card__logo[b-kygmt4aqzy] {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.bz-card__logo img[b-kygmt4aqzy] {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.bz-card__logo-fallback[b-kygmt4aqzy] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.375rem;
    color: #334155;
    background: #fff;
}

.bz-card__vendor[b-kygmt4aqzy] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.97);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    letter-spacing: 0.01em;
}

.bz-card__header-badges[b-kygmt4aqzy] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-end;
}

.bz-card__study-tag[b-kygmt4aqzy],
.bz-card__version-tag[b-kygmt4aqzy],
.bz-card__resume-tag[b-kygmt4aqzy],
.bz-card__coming-soon-tag[b-kygmt4aqzy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    white-space: nowrap;
}

.bz-card__version-tag[b-kygmt4aqzy] {
    background: rgba(255, 255, 255, 0.25);
}

.bz-card__resume-tag[b-kygmt4aqzy] {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

.bz-card__coming-soon-tag[b-kygmt4aqzy] {
    background: #6366f1;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

.bz-card__cta--resume[b-kygmt4aqzy] {
    background: linear-gradient(135deg, #26808C 0%, #2A9EA6 100%) !important;
}

.bz-card--coming-soon[b-kygmt4aqzy] {
    cursor: default;
}

.bz-card--coming-soon .bz-card__title[b-kygmt4aqzy],
.bz-card--coming-soon .bz-card__desc[b-kygmt4aqzy] {
    opacity: 0.85;
}

.bz-card__cta--disabled[b-kygmt4aqzy] {
    background: #94a3b8 !important;
    cursor: not-allowed;
    color: #ffffff;
    pointer-events: none;
}

/* Card body */
.bz-card__body[b-kygmt4aqzy] {
    padding: 1.25rem 1.25rem 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bz-card__tags[b-kygmt4aqzy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.bz-tag[b-kygmt4aqzy] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.175rem 0.5rem;
    border-radius: 5px;
    letter-spacing: 0.01em;
}

.bz-card__title[b-kygmt4aqzy] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.375rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.bz-card__desc[b-kygmt4aqzy] {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 0.875rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bz-card__meta[b-kygmt4aqzy] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: auto;
}

.bz-card__meta span[b-kygmt4aqzy] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.bz-card__meta i[b-kygmt4aqzy] {
    font-size: 0.6875rem;
    opacity: 0.7;
}

/* Card footer */
.bz-card__footer[b-kygmt4aqzy] {
    padding: 1rem 1.25rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #f1f5f9;
}

.bz-card__price-row[b-kygmt4aqzy] {
    display: flex;
    flex-direction: column;
}

.bz-card__price[b-kygmt4aqzy] {
    font-size: 1.375rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    line-height: 1;
}

.bz-card__free[b-kygmt4aqzy] {
    font-size: 0.6875rem;
    color: #94a3b8;
    text-decoration: none;
    margin-top: 0.25rem;
    transition: color 0.15s;
}

.bz-card__free:hover[b-kygmt4aqzy] {
    color: #2A9EA6;
}

.bz-card__cta[b-kygmt4aqzy] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    white-space: nowrap;
}

.bz-card__cta:hover[b-kygmt4aqzy] {
    opacity: 0.88;
    transform: translateY(-1px);
}

.bz-card__cta i[b-kygmt4aqzy] {
    font-size: 0.75rem;
    transition: transform 0.15s;
}

.bz-card:hover .bz-card__cta i[b-kygmt4aqzy] {
    transform: translateX(2px);
}

/* ── Loading & Empty states ── */
.bz-loading[b-kygmt4aqzy] {
    text-align: center;
    padding: 5rem 1rem;
}

.bz-loading p[b-kygmt4aqzy] {
    margin-top: 1rem;
    color: #94a3b8;
    font-size: 0.9375rem;
}

.bz-empty[b-kygmt4aqzy] {
    text-align: center;
    padding: 5rem 1rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.bz-empty i[b-kygmt4aqzy] {
    font-size: 3.5rem;
    color: #cbd5e1;
}

.bz-empty h3[b-kygmt4aqzy] {
    margin: 1rem 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #334155;
}

.bz-empty p[b-kygmt4aqzy] {
    color: #94a3b8;
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}

.bz-btn[b-kygmt4aqzy] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.bz-btn--outline[b-kygmt4aqzy] {
    background: #fff;
    color: #475569;
    border: 1.5px solid #e2e8f0;
}

.bz-btn--outline:hover[b-kygmt4aqzy] {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .bz-page[b-kygmt4aqzy] {
        padding: 90px 1rem 2rem;
    }

    .bz-hero[b-kygmt4aqzy] {
        padding: 2rem 0 1.5rem;
    }

    .bz-hero__title[b-kygmt4aqzy] {
        font-size: 2rem;
    }

    .bz-hero__sub[b-kygmt4aqzy] {
        font-size: 1rem;
    }

    .bz-search[b-kygmt4aqzy] {
        flex-direction: column;
        border-radius: 12px;
    }

    .bz-search__select[b-kygmt4aqzy] {
        border-left: none;
        border-top: 1.5px solid #e2e8f0;
        min-width: 100%;
    }

    .bz-section__title[b-kygmt4aqzy] {
        font-size: 1.125rem;
    }

    .bz-card__header[b-kygmt4aqzy] {
        min-height: 72px;
        padding: 1rem;
    }

    .bz-card__body[b-kygmt4aqzy] {
        padding: 1rem;
    }

    .bz-card__footer[b-kygmt4aqzy] {
        padding: 0.875rem 1rem;
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .bz-card__price-row[b-kygmt4aqzy] {
        flex-direction: row;
        align-items: baseline;
        gap: 0.75rem;
    }

    .bz-card__cta[b-kygmt4aqzy] {
        justify-content: center;
    }
}
/* /Pages/Catalog.razor.rz.scp.css */
/* =========================================================
   Catalog Page — Premium Education Platform Design
   ========================================================= */

.ct-page[b-vrnp21if21] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* ── Hero ── */
.ct-hero[b-vrnp21if21] {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    margin-bottom: 1.5rem;
}

.ct-hero__title[b-vrnp21if21] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.035em;
    margin: 0 0 0.5rem;
    line-height: 1.15;
}

.ct-hero__sub[b-vrnp21if21] {
    font-size: 1.0625rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* ── Controls ── */
.ct-controls[b-vrnp21if21] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ct-search[b-vrnp21if21] {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ct-search:focus-within[b-vrnp21if21] {
    border-color: #2A9EA6;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
}

.ct-search__icon[b-vrnp21if21] {
    padding: 0 0 0 0.875rem;
    color: #94a3b8;
    display: flex;
}

.ct-search__input[b-vrnp21if21] {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    color: #1e293b;
    background: transparent;
}

.ct-search__input[b-vrnp21if21]::placeholder { color: #94a3b8; }

.ct-select[b-vrnp21if21] {
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #475569;
    background: #fff;
    cursor: pointer;
    -webkit-appearance: auto;
    min-width: 140px;
}

.ct-redeem-btn[b-vrnp21if21] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    background: #fff;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.ct-redeem-btn:hover[b-vrnp21if21] { background: #f8fafc; border-color: #cbd5e1; color: #334155; }

/* ── Inline Redeem Banner ── */
.ct-redeem-banner[b-vrnp21if21] {
    margin-bottom: 1.5rem;
    padding: 0.625rem 1rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
}

.ct-redeem-banner__content[b-vrnp21if21] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.ct-redeem-banner__label[b-vrnp21if21] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.ct-redeem-banner__label i[b-vrnp21if21] { color: #2A9EA6; }

.ct-redeem-banner__input[b-vrnp21if21] {
    flex: 1;
    min-width: 140px;
    max-width: 240px;
    padding: 0.4rem 0.75rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.8125rem;
    background: #fff;
    transition: border-color 0.15s;
    text-transform: uppercase;
}

.ct-redeem-banner__input:focus[b-vrnp21if21] {
    outline: none;
    border-color: #2A9EA6;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
}

.ct-redeem-banner__submit[b-vrnp21if21] {
    padding: 0.4rem 0.875rem;
    background: #2A9EA6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.ct-redeem-banner__submit:hover[b-vrnp21if21] { background: #26808C; }
.ct-redeem-banner__submit:disabled[b-vrnp21if21] { opacity: 0.5; cursor: not-allowed; }

.ct-redeem-banner__dismiss[b-vrnp21if21] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.125rem;
    margin-left: auto;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.ct-redeem-banner__dismiss:hover[b-vrnp21if21] { color: #475569; background: #e2e8f0; }

.ct-redeem-banner__status[b-vrnp21if21] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
}

.ct-redeem-banner__status--success[b-vrnp21if21] {
    color: #059669;
}

.ct-redeem-banner__status--success i[b-vrnp21if21] { font-size: 1rem; }

.ct-redeem-banner__status--error[b-vrnp21if21] {
    color: #dc2626;
}

.ct-redeem-banner__status--error i[b-vrnp21if21] { font-size: 1rem; }

/* ── Stats pills ── */
.ct-stats[b-vrnp21if21] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.ct-stat[b-vrnp21if21] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.875rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}

.ct-stat:hover[b-vrnp21if21] { border-color: #cbd5e1; background: #f8fafc; }
.ct-stat--active[b-vrnp21if21] { border-color: #2A9EA6; background: #edf7f8; color: #1A7580; }
.ct-stat__num[b-vrnp21if21] { font-weight: 700; color: #0f172a; }
.ct-stat__num--green[b-vrnp21if21] { color: #059669; }
.ct-stat__num--amber[b-vrnp21if21] { color: #d97706; }
.ct-stat__num--indigo[b-vrnp21if21] { color: #2A9EA6; }

/* ── Results info ── */
.ct-results-info[b-vrnp21if21] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: #64748b;
}

.ct-clear-btn[b-vrnp21if21] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}

.ct-clear-btn:hover[b-vrnp21if21] { background: #f1f5f9; color: #334155; }

/* ── Section grouping ── */
.ct-section[b-vrnp21if21] {
    margin-bottom: 3rem;
}

.ct-section__header[b-vrnp21if21] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.ct-section__title[b-vrnp21if21] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.015em;
}

.ct-section__count[b-vrnp21if21] {
    font-size: 0.8125rem;
    color: #94a3b8;
    font-weight: 500;
}

/* ── Vendor subcategory ── */
.ct-vendor-sub[b-vrnp21if21] { margin-bottom: 1.25rem; }
.ct-vendor-sub:last-child[b-vrnp21if21] { margin-bottom: 0; }
.ct-vendor-sub__header[b-vrnp21if21] { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; padding-left: 0.125rem; }
.ct-vendor-sub__name[b-vrnp21if21] { font-size: 0.875rem; font-weight: 600; color: #64748b; white-space: nowrap; letter-spacing: 0.02em; }
.ct-vendor-sub__line[b-vrnp21if21] { flex: 1; height: 1px; background: #e2e8f0; }

/* ── Grid ── */
.ct-grid[b-vrnp21if21] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1100px) { .ct-grid[b-vrnp21if21] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .ct-grid[b-vrnp21if21] { grid-template-columns: 1fr; } }

/* ── Exam Card ── */
.ct-card[b-vrnp21if21] {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ct-card:hover[b-vrnp21if21] {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* Card header */
.ct-card__header[b-vrnp21if21] {
    padding: 1.5rem 1.25rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 90px;
}

.ct-card__header-left[b-vrnp21if21] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.ct-card__header-right[b-vrnp21if21] {
    flex-shrink: 0;
}

.ct-card__logo[b-vrnp21if21] {
    width: 64px;
    height: 64px;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.ct-card__logo img[b-vrnp21if21] {
    width: 46px;
    height: 46px;
    object-fit: contain;
}

.ct-card__logo-fb[b-vrnp21if21] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.375rem;
    color: #334155;
    background: #fff;
}

.ct-card__vendor[b-vrnp21if21] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.97);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Badges */
.ct-badge[b-vrnp21if21] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    white-space: nowrap;
}

.ct-badge--unlocked[b-vrnp21if21] {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
}

.ct-badge--locked[b-vrnp21if21] {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
}

.ct-badge--coming-soon[b-vrnp21if21] {
    background: #6366f1;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.35);
}

.ct-card--coming-soon .ct-card__title[b-vrnp21if21],
.ct-card--coming-soon .ct-card__desc[b-vrnp21if21] {
    opacity: 0.85;
}

.ct-action--coming-soon[b-vrnp21if21] {
    width: 100%;
    background: #94a3b8;
    color: #ffffff;
    cursor: not-allowed;
    border: none;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Card body */
.ct-card__body[b-vrnp21if21] {
    padding: 1.25rem 1.25rem 0.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ct-card__tags[b-vrnp21if21] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.ct-tag[b-vrnp21if21] {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #64748b;
    background: #f1f5f9;
    padding: 0.175rem 0.5rem;
    border-radius: 5px;
}

.ct-tag--version[b-vrnp21if21] {
    background: linear-gradient(135deg, #2A9EA6 0%, #26808C 100%);
    color: #ffffff;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    box-shadow: 0 2px 6px rgba(42, 158, 166, 0.28);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.01em;
}

.ct-tag--version i[b-vrnp21if21] {
    font-size: 0.75rem;
}

.ct-tag--tips[b-vrnp21if21] {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border: 1px solid #FCD34D;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.01em;
}

.ct-tag--tips i[b-vrnp21if21] {
    font-size: 0.75rem;
    color: #B45309;
}

.ct-card__title[b-vrnp21if21] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.375rem;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.ct-card__desc[b-vrnp21if21] {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ct-card__meta[b-vrnp21if21] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: auto;
}

.ct-card__meta span[b-vrnp21if21] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ct-card__meta i[b-vrnp21if21] {
    font-size: 0.6875rem;
    opacity: 0.7;
}

.ct-card__study[b-vrnp21if21] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #059669;
    background: #ecfdf5;
    padding: 0.25rem 0.5rem;
    border-radius: 5px;
    border: 1px solid #d1fae5;
    margin-top: 0.625rem;
    width: fit-content;
}

/* Card footer */
.ct-card__footer[b-vrnp21if21] {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.ct-card__actions[b-vrnp21if21] {
    display: flex;
    gap: 0.5rem;
}

.ct-card__locked-footer[b-vrnp21if21] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ct-card__price[b-vrnp21if21] {
    font-size: 1.375rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

/* Action buttons */
.ct-action[b-vrnp21if21] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    white-space: nowrap;
}

.ct-action:hover[b-vrnp21if21] { opacity: 0.88; transform: translateY(-1px); }

.ct-action--start[b-vrnp21if21] { background: #059669; color: #fff; flex: 1; }
.ct-action--study[b-vrnp21if21] { background: #edf7f8; color: #26808C; flex: 1; }
.ct-action--study:hover[b-vrnp21if21] { background: #e0e7ff; }
.ct-action--try[b-vrnp21if21] { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.ct-action--try:hover[b-vrnp21if21] { background: #f1f5f9; }
.ct-action--buy[b-vrnp21if21] { color: #fff; }
.ct-action--versions[b-vrnp21if21] {
    background: #1e3a8a;
    color: #fff;
    border: none;
    width: 100%;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    box-shadow: 0 2px 6px rgba(30, 58, 138, 0.28);
}
.ct-action--versions:hover[b-vrnp21if21] { background: #1e40af; box-shadow: 0 4px 12px rgba(30, 58, 138, 0.38); }

/* ── Pagination ── */
.ct-pagination[b-vrnp21if21] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.375rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.ct-page-btn[b-vrnp21if21] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.875rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 40px;
    justify-content: center;
}

.ct-page-btn:hover:not(:disabled)[b-vrnp21if21] { background: #f8fafc; border-color: #cbd5e1; }
.ct-page-btn:disabled[b-vrnp21if21] { opacity: 0.4; cursor: not-allowed; }
.ct-page-btn--active[b-vrnp21if21] { background: #2A9EA6; color: #fff; border-color: #2A9EA6; }

/* ── Empty/Loading ── */
.ct-loading[b-vrnp21if21] {
    text-align: center;
    padding: 5rem 1rem;
}

.ct-loading p[b-vrnp21if21] {
    margin-top: 1rem;
    color: #94a3b8;
}

.ct-empty[b-vrnp21if21] {
    text-align: center;
    padding: 4rem 1rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.ct-empty i[b-vrnp21if21] {
    font-size: 3rem;
    color: #cbd5e1;
}

.ct-empty h3[b-vrnp21if21] {
    margin: 0.75rem 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #334155;
}

.ct-empty p[b-vrnp21if21] {
    color: #94a3b8;
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}

.ct-btn[b-vrnp21if21] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.ct-btn--outline[b-vrnp21if21] {
    background: #fff;
    color: #475569;
    border: 1.5px solid #e2e8f0;
}

.ct-btn--outline:hover[b-vrnp21if21] { background: #f8fafc; }

/* ── Mobile ── */
@media (max-width: 640px) {
    .ct-page[b-vrnp21if21] { padding: 1rem; }
    .ct-hero[b-vrnp21if21] { padding: 1.5rem 0 1rem; }
    .ct-hero__title[b-vrnp21if21] { font-size: 1.75rem; }
    .ct-controls[b-vrnp21if21] { gap: 0.5rem; }
    .ct-search[b-vrnp21if21] { min-width: 100%; }
    .ct-select[b-vrnp21if21] { min-width: 100%; }
    .ct-redeem-btn[b-vrnp21if21] { width: 100%; justify-content: center; }
    .ct-redeem-banner__input[b-vrnp21if21] { max-width: 100%; }
    .ct-section__title[b-vrnp21if21] { font-size: 1.125rem; }

    .ct-card__header[b-vrnp21if21] { min-height: 72px; padding: 1rem; }
    .ct-card__body[b-vrnp21if21] { padding: 1rem; }
    .ct-card__footer[b-vrnp21if21] { padding: 0.875rem 1rem; }

    .ct-card__locked-footer[b-vrnp21if21] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .ct-card__actions[b-vrnp21if21] {
        width: 100%;
    }

    .ct-action[b-vrnp21if21] { flex: 1; justify-content: center; }
}

/* ── Upgrade Versions Modal ── */
.ct-modal-overlay[b-vrnp21if21] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

.ct-modal[b-vrnp21if21] {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
}

.ct-modal--lg[b-vrnp21if21] {
    max-width: 640px;
}

.ct-modal__header[b-vrnp21if21] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-radius: 20px 20px 0 0;
}

.ct-modal__header--upgrade[b-vrnp21if21] {
    background: linear-gradient(135deg, #f59e0b 0%, #2A9EA6 100%);
    color: #fff;
}

.ct-modal__title[b-vrnp21if21] {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
}

.ct-modal__close[b-vrnp21if21] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.ct-modal__close:hover[b-vrnp21if21] {
    background: rgba(255, 255, 255, 0.35);
}

.ct-modal__body[b-vrnp21if21] {
    padding: 1.5rem;
}

.ct-modal__info-banner[b-vrnp21if21] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.ct-modal__info-banner i[b-vrnp21if21] {
    color: #3b82f6;
    font-size: 1.125rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.ct-modal__info-banner p[b-vrnp21if21] {
    margin: 0;
    font-size: 0.9rem;
    color: #1e40af;
    line-height: 1.5;
}

.ct-version-grid[b-vrnp21if21] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.ct-version-card[b-vrnp21if21] {
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    position: relative;
}

.ct-version-card--unlocked[b-vrnp21if21] {
    border: 2px solid #10b981;
    background: #f0fdf4;
}

.ct-version-card--locked[b-vrnp21if21] {
    border: 2px solid #e2e8f0;
    background: #fff;
}

.ct-version-card__badge[b-vrnp21if21] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    position: absolute;
    top: 8px;
    right: 8px;
}

.ct-version-card__badge--unlocked[b-vrnp21if21] {
    background: #d1fae5;
    color: #059669;
}

.ct-version-card__badge--locked[b-vrnp21if21] {
    background: #e2e8f0;
    color: #475569;
}

.ct-version-card__icon[b-vrnp21if21] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.ct-version-card--unlocked .ct-version-card__icon[b-vrnp21if21] {
    color: #10b981;
}

.ct-version-card--locked .ct-version-card__icon[b-vrnp21if21] {
    color: #cbd5e1;
}

.ct-version-card__name[b-vrnp21if21] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem;
}

.ct-version-card__count[b-vrnp21if21] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
}

.ct-modal__cta[b-vrnp21if21] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.ct-modal__btn[b-vrnp21if21] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.9375rem;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

.ct-modal__btn:hover[b-vrnp21if21] {
    opacity: 0.9;
    transform: translateY(-1px);
}

.ct-modal__btn--primary[b-vrnp21if21] {
    background: #2A9EA6;
    color: #fff;
}

.ct-modal__btn--secondary[b-vrnp21if21] {
    background: #f8fafc;
    color: #334155;
    border: 1.5px solid #e2e8f0;
}

.ct-modal__tip[b-vrnp21if21] {
    text-align: center;
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
}

@media (max-width: 480px) {
    .ct-modal__cta[b-vrnp21if21] {
        flex-direction: column;
    }
    .ct-version-grid[b-vrnp21if21] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Pages/Checkout/ExamCheckout.razor.rz.scp.css */
/* ========================================
   EXAM CHECKOUT - Premium Clean Design
   Matches landing page aesthetic
   ======================================== */

/* Page Container */
.checkout-page[b-e5qadz4m2j] {
    min-height: 100vh;
    background: #F8FAFC;
    position: relative;
    overflow-x: hidden;
}

.checkout-bg[b-e5qadz4m2j] {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(42, 158, 166, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(124, 58, 237, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 60% 80%, rgba(16, 185, 129, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Loading / Error States */
.loading-container[b-e5qadz4m2j],
.error-container[b-e5qadz4m2j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #334155;
}

.loading-container p[b-e5qadz4m2j] {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #64748B;
}

.error-icon[b-e5qadz4m2j] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FEF2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.error-icon i[b-e5qadz4m2j] {
    font-size: 2rem;
    color: #EF4444;
}

.error-container h2[b-e5qadz4m2j] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.5rem;
}

.error-container p[b-e5qadz4m2j] {
    color: #64748B;
    margin-bottom: 1.5rem;
}

.btn-back-home[b-e5qadz4m2j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #2A9EA6;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back-home:hover[b-e5qadz4m2j] {
    background: #26808C;
}

/* Top Navigation Bar */
.checkout-nav[b-e5qadz4m2j] {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.checkout-nav-inner[b-e5qadz4m2j] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-back[b-e5qadz4m2j] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748B;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.2s;
    text-decoration: none;
}

.nav-back:hover[b-e5qadz4m2j] {
    color: #2A9EA6;
    background: rgba(42, 158, 166, 0.06);
}

.nav-brand[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-name[b-e5qadz4m2j] {
    font-size: 1.063rem;
    font-weight: 800;
    color: #2A9EA6;
    letter-spacing: -0.02em;
}

.nav-brand span:last-child[b-e5qadz4m2j] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #94A3B8;
    padding-left: 0.75rem;
    border-left: 1px solid #E2E8F0;
}

.nav-secure[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #10B981;
    font-size: 0.813rem;
    font-weight: 600;
}

.nav-secure i[b-e5qadz4m2j] {
    font-size: 0.875rem;
}

/* Main Content Grid */
.checkout-content[b-e5qadz4m2j] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* ========================================
   ORDER SECTION (Left Side)
   ======================================== */
.order-section[b-e5qadz4m2j] {
    position: sticky;
    top: 80px;
}

/* Order Card */
.order-card[b-e5qadz4m2j] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 6px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.order-card-header[b-e5qadz4m2j] {
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-badge[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.header-badge i[b-e5qadz4m2j] {
    font-size: 1.125rem;
}

.header-discount[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    color: white;
    font-size: 0.813rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

/* Order Card Body */
.order-card-body[b-e5qadz4m2j] {
    padding: 2rem;
}

.product-title[b-e5qadz4m2j] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.product-meta[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748B;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.75rem;
}

.product-meta i[b-e5qadz4m2j] {
    color: #94A3B8;
}

/* Features Grid */
.features-grid[b-e5qadz4m2j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.feature-card[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid #F1F5F9;
    transition: all 0.2s;
}

.feature-card:hover[b-e5qadz4m2j] {
    border-color: #E2E8F0;
    background: #F1F5F9;
}

.feature-icon[b-e5qadz4m2j] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EDF7F8, #E0E7FF);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon i[b-e5qadz4m2j] {
    font-size: 1.125rem;
    color: #2A9EA6;
}

.feature-info[b-e5qadz4m2j] {
    display: flex;
    flex-direction: column;
}

.feature-value[b-e5qadz4m2j] {
    font-size: 1rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
}

.feature-label[b-e5qadz4m2j] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

/* Versions feature card - made more prominent */
.feature-card--versions[b-e5qadz4m2j] {
    background: linear-gradient(135deg, #2A9EA6 0%, #26808C 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.25);
    grid-column: 1 / -1;
}

.feature-card--versions:hover[b-e5qadz4m2j] {
    background: linear-gradient(135deg, #2A9EA6 0%, #1F6E78 100%);
    border-color: transparent;
}

.feature-card--versions .feature-icon--versions[b-e5qadz4m2j] {
    background: rgba(255, 255, 255, 0.2);
    width: 48px;
    height: 48px;
}

.feature-card--versions .feature-icon--versions i[b-e5qadz4m2j] {
    color: #ffffff;
    font-size: 1.5rem;
}

.feature-card--versions .feature-value[b-e5qadz4m2j] {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 900;
}

.feature-card--versions .feature-label[b-e5qadz4m2j] {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-size: 0.8125rem;
}

/* Versions List Section */
.versions-section[b-e5qadz4m2j] {
    margin-bottom: 1.25rem;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FAFBFC;
    overflow: hidden;
}

.versions-section__header[b-e5qadz4m2j] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #EDF7F8 0%, #F0F9FA 100%);
    border-bottom: 1px solid #E2E8F0;
}

.versions-section__title[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.005em;
}

.versions-section__title i[b-e5qadz4m2j] {
    color: #2A9EA6;
    font-size: 1rem;
}

.versions-section__sub[b-e5qadz4m2j] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
    padding-left: 1.5rem;
}

.versions-list[b-e5qadz4m2j] {
    display: flex;
    flex-direction: column;
}

.version-row[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.15s;
}

.version-row:last-child[b-e5qadz4m2j] {
    border-bottom: none;
}

.version-row:hover[b-e5qadz4m2j] {
    background: #F8FAFC;
}

.version-row__main[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    flex: 1;
}

.version-row__name[b-e5qadz4m2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: linear-gradient(135deg, #2A9EA6 0%, #26808C 100%);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.version-row__title[b-e5qadz4m2j] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1E293B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.version-row__meta[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.version-row__tips[b-e5qadz4m2j] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 100px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border: 1px solid #FCD34D;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.version-row__tips i[b-e5qadz4m2j] {
    color: #B45309;
    font-size: 0.6875rem;
}

.version-row__count[b-e5qadz4m2j] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    white-space: nowrap;
}

.version-row__count i[b-e5qadz4m2j] {
    color: #94A3B8;
    font-size: 0.8125rem;
}

@media (max-width: 480px) {
    .version-row[b-e5qadz4m2j] {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }
    .version-row__title[b-e5qadz4m2j] {
        white-space: normal;
        word-break: break-word;
    }
}

/* Included List */
.included-list[b-e5qadz4m2j] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0;
}

.included-item[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #475569;
    font-weight: 500;
}

.included-item i[b-e5qadz4m2j] {
    color: #10B981;
    font-size: 1rem;
    font-weight: 900;
}

/* Price Breakdown */
.price-breakdown[b-e5qadz4m2j] {
    padding: 1.5rem 2rem;
    background: #FAFBFC;
    border-top: 1px solid #F1F5F9;
}

.price-line[b-e5qadz4m2j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.938rem;
    color: #475569;
    font-weight: 500;
}

.price-original[b-e5qadz4m2j] {
    text-decoration: line-through;
    color: #94A3B8;
}

.price-discount[b-e5qadz4m2j] {
    color: #10B981;
    font-weight: 600;
}

.price-coupon[b-e5qadz4m2j] {
    color: #7A82AB;
    font-weight: 600;
}

.price-total[b-e5qadz4m2j] {
    border-top: 2px solid #E2E8F0;
    margin-top: 0.625rem;
    padding-top: 0.875rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F172A;
}

.price-total span:last-child[b-e5qadz4m2j] {
    color: #2A9EA6;
    font-size: 1.5rem;
}

.price-skeleton[b-e5qadz4m2j] {
    display: inline-block;
    width: 60px;
    height: 18px;
    background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-pulse-b-e5qadz4m2j 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-e5qadz4m2j {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Trust Signals */
.trust-row[b-e5qadz4m2j] {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
    justify-content: center;
}

.trust-badge[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
}

.trust-badge i[b-e5qadz4m2j] {
    font-size: 0.875rem;
    color: #10B981;
}

/* ========================================
   PAYMENT SECTION (Right Side)
   ======================================== */
.payment-section[b-e5qadz4m2j] {
    position: sticky;
    top: 80px;
}

.payment-card[b-e5qadz4m2j] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.payment-header[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.payment-title[b-e5qadz4m2j] {
    font-size: 1.375rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
}

.payment-secure-badge[b-e5qadz4m2j] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ECFDF5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-secure-badge i[b-e5qadz4m2j] {
    color: #10B981;
    font-size: 1.125rem;
}

/* Alert */
.alert-error[b-e5qadz4m2j] {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.alert-error i[b-e5qadz4m2j] {
    color: #EF4444;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Coupon Section */
.coupon-section[b-e5qadz4m2j] {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #F1F5F9;
}

.coupon-label[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.625rem;
}

.coupon-label i[b-e5qadz4m2j] {
    color: #94A3B8;
    font-size: 1rem;
}

.coupon-input-group[b-e5qadz4m2j] {
    display: flex;
    gap: 0.5rem;
}

.coupon-input[b-e5qadz4m2j] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.938rem;
    color: #0F172A;
    background: #F8FAFC;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}

.coupon-input:focus[b-e5qadz4m2j] {
    outline: none;
    border-color: #2A9EA6;
    background: white;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
}

.coupon-input[b-e5qadz4m2j]::placeholder {
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
    color: #94A3B8;
}

.coupon-btn[b-e5qadz4m2j] {
    padding: 0.75rem 1.25rem;
    background: #2A9EA6;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.coupon-btn:hover:not(:disabled)[b-e5qadz4m2j] {
    background: #26808C;
}

.coupon-btn:disabled[b-e5qadz4m2j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.coupon-applied[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F0FDF4;
    border: 1.5px solid #86EFAC;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.coupon-applied-info[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #166534;
    font-weight: 700;
    font-size: 0.875rem;
}

.coupon-applied-info i[b-e5qadz4m2j] {
    color: #22C55E;
    font-size: 1.125rem;
}

.coupon-remove[b-e5qadz4m2j] {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.coupon-remove:hover[b-e5qadz4m2j] {
    background: #FEE2E2;
    color: #EF4444;
}

.coupon-error[b-e5qadz4m2j] {
    margin-top: 0.5rem;
    color: #EF4444;
    font-size: 0.813rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Form Fields */
.form-field[b-e5qadz4m2j] {
    margin-bottom: 1.25rem;
}

.form-field label[b-e5qadz4m2j] {
    display: block;
    font-size: 0.813rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.input-with-icon[b-e5qadz4m2j] {
    position: relative;
}

.input-with-icon i[b-e5qadz4m2j] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 1rem;
    z-index: 1;
    pointer-events: none;
}

.input-with-icon input[b-e5qadz4m2j],
.input-with-icon select[b-e5qadz4m2j] {
    width: 100%;
    padding: 0.813rem 1rem 0.813rem 2.75rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.938rem;
    color: #0F172A;
    background: #F8FAFC;
    transition: all 0.2s;
    -webkit-appearance: none;
}

.input-with-icon input:focus[b-e5qadz4m2j],
.input-with-icon select:focus[b-e5qadz4m2j] {
    outline: none;
    border-color: #2A9EA6;
    background: white;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
}

.input-with-icon input[readonly][b-e5qadz4m2j] {
    background: #F1F5F9;
    color: #64748B;
    cursor: default;
}

.input-with-icon input[b-e5qadz4m2j]::placeholder {
    color: #CBD5E1;
}


/* Stripe Payment Element */
#payment-element[b-e5qadz4m2j] {
    padding: 0.875rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    min-height: 100px;
    transition: all 0.2s;
}

#payment-element:focus-within[b-e5qadz4m2j] {
    border-color: #2A9EA6;
    background: white;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
}

/* Pay Button */
.btn-pay[b-e5qadz4m2j] {
    width: 100%;
    padding: 1rem;
    font-size: 1.063rem;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 14px rgba(42, 158, 166, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.01em;
}

.btn-pay:hover:not(:disabled)[b-e5qadz4m2j] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(42, 158, 166, 0.4);
}

.btn-pay:active:not(:disabled)[b-e5qadz4m2j] {
    transform: translateY(0);
}

.btn-pay:disabled[b-e5qadz4m2j] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* PayPal secondary action - on-brand yellow button, full width but smaller height than primary Stripe CTA */
.paypal-alt[b-e5qadz4m2j] {
    margin-top: 1rem;
}

.paypal-alt__divider[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    text-align: center;
    color: #94A3B8;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.875rem;
}

.paypal-alt__divider[b-e5qadz4m2j]::before,
.paypal-alt__divider[b-e5qadz4m2j]::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #E2E8F0;
}

.paypal-alt__divider span[b-e5qadz4m2j] {
    padding: 0 0.75rem;
}

.btn-paypal[b-e5qadz4m2j] {
    width: 100%;
    padding: 0.8125rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 12px;
    background: #FFC439; /* PayPal brand yellow */
    color: #003087;
    border: 1px solid #FFB800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn-paypal:hover:not(:disabled)[b-e5qadz4m2j] {
    background: #F0B72B;
}

.btn-paypal:active:not(:disabled)[b-e5qadz4m2j] {
    background: #E0A82B;
    transform: translateY(1px);
}

.btn-paypal:disabled[b-e5qadz4m2j] {
    background: #E5E7EB;
    border-color: #D1D5DB;
    color: #94A3B8;
    cursor: not-allowed;
    opacity: 1;
}

.btn-paypal:disabled .btn-paypal__icon[b-e5qadz4m2j],
.btn-paypal:disabled .btn-paypal__pay[b-e5qadz4m2j],
.btn-paypal:disabled .btn-paypal__pal[b-e5qadz4m2j] {
    color: #94A3B8;
}

.paypal-alt__hint[b-e5qadz4m2j] {
    margin-top: 0.5rem;
    text-align: center;
    color: #94A3B8;
    font-size: 0.8125rem;
    font-style: italic;
}

.btn-paypal__icon[b-e5qadz4m2j] {
    font-size: 1.25rem;
    color: #003087;
}

.btn-paypal__label[b-e5qadz4m2j] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-style: italic;
    letter-spacing: -0.005em;
}

.btn-paypal__pay[b-e5qadz4m2j] {
    font-weight: 800;
    color: #253B80;
}

.btn-paypal__pal[b-e5qadz4m2j] {
    font-weight: 800;
    color: #179BD7;
}

.paypal-alt__error[b-e5qadz4m2j] {
    margin-top: 0.5rem;
    color: #DC2626;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Payment Footer */
.payment-footer[b-e5qadz4m2j] {
    margin-top: 1.5rem;
    text-align: center;
}

.footer-secure[b-e5qadz4m2j] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #64748B;
    font-size: 0.813rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.footer-secure i[b-e5qadz4m2j] {
    color: #10B981;
    font-size: 0.938rem;
}

.footer-powered[b-e5qadz4m2j] {
    color: #CBD5E1;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.stripe-text[b-e5qadz4m2j] {
    font-weight: 900;
    font-size: 0.938rem;
    color: #94A3B8;
    letter-spacing: -0.02em;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    .checkout-content[b-e5qadz4m2j] {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }

    .order-section[b-e5qadz4m2j],
    .payment-section[b-e5qadz4m2j] {
        position: relative;
        top: 0;
    }
}

@media (max-width: 767px) {
    .checkout-nav-inner[b-e5qadz4m2j] {
        padding: 0 1rem;
    }

    .nav-secure[b-e5qadz4m2j] {
        display: none;
    }

    .checkout-content[b-e5qadz4m2j] {
        padding: 1.5rem 1rem;
    }

    .order-card-body[b-e5qadz4m2j] {
        padding: 1.5rem;
    }

    .features-grid[b-e5qadz4m2j] {
        grid-template-columns: 1fr;
    }

    .price-breakdown[b-e5qadz4m2j] {
        padding: 1.25rem 1.5rem;
    }

    .payment-card[b-e5qadz4m2j] {
        padding: 1.75rem;
        border-radius: 16px;
    }

    .product-title[b-e5qadz4m2j] {
        font-size: 1.25rem;
    }
}
/* /Pages/Checkout/FreeCheckout.razor.rz.scp.css */
/* ========================================
   FREE CHECKOUT - mirrors ExamCheckout cart styles,
   replaces Stripe panel with a sign-up funnel + modal
   ======================================== */

/* ---- Page shell (mirrors /checkout/exam/) ---- */
.checkout-page[b-rn8kibosu8] {
    min-height: 100vh;
    background: #F8FAFC;
    position: relative;
    overflow-x: hidden;
}

.checkout-bg[b-rn8kibosu8] {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(42, 158, 166, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(124, 58, 237, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 60% 80%, rgba(16, 185, 129, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.loading-container[b-rn8kibosu8],
.error-container[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #334155;
}

.loading-container p[b-rn8kibosu8] {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #64748B;
}

.error-icon[b-rn8kibosu8] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FEF2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.error-icon i[b-rn8kibosu8] {
    font-size: 2rem;
    color: #EF4444;
}

.error-container h2[b-rn8kibosu8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.5rem;
}

.error-container p[b-rn8kibosu8] {
    color: #64748B;
    margin-bottom: 1.5rem;
}

.btn-back-home[b-rn8kibosu8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #2A9EA6;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-back-home:hover[b-rn8kibosu8] {
    background: #26808C;
}

.checkout-nav[b-rn8kibosu8] {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.checkout-nav-inner[b-rn8kibosu8] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-back[b-rn8kibosu8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748B;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.2s;
    text-decoration: none;
}

.nav-back:hover[b-rn8kibosu8] {
    color: #2A9EA6;
    background: rgba(42, 158, 166, 0.06);
}

.nav-brand[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-name[b-rn8kibosu8] {
    font-size: 1.063rem;
    font-weight: 800;
    color: #2A9EA6;
    letter-spacing: -0.02em;
}

.nav-brand span:last-child[b-rn8kibosu8] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #94A3B8;
    padding-left: 0.75rem;
    border-left: 1px solid #E2E8F0;
}

.nav-secure[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #10B981;
    font-size: 0.813rem;
    font-weight: 600;
}

.nav-secure i[b-rn8kibosu8] {
    font-size: 0.875rem;
}

.checkout-content[b-rn8kibosu8] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

.order-section[b-rn8kibosu8] {
    position: sticky;
    top: 80px;
}

.order-card[b-rn8kibosu8] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 6px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.order-card-header[b-rn8kibosu8] {
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-badge[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.header-badge i[b-rn8kibosu8] {
    font-size: 1.125rem;
}

.order-card-body[b-rn8kibosu8] {
    padding: 2rem;
}

.product-title[b-rn8kibosu8] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.product-meta[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748B;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.75rem;
}

.product-meta i[b-rn8kibosu8] {
    color: #94A3B8;
}

.features-grid[b-rn8kibosu8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.feature-card[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid #F1F5F9;
    transition: all 0.2s;
}

.feature-card:hover[b-rn8kibosu8] {
    border-color: #E2E8F0;
    background: #F1F5F9;
}

.feature-icon[b-rn8kibosu8] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EDF7F8, #E0E7FF);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon i[b-rn8kibosu8] {
    font-size: 1.125rem;
    color: #2A9EA6;
}

.feature-info[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
}

.feature-value[b-rn8kibosu8] {
    font-size: 1rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
}

.feature-label[b-rn8kibosu8] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

.feature-card--versions[b-rn8kibosu8] {
    background: linear-gradient(135deg, #2A9EA6 0%, #26808C 100%);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.25);
    grid-column: 1 / -1;
}

.feature-card--versions:hover[b-rn8kibosu8] {
    background: linear-gradient(135deg, #2A9EA6 0%, #1F6E78 100%);
    border-color: transparent;
}

.feature-card--versions .feature-icon--versions[b-rn8kibosu8] {
    background: rgba(255, 255, 255, 0.2);
    width: 48px;
    height: 48px;
}

.feature-card--versions .feature-icon--versions i[b-rn8kibosu8] {
    color: #ffffff;
    font-size: 1.5rem;
}

.feature-card--versions .feature-value[b-rn8kibosu8] {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 900;
}

.feature-card--versions .feature-label[b-rn8kibosu8] {
    color: rgba(255, 255, 255, 0.92);
    font-weight: 600;
    font-size: 0.8125rem;
}

.versions-section[b-rn8kibosu8] {
    margin-bottom: 1.25rem;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    background: #FAFBFC;
    overflow: hidden;
}

.versions-section__header[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, #EDF7F8 0%, #F0F9FA 100%);
    border-bottom: 1px solid #E2E8F0;
}

.versions-section__title[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.005em;
}

.versions-section__title i[b-rn8kibosu8] {
    color: #2A9EA6;
    font-size: 1rem;
}

.versions-section__sub[b-rn8kibosu8] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
    padding-left: 1.5rem;
}

.versions-list[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
}

.version-row[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #F1F5F9;
    transition: background 0.15s;
}

.version-row:last-child[b-rn8kibosu8] {
    border-bottom: none;
}

.version-row:hover[b-rn8kibosu8] {
    background: #F8FAFC;
}

.version-row__main[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    flex: 1;
}

.version-row__name[b-rn8kibosu8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: linear-gradient(135deg, #2A9EA6 0%, #26808C 100%);
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.version-row__title[b-rn8kibosu8] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1E293B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.version-row__meta[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.version-row__count[b-rn8kibosu8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
    white-space: nowrap;
}

.version-row__count i[b-rn8kibosu8] {
    color: #94A3B8;
    font-size: 0.8125rem;
}

@media (max-width: 480px) {
    .version-row[b-rn8kibosu8] {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .version-row__title[b-rn8kibosu8] {
        white-space: normal;
        word-break: break-word;
    }
}

.included-list[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.included-item[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #475569;
    font-weight: 500;
}

.included-item i[b-rn8kibosu8] {
    color: #10B981;
    font-size: 1rem;
    font-weight: 900;
}

.price-breakdown[b-rn8kibosu8] {
    padding: 1.5rem 2rem;
    background: #FAFBFC;
    border-top: 1px solid #F1F5F9;
}

.price-line[b-rn8kibosu8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.938rem;
    color: #475569;
    font-weight: 500;
}

.price-total[b-rn8kibosu8] {
    border-top: 2px solid #E2E8F0;
    margin-top: 0.625rem;
    padding-top: 0.875rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F172A;
}

.price-total span:last-child[b-rn8kibosu8] {
    color: #2A9EA6;
    font-size: 1.5rem;
}

.price-skeleton[b-rn8kibosu8] {
    display: inline-block;
    width: 60px;
    height: 18px;
    background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-pulse-b-rn8kibosu8 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-rn8kibosu8 {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.trust-row[b-rn8kibosu8] {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
    justify-content: center;
}

.trust-badge[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
}

.trust-badge i[b-rn8kibosu8] {
    font-size: 0.875rem;
    color: #10B981;
}

/* ---- Right-side sign-up panel (replaces Stripe form) ---- */
.payment-section[b-rn8kibosu8] {
    position: sticky;
    top: 80px;
}

.payment-card[b-rn8kibosu8] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.fc-signup-card[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.fc-signup-header[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fc-signup-eyebrow[b-rn8kibosu8] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    align-self: flex-start;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(42, 158, 166, 0.12), rgba(124, 58, 237, 0.10));
    color: #2A9EA6;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.fc-signup-eyebrow i[b-rn8kibosu8] {
    font-size: 0.875rem;
}

.fc-signup-title[b-rn8kibosu8] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1.25;
    margin: 0;
}

.fc-signup-sub[b-rn8kibosu8] {
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0;
}

.fc-perks[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fc-perk[b-rn8kibosu8] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
}

.fc-perk i[b-rn8kibosu8] {
    flex-shrink: 0;
    color: #2A9EA6;
    font-size: 1.125rem;
    margin-top: 2px;
}

.fc-perk div[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fc-perk strong[b-rn8kibosu8] {
    color: #0F172A;
    font-size: 0.9375rem;
    font-weight: 700;
}

.fc-perk span[b-rn8kibosu8] {
    color: #64748B;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.fc-cta-primary[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1.05rem 1.25rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    font-size: 1.063rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(42, 158, 166, 0.32);
    transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s;
    letter-spacing: -0.01em;
}

.fc-cta-primary:hover[b-rn8kibosu8] {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(42, 158, 166, 0.38);
}

.fc-cta-primary:active[b-rn8kibosu8] {
    transform: translateY(0);
}

.fc-cta-primary i[b-rn8kibosu8] {
    font-size: 1.25rem;
}

.fc-existing[b-rn8kibosu8] {
    text-align: center;
    color: #475569;
    font-size: 0.875rem;
}

.fc-existing a[b-rn8kibosu8] {
    margin-left: 4px;
    color: #2A9EA6;
    font-weight: 700;
    text-decoration: none;
}

.fc-existing a:hover[b-rn8kibosu8] {
    color: #26808C;
    text-decoration: underline;
}

.fc-mini-trust[b-rn8kibosu8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #E2E8F0;
    color: #64748B;
    font-size: 0.75rem;
    font-weight: 600;
}

.fc-mini-trust span[b-rn8kibosu8] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.fc-mini-trust i[b-rn8kibosu8] {
    color: #10B981;
    font-size: 0.875rem;
}

/* ---- Sign-up modal ---- */
.fc-modal-backdrop[b-rn8kibosu8] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1080;
    animation: fc-fade-in-b-rn8kibosu8 0.2s ease;
}

.fc-modal[b-rn8kibosu8] {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: white;
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    animation: fc-slide-up-b-rn8kibosu8 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

@keyframes fc-fade-in-b-rn8kibosu8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.fc-modal-close[b-rn8kibosu8] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 50%;
    background: #F1F5F9;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.fc-modal-close:hover[b-rn8kibosu8] {
    background: #E2E8F0;
    color: #0F172A;
}

.fc-modal-head[b-rn8kibosu8] {
    text-align: center;
    margin-bottom: 1.25rem;
}

.fc-modal-icon[b-rn8kibosu8] {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin: 0 auto 0.75rem;
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 6px 16px rgba(42, 158, 166, 0.3);
}

.fc-modal-head h3[b-rn8kibosu8] {
    margin: 0 0 0.25rem;
    font-size: 1.375rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
}

.fc-modal-head p[b-rn8kibosu8] {
    margin: 0;
    color: #64748B;
    font-size: 0.9375rem;
}

.fc-modal-head strong[b-rn8kibosu8] {
    color: #0F172A;
}

.fc-modal-error[b-rn8kibosu8] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 0.875rem;
    margin-bottom: 1rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
}

.fc-modal-error i[b-rn8kibosu8] {
    color: #EF4444;
    flex-shrink: 0;
    margin-top: 2px;
}

.fc-google-wrap[b-rn8kibosu8] {
    display: flex;
    justify-content: center;
    margin-bottom: 0.875rem;
}

.fc-google-btn[b-rn8kibosu8] {
    width: 100%;
    min-height: 44px;
    display: flex;
    justify-content: center;
}

.fc-divider[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.75rem 0 1rem;
    color: #94A3B8;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fc-divider[b-rn8kibosu8]::before,
.fc-divider[b-rn8kibosu8]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #E2E8F0;
}

.fc-form[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.fc-field[b-rn8kibosu8] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.fc-field label[b-rn8kibosu8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #334155;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.fc-field__hint[b-rn8kibosu8] {
    text-transform: none;
    font-weight: 500;
    color: #94A3B8;
    font-size: 0.6875rem;
    letter-spacing: 0;
}

.fc-field input[b-rn8kibosu8] {
    width: 100%;
    padding: 0.813rem 1rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.938rem;
    color: #0F172A;
    background: #F8FAFC;
    transition: all 0.2s;
    -webkit-appearance: none;
}

.fc-field input:focus[b-rn8kibosu8] {
    outline: none;
    border-color: #2A9EA6;
    background: white;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
}

.fc-field input[b-rn8kibosu8]::placeholder {
    color: #CBD5E1;
}

.fc-modal-submit[b-rn8kibosu8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.95rem 1rem;
    margin-top: 0.25rem;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #2A9EA6 0%, #26808C 100%);
    color: white;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(42, 158, 166, 0.3);
    transition: transform 0.18s, box-shadow 0.18s;
    letter-spacing: -0.005em;
}

.fc-modal-submit:hover:not(:disabled)[b-rn8kibosu8] {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(42, 158, 166, 0.38);
}

.fc-modal-submit:disabled[b-rn8kibosu8] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.fc-modal-fineprint[b-rn8kibosu8] {
    margin: 0.875rem 0 0;
    font-size: 0.75rem;
    color: #94A3B8;
    text-align: center;
    line-height: 1.5;
}

.fc-modal-fineprint a[b-rn8kibosu8] {
    color: #2A9EA6;
    text-decoration: underline;
}

.fc-modal-foot[b-rn8kibosu8] {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid #F1F5F9;
    text-align: center;
    color: #475569;
    font-size: 0.875rem;
}

.fc-modal-foot a[b-rn8kibosu8] {
    color: #2A9EA6;
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
}

.fc-modal-foot a:hover[b-rn8kibosu8] {
    text-decoration: underline;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .checkout-content[b-rn8kibosu8] {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }

    .order-section[b-rn8kibosu8],
    .payment-section[b-rn8kibosu8] {
        position: relative;
        top: 0;
    }
}

@media (max-width: 767px) {
    .checkout-nav-inner[b-rn8kibosu8] {
        padding: 0 1rem;
    }

    .nav-secure[b-rn8kibosu8] {
        display: none;
    }

    .checkout-content[b-rn8kibosu8] {
        padding: 1.5rem 1rem;
    }

    .order-card-body[b-rn8kibosu8] {
        padding: 1.5rem;
    }

    .features-grid[b-rn8kibosu8] {
        grid-template-columns: 1fr;
    }

    .price-breakdown[b-rn8kibosu8] {
        padding: 1.25rem 1.5rem;
    }

    .payment-card[b-rn8kibosu8] {
        padding: 1.75rem;
        border-radius: 16px;
    }

    .product-title[b-rn8kibosu8] {
        font-size: 1.25rem;
    }

    .fc-modal[b-rn8kibosu8] {
        padding: 1.5rem;
        border-radius: 16px;
    }

    .fc-mini-trust[b-rn8kibosu8] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}
/* /Pages/Checkout/SubscriptionCheckout.razor.rz.scp.css */
/* ========================================
   SUBSCRIPTION CHECKOUT - Premium Clean Design
   Matches landing page aesthetic
   ======================================== */

/* Page Container */
.checkout-page[b-i9fv2ramdz] {
    min-height: 100vh;
    background: #F8FAFC;
    position: relative;
    overflow-x: hidden;
}

.checkout-bg[b-i9fv2ramdz] {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(42, 158, 166, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(124, 58, 237, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 60% 80%, rgba(16, 185, 129, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Loading State */
.loading-container[b-i9fv2ramdz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #334155;
}

.loading-container p[b-i9fv2ramdz] {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #64748B;
}

/* Top Navigation Bar */
.checkout-nav[b-i9fv2ramdz] {
    position: relative;
    z-index: 10;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.checkout-nav-inner[b-i9fv2ramdz] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-back[b-i9fv2ramdz] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748B;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.2s;
    text-decoration: none;
}

.nav-back:hover[b-i9fv2ramdz] {
    color: #2A9EA6;
    background: rgba(42, 158, 166, 0.06);
}

.nav-brand[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.brand-name[b-i9fv2ramdz] {
    font-size: 1.063rem;
    font-weight: 800;
    color: #2A9EA6;
    letter-spacing: -0.02em;
}

.nav-brand span:last-child[b-i9fv2ramdz] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #94A3B8;
    padding-left: 0.75rem;
    border-left: 1px solid #E2E8F0;
}

.nav-secure[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #10B981;
    font-size: 0.813rem;
    font-weight: 600;
}

.nav-secure i[b-i9fv2ramdz] {
    font-size: 0.875rem;
}

/* Main Content Grid */
.checkout-content[b-i9fv2ramdz] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2.5rem 2rem 4rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

/* ========================================
   ORDER SECTION (Left Side)
   ======================================== */
.order-section[b-i9fv2ramdz] {
    position: sticky;
    top: 80px;
}

/* Order Card */
.order-card[b-i9fv2ramdz] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 6px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.order-card-header[b-i9fv2ramdz] {
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    padding: 1.25rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-badge[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: white;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.header-badge i[b-i9fv2ramdz] {
    font-size: 1.125rem;
}

.header-discount[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    color: white;
    font-size: 0.813rem;
    font-weight: 700;
    backdrop-filter: blur(10px);
}

/* Order Card Body */
.order-card-body[b-i9fv2ramdz] {
    padding: 2rem;
}

.product-title[b-i9fv2ramdz] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0.375rem;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

.product-tagline[b-i9fv2ramdz] {
    color: #64748B;
    font-size: 0.938rem;
    font-weight: 500;
    margin-bottom: 1.75rem;
}

/* Features Grid */
.features-grid[b-i9fv2ramdz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.feature-card[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: #F8FAFC;
    border-radius: 12px;
    border: 1px solid #F1F5F9;
    transition: all 0.2s;
}

.feature-card:hover[b-i9fv2ramdz] {
    border-color: #E2E8F0;
    background: #F1F5F9;
}

.feature-icon[b-i9fv2ramdz] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EDF7F8, #E0E7FF);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-icon i[b-i9fv2ramdz] {
    font-size: 1.125rem;
    color: #2A9EA6;
}

.feature-info[b-i9fv2ramdz] {
    display: flex;
    flex-direction: column;
}

.feature-value[b-i9fv2ramdz] {
    font-size: 1rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
}

.feature-label[b-i9fv2ramdz] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

/* Included List */
.included-list[b-i9fv2ramdz] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0;
}

.included-item[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #475569;
    font-weight: 500;
}

.included-item i[b-i9fv2ramdz] {
    color: #10B981;
    font-size: 1rem;
    font-weight: 900;
}

/* Price Breakdown */
.price-breakdown[b-i9fv2ramdz] {
    padding: 1.5rem 2rem;
    background: #FAFBFC;
    border-top: 1px solid #F1F5F9;
}

.price-line[b-i9fv2ramdz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.938rem;
    color: #475569;
    font-weight: 500;
}

.price-original[b-i9fv2ramdz] {
    text-decoration: line-through;
    color: #94A3B8;
}

.price-discount[b-i9fv2ramdz] {
    color: #10B981;
    font-weight: 600;
}

.price-coupon[b-i9fv2ramdz] {
    color: #7A82AB;
    font-weight: 600;
}

.price-total[b-i9fv2ramdz] {
    border-top: 2px solid #E2E8F0;
    margin-top: 0.625rem;
    padding-top: 0.875rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F172A;
}

.price-total span:last-child[b-i9fv2ramdz] {
    color: #2A9EA6;
    font-size: 1.5rem;
}

.price-skeleton[b-i9fv2ramdz] {
    display: inline-block;
    width: 60px;
    height: 18px;
    background: linear-gradient(90deg, #E2E8F0 25%, #F1F5F9 50%, #E2E8F0 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeleton-pulse-b-i9fv2ramdz 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse-b-i9fv2ramdz {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.savings-callout[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    color: #166534;
    font-size: 0.875rem;
    font-weight: 600;
}

.savings-callout i[b-i9fv2ramdz] {
    color: #22C55E;
    font-size: 1.125rem;
}

/* Trust Signals */
.trust-row[b-i9fv2ramdz] {
    display: flex;
    gap: 1rem;
    margin-top: 1.25rem;
    justify-content: center;
}

.trust-badge[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748B;
}

.trust-badge i[b-i9fv2ramdz] {
    font-size: 0.875rem;
    color: #10B981;
}

/* ========================================
   PAYMENT SECTION (Right Side)
   ======================================== */
.payment-section[b-i9fv2ramdz] {
    position: sticky;
    top: 80px;
}

.payment-card[b-i9fv2ramdz] {
    background: white;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.payment-header[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.payment-title[b-i9fv2ramdz] {
    font-size: 1.375rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
}

.payment-secure-badge[b-i9fv2ramdz] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ECFDF5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-secure-badge i[b-i9fv2ramdz] {
    color: #10B981;
    font-size: 1.125rem;
}

/* Alert */
.alert-error[b-i9fv2ramdz] {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
}

.alert-error i[b-i9fv2ramdz] {
    color: #EF4444;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Coupon Section */
.coupon-section[b-i9fv2ramdz] {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #F1F5F9;
}

.coupon-label[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.625rem;
}

.coupon-label i[b-i9fv2ramdz] {
    color: #94A3B8;
    font-size: 1rem;
}

.coupon-input-group[b-i9fv2ramdz] {
    display: flex;
    gap: 0.5rem;
}

.coupon-input[b-i9fv2ramdz] {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.938rem;
    color: #0F172A;
    background: #F8FAFC;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}

.coupon-input:focus[b-i9fv2ramdz] {
    outline: none;
    border-color: #2A9EA6;
    background: white;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
}

.coupon-input[b-i9fv2ramdz]::placeholder {
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
    color: #94A3B8;
}

.coupon-btn[b-i9fv2ramdz] {
    padding: 0.75rem 1.25rem;
    background: #2A9EA6;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.coupon-btn:hover:not(:disabled)[b-i9fv2ramdz] {
    background: #26808C;
}

.coupon-btn:disabled[b-i9fv2ramdz] {
    opacity: 0.5;
    cursor: not-allowed;
}

.coupon-applied[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #F0FDF4;
    border: 1.5px solid #86EFAC;
    border-radius: 10px;
    padding: 0.75rem 1rem;
}

.coupon-applied-info[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #166534;
    font-weight: 700;
    font-size: 0.875rem;
}

.coupon-applied-info i[b-i9fv2ramdz] {
    color: #22C55E;
    font-size: 1.125rem;
}

.coupon-remove[b-i9fv2ramdz] {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.coupon-remove:hover[b-i9fv2ramdz] {
    background: #FEE2E2;
    color: #EF4444;
}

.coupon-error[b-i9fv2ramdz] {
    margin-top: 0.5rem;
    color: #EF4444;
    font-size: 0.813rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Form Fields */
.form-field[b-i9fv2ramdz] {
    margin-bottom: 1.25rem;
}

.form-field label[b-i9fv2ramdz] {
    display: block;
    font-size: 0.813rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 0.5rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.input-with-icon[b-i9fv2ramdz] {
    position: relative;
}

.input-with-icon i[b-i9fv2ramdz] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 1rem;
    z-index: 1;
    pointer-events: none;
}

.input-with-icon input[b-i9fv2ramdz],
.input-with-icon select[b-i9fv2ramdz] {
    width: 100%;
    padding: 0.813rem 1rem 0.813rem 2.75rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.938rem;
    color: #0F172A;
    background: #F8FAFC;
    transition: all 0.2s;
    -webkit-appearance: none;
}

.input-with-icon input:focus[b-i9fv2ramdz],
.input-with-icon select:focus[b-i9fv2ramdz] {
    outline: none;
    border-color: #2A9EA6;
    background: white;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
}

.input-with-icon input[readonly][b-i9fv2ramdz] {
    background: #F1F5F9;
    color: #64748B;
    cursor: default;
}

.input-with-icon input[b-i9fv2ramdz]::placeholder {
    color: #CBD5E1;
}

.input-plain[b-i9fv2ramdz] {
    width: 100%;
    padding: 0.813rem 1rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.938rem;
    color: #0F172A;
    background: #F8FAFC;
    transition: all 0.2s;
}

.input-plain:focus[b-i9fv2ramdz] {
    outline: none;
    border-color: #2A9EA6;
    background: white;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
}

.input-plain[b-i9fv2ramdz]::placeholder {
    color: #CBD5E1;
}

.form-field-row[b-i9fv2ramdz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Stripe Payment Element */
#payment-element[b-i9fv2ramdz] {
    padding: 0.875rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    background: #F8FAFC;
    min-height: 100px;
    transition: all 0.2s;
}

#payment-element:focus-within[b-i9fv2ramdz] {
    border-color: #2A9EA6;
    background: white;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
}

/* Billing Notice */
.billing-notice[b-i9fv2ramdz] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    background: #EDF7F8;
    border: 1px solid #C7D2FE;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    color: #3730A3;
    font-size: 0.813rem;
    margin-bottom: 0;
    font-weight: 500;
    line-height: 1.5;
}

.billing-notice i[b-i9fv2ramdz] {
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: #2A9EA6;
}

/* Pay Button */
.btn-pay[b-i9fv2ramdz] {
    width: 100%;
    padding: 1rem;
    font-size: 1.063rem;
    font-weight: 700;
    border-radius: 12px;
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 14px rgba(42, 158, 166, 0.35);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.01em;
}

.btn-pay:hover:not(:disabled)[b-i9fv2ramdz] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(42, 158, 166, 0.4);
}

.btn-pay:active:not(:disabled)[b-i9fv2ramdz] {
    transform: translateY(0);
}

.btn-pay:disabled[b-i9fv2ramdz] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* PayPal secondary action - on-brand yellow button, full width but smaller height than primary Stripe CTA */
.paypal-alt[b-i9fv2ramdz] {
    margin-top: 1rem;
}

.paypal-alt__divider[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    text-align: center;
    color: #94A3B8;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.875rem;
}

.paypal-alt__divider[b-i9fv2ramdz]::before,
.paypal-alt__divider[b-i9fv2ramdz]::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #E2E8F0;
}

.paypal-alt__divider span[b-i9fv2ramdz] {
    padding: 0 0.75rem;
}

.btn-paypal[b-i9fv2ramdz] {
    width: 100%;
    padding: 0.8125rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 12px;
    background: #FFC439; /* PayPal brand yellow */
    color: #003087;
    border: 1px solid #FFB800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn-paypal:hover:not(:disabled)[b-i9fv2ramdz] {
    background: #F0B72B;
}

.btn-paypal:active:not(:disabled)[b-i9fv2ramdz] {
    background: #E0A82B;
    transform: translateY(1px);
}

.btn-paypal:disabled[b-i9fv2ramdz] {
    background: #E5E7EB;
    border-color: #D1D5DB;
    color: #94A3B8;
    cursor: not-allowed;
    opacity: 1;
}

.btn-paypal:disabled .btn-paypal__icon[b-i9fv2ramdz],
.btn-paypal:disabled .btn-paypal__pay[b-i9fv2ramdz],
.btn-paypal:disabled .btn-paypal__pal[b-i9fv2ramdz] {
    color: #94A3B8;
}

.paypal-alt__hint[b-i9fv2ramdz] {
    margin-top: 0.5rem;
    text-align: center;
    color: #94A3B8;
    font-size: 0.8125rem;
    font-style: italic;
}

.btn-paypal__icon[b-i9fv2ramdz] {
    font-size: 1.25rem;
    color: #003087;
}

.btn-paypal__label[b-i9fv2ramdz] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    font-style: italic;
    letter-spacing: -0.005em;
}

.btn-paypal__pay[b-i9fv2ramdz] {
    font-weight: 800;
    color: #253B80;
}

.btn-paypal__pal[b-i9fv2ramdz] {
    font-weight: 800;
    color: #179BD7;
}

.paypal-alt__error[b-i9fv2ramdz] {
    margin-top: 0.5rem;
    color: #DC2626;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Payment Footer */
.payment-footer[b-i9fv2ramdz] {
    margin-top: 1.5rem;
    text-align: center;
}

.footer-secure[b-i9fv2ramdz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #64748B;
    font-size: 0.813rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.footer-secure i[b-i9fv2ramdz] {
    color: #10B981;
    font-size: 0.938rem;
}

.footer-powered[b-i9fv2ramdz] {
    color: #CBD5E1;
    font-size: 0.75rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}

.stripe-text[b-i9fv2ramdz] {
    font-weight: 900;
    font-size: 0.938rem;
    color: #94A3B8;
    letter-spacing: -0.02em;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    .checkout-content[b-i9fv2ramdz] {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }

    .order-section[b-i9fv2ramdz],
    .payment-section[b-i9fv2ramdz] {
        position: relative;
        top: 0;
    }
}

@media (max-width: 767px) {
    .checkout-nav-inner[b-i9fv2ramdz] {
        padding: 0 1rem;
    }

    .nav-secure[b-i9fv2ramdz] {
        display: none;
    }

    .checkout-content[b-i9fv2ramdz] {
        padding: 1.5rem 1rem;
    }

    .order-card-body[b-i9fv2ramdz] {
        padding: 1.5rem;
    }

    .features-grid[b-i9fv2ramdz] {
        grid-template-columns: 1fr;
    }

    .price-breakdown[b-i9fv2ramdz] {
        padding: 1.25rem 1.5rem;
    }

    .payment-card[b-i9fv2ramdz] {
        padding: 1.75rem;
        border-radius: 16px;
    }

    .form-field-row[b-i9fv2ramdz] {
        grid-template-columns: 1fr;
    }

    .product-title[b-i9fv2ramdz] {
        font-size: 1.25rem;
    }
}
/* /Pages/ExamCoach.razor.rz.scp.css */
/* ===== Exam Coach — Premium Design ===== */

.coach-page[b-c0wke8mnw2] {
    min-height: 100vh;
    background: linear-gradient(180deg, #f8faff 0%, var(--gray-50) 100%);
}

/* ===== Loading & Generating States ===== */
.coach-loading[b-c0wke8mnw2], .coach-error[b-c0wke8mnw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    padding: var(--space-8);
}

.coach-loading-inner[b-c0wke8mnw2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    max-width: 420px;
}

.coach-loading-inner h2[b-c0wke8mnw2], .coach-error h2[b-c0wke8mnw2] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-800);
    margin: 0;
    letter-spacing: -0.02em;
}

.coach-error-card[b-c0wke8mnw2] {
    background: white;
    border: 1px solid var(--gray-200);
    border-radius: 20px;
    padding: var(--space-8) var(--space-6);
    max-width: 480px;
    width: 100%;
    box-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.coach-error-icon[b-c0wke8mnw2] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FEE2E2, #FECACA);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2);
}

.coach-error-icon i[b-c0wke8mnw2] {
    font-size: 2rem;
    color: #DC2626;
    margin: 0;
}

.coach-error-message[b-c0wke8mnw2] {
    color: var(--gray-700);
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    max-width: 380px;
}

.coach-error-hint[b-c0wke8mnw2] {
    color: var(--gray-500);
    font-size: 0.875rem;
    margin: 0 0 var(--space-4) 0;
}

.coach-error-actions[b-c0wke8mnw2] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}

.coach-generating-animation[b-c0wke8mnw2] {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.generating-pulse[b-c0wke8mnw2] {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    opacity: 0.15;
    animation: pulse-ring-b-c0wke8mnw2 2s ease-out infinite;
}

.generating-pulse[b-c0wke8mnw2]::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    opacity: 0.08;
    animation: pulse-ring-b-c0wke8mnw2 2s ease-out infinite 0.3s;
}

.generating-icon[b-c0wke8mnw2] {
    font-size: 2.25rem;
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    z-index: 1;
}

@keyframes pulse-ring-b-c0wke8mnw2 {
    0% { transform: scale(0.85); opacity: 0.2; }
    50% { transform: scale(1.25); opacity: 0.06; }
    100% { transform: scale(0.85); opacity: 0.2; }
}

.generating-subtitle[b-c0wke8mnw2] {
    color: var(--gray-500);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

.generating-steps[b-c0wke8mnw2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
    text-align: left;
    width: 100%;
}

.gen-step[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--gray-400);
    font-size: 0.9rem;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-lg);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.gen-step.active[b-c0wke8mnw2] {
    color: var(--gray-700);
    font-weight: 500;
    background: rgba(42, 158, 166, 0.06);
}

.gen-step.active.completed i[b-c0wke8mnw2] {
    color: var(--success-500);
}

.gen-step.in-progress i[b-c0wke8mnw2] {
    color: var(--primary-600);
}

.gen-step-spin[b-c0wke8mnw2] {
    display: inline-block;
    animation: gen-step-spin-b-c0wke8mnw2 1.1s linear infinite;
}

@keyframes gen-step-spin-b-c0wke8mnw2 {
    to { transform: rotate(360deg); }
}

.generating-note[b-c0wke8mnw2] {
    margin-top: var(--space-5);
    color: var(--gray-500);
    font-size: 0.85rem;
    font-style: italic;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
}

.generating-note i[b-c0wke8mnw2] {
    font-size: 0.95rem;
    color: var(--gray-400);
    font-style: normal;
}

/* ===== Top Bar ===== */
.coach-topbar[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-6);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 10;
}

.coach-back-link[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--gray-500);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s;
}

.coach-back-link:hover[b-c0wke8mnw2] {
    color: var(--primary-600);
}

.coach-topbar-title[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--gray-800);
}

.coach-topbar-title i[b-c0wke8mnw2] {
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coach-topbar-meta[b-c0wke8mnw2] {
    color: var(--gray-400);
    font-size: 0.8rem;
}

.coach-session-picker[b-c0wke8mnw2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.75rem;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(42, 158, 166, 0.25);
    border-radius: 999px;
    background: rgba(42, 158, 166, 0.08);
}

.coach-session-picker-label[b-c0wke8mnw2] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #1e7a80;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0;
}

.coach-session-picker-label i[b-c0wke8mnw2] {
    font-size: 0.9375rem;
}

.coach-session-picker-select[b-c0wke8mnw2] {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    background: transparent;
    color: #0f4f53;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.15rem 1.25rem 0.15rem 0.25rem;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%231e7a80' d='M1 3l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.1rem center;
}

.coach-session-picker-select:hover[b-c0wke8mnw2] {
    color: #083638;
}

/* ===== Hero Section ===== */
.coach-hero[b-c0wke8mnw2] {
    padding: var(--space-10) var(--space-6) var(--space-8);
    color: white;
    position: relative;
    overflow: hidden;
}

.coach-hero[b-c0wke8mnw2]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.coach-hero[b-c0wke8mnw2]::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.coach-hero.perf-excellent[b-c0wke8mnw2] { background: linear-gradient(135deg, #047857 0%, #059669 40%, #10b981 100%); }
.coach-hero.perf-good[b-c0wke8mnw2] { background: linear-gradient(135deg, #1A7580 0%, #2A9EA6 40%, #45B5BA 100%); }
.coach-hero.perf-average[b-c0wke8mnw2] { background: linear-gradient(135deg, #b45309 0%, #d97706 40%, #f59e0b 100%); }
.coach-hero.perf-below[b-c0wke8mnw2] { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 40%, #ef4444 100%); }
.coach-hero.perf-poor[b-c0wke8mnw2] { background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 40%, #dc2626 100%); }

.coach-hero-content[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.coach-hero-left[b-c0wke8mnw2] {
    flex: 1;
}

.coach-hero-left h1[b-c0wke8mnw2] {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 var(--space-5) 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.coach-hero-stats[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.hero-stat[b-c0wke8mnw2] {
    text-align: center;
}

.hero-stat-value[b-c0wke8mnw2] {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero-stat-value.text-success[b-c0wke8mnw2] { color: #a7f3d0 !important; }
.hero-stat-value.text-danger[b-c0wke8mnw2] { color: #fca5a5 !important; }

.hero-stat-label[b-c0wke8mnw2] {
    font-size: 0.7rem;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
    margin-top: 2px;
}

.hero-stat-divider[b-c0wke8mnw2] {
    width: 1px;
    height: 36px;
    background: rgba(255,255,255,0.2);
}

.coach-hero-right[b-c0wke8mnw2] {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.readiness-gauge[b-c0wke8mnw2] {
    position: relative;
    width: 130px;
    height: 130px;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}

.readiness-gauge svg[b-c0wke8mnw2] {
    width: 100%;
    height: 100%;
}

.readiness-gauge-text[b-c0wke8mnw2] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.readiness-value[b-c0wke8mnw2] {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.readiness-label[b-c0wke8mnw2] {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.7;
    letter-spacing: 1.5px;
    font-weight: 500;
}

.coach-hero-summary[b-c0wke8mnw2] {
    max-width: 1200px;
    margin: var(--space-5) auto 0;
    position: relative;
    z-index: 1;
}

.coach-hero-summary p[b-c0wke8mnw2] {
    font-size: 0.95rem;
    line-height: 1.7;
    opacity: 0.9;
    margin: 0;
}

/* ===== Tabs ===== */
.coach-tabs[b-c0wke8mnw2] {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-6);
    background: white;
    border-bottom: 1px solid var(--gray-200);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.coach-tabs[b-c0wke8mnw2]::-webkit-scrollbar { display: none; }

.coach-tab[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: none;
    color: var(--gray-400);
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.coach-tab:hover[b-c0wke8mnw2] {
    background: var(--gray-50);
    color: var(--gray-600);
}

.coach-tab.active[b-c0wke8mnw2] {
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(42, 158, 166, 0.3);
}

/* ===== Content Area ===== */
.coach-content[b-c0wke8mnw2] {
    padding: var(--space-6);
    max-width: 1200px;
    margin: 0 auto;
}

.coach-section[b-c0wke8mnw2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ===== Cards ===== */
.coach-card[b-c0wke8mnw2] {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s ease;
}

.coach-card:hover[b-c0wke8mnw2] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.coach-card-header[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
}

.coach-card-header i[b-c0wke8mnw2] {
    font-size: 1.15rem;
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.coach-card-header h2[b-c0wke8mnw2] {
    flex: 1;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-800);
    letter-spacing: -0.01em;
}

.coach-card-body[b-c0wke8mnw2] {
    padding: var(--space-5);
}

/* ===== Ask Coach Buttons ===== */
.coach-ask-btn[b-c0wke8mnw2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border: none;
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(42, 158, 166, 0.25);
}

.coach-ask-btn:hover[b-c0wke8mnw2] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.35);
}

.coach-ask-btn-sm[b-c0wke8mnw2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid rgba(42, 158, 166, 0.2);
    background: rgba(42, 158, 166, 0.04);
    color: var(--primary-600);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.25s ease;
    margin-top: var(--space-3);
}

.coach-ask-btn-sm:hover[b-c0wke8mnw2] {
    background: rgba(42, 158, 166, 0.1);
    border-color: rgba(42, 158, 166, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(42, 158, 166, 0.15);
}

/* ===== Assessment ===== */
.assessment-text[b-c0wke8mnw2] {
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--gray-600);
    margin: 0 0 var(--space-5) 0;
}

.coach-meta-row[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding-top: var(--space-4);
    border-top: 1px solid var(--gray-100);
}

.coach-badge[b-c0wke8mnw2] {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.badge-excellent[b-c0wke8mnw2] { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.badge-good[b-c0wke8mnw2] { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; }
.badge-average[b-c0wke8mnw2] { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.badge-below[b-c0wke8mnw2] { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }

.coach-meta-item[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-500);
    font-size: 0.82rem;
}

/* ===== Two Column Layout ===== */
.coach-two-col[b-c0wke8mnw2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}

/* ===== Strength/Weakness Items ===== */
.coach-item[b-c0wke8mnw2] {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.coach-item:hover[b-c0wke8mnw2] {
    transform: translateY(-1px);
}

.strength-item[b-c0wke8mnw2] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.04), rgba(16, 185, 129, 0.08));
    border-left: 3px solid var(--success-500);
}

.weakness-item[b-c0wke8mnw2] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), rgba(239, 68, 68, 0.08));
    border-left: 3px solid var(--error-500);
}

.coach-item-header[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.coach-item-header h4[b-c0wke8mnw2] {
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-800);
}

.coach-item p[b-c0wke8mnw2] {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0 0 var(--space-2) 0;
}

.domain-tag[b-c0wke8mnw2] {
    padding: 2px 10px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.severity-tag[b-c0wke8mnw2] {
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.severity-critical[b-c0wke8mnw2] { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
.severity-major[b-c0wke8mnw2] { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.severity-minor[b-c0wke8mnw2] { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; }

.evidence-list[b-c0wke8mnw2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.evidence-chip[b-c0wke8mnw2] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
    border-radius: var(--radius-full);
    font-size: 0.73rem;
    font-weight: 500;
}

.implication-text[b-c0wke8mnw2] {
    font-size: 0.85rem;
    color: var(--primary-600);
    display: flex;
    align-items: start;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(42, 158, 166, 0.04);
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
}

.weakness-details[b-c0wke8mnw2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: rgba(239, 68, 68, 0.03);
    border-radius: var(--radius-md);
}

.weakness-detail[b-c0wke8mnw2] {
    font-size: 0.85rem;
    color: var(--gray-600);
    line-height: 1.6;
}

.weakness-detail strong[b-c0wke8mnw2] {
    color: var(--gray-700);
    font-weight: 600;
}

.weakness-detail ul[b-c0wke8mnw2] {
    margin: var(--space-1) 0 0 var(--space-4);
    padding: 0;
}

.weakness-detail li[b-c0wke8mnw2] {
    margin-bottom: var(--space-1);
}

/* ===== Next Steps ===== */
.next-steps-list[b-c0wke8mnw2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.next-step-item[b-c0wke8mnw2] {
    display: flex;
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    transition: background 0.2s ease;
}

.next-step-item:hover[b-c0wke8mnw2] {
    background: var(--gray-50);
}

.step-number[b-c0wke8mnw2] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(42, 158, 166, 0.3);
}

.next-step-item p[b-c0wke8mnw2] {
    margin: 0;
    padding-top: 4px;
    font-size: 0.92rem;
    color: var(--gray-700);
    line-height: 1.6;
}

/* ===== Domains Grid ===== */
.domains-grid[b-c0wke8mnw2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-5);
}

.domain-card[b-c0wke8mnw2] {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--space-5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.domain-card:hover[b-c0wke8mnw2] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.domain-card-top[b-c0wke8mnw2] {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--space-4);
}

.domain-info h3[b-c0wke8mnw2] {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    color: var(--gray-800);
    letter-spacing: -0.01em;
}

.domain-tags[b-c0wke8mnw2] {
    display: flex;
    gap: var(--space-2);
}

.level-tag[b-c0wke8mnw2], .priority-tag[b-c0wke8mnw2] {
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.level-strong[b-c0wke8mnw2] { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.level-adequate[b-c0wke8mnw2] { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.level-weak[b-c0wke8mnw2] { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }

.priority-high[b-c0wke8mnw2] { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
.priority-medium[b-c0wke8mnw2] { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.priority-low[b-c0wke8mnw2] { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; }

.domain-score-ring[b-c0wke8mnw2] {
    position: relative;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
}

.domain-score-ring svg[b-c0wke8mnw2] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.08));
}

.domain-score-text[b-c0wke8mnw2] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--gray-800);
}

.domain-stats[b-c0wke8mnw2] {
    display: flex;
    gap: var(--space-4);
    font-size: 0.78rem;
    color: var(--gray-500);
    margin-bottom: var(--space-3);
}

.domain-topics[b-c0wke8mnw2] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.topic-chip[b-c0wke8mnw2] {
    padding: 3px 10px;
    background: rgba(42, 158, 166, 0.06);
    color: var(--primary-600);
    border-radius: var(--radius-full);
    font-size: 0.73rem;
    font-weight: 500;
}

.domain-gap[b-c0wke8mnw2] {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.6;
    margin: 0;
}

/* ===== Sprint Cards ===== */
.sprints-container[b-c0wke8mnw2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.sprint-card[b-c0wke8mnw2] {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.06);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.3s ease;
}

.sprint-card:hover[b-c0wke8mnw2] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.sprint-header[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--gray-100);
    background: linear-gradient(135deg, rgba(42, 158, 166, 0.02), rgba(124, 58, 237, 0.02));
}

.sprint-number-badge[b-c0wke8mnw2] {
    flex-shrink: 0;
    padding: 6px 14px;
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 6px rgba(42, 158, 166, 0.3);
}

.sprint-title-block[b-c0wke8mnw2] {
    flex: 1;
}

.sprint-title-block h3[b-c0wke8mnw2] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-800);
    letter-spacing: -0.01em;
}

.sprint-duration[b-c0wke8mnw2] {
    font-size: 0.82rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}

.sprint-focus[b-c0wke8mnw2] {
    padding: var(--space-4) var(--space-5) 0;
    font-size: 0.92rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.6;
}

.sprint-goals[b-c0wke8mnw2], .sprint-tasks[b-c0wke8mnw2], .sprint-resources[b-c0wke8mnw2] {
    padding: var(--space-4) var(--space-5);
}

.sprint-goals h4[b-c0wke8mnw2], .sprint-tasks h4[b-c0wke8mnw2], .sprint-resources h4[b-c0wke8mnw2] {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--gray-700);
    margin: 0 0 var(--space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sprint-goal-item[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    font-size: 0.88rem;
    color: var(--gray-600);
}

.sprint-goal-item i[b-c0wke8mnw2] {
    color: var(--gray-300);
    font-size: 0.6rem;
}

.sprint-task-item[b-c0wke8mnw2] {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    margin-bottom: var(--space-2);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.sprint-task-item:hover[b-c0wke8mnw2] {
    border-color: rgba(42, 158, 166, 0.12);
    background: rgba(42, 158, 166, 0.02);
}

.task-day[b-c0wke8mnw2] {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--primary-600);
    font-size: 0.82rem;
    min-width: 65px;
}

.task-details p[b-c0wke8mnw2] {
    font-size: 0.88rem;
    color: var(--gray-700);
    margin: 0 0 var(--space-2) 0;
    line-height: 1.6;
}

.task-meta[b-c0wke8mnw2] {
    display: flex;
    gap: var(--space-3);
    align-items: center;
}

.task-type[b-c0wke8mnw2] {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.type-study[b-c0wke8mnw2] { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.type-practice[b-c0wke8mnw2] { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.type-review[b-c0wke8mnw2] { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.type-lab[b-c0wke8mnw2] { background: linear-gradient(135deg, #ede9fe, #ddd6fe); color: #5b21b6; }

.task-time[b-c0wke8mnw2] {
    font-size: 0.78rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: 4px;
}

.sprint-milestone[b-c0wke8mnw2] {
    display: flex;
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    margin: 0 var(--space-5) var(--space-4);
    background: linear-gradient(135deg, rgba(42, 158, 166, 0.04), rgba(168, 85, 247, 0.06));
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--primary-600);
}

.sprint-milestone i[b-c0wke8mnw2] {
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 1.1rem;
    margin-top: 2px;
}

.sprint-milestone strong[b-c0wke8mnw2] {
    display: block;
    font-size: 0.82rem;
    color: var(--gray-800);
    margin-bottom: 2px;
}

.sprint-milestone p[b-c0wke8mnw2] {
    font-size: 0.88rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
}

.resource-chip[b-c0wke8mnw2] {
    display: inline-block;
    padding: 4px 12px;
    background: var(--gray-50);
    color: var(--gray-700);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    margin-right: var(--space-2);
    margin-bottom: var(--space-2);
    border: 1px solid var(--gray-200);
}

/* ===== Question Cards ===== */
.question-filters[b-c0wke8mnw2] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.q-filter[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 16px;
    border: 1px solid var(--gray-200);
    background: white;
    color: var(--gray-500);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 500;
    transition: all 0.25s ease;
}

.q-filter:hover[b-c0wke8mnw2] {
    border-color: var(--gray-300);
    color: var(--gray-700);
}

.q-filter.active[b-c0wke8mnw2] {
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    border-color: transparent;
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(42, 158, 166, 0.25);
}

.questions-list[b-c0wke8mnw2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.question-card[b-c0wke8mnw2] {
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--space-4) var(--space-5);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: all 0.25s ease;
}

.question-card:hover[b-c0wke8mnw2] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.question-card.q-incorrect[b-c0wke8mnw2] {
    border-left: 3px solid var(--error-500);
}

.question-card.q-correct[b-c0wke8mnw2] {
    border-left: 3px solid var(--success-500);
}

.q-card-header[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}

.q-number[b-c0wke8mnw2] {
    font-weight: 800;
    color: var(--gray-800);
    font-size: 0.88rem;
}

.q-status[b-c0wke8mnw2] {
    font-size: 0.78rem;
    font-weight: 600;
}

.q-difficulty[b-c0wke8mnw2] {
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.difficulty-easy[b-c0wke8mnw2] { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.difficulty-medium[b-c0wke8mnw2] { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.difficulty-hard[b-c0wke8mnw2] { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }

.q-concept[b-c0wke8mnw2] {
    font-size: 0.88rem;
    color: var(--gray-700);
    margin-bottom: var(--space-3);
    line-height: 1.5;
}

.q-why-wrong[b-c0wke8mnw2], .q-misconception[b-c0wke8mnw2], .q-tip[b-c0wke8mnw2] {
    display: flex;
    align-items: start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    margin-bottom: var(--space-2);
    line-height: 1.5;
}

.q-why-wrong[b-c0wke8mnw2] {
    background: rgba(239, 68, 68, 0.05);
    color: #991b1b;
    border: 1px solid rgba(239, 68, 68, 0.1);
}

.q-misconception[b-c0wke8mnw2] {
    background: rgba(245, 158, 11, 0.05);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, 0.1);
}

.q-tip[b-c0wke8mnw2] {
    background: rgba(42, 158, 166, 0.05);
    color: #3730a3;
    border: 1px solid rgba(42, 158, 166, 0.1);
}

.q-why-wrong i[b-c0wke8mnw2], .q-misconception i[b-c0wke8mnw2], .q-tip i[b-c0wke8mnw2] {
    margin-top: 2px;
    flex-shrink: 0;
}

/* ===== Concepts Grid ===== */
.concepts-grid[b-c0wke8mnw2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-4);
}

.concept-card[b-c0wke8mnw2] {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--space-5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.concept-card[b-c0wke8mnw2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-600), #7A82AB, #ec4899);
}

.concept-card:hover[b-c0wke8mnw2] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.concept-header[b-c0wke8mnw2] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}

.concept-header h3[b-c0wke8mnw2] {
    font-size: 0.98rem;
    font-weight: 700;
    margin: 0;
    color: var(--gray-800);
}

.importance-tag[b-c0wke8mnw2] {
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.importance-critical[b-c0wke8mnw2] { background: linear-gradient(135deg, #fee2e2, #fecaca); color: #991b1b; }
.importance-important[b-c0wke8mnw2] { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.importance-helpful[b-c0wke8mnw2] { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; }

.concept-explanation[b-c0wke8mnw2] {
    font-size: 0.88rem;
    color: var(--gray-600);
    line-height: 1.7;
    margin: var(--space-3) 0;
}

.related-questions[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.rq-label[b-c0wke8mnw2] {
    font-size: 0.73rem;
    color: var(--gray-400);
    font-weight: 500;
}

.rq-chip[b-c0wke8mnw2] {
    padding: 2px 8px;
    background: var(--gray-100);
    color: var(--gray-600);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
}

/* ===== Cheat Sheet Grid ===== */
.cheatsheet-grid[b-c0wke8mnw2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-4);
}

.cheatsheet-card[b-c0wke8mnw2] {
    background: white;
    border-radius: var(--radius-xl);
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: var(--space-5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.cheatsheet-card[b-c0wke8mnw2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #ec4899);
}

.cheatsheet-card:hover[b-c0wke8mnw2] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.cs-topic[b-c0wke8mnw2] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--gray-800);
    margin-bottom: var(--space-2);
    letter-spacing: -0.01em;
}

.cs-fact[b-c0wke8mnw2] {
    font-size: 0.88rem;
    color: var(--gray-700);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.cs-memory[b-c0wke8mnw2] {
    display: flex;
    align-items: start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06), rgba(236, 72, 153, 0.06));
    border-radius: var(--radius-lg);
    font-size: 0.85rem;
    color: var(--gray-700);
    border: 1px solid rgba(245, 158, 11, 0.1);
}

.cs-memory i[b-c0wke8mnw2] {
    color: var(--warning-500);
    margin-top: 2px;
    flex-shrink: 0;
}

/* ===== Chat Panel ===== */
.chat-overlay[b-c0wke8mnw2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100;
    animation: fadeIn-b-c0wke8mnw2 0.2s ease;
}

.chat-panel[b-c0wke8mnw2] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 480px;
    max-width: 100vw;
    background: white;
    z-index: 101;
    display: flex;
    flex-direction: column;
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.chat-panel.open[b-c0wke8mnw2] {
    transform: translateX(0);
}

.chat-panel-header[b-c0wke8mnw2] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding: var(--space-5);
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    color: white;
}

.chat-panel-header h3[b-c0wke8mnw2] {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.chat-context[b-c0wke8mnw2] {
    font-size: 0.78rem;
    opacity: 0.75;
    margin: var(--space-1) 0 0 0;
}

.chat-close-btn[b-c0wke8mnw2] {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-md);
    opacity: 0.9;
    transition: all 0.2s;
}

.chat-close-btn:hover[b-c0wke8mnw2] {
    opacity: 1;
    background: rgba(255,255,255,0.25);
}

.chat-messages[b-c0wke8mnw2] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    background: var(--gray-50);
}

.chat-msg[b-c0wke8mnw2] {
    display: flex;
    gap: var(--space-2);
    max-width: 88%;
    animation: msgSlideIn-b-c0wke8mnw2 0.3s ease;
}

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

.chat-msg-user[b-c0wke8mnw2] {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chat-msg-avatar[b-c0wke8mnw2] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    box-shadow: 0 2px 4px rgba(42, 158, 166, 0.25);
}

.chat-msg-content[b-c0wke8mnw2] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: 0.88rem;
    line-height: 1.65;
}

.chat-msg-user .chat-msg-content[b-c0wke8mnw2] {
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    color: white;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 6px rgba(42, 158, 166, 0.2);
}

.chat-msg-coach .chat-msg-content[b-c0wke8mnw2] {
    background: white;
    color: var(--gray-700);
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Markdown content in chat */
[b-c0wke8mnw2] .chat-msg-content p { margin: 0 0 var(--space-2) 0; }
[b-c0wke8mnw2] .chat-msg-content p:last-child { margin-bottom: 0; }
[b-c0wke8mnw2] .chat-msg-content ul, [b-c0wke8mnw2] .chat-msg-content ol { margin: var(--space-2) 0; padding-left: var(--space-4); }
[b-c0wke8mnw2] .chat-msg-content code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 4px; font-size: 0.85em; }
[b-c0wke8mnw2] .chat-msg-content strong { font-weight: 600; }

.chat-typing[b-c0wke8mnw2] {
    display: flex;
    gap: 5px;
    padding: var(--space-3) var(--space-4) !important;
}

.chat-typing span[b-c0wke8mnw2] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-400);
    animation: typing-dot-b-c0wke8mnw2 1.4s ease-in-out infinite;
}

.chat-typing span:nth-child(2)[b-c0wke8mnw2] { animation-delay: 0.2s; }
.chat-typing span:nth-child(3)[b-c0wke8mnw2] { animation-delay: 0.4s; }

@keyframes typing-dot-b-c0wke8mnw2 {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
    30% { transform: translateY(-6px); opacity: 1; }
}

.chat-input-area[b-c0wke8mnw2] {
    border-top: 1px solid var(--gray-200);
    padding: var(--space-3);
    background: white;
}

.chat-suggestions[b-c0wke8mnw2] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.chat-suggestion[b-c0wke8mnw2] {
    padding: 4px 12px;
    border: 1px solid rgba(42, 158, 166, 0.15);
    background: rgba(42, 158, 166, 0.04);
    color: var(--primary-600);
    border-radius: var(--radius-full);
    font-size: 0.73rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-suggestion:hover[b-c0wke8mnw2] {
    background: rgba(42, 158, 166, 0.1);
    border-color: rgba(42, 158, 166, 0.3);
    transform: translateY(-1px);
}

.chat-input-row[b-c0wke8mnw2] {
    display: flex;
    gap: var(--space-2);
}

.chat-input-row input[b-c0wke8mnw2] {
    flex: 1;
    padding: var(--space-3);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: 0.88rem;
    outline: none;
    transition: all 0.2s;
    background: var(--gray-50);
}

.chat-input-row input:focus[b-c0wke8mnw2] {
    border-color: var(--primary-400);
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.08);
    background: white;
}

.chat-send-btn[b-c0wke8mnw2] {
    width: 42px;
    height: 42px;
    border: none;
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    color: white;
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    box-shadow: 0 2px 6px rgba(42, 158, 166, 0.25);
}

.chat-send-btn:hover:not(:disabled)[b-c0wke8mnw2] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.35);
}

.chat-send-btn:disabled[b-c0wke8mnw2] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ===== Animations ===== */
.animate-fadeIn[b-c0wke8mnw2] {
    animation: fadeIn-b-c0wke8mnw2 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .coach-two-col[b-c0wke8mnw2] {
        grid-template-columns: 1fr;
    }
    .coach-hero-content[b-c0wke8mnw2] {
        flex-direction: column;
        text-align: center;
    }
    .coach-hero-stats[b-c0wke8mnw2] {
        justify-content: center;
    }
    .coach-hero[b-c0wke8mnw2] {
        padding: var(--space-6) var(--space-4);
    }
    .coach-content[b-c0wke8mnw2] {
        padding: var(--space-4);
    }
    .coach-tabs[b-c0wke8mnw2] {
        padding: var(--space-2) var(--space-4);
    }
    .coach-topbar[b-c0wke8mnw2] {
        padding: var(--space-3) var(--space-4);
    }
    .coach-topbar-meta[b-c0wke8mnw2] {
        display: none;
    }
    .domains-grid[b-c0wke8mnw2], .concepts-grid[b-c0wke8mnw2], .cheatsheet-grid[b-c0wke8mnw2] {
        grid-template-columns: 1fr;
    }
    .sprint-header[b-c0wke8mnw2] {
        flex-wrap: wrap;
    }
    .question-filters[b-c0wke8mnw2] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== Button Styles (used in error state) ===== */
.btn-primary-modern[b-c0wke8mnw2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(135deg, var(--primary-600), #7A82AB);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(42, 158, 166, 0.3);
}

.btn-primary-modern:hover[b-c0wke8mnw2] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(42, 158, 166, 0.4);
}

.btn-secondary-modern[b-c0wke8mnw2] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    background: white;
    color: var(--gray-700);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.25s ease;
}

.btn-secondary-modern:hover[b-c0wke8mnw2] {
    border-color: var(--gray-300);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* ===== Upgrade Modal ===== */

.coach-modal-overlay[b-c0wke8mnw2] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-c0wke8mnw2 0.2s ease;
}

.coach-modal[b-c0wke8mnw2] {
    background: white;
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    animation: slideUp-b-c0wke8mnw2 0.3s ease;
    overflow: hidden;
}

.coach-modal-header[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #2A9EA6, #8B93BC);
    color: white;
}

.coach-modal-header h5[b-c0wke8mnw2] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.coach-modal-close[b-c0wke8mnw2] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.coach-modal-close:hover[b-c0wke8mnw2] {
    background: rgba(255, 255, 255, 0.3);
}

.coach-modal-body[b-c0wke8mnw2] {
    padding: 1.5rem;
}

.coach-modal-desc[b-c0wke8mnw2] {
    text-align: center;
    font-size: 1rem;
    color: #475569;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.coach-upgrade-grid[b-c0wke8mnw2] {
    display: grid;
    gap: 1.25rem;
}

.coach-upgrade-grid.two-col[b-c0wke8mnw2] {
    grid-template-columns: 1fr 1fr;
}

.coach-upgrade-grid.one-col[b-c0wke8mnw2] {
    grid-template-columns: 1fr;
    max-width: 380px;
    margin: 0 auto;
}

.coach-upgrade-card[b-c0wke8mnw2] {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.coach-upgrade-card:hover[b-c0wke8mnw2] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.coach-upgrade-card--featured[b-c0wke8mnw2] {
    border-color: #FFB547;
    background: linear-gradient(180deg, #fffbf0 0%, #ffffff 100%);
    box-shadow: 0 4px 16px rgba(255, 181, 71, 0.15);
}

.coach-upgrade-best[b-c0wke8mnw2] {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FFB547, #FF8C00);
    color: white;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 20px;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.coach-upgrade-icon[b-c0wke8mnw2] {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.coach-upgrade-card h4[b-c0wke8mnw2] {
    margin: 0 0 1rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #0f172a;
}

.coach-upgrade-list[b-c0wke8mnw2] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    text-align: left;
}

.coach-upgrade-list li[b-c0wke8mnw2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.875rem;
    color: #334155;
}

.coach-upgrade-list li i[b-c0wke8mnw2] {
    color: #22c55e;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.coach-upgrade-btn[b-c0wke8mnw2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.coach-upgrade-btn--primary[b-c0wke8mnw2] {
    background: #2A9EA6;
    color: white;
}

.coach-upgrade-btn--primary:hover[b-c0wke8mnw2] {
    background: #26808C;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.3);
}

.coach-upgrade-btn--warning[b-c0wke8mnw2] {
    background: linear-gradient(135deg, #FFB547, #FF8C00);
    color: white;
}

.coach-upgrade-btn--warning:hover[b-c0wke8mnw2] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 181, 71, 0.4);
}

/* Redeem-tier locked indicator on Ask Coach buttons */
.coach-ask-btn.locked[b-c0wke8mnw2],
.coach-ask-btn-sm.locked[b-c0wke8mnw2] {
    opacity: 0.7;
    position: relative;
}

.coach-ask-btn.locked[b-c0wke8mnw2]::after,
.coach-ask-btn-sm.locked[b-c0wke8mnw2]::after {
    content: "\F47A"; /* bi-lock-fill */
    font-family: "bootstrap-icons";
    margin-left: 0.35rem;
    font-size: 0.75em;
}

@keyframes slideUp-b-c0wke8mnw2 {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
    .coach-upgrade-grid.two-col[b-c0wke8mnw2] {
        grid-template-columns: 1fr;
    }

    .coach-modal[b-c0wke8mnw2] {
        max-width: 100%;
        border-radius: 16px;
    }
}
/* /Pages/Index.razor.rz.scp.css */
/* Landing page styles are in wwwroot/css/landing-page.css (global) */
/* This file is intentionally minimal to avoid breaking the Blazor scoped CSS bundle */
/* /Pages/Pricing.razor.rz.scp.css */
/* ============================================================
   /pricing — authenticated plan & pricing page
   Scoped to .pp- prefix to avoid clashing with public lp-* styles.
   ============================================================ */

[b-jwaux2hngm] .pp-page {
    padding: 1.5rem 0 4rem;
    background: var(--gray-50);
    min-height: calc(100vh - 70px);
}

[b-jwaux2hngm] .pp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Header */
[b-jwaux2hngm] .pp-header {
    margin-bottom: 2rem;
}

[b-jwaux2hngm] .pp-header__title-row {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
}

[b-jwaux2hngm] .pp-header__title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

[b-jwaux2hngm] .pp-header__sub {
    color: #64748b;
    margin-top: 0.5rem;
    font-size: 1rem;
}

[b-jwaux2hngm] .pp-current-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

[b-jwaux2hngm] .pp-current-plan-badge--free {
    background: #e2e8f0;
    color: #475569;
}

[b-jwaux2hngm] .pp-current-plan-badge--pro {
    background: linear-gradient(135deg, #2A9EA6 0%, #26808C 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(42, 158, 166, 0.35);
}

[b-jwaux2hngm] .pp-current-plan-badge--loading {
    background: #f1f5f9;
    color: #94a3b8;
}

/* Tiers */
[b-jwaux2hngm] .pp-tiers {
    margin-bottom: 3rem;
}

[b-jwaux2hngm] .pp-tiers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

[b-jwaux2hngm] .pp-tier {
    position: relative;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

[b-jwaux2hngm] .pp-tier:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

[b-jwaux2hngm] .pp-tier--popular {
    border: 2px solid #2A9EA6;
    box-shadow: 0 8px 28px rgba(42, 158, 166, 0.18);
}

[b-jwaux2hngm] .pp-tier--current {
    border: 2px solid #10b981;
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 50%);
}

[b-jwaux2hngm] .pp-tier__badge,
[b-jwaux2hngm] .pp-tier__current-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

[b-jwaux2hngm] .pp-tier__badge {
    background: linear-gradient(135deg, #2A9EA6 0%, #26808C 100%);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(42, 158, 166, 0.4);
}

[b-jwaux2hngm] .pp-tier__current-badge {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}

[b-jwaux2hngm] .pp-tier__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

[b-jwaux2hngm] .pp-tier__header h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

[b-jwaux2hngm] .pp-tier__amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    margin: 0.5rem 0 0.25rem;
}

[b-jwaux2hngm] .pp-tier__per {
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    margin-left: 0.25rem;
}

[b-jwaux2hngm] .pp-tier__description {
    color: #64748b;
    font-size: 0.9375rem;
    margin: 0.25rem 0 0;
}

[b-jwaux2hngm] .pp-price-breakdown {
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 0.25rem;
    font-weight: 500;
}

[b-jwaux2hngm] .pp-tier__features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
}

[b-jwaux2hngm] .pp-tier__features li {
    display: flex;
    gap: 0.625rem;
    padding: 0.5rem 0;
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.45;
}

[b-jwaux2hngm] .pp-tier__features li i {
    color: #10b981;
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

[b-jwaux2hngm] .pp-tier__note {
    text-align: center;
    color: #64748b;
    font-size: 0.8125rem;
    margin: 0.75rem 0 0;
}

/* Buttons */
[b-jwaux2hngm] .pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

[b-jwaux2hngm] .pp-btn--block { width: 100%; }

[b-jwaux2hngm] .pp-btn--primary {
    background: linear-gradient(135deg, #2A9EA6 0%, #26808C 100%);
    color: #ffffff;
}
[b-jwaux2hngm] .pp-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(42, 158, 166, 0.35);
}

[b-jwaux2hngm] .pp-btn--outline {
    background: #ffffff;
    color: #2A9EA6;
    border-color: #2A9EA6;
}
[b-jwaux2hngm] .pp-btn--outline:hover {
    background: rgba(42, 158, 166, 0.08);
}

[b-jwaux2hngm] .pp-btn--ghost {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

/* Pro toggle */
[b-jwaux2hngm] .pp-pro-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.625rem;
    background: #f1f5f9;
    border-radius: 999px;
    margin: 0.75rem auto;
}

[b-jwaux2hngm] .pp-pro-toggle__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: color 0.15s ease;
}

[b-jwaux2hngm] .pp-pro-toggle__label--active { color: #0f172a; }

[b-jwaux2hngm] .pp-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

[b-jwaux2hngm] .pp-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

[b-jwaux2hngm] .pp-switch__slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s ease;
}

[b-jwaux2hngm] .pp-switch__slider::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.18s ease;
}

[b-jwaux2hngm] .pp-switch input:checked + .pp-switch__slider {
    background: #2A9EA6;
}
[b-jwaux2hngm] .pp-switch input:checked + .pp-switch__slider::before {
    transform: translateX(16px);
}

[b-jwaux2hngm] .pp-save-badge {
    background: #fef3c7;
    color: #92400e;
    font-size: 0.6875rem;
    padding: 0.125rem 0.4rem;
    border-radius: 999px;
    margin-left: 0.25rem;
    font-weight: 700;
}

/* FAQ */
[b-jwaux2hngm] .pp-faq {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 2rem;
}

[b-jwaux2hngm] .pp-faq__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1.25rem;
}

[b-jwaux2hngm] .pp-faq__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

[b-jwaux2hngm] .pp-faq__item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

[b-jwaux2hngm] .pp-faq__item:hover {
    background: #f8fafc;
}

[b-jwaux2hngm] .pp-faq__q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9375rem;
}

[b-jwaux2hngm] .pp-faq__q i {
    color: #94a3b8;
    margin-left: 0.75rem;
    flex-shrink: 0;
}

[b-jwaux2hngm] .pp-faq__a {
    color: #475569;
    font-size: 0.9375rem;
    line-height: 1.55;
    padding-top: 0.625rem;
    margin-top: 0.625rem;
    border-top: 1px solid #f1f5f9;
}

/* Responsive */
@media (max-width: 960px) {
    [b-jwaux2hngm] .pp-tiers__grid {
        grid-template-columns: 1fr;
    }
    [b-jwaux2hngm] .pp-tier__amount { font-size: 2.125rem; }
}

@media (max-width: 768px) {
    [b-jwaux2hngm] .pp-page { padding: 1rem 0 3rem; }
    [b-jwaux2hngm] .pp-container { padding: 0 1rem; }
    [b-jwaux2hngm] .pp-header__title { font-size: 1.5rem; }
    [b-jwaux2hngm] .pp-faq { padding: 1.25rem; }
}
/* /Pages/PricingPlans.razor.rz.scp.css */
/* PricingPlans scoped styles — Pro card toggle + price range */

.lp-pricing__range[b-qb7xfdk7ti] {
    font-size: 2.2rem;
    font-weight: 800;
}

.lp-pricing__badge--amber[b-qb7xfdk7ti] {
    background: #F59E0B !important;
}

.pp-pro-toggle[b-qb7xfdk7ti] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px 0;
    padding: 10px 16px;
    background: #F3F4F6;
    border-radius: 12px;
}

.pp-pro-toggle__label[b-qb7xfdk7ti] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #9CA3AF;
    cursor: pointer;
    transition: color 0.3s;
}

.pp-pro-toggle__label--active[b-qb7xfdk7ti] {
    color: #1F2937;
}

.pp-save-badge[b-qb7xfdk7ti] {
    background: #10b981;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 4px;
}

.pp-switch[b-qb7xfdk7ti] {
    position: relative;
    width: 44px;
    height: 24px;
    display: inline-block;
}

.pp-switch input[b-qb7xfdk7ti] {
    opacity: 0;
    width: 0;
    height: 0;
}

.pp-switch__slider[b-qb7xfdk7ti] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #D1D5DB;
    border-radius: 24px;
    transition: 0.3s;
}

.pp-switch__slider[b-qb7xfdk7ti]:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

input:checked + .pp-switch__slider[b-qb7xfdk7ti] {
    background-color: #2A9EA6;
}

input:checked + .pp-switch__slider[b-qb7xfdk7ti]:before {
    transform: translateX(20px);
}

.pp-price-breakdown[b-qb7xfdk7ti] {
    font-size: 0.95rem;
    color: #10b981;
    font-weight: 600;
    margin-top: 10px;
}

/* Amber button for Single Exam card */
[b-qb7xfdk7ti] .lp-btn--amber {
    background: #F59E0B !important;
    color: white !important;
    border-color: #F59E0B !important;
}

[b-qb7xfdk7ti] .lp-btn--amber:hover {
    background: #D97706 !important;
    border-color: #D97706 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}
/* /Pages/Profile.razor.rz.scp.css */
/* ========================================
   PROFILE PAGE - Premium Dashboard Design
   Matches checkout page aesthetic
   ======================================== */

/* Page Container */
.profile-page[b-6ntw7x86b8] {
    min-height: 100vh;
    background: #F8FAFC;
    position: relative;
    overflow-x: hidden;
}

.profile-bg[b-6ntw7x86b8] {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 40%, rgba(42, 158, 166, 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 60% 40% at 80% 20%, rgba(124, 58, 237, 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 60% 80%, rgba(16, 185, 129, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* ========================================
   ERROR STATE
   ======================================== */
.error-container[b-6ntw7x86b8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #334155;
}

.error-icon-wrap[b-6ntw7x86b8] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FEF2F2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.error-icon-wrap i[b-6ntw7x86b8] {
    font-size: 2rem;
    color: #EF4444;
}

.error-container h2[b-6ntw7x86b8] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0.5rem;
    letter-spacing: -0.02em;
}

.error-container p[b-6ntw7x86b8] {
    color: #64748B;
    margin-bottom: 1.5rem;
}

/* ========================================
   HERO CARD SECTION
   ======================================== */
.profile-hero-section[b-6ntw7x86b8] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2rem 2rem 0;
    position: relative;
    z-index: 1;
}

.hero-card[b-6ntw7x86b8] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 6px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.hero-card-accent[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 50%, #9BA2C8 100%);
    padding: 1.5rem 2rem;
    position: relative;
    overflow: hidden;
}

.accent-pattern[b-6ntw7x86b8] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 85% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 40%);
}

.accent-content[b-6ntw7x86b8] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.accent-badge[b-6ntw7x86b8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: white;
    font-size: 0.813rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.accent-badge i[b-6ntw7x86b8] {
    font-size: 0.938rem;
}

.accent-badge-free[b-6ntw7x86b8] {
    background: rgba(255, 255, 255, 0.15);
}

/* Hero Card Body */
.hero-card-body[b-6ntw7x86b8] {
    padding: 2rem 2rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.hero-avatar-wrap[b-6ntw7x86b8] {
    position: relative;
    flex-shrink: 0;
}

.hero-avatar[b-6ntw7x86b8] {
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, #EDF7F8 0%, #E0E7FF 100%);
    border: 3px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #2A9EA6;
    box-shadow:
        0 0 0 4px rgba(42, 158, 166, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.08);
    margin-top: -48px;
    position: relative;
    z-index: 2;
}

.hero-avatar-status[b-6ntw7x86b8] {
    position: absolute;
    bottom: -44px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: #10B981;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 3;
}

.hero-user-info[b-6ntw7x86b8] {
    flex: 1;
    min-width: 0;
}

.hero-name[b-6ntw7x86b8] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin: 0 0 0.375rem 0;
}

.hero-email[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.938rem;
    color: #64748B;
    font-weight: 500;
    margin: 0 0 0.875rem 0;
}

.hero-email i[b-6ntw7x86b8] {
    color: #94A3B8;
    font-size: 0.875rem;
}

.hero-badges[b-6ntw7x86b8] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.h-badge[b-6ntw7x86b8] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.h-badge i[b-6ntw7x86b8] {
    font-size: 0.75rem;
}

.h-badge-active[b-6ntw7x86b8] {
    background: #D1FAE5;
    color: #065F46;
}

.h-badge-inactive[b-6ntw7x86b8] {
    background: #F1F5F9;
    color: #475569;
}

.h-badge-member[b-6ntw7x86b8] {
    background: #EDF7F8;
    color: #3730A3;
}

.h-badge-premium[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #92400E;
}

/* Hero Stats Bar */
.hero-stats-bar[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2rem;
    border-top: 1px solid #F1F5F9;
    background: #FAFBFC;
    gap: 0;
}

.hero-stat-item[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    justify-content: center;
    padding: 0.5rem;
}

.hero-stat-divider[b-6ntw7x86b8] {
    width: 1px;
    height: 40px;
    background: #E2E8F0;
    flex-shrink: 0;
}

.hero-stat-icon[b-6ntw7x86b8] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.hero-stat-icon-primary[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #EDF7F8, #E0E7FF);
    color: #2A9EA6;
}

.hero-stat-icon-success[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #D1FAE5, #A7F3D0);
    color: #059669;
}

.hero-stat-icon-warning[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #D97706;
}

.hero-stat-icon-info[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #DBEAFE, #BFDBFE);
    color: #2563EB;
}

.hero-stat-info[b-6ntw7x86b8] {
    display: flex;
    flex-direction: column;
}

.hero-stat-value[b-6ntw7x86b8] {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.hero-stat-label[b-6ntw7x86b8] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
}

/* ========================================
   MAIN CONTENT GRID
   ======================================== */
.profile-content[b-6ntw7x86b8] {
    max-width: 1320px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.profile-grid[b-6ntw7x86b8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: start;
}

.profile-col-left[b-6ntw7x86b8] {
    min-width: 0;
}

.profile-col-right[b-6ntw7x86b8] {
    position: sticky;
    top: 80px;
}

/* ========================================
   PROFILE CARDS (Shared)
   ======================================== */
.p-card[b-6ntw7x86b8] {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 6px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 1.5rem;
}

.p-card-header[b-6ntw7x86b8] {
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p-card-header-title[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.p-card-header-title h2[b-6ntw7x86b8] {
    font-size: 1.063rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
    letter-spacing: -0.02em;
}

.p-card-icon[b-6ntw7x86b8] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.p-card-icon-primary[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #EDF7F8, #E0E7FF);
    color: #2A9EA6;
}

.p-card-icon-accent[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #F3E8FF, #E9D5FF);
    color: #7A82AB;
}

.p-card-icon-warning[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #D97706;
}

.p-card-icon-secondary[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
    color: #475569;
}

.p-card-icon-gold[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #FEF3C7, #FDE68A);
    color: #B45309;
}

.p-card-body[b-6ntw7x86b8] {
    padding: 1.5rem 1.75rem;
}

.p-card-body-tight[b-6ntw7x86b8] {
    padding: 0.75rem 1rem;
}

.card-count-badge[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #EDF7F8, #E0E7FF);
    color: #26808C;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
}

/* ========================================
   PERFORMANCE OVERVIEW
   ======================================== */
.perf-grid[b-6ntw7x86b8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.875rem;
    margin-bottom: 1.5rem;
}

.perf-tile[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: 14px;
    transition: all 0.2s ease;
}

.perf-tile:hover[b-6ntw7x86b8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.perf-tile-primary[b-6ntw7x86b8] {
    background: linear-gradient(135deg, rgba(42, 158, 166, 0.08), rgba(124, 58, 237, 0.08));
}

.perf-tile-success[b-6ntw7x86b8] {
    background: rgba(16, 185, 129, 0.08);
}

.perf-tile-danger[b-6ntw7x86b8] {
    background: rgba(239, 68, 68, 0.08);
}

.perf-tile-warning[b-6ntw7x86b8] {
    background: rgba(245, 158, 11, 0.08);
}

.perf-tile-icon[b-6ntw7x86b8] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    flex-shrink: 0;
}

.perf-tile-primary .perf-tile-icon[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #2A9EA6, #7A82AB);
}

.perf-tile-success .perf-tile-icon[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #10B981, #059669);
}

.perf-tile-danger .perf-tile-icon[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #EF4444, #DC2626);
}

.perf-tile-warning .perf-tile-icon[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.perf-tile-data[b-6ntw7x86b8] {
    display: flex;
    flex-direction: column;
}

.perf-tile-value[b-6ntw7x86b8] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.perf-tile-label[b-6ntw7x86b8] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
    margin-top: 0.125rem;
}

/* Progress Bar */
.perf-progress[b-6ntw7x86b8] {
    padding-top: 0.25rem;
}

.perf-progress-header[b-6ntw7x86b8] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
}

.perf-progress-value[b-6ntw7x86b8] {
    color: #2A9EA6;
    font-weight: 700;
}

.perf-progress-track[b-6ntw7x86b8] {
    height: 8px;
    background: #E2E8F0;
    border-radius: 20px;
    overflow: hidden;
}

.perf-progress-fill[b-6ntw7x86b8] {
    height: 100%;
    background: linear-gradient(90deg, #2A9EA6, #7A82AB, #9BA2C8);
    border-radius: 20px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================================
   AI ANALYSIS CARD
   ======================================== */
.ai-stats[b-6ntw7x86b8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ai-stat-row[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #F8FAFC;
    border-radius: 14px;
    border: 1px solid #F1F5F9;
    transition: all 0.2s ease;
}

.ai-stat-row-alt[b-6ntw7x86b8] {
    background: #F0FDF4;
    border-color: #DCFCE7;
}

.ai-stat-row-alt:hover[b-6ntw7x86b8] {
    background: #DCFCE7;
    border-color: #BBF7D0;
}

.ai-stat-row:hover[b-6ntw7x86b8] {
    border-color: #E2E8F0;
    background: #F1F5F9;
}

.ai-stat-icon[b-6ntw7x86b8] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: linear-gradient(135deg, #2A9EA6, #7A82AB);
    color: white;
    flex-shrink: 0;
}

.ai-stat-icon-info[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.ai-stat-info[b-6ntw7x86b8] {
    flex: 1;
}

.ai-stat-value[b-6ntw7x86b8] {
    font-size: 1.375rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.ai-stat-label[b-6ntw7x86b8] {
    font-size: 0.813rem;
    color: #64748B;
    font-weight: 500;
}

.ai-info-note[b-6ntw7x86b8] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: #EFF6FF;
    border-radius: 10px;
    color: #1E40AF;
    font-size: 0.813rem;
    font-weight: 500;
    line-height: 1.5;
}

.ai-info-note i[b-6ntw7x86b8] {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.875rem;
}

.ai-empty[b-6ntw7x86b8] {
    text-align: center;
    padding: 1.5rem 0;
}

.ai-empty i[b-6ntw7x86b8] {
    font-size: 2.5rem;
    color: #C7D2FE;
    display: block;
    margin-bottom: 0.75rem;
}

.ai-empty p[b-6ntw7x86b8] {
    color: #64748B;
    font-size: 0.938rem;
    margin: 0 0 0.75rem 0;
    line-height: 1.5;
}

.ai-limit-badge[b-6ntw7x86b8] {
    display: inline-block;
    font-size: 0.813rem;
    color: #2A9EA6;
    font-weight: 600;
    background: #EDF7F8;
    padding: 0.375rem 0.875rem;
    border-radius: 20px;
}

/* ========================================
   QUICK ACTIONS
   ======================================== */
.actions-list[b-6ntw7x86b8] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.action-item[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: white;
    border: 1px solid #F1F5F9;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.action-item:hover[b-6ntw7x86b8] {
    border-color: #C7D2FE;
    background: #FAFAFF;
    transform: translateX(4px);
}

.action-item-icon[b-6ntw7x86b8] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.063rem;
    color: white;
    flex-shrink: 0;
}

.action-icon-primary[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #2A9EA6, #7A82AB);
}

.action-icon-info[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #3B82F6, #2563EB);
}

.action-icon-warning[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
}

.action-icon-success[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #10B981, #059669);
}

.action-icon-secondary[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #64748B, #475569);
}

.action-item-content[b-6ntw7x86b8] {
    flex: 1;
    min-width: 0;
}

.action-item-title[b-6ntw7x86b8] {
    font-size: 0.938rem;
    font-weight: 600;
    color: #0F172A;
    display: block;
    line-height: 1.3;
}

.action-item-desc[b-6ntw7x86b8] {
    font-size: 0.813rem;
    color: #94A3B8;
    font-weight: 400;
    display: block;
}

.action-item-arrow[b-6ntw7x86b8] {
    color: #CBD5E1;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.action-item:hover .action-item-arrow[b-6ntw7x86b8] {
    color: #2A9EA6;
    transform: translateX(3px);
}

/* ========================================
   ACCOUNT INFORMATION
   ======================================== */
.info-list[b-6ntw7x86b8] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.info-row[b-6ntw7x86b8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #F1F5F9;
}

.info-row:last-child[b-6ntw7x86b8] {
    border-bottom: none;
    padding-bottom: 0;
}

.info-row:first-child[b-6ntw7x86b8] {
    padding-top: 0;
}

.info-row-label[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #64748B;
    font-weight: 500;
}

.info-row-label i[b-6ntw7x86b8] {
    font-size: 1rem;
    color: #94A3B8;
}

.info-row-value[b-6ntw7x86b8] {
    font-size: 0.938rem;
    font-weight: 600;
    color: #0F172A;
}

.info-row-mono[b-6ntw7x86b8] {
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Courier New', monospace;
    font-size: 0.75rem;
    color: #64748B;
    background: #F8FAFC;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
}

/* Danger Zone */
.p-card-danger-zone[b-6ntw7x86b8] {
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.04), rgba(239, 68, 68, 0.02));
    border-top: 1px solid #FEE2E2;
}

.danger-zone-header[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.813rem;
    font-weight: 600;
    color: #991B1B;
    margin-bottom: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.danger-zone-header i[b-6ntw7x86b8] {
    font-size: 0.875rem;
}

.btn-danger-outline[b-6ntw7x86b8] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: white;
    color: #DC2626;
    border: 2px solid #FECACA;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger-outline:hover[b-6ntw7x86b8] {
    background: #DC2626;
    color: white;
    border-color: #DC2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

/* ========================================
   SUBSCRIPTION CARD
   ======================================== */
.sub-card[b-6ntw7x86b8] {
    margin-bottom: 0;
}

.sub-active-body[b-6ntw7x86b8] {
    padding: 1.75rem;
    text-align: center;
}

.sub-plan-badge[b-6ntw7x86b8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.sub-plan-annual[b-6ntw7x86b8] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(5, 150, 105, 0.12));
    color: #065F46;
    border: 1.5px solid #A7F3D0;
}

.sub-plan-monthly[b-6ntw7x86b8] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(37, 99, 235, 0.12));
    color: #1E40AF;
    border: 1.5px solid #BFDBFE;
}

.sub-price[b-6ntw7x86b8] {
    margin-bottom: 0.375rem;
}

.sub-price-amount[b-6ntw7x86b8] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.03em;
}

.sub-price-period[b-6ntw7x86b8] {
    font-size: 1rem;
    color: #64748B;
    font-weight: 500;
}

.sub-description[b-6ntw7x86b8] {
    color: #64748B;
    font-size: 0.938rem;
    margin: 0 0 1.5rem 0;
}

/* Subscription Details */
.sub-details[b-6ntw7x86b8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.125rem;
    background: #F8FAFC;
    border-radius: 14px;
    border: 1px solid #F1F5F9;
    margin-bottom: 1.5rem;
}

.sub-detail-row[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    text-align: left;
}

.sub-detail-icon[b-6ntw7x86b8] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #EDF7F8, #E0E7FF);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sub-detail-icon i[b-6ntw7x86b8] {
    font-size: 1rem;
    color: #2A9EA6;
}

.sub-detail-info[b-6ntw7x86b8] {
    display: flex;
    flex-direction: column;
}

.sub-detail-label[b-6ntw7x86b8] {
    font-size: 0.75rem;
    color: #94A3B8;
    font-weight: 500;
}

.sub-detail-value[b-6ntw7x86b8] {
    font-size: 0.938rem;
    font-weight: 600;
    color: #0F172A;
}

/* Subscription Tabs */
.sub-tabs[b-6ntw7x86b8] {
    display: flex;
    gap: 0.25rem;
    border-bottom: 2px solid #F1F5F9;
    margin-bottom: 0;
}

.sub-tab[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    padding: 0.75rem 1.125rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748B;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.sub-tab i[b-6ntw7x86b8] {
    font-size: 0.938rem;
}

.sub-tab:hover[b-6ntw7x86b8] {
    color: #2A9EA6;
    background: rgba(42, 158, 166, 0.04);
}

.sub-tab-active[b-6ntw7x86b8] {
    color: #2A9EA6;
    border-bottom-color: #2A9EA6;
    font-weight: 600;
}

.sub-tab-content[b-6ntw7x86b8] {
    padding: 1.5rem 0 0;
}

/* Subscription Alert */
.sub-alert[b-6ntw7x86b8] {
    display: flex;
    gap: 0.875rem;
    padding: 1.125rem;
    border-radius: 14px;
    margin-bottom: 1.25rem;
}

.sub-alert-warning[b-6ntw7x86b8] {
    background: #FFFBEB;
    border: 1px solid #FDE68A;
}

.sub-alert-icon[b-6ntw7x86b8] {
    flex-shrink: 0;
    font-size: 1.25rem;
}

.sub-alert-warning .sub-alert-icon[b-6ntw7x86b8] {
    color: #D97706;
}

.sub-alert-body strong[b-6ntw7x86b8] {
    display: block;
    font-size: 0.938rem;
    color: #92400E;
    margin-bottom: 0.375rem;
}

.sub-alert-body p[b-6ntw7x86b8] {
    font-size: 0.875rem;
    color: #A16207;
    margin: 0 0 0.875rem 0;
    line-height: 1.5;
}

.btn-success-sm[b-6ntw7x86b8] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.813rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-success-sm:hover:not(:disabled)[b-6ntw7x86b8] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-success-sm:disabled[b-6ntw7x86b8] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Subscription Actions */
.sub-actions[b-6ntw7x86b8] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.btn-sub-upgrade[b-6ntw7x86b8],
.btn-sub-downgrade[b-6ntw7x86b8],
.btn-sub-cancel[b-6ntw7x86b8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-sub-upgrade[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
}

.btn-sub-upgrade:hover[b-6ntw7x86b8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.btn-sub-downgrade[b-6ntw7x86b8] {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
}

.btn-sub-downgrade:hover[b-6ntw7x86b8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
}

.btn-sub-cancel[b-6ntw7x86b8] {
    background: #F8FAFC;
    color: #475569;
    border: 1.5px solid #E2E8F0;
}

.btn-sub-cancel:hover[b-6ntw7x86b8] {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #DC2626;
}

/* Billing Table */
.billing-table-wrap[b-6ntw7x86b8] {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #F1F5F9;
}

.billing-table[b-6ntw7x86b8] {
    width: 100%;
    border-collapse: collapse;
}

.billing-table th[b-6ntw7x86b8] {
    background: #F8FAFC;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #475569;
    font-size: 0.813rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid #E2E8F0;
}

.billing-table td[b-6ntw7x86b8] {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #F1F5F9;
    color: #334155;
    font-size: 0.875rem;
}

.billing-table tbody tr:last-child td[b-6ntw7x86b8] {
    border-bottom: none;
}

.billing-table tbody tr:hover[b-6ntw7x86b8] {
    background: #FAFBFC;
}

.billing-amount[b-6ntw7x86b8] {
    font-weight: 700;
    color: #0F172A;
}

.billing-period[b-6ntw7x86b8] {
    color: #64748B;
    font-size: 0.813rem;
}

.billing-status[b-6ntw7x86b8] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.billing-status-success[b-6ntw7x86b8] {
    background: #D1FAE5;
    color: #065F46;
}

.billing-status-warning[b-6ntw7x86b8] {
    background: #FEF3C7;
    color: #92400E;
}

.billing-status-danger[b-6ntw7x86b8] {
    background: #FEE2E2;
    color: #991B1B;
}

.billing-invoice-actions[b-6ntw7x86b8] {
    white-space: nowrap;
}

.btn-invoice[b-6ntw7x86b8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background: #F1F5F9;
    color: #2A9EA6;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.813rem;
    font-weight: 600;
    margin-right: 0.375rem;
    transition: all 0.2s ease;
}

.btn-invoice:hover[b-6ntw7x86b8] {
    background: #E0E7FF;
    transform: translateY(-1px);
}

/* Payment Method */
.payment-method-card[b-6ntw7x86b8] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.25rem;
    background: #F8FAFC;
    border-radius: 14px;
    border: 1px solid #F1F5F9;
}

.payment-method-icon[b-6ntw7x86b8] {
    flex-shrink: 0;
}

.payment-method-icon i[b-6ntw7x86b8] {
    font-size: 2.25rem;
    color: #2A9EA6;
}

.payment-method-info p[b-6ntw7x86b8] {
    margin: 0 0 1rem 0;
    color: #64748B;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Subscription Messages */
.sub-message[b-6ntw7x86b8] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 1rem;
    background: #EFF6FF;
    border-radius: 12px;
    color: #1E40AF;
    font-size: 0.875rem;
    line-height: 1.5;
}

.sub-message i[b-6ntw7x86b8] {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Free Plan State */
.sub-free-body[b-6ntw7x86b8] {
    padding: 2.5rem 2rem;
    text-align: center;
}

.sub-free-icon-wrap[b-6ntw7x86b8] {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #94A3B8;
}

.sub-free-body h3[b-6ntw7x86b8] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 0.375rem 0;
    letter-spacing: -0.02em;
}

.sub-free-body > p[b-6ntw7x86b8] {
    color: #64748B;
    font-size: 0.938rem;
    margin: 0 0 1.75rem 0;
}

.sub-free-benefits[b-6ntw7x86b8] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
    text-align: left;
    padding: 1.25rem;
    background: #F8FAFC;
    border-radius: 14px;
    border: 1px solid #F1F5F9;
}

.sub-free-benefit[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: #334155;
    font-weight: 500;
}

.sub-free-benefit i[b-6ntw7x86b8] {
    color: #10B981;
    font-size: 1rem;
    flex-shrink: 0;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn-primary-action[b-6ntw7x86b8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.938rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: -0.01em;
}

.btn-primary-action:hover:not(:disabled)[b-6ntw7x86b8] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(42, 158, 166, 0.35);
}

.btn-primary-action:disabled[b-6ntw7x86b8] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary-action-sm[b-6ntw7x86b8] {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    border-radius: 10px;
}

.btn-primary-action-full[b-6ntw7x86b8] {
    width: 100%;
}

/* ========================================
   PURCHASED EXAMS SECTION
   ======================================== */
.purchased-section[b-6ntw7x86b8] {
    margin-top: 0.5rem;
}

.exams-grid[b-6ntw7x86b8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.125rem;
}

.exam-card[b-6ntw7x86b8] {
    padding: 1.5rem;
    background: #F8FAFC;
    border-radius: 16px;
    border: 1.5px solid #F1F5F9;
    text-align: center;
    transition: all 0.2s ease;
}

.exam-card:hover[b-6ntw7x86b8] {
    border-color: #C7D2FE;
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.exam-card-icon-wrap[b-6ntw7x86b8] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #2A9EA6, #7A82AB);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.25);
}

.exam-card-title[b-6ntw7x86b8] {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0 0 0.375rem 0;
    letter-spacing: -0.01em;
    line-height: 1.4;
}

.exam-card-count[b-6ntw7x86b8] {
    color: #64748B;
    font-size: 0.813rem;
    margin: 0 0 1.125rem 0;
    font-weight: 500;
}

/* ========================================
   MODALS
   ======================================== */
.modal-overlay[b-6ntw7x86b8] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: overlayFadeIn-b-6ntw7x86b8 0.2s ease-out;
}

@keyframes overlayFadeIn-b-6ntw7x86b8 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-card[b-6ntw7x86b8] {
    background: white;
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    animation: modalSlideUp-b-6ntw7x86b8 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.modal-card-wide[b-6ntw7x86b8] {
    max-width: 640px;
}

@keyframes modalSlideUp-b-6ntw7x86b8 {
    from {
        transform: translateY(20px) scale(0.98);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.modal-card-header[b-6ntw7x86b8] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-card-header h3[b-6ntw7x86b8] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    letter-spacing: -0.02em;
}

.modal-card-header h3 i[b-6ntw7x86b8] {
    font-size: 1.125rem;
    color: #64748B;
}

.modal-close[b-6ntw7x86b8] {
    background: none;
    border: none;
    font-size: 1.125rem;
    color: #94A3B8;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 8px;
    line-height: 1;
    transition: all 0.2s ease;
}

.modal-close:hover[b-6ntw7x86b8] {
    color: #0F172A;
    background: #F1F5F9;
}

.modal-card-body[b-6ntw7x86b8] {
    padding: 1.5rem;
}

.modal-card-body > p:first-child[b-6ntw7x86b8] {
    margin: 0 0 1rem 0;
    color: #64748B;
    font-size: 0.938rem;
}

.modal-info-box[b-6ntw7x86b8] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.125rem;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.modal-info-box i[b-6ntw7x86b8] {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 1rem;
}

.modal-info-box strong[b-6ntw7x86b8] {
    display: block;
    margin-bottom: 0.25rem;
}

.modal-info-box ul[b-6ntw7x86b8] {
    margin: 0.375rem 0 0 0;
    padding-left: 1.25rem;
}

.modal-info-box li[b-6ntw7x86b8] {
    margin: 0.25rem 0;
}

.modal-info-box-blue[b-6ntw7x86b8] {
    background: #EFF6FF;
    color: #1E40AF;
}

.modal-info-box-green[b-6ntw7x86b8] {
    background: #F0FDF4;
    color: #166534;
}

.modal-info-box-red[b-6ntw7x86b8] {
    background: #FEF2F2;
    color: #991B1B;
}

.modal-card-footer[b-6ntw7x86b8] {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid #F1F5F9;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.btn-modal-secondary[b-6ntw7x86b8] {
    padding: 0.625rem 1.25rem;
    background: #F8FAFC;
    color: #475569;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-secondary:hover:not(:disabled)[b-6ntw7x86b8] {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.btn-modal-secondary:disabled[b-6ntw7x86b8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-modal-danger[b-6ntw7x86b8] {
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, #EF4444, #DC2626);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-modal-danger:hover:not(:disabled)[b-6ntw7x86b8] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-modal-danger:disabled[b-6ntw7x86b8] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Plan Picker */
.plan-picker[b-6ntw7x86b8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.plan-picker-option[b-6ntw7x86b8] {
    border: 2px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.plan-picker-option:hover[b-6ntw7x86b8] {
    border-color: #C7D2FE;
    box-shadow: 0 4px 16px rgba(42, 158, 166, 0.1);
}

.plan-picker-selected[b-6ntw7x86b8] {
    border-color: #2A9EA6;
    background: linear-gradient(135deg, rgba(42, 158, 166, 0.04), rgba(124, 58, 237, 0.04));
    box-shadow: 0 4px 16px rgba(42, 158, 166, 0.15);
}

.plan-picker-header[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
    flex-wrap: wrap;
}

.plan-picker-header i[b-6ntw7x86b8] {
    font-size: 1.375rem;
    color: #2A9EA6;
}

.plan-picker-header h4[b-6ntw7x86b8] {
    margin: 0;
    font-size: 1.063rem;
    font-weight: 700;
    color: #0F172A;
}

.plan-picker-best[b-6ntw7x86b8] {
    background: #D1FAE5;
    color: #065F46;
    padding: 0.25rem 0.625rem;
    border-radius: 20px;
    font-size: 0.688rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.plan-picker-price[b-6ntw7x86b8] {
    margin-bottom: 0.5rem;
}

.plan-picker-amount[b-6ntw7x86b8] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.03em;
}

.plan-picker-period[b-6ntw7x86b8] {
    font-size: 0.938rem;
    color: #64748B;
}

.plan-picker-savings[b-6ntw7x86b8] {
    background: #D1FAE5;
    color: #065F46;
    padding: 0.5rem 0.875rem;
    border-radius: 10px;
    font-size: 0.813rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-align: center;
}

.plan-picker-features[b-6ntw7x86b8] {
    list-style: none;
    padding: 0;
    margin: 0.875rem 0 0 0;
}

.plan-picker-features li[b-6ntw7x86b8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0;
    color: #475569;
    font-size: 0.875rem;
    font-weight: 500;
}

.plan-picker-features i[b-6ntw7x86b8] {
    color: #10B981;
    font-size: 0.938rem;
}

.plan-picker-check[b-6ntw7x86b8] {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    background: #2A9EA6;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ========================================
   TOAST ALERT
   ======================================== */
.toast-alert[b-6ntw7x86b8] {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    max-width: 400px;
    background: white;
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    padding: 1rem 1.25rem;
    display: flex;
    gap: 0.875rem;
    z-index: 1001;
    animation: toastSlideIn-b-6ntw7x86b8 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes toastSlideIn-b-6ntw7x86b8 {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.toast-alert-icon[b-6ntw7x86b8] {
    width: 36px;
    height: 36px;
    background: #EFF6FF;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toast-alert-icon i[b-6ntw7x86b8] {
    font-size: 1.125rem;
    color: #3B82F6;
}

.toast-alert-content[b-6ntw7x86b8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.toast-alert-title[b-6ntw7x86b8] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
}

.toast-alert-message[b-6ntw7x86b8] {
    font-size: 0.813rem;
    color: #64748B;
    line-height: 1.4;
}

.toast-alert-close[b-6ntw7x86b8] {
    background: none;
    border: none;
    color: #CBD5E1;
    cursor: pointer;
    padding: 0.25rem;
    transition: all 0.2s ease;
    align-self: flex-start;
    border-radius: 6px;
}

.toast-alert-close:hover[b-6ntw7x86b8] {
    color: #64748B;
    background: #F1F5F9;
}

/* ========================================
   LOADING & EMPTY STATES
   ======================================== */
.loading-inline[b-6ntw7x86b8] {
    text-align: center;
    padding: 2rem 1rem;
}

.loading-spinner[b-6ntw7x86b8] {
    width: 32px;
    height: 32px;
    margin: 0 auto 0.875rem;
    border: 3px solid #E2E8F0;
    border-top-color: #2A9EA6;
    border-radius: 50%;
    animation: spinnerRotate-b-6ntw7x86b8 0.8s linear infinite;
}

@keyframes spinnerRotate-b-6ntw7x86b8 {
    to { transform: rotate(360deg); }
}

.loading-inline p[b-6ntw7x86b8] {
    color: #64748B;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
}

.empty-state[b-6ntw7x86b8] {
    text-align: center;
    padding: 2rem 1rem;
    color: #94A3B8;
}

.empty-state i[b-6ntw7x86b8] {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.625rem;
    color: #CBD5E1;
}

.empty-state p[b-6ntw7x86b8] {
    margin: 0;
    font-size: 0.875rem;
    color: #94A3B8;
    font-weight: 500;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1024px) {
    .profile-grid[b-6ntw7x86b8] {
        grid-template-columns: 1fr;
    }

    .profile-col-right[b-6ntw7x86b8] {
        position: static;
        order: -1;
    }

    .hero-stats-bar[b-6ntw7x86b8] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .hero-stat-divider[b-6ntw7x86b8] {
        display: none;
    }

    .hero-stat-item[b-6ntw7x86b8] {
        flex: 0 0 calc(50% - 0.5rem);
        justify-content: flex-start;
        padding: 0.75rem;
        background: #F8FAFC;
        border-radius: 12px;
    }
}

@media (max-width: 768px) {
    .profile-hero-section[b-6ntw7x86b8] {
        padding: 1rem 1rem 0;
    }

    .hero-card-body[b-6ntw7x86b8] {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .hero-avatar[b-6ntw7x86b8] {
        margin-top: -48px;
    }

    .hero-name[b-6ntw7x86b8] {
        font-size: 1.375rem;
    }

    .hero-email[b-6ntw7x86b8] {
        justify-content: center;
    }

    .hero-badges[b-6ntw7x86b8] {
        justify-content: center;
    }

    .hero-stats-bar[b-6ntw7x86b8] {
        padding: 1rem;
    }

    .hero-stat-item[b-6ntw7x86b8] {
        flex: 0 0 calc(50% - 0.375rem);
    }

    .profile-content[b-6ntw7x86b8] {
        padding: 1rem;
    }

    .p-card-body[b-6ntw7x86b8] {
        padding: 1.25rem;
    }

    .p-card-header[b-6ntw7x86b8] {
        padding: 1.125rem 1.25rem;
    }

    .perf-grid[b-6ntw7x86b8] {
        grid-template-columns: 1fr;
    }

    .sub-active-body[b-6ntw7x86b8] {
        padding: 1.25rem;
    }

    .sub-tabs[b-6ntw7x86b8] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .sub-tab span[b-6ntw7x86b8] {
        white-space: nowrap;
    }

    .sub-actions[b-6ntw7x86b8] {
        flex-direction: column;
    }

    .exams-grid[b-6ntw7x86b8] {
        grid-template-columns: 1fr;
    }

    .toast-alert[b-6ntw7x86b8] {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    .modal-card[b-6ntw7x86b8] {
        max-width: 100%;
        margin: 0.5rem;
    }

    .plan-picker[b-6ntw7x86b8] {
        grid-template-columns: 1fr;
    }

    .payment-method-card[b-6ntw7x86b8] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .billing-table th:nth-child(4)[b-6ntw7x86b8],
    .billing-table td:nth-child(4)[b-6ntw7x86b8] {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-stats-bar[b-6ntw7x86b8] {
        gap: 0.5rem;
    }

    .hero-stat-item[b-6ntw7x86b8] {
        flex: 0 0 calc(50% - 0.25rem);
        gap: 0.5rem;
    }

    .hero-stat-icon[b-6ntw7x86b8] {
        width: 34px;
        height: 34px;
        font-size: 0.938rem;
    }

    .hero-stat-value[b-6ntw7x86b8] {
        font-size: 1.063rem;
    }

    .hero-stat-label[b-6ntw7x86b8] {
        font-size: 0.688rem;
    }

    .sub-price-amount[b-6ntw7x86b8] {
        font-size: 2rem;
    }

    .h-badge[b-6ntw7x86b8] {
        font-size: 0.688rem;
        padding: 0.25rem 0.5rem;
    }
}
/* /Pages/Results.razor.rz.scp.css */
/* =========================================================
   Results Page — Premium Education Platform Design
   ========================================================= */

.rs-page[b-0ot6fskill] {
    max-width: 1240px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* ── Loading ── */
.rs-loading[b-0ot6fskill] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: 3rem 1rem;
}

.rs-loading p[b-0ot6fskill] {
    margin-top: 1rem;
    color: #94a3b8;
    font-size: 0.9375rem;
}

.rs-loading .loading-spinner[b-0ot6fskill],
.rs-spinner[b-0ot6fskill] {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #2A9EA6;
    border-radius: 50%;
    animation: rs-spin-b-0ot6fskill 0.7s linear infinite;
}

@keyframes rs-spin-b-0ot6fskill {
    to { transform: rotate(360deg); }
}

/* ── Empty ── */
.rs-empty[b-0ot6fskill] {
    text-align: center;
    padding: 4rem 1rem;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
}

.rs-empty i[b-0ot6fskill] {
    font-size: 3rem;
    color: #cbd5e1;
}

.rs-empty h2[b-0ot6fskill] {
    margin: 0.75rem 0 0.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.rs-empty p[b-0ot6fskill] {
    color: #94a3b8;
    font-size: 0.9375rem;
    margin-bottom: 1.25rem;
}

.rs-empty__btn[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: #2A9EA6;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}

.rs-empty__btn:hover[b-0ot6fskill] {
    background: #26808C;
    color: #fff;
    transform: translateY(-1px);
}

/* ── Hero ── */
.rs-hero[b-0ot6fskill] {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    margin-bottom: 1.5rem;
}

.rs-hero__title[b-0ot6fskill] {
    font-size: 2.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.035em;
    margin: 0 0 0.5rem;
    line-height: 1.15;
}

.rs-hero__title i[b-0ot6fskill] {
    color: #2A9EA6;
    margin-right: 0.5rem;
}

.rs-hero__sub[b-0ot6fskill] {
    font-size: 1.0625rem;
    color: #64748b;
    margin: 0;
    line-height: 1.6;
}

/* ── Stats pills ── */
.rs-stats[b-0ot6fskill] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.rs-stat[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #64748b;
    transition: all 0.15s;
}

.rs-stat:hover[b-0ot6fskill] {
    border-color: #cbd5e1;
    background: #f8fafc;
}

.rs-stat__num[b-0ot6fskill] {
    font-weight: 700;
    color: #0f172a;
}

.rs-stat__num--green[b-0ot6fskill] {
    color: #059669;
}

.rs-stat__num--red[b-0ot6fskill] {
    color: #dc2626;
}

.rs-stat__num--amber[b-0ot6fskill] {
    color: #d97706;
}

.rs-stat__num--indigo[b-0ot6fskill] {
    color: #2A9EA6;
}

/* ── Grid ── */
.rs-grid[b-0ot6fskill] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1100px) {
    .rs-grid[b-0ot6fskill] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .rs-grid[b-0ot6fskill] { grid-template-columns: 1fr; }
}

/* ── Result Card ── */
.rs-card[b-0ot6fskill] {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.rs-card:hover[b-0ot6fskill] {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
}

.rs-card--pass[b-0ot6fskill] {
    border-left: 4px solid #059669;
}

.rs-card--fail[b-0ot6fskill] {
    border-left: 4px solid #dc2626;
}

.rs-card__body[b-0ot6fskill] {
    padding: 1.5rem 1.25rem 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rs-card__title-row[b-0ot6fskill] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-right: 5rem;
}

.rs-card__dot[b-0ot6fskill] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rs-card__dot--pass[b-0ot6fskill] {
    background-color: #059669;
}

.rs-card__dot--fail[b-0ot6fskill] {
    background-color: #dc2626;
}

.rs-card__title[b-0ot6fskill] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.rs-card__badge[b-0ot6fskill] {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    white-space: nowrap;
}

.rs-card__badge--pass[b-0ot6fskill] {
    background: #ecfdf5;
    color: #059669;
    border: 1px solid #d1fae5;
}

.rs-card__tips-badge[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border: 1px solid #FCD34D;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.rs-card__tips-badge i[b-0ot6fskill] {
    font-size: 0.75rem;
    color: #B45309;
}

.rs-card__tips-badge--hero[b-0ot6fskill] {
    margin-top: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    padding: 0.35rem 0.75rem;
    background: rgba(255, 255, 255, 0.95);
    color: #92400E;
    border: 1px solid rgba(252, 211, 77, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rs-card__badge--fail[b-0ot6fskill] {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.rs-card__meta[b-0ot6fskill] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}

.rs-card__meta-item[b-0ot6fskill] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.rs-card__meta-item i[b-0ot6fskill] {
    font-size: 0.8125rem;
    width: 1rem;
    text-align: center;
}

.rs-card__meta-item i.trophy[b-0ot6fskill] { color: #d97706; }
.rs-card__meta-item i.graph[b-0ot6fskill] { color: #2A9EA6; }
.rs-card__meta-item i.clock[b-0ot6fskill] { color: #3b82f6; }
.rs-card__meta-item i.cal[b-0ot6fskill] { color: #8B93BC; }

.rs-card__meta-item strong[b-0ot6fskill] {
    color: #0f172a;
    font-weight: 600;
}

.rs-card__footer[b-0ot6fskill] {
    padding: 1rem 1.25rem 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.rs-card__btn[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.5rem 0.875rem;
    background: #2A9EA6;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

.rs-card__btn:hover[b-0ot6fskill] {
    opacity: 0.88;
    transform: translateY(-1px);
}

/* ── Back Button ── */
.rs-back[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 1.5rem;
}

.rs-back:hover[b-0ot6fskill] {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #334155;
}

/* ── Detail Hero ── */
.rs-detail-hero[b-0ot6fskill] {
    text-align: center;
    padding: 2.5rem 1.5rem;
    border-radius: 16px;
    margin-bottom: 1.5rem;
    border: 1.5px solid #e2e8f0;
}

.rs-detail-hero--pass[b-0ot6fskill] {
    background: linear-gradient(135deg, rgba(5, 150, 105, 0.06) 0%, rgba(16, 185, 129, 0.04) 100%);
    border-color: #d1fae5;
}

.rs-detail-hero--fail[b-0ot6fskill] {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.06) 0%, rgba(239, 68, 68, 0.04) 100%);
    border-color: #fecaca;
}

.rs-detail-hero__icon[b-0ot6fskill] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.rs-detail-hero--pass .rs-detail-hero__icon[b-0ot6fskill] {
    color: #059669;
}

.rs-detail-hero--fail .rs-detail-hero__icon[b-0ot6fskill] {
    color: #dc2626;
}

.rs-detail-hero__title[b-0ot6fskill] {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.025em;
    margin: 0 0 0.375rem;
    line-height: 1.2;
}

.rs-detail-hero__sub[b-0ot6fskill] {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0;
}

/* ── Detail Stats Row ── */
.rs-detail-stats[b-0ot6fskill] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.rs-detail-stat[b-0ot6fskill] {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: all 0.15s;
}

.rs-detail-stat:hover[b-0ot6fskill] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.rs-detail-stat__label[b-0ot6fskill] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}

.rs-detail-stat__value[b-0ot6fskill] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

/* ── Share strip below stats ────────────────────────────────────────
   Slots between the stats and the action buttons. Stays neutral so it
   reads as a tool, not a flashy social CTA. */
.rs-detail-share[b-0ot6fskill] {
    margin: -0.5rem 0 1.5rem;
    padding: 1rem 1.25rem;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
}

/* ── Quick Actions ── */
.rs-actions[b-0ot6fskill] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.rs-action[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
    white-space: nowrap;
    text-decoration: none;
}

.rs-action:hover[b-0ot6fskill] {
    opacity: 0.88;
    transform: translateY(-1px);
}

.rs-action--study[b-0ot6fskill] {
    background: #edf7f8;
    color: #26808C;
}

.rs-action--study:hover[b-0ot6fskill] {
    background: #e0e7ff;
    color: #26808C;
}

.rs-action--retake[b-0ot6fskill] {
    background: #059669;
    color: #fff;
}

/* ── Upgrade Section ── */
.rs-upgrade[b-0ot6fskill] {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.04) 0%, rgba(234, 179, 8, 0.04) 100%);
    border-radius: 16px;
    border: 1.5px solid #fde68a;
}

.rs-upgrade__header[b-0ot6fskill] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.rs-upgrade__title[b-0ot6fskill] {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.rs-upgrade__title i[b-0ot6fskill] {
    color: #d97706;
}

.rs-upgrade__desc[b-0ot6fskill] {
    font-size: 1rem;
    color: #475569;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.5;
}

.rs-upgrade__versions[b-0ot6fskill] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.rs-upgrade__version-card[b-0ot6fskill] {
    background: #fff;
    border-radius: 14px;
    padding: 1.25rem;
    text-align: center;
    border: 2px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    transition: all 0.15s;
}

.rs-upgrade__version-card:hover[b-0ot6fskill] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.rs-upgrade__version-card--unlocked[b-0ot6fskill] {
    border-color: #10b981;
    background: #f0fdf4;
}

.rs-upgrade__version-card--locked[b-0ot6fskill] {
    border-color: #e2e8f0;
    background: #fff;
}

.rs-upgrade__version-badge[b-0ot6fskill] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.rs-upgrade__version-badge--unlocked[b-0ot6fskill] {
    background: #d1fae5;
    color: #059669;
}

.rs-upgrade__version-badge--locked[b-0ot6fskill] {
    background: #e2e8f0;
    color: #475569;
}

.rs-upgrade__version-tips[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #92400E;
    border: 1px solid #FCD34D;
    margin-top: 0.5rem;
    letter-spacing: 0.01em;
}

.rs-upgrade__version-tips i[b-0ot6fskill] {
    font-size: 0.75rem;
    color: #B45309;
}

.rs-upgrade__version-icon[b-0ot6fskill] {
    font-size: 2rem;
    color: #94a3b8;
    margin-bottom: 0.5rem;
}

.rs-upgrade__version-name[b-0ot6fskill] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.25rem;
}

.rs-upgrade__version-count[b-0ot6fskill] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
}

/* Benefits box */
.rs-upgrade__benefits[b-0ot6fskill] {
    background: #fff;
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #e2e8f0;
}

.rs-upgrade__benefits-title[b-0ot6fskill] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1rem;
    text-align: center;
    letter-spacing: -0.01em;
}

.rs-upgrade__benefits-grid[b-0ot6fskill] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.rs-upgrade__benefit[b-0ot6fskill] {
    display: flex;
    align-items: start;
    gap: 0.75rem;
}

.rs-upgrade__benefit i[b-0ot6fskill] {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.rs-upgrade__benefit i.check[b-0ot6fskill] { color: #059669; }
.rs-upgrade__benefit i.stars[b-0ot6fskill] { color: #2A9EA6; }
.rs-upgrade__benefit i.infinity[b-0ot6fskill] { color: #d97706; }

.rs-upgrade__benefit strong[b-0ot6fskill] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.125rem;
}

.rs-upgrade__benefit p[b-0ot6fskill] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* CTA buttons */
.rs-upgrade__cta[b-0ot6fskill] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.rs-upgrade__btn[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.rs-upgrade__btn:hover[b-0ot6fskill] {
    opacity: 0.88;
    transform: translateY(-1px);
}

.rs-upgrade__btn--primary[b-0ot6fskill] {
    background: #2A9EA6;
    color: #fff;
}

.rs-upgrade__btn--secondary[b-0ot6fskill] {
    background: #f8fafc;
    color: #475569;
    border: 1.5px solid #e2e8f0;
}

.rs-upgrade__btn--secondary:hover[b-0ot6fskill] {
    background: #f1f5f9;
}

.rs-upgrade__tip[b-0ot6fskill] {
    text-align: center;
    font-size: 0.8125rem;
    color: #64748b;
    margin-top: 1rem;
}

/* ── History Section ── */
.rs-history[b-0ot6fskill] {
    margin-bottom: 2rem;
}

.rs-history__header[b-0ot6fskill] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
}

.rs-history__title[b-0ot6fskill] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rs-history__title i[b-0ot6fskill] {
    color: #2A9EA6;
}

.rs-history__count[b-0ot6fskill] {
    font-size: 0.8125rem;
    color: #94a3b8;
    font-weight: 500;
}

/* ── Timeline ── */
.rs-timeline[b-0ot6fskill] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rs-timeline-item[b-0ot6fskill] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.rs-timeline-dot[b-0ot6fskill] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.875rem;
    color: #fff;
    margin-top: 0.5rem;
}

.rs-timeline-item--pass .rs-timeline-dot[b-0ot6fskill] {
    background: #059669;
}

.rs-timeline-item--fail .rs-timeline-dot[b-0ot6fskill] {
    background: #dc2626;
}

.rs-timeline-card[b-0ot6fskill] {
    flex: 1;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.rs-timeline-card:hover[b-0ot6fskill] {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.rs-timeline-card--selected[b-0ot6fskill] {
    border: 2.5px solid #2A9EA6;
    box-shadow: 0 0 0 4px rgba(42, 158, 166, 0.1);
    background: linear-gradient(to bottom, rgba(42, 158, 166, 0.03), white);
}

.rs-timeline-card__header[b-0ot6fskill] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.rs-timeline-score[b-0ot6fskill] {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.rs-timeline-score--pass[b-0ot6fskill] {
    color: #059669;
}

.rs-timeline-score--fail[b-0ot6fskill] {
    color: #dc2626;
}

.rs-timeline-date[b-0ot6fskill] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

.rs-timeline-card__title[b-0ot6fskill] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

.rs-timeline-meta[b-0ot6fskill] {
    display: flex;
    gap: 1rem;
    font-size: 0.8125rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.rs-timeline-meta span[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.rs-timeline-meta i[b-0ot6fskill] {
    font-size: 0.75rem;
    opacity: 0.7;
}

.rs-timeline-btn[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: #26808C;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
    box-shadow: 0 4px 12px rgba(38, 128, 140, 0.28);
}

.rs-timeline-btn:hover[b-0ot6fskill] {
    background: #1f6770;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(38, 128, 140, 0.35);
}

.rs-timeline-btn i[b-0ot6fskill] {
    transition: transform 0.15s;
}

.rs-timeline-btn:hover i[b-0ot6fskill] {
    transform: translateX(2px);
}

/* ── Review Section ── */
.rs-review[b-0ot6fskill] {
    margin-bottom: 2rem;
}

.rs-review__title[b-0ot6fskill] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1.25rem;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rs-review__title i[b-0ot6fskill] {
    color: #2A9EA6;
}

.rs-review__layout[b-0ot6fskill] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

/* ── Sidebar ── */
.rs-sidebar[b-0ot6fskill] {
    width: 220px;
    flex-shrink: 0;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.25rem;
    position: sticky;
    top: 90px; /* clears the 70px fixed top nav + breathing room */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}

.rs-sidebar__title[b-0ot6fskill] {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.rs-sidebar__grid[b-0ot6fskill] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.rs-sidebar__btn[b-0ot6fskill] {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    background: #fff;
    color: #475569;
    padding: 0;
    box-sizing: border-box;
}

.rs-sidebar__btn--correct[b-0ot6fskill] {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #059669;
}

.rs-sidebar__btn--incorrect[b-0ot6fskill] {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.rs-sidebar__btn--skipped[b-0ot6fskill] {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

.rs-sidebar__btn--active[b-0ot6fskill] {
    box-shadow: 0 0 0 2px #2A9EA6;
    border-color: #2A9EA6;
    transform: scale(1.1);
}

.rs-sidebar__legend[b-0ot6fskill] {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.6875rem;
    color: #64748b;
}

.rs-sidebar__legend-item[b-0ot6fskill] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.rs-sidebar__legend-dot[b-0ot6fskill] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.rs-sidebar__legend-dot--correct[b-0ot6fskill] {
    background: #059669;
}

.rs-sidebar__legend-dot--incorrect[b-0ot6fskill] {
    background: #dc2626;
}

.rs-sidebar__legend-dot--skipped[b-0ot6fskill] {
    background: #94a3b8;
}

/* ── Questions List ── */
.rs-questions[b-0ot6fskill] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Question Card ── */
.rs-question[b-0ot6fskill] {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.5rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    scroll-margin-top: 200px;
    animation: rs-stagger-in-b-0ot6fskill 0.45s ease both;
    animation-delay: var(--rs-stagger, 0ms);
    position: relative;
}

/* Disable text selection on review cards. Question content (question text,
   answers, explanation, exam tips) is paid material and should not be
   trivially copyable. The toolbar search input is excluded so users can
   still type in it. */
.rs-question--noselect[b-0ot6fskill],
.rs-question--noselect *[b-0ot6fskill] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
.rs-question--noselect button[b-0ot6fskill] { -webkit-user-select: none; user-select: none; }

@keyframes rs-stagger-in-b-0ot6fskill {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rs-question:hover[b-0ot6fskill] {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
    transform: translateY(-1px);
}

.rs-question--correct[b-0ot6fskill] {
    border-left: 4px solid #059669;
}

.rs-question--incorrect[b-0ot6fskill] {
    border-left: 4px solid #dc2626;
}

.rs-question--skipped[b-0ot6fskill] {
    border-left: 4px solid #94a3b8;
}

.rs-question--active[b-0ot6fskill] {
    box-shadow: 0 8px 28px rgba(42, 158, 166, 0.18);
    border-color: #2A9EA6;
}
.rs-question--active.rs-question--correct[b-0ot6fskill] {
    border-left-color: #059669;
}
.rs-question--active.rs-question--incorrect[b-0ot6fskill] {
    border-left-color: #dc2626;
}
.rs-question--active.rs-question--skipped[b-0ot6fskill] {
    border-left-color: #94a3b8;
}
.rs-question--active[b-0ot6fskill]::before {
    content: "";
    position: absolute;
    inset: -1.5px;
    border-radius: 14px;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(42, 158, 166, 0.18), rgba(42, 158, 166, 0));
    opacity: 0.5;
    transition: opacity 0.25s ease;
}

.rs-question--compact[b-0ot6fskill] {
    padding: 1rem 1.25rem;
}
.rs-question--compact .rs-question__text[b-0ot6fskill] {
    font-size: 0.9375rem;
}

.rs-question__header[b-0ot6fskill] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.rs-question__number[b-0ot6fskill] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #64748b;
}

.rs-question__status[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.625rem;
    border-radius: 100px;
}

.rs-question__status--correct[b-0ot6fskill] {
    background: #ecfdf5;
    color: #059669;
}

.rs-question__status--incorrect[b-0ot6fskill] {
    background: #fef2f2;
    color: #dc2626;
}

.rs-question__status--skipped[b-0ot6fskill] {
    background: #f1f5f9;
    color: #475569;
}

.rs-question__text[b-0ot6fskill] {
    font-size: 0.9375rem;
    color: #1e293b;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.rs-question__text strong[b-0ot6fskill] {
    color: #2A9EA6;
    font-weight: 700;
}

.rs-question__figure[b-0ot6fskill] {
    margin-bottom: 1rem;
    text-align: center;
}

.rs-question__figure img[b-0ot6fskill] {
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.rs-question__answer-section[b-0ot6fskill] {
    margin-bottom: 0.75rem;
}

.rs-question__answer-label[b-0ot6fskill] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.rs-question__answer-label i[b-0ot6fskill] {
    font-size: 0.8125rem;
}

.rs-question__answer-label--correct[b-0ot6fskill] {
    color: #059669;
}

.rs-question__answer-content[b-0ot6fskill] {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.rs-question__answer-content--user[b-0ot6fskill] {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
}

.rs-question__answer-content--correct[b-0ot6fskill] {
    background: #ecfdf5;
    border: 1px solid #d1fae5;
    color: #065f46;
}

.rs-question__explanation[b-0ot6fskill] {
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    transition: padding 0.25s ease;
}

.rs-question__explanation-label[b-0ot6fskill] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #92400e;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 0.25rem 0;
    cursor: pointer;
    text-align: left;
    user-select: none;
}

.rs-question__explanation-label:hover .rs-question__chevron[b-0ot6fskill] {
    color: #78350f;
}

.rs-question__explanation-text[b-0ot6fskill] {
    font-size: 0.8125rem;
    color: #78350f;
    line-height: 1.5;
    overflow: hidden;
    max-height: 4000px;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.25s ease;
    opacity: 1;
}

.rs-question__tips[b-0ot6fskill] {
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    border-left: 3px solid #0e7490;
    border-radius: 10px;
    transition: padding 0.25s ease;
}

.rs-question__tips-label[b-0ot6fskill] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0e7490;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: none;
    border: 0;
    padding: 0;
    margin: 0 0 0.25rem 0;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    user-select: none;
}

.rs-question__tips-label:hover .rs-question__chevron[b-0ot6fskill] {
    color: #164e63;
}

.rs-question__tips-text[b-0ot6fskill] {
    font-size: 0.8125rem;
    color: #164e63;
    line-height: 1.55;
    overflow: hidden;
    max-height: 4000px;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.25s ease;
    opacity: 1;
}

.rs-question__sublabel-main[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.rs-question__chevron[b-0ot6fskill] {
    font-size: 0.875rem;
    transition: transform 0.25s ease, color 0.2s ease;
    flex-shrink: 0;
}

.rs-question__explanation.is-collapsed[b-0ot6fskill],
.rs-question__tips.is-collapsed[b-0ot6fskill] {
    padding-bottom: 0.5rem;
}

.rs-question__explanation.is-collapsed .rs-question__explanation-label[b-0ot6fskill],
.rs-question__tips.is-collapsed .rs-question__tips-label[b-0ot6fskill] {
    margin-bottom: 0;
}

.rs-question__explanation.is-collapsed .rs-question__chevron[b-0ot6fskill],
.rs-question__tips.is-collapsed .rs-question__chevron[b-0ot6fskill] {
    transform: rotate(-90deg);
}

.rs-question__explanation.is-collapsed .rs-question__explanation-text[b-0ot6fskill],
.rs-question__tips.is-collapsed .rs-question__tips-text[b-0ot6fskill] {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}

/* Locked exam-tips card: visual cousin of the unlocked .rs-question__tips card
   (same teal palette, same border + radius) but with a lock badge and a CTA
   to /checkout/exam/{firebaseExamId}. Anchor-styled so the entire card is
   clickable. */
.rs-question__tips--locked[b-0ot6fskill] {
    display: block;
    background: linear-gradient(135deg, #ecfeff 0%, #e0f7fa 100%);
    border: 1px solid #a5f3fc;
    border-left: 3px solid #0e7490;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.rs-question__tips--locked:hover[b-0ot6fskill] {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(14, 116, 144, 0.18);
    border-color: #67e8f9;
    border-left-color: #0e7490;
    color: inherit;
    text-decoration: none;
}
.rs-question__tips-locked-head[b-0ot6fskill] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0e7490;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.rs-question__tips-locked-badge[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #cffafe;
    color: #155e75;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.rs-question__tips-locked-body[b-0ot6fskill] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.rs-question__tips-locked-msg[b-0ot6fskill] {
    color: #164e63;
    font-size: 0.875rem;
    line-height: 1.5;
    flex: 1;
    min-width: 200px;
}
.rs-question__tips-locked-cta[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: linear-gradient(135deg, #2A9EA6 0%, #26808C 100%);
    color: #fff;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.rs-question__tips--locked:hover .rs-question__tips-locked-cta[b-0ot6fskill] {
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.35);
}

/* ── Coach Section ── */
.rs-coach[b-0ot6fskill] {
    padding: 2rem;
    background: linear-gradient(135deg, rgba(42, 158, 166, 0.06) 0%, rgba(168, 85, 247, 0.06) 100%);
    border-radius: 16px;
    border: 1.5px solid #c7d2fe;
    margin-bottom: 2rem;
}

.rs-coach__inner[b-0ot6fskill] {
    display: flex;
    align-items: start;
    gap: 1.25rem;
}

.rs-coach__icon[b-0ot6fskill] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2A9EA6, #7A82AB);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rs-coach__icon i[b-0ot6fskill] {
    font-size: 1.375rem;
    color: #fff;
}

.rs-coach__body[b-0ot6fskill] {
    flex: 1;
}

.rs-coach__title[b-0ot6fskill] {
    margin: 0 0 0.375rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}

.rs-coach__desc[b-0ot6fskill] {
    margin: 0 0 1rem;
    color: #475569;
    font-size: 0.875rem;
    line-height: 1.6;
}

.rs-coach__actions[b-0ot6fskill] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rs-coach__btn[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: #2A9EA6;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

.rs-coach__btn:hover[b-0ot6fskill] {
    background: #26808C;
    color: #fff;
    transform: translateY(-1px);
}

.rs-coach__tier[b-0ot6fskill] {
    font-size: 0.8125rem;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Bottom coach (after questions) */
.rs-coach-bottom[b-0ot6fskill] {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1.5px solid #e2e8f0;
}

.rs-coach-bottom__title[b-0ot6fskill] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1rem;
    letter-spacing: -0.015em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rs-coach-bottom__title i[b-0ot6fskill] {
    color: #2A9EA6;
}

.rs-coach-bottom__actions[b-0ot6fskill] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.rs-coach-bottom__btn[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1.25rem;
    background: #2A9EA6;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}

.rs-coach-bottom__btn:hover[b-0ot6fskill] {
    background: #26808C;
    color: #fff;
    transform: translateY(-1px);
}

.rs-coach-bottom__tier[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.375rem 0.75rem;
    background: #edf7f8;
    color: #26808C;
    border-radius: 100px;
}

/* ── Modals ── */
.rs-modal-overlay[b-0ot6fskill] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.rs-modal-overlay--animated[b-0ot6fskill] {
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(8px);
    animation: rs-modal-fade-b-0ot6fskill 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes rs-modal-fade-b-0ot6fskill {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes rs-modal-pop-b-0ot6fskill {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.rs-modal[b-0ot6fskill] {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.08);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.rs-modal--animated[b-0ot6fskill] {
    animation: rs-modal-pop-b-0ot6fskill 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rs-modal--xl[b-0ot6fskill] {
    max-width: 90%;
}

.rs-modal--lg[b-0ot6fskill] {
    max-width: 720px;
}

.rs-modal--md[b-0ot6fskill] {
    max-width: 560px;
}

.rs-modal__header[b-0ot6fskill] {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f1f5f9;
}

.rs-modal__header--gradient[b-0ot6fskill] {
    background: linear-gradient(135deg, #8B93BC 0%, #2A9EA6 100%);
    color: #fff;
    border-bottom: none;
}

.rs-modal__header--warning[b-0ot6fskill] {
    background: linear-gradient(135deg, #FFB547 0%, #FF6B6B 100%);
    color: #fff;
    border-bottom: none;
}

.rs-modal__header-title[b-0ot6fskill] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rs-modal__close[b-0ot6fskill] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s;
}

.rs-modal__close:hover[b-0ot6fskill] {
    background: rgba(255, 255, 255, 0.3);
}

.rs-modal__body[b-0ot6fskill] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.rs-modal__footer[b-0ot6fskill] {
    padding: 1rem 1.5rem;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    background: #fafbfc;
}

.rs-modal__btn[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.rs-modal__btn--primary[b-0ot6fskill] {
    background: #2A9EA6;
    color: #fff;
}

.rs-modal__btn--primary:hover[b-0ot6fskill] {
    background: #26808C;
}

.rs-modal__btn--secondary[b-0ot6fskill] {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.rs-modal__btn--secondary:hover[b-0ot6fskill] {
    background: #e2e8f0;
}

/* Version Selection Modal */
.rs-version-modal__header[b-0ot6fskill] {
    padding: 1.25rem 1.5rem;
}

.rs-version-modal__header-inner[b-0ot6fskill] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-width: 0;
}

.rs-version-modal__header-icon[b-0ot6fskill] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: 1.25rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.rs-version-modal__header-text[b-0ot6fskill] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.rs-version-modal__header-text .rs-modal__header-title[b-0ot6fskill] {
    font-size: 1.0625rem;
    line-height: 1.2;
}

.rs-version-modal__header-sub[b-0ot6fskill] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.01em;
}

.rs-version-modal__body[b-0ot6fskill] {
    padding: 1.5rem;
}

.rs-version-modal__hint[b-0ot6fskill] {
    font-size: 0.8125rem;
    color: #64748b;
    margin: 0 0 1.25rem;
    line-height: 1.5;
}

.rs-version-list[b-0ot6fskill] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.rs-version-item[b-0ot6fskill] {
    width: 100%;
    text-align: left;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: inherit;
    position: relative;
    overflow: hidden;
}

.rs-version-item[b-0ot6fskill]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #2A9EA6, #8B93BC);
    opacity: 0;
    transition: opacity 0.18s ease;
}

.rs-version-item--pass[b-0ot6fskill]::before {
    background: linear-gradient(180deg, #10b981, #059669);
}

.rs-version-item--fail[b-0ot6fskill]::before {
    background: linear-gradient(180deg, #f87171, #ef4444);
}

.rs-version-item:hover[b-0ot6fskill] {
    border-color: #2A9EA6;
    box-shadow: 0 10px 24px -10px rgba(42, 158, 166, 0.35);
    transform: translateY(-1px);
    background: #fbfffe;
}

.rs-version-item:hover[b-0ot6fskill]::before {
    opacity: 1;
}

.rs-version-item:focus-visible[b-0ot6fskill] {
    outline: none;
    border-color: #2A9EA6;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.18);
}

.rs-version-item:active[b-0ot6fskill] {
    transform: translateY(0);
}

.rs-version-item__chip[b-0ot6fskill] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 0.5rem 0.625rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #f1f5fb, #e8f0f6);
    color: #2A9EA6;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid rgba(42, 158, 166, 0.18);
}

.rs-version-item--pass .rs-version-item__chip[b-0ot6fskill] {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #047857;
    border-color: rgba(5, 150, 105, 0.18);
}

.rs-version-item--fail .rs-version-item__chip[b-0ot6fskill] {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.18);
}

.rs-version-item__main[b-0ot6fskill] {
    flex: 1;
    min-width: 0;
}

.rs-version-item__title-row[b-0ot6fskill] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
    flex-wrap: wrap;
}

.rs-version-item__title[b-0ot6fskill] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

.rs-version-item__meta[b-0ot6fskill] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem 1rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.rs-version-item__meta span[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}

.rs-version-item__meta i[b-0ot6fskill] {
    color: #94a3b8;
    font-size: 0.875rem;
}

.rs-version-item__badge[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 100px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.rs-version-item__badge--pass[b-0ot6fskill] {
    background: #ecfdf5;
    color: #059669;
}

.rs-version-item__badge--fail[b-0ot6fskill] {
    background: #fef2f2;
    color: #dc2626;
}

.rs-version-item__arrow[b-0ot6fskill] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.875rem;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.rs-version-item:hover .rs-version-item__arrow[b-0ot6fskill] {
    background: #2A9EA6;
    color: #fff;
    transform: translateX(3px);
}

/* Upgrade modal cards */
.rs-upgrade-card[b-0ot6fskill] {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rs-upgrade-card--featured[b-0ot6fskill] {
    border: 2px solid #FFB547;
    background: linear-gradient(135deg, #FFF9E6 0%, #FFE9E9 100%);
    position: relative;
}

.rs-upgrade-card--primary[b-0ot6fskill] {
    border-color: #2A9EA6;
}

.rs-upgrade-card__best[b-0ot6fskill] {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    background: #fef3c7;
    color: #92400e;
}

.rs-upgrade-card__icon[b-0ot6fskill] {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.rs-upgrade-card__title[b-0ot6fskill] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 1rem;
}

.rs-upgrade-card__list[b-0ot6fskill] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    text-align: left;
    flex: 1;
}

.rs-upgrade-card__list li[b-0ot6fskill] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #334155;
    margin-bottom: 0.5rem;
}

.rs-upgrade-card__list li i[b-0ot6fskill] {
    color: #059669;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.rs-upgrade-card__btn[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.rs-upgrade-card__btn:hover[b-0ot6fskill] {
    opacity: 0.88;
    transform: translateY(-1px);
}

.rs-upgrade-card__btn--primary[b-0ot6fskill] {
    background: #2A9EA6;
    color: #fff;
}

.rs-upgrade-card__btn--warning[b-0ot6fskill] {
    background: #f59e0b;
    color: #fff;
}

/* AI Analysis content */
.rs-ai-content[b-0ot6fskill] {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Info banner in modal */
.rs-info-banner[b-0ot6fskill] {
    padding: 0.75rem 1rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid #93c5fd;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}

.rs-info-banner h6[b-0ot6fskill] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e40af;
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.rs-info-banner p[b-0ot6fskill] {
    font-size: 0.8125rem;
    color: #1e40af;
    margin: 0;
    line-height: 1.4;
}

.rs-version-modal__exam-name[b-0ot6fskill] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.375rem;
    line-height: 1.3;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .rs-detail-stats[b-0ot6fskill] {
        grid-template-columns: repeat(2, 1fr);
    }

    .rs-review__layout[b-0ot6fskill] {
        flex-direction: column;
    }

    .rs-sidebar[b-0ot6fskill] {
        width: 100%;
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .rs-sidebar__grid[b-0ot6fskill] {
        grid-template-columns: repeat(10, 1fr);
    }

    .rs-sidebar__legend[b-0ot6fskill] {
        flex-direction: row;
        gap: 1rem;
    }
}

@media (max-width: 640px) {
    .rs-page[b-0ot6fskill] { padding: 1rem; }
    .rs-hero[b-0ot6fskill] { padding: 1.5rem 0 1rem; }
    .rs-hero__title[b-0ot6fskill] { font-size: 1.75rem; }

    .rs-detail-hero[b-0ot6fskill] { padding: 1.5rem 1rem; }
    .rs-detail-hero__title[b-0ot6fskill] { font-size: 1.375rem; }

    .rs-detail-stats[b-0ot6fskill] {
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .rs-detail-stat[b-0ot6fskill] { padding: 1rem 0.75rem; }
    .rs-detail-stat__value[b-0ot6fskill] { font-size: 1.25rem; }

    .rs-actions[b-0ot6fskill] { flex-direction: column; }
    .rs-action[b-0ot6fskill] { width: 100%; justify-content: center; }

    .rs-coach__inner[b-0ot6fskill] { flex-direction: column; }

    .rs-timeline-item[b-0ot6fskill] { flex-direction: column; }
    .rs-timeline-dot[b-0ot6fskill] { margin-top: 0; }

    .rs-question[b-0ot6fskill] { padding: 1rem; }

    .rs-modal--xl[b-0ot6fskill] { max-width: 100%; }

    .rs-upgrade__versions[b-0ot6fskill] {
        grid-template-columns: 1fr 1fr;
    }

    .rs-upgrade__benefits-grid[b-0ot6fskill] {
        grid-template-columns: 1fr;
    }

    .rs-upgrade__cta[b-0ot6fskill] {
        flex-direction: column;
    }

    .rs-upgrade__btn[b-0ot6fskill] {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Resume Banner (in-progress / save-for-later attempts)
   ========================================================================== */

.rs-resume-banner[b-0ot6fskill] {
    background: linear-gradient(135deg, #eef6f8 0%, #f8f5ff 100%);
    border: 1px solid #cfe3e8;
    border-left: 4px solid #26808C;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 2rem;
    box-shadow: 0 4px 16px rgba(38, 128, 140, 0.08);
}

.rs-resume-banner__header[b-0ot6fskill] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.rs-resume-banner__header i[b-0ot6fskill] {
    color: #26808C;
    font-size: 1.25rem;
}

.rs-resume-banner__header h3[b-0ot6fskill] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1f2937;
}

.rs-resume-banner__list[b-0ot6fskill] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.rs-resume-item[b-0ot6fskill] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.875rem 1rem;
}

.rs-resume-item__main[b-0ot6fskill] {
    flex: 1;
    min-width: 0;
}

.rs-resume-item__title[b-0ot6fskill] {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-resume-item__meta[b-0ot6fskill] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: #6b7280;
}

.rs-resume-item__meta span[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
}

.rs-resume-item__meta i[b-0ot6fskill] {
    font-size: 0.8125rem;
    color: #9ca3af;
}

.rs-resume-item__btn[b-0ot6fskill] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #26808C 0%, #2A9EA6 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rs-resume-item__btn:hover[b-0ot6fskill] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.3);
}

@media (max-width: 576px) {
    .rs-resume-item[b-0ot6fskill] {
        flex-direction: column;
        align-items: stretch;
    }
    .rs-resume-item__btn[b-0ot6fskill] { justify-content: center; }
}

/* ============================================================
   REVIEW TOOLBAR (sticky filter + search + bulk controls)
   ============================================================ */
.rs-toolbar[b-0ot6fskill] {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.rs-toolbar__row[b-0ot6fskill] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 0.875rem 1rem;
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.04);
}
/* Only the search + filter-chips row stays pinned while scrolling. The actions
   row (expand/collapse + density) scrolls away naturally so it doesn't eat
   review space, since users rarely touch it after the initial setup. */
.rs-toolbar__row--filters[b-0ot6fskill] {
    position: sticky;
    top: 70px;
    z-index: 12;
    gap: 0.75rem;
}
.rs-toolbar__row--actions[b-0ot6fskill] { gap: 1rem; }

.rs-toolbar__search[b-0ot6fskill] {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 280px;
    min-width: 240px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 0.5rem 0 0.75rem;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.rs-toolbar__search:focus-within[b-0ot6fskill] {
    border-color: #2A9EA6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(42, 158, 166, 0.12);
}
.rs-toolbar__search > i:first-child[b-0ot6fskill] { color: #94a3b8; font-size: 0.9375rem; }
.rs-toolbar__search input[b-0ot6fskill] {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 0.5625rem 0.5rem;
    font-size: 0.875rem;
    color: #0f172a;
    outline: none;
}
.rs-toolbar__search input[b-0ot6fskill]::placeholder { color: #94a3b8; }
.rs-toolbar__search-clear[b-0ot6fskill] { background: none; border: 0; color: #94a3b8; cursor: pointer; padding: 0 0.25rem; font-size: 0.875rem; transition: color 0.15s; }
.rs-toolbar__search-clear:hover[b-0ot6fskill] { color: #475569; }

.rs-toolbar__chips[b-0ot6fskill] { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.rs-chip[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4375rem 0.75rem;
    border-radius: 999px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}
.rs-chip i[b-0ot6fskill] { font-size: 0.8125rem; }
.rs-chip:hover[b-0ot6fskill] { background: #f8fafc; border-color: #cbd5e1; }
.rs-chip__count[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    font-size: 0.6875rem;
    font-weight: 700;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
}
.rs-chip--on[b-0ot6fskill] { background: #0f172a; border-color: #0f172a; color: #fff; }
.rs-chip--on .rs-chip__count[b-0ot6fskill] { background: rgba(255, 255, 255, 0.2); color: #fff; }
.rs-chip--wrong.rs-chip--on[b-0ot6fskill] { background: #dc2626; border-color: #dc2626; }
.rs-chip--correct.rs-chip--on[b-0ot6fskill] { background: #059669; border-color: #059669; }
.rs-chip--skipped.rs-chip--on[b-0ot6fskill] { background: #475569; border-color: #475569; }
.rs-chip--bookmark.rs-chip--on[b-0ot6fskill] { background: #2A9EA6; border-color: #2A9EA6; }

.rs-toolbar__group[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.rs-toolbar__group--right[b-0ot6fskill] { margin-left: auto; }
.rs-toolbar__group-label[b-0ot6fskill] {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.125rem;
}
.rs-toolbar__btn[b-0ot6fskill] {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    transition: all 0.15s;
}
.rs-toolbar__btn i[b-0ot6fskill] { font-size: 0.8125rem; }
.rs-toolbar__btn:hover[b-0ot6fskill] { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; }

.rs-toolbar__seg[b-0ot6fskill] {
    display: inline-flex;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.rs-toolbar__seg-btn[b-0ot6fskill] {
    background: none;
    border: 0;
    padding: 0.3125rem 0.6875rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s;
    user-select: none;
}
.rs-toolbar__seg-btn--on[b-0ot6fskill] { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }

/* ============================================================
   QUESTION CARD ACTIONS (bookmark, copy, ask coach)
   ============================================================ */
.rs-question__actions[b-0ot6fskill] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}
.rs-action[b-0ot6fskill] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1.5px solid transparent;
    color: #94a3b8;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    transition: all 0.15s ease;
}
.rs-action:hover[b-0ot6fskill] { background: #f1f5f9; color: #0f172a; border-color: #e2e8f0; transform: translateY(-1px); }
.rs-action--on[b-0ot6fskill] { color: #2A9EA6; background: #ecfeff; border-color: #a5f3fc; }
.rs-action--on:hover[b-0ot6fskill] { color: #0e7490; }
.rs-action--coach:hover[b-0ot6fskill] { color: #2A9EA6; background: #ecfeff; border-color: #a5f3fc; }

/* ============================================================
   SUB-CARD (Explanation / Tips) HEADER META
   ============================================================ */
.rs-question__sublabel-meta[b-0ot6fskill] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    text-transform: none;
    letter-spacing: 0;
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: auto;
    margin-right: 0.5rem;
    white-space: nowrap;
}

/* ============================================================
   SIDEBAR ENHANCEMENTS (progress bar + bookmark indicators)
   ============================================================ */
.rs-sidebar__progress[b-0ot6fskill] {
    height: 6px;
    background: #f1f5f9;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.375rem;
}
.rs-sidebar__progress-fill[b-0ot6fskill] {
    height: 100%;
    background: linear-gradient(90deg, #059669 0%, #10b981 100%);
    border-radius: 999px;
    transition: width 0.6s ease;
}
.rs-sidebar__progress-label[b-0ot6fskill] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.75rem;
}
.rs-sidebar__btn[b-0ot6fskill] { position: relative; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; }
.rs-sidebar__btn:hover[b-0ot6fskill] { transform: translateY(-1px); }
.rs-sidebar__btn--active[b-0ot6fskill] {
    box-shadow: 0 0 0 2px #2A9EA6, 0 4px 12px rgba(42, 158, 166, 0.25);
    transform: translateY(-1px);
}
.rs-sidebar__btn--bookmarked .rs-sidebar__btn-bm[b-0ot6fskill] {
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 10px;
    color: #2A9EA6;
    background: #fff;
    border-radius: 50%;
    padding: 1px;
    line-height: 1;
}
.rs-sidebar__legend-bm[b-0ot6fskill] { color: #2A9EA6; font-size: 0.75rem; }

/* ============================================================
   FILTER EMPTY STATE (no questions match filter/search)
   ============================================================ */
.rs-empty-filter[b-0ot6fskill] {
    text-align: center;
    padding: 2.5rem 1.5rem;
    background: #f8fafc;
    border: 1.5px dashed #cbd5e1;
    border-radius: 14px;
    color: #64748b;
}
.rs-empty-filter i[b-0ot6fskill] { font-size: 2rem; color: #94a3b8; }
.rs-empty-filter p[b-0ot6fskill] { margin: 0.75rem 0 1rem; font-size: 0.9375rem; }
.rs-empty-filter__btn[b-0ot6fskill] {
    background: #0f172a;
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.rs-empty-filter__btn:hover[b-0ot6fskill] { background: #1e293b; }

/* ============================================================
   FLOATING BACK-TO-TOP BUTTON
   ============================================================ */
.rs-fab[b-0ot6fskill] {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0f172a;
    color: #fff;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);
    transition: all 0.2s ease;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}
.rs-fab.is-visible[b-0ot6fskill] { opacity: 1; pointer-events: auto; transform: translateY(0); }
.rs-fab:hover[b-0ot6fskill] { background: #1e293b; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35); }

/* ============================================================
   COMPACT MODE: collapse sub-cards by default visually
   ============================================================ */
.rs-review__layout--compact .rs-question__answer-section[b-0ot6fskill] { padding: 0.625rem 0.875rem; }
.rs-review__layout--compact .rs-question__explanation[b-0ot6fskill],
.rs-review__layout--compact .rs-question__tips[b-0ot6fskill] { padding: 0.625rem 0.875rem; }

/* ============================================================
   RESPONSIVE TOOLBAR
   ============================================================ */
@media (max-width: 768px) {
    .rs-toolbar__row[b-0ot6fskill] { padding: 0.75rem; }
    .rs-toolbar__row--filters[b-0ot6fskill] { top: 60px; }
    .rs-toolbar__row--actions[b-0ot6fskill] { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .rs-toolbar__group[b-0ot6fskill] { flex-wrap: wrap; }
    .rs-toolbar__group--right[b-0ot6fskill] { margin-left: 0; }
    .rs-fab[b-0ot6fskill] { bottom: 1rem; right: 1rem; width: 40px; height: 40px; }
}
/* /Pages/Study.razor.rz.scp.css */
/* Study Page - Clean Design with App Color Scheme */

.study-container[b-3vv4459y9q] {
    min-height: 100vh;
    background: var(--gray-50);
}

.loading-container[b-3vv4459y9q],
.error-container[b-3vv4459y9q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

/* Header Section - Dark Theme with App Colors */
.study-header[b-3vv4459y9q] {
    background: linear-gradient(135deg, var(--navy-900) 0%, var(--gray-900) 100%);
    color: #fff;
    padding: 2rem 0;
    box-shadow: var(--shadow-lg);
}

.study-header .container[b-3vv4459y9q] {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

.header-content[b-3vv4459y9q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
}

.header-left[b-3vv4459y9q] {
    flex: 1;
}

.study-title[b-3vv4459y9q] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 var(--space-2) 0;
    color: #fff;
}

.study-subtitle[b-3vv4459y9q] {
    font-size: 1rem;
    color: var(--gray-300);
    margin: 0 0 var(--space-6) 0;
}

.header-actions[b-3vv4459y9q] {
    display: flex;
    gap: var(--space-4);
    align-items: center;
}

.header-actions .btn[b-3vv4459y9q] {
    white-space: nowrap;
}

/* Study Stats Cards */
.study-stats[b-3vv4459y9q] {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-6);
    flex-wrap: wrap;
}

.stat-card[b-3vv4459y9q] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--accent-purple) 100%);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.stat-icon[b-3vv4459y9q] {
    font-size: 1.5rem;
    color: #fff;
}

.stat-content[b-3vv4459y9q] {
    display: flex;
    flex-direction: column;
}

.stat-label[b-3vv4459y9q] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-value[b-3vv4459y9q] {
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
}

/* Content Section */
.study-content[b-3vv4459y9q] {
    max-width: 1340px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

/* Chapter Selector - Simple numbered buttons */
.chapter-selector[b-3vv4459y9q] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    background: #fff;
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.chapter-label[b-3vv4459y9q] {
    font-weight: 600;
    color: var(--gray-800);
    font-size: 0.95rem;
}

.chapter-buttons[b-3vv4459y9q] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.chapter-btn[b-3vv4459y9q] {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    border: 2px solid var(--gray-300);
    background: #fff;
    color: var(--gray-700);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chapter-btn:hover[b-3vv4459y9q] {
    border-color: var(--primary-600);
    color: var(--primary-600);
    transform: scale(1.05);
}

.chapter-btn.active[b-3vv4459y9q] {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--accent-purple) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.chapter-info[b-3vv4459y9q] {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--gray-600);
    font-weight: 500;
}

/* PDF Container */
.pdf-container[b-3vv4459y9q] {
    background: #fff;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.pdf-toolbar[b-3vv4459y9q] {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
}

.toolbar-btn[b-3vv4459y9q] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.toolbar-btn:hover[b-3vv4459y9q] {
    background: var(--gray-50);
    border-color: var(--primary-600);
    color: var(--primary-600);
}

.toolbar-btn i[b-3vv4459y9q] {
    font-size: 1rem;
}

/* PDF Viewer */
.pdf-viewer[b-3vv4459y9q] {
    position: relative;
    width: 100%;
    height: 700px;
    background: #fff;
}

.pdf-frame[b-3vv4459y9q] {
    width: 100%;
    height: 100%;
    border: none;
}

.pdf-viewer.fullscreen-mode[b-3vv4459y9q] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
}

/* Study Tips */
.study-tips[b-3vv4459y9q] {
    background: #fff;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    margin-top: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.study-tips h3[b-3vv4459y9q] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
    margin: 0 0 var(--space-4) 0;
}

.study-tips h3 i[b-3vv4459y9q] {
    color: var(--primary-600);
}

.study-tips ul[b-3vv4459y9q] {
    margin: 0;
    padding-left: var(--space-6);
    list-style: none;
}

.study-tips li[b-3vv4459y9q] {
    position: relative;
    padding-left: var(--space-6);
    margin-bottom: var(--space-3);
    color: var(--gray-700);
    line-height: 1.6;
}

.study-tips li[b-3vv4459y9q]:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-600);
    font-weight: bold;
    font-size: 1.2rem;
}

.study-tips li:last-child[b-3vv4459y9q] {
    margin-bottom: 0;
}

/* No Material State */
.no-material[b-3vv4459y9q] {
    text-align: center;
    padding: var(--space-16) var(--space-8);
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--gray-200);
}

.no-material-icon[b-3vv4459y9q] {
    font-size: 4rem;
    color: var(--gray-300);
    margin-bottom: var(--space-6);
}

.no-material h3[b-3vv4459y9q] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-3);
}

.no-material p[b-3vv4459y9q] {
    color: var(--gray-600);
    font-size: 1rem;
    margin-bottom: var(--space-6);
}

/* Responsive Design */
@media (max-width: 992px) {
    .header-content[b-3vv4459y9q] {
        flex-direction: column;
        align-items: stretch;
    }

    .header-actions[b-3vv4459y9q] {
        justify-content: space-between;
    }

    .study-title[b-3vv4459y9q] {
        font-size: 1.75rem;
    }

    .study-stats[b-3vv4459y9q] {
        gap: var(--space-4);
    }

    .stat-card[b-3vv4459y9q] {
        flex: 1;
        min-width: calc(50% - var(--space-2));
    }
}

@media (max-width: 768px) {
    .study-header[b-3vv4459y9q] {
        padding: var(--space-6) 0;
    }

    .study-title[b-3vv4459y9q] {
        font-size: 1.5rem;
    }

    .study-subtitle[b-3vv4459y9q] {
        font-size: 0.9rem;
    }

    .study-stats[b-3vv4459y9q] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .stat-card[b-3vv4459y9q] {
        min-width: 100%;
    }

    .header-actions[b-3vv4459y9q] {
        flex-direction: column;
        gap: var(--space-3);
    }

    .header-actions .btn[b-3vv4459y9q] {
        width: 100%;
    }

    .chapter-selector[b-3vv4459y9q] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .chapter-info[b-3vv4459y9q] {
        margin-left: 0;
    }

    .pdf-toolbar[b-3vv4459y9q] {
        flex-wrap: wrap;
    }

    .pdf-viewer[b-3vv4459y9q] {
        height: 500px;
    }

    .study-content[b-3vv4459y9q] {
        padding: var(--space-6) var(--space-4);
    }
}

@media (max-width: 480px) {
    .pdf-viewer[b-3vv4459y9q] {
        height: 400px;
    }

    .toolbar-btn span[b-3vv4459y9q] {
        display: none;
    }

    .toolbar-btn[b-3vv4459y9q] {
        padding: var(--space-2);
    }
}
/* /Pages/StudyGuides.razor.rz.scp.css */
/* ═══ Study Guides Page — matches Browse/Catalog design ═══ */

.sg-page[b-dp66pfkrbu] { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem 3rem; padding-top: 100px; }

/* Hero */
.sg-hero[b-dp66pfkrbu] { text-align: center; padding: 2.5rem 1rem 2rem; }
.sg-hero__title[b-dp66pfkrbu] { font-size: 2rem; font-weight: 800; color: #0f172a; margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.sg-hero__sub[b-dp66pfkrbu] { font-size: 1rem; color: #64748b; max-width: 520px; margin: 0 auto 1.5rem; }

.sg-search[b-dp66pfkrbu] { display: flex; align-items: center; gap: 0.75rem; max-width: 680px; margin: 0 auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 0.5rem 0.75rem; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.sg-search__icon[b-dp66pfkrbu] { color: #94a3b8; font-size: 1.125rem; }
.sg-search__input[b-dp66pfkrbu] { flex: 1; border: none; outline: none; font-size: 0.9375rem; background: transparent; color: #0f172a; }
.sg-search__input[b-dp66pfkrbu]::placeholder { color: #94a3b8; }
.sg-search__select[b-dp66pfkrbu] { border: none; outline: none; font-size: 0.875rem; color: #475569; background: #f8fafc; border-radius: 8px; padding: 0.375rem 0.75rem; cursor: pointer; }

/* States */
.sg-error[b-dp66pfkrbu] { background: #fef2f2; color: #dc2626; padding: 1rem; border-radius: 12px; margin-bottom: 1.5rem; }
.sg-loading[b-dp66pfkrbu] { text-align: center; padding: 4rem 1rem; color: #64748b; }
.sg-loading p[b-dp66pfkrbu] { margin-top: 1rem; }
.sg-empty[b-dp66pfkrbu] { text-align: center; padding: 4rem; background: #fff; border-radius: 16px; color: #94a3b8; }
.sg-empty i[b-dp66pfkrbu] { font-size: 3rem; }
.sg-empty h4[b-dp66pfkrbu] { color: #334155; margin-top: 1rem; }

/* Sections */
.sg-section[b-dp66pfkrbu] { margin-bottom: 2.5rem; }
.sg-section__header[b-dp66pfkrbu] { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid #f1f5f9; }
.sg-section__title[b-dp66pfkrbu] { font-size: 1.375rem; font-weight: 800; color: #0f172a; letter-spacing: -0.01em; }
.sg-section__count[b-dp66pfkrbu] { font-size: 0.8125rem; color: #94a3b8; font-weight: 500; }

/* Vendor subcategory */
.sg-vendor-sub[b-dp66pfkrbu] { margin-bottom: 1.25rem; }
.sg-vendor-sub:last-child[b-dp66pfkrbu] { margin-bottom: 0; }
.sg-vendor-sub__header[b-dp66pfkrbu] { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.sg-vendor-sub__name[b-dp66pfkrbu] { font-size: 0.875rem; font-weight: 600; color: #64748b; white-space: nowrap; }
.sg-vendor-sub__line[b-dp66pfkrbu] { flex: 1; height: 1px; background: #e2e8f0; }

/* Grid */
.sg-grid[b-dp66pfkrbu] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 1100px) { .sg-grid[b-dp66pfkrbu] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .sg-grid[b-dp66pfkrbu] { grid-template-columns: 1fr; } }

/* Card */
.sg-card[b-dp66pfkrbu] { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid #f1f5f9; box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; cursor: default; }
.sg-card:hover[b-dp66pfkrbu] { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }

/* Card header */
.sg-card__header[b-dp66pfkrbu] { padding: 1.5rem 1.25rem 1.25rem; display: flex; align-items: center; justify-content: space-between; min-height: 90px; }
.sg-card__header-content[b-dp66pfkrbu] { display: flex; align-items: center; gap: 1rem; }

.sg-card__logo[b-dp66pfkrbu] { width: 64px; height: 64px; background: rgba(255,255,255,0.97); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.sg-card__logo img[b-dp66pfkrbu] { width: 46px; height: 46px; object-fit: contain; }
.sg-card__logo-fb[b-dp66pfkrbu] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.375rem; color: #334155; background: #fff; }
.sg-card__vendor[b-dp66pfkrbu] { font-size: 0.9375rem; font-weight: 700; color: rgba(255,255,255,0.97); text-shadow: 0 1px 4px rgba(0,0,0,0.25); }

.sg-card__free-badge[b-dp66pfkrbu] { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.6875rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 0.3rem 0.75rem; border-radius: 100px; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 2px 8px rgba(16,185,129,0.3); }

/* Card body */
.sg-card__body[b-dp66pfkrbu] { padding: 1.25rem 1.25rem 0.75rem; flex: 1; display: flex; flex-direction: column; }
.sg-card__tags[b-dp66pfkrbu] { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.sg-tag[b-dp66pfkrbu] { font-size: 0.6875rem; font-weight: 600; color: #475569; background: #f1f5f9; padding: 0.25rem 0.625rem; border-radius: 100px; }
.sg-card__title[b-dp66pfkrbu] { font-size: 1.0625rem; font-weight: 700; color: #0f172a; line-height: 1.35; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-card__desc[b-dp66pfkrbu] { font-size: 0.8125rem; color: #64748b; line-height: 1.5; margin-bottom: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-card__meta[b-dp66pfkrbu] { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.75rem; color: #94a3b8; margin-top: auto; }
.sg-card__meta i[b-dp66pfkrbu] { margin-right: 0.2rem; }

/* Card footer */
.sg-card__footer[b-dp66pfkrbu] { padding: 1rem 1.25rem; border-top: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sg-card__price-free[b-dp66pfkrbu] { font-size: 1.125rem; font-weight: 800; color: #059669; }
.sg-card__cta[b-dp66pfkrbu] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 10px; color: #fff; font-weight: 600; font-size: 0.875rem; text-decoration: none; transition: opacity 0.15s; white-space: nowrap; }
.sg-card__cta:hover[b-dp66pfkrbu] { opacity: 0.9; color: #fff; }

/* Responsive */
@media (max-width: 640px) {
    .sg-hero__title[b-dp66pfkrbu] { font-size: 1.5rem; }
    .sg-search[b-dp66pfkrbu] { flex-direction: column; }
    .sg-search__select[b-dp66pfkrbu] { min-width: 100%; }
    .sg-card__header[b-dp66pfkrbu] { min-height: 72px; padding: 1rem; }
    .sg-card__footer[b-dp66pfkrbu] { flex-direction: column; text-align: center; }
    .sg-card__cta[b-dp66pfkrbu] { width: 100%; justify-content: center; }
}
/* /Pages/TrialExam.razor.rz.scp.css */
/* Trial Exam Scoped Styles */

/* Trial Banner - Fixed Top */
.trial-banner[b-xb4hqb58sw] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.trial-banner-content[b-xb4hqb58sw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

/* Exam Container - Grid Layout */
.exam-container[b-xb4hqb58sw] {
    margin-top: 80px;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    padding: 2rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Exam Main Content */
.exam-main[b-xb4hqb58sw] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.exam-header[b-xb4hqb58sw] {
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exam-header h3[b-xb4hqb58sw] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #0F172A;
}

.trial-progress-text[b-xb4hqb58sw] {
    color: #64748B;
    font-size: 0.875rem;
    font-weight: 600;
}

.exam-body[b-xb4hqb58sw] {
    padding: 2rem;
}

/* Question Card */
.question-card[b-xb4hqb58sw] {
    margin-bottom: 2rem;
}

.question-text[b-xb4hqb58sw] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Answer Options */
.answers-section[b-xb4hqb58sw] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.answer-option[b-xb4hqb58sw] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
}

.answer-option:hover[b-xb4hqb58sw] {
    border-color: #2A9EA6;
    background: #f8f9ff;
}

.answer-option.selected[b-xb4hqb58sw] {
    border-color: #2A9EA6;
    background: #f0f1ff;
    box-shadow: 0 0 0 4px rgba(42, 158, 166, 0.1);
}

.answer-option input[type="radio"][b-xb4hqb58sw] {
    margin-top: 0.25rem;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.answer-text[b-xb4hqb58sw] {
    flex: 1;
    color: #0F172A;
    font-size: 1rem;
    line-height: 1.5;
}

/* Question Navigation */
.question-navigation[b-xb4hqb58sw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
}

.question-navigation .btn[b-xb4hqb58sw] {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
}

/* Sidebar */
.exam-sidebar[b-xb4hqb58sw] {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    height: fit-content;
    position: sticky;
    top: 100px;
}

.exam-sidebar h5[b-xb4hqb58sw] {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: #0F172A;
}

.exam-sidebar h6[b-xb4hqb58sw] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
}

/* Trial Progress Indicator */
.trial-progress-indicator[b-xb4hqb58sw] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.progress-dot[b-xb4hqb58sw] {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: #64748B;
    transition: all 0.2s;
    cursor: pointer;
}

.progress-dot:hover[b-xb4hqb58sw] {
    background: #cbd5e1;
}

.progress-dot.answered[b-xb4hqb58sw] {
    background: #10B981;
    color: white;
}

.progress-dot.current[b-xb4hqb58sw] {
    background: #2A9EA6;
    color: white;
    box-shadow: 0 0 0 4px rgba(42, 158, 166, 0.2);
    transform: scale(1.1);
}

/* Trial Info */
.trial-info[b-xb4hqb58sw] {
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.trial-features[b-xb4hqb58sw] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.trial-features li[b-xb4hqb58sw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    color: #64748B;
    font-size: 0.875rem;
}

.trial-features li i[b-xb4hqb58sw] {
    color: #10B981;
    font-size: 1rem;
}

/* ========================================
   SIDEBAR CODE SECTION
   ======================================== */
.sidebar-code-section[b-xb4hqb58sw] {
    margin-top: 1.25rem;
    padding: 1rem;
    background: linear-gradient(135deg, #EDF7F8, #E0E7FF);
    border-radius: 10px;
    border: 1px solid #C7D2FE;
}

.sidebar-code-label[b-xb4hqb58sw] {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1A7580;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.sidebar-code-label i[b-xb4hqb58sw] {
    font-size: 0.8125rem;
}

.sidebar-code-box[b-xb4hqb58sw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: white;
    border: 1.5px solid #C7D2FE;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.sidebar-code-value[b-xb4hqb58sw] {
    flex: 1;
    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1A7580;
    letter-spacing: 0.05em;
}

.sidebar-copy-btn[b-xb4hqb58sw] {
    background: none;
    border: none;
    color: #2A9EA6;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    font-size: 0.9375rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
}

.sidebar-copy-btn:hover[b-xb4hqb58sw] {
    background: #EDF7F8;
}

.sidebar-copy-btn.copied[b-xb4hqb58sw] {
    color: #059669;
}

/* ========================================
   BOTTOM-LEFT CODE NUDGE POPUP
   Non-spammy: appears after Q2, dismissible,
   subtle animation, no overlay/blocking
   ======================================== */
.code-nudge[b-xb4hqb58sw] {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    width: 340px;
    background: white;
    border-radius: 16px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(42, 158, 166, 0.08);
    z-index: 900;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
}

.code-nudge.visible[b-xb4hqb58sw] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: all;
}

.code-nudge-close[b-xb4hqb58sw] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    font-size: 1.125rem;
    line-height: 1;
    transition: all 0.2s;
    z-index: 1;
}

.code-nudge-close:hover[b-xb4hqb58sw] {
    color: #475569;
    background: #F1F5F9;
}

.code-nudge-header[b-xb4hqb58sw] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1.125rem 1.25rem 0;
}

.code-nudge-icon[b-xb4hqb58sw] {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2A9EA6, #7A82AB);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.code-nudge-title[b-xb4hqb58sw] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.3;
}

.code-nudge-subtitle[b-xb4hqb58sw] {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
    line-height: 1.3;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.code-nudge-body[b-xb4hqb58sw] {
    padding: 1rem 1.25rem 1.25rem;
}

.code-nudge-code-box[b-xb4hqb58sw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.875rem;
}

.code-nudge-code[b-xb4hqb58sw] {
    flex: 1;
    font-family: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1A7580;
    letter-spacing: 0.06em;
}

.code-nudge-copy[b-xb4hqb58sw] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #EDF7F8;
    border: none;
    color: #2A9EA6;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.code-nudge-copy:hover[b-xb4hqb58sw] {
    background: #E0E7FF;
}

.code-nudge-copy.copied[b-xb4hqb58sw] {
    background: #D1FAE5;
    color: #059669;
}

.code-nudge-cta[b-xb4hqb58sw] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.code-nudge-cta:hover[b-xb4hqb58sw] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(42, 158, 166, 0.35);
    color: white;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 991px) {
    .exam-container[b-xb4hqb58sw] {
        grid-template-columns: 1fr;
        margin-top: 100px;
    }

    .exam-sidebar[b-xb4hqb58sw] {
        position: static;
    }

    .trial-banner-content[b-xb4hqb58sw] {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .code-nudge[b-xb4hqb58sw] {
        left: 1rem;
        right: 1rem;
        width: auto;
        bottom: 1rem;
    }
}

@media (max-width: 767px) {
    .exam-container[b-xb4hqb58sw] {
        padding: 1rem;
    }

    .exam-body[b-xb4hqb58sw] {
        padding: 1.5rem;
    }

    .question-text[b-xb4hqb58sw] {
        font-size: 1rem;
    }

    .answer-option[b-xb4hqb58sw] {
        padding: 1rem;
    }

    .trial-progress-indicator[b-xb4hqb58sw] {
        grid-template-columns: repeat(5, 1fr);
        gap: 0.375rem;
    }

    .progress-dot[b-xb4hqb58sw] {
        font-size: 0.75rem;
    }

    .code-nudge[b-xb4hqb58sw] {
        left: 0.75rem;
        right: 0.75rem;
        bottom: 0.75rem;
    }
}
/* /Shared/AppTopNavigation.razor.rz.scp.css */
/* ========================================
   TOP NAVBAR — Landing-page style
   ======================================== */
.top-navbar[b-bfx1vzxgua] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 0;
}

.nav-container[b-bfx1vzxgua] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.navbar-content[b-bfx1vzxgua] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Brand */
.navbar-brand[b-bfx1vzxgua] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.navbar-brand:hover[b-bfx1vzxgua] {
    transform: scale(1.03);
}

.logo-icon-img[b-bfx1vzxgua] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon-img img[b-bfx1vzxgua] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brand-text[b-bfx1vzxgua] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2A9EA6;
}

/* ========================================
   NAV LINKS — Clean text links (landing style)
   ======================================== */
.navbar-links[b-bfx1vzxgua] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.nav-link[b-bfx1vzxgua] {
    color: #4a5568;
    font-weight: 500;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}

.nav-link[b-bfx1vzxgua]::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    border-radius: 1px;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}

.nav-link:hover[b-bfx1vzxgua] {
    color: #2A9EA6;
}

.nav-link:hover[b-bfx1vzxgua]::after {
    transform: scaleX(1);
}

.nav-link.active[b-bfx1vzxgua] {
    color: #2A9EA6;
    font-weight: 600;
}

.nav-link.active[b-bfx1vzxgua]::after {
    transform: scaleX(1);
}

/* ========================================
   USER MENU
   ======================================== */
.user-menu[b-bfx1vzxgua] {
    position: relative;
    z-index: 1000;
}

.user-button[b-bfx1vzxgua] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.4rem 0.875rem;
    border: 1px solid #E5E7EB;
    border-radius: 50px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.user-button:hover[b-bfx1vzxgua] {
    border-color: #2A9EA6;
    box-shadow: 0 2px 8px rgba(42, 158, 166, 0.15);
}

.user-avatar[b-bfx1vzxgua] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.user-name[b-bfx1vzxgua] {
    font-weight: 500;
    color: #1F2937;
    font-size: 0.875rem;
    line-height: 1;
}

.user-plan-badge[b-bfx1vzxgua] {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-plan-badge.free[b-bfx1vzxgua] {
    background: #E5E7EB;
    color: #6B7280;
}

.user-plan-badge.pro[b-bfx1vzxgua] {
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
}

.user-button > i[b-bfx1vzxgua] {
    font-size: 0.6875rem;
    color: #9CA3AF;
}

/* User Dropdown */
.user-dropdown[b-bfx1vzxgua] {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    height: auto !important;
    min-height: fit-content !important;
    max-height: none !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    padding: 12px !important;
    z-index: 10000 !important;
    display: block !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    animation: fadeInDown-b-bfx1vzxgua 0.15s ease-out;
}

.dropdown-item[b-bfx1vzxgua] {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 12px 14px !important;
    margin: 2px 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #1f2937 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    text-align: left !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-sizing: border-box !important;
    position: relative !important;
}

.dropdown-item span[b-bfx1vzxgua] {
    color: inherit;
    display: inline;
}

.dropdown-item i[b-bfx1vzxgua] {
    font-size: 16px;
    width: 18px;
    color: #6b7280;
    transition: color 0.2s ease;
    display: inline-block;
}

.dropdown-item:hover[b-bfx1vzxgua] {
    background: #f3f4f6 !important;
    background-color: #f3f4f6 !important;
    color: #2A9EA6 !important;
}

.dropdown-item:hover i[b-bfx1vzxgua] {
    color: #2A9EA6 !important;
}

.dropdown-item.logout[b-bfx1vzxgua] {
    color: #dc2626 !important;
    margin-top: 4px !important;
}

.dropdown-item.logout i[b-bfx1vzxgua] {
    color: #dc2626 !important;
}

.dropdown-item.logout:hover[b-bfx1vzxgua] {
    background: #fef2f2 !important;
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}

.dropdown-item.logout:hover i[b-bfx1vzxgua] {
    color: #b91c1c !important;
}

.dropdown-divider[b-bfx1vzxgua] {
    height: 1px;
    background: #e5e7eb;
    margin: 8px 0;
}

/* ========================================
   MOBILE MENU TOGGLE (hamburger / X)
   ======================================== */
.mobile-menu-toggle[b-bfx1vzxgua] {
    display: none;
    background: none;
    border: none;
    font-size: 24px;
    color: #0F172A;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
    line-height: 1;
}

.mobile-menu-toggle:hover[b-bfx1vzxgua] {
    background: #F8FAFC;
}

/* ========================================
   MOBILE MENU — Landing-style dropdown panel
   Renders BELOW the navbar (not a side slide-out)
   ======================================== */
.mobile-menu[b-bfx1vzxgua] {
    display: flex;
    flex-direction: column;
    padding: 16px 20px 24px;
    background: #ffffff;
    border-top: 1px solid #E2E8F0;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    animation: slideDown-b-bfx1vzxgua 0.2s ease;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
}

/* User card at top of mobile menu */
.mobile-user-card[b-bfx1vzxgua] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-bottom: 12px;
    background: #F8FAFC;
    border-radius: 12px;
}

.mobile-user-avatar[b-bfx1vzxgua] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.0625rem;
    flex-shrink: 0;
}

.mobile-user-details[b-bfx1vzxgua] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.mobile-user-name[b-bfx1vzxgua] {
    font-weight: 600;
    color: #0F172A;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-user-details .user-plan-badge[b-bfx1vzxgua] {
    align-self: flex-start;
}

/* Mobile nav items */
.mobile-menu-item[b-bfx1vzxgua] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    text-decoration: none;
    color: #0F172A;
    font-weight: 500;
    font-size: 16px;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: 1.4;
}

.mobile-menu-item i[b-bfx1vzxgua] {
    color: #2A9EA6;
    font-size: 18px;
    width: 22px;
    flex-shrink: 0;
}

.mobile-menu-item:hover[b-bfx1vzxgua] {
    background: #F8FAFC;
}

.mobile-menu-item.active[b-bfx1vzxgua] {
    background: rgba(42, 158, 166, 0.08);
    color: #2A9EA6;
    font-weight: 600;
}

.mobile-menu-item.logout[b-bfx1vzxgua] {
    color: #DC2626;
}

.mobile-menu-item.logout i[b-bfx1vzxgua] {
    color: #DC2626;
}

.mobile-menu-item.logout:hover[b-bfx1vzxgua] {
    background: rgba(239, 68, 68, 0.06);
}

.mobile-menu-divider[b-bfx1vzxgua] {
    height: 1px;
    background: #E2E8F0;
    margin: 12px 0;
}

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

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes fadeInDown-b-bfx1vzxgua {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   INTEGRATED SEARCH BAR (Catalog Page)
   ======================================== */
.navbar-catalog-search-container[b-bfx1vzxgua] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    max-width: 0;
    overflow: hidden;
}

.top-navbar.catalog-search-integrated .navbar-catalog-search-container[b-bfx1vzxgua] {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
    max-width: 700px;
}

/* Hide Exams link when search is integrated */
.top-navbar.catalog-search-integrated .nav-link-browse[b-bfx1vzxgua] {
    opacity: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    pointer-events: none;
}

.navbar-search-input[b-bfx1vzxgua] {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    min-width: 220px;
    transition: border-color 0.2s;
}

.navbar-search-input:focus-within[b-bfx1vzxgua] {
    border-color: #2A9EA6;
}

.navbar-search-input i[b-bfx1vzxgua] {
    color: #2A9EA6;
    margin-right: 0.5rem;
    font-size: 0.95rem;
}

.navbar-search-input input[b-bfx1vzxgua] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.9rem;
    background: transparent;
    color: #4B5563;
}

.navbar-search-input input[b-bfx1vzxgua]::placeholder {
    color: #9CA3AF;
}

.navbar-category-select[b-bfx1vzxgua],
.navbar-access-select[b-bfx1vzxgua] {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.2s;
    color: #4B5563;
    min-width: 130px;
}

.navbar-category-select:focus[b-bfx1vzxgua],
.navbar-access-select:focus[b-bfx1vzxgua] {
    outline: none;
    border-color: #2A9EA6;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
    .top-navbar[b-bfx1vzxgua] {
        padding: 0;
    }

    .navbar-content[b-bfx1vzxgua] {
        height: 64px;
    }

    .navbar-links[b-bfx1vzxgua] {
        display: none;
    }

    .mobile-menu-toggle[b-bfx1vzxgua] {
        display: block;
    }

    .nav-container[b-bfx1vzxgua] {
        padding: 0 16px;
    }

    .brand-text[b-bfx1vzxgua] {
        font-size: 1.125rem;
    }

    .logo-icon-img[b-bfx1vzxgua] {
        width: 36px;
        height: 36px;
    }

    .navbar-catalog-search-container[b-bfx1vzxgua] {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .navbar-links[b-bfx1vzxgua] {
        gap: 1.25rem;
    }

    .nav-link[b-bfx1vzxgua] {
        font-size: 0.875rem;
    }

    .user-name[b-bfx1vzxgua] {
        display: none;
    }
}

@media (max-width: 1200px) {
    .top-navbar.catalog-search-integrated .navbar-catalog-search-container[b-bfx1vzxgua] {
        max-width: 500px;
    }

    .navbar-search-input[b-bfx1vzxgua] {
        min-width: 180px;
    }

    .navbar-category-select[b-bfx1vzxgua],
    .navbar-access-select[b-bfx1vzxgua] {
        min-width: 100px;
        font-size: 0.85rem;
    }
}

/* Mobile Organization Selector — sits between user card and nav items */
.mobile-org-selector[b-bfx1vzxgua] {
    padding: 4px 0 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid #E2E8F0;
}

.mobile-org-selector:empty[b-bfx1vzxgua] {
    display: none;
}

@media (min-width: 769px) {
    /* Safety: if the user resizes from mobile (menu open) to desktop, hide the
       dropdown so it doesn't expand the navbar height. */
    .mobile-menu[b-bfx1vzxgua],
    .mobile-org-selector[b-bfx1vzxgua] {
        display: none !important;
    }
}
/* /Shared/BrowseNavigation.razor.rz.scp.css */
/* Navigation Bar */
.landing-navbar[b-22ajbybzpi] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 0;
    transition: all 0.3s ease;
}

.navbar-content[b-22ajbybzpi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand[b-22ajbybzpi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2A9EA6;
    cursor: pointer;
    transition: transform 0.2s;
}

.navbar-brand:hover[b-22ajbybzpi] {
    transform: scale(1.05);
}

.logo-icon-img[b-22ajbybzpi] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon-img img[b-22ajbybzpi] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navbar-links[b-22ajbybzpi] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Navbar Search Container */
.navbar-search-container[b-22ajbybzpi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    max-width: 0;
    overflow: hidden;
}

.landing-navbar.search-integrated .navbar-search-container[b-22ajbybzpi] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    max-width: 500px;
}

.navbar-search-input[b-22ajbybzpi] {
    position: relative;
    display: flex;
    align-items: center;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    min-width: 250px;
    transition: border-color 0.2s;
}

.navbar-search-input:focus-within[b-22ajbybzpi] {
    border-color: #2A9EA6;
}

.navbar-search-input i[b-22ajbybzpi] {
    color: #2A9EA6;
    margin-right: 0.5rem;
}

.navbar-search-input input[b-22ajbybzpi] {
    border: none;
    outline: none;
    width: 100%;
    font-size: 0.95rem;
    background: transparent;
}

.navbar-category-select[b-22ajbybzpi] {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;
    transition: border-color 0.2s;
    min-width: 150px;
}

.navbar-category-select:focus[b-22ajbybzpi] {
    outline: none;
    border-color: #2A9EA6;
}

.nav-link[b-22ajbybzpi] {
    color: #4a5568;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
}

.nav-link:hover[b-22ajbybzpi] {
    color: #2A9EA6;
}

.btn-login[b-22ajbybzpi] {
    background: white;
    color: #2A9EA6;
    padding: 0.75rem 1.5rem;
    border: 2px solid #2A9EA6;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-login:hover[b-22ajbybzpi] {
    background: #2A9EA6;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.3);
}

.btn-get-started[b-22ajbybzpi] {
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-get-started:hover[b-22ajbybzpi] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(42, 158, 166, 0.4);
}

.mobile-menu-toggle[b-22ajbybzpi] {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #4a5568;
    cursor: pointer;
}

.mobile-menu[b-22ajbybzpi] {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 1rem;
    gap: 1rem;
    border-top: 1px solid #e2e8f0;
}

.mobile-nav-link[b-22ajbybzpi] {
    color: #4a5568;
    font-weight: 500;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    border-radius: 8px;
}

.mobile-nav-link:hover[b-22ajbybzpi] {
    background: #f7fafc;
    color: #2A9EA6;
}

.btn-login-mobile[b-22ajbybzpi] {
    background: white;
    color: #2A9EA6;
    padding: 0.75rem 1.5rem;
    border: 2px solid #2A9EA6;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-get-started-mobile[b-22ajbybzpi] {
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 992px) {
    .navbar-links[b-22ajbybzpi] {
        display: none;
    }

    .mobile-menu-toggle[b-22ajbybzpi] {
        display: block;
    }

    .mobile-menu[b-22ajbybzpi] {
        display: flex;
    }
}

/* Hide search on smaller screens */
@media (max-width: 1200px) {
    .landing-navbar.search-integrated .navbar-search-container[b-22ajbybzpi] {
        max-width: 300px;
    }

    .navbar-search-input[b-22ajbybzpi] {
        min-width: 180px;
    }

    .navbar-category-select[b-22ajbybzpi] {
        min-width: 120px;
    }
}
/* /Shared/ChapterQuiz.razor.rz.scp.css */
/* ----------------------------------------------------------------------------
   ChapterQuiz - per-chapter inline quiz panel.

   Design rules (enforced strictly):
     - One accent color: --cq-accent (brand teal). Used for selection,
       primary CTA, and the score ring. Nothing else.
     - Hairline borders. One 12px radius family (8/12, never 16/999/etc).
     - Tabular numerals on .cq-num for clean stat alignment.
     - No gradients in the body. Surfaces are flat.
     - Two surfaces: light (PDF mode) is default. Dark (slide-viewer mode)
       is opted into via the parent .chapter-quiz-section--dark class
       defined in Study.razor.
---------------------------------------------------------------------------- */

.cq[b-dwfq756eax] {
    --cq-accent: #2A9EA6;
    --cq-accent-soft: rgba(42, 158, 166, 0.08);
    --cq-accent-line: rgba(42, 158, 166, 0.32);
    --cq-fg: #0a0c12;
    --cq-fg-muted: #5b6472;
    --cq-fg-faint: #94a0ae;
    --cq-bg: #ffffff;
    --cq-bg-soft: #f7f8fa;
    --cq-line: rgba(10, 12, 18, 0.08);
    --cq-line-strong: rgba(10, 12, 18, 0.16);
    --cq-correct: #1ba47a;
    --cq-wrong: #d14a47;

    position: relative;
    max-width: 720px;
    margin: 0 auto;
    color: var(--cq-fg);
    font-feature-settings: "ss01", "cv11";
}

/* Collapse handle - top-right of the panel. Sits inside the cq-shell's
   padding so it lands on the card without offsetting the content. */
.cq-collapse[b-dwfq756eax] {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    appearance: none;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--cq-line);
    border-radius: 8px;
    color: var(--cq-fg-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cq-collapse:hover[b-dwfq756eax] {
    background: var(--cq-bg-soft);
    border-color: var(--cq-line-strong);
    color: var(--cq-fg);
}

.cq-collapse:focus-visible[b-dwfq756eax] {
    outline: 2px solid var(--cq-accent);
    outline-offset: 2px;
}

.cq-num[b-dwfq756eax] {
    font-variant-numeric: tabular-nums;
}

.cq-shell[b-dwfq756eax] {
    background: var(--cq-bg);
    border: 1px solid var(--cq-line);
    border-radius: 12px;
    padding: 32px;
}

.cq-shell--results[b-dwfq756eax] {
    padding: 32px 32px 28px;
}

/* ---------- Eyebrow & top line ---------- */

.cq-eyebrow[b-dwfq756eax] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cq-fg-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cq-eyebrow-sep[b-dwfq756eax] {
    color: var(--cq-fg-faint);
    font-weight: 400;
}

.cq-topline[b-dwfq756eax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.cq-progress[b-dwfq756eax] {
    display: flex;
    gap: 4px;
}

.cq-progress-dot[b-dwfq756eax] {
    width: 24px;
    height: 3px;
    border-radius: 2px;
    background: var(--cq-line);
    transition: background 0.2s ease;
}

.cq-progress-dot--current[b-dwfq756eax] {
    background: var(--cq-accent);
}

.cq-progress-dot--done[b-dwfq756eax] {
    background: var(--cq-fg);
}

/* ---------- Question text ---------- */

.cq-question[b-dwfq756eax] {
    font-size: 22px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 6px;
    color: var(--cq-fg);
}

.cq-question-hint[b-dwfq756eax] {
    font-size: 13px;
    color: var(--cq-fg-muted);
    margin-bottom: 20px;
}

/* ---------- Answer rows ---------- */

.cq-answers[b-dwfq756eax] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cq-answer[b-dwfq756eax] {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    font: inherit;
    font-size: 15px;
    color: var(--cq-fg);
    background: var(--cq-bg);
    border: 1px solid var(--cq-line);
    border-radius: 10px;
    padding: 14px 16px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.cq-answer:hover:not(:disabled)[b-dwfq756eax] {
    border-color: var(--cq-line-strong);
    background: var(--cq-bg-soft);
}

.cq-answer:disabled[b-dwfq756eax] {
    cursor: default;
}

.cq-answer-key[b-dwfq756eax] {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--cq-line-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--cq-fg-muted);
    transition: inherit;
}

.cq-answer-text[b-dwfq756eax] {
    flex: 1;
    line-height: 1.45;
}

.cq-answer-tag[b-dwfq756eax] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 4px;
}

.cq-answer-tag--correct[b-dwfq756eax] {
    background: rgba(27, 164, 122, 0.12);
    color: var(--cq-correct);
}

.cq-answer-tag--wrong[b-dwfq756eax] {
    background: rgba(209, 74, 71, 0.12);
    color: var(--cq-wrong);
}

/* Selected (pre-submit) */
.cq-answer.is-selected[b-dwfq756eax] {
    border-color: var(--cq-accent);
    background: var(--cq-accent-soft);
}

.cq-answer.is-selected .cq-answer-key[b-dwfq756eax] {
    background: var(--cq-accent);
    border-color: var(--cq-accent);
    color: white;
}

/* Submitted: correct */
.cq-answer.is-correct[b-dwfq756eax] {
    border-color: var(--cq-correct);
    background: rgba(27, 164, 122, 0.06);
}

.cq-answer.is-correct .cq-answer-key[b-dwfq756eax] {
    background: var(--cq-correct);
    border-color: var(--cq-correct);
    color: white;
}

/* Submitted: user picked wrong */
.cq-answer.is-wrong[b-dwfq756eax] {
    border-color: var(--cq-wrong);
    background: rgba(209, 74, 71, 0.05);
}

.cq-answer.is-wrong .cq-answer-key[b-dwfq756eax] {
    background: var(--cq-wrong);
    border-color: var(--cq-wrong);
    color: white;
}

/* Submitted: not selected, not correct - dim */
.cq-answer.is-dim[b-dwfq756eax] {
    opacity: 0.55;
}

/* ---------- Explanation block ---------- */

.cq-explain[b-dwfq756eax] {
    margin-top: 18px;
    padding: 16px 18px;
    border-left: 2px solid var(--cq-line-strong);
    background: var(--cq-bg-soft);
    border-radius: 0 8px 8px 0;
}

.cq-explain-label[b-dwfq756eax] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cq-fg-muted);
    margin-bottom: 6px;
}

.cq-explain-body[b-dwfq756eax] {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--cq-fg);
}

/* ---------- Actions ---------- */

.cq-actions[b-dwfq756eax] {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
}

.cq-btn[b-dwfq756eax] {
    appearance: none;
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    padding: 11px 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: -0.005em;
}

.cq-btn:active[b-dwfq756eax] {
    transform: translateY(1px);
}

.cq-btn--primary[b-dwfq756eax] {
    background: var(--cq-fg);
    color: var(--cq-bg);
}

.cq-btn--primary:hover:not(:disabled)[b-dwfq756eax] {
    background: #1a1d24;
}

.cq-btn--primary:disabled[b-dwfq756eax] {
    background: var(--cq-line);
    color: var(--cq-fg-muted);
    cursor: not-allowed;
}

.cq-btn--block[b-dwfq756eax] {
    width: 100%;
    padding: 14px 22px;
}

/* Purchase CTA - distinct from the black functional buttons.
   Brand teal, slightly larger, with a soft glow that grows on hover.
   Subtle gradient adds depth without going off-palette. */
.cq-btn--buy[b-dwfq756eax] {
    background: linear-gradient(135deg, #2A9EA6 0%, #228489 100%);
    color: #ffffff;
    padding: 16px 24px;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.005em;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 6px 18px rgba(42, 158, 166, 0.32);
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.cq-btn--buy:hover[b-dwfq756eax] {
    background: linear-gradient(135deg, #30b0b9 0%, #248c92 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.22) inset,
        0 10px 26px rgba(42, 158, 166, 0.45);
    transform: translateY(-1px);
}

.cq-btn--buy:active[b-dwfq756eax] {
    transform: translateY(0);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 4px 12px rgba(42, 158, 166, 0.32);
}

.cq-btn-price[b-dwfq756eax] {
    display: inline-flex;
    align-items: baseline;
    padding: 2px 10px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Subtle shine sweep on hover - draws the eye without being noisy */
.cq-btn--buy[b-dwfq756eax]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
}

.cq-btn--buy:hover[b-dwfq756eax]::before {
    left: 130%;
}

.cq-link[b-dwfq756eax] {
    appearance: none;
    background: none;
    border: none;
    padding: 0;
    margin-top: 8px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--cq-fg-muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--cq-line-strong);
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.cq-link:hover[b-dwfq756eax] {
    color: var(--cq-fg);
    text-decoration-color: var(--cq-fg-muted);
}

/* ---------- Loading / empty ---------- */

.cq-loading[b-dwfq756eax],
.cq-sub[b-dwfq756eax] {
    margin-top: 12px;
    color: var(--cq-fg-muted);
    font-size: 14px;
}

.cq-heading[b-dwfq756eax] {
    font-size: 20px;
    font-weight: 600;
    color: var(--cq-fg);
    margin: 8px 0 4px;
    letter-spacing: -0.01em;
}

/* ---------- Results ---------- */

.cq-score[b-dwfq756eax] {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-top: 18px;
}

.cq-score-ring[b-dwfq756eax] {
    position: relative;
    width: 132px;
    height: 132px;
    flex-shrink: 0;
}

.cq-score-ring svg[b-dwfq756eax] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cq-ring-track[b-dwfq756eax] {
    stroke: var(--cq-line);
}

.cq-ring-arc[b-dwfq756eax] {
    stroke: var(--cq-accent);
    transition: stroke-dasharray 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cq-score-ring--strong .cq-ring-arc[b-dwfq756eax] { stroke: var(--cq-correct); }
.cq-score-ring--mid .cq-ring-arc[b-dwfq756eax]    { stroke: var(--cq-accent); }
.cq-score-ring--weak .cq-ring-arc[b-dwfq756eax]   { stroke: var(--cq-wrong); }

.cq-score-center[b-dwfq756eax] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cq-score-pct[b-dwfq756eax] {
    font-size: 38px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--cq-fg);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
}

.cq-score-pct-sign[b-dwfq756eax] {
    font-size: 18px;
    font-weight: 500;
    color: var(--cq-fg-muted);
    margin-left: 2px;
}

.cq-score-body[b-dwfq756eax] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cq-score-headline[b-dwfq756eax] {
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--cq-fg);
}

.cq-score-fraction[b-dwfq756eax] {
    margin-top: 6px;
    font-size: 14px;
    color: var(--cq-fg-muted);
    font-variant-numeric: tabular-nums;
}

.cq-score-fraction-of[b-dwfq756eax] {
    color: var(--cq-fg-faint);
    margin: 0 4px;
}

.cq-rule[b-dwfq756eax] {
    display: none; /* replaced by the upsell's own surface block for separation */
}

/* ---------- Upsell ---------- */

/* The upsell now sits in its own filled surface so it visually separates
   from the score area above without needing a divider line. */
.cq-upsell[b-dwfq756eax] {
    margin-top: 28px;
    padding: 28px;
    background: var(--cq-bg-soft);
    border-radius: 12px;
    border: 1px solid var(--cq-line);
}

.cq-upsell-top[b-dwfq756eax] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

.cq-upsell-eyebrow[b-dwfq756eax] {
    color: var(--cq-accent);
}

.cq-upsell-heading[b-dwfq756eax] {
    margin: 6px 0 12px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--cq-fg);
}

.cq-upsell-list[b-dwfq756eax] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cq-upsell-list li[b-dwfq756eax] {
    position: relative;
    padding-left: 18px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--cq-fg-muted);
}

.cq-upsell-list li strong[b-dwfq756eax] {
    color: var(--cq-fg);
    font-weight: 600;
}

.cq-upsell-list li[b-dwfq756eax]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cq-accent);
}

.cq-upsell-price[b-dwfq756eax] {
    text-align: right;
    flex-shrink: 0;
}

.cq-upsell-amount[b-dwfq756eax] {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--cq-fg);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.cq-upsell-amount-note[b-dwfq756eax] {
    margin-top: 4px;
    font-size: 12px;
    color: var(--cq-fg-muted);
}

/* ---------- Section header (used inside the upsell for versions + coach) ---------- */

.cq-section[b-dwfq756eax] {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--cq-line);
}

.cq-section:first-of-type[b-dwfq756eax] {
    /* First section sits right under the upsell intro - lighter rule */
    border-top-color: var(--cq-line);
}

.cq-section-head[b-dwfq756eax] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.cq-section-bar[b-dwfq756eax] {
    width: 3px;
    height: 16px;
    background: var(--cq-accent);
    border-radius: 2px;
    flex-shrink: 0;
}

.cq-section-title[b-dwfq756eax] {
    flex: 1;
    font-size: 14px;
    font-weight: 700;
    color: var(--cq-fg);
    letter-spacing: -0.005em;
    text-transform: none;
}

.cq-section-meta[b-dwfq756eax] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cq-fg-muted);
    font-variant-numeric: tabular-nums;
}

/* ---------- Versions list ---------- */

.cq-versions[b-dwfq756eax] {
    /* container kept for backward compat; new markup uses .cq-section */
}

.cq-version-list[b-dwfq756eax] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Stack wrapper holds the list + a "peek" gradient that hints at hidden rows */
.cq-version-stack[b-dwfq756eax] {
    position: relative;
}

.cq-version-peek[b-dwfq756eax] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 36px;
    background: linear-gradient(to bottom, transparent 0%, var(--cq-bg-soft) 70%);
    pointer-events: none;
    border-radius: 0 0 12px 12px;
}

.cq-version-row[b-dwfq756eax] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--cq-bg);
    border: 1px solid var(--cq-line);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.25s ease;
    animation: cq-row-spring-b-dwfq756eax 0.45s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}

.cq-version-row:hover[b-dwfq756eax] {
    border-color: var(--cq-line-strong);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(10, 12, 18, 0.05);
}

@keyframes cq-row-spring-b-dwfq756eax {
    0% {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    60% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.cq-version-tag[b-dwfq756eax] {
    flex-shrink: 0;
    min-width: 30px;
    padding: 3px 9px;
    border-radius: 5px;
    background: var(--cq-bg-soft);
    border: 1px solid var(--cq-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--cq-fg);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cq-version-title[b-dwfq756eax] {
    flex: 1;
    font-size: 14px;
    color: var(--cq-fg);
    line-height: 1.4;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.cq-version-count[b-dwfq756eax] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cq-fg-muted);
    font-variant-numeric: tabular-nums;
}

.cq-version-count-unit[b-dwfq756eax] {
    font-size: 11px;
    font-weight: 500;
    color: var(--cq-fg-faint);
    letter-spacing: 0.04em;
}

/* ----- Card-stack expand toggle ----- */

.cq-version-toggle[b-dwfq756eax] {
    position: relative;
    appearance: none;
    margin-top: 14px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--cq-bg);
    border: 1px solid var(--cq-line);
    border-radius: 12px;
    color: var(--cq-fg);
    font: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition:
        border-color 0.25s ease,
        transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1),
        box-shadow 0.25s ease,
        background-color 0.2s ease;
}

.cq-version-toggle:hover[b-dwfq756eax] {
    border-color: var(--cq-accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(42, 158, 166, 0.16);
}

.cq-version-toggle:active[b-dwfq756eax] {
    transform: translateY(0);
}

/* Sweep highlight on hover (subtle, draws eye) */
.cq-version-toggle[b-dwfq756eax]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 30%,
        rgba(42, 158, 166, 0.08) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
    pointer-events: none;
}

.cq-version-toggle:hover[b-dwfq756eax]::before {
    transform: translateX(100%);
}

/* Three stacked "cards" that visually suggest "more exams behind this" */
.cq-version-toggle-stack[b-dwfq756eax] {
    position: relative;
    width: 38px;
    height: 26px;
    flex-shrink: 0;
}

.cq-version-toggle-card[b-dwfq756eax] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 18px;
    border-radius: 4px;
    background: var(--cq-bg);
    border: 1px solid var(--cq-line-strong);
    box-shadow: 0 1px 2px rgba(10, 12, 18, 0.04);
    transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.cq-version-toggle-card--1[b-dwfq756eax] { /* front card */
    transform: translate(-50%, -50%) translate(0, 0);
    background: var(--cq-accent);
    border-color: var(--cq-accent);
    z-index: 3;
}

.cq-version-toggle-card--2[b-dwfq756eax] { /* middle card */
    transform: translate(-50%, -50%) translate(-5px, -3px) rotate(-7deg);
    background: var(--cq-bg);
    z-index: 2;
}

.cq-version-toggle-card--3[b-dwfq756eax] { /* back card */
    transform: translate(-50%, -50%) translate(-9px, -5px) rotate(-14deg);
    background: var(--cq-bg-soft);
    z-index: 1;
}

/* On hover: cards fan out (theatrical reveal) */
.cq-version-toggle:hover .cq-version-toggle-card--1[b-dwfq756eax] {
    transform: translate(-50%, -50%) translate(4px, 2px) rotate(4deg);
}
.cq-version-toggle:hover .cq-version-toggle-card--2[b-dwfq756eax] {
    transform: translate(-50%, -50%) translate(-2px, -1px) rotate(-2deg);
}
.cq-version-toggle:hover .cq-version-toggle-card--3[b-dwfq756eax] {
    transform: translate(-50%, -50%) translate(-9px, -5px) rotate(-14deg);
}

/* When expanded: cards stack tight to signal "collapse" */
.cq-version-toggle.is-open .cq-version-toggle-card--1[b-dwfq756eax] {
    transform: translate(-50%, -50%) translate(0, 0);
}
.cq-version-toggle.is-open .cq-version-toggle-card--2[b-dwfq756eax] {
    transform: translate(-50%, -50%) translate(0, 0);
    opacity: 0.6;
}
.cq-version-toggle.is-open .cq-version-toggle-card--3[b-dwfq756eax] {
    transform: translate(-50%, -50%) translate(0, 0);
    opacity: 0.3;
}

.cq-version-toggle-text[b-dwfq756eax] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cq-version-toggle-label[b-dwfq756eax] {
    font-size: 14px;
    font-weight: 600;
    color: var(--cq-fg);
    line-height: 1.3;
    letter-spacing: -0.005em;
}

.cq-version-toggle-sub[b-dwfq756eax] {
    font-size: 12px;
    color: var(--cq-fg-muted);
    margin-top: 2px;
    letter-spacing: 0.01em;
}

.cq-version-toggle-chevron[b-dwfq756eax] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cq-accent-soft);
    color: var(--cq-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1),
        background-color 0.2s ease;
}

.cq-version-toggle-chevron svg[b-dwfq756eax] {
    width: 14px;
    height: 14px;
}

.cq-version-toggle:hover .cq-version-toggle-chevron[b-dwfq756eax] {
    background: var(--cq-accent);
    color: white;
}

.cq-version-toggle-chevron.is-open[b-dwfq756eax] {
    transform: rotate(180deg);
}

/* ---------- Exam Coach preview ---------- */

.cq-coach[b-dwfq756eax] {
    margin-top: 18px;
    padding-top: 4px;
    border-top: 1px solid var(--cq-line);
}

.cq-coach-stats[b-dwfq756eax] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cq-coach-stat[b-dwfq756eax] {
    padding: 12px 14px;
    background: var(--cq-bg);
    border: 1px solid var(--cq-line);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cq-coach-stat-label[b-dwfq756eax] {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cq-fg-faint);
}

.cq-coach-stat-value[b-dwfq756eax] {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    color: var(--cq-fg);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
}

.cq-coach-stat-sign[b-dwfq756eax] {
    font-size: 13px;
    font-weight: 500;
    color: var(--cq-fg-muted);
    margin-left: 2px;
}

.cq-coach-stat-sub[b-dwfq756eax] {
    font-size: 11.5px;
    color: var(--cq-fg-muted);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cq-coach-domains[b-dwfq756eax] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.cq-coach-domain[b-dwfq756eax] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--cq-bg);
    border: 1px solid var(--cq-line);
    border-radius: 8px;
    min-width: 0;
}

.cq-coach-ring[b-dwfq756eax] {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.cq-coach-ring svg[b-dwfq756eax] {
    width: 100%;
    height: 100%;
}

.cq-coach-ring-track[b-dwfq756eax] {
    stroke: var(--cq-line-strong);
}

.cq-coach-ring--strong .cq-coach-ring-arc[b-dwfq756eax] { stroke: var(--cq-correct); }
.cq-coach-ring--mid    .cq-coach-ring-arc[b-dwfq756eax] { stroke: var(--cq-accent); }
.cq-coach-ring--weak   .cq-coach-ring-arc[b-dwfq756eax] { stroke: var(--cq-wrong); }

.cq-coach-ring-pct[b-dwfq756eax] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--cq-fg);
    letter-spacing: -0.02em;
    line-height: 1;
}

.cq-coach-domain-name[b-dwfq756eax] {
    flex: 1;
    font-size: 12.5px;
    color: var(--cq-fg);
    font-weight: 500;
    line-height: 1.3;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cq-coach-caption[b-dwfq756eax] {
    margin: 12px 0 28px; /* breathing room before the primary CTA */
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cq-fg-muted);
}

/* ---------- Signup line (slim inline nudge under the buy CTA) ---------- */

.cq-signup-line[b-dwfq756eax] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--cq-line);
    border-radius: 10px;
    background: var(--cq-bg);
    color: var(--cq-fg-muted);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.45;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.cq-signup-line:hover[b-dwfq756eax] {
    border-color: var(--cq-accent);
    background: var(--cq-bg-soft);
    color: var(--cq-fg);
    text-decoration: none;
    transform: translateY(-1px);
}

.cq-signup-line-dot[b-dwfq756eax] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cq-accent);
    box-shadow: 0 0 0 0 rgba(42, 158, 166, 0.55);
    animation: cq-signup-line-pulse-b-dwfq756eax 2.4s ease-out infinite;
}

@keyframes cq-signup-line-pulse-b-dwfq756eax {
    0%   { box-shadow: 0 0 0 0 rgba(42, 158, 166, 0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(42, 158, 166, 0); }
    100% { box-shadow: 0 0 0 0 rgba(42, 158, 166, 0); }
}

.cq-signup-line-text[b-dwfq756eax] {
    flex: 1;
    min-width: 0;
}

.cq-signup-line-strong[b-dwfq756eax] {
    color: var(--cq-fg);
    font-weight: 600;
}

.cq-signup-line-arrow[b-dwfq756eax] {
    flex-shrink: 0;
    font-family: ui-monospace, SFMono-Regular, monospace;
    color: var(--cq-accent);
    font-weight: 600;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cq-signup-line:hover .cq-signup-line-arrow[b-dwfq756eax] {
    transform: translateX(4px);
}

/* ---------- (Legacy) Signup card classes - retained for any external use ---------- */

.cq-signup[b-dwfq756eax] {
    position: relative;
    margin-top: 24px;
    border-radius: 14px;
    background: var(--cq-bg);
    overflow: hidden;
    isolation: isolate;
}

/* Animated gradient aura around the card edge - real 1.5px gradient border
   rendered via mask-composite. Sweeps left-to-right on a 7s loop. */
.cq-signup[b-dwfq756eax]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(
        120deg,
        rgba(42, 158, 166, 0.6) 0%,
        rgba(122, 130, 171, 0.45) 35%,
        rgba(42, 158, 166, 0.6) 70%,
        rgba(122, 130, 171, 0.45) 100%
    );
    background-size: 280% 100%;
    animation: cq-signup-shimmer-b-dwfq756eax 7s linear infinite;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
            mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

@keyframes cq-signup-shimmer-b-dwfq756eax {
    0%   { background-position: 0% 0; }
    100% { background-position: 280% 0; }
}

/* Soft inner halo - radial glows in two corners to add depth */
.cq-signup-aura[b-dwfq756eax] {
    position: absolute;
    inset: -30%;
    background:
        radial-gradient(circle at 18% 0%, rgba(42, 158, 166, 0.12), transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(122, 130, 171, 0.10), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.cq-signup-inner[b-dwfq756eax] {
    position: relative;
    z-index: 1;
    padding: 24px;
}

.cq-signup-head[b-dwfq756eax] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.cq-signup-score[b-dwfq756eax] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: baseline;
    padding: 10px 14px;
    background: var(--cq-fg);
    color: var(--cq-bg);
    border-radius: 10px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(10, 12, 18, 0.12);
}

.cq-signup-score-divider[b-dwfq756eax] {
    color: rgba(255, 255, 255, 0.45);
    margin: 0 3px;
    font-weight: 400;
    font-size: 18px;
}

.cq-signup-headline[b-dwfq756eax] {
    flex: 1;
    min-width: 0;
}

.cq-signup-eyebrow[b-dwfq756eax] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cq-accent);
    margin-bottom: 4px;
}

.cq-signup-title[b-dwfq756eax] {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--cq-fg);
    letter-spacing: -0.015em;
}

/* Animated bullets: each list item slides in + the check stroke draws */
.cq-signup-bullets[b-dwfq756eax] {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cq-signup-bullets li[b-dwfq756eax] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: var(--cq-fg);
    line-height: 1.4;
    opacity: 0;
    animation: cq-signup-bullet-in-b-dwfq756eax 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}

.cq-signup-bullets li:nth-child(1)[b-dwfq756eax] { animation-delay: 0.05s; }
.cq-signup-bullets li:nth-child(2)[b-dwfq756eax] { animation-delay: 0.15s; }
.cq-signup-bullets li:nth-child(3)[b-dwfq756eax] { animation-delay: 0.25s; }

@keyframes cq-signup-bullet-in-b-dwfq756eax {
    0%   { opacity: 0; transform: translateX(-8px); }
    100% { opacity: 1; transform: translateX(0); }
}

.cq-signup-check[b-dwfq756eax] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cq-accent);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px var(--cq-accent-soft);
}

.cq-signup-check svg[b-dwfq756eax] {
    width: 12px;
    height: 12px;
    stroke-dasharray: 14;
    stroke-dashoffset: 14;
    animation: cq-signup-check-draw-b-dwfq756eax 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.cq-signup-bullets li:nth-child(1) .cq-signup-check svg[b-dwfq756eax] { animation-delay: 0.25s; }
.cq-signup-bullets li:nth-child(2) .cq-signup-check svg[b-dwfq756eax] { animation-delay: 0.35s; }
.cq-signup-bullets li:nth-child(3) .cq-signup-check svg[b-dwfq756eax] { animation-delay: 0.45s; }

@keyframes cq-signup-check-draw-b-dwfq756eax {
    to { stroke-dashoffset: 0; }
}

.cq-signup-actions[b-dwfq756eax] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.cq-signup-primary[b-dwfq756eax] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    background: var(--cq-fg);
    color: var(--cq-bg);
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.005em;
    transition: background 0.18s ease, transform 0.15s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(10, 12, 18, 0.18);
}

.cq-signup-primary:hover[b-dwfq756eax] {
    background: #1a1d24;
    color: var(--cq-bg);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(10, 12, 18, 0.26);
}

.cq-signup-primary:active[b-dwfq756eax] {
    transform: translateY(0);
}

.cq-signup-arrow[b-dwfq756eax] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cq-signup-arrow svg[b-dwfq756eax] {
    width: 14px;
    height: 14px;
}

.cq-signup-primary:hover .cq-signup-arrow[b-dwfq756eax] {
    transform: translateX(4px);
}

.cq-signup-secondary[b-dwfq756eax] {
    font-size: 13px;
    color: var(--cq-fg-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.cq-signup-secondary span[b-dwfq756eax] {
    color: var(--cq-fg);
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.cq-signup-secondary:hover[b-dwfq756eax] {
    color: var(--cq-fg);
    text-decoration: none;
}

.cq-signup-secondary:hover span[b-dwfq756eax] {
    border-bottom-color: var(--cq-fg);
}

.cq-signup-trust[b-dwfq756eax] {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--cq-line);
    font-size: 12px;
    color: var(--cq-fg-faint);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cq-signup-trust-dot[b-dwfq756eax] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #1ba47a;
    box-shadow: 0 0 0 0 rgba(27, 164, 122, 0.5);
    animation: cq-signup-trust-pulse-b-dwfq756eax 2.4s ease-out infinite;
}

@keyframes cq-signup-trust-pulse-b-dwfq756eax {
    0%   { box-shadow: 0 0 0 0 rgba(27, 164, 122, 0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(27, 164, 122, 0); }
    100% { box-shadow: 0 0 0 0 rgba(27, 164, 122, 0); }
}

/* Dark-surface overrides live in Study.razor's <style> block (not here):
   CSS variables cascade through the DOM regardless of Blazor scope
   boundaries, so the parent .chapter-quiz-section--dark resets these
   tokens for the .cq subtree without crossing scoping rules. */

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
    .cq-shell[b-dwfq756eax] {
        padding: 22px;
    }
    .cq-shell--results[b-dwfq756eax] {
        padding: 22px;
    }
    .cq-question[b-dwfq756eax] {
        font-size: 19px;
    }
    .cq-score[b-dwfq756eax] {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .cq-score-ring[b-dwfq756eax] {
        width: 112px;
        height: 112px;
    }
    .cq-upsell-top[b-dwfq756eax] {
        flex-direction: column;
        gap: 12px;
    }
    .cq-upsell-price[b-dwfq756eax] {
        text-align: left;
    }
    .cq-progress[b-dwfq756eax] {
        display: none;
    }
    .cq-actions[b-dwfq756eax] {
        justify-content: stretch;
    }
    .cq-actions .cq-btn[b-dwfq756eax] {
        width: 100%;
    }
    /* Coach + versions on mobile - keep stats in a row but smaller; domains stack */
    .cq-coach-stats[b-dwfq756eax] {
        gap: 6px;
    }
    .cq-coach-stat[b-dwfq756eax] {
        padding: 10px;
    }
    .cq-coach-stat-value[b-dwfq756eax] {
        font-size: 18px;
    }
    .cq-coach-stat-sub[b-dwfq756eax] {
        font-size: 11px;
    }
    .cq-coach-domains[b-dwfq756eax] {
        grid-template-columns: 1fr;
    }
    .cq-version-title[b-dwfq756eax] {
        font-size: 13px;
    }
    .cq-version-meta[b-dwfq756eax] {
        font-size: 12px;
    }
}
/* /Shared/Components/AskModal.razor.rz.scp.css */
/* ─── AskModal ───────────────────────────────────────────────────────
   Modal shown when the user picks "Ask Study Coach" from a text selection
   in the Study viewer. Cohesive with FigigExams' blue/white/black palette.
   ─────────────────────────────────────────────────────────────────────── */

.ask-modal-backdrop[b-7491vt5mgt] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ask-fadein-b-7491vt5mgt 0.18s ease;
}

@keyframes ask-fadein-b-7491vt5mgt {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ask-modal[b-7491vt5mgt] {
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 28px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    position: relative;
    animation: ask-slideup-b-7491vt5mgt 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ask-slideup-b-7491vt5mgt {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.ask-modal__close[b-7491vt5mgt] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s ease;
}

.ask-modal__close:hover[b-7491vt5mgt] {
    background: #e2e8f0;
    color: #0f172a;
}

.ask-modal__head[b-7491vt5mgt] {
    margin-bottom: 18px;
    padding-right: 36px;
}

.ask-modal__title[b-7491vt5mgt] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 6px;
}

.ask-modal__title i[b-7491vt5mgt] { color: #6366f1; }
.ask-modal__title .text-success[b-7491vt5mgt] { color: #10b981 !important; }

/* Daily Study Coach usage counter - mirrors the chapter quiz "01 / 10"
   pattern so users see their allowance at a glance. */
.ask-modal__counter-badge[b-7491vt5mgt] {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    margin-left: auto;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #475569;
    font-variant-numeric: tabular-nums;
}

.ask-modal__counter-num[b-7491vt5mgt] { color: #0f172a; }
.ask-modal__counter-sep[b-7491vt5mgt] { color: #94a3b8; margin: 0 2px; font-weight: 500; }
.ask-modal__counter-cap[b-7491vt5mgt] { color: #64748b; }

.ask-modal__sub[b-7491vt5mgt] {
    margin: 0;
    color: #64748b;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.ask-modal__quote[b-7491vt5mgt] {
    background: #f8fafc;
    border-left: 4px solid #6366f1;
    border-radius: 0 12px 12px 0;
    padding: 14px 16px;
    margin-bottom: 18px;
    position: relative;
}

.ask-modal__quote i[b-7491vt5mgt] {
    position: absolute;
    top: 8px;
    left: 8px;
    color: rgba(99, 102, 241, 0.25);
    font-size: 1.25rem;
}

.ask-modal__quote p[b-7491vt5mgt] {
    margin: 0 0 0 24px;
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.55;
    /* Cap visible height for very long selections - the full text is preserved
       in state, this just keeps the modal compact. */
    max-height: 8.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
}

.ask-modal__field[b-7491vt5mgt] {
    margin-bottom: 16px;
}

.ask-modal__label[b-7491vt5mgt] {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
}

.ask-modal__textarea[b-7491vt5mgt] {
    width: 100%;
    min-height: 92px;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: #0f172a;
    resize: vertical;
    transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.ask-modal__textarea:focus[b-7491vt5mgt] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.ask-modal__counter[b-7491vt5mgt] {
    text-align: right;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 4px;
}

.ask-modal__turnstile[b-7491vt5mgt] {
    min-height: 64px;
}

.ask-modal__error[b-7491vt5mgt] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 0.875rem;
    line-height: 1.45;
}

.ask-modal__error i[b-7491vt5mgt] { flex-shrink: 0; margin-top: 2px; }

.ask-modal__actions[b-7491vt5mgt] {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 22px;
    flex-wrap: wrap;
}

.ask-modal__btn[b-7491vt5mgt] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 0.9375rem;
    border: 1.5px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.14s ease, box-shadow 0.18s ease;
}

.ask-modal__btn:hover[b-7491vt5mgt] { transform: translateY(-1px); text-decoration: none; }
.ask-modal__btn:disabled[b-7491vt5mgt] { opacity: 0.55; cursor: not-allowed; transform: none; }

.ask-modal__btn--primary[b-7491vt5mgt] { background: #0f172a; color: #ffffff; border-color: #0f172a; }
.ask-modal__btn--primary:hover:not(:disabled)[b-7491vt5mgt] { background: #111827; color: #ffffff; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18); }

.ask-modal__btn--ghost[b-7491vt5mgt] { background: #ffffff; color: #0f172a; border-color: #e2e8f0; }
.ask-modal__btn--ghost:hover[b-7491vt5mgt] { background: #f1f5f9; color: #0f172a; border-color: #cbd5e1; }

.ask-modal__btn--copy[b-7491vt5mgt] { background: #ffffff; color: #0f172a; border-color: #cbd5e1; height: 38px; padding: 0 14px; }
.ask-modal__btn--copy:hover[b-7491vt5mgt] { background: #f1f5f9; }

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

.ask-modal__loading[b-7491vt5mgt] {
    padding: 48px 24px;
    text-align: center;
}

.ask-modal__loading p[b-7491vt5mgt] {
    color: #64748b;
    margin-top: 18px;
    font-size: 0.9375rem;
}

/* ─── Done state ────────────────────────────────────────────────── */

.ask-modal__answer[b-7491vt5mgt] {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
}

.ask-modal__answer-head[b-7491vt5mgt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 0.875rem;
    color: #1e3a8a;
    margin-bottom: 8px;
}

.ask-modal__answer p[b-7491vt5mgt] {
    margin: 0;
    line-height: 1.65;
    color: #1f2937;
    font-size: 0.9375rem;
    white-space: pre-wrap;
}

.ask-modal__upsell[b-7491vt5mgt] {
    background: linear-gradient(135deg, #eff6ff 0%, #ede9fe 100%);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ask-modal__upsell i[b-7491vt5mgt] {
    color: #6366f1;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.ask-modal__upsell div[b-7491vt5mgt] {
    flex: 1;
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.ask-modal__upsell strong[b-7491vt5mgt] {
    color: #0f172a;
    display: block;
    margin-bottom: 2px;
}

.ask-modal__upsell-link[b-7491vt5mgt] {
    color: #6366f1;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

.ask-modal__upsell-link:hover[b-7491vt5mgt] { text-decoration: underline; }

.ask-modal__share[b-7491vt5mgt] {
    margin-bottom: 18px;
}

.ask-modal__urlbox[b-7491vt5mgt] {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.ask-modal__urlbox input[b-7491vt5mgt] {
    flex: 1;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 0.8125rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
}

.ask-modal__share-strip[b-7491vt5mgt] {
    margin-top: 14px;
}

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

@media (max-width: 540px) {
    .ask-modal[b-7491vt5mgt] { padding: 22px; border-radius: 14px; }
    .ask-modal__actions[b-7491vt5mgt] { flex-direction: column-reverse; }
    .ask-modal__btn[b-7491vt5mgt] { width: 100%; justify-content: center; }
}
/* /Shared/Components/ExamSessionChatRail.razor.rz.scp.css */
/* ─── ExamSessionChatRail ────────────────────────────────────────────
   Same skeleton as GroupChatDrawer, slimmed for the exam page. The
   rail can stay open during the exam without obscuring questions
   (320px on desktop), or stay collapsed via the floating toggle.
   ─────────────────────────────────────────────────────────────────────── */

.esr-toggle[b-auuofb4j8n] {
    position: fixed;
    right: 20px;
    bottom: 84px; /* clears the exam page's existing footer controls */
    z-index: 10380;
    height: 48px;
    min-width: 48px;
    padding: 0 16px 0 14px;
    border: none;
    border-radius: 999px;
    background: #6366f1;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(99, 102, 241, 0.32);
    transition: transform 0.14s ease, background 0.18s ease;
}

.esr-toggle:hover[b-auuofb4j8n] {
    background: #4f46e5;
    transform: translateY(-2px);
}

.esr-toggle i[b-auuofb4j8n] { font-size: 1.125rem; }

.esr-toggle--open[b-auuofb4j8n] {
    right: 340px;
    background: #ffffff;
    color: #0f172a;
    min-width: 40px;
    width: 40px;
    padding: 0;
    height: 40px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    justify-content: center;
}

.esr-toggle--open:hover[b-auuofb4j8n] {
    background: #f1f5f9;
}

@media (max-width: 720px) {
    .esr-toggle[b-auuofb4j8n] { right: 12px; bottom: 12px; }
    .esr-toggle--open[b-auuofb4j8n] { right: calc(100% - 52px); }
    .esr-toggle__pill[b-auuofb4j8n] { display: none; }
}

.esr-rail[b-auuofb4j8n] {
    position: fixed;
    top: 76px;
    right: 0;
    bottom: 0;
    width: 320px;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -16px 0 32px -16px rgba(15, 23, 42, 0.18);
    transform: translateX(102%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    z-index: 10330;
}

.esr-rail--open[b-auuofb4j8n] {
    transform: translateX(0);
}

@media (max-width: 720px) {
    .esr-rail[b-auuofb4j8n] { width: 100%; top: 0; border-left: none; }
}

.esr-head[b-auuofb4j8n] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.esr-head__main[b-auuofb4j8n] {
    flex: 1;
    min-width: 0;
}

.esr-head__title[b-auuofb4j8n] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.875rem;
}

.esr-head__title i[b-auuofb4j8n] { color: #6366f1; }

.esr-head__meta[b-auuofb4j8n] {
    font-size: 0.75rem;
    color: #64748b;
}

.esr-head__close[b-auuofb4j8n] {
    width: 30px;
    height: 30px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.esr-head__close:hover[b-auuofb4j8n] { background: #e2e8f0; color: #0f172a; }

.esr-head__end[b-auuofb4j8n] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 9px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #1d4ed8;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
.esr-head__end:hover:not(:disabled)[b-auuofb4j8n] { background: #eff6ff; border-color: #bfdbfe; }
.esr-head__end:disabled[b-auuofb4j8n] { opacity: 0.7; cursor: progress; }

.esr-rail[b-auuofb4j8n]  .gc-root {
    height: auto;
    flex: 1;
    border-radius: 0;
}
/* /Shared/Components/FeatureTour.razor.rz.scp.css */
/* ─── FeatureTour ───────────────────────────────────────────────────
   One-shot onboarding overlay. Centered card with step indicator dots,
   matches the cinematic-yet-clean palette used by SharedScore.
   ─────────────────────────────────────────────────────────────────────── */

.ft-backdrop[b-fjdpp5w89u] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: ft-fadein-b-fjdpp5w89u 0.18s ease;
}

@keyframes ft-fadein-b-fjdpp5w89u {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ft-card[b-fjdpp5w89u] {
    background: #ffffff;
    border-radius: 18px;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 32px 28px 26px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
    position: relative;
    text-align: center;
    animation: ft-slideup-b-fjdpp5w89u 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ft-slideup-b-fjdpp5w89u {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.ft-close[b-fjdpp5w89u] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ft-close:hover[b-fjdpp5w89u] { background: #e2e8f0; color: #0f172a; }

.ft-eyebrow[b-fjdpp5w89u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: #6366f1;
    background: #eef2ff;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.ft-icon[b-fjdpp5w89u] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 1.75rem;
}

.ft-icon--indigo[b-fjdpp5w89u]  { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); color: #4f46e5; }
.ft-icon--emerald[b-fjdpp5w89u] { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #059669; }
.ft-icon--amber[b-fjdpp5w89u]   { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); color: #d97706; }
.ft-icon--rose[b-fjdpp5w89u]    { background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%); color: #e11d48; }

.ft-title[b-fjdpp5w89u] {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 10px;
    line-height: 1.3;
}

.ft-body[b-fjdpp5w89u] {
    color: #475569;
    line-height: 1.6;
    margin: 0 0 22px;
    font-size: 0.9375rem;
}

.ft-body strong[b-fjdpp5w89u] { color: #0f172a; }
.ft-body em[b-fjdpp5w89u] { color: #6366f1; font-style: normal; font-weight: 600; }

.ft-dots[b-fjdpp5w89u] {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 0 0 22px;
}

.ft-dot[b-fjdpp5w89u] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: #e2e8f0;
    cursor: pointer;
    padding: 0;
    transition: background 0.14s ease, transform 0.14s ease;
}

.ft-dot--active[b-fjdpp5w89u] {
    background: #0f172a;
    transform: scale(1.25);
}

.ft-actions[b-fjdpp5w89u] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.ft-btn[b-fjdpp5w89u] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 18px;
    border-radius: 11px;
    font-weight: 600;
    font-size: 0.9375rem;
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.14s ease;
}

.ft-btn:hover[b-fjdpp5w89u] { transform: translateY(-1px); }

.ft-btn--primary[b-fjdpp5w89u] { background: #0f172a; color: #ffffff; border-color: #0f172a; }
.ft-btn--primary:hover[b-fjdpp5w89u] { background: #111827; color: #ffffff; }

.ft-btn--ghost[b-fjdpp5w89u] { background: #ffffff; color: #475569; border-color: #e2e8f0; }
.ft-btn--ghost:hover[b-fjdpp5w89u] { background: #f8fafc; color: #0f172a; }

@media (max-width: 480px) {
    .ft-card[b-fjdpp5w89u] { padding: 26px 22px 22px; }
    .ft-title[b-fjdpp5w89u] { font-size: 1.25rem; }
    .ft-actions[b-fjdpp5w89u] { flex-direction: column-reverse; }
    .ft-btn[b-fjdpp5w89u] { width: 100%; justify-content: center; }
}
/* /Shared/Components/GroupChatDrawer.razor.rz.scp.css */
/* ─── GroupChatDrawer ────────────────────────────────────────────────
   Right-side rail that hosts the GroupChatPanel. Closed state shows a
   floating toggle pinned to the viewport edge; open state slides in a
   ~360px column with the chat panel inside.
   ─────────────────────────────────────────────────────────────────────── */

.gcd-host[b-oc26hpz4zi] {
    /* No layout impact - the toggle + rail are position:fixed inside. */
    pointer-events: none;
}

.gcd-host > *[b-oc26hpz4zi] {
    pointer-events: auto;
}

/* ─── Toggle button ──────────────────────────────────────────────── */

.gcd-toggle[b-oc26hpz4zi] {
    position: fixed;
    right: 20px;
    bottom: 28px;
    z-index: 10400;
    height: 52px;
    min-width: 52px;
    padding: 0 18px 0 16px;
    border: none;
    border-radius: 999px;
    background: #0f172a;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.32);
    transition: transform 0.14s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.gcd-toggle:hover[b-oc26hpz4zi] {
    background: #111827;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.38);
}

.gcd-toggle i[b-oc26hpz4zi] { font-size: 1.25rem; }

.gcd-toggle__pill[b-oc26hpz4zi] {
    font-size: 0.875rem;
}

.gcd-toggle--open[b-oc26hpz4zi] {
    right: 380px;
    background: #ffffff;
    color: #0f172a;
    min-width: 44px;
    padding: 0;
    width: 44px;
    height: 44px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.16);
    justify-content: center;
}

.gcd-toggle--open:hover[b-oc26hpz4zi] {
    background: #f1f5f9;
}

@media (max-width: 720px) {
    .gcd-toggle[b-oc26hpz4zi] { right: 12px; bottom: 16px; height: 48px; min-width: 48px; padding: 0 16px; }
    .gcd-toggle--open[b-oc26hpz4zi] { right: calc(100% - 56px); }
    .gcd-toggle__pill[b-oc26hpz4zi] { display: none; }
}

/* ─── Rail (the drawer itself) ───────────────────────────────────── */

.gcd-rail[b-oc26hpz4zi] {
    position: fixed;
    top: 76px;
    right: 0;
    bottom: 0;
    width: 360px;
    background: #ffffff;
    border-left: 1px solid #e2e8f0;
    box-shadow: -16px 0 32px -16px rgba(15, 23, 42, 0.18);
    transform: translateX(102%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    z-index: 10350;
}

.gcd-rail--open[b-oc26hpz4zi] {
    transform: translateX(0);
}

@media (max-width: 720px) {
    .gcd-rail[b-oc26hpz4zi] { width: 100%; top: 0; border-left: none; }
}

/* ─── Header (picker + close) ────────────────────────────────────── */

.gcd-head[b-oc26hpz4zi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.gcd-head__label[b-oc26hpz4zi] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #64748b;
    margin-right: 2px;
    white-space: nowrap;
}

.gcd-head__picker[b-oc26hpz4zi] {
    flex: 1;
    height: 36px;
    padding: 0 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
    background: #ffffff;
    font-size: 0.875rem;
    color: #0f172a;
    cursor: pointer;
}

.gcd-head__picker:focus[b-oc26hpz4zi] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.gcd-head__single[b-oc26hpz4zi] {
    flex: 1;
    min-width: 0;
}

.gcd-head__name[b-oc26hpz4zi] {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gcd-head__meta[b-oc26hpz4zi] {
    font-size: 0.75rem;
    color: #64748b;
}

.gcd-head__close[b-oc26hpz4zi] {
    width: 32px;
    height: 32px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gcd-head__close:hover[b-oc26hpz4zi] { background: #e2e8f0; color: #0f172a; }

.gcd-loading[b-oc26hpz4zi] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Adjust the embedded chat panel to fill the rail ─────────────── */

.gcd-rail[b-oc26hpz4zi]  .gc-root {
    height: auto;
    flex: 1;
    border-radius: 0;
}
/* /Shared/Components/GroupChatPanel.razor.rz.scp.css */
/* ─── GroupChatPanel ─────────────────────────────────────────────────
   Real-time chat surface for a single study group. Lives inside the
   "Chat" card on Groups/Detail. Sizes itself to a comfortable column
   height; the message list scrolls independently of the page.
   ─────────────────────────────────────────────────────────────────────── */

.gc-root[b-tctsjgiuq5] {
    display: flex;
    flex-direction: column;
    height: 460px;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
}

@media (max-width: 880px) {
    .gc-root[b-tctsjgiuq5] { height: 380px; }
}

.gc-head[b-tctsjgiuq5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}

.gc-head__title[b-tctsjgiuq5] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: #0f172a;
    font-size: 0.9375rem;
}

.gc-head__title i[b-tctsjgiuq5] { color: #6366f1; }

.gc-head__status[b-tctsjgiuq5] { font-size: 0.75rem; }

.gc-status[b-tctsjgiuq5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.gc-status--connecting[b-tctsjgiuq5] { background: #fef3c7; color: #92400e; }
.gc-status--connected[b-tctsjgiuq5]  { background: #ecfdf5; color: #047857; }
.gc-status--offline[b-tctsjgiuq5]    { background: #fef3c7; color: #92400e; }
.gc-status--error[b-tctsjgiuq5]      { background: #fef2f2; color: #b91c1c; }

.gc-status__dot[b-tctsjgiuq5] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    animation: gc-pulse-b-tctsjgiuq5 2.4s ease-in-out infinite;
}

@keyframes gc-pulse-b-tctsjgiuq5 {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.55; }
}

/* ─── Message list ───────────────────────────────────────────────── */

.gc-body[b-tctsjgiuq5] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 14px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f8fafc;
}

.gc-empty[b-tctsjgiuq5] {
    margin: auto;
    text-align: center;
    color: #94a3b8;
}

.gc-empty i[b-tctsjgiuq5] {
    font-size: 1.75rem;
    display: inline-block;
    margin-bottom: 6px;
    color: #cbd5e1;
}

.gc-empty p[b-tctsjgiuq5] { margin: 0; font-size: 0.875rem; }

.gc-row[b-tctsjgiuq5] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.gc-row--me[b-tctsjgiuq5] {
    flex-direction: row-reverse;
}

.gc-avatar[b-tctsjgiuq5] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: flex-end;
}

.gc-avatar--ghost[b-tctsjgiuq5] {
    background: transparent;
    visibility: hidden;
}

.gc-bubble-wrap[b-tctsjgiuq5] {
    display: flex;
    flex-direction: column;
    max-width: min(72%, 480px);
}

.gc-row--me .gc-bubble-wrap[b-tctsjgiuq5] {
    align-items: flex-end;
}

.gc-bubble-meta[b-tctsjgiuq5] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.6875rem;
    color: #94a3b8;
    margin-bottom: 2px;
    padding: 0 4px;
}

.gc-bubble-name[b-tctsjgiuq5] { color: #475569; font-weight: 600; }
.gc-bubble-time[b-tctsjgiuq5] { color: #94a3b8; }

.gc-bubble[b-tctsjgiuq5] {
    background: #ffffff;
    color: #1f2937;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 0.9375rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.gc-row--me .gc-bubble[b-tctsjgiuq5] {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
}

/* Quoted snippet inside a chat bubble - shown when a message starts with
   "> ..." (Markdown blockquote prefix). Used by the "Discuss in group"
   flow from the Study page so highlighted passages render as a citation. */
.gc-bubble__quote[b-tctsjgiuq5] {
    margin: 0 0 6px 0;
    padding: 6px 10px;
    border-left: 3px solid #6366f1;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 4px;
    font-size: 0.8125rem;
    color: #475569;
    font-style: italic;
    line-height: 1.45;
}

.gc-row--me .gc-bubble__quote[b-tctsjgiuq5] {
    border-left-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.82);
}

.gc-bubble__body[b-tctsjgiuq5] {
    display: block;
}

/* Question-reference chip. Used when the chat message body contains a
   [[q:N]] token (Ask-group flow on the Exam page). Clickable when the
   reader is also on the Exam page - jumps the local exam to question N. */
.gc-qref[b-tctsjgiuq5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 2px 0;
    padding: 4px 8px 4px 4px;
    border: 1px solid rgba(99, 102, 241, 0.45);
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.12);
    color: #1e1b4b;
    font-size: 0.78125rem;
    font-weight: 500;
    cursor: pointer;
    max-width: 100%;
    transition: background 0.15s ease, transform 0.12s ease;
    text-align: left;
}

.gc-qref:hover:not(:disabled)[b-tctsjgiuq5] {
    background: rgba(99, 102, 241, 0.22);
    transform: translateY(-1px);
}

.gc-qref--inert[b-tctsjgiuq5] {
    cursor: default;
    opacity: 0.82;
}

.gc-qref__badge[b-tctsjgiuq5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 22px;
    padding: 0 8px;
    background: #4338ca;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.gc-qref__text[b-tctsjgiuq5] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    color: #1e1b4b;
}

.gc-row--me .gc-qref[b-tctsjgiuq5] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.32);
    color: #ffffff;
}

.gc-row--me .gc-qref__badge[b-tctsjgiuq5] {
    background: #ffffff;
    color: #1e1b4b;
}

.gc-row--me .gc-qref__text[b-tctsjgiuq5] {
    color: rgba(255, 255, 255, 0.92);
}

/* ─── Composer ───────────────────────────────────────────────────── */

.gc-composer[b-tctsjgiuq5] {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #e5e7eb;
    background: #ffffff;
}

.gc-composer__input[b-tctsjgiuq5] {
    flex: 1;
    height: 40px;
    padding: 0 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 999px;
    font-size: 0.9375rem;
    color: #0f172a;
    background: #f8fafc;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.gc-composer__input:focus[b-tctsjgiuq5] {
    outline: none;
    border-color: #6366f1;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.12);
}

.gc-composer__input:disabled[b-tctsjgiuq5] {
    color: #94a3b8;
    background: #f1f5f9;
    cursor: not-allowed;
}

.gc-composer__send[b-tctsjgiuq5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0f172a;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: background 0.14s ease, transform 0.1s ease;
}

.gc-composer__send:hover:not(:disabled)[b-tctsjgiuq5] {
    background: #111827;
    transform: translateY(-1px);
}

.gc-composer__send:disabled[b-tctsjgiuq5] {
    background: #cbd5e1;
    cursor: not-allowed;
}

/* Ask Coach button - slips between the composer input and the send button,
   uses the indigo accent so it reads as "Study Coach" not "primary action". */
.gc-composer__coach[b-tctsjgiuq5] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #eef2ff;
    color: #6366f1;
    border: 1px solid #c7d2fe;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: background 0.14s ease, transform 0.1s ease;
}

.gc-composer__coach:hover:not(:disabled)[b-tctsjgiuq5] {
    background: #e0e7ff;
    color: #4f46e5;
    transform: translateY(-1px);
}

.gc-composer__coach:disabled[b-tctsjgiuq5] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Toast: brief confirmation after AskCoach succeeds. Pinned bottom-right of
   the chat panel container; auto-hides after a few seconds. */
.gc-coach-toast[b-tctsjgiuq5] {
    position: absolute;
    bottom: 60px;
    right: 12px;
    background: #0f172a;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.8125rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.28);
    z-index: 10;
    animation: gc-toast-pop-b-tctsjgiuq5 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.gc-coach-toast i[b-tctsjgiuq5] { color: #34d399; }

@keyframes gc-toast-pop-b-tctsjgiuq5 {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
/* /Shared/Components/SessionWatchHost.razor.rz.scp.css */
.sw-toast-stack[b-asnzx6jf27] {
    position: fixed;
    top: 86px;
    right: 18px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 36px));
    pointer-events: none;
}

.sw-toast[b-asnzx6jf27] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1.5px solid #67e8f9;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
    pointer-events: auto;
    animation: sw-slide-in-b-asnzx6jf27 200ms ease-out;
}

@keyframes sw-slide-in-b-asnzx6jf27 {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.sw-toast__icon[b-asnzx6jf27] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #0891b2 0%, #2A9EA6 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.sw-toast__body[b-asnzx6jf27] {
    flex: 1;
    min-width: 0;
}

.sw-toast__title[b-asnzx6jf27] {
    font-weight: 600;
    color: #0f172a;
    font-size: 0.875rem;
    line-height: 1.25;
}

.sw-toast__meta[b-asnzx6jf27] {
    margin-top: 2px;
    color: #475569;
    font-size: 0.8125rem;
    line-height: 1.25;
}

.sw-toast__actions[b-asnzx6jf27] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    flex-shrink: 0;
}

.sw-toast__join[b-asnzx6jf27] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: #0891b2;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}
.sw-toast__join:hover[b-asnzx6jf27] { background: #0e7490; }

.sw-toast__close[b-asnzx6jf27] {
    width: 24px;
    height: 24px;
    align-self: flex-end;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
.sw-toast__close:hover[b-asnzx6jf27] { color: #0f172a; background: #f1f5f9; }

@media (max-width: 768px) {
    .sw-toast-stack[b-asnzx6jf27] {
        top: 76px;
        right: 12px;
        left: 12px;
        width: auto;
    }
}
/* /Shared/Components/ShareButtonStrip.razor.rz.scp.css */
/* ─── ShareButtonStrip ───────────────────────────────────────────────────
   Reusable share strip. Keep visual language aligned with the FigigExams
   blue/white/black palette - the channel brand colours appear only as
   subtle accents on hover, not as fills, so the strip stays cohesive when
   dropped into Free Results, Results, Study, or share landing pages.
   ─────────────────────────────────────────────────────────────────────── */

.sbs[b-fudrxwi6hj] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.sbs__label[b-fudrxwi6hj] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: #6b7280;
}

.sbs__row[b-fudrxwi6hj] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.sbs__btn[b-fudrxwi6hj] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    background: #ffffff;
    color: #1f2937;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    line-height: 1;
}

.sbs__btn:hover[b-fudrxwi6hj] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 41, 55, 0.08);
    border-color: rgba(99, 102, 241, 0.35);
    color: #111827;
    text-decoration: none;
}

.sbs__btn:focus-visible[b-fudrxwi6hj] {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.sbs__btn:active[b-fudrxwi6hj] {
    transform: translateY(0);
}

.sbs__btn i[b-fudrxwi6hj] {
    font-size: 1rem;
    line-height: 1;
}

.sbs__btn-label[b-fudrxwi6hj] {
    font-size: 0.875rem;
}

/* Native share + Copy buttons are filled to read as the primary interaction. */
.sbs__btn--native[b-fudrxwi6hj],
.sbs__btn--copy[b-fudrxwi6hj] {
    background: #1f2937;
    color: #ffffff;
    border-color: #1f2937;
}

.sbs__btn--native:hover[b-fudrxwi6hj],
.sbs__btn--copy:hover[b-fudrxwi6hj] {
    background: #111827;
    color: #ffffff;
    border-color: #111827;
}

/* Channel-icon-only buttons - hover tint hints at the brand without ever
   filling, so the strip stays neutral at rest. */
.sbs__btn--whatsapp:hover[b-fudrxwi6hj] { border-color: #25d366; color: #1f2937; }
.sbs__btn--x:hover[b-fudrxwi6hj] { border-color: #0f0f0f; color: #0f0f0f; }
.sbs__btn--reddit:hover[b-fudrxwi6hj] { border-color: #ff4500; color: #1f2937; }
.sbs__btn--telegram:hover[b-fudrxwi6hj] { border-color: #229ed9; color: #1f2937; }
.sbs__btn--linkedin:hover[b-fudrxwi6hj] { border-color: #0a66c2; color: #1f2937; }
.sbs__btn--facebook:hover[b-fudrxwi6hj] { border-color: #1877f2; color: #1f2937; }

/* Channel-icon buttons get a square footprint so the row stays visually
   regular when text labels are absent. */
.sbs__btn--whatsapp[b-fudrxwi6hj],
.sbs__btn--x[b-fudrxwi6hj],
.sbs__btn--reddit[b-fudrxwi6hj],
.sbs__btn--telegram[b-fudrxwi6hj],
.sbs__btn--linkedin[b-fudrxwi6hj],
.sbs__btn--facebook[b-fudrxwi6hj] {
    width: 38px;
    padding: 0;
    justify-content: center;
}

.sbs__error[b-fudrxwi6hj] {
    font-size: 0.8125rem;
    color: #b91c1c;
    margin-top: 4px;
}

/* Compact variant - hides text labels on copy/native, used inside dense
   review-question cards. */
.sbs.compact .sbs__btn--copy .sbs__btn-label[b-fudrxwi6hj],
.sbs.compact .sbs__btn--native .sbs__btn-label[b-fudrxwi6hj] {
    display: none;
}

.sbs.compact .sbs__btn--copy[b-fudrxwi6hj],
.sbs.compact .sbs__btn--native[b-fudrxwi6hj] {
    width: 38px;
    padding: 0;
    justify-content: center;
}

.sbs.compact .sbs__btn[b-fudrxwi6hj] {
    height: 34px;
}

.sbs.compact .sbs__btn--whatsapp[b-fudrxwi6hj],
.sbs.compact .sbs__btn--x[b-fudrxwi6hj],
.sbs.compact .sbs__btn--reddit[b-fudrxwi6hj],
.sbs.compact .sbs__btn--telegram[b-fudrxwi6hj],
.sbs.compact .sbs__btn--linkedin[b-fudrxwi6hj],
.sbs.compact .sbs__btn--facebook[b-fudrxwi6hj] {
    width: 34px;
}

/* Dark surface variant - inverts foreground colours so the strip reads
   well on the cinematic SharedScore landing page. Caller adds .on-dark. */
.sbs.on-dark .sbs__label[b-fudrxwi6hj] {
    color: rgba(255, 255, 255, 0.7);
}

.sbs.on-dark .sbs__btn[b-fudrxwi6hj] {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
}

.sbs.on-dark .sbs__btn:hover[b-fudrxwi6hj] {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.28);
}

.sbs.on-dark .sbs__btn--native[b-fudrxwi6hj],
.sbs.on-dark .sbs__btn--copy[b-fudrxwi6hj] {
    background: #ffffff;
    color: #111827;
    border-color: #ffffff;
}

.sbs.on-dark .sbs__btn--native:hover[b-fudrxwi6hj],
.sbs.on-dark .sbs__btn--copy:hover[b-fudrxwi6hj] {
    background: #f3f4f6;
    color: #111827;
    border-color: #f3f4f6;
}
/* /Shared/PublicNavigation.razor.rz.scp.css */
/* Navigation Bar */
.landing-navbar[b-uc14fai1py] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 1rem 0;
}

.navbar-content[b-uc14fai1py] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-brand[b-uc14fai1py] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2A9EA6;
    cursor: pointer;
    transition: transform 0.2s;
}

.navbar-brand:hover[b-uc14fai1py] {
    transform: scale(1.05);
}

.navbar-brand i[b-uc14fai1py] {
    font-size: 2rem;
}

.logo-icon-img[b-uc14fai1py] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-icon-img img[b-uc14fai1py] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navbar-links[b-uc14fai1py] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link[b-uc14fai1py] {
    color: #4a5568;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    text-decoration: none;
}

.nav-link:hover[b-uc14fai1py] {
    color: #2A9EA6;
}

.btn-login[b-uc14fai1py] {
    background: white;
    color: #2A9EA6;
    padding: 0.75rem 1.5rem;
    border: 2px solid #2A9EA6;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-login:hover[b-uc14fai1py] {
    background: #2A9EA6;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.4);
}

.btn-get-started[b-uc14fai1py] {
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.btn-get-started:hover[b-uc14fai1py] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.4);
}

.mobile-menu-toggle[b-uc14fai1py] {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #4a5568;
    cursor: pointer;
}

.mobile-menu[b-uc14fai1py] {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 1rem;
    gap: 1rem;
    border-top: 1px solid #e2e8f0;
}

.mobile-nav-link[b-uc14fai1py] {
    color: #4a5568;
    font-weight: 500;
    padding: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
    border-radius: 4px;
}

.mobile-nav-link:hover[b-uc14fai1py] {
    background-color: #f7fafc;
    color: #2A9EA6;
}

.btn-login-mobile[b-uc14fai1py] {
    background: white;
    color: #2A9EA6;
    padding: 0.75rem;
    border: 2px solid #2A9EA6;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-login-mobile:hover[b-uc14fai1py] {
    background: #2A9EA6;
    color: white;
}

.btn-get-started-mobile[b-uc14fai1py] {
    background: linear-gradient(135deg, #2A9EA6 0%, #7A82AB 100%);
    color: white;
    padding: 0.75rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-get-started-mobile:hover[b-uc14fai1py] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(42, 158, 166, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .navbar-links[b-uc14fai1py] {
        display: none;
    }

    .mobile-menu-toggle[b-uc14fai1py] {
        display: block;
    }

    .mobile-menu[b-uc14fai1py] {
        display: flex;
    }
}