/* ══════════════════════════════════════════════════════════════════
   MIRAR — Member Portal Stylesheet  (v2 — visual refresh)
   Reference as a stylesheet in MemberLayout.razor (and on the two
   fully-public pages that live outside it: VerifyCertificate.razor
   and CourseResources.razor).

   DESIGN NOTE
   The certificate itself — cream paper, navy ink, a hairline of
   antique gold dividing each line — is the one artifact every member
   actually treasures. Everything in this stylesheet borrows that
   quiet, gold-hairline signature (a 3px navy→red→gold top seam on
   cards, a gold rule under section titles) so the portal feels like
   the room the certificate lives in, not a generic dashboard bolted
   on beside it. Corners are softened, shadows are warm-tinted rather
   than flat black, and the old hard-edge "admin panel" cards are
   replaced with something closer to stationery.
   ══════════════════════════════════════════════════════════════════ */

:root {
    --mbrl-radius-sm: 8px;
    --mbrl-radius: 12px;
    --mbrl-radius-lg: 16px;
    --mbrl-gold: #b08d3e;
    --mbrl-gold-soft: #d9c48f;
    --mbrl-navy-2: #262f52;
    --mbrl-card: #fffefb;
    --mbrl-shadow-1: 0 1px 2px rgba(26, 35, 64, .04), 0 1px 1px rgba(26, 35, 64, .03);
    --mbrl-shadow-2: 0 10px 30px rgba(26, 35, 64, .08), 0 2px 8px rgba(26, 35, 64, .05);
    --mbrl-seam: linear-gradient(90deg, var(--mirar-navy, #1a2340) 0%, var(--mirar-navy, #1a2340) 40%, var(--mirar-red, #C0221A) 72%, var(--mbrl-gold) 100%);
}

/* ======================================================================
   1. SHELL / NAV — MemberLayout.razor, MemberHeaderUser.razor
   ====================================================================== */

.mbrl-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--mirar-off, #f7f5f0);
    font-family: var(--font-sans, sans-serif);
}

.mbrl-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border, #e0ddd8);
    box-shadow: 0 1px 0 rgba(176, 141, 62, .25);
}

.mbrl-headerbar {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 24px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mbrl-headerbar-left {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.mbrl-brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 21px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mirar-navy, #1a2340);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .12s ease;
}

    .mbrl-brand:hover {
        opacity: .82;
    }

    .mbrl-brand span {
        color: var(--mirar-red, #C0221A);
    }

.mbrl-brand-sub {
    font-family: var(--font-sans, sans-serif);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mbrl-gold);
    position: relative;
    padding-left: 12px;
}

    .mbrl-brand-sub::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 1px;
        background: var(--mbrl-gold-soft);
    }

.mbrl-divider {
    width: 1px;
    height: 26px;
    background: var(--border, #e0ddd8);
    flex-shrink: 0;
}

.mbrl-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
}

.mbrl-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted, #5A5A5A);
    text-decoration: none;
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}

    .mbrl-tab i {
        font-size: 11px;
        opacity: .65;
        transition: opacity .15s ease;
    }

    .mbrl-tab:hover {
        background: var(--mirar-off, #f7f5f0);
        color: var(--mirar-navy, #1a2340);
    }

    .mbrl-tab.active {
        background: var(--mirar-navy, #1a2340);
        color: #fff;
        box-shadow: 0 4px 12px rgba(26, 35, 64, .28);
    }

        .mbrl-tab.active i {
            opacity: 1;
            color: var(--mbrl-gold-soft);
        }

.mbrl-main {
    flex: 1;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 44px 24px 72px;
    box-sizing: border-box;
}

.mbrl-footer {
    text-align: center;
    padding: 22px 24px 30px;
    font-size: 12px;
    color: var(--text-muted, #5A5A5A);
}

    .mbrl-footer a {
        color: var(--text-muted, #5A5A5A);
        text-decoration: none;
        transition: color .12s ease;
    }

        .mbrl-footer a:hover {
            color: var(--mirar-red, #C0221A);
        }

/* ── Header user block (MemberHeaderUser.razor) ─────────────────── */
.mbrl-user {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
}

.mbrl-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--mirar-navy, #1a2340), var(--mbrl-navy-2));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    flex-shrink: 0;
    box-shadow: 0 3px 8px rgba(26, 35, 64, .3), inset 0 0 0 2px rgba(255, 255, 255, .06);
}

.mbrl-user-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.mbrl-user-name {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-dark, #232323);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.mbrl-user-id {
    font-family: monospace;
    font-size: 10.5px;
    color: var(--text-muted, #5A5A5A);
}

.mbrl-logout {
    background: none;
    border: 1px solid var(--border, #e0ddd8);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted, #5A5A5A);
    cursor: pointer;
    transition: all .15s ease;
}

    .mbrl-logout:hover {
        border-color: var(--mirar-red, #C0221A);
        color: var(--mirar-red, #C0221A);
        background: #fef2f2;
    }

@media (max-width: 720px) {
    .mbrl-headerbar {
        height: auto;
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 10px;
    }

    .mbrl-headerbar-left {
        flex-wrap: wrap;
        gap: 12px;
    }

    .mbrl-brand-sub {
        display: none;
    }

    .mbrl-tabs {
        width: 100%;
    }

    .mbrl-tab {
        flex: 1;
        justify-content: center;
    }

    .mbrl-user-name {
        max-width: 100px;
    }

    .mbrl-main {
        padding: 28px 16px 52px;
    }
}

/* ======================================================================
   2. SHARED PAGE HEADER / LOADING
   Used across MemberDashboard, MemberCertificates, MemberProfile.
   ====================================================================== */

.mbr-loading {
    padding: 100px 24px;
    text-align: center;
    color: var(--text-muted, #5A5A5A);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.mbr-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid var(--border, #e0ddd8);
    border-top-color: var(--mirar-red, #C0221A);
    animation: mbr-spin .7s linear infinite;
}

@keyframes mbr-spin {
    to {
        transform: rotate(360deg);
    }
}

.mbr-page-header {
    margin: 0 0 32px;
    position: relative;
}

.mbr-page-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mirar-red, #C0221A);
    margin-bottom: 8px;
}

    .mbr-page-eyebrow::before {
        content: "";
        display: inline-block;
        width: 16px;
        height: 1.5px;
        background: var(--mbrl-gold);
    }

.mbr-page-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 2rem;
    font-weight: 400;
    color: var(--text-dark, #232323);
    line-height: 1.2;
    margin: 0;
}

/* ======================================================================
   3. PAGE: Dashboard  (MemberDashboard.razor)
   ====================================================================== */

.mbd-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, var(--mirar-navy, #1a2340) 0%, var(--mbrl-navy-2) 100%);
    border-radius: var(--mbrl-radius-lg);
    padding: 28px 32px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--mbrl-shadow-2);
}

    .mbd-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 100% 0%, rgba(176, 141, 62, .18), transparent 55%);
        pointer-events: none;
    }

    .mbd-hero::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, var(--mbrl-gold-soft), transparent);
        opacity: .7;
    }

.mbd-hero-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mbrl-gold-soft);
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.mbd-hero-name {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 1.9rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.2;
    margin: 0;
    position: relative;
    z-index: 1;
}

.mbd-hero-badge {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

.mbd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}

.mbd-stat {
    background: var(--mbrl-card);
    border: 1px solid var(--border, #e0ddd8);
    border-radius: var(--mbrl-radius);
    padding: 18px 20px;
    box-shadow: var(--mbrl-shadow-1);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow .18s ease, transform .18s ease;
}

    .mbd-stat:hover {
        box-shadow: var(--mbrl-shadow-2);
        transform: translateY(-2px);
    }

.mbd-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: var(--mirar-off, #f7f5f0);
    color: var(--mirar-navy, #1a2340);
}

.mbd-stat-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted, #5A5A5A);
}

.mbd-stat-value {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 22px;
    color: var(--text-dark, #232323);
    line-height: 1.1;
}

.mbd-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 12px;
    border-radius: 20px;
}

    .mbd-badge.green {
        background: #d1fae5;
        color: #065f46;
    }

    .mbd-badge.grey {
        background: #f3f4f6;
        color: #6b7280;
    }

.mbd-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border, #e0ddd8);
}

.mbd-section-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--text-dark, #232323);
    margin: 0;
}

.mbd-view-all {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mirar-navy, #1a2340);
    text-decoration: none;
    transition: color .12s ease;
}

    .mbd-view-all:hover {
        color: var(--mirar-red, #C0221A);
    }

.mbd-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted, #5A5A5A);
    font-size: 13px;
    background: var(--mbrl-card);
    border: 1.5px dashed var(--border, #e0ddd8);
    border-radius: var(--mbrl-radius);
}

.mbd-certs {
    display: grid;
    gap: 10px;
}

.mbd-cert-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--mbrl-card);
    border: 1px solid var(--border, #e0ddd8);
    border-left: 3px solid var(--mbrl-gold-soft);
    border-radius: var(--mbrl-radius-sm);
    padding: 13px 18px;
    transition: box-shadow .15s ease, border-left-color .15s ease;
}

    .mbd-cert-row:hover {
        box-shadow: var(--mbrl-shadow-1);
        border-left-color: var(--mirar-red, #C0221A);
    }

.mbd-cert-title {
    font-weight: 600;
    color: var(--text-dark, #232323);
    font-size: 13px;
}

.mbd-cert-date {
    font-size: 11px;
    color: var(--text-muted, #5A5A5A);
    margin-top: 2px;
}

.mbd-view-link {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mirar-navy, #1a2340);
    text-decoration: none;
    white-space: nowrap;
}

    .mbd-view-link:hover {
        color: var(--mirar-red, #C0221A);
    }

.mbd-actions {
    margin-top: 36px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mbd-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border: 1.5px solid var(--mirar-navy, #1a2340);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--mirar-navy, #1a2340);
    text-decoration: none;
    transition: all .15s ease;
}

    .mbd-action:hover {
        background: var(--mirar-navy, #1a2340);
        color: #fff;
        box-shadow: 0 6px 16px rgba(26, 35, 64, .22);
    }

    .mbd-action.primary {
        background: var(--mirar-red, #C0221A);
        border-color: var(--mirar-red, #C0221A);
        color: #fff;
    }

        .mbd-action.primary:hover {
            background: var(--mirar-red-dark, #96190f);
            border-color: var(--mirar-red-dark, #96190f);
            box-shadow: 0 6px 16px rgba(192, 34, 26, .28);
        }

/* ======================================================================
   4. PAGE: My Certificates  (MemberCertificates.razor)
   ====================================================================== */

.mbc-empty {
    padding: 44px 20px;
    text-align: center;
    color: var(--text-muted, #5A5A5A);
    font-size: 13px;
    background: var(--mbrl-card);
    border: 1.5px dashed var(--border, #e0ddd8);
    border-radius: var(--mbrl-radius);
}

.mbc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mbc-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    background: var(--mbrl-card);
    border: 1px solid var(--border, #e0ddd8);
    border-left: 4px solid var(--mbrl-gold-soft);
    border-radius: var(--mbrl-radius);
    padding: 18px 22px;
    box-shadow: var(--mbrl-shadow-1);
    transition: box-shadow .18s ease, transform .18s ease, border-left-color .18s ease;
}

    .mbc-card:hover {
        box-shadow: var(--mbrl-shadow-2);
        transform: translateY(-2px);
        border-left-color: var(--mirar-red, #C0221A);
    }

    .mbc-card.revoked {
        border-left-color: var(--mirar-red, #C0221A);
        opacity: .82;
    }

.mbc-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-dark, #232323);
    margin-bottom: 5px;
}

.mbc-meta {
    font-size: 12px;
    color: var(--text-muted, #5A5A5A);
}

.mbc-code {
    font-family: monospace;
    font-size: 11.5px;
}

.mbc-revoked {
    color: var(--mirar-red, #C0221A);
    font-weight: 700;
}

.mbc-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.mbc-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--mirar-navy, #1a2340);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color .12s ease;
}

    .mbc-link:hover {
        color: var(--mirar-red, #C0221A);
    }

.mbc-link-accent {
    color: var(--mirar-red, #C0221A);
}

    .mbc-link-accent:hover {
        color: var(--mirar-navy, #1a2340);
    }

/* ── Preview / download overlay toolbar buttons ───────────────────
   Sit on top of the dark .mcert-print-overlay backdrop, so styled
   lighter/higher-contrast than the ordinary .mbc-link buttons. ── */
.vfy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-sans, sans-serif);
    cursor: pointer;
    border: none;
    transition: background-color .12s ease, color .12s ease;
    white-space: nowrap;
}

    .vfy-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.vfy-btn-primary {
    background: var(--mirar-red, #C0221A);
    color: #fff;
}

    .vfy-btn-primary:hover:not(:disabled) {
        background: var(--mirar-red-dark, #96190f);
    }

.vfy-btn-ghost {
    background: rgba(255, 255, 255, .08);
    border: 1.5px solid rgba(255, 255, 255, .35);
    color: #fff;
}

    .vfy-btn-ghost:hover:not(:disabled) {
        background: rgba(255, 255, 255, .18);
        border-color: #fff;
    }

/* ======================================================================
   5. Certificate print design  (MemberCertificates.razor)
   Uses an "mcert-" prefix (instead of "cert-") so this member-portal
   certificate preview/print design never collides with the admin
   certificates page's own "cert-*" classes, regardless of which
   stylesheet happens to load/cascade last on a given page.
   Kept in sync with the admin certificates page's .cert-* rules
   (AdminCertificates.razor) so the on-screen preview and exported PDF
   match pixel-for-pixel across both admin and member portals.
   ====================================================================== */

/* ── Print overlay / cert design ── */
.mcert-print-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,20,20,.85);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;
    padding: 0 0 60px;
    gap: 24px;
}
/* Was getting painted UNDER the cert pages once you scrolled, because a
                   sticky element with no z-index/background just sits in normal paint
                   order — later siblings (the .mcert-page stack) drew on top of it as soon
                   as they scrolled up underneath. Giving it a solid background, its own
                   z-index above the pages, and full width fixes that: it now stays pinned
                   as a proper opaque bar at all scroll positions. */
.mcert-print-toolbar {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    padding: 16px 20px;
    /* Solid backing so the toolbar is always visibly "in front" — without this
       the bar was transparent, so once you scrolled the cert page(s) underneath
       painted right through it, making Close/Download look covered/blocked
       even though they were technically still clickable. */
    background: rgba(20,20,20,.92);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
}

.mcert-no-print {
    /* class marker only — actual hiding happens inside @media print below */
}

.mcert-export-note {
    color: #fff;
    font-size: 12px;
    text-align: center;
    max-width: 600px;
}

.mcert-export-error {
    color: #fecaca;
    font-size: 12px;
    text-align: center;
    max-width: 600px;
}

.mcert-page {
    /* True A4 landscape (297mm x 210mm = 1.4143:1). Previously the internal
       padding/margins/font sizes were sized for a 246mm-tall design, which
       meant every export came out as an oddball 297x246mm page instead of
       real A4. All the vertical measurements below (.mcert-border padding,
       .mcert-body/.mcert-footer-row margins, font sizes, image heights) were
       scaled down ~15% to make the content's natural height match true A4
       landscape at this width — the export JS (capturePdfBlob in
       AdminCertificates.razor) derives the final page size from the
       content's rendered aspect ratio, so getting the content itself to
       land on 297x210 is what actually fixes the printed size. */
    width: 1000px;
    max-width: 95vw;
    aspect-ratio: 297 / 210;
    height: auto;
    background: #fdf9ec;
    box-shadow: 0 10px 40px rgba(0,0,0,.4);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

#mcert-print-area {
    /* Deterrents against casually copying/saving the preview (it carries
       En. Zaff's signature) — pairs with oncontextmenu="return false" on
       the element in the .razor markup. Note this only stops right-click/
       drag/selection; it can't block OS-level screenshots or screen
       recording, so treat it as a mild deterrent, not real DRM. */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

    #mcert-print-area img {
        -webkit-user-drag: none;
        pointer-events: none;
    }

.mcert-border {
    /* NOTE: previously used clip-path (cut corners) + a two-layer gradient
       background (padding-box/border-box trick) to fake a gold beveled
       border. html2canvas (used for the PDF/email export) does not
       reliably capture clip-path or stacked background layers, which is
       why exported/emailed PDFs came out as a plain flat rectangle even
       though the on-screen preview looked correct. Fix: bake the gold
       cut-corner border + navy inner line + triangle watermark into a
       single flat SVG image (cert-frame-bg below) and use it as one
       ordinary background-image — a plain image load is something
       html2canvas captures faithfully, so preview and export now match. */
    position: relative;
    flex: 1;
    margin: 12px;
    padding: 50px 70px 38px 70px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    background-color: #fdf9ec;
    background-image: url("img/cert/frame/cert-frame.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.mcert-inner-line {
    display: none;
}

.mcert-bg-pattern {
    display: none;
}

.mcert-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 1;
}

.mcert-title-main {
    font-family: var(--font-garamond, Garamond, 'EB Garamond', 'Times New Roman', serif);
    font-size: 46pt;
    font-weight: 700;
    color: #1a2340;
    letter-spacing: 1px;
    line-height: 1;
}

.mcert-title-sub {
    font-family: var(--font-garamond, Garamond, 'EB Garamond', 'Times New Roman', serif);
    font-size: 31pt;
    font-weight: 700;
    color: #1a2340;
    letter-spacing: 2px;
    margin-top: 5px;
}

.mcert-brand {
    text-align: right;
}

.mcert-brand-logo {
    height: 79px;
    width: auto;
    object-fit: contain;
}

.mcert-body {
    margin-top: 24px;
    z-index: 1;
    flex: 1;
    text-align: left;
}

.mcert-line {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    color: #333;
}

.mcert-recipient {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 24pt;
    font-weight: 700;
    color: #1a2340;
    margin: 3px 0 9px;
    text-transform: uppercase;
}

.mcert-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 9px;
    max-width: 85%;
}

.mcert-divider-line {
    flex: 1 1 30px;
    height: 1.5px;
    background: #b08d3e;
}

    .mcert-divider-line:last-child {
        flex: 1 1 auto;
    }

.mcert-divider-text {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    color: #555;
    white-space: nowrap;
}

.mcert-course-title {
    font-family: var(--font-univers-heading, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 17pt;
    font-weight: 700;
    color: #1a2340;
    line-height: 1.3;
    max-width: 95%;
}

.mcert-divider-solo {
    flex: 1 1;
    height: 1.5px;
    background: #b08d3e;
    max-width: 85%;
    width: 100%;
    margin: 14px 0 9px;
}

.mcert-meta {
    margin-top: 12px;
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    color: #333;
    line-height: 1.6;
}

.mcert-footer-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 1;
    margin-top: 17px;
}

.mcert-sign-block {
    width: 38%;
}

.mcert-sign-img {
    height: 82px;
    max-width: 260px;
    object-fit: contain;
    object-position: left bottom;
    position: relative;
    z-index: 2;
    margin-bottom: -19px;
    margin-left: -4px;
}

.mcert-sign-line {
    position: relative;
    z-index: 1;
    width: 200px;
    height: 1px;
    background: #1a2340;
    margin-bottom: 5px;
}

.mcert-sign-name {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    font-weight: 700;
    color: #1a2340;
}

.mcert-sign-title {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-weight: 400;
    font-style: italic;
    color: #444;
}

.mcert-id {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    color: #666;
    margin-top: 7px;
}

.mcert-qr-block {
    text-align: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.mcert-qr-img {
    width: 89px;
    height: 89px;
}

.mcert-qr-date {
    font-family: var(--font-univers-body, 'Univers', 'Univers LT Std', 'Segoe UI', Arial, sans-serif);
    font-size: 12pt;
    font-style: italic;
    color: #444;
    margin-top: 3px;
}

.mcert-seal {
    width: 135px;
}

.mcert-seal-img {
    width: 135px;
    height: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
}

@media print {
    /* Hide everything by default */
    body * {
        visibility: hidden;
    }

    .mcert-no-print {
        display: none !important;
    }
    /* Bring the whole overlay back as the print container */
    .mcert-print-overlay {
        visibility: visible !important;
        position: fixed !important;
        inset: 0 !important;
        background: white !important;
        display: block !important;
        overflow: visible !important;
    }

        .mcert-print-overlay * {
            visibility: visible !important;
        }
    /* Toolbar still hidden even though overlay is visible */
    .mcert-print-toolbar {
        display: none !important;
        visibility: hidden !important;
    }

    .mcert-page {
        width: 297mm !important;
        height: 210mm !important;
        aspect-ratio: 297 / 210 !important;
        max-width: none !important;
        box-shadow: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        break-after: page;
        page-break-after: always;
    }

        .mcert-page:last-child {
            break-after: auto;
            page-break-after: auto;
        }

    .mcert-border {
        /* Let flexbox distribute height calculations naturally on print */
        height: auto !important;
        flex: 1 !important;
    }
    /* Force backgrounds to render */
    .mcert-border, .mcert-bg-pattern, .mcert-inner-line, .mcert-page {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    @page {
        size: A4 landscape;
        margin: 0;
    }
}

/* ======================================================================
   6. PAGE: My Profile  (MemberProfile.razor)
   ====================================================================== */

.mbp-card {
    background: var(--mbrl-card);
    border: 1px solid var(--border, #e0ddd8);
    border-radius: var(--mbrl-radius);
    padding: 26px 28px;
    margin-bottom: 22px;
    max-width: 560px;
    box-shadow: var(--mbrl-shadow-1);
    position: relative;
}

.mbp-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 16px;
    font-weight: 400;
    color: var(--text-dark, #232323);
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border, #e0ddd8);
    position: relative;
}

    .mbp-card-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 46px;
        height: 2px;
        background: var(--mbrl-gold);
    }

    .mbp-card-title i {
        font-size: 13px;
        color: var(--mirar-red, #C0221A);
        opacity: .85;
    }

.mbp-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 17px;
}

.mbp-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #5A5A5A);
}

.mbp-input {
    border: 1.5px solid var(--border, #e0ddd8);
    border-radius: var(--mbrl-radius-sm);
    padding: 11px 13px;
    font-size: 13.5px;
    font-family: var(--font-sans, sans-serif);
    color: var(--text-dark, #232323);
    background: #fff;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    box-sizing: border-box;
}

    .mbp-input:focus {
        border-color: var(--mirar-red, #C0221A);
        box-shadow: 0 0 0 3px rgba(192, 34, 26, .1);
    }

    .mbp-input:disabled {
        background: var(--mirar-off, #f7f5f0);
        color: var(--text-muted, #5A5A5A);
        cursor: not-allowed;
    }

    /* Chrome/Edge paint autofilled inputs with a forced pale-blue inset
       shadow that can't be turned off directly — only overridden by
       supplying our own inset shadow the same color as the field. This
       stops autofilled fields (e.g. a saved password, or Chrome guessing
       an email into an unrelated field) from showing that blue tint. */
    .mbp-input:-webkit-autofill,
    .mbp-input:-webkit-autofill:hover,
    .mbp-input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--text-dark, #232323);
        -webkit-box-shadow: 0 0 0 1000px #fff inset;
        box-shadow: 0 0 0 1000px #fff inset;
        transition: background-color 9999s ease-in-out 0s;
    }

.mbp-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mbp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 24px;
    border: none;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-sans, sans-serif);
    background: var(--mirar-red, #C0221A);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

    .mbp-btn:hover:not(:disabled) {
        background: var(--mirar-red-dark, #96190f);
        box-shadow: 0 6px 16px rgba(192, 34, 26, .28);
    }

    .mbp-btn:active:not(:disabled) {
        transform: translateY(1px);
    }

    .mbp-btn:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

.mbp-msg {
    padding: 11px 15px;
    border-radius: var(--mbrl-radius-sm);
    font-size: 12.5px;
    margin-bottom: 18px;
    border-left: 3px solid transparent;
}

    .mbp-msg.ok {
        background: #f0fdf4;
        border-left-color: var(--mirar-green, #16a34a);
        color: #166534;
    }

    .mbp-msg.err {
        background: #fef2f2;
        border-left-color: var(--mirar-red, #C0221A);
        color: #991b1b;
    }

@media (max-width: 560px) {
    .mbp-grid2 {
        grid-template-columns: 1fr;
    }
}

/* ======================================================================
   7. AUTH SHELL — MemberRegister.razor, MemberActivate.razor
   Fully public, no MemberLayout — self-contained page shell.
   ====================================================================== */

.mirar-login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(900px 460px at 15% 0%, rgba(26, 35, 64, .05), transparent 60%), radial-gradient(700px 420px at 100% 100%, rgba(192, 34, 26, .04), transparent 55%), var(--mirar-off, #f7f5f0);
    box-sizing: border-box;
}

.mirar-login-card {
    width: 100%;
    max-width: 400px;
    background: var(--mbrl-card);
    border-radius: var(--mbrl-radius-lg);
    box-shadow: var(--mbrl-shadow-2);
    padding: 38px 34px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

    .mirar-login-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--mbrl-seam);
    }

.mirar-login-brand {
    display: block;
    text-align: center;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--mirar-navy, #1a2340);
    text-decoration: none;
    margin-bottom: 4px;
}

    .mirar-login-brand span {
        color: var(--mirar-red, #C0221A);
    }

.mirar-login-brand-sub {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--mbrl-gold);
    margin-bottom: 30px;
}

.mirar-login-heading {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 21px;
    font-weight: 400;
    color: var(--text-dark, #232323);
    text-align: center;
    margin: 0 0 8px;
}

.mirar-login-sub {
    font-size: 13px;
    color: var(--text-muted, #5A5A5A);
    text-align: center;
    line-height: 1.6;
    margin: 0 0 24px;
}

.mirar-login-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fef2f2;
    border-left: 3px solid var(--mirar-red, #C0221A);
    color: #991b1b;
    font-size: 12.5px;
    padding: 11px 15px;
    border-radius: var(--mbrl-radius-sm);
    margin-bottom: 18px;
}

.mirar-login-field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 15px;
}

.mirar-login-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #5A5A5A);
}

.mirar-login-input {
    border: 1.5px solid var(--border, #e0ddd8);
    border-radius: var(--mbrl-radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    font-family: var(--font-sans, sans-serif);
    color: var(--text-dark, #232323);
    background: #fff;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}

    .mirar-login-input:focus {
        border-color: var(--mirar-red, #C0221A);
        box-shadow: 0 0 0 3px rgba(192, 34, 26, .1);
    }

    .mirar-login-input:disabled {
        background: var(--mirar-off, #f7f5f0);
        color: var(--text-muted, #5A5A5A);
        cursor: not-allowed;
    }

    .mirar-login-input:-webkit-autofill,
    .mirar-login-input:-webkit-autofill:hover,
    .mirar-login-input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--text-dark, #232323);
        -webkit-box-shadow: 0 0 0 1000px #fff inset;
        box-shadow: 0 0 0 1000px #fff inset;
        transition: background-color 9999s ease-in-out 0s;
    }

.mirar-login-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 20px;
    border: none;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-family: var(--font-sans, sans-serif);
    background: var(--mirar-red, #C0221A);
    color: #fff;
    cursor: pointer;
    margin-top: 8px;
    box-sizing: border-box;
    transition: background-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

    .mirar-login-btn:hover:not(:disabled) {
        background: var(--mirar-red-dark, #96190f);
        box-shadow: 0 8px 20px rgba(192, 34, 26, .28);
    }

    .mirar-login-btn:active:not(:disabled) {
        transform: translateY(1px);
    }

    .mirar-login-btn:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

.mirar-login-spinner {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    animation: mlogin-spin .7s linear infinite;
    flex-shrink: 0;
}

@keyframes mlogin-spin {
    to {
        transform: rotate(360deg);
    }
}

.mirar-login-back {
    text-align: center;
    margin-top: 20px;
    font-size: 12.5px;
}

    .mirar-login-back a {
        color: var(--text-muted, #5A5A5A);
        text-decoration: none;
        transition: color .12s ease;
    }

        .mirar-login-back a:hover {
            color: var(--mirar-red, #C0221A);
        }


/* ======================================================================
   8. PAGE: Verify Certificate  (VerifyCertificate.razor)
   Fully public, no MemberLayout — self-contained page shell.
   ====================================================================== */

.verify-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: radial-gradient(900px 460px at 85% 0%, rgba(176, 141, 62, .07), transparent 55%), radial-gradient(700px 420px at 0% 100%, rgba(26, 35, 64, .05), transparent 55%), var(--mirar-off, #f7f5f0);
    box-sizing: border-box;
}

.verify-card {
    width: 100%;
    max-width: 480px;
    background: var(--mbrl-card);
    border: 1px solid var(--border, #e0ddd8);
    border-radius: var(--mbrl-radius-lg);
    box-shadow: var(--mbrl-shadow-2);
    padding: 38px 34px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

    .verify-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--mbrl-seam);
    }

.verify-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 26px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--border, #e0ddd8);
}

.verify-logo {
    height: 44px;
    width: auto;
    object-fit: contain;
    margin-bottom: 10px;
}

.verify-brand-sub {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mbrl-gold);
}

.verify-loading {
    text-align: center;
    padding: 40px 16px;
    color: var(--text-muted, #5A5A5A);
    font-size: 13px;
}

.verify-result {
    text-align: center;
    padding-bottom: 26px;
}

.verify-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-size: 25px;
    margin-bottom: 16px;
    box-shadow: var(--mbrl-shadow-1);
}

.verify-result.valid .verify-icon {
    background: #d1fae5;
    color: #065f46;
}

.verify-result.invalid .verify-icon {
    background: #f3f4f6;
    color: #6b7280;
}

.verify-result.revoked .verify-icon {
    background: #fef2f2;
    color: var(--mirar-red, #C0221A);
}

.verify-headline {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 20px;
    font-weight: 400;
    color: var(--text-dark, #232323);
    margin-bottom: 8px;
}

.verify-sub {
    font-size: 13px;
    color: var(--text-muted, #5A5A5A);
    line-height: 1.6;
    max-width: 380px;
    margin: 0 auto;
}

.verify-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 4px;
}

    .verify-table td {
        padding: 11px 0;
        border-bottom: 1px solid var(--border, #e0ddd8);
        vertical-align: top;
    }

    .verify-table tr:last-child td {
        border-bottom: none;
    }

    .verify-table td:first-child {
        color: var(--text-muted, #5A5A5A);
        width: 40%;
        padding-right: 12px;
    }

    .verify-table td:last-child {
        color: var(--text-dark, #232323);
        text-align: right;
    }

.verify-footer {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--border, #e0ddd8);
    font-size: 11px;
    color: var(--text-muted, #5A5A5A);
    text-align: center;
    line-height: 1.55;
}

@media (max-width: 520px) {
    .verify-card {
        padding: 30px 22px;
    }

    .verify-table td:first-child,
    .verify-table td:last-child {
        display: block;
        width: 100%;
        text-align: left;
        padding: 2px 0;
    }

    .verify-table tr {
        display: block;
        padding: 10px 0;
        border-bottom: 1px solid var(--border, #e0ddd8);
    }

    .verify-table td {
        border-bottom: none;
    }
}

/* ======================================================================
   9. PAGE: Course Resources  (CourseResources.razor)
   Fully public, no MemberLayout — self-contained page shell.
   ====================================================================== */

.crs-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 60px 24px 100px;
    font-family: var(--font-sans, sans-serif);
}

/* ── Loading / empty / not-found states ─────────────────────── */
.crs-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    padding: 100px 24px;
    color: var(--text-muted, #5A5A5A);
}

    .crs-state span:not(.crs-eyebrow) {
        font-size: 13px;
    }

.crs-state-card {
    background: var(--mbrl-card);
    border: 1px solid var(--border, #e0ddd8);
    border-radius: var(--mbrl-radius-lg);
    box-shadow: var(--mbrl-shadow-1);
}

    .crs-state-card h2 {
        font-family: var(--font-serif, Georgia, serif);
        color: var(--mirar-navy, #0d0d0d);
        margin: 6px 0 2px;
        font-weight: 400;
    }

    .crs-state-card p {
        margin: 0;
        font-size: 13.5px;
    }

.crs-state-icon {
    font-size: 28px;
    color: var(--mirar-red, #C0221A);
}

.crs-spinner {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2.5px solid var(--border, #e0ddd8);
    border-top-color: var(--mirar-red, #C0221A);
    animation: crs-spin .7s linear infinite;
}

@keyframes crs-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ── Hero header ──────────────────────────────────────────────── */
.crs-hero {
    margin-bottom: 40px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--border, #e0ddd8);
    position: relative;
}

    .crs-hero::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 64px;
        height: 2px;
        background: var(--mbrl-gold);
    }

.crs-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mirar-red, #C0221A);
}

.crs-title {
    font-family: var(--font-serif, Georgia, serif);
    font-size: clamp(24px, 4vw, 34px);
    color: var(--mirar-navy, #0d0d0d);
    margin: 10px 0 6px;
    line-height: 1.25;
    font-weight: 400;
}

.crs-count {
    font-size: 12.5px;
    color: var(--text-muted, #5A5A5A);
}

/* ── Video list ───────────────────────────────────────────────── */
.crs-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.crs-item {
    background: var(--mbrl-card);
    border: 1px solid var(--border, #e0ddd8);
    border-radius: var(--mbrl-radius-lg);
    padding: 22px;
    box-shadow: var(--mbrl-shadow-1);
    transition: box-shadow .2s ease, transform .2s ease;
}

    .crs-item:hover {
        box-shadow: var(--mbrl-shadow-2);
        transform: translateY(-2px);
    }

.crs-item-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.crs-item-num {
    font-family: var(--font-serif, Georgia, serif);
    font-size: 20px;
    color: var(--mirar-red, #C0221A);
    opacity: .55;
    flex-shrink: 0;
}

.crs-item-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--mirar-navy, #0d0d0d);
}

.crs-video-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: var(--mbrl-radius);
    overflow: hidden;
    background: #000;
}

    .crs-video-frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.crs-open-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--mirar-navy, #0d0d0d);
    color: #fff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 700;
    transition: background-color .15s ease, box-shadow .15s ease;
}

    .crs-open-link:hover {
        background: var(--mirar-red, #C0221A);
        box-shadow: 0 8px 20px rgba(192, 34, 26, .25);
    }

    .crs-open-link .crs-arrow {
        transition: transform .15s ease;
    }

    .crs-open-link:hover .crs-arrow {
        transform: translate(2px, -2px);
    }

@media (max-width: 640px) {
    .crs-page {
        padding: 40px 16px 76px;
    }
}

.crs-section {
    margin-bottom: 40px;
}

.crs-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.crs-section-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.crs-item-meta {
    font-size: 12px;
    color: var(--text-muted, #6b6b6b);
}