/**
 * Open Badges Backpack - Public Page Styles
 *
 * Styles for public-facing pages (portfolio, shared badges, shared collections).
 * Self-contained — does not depend on custom.css.
 */

/* ============================================
   Public Layout
   ============================================ */
.public-page {
    background-color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark, #1a1a2e);
}

.public-header {
    background-color: #fff;
    border-bottom: 1px solid var(--border-light, #e5e7eb);
    padding: 14px 0;
}

.public-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.public-header-brand {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.public-header-brand:hover {
    text-decoration: none;
}

.public-header-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.public-header-nav a {
    color: var(--brand-primary, #2f2fbc);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}

.public-header-nav a:hover,
.public-header-nav a:focus-visible {
    color: var(--text-dark, #1a1a2e);
    text-decoration: underline;
}

.public-main {
    flex: 1;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.public-main > .award-body:last-child {
    flex: 1;
}

.public-footer {
    background-color: #fff;
    border-top: 1px solid var(--border-light, #e5e7eb);
    padding: 24px 0;
    font-size: 0.875rem;
    color: var(--text-muted, #6c757d);
    text-align: center;
}

.public-footer a {
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
}

.public-footer a:hover,
.public-footer a:focus-visible {
    text-decoration: underline;
}

/* ============================================
   Award Page — Expired Banner
   ============================================ */
.award-expired-banner {
    background-color: #fff3cd;
    padding: 10px 0;
    text-align: center;
    font-size: 1rem;
    color: #856404;
}

/* (old .award-revoked-banner removed — now uses Bootstrap .alert-danger) */

/* ============================================
   Award Page — Hero Banner (badge image)
   ============================================ */
.award-hero {
    background: linear-gradient(135deg, #292989 0%, #3a3aad 50%, #4a4acd 100%);
    padding: 56px 0 64px;
    position: relative;
    overflow: hidden;
}

.award-hero::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    pointer-events: none;
}

.award-hero::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -80px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

.award-hero + .award-body {
    background: linear-gradient(180deg, #eceefb 0%, #f3f4fc 40%, #f7f8fa 100%);
    padding-top: 0;
    padding-bottom: 96px;
}

/* Title & issuer inside content area */
.award-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 4px;
    line-height: 1.2;
}

.award-issued-by {
    font-size: 1rem;
    color: var(--text-muted, #595f66);
    margin-bottom: 20px;
}

.award-issued-by a {
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
}

.award-issued-by a:hover,
.award-issued-by a:focus-visible {
    text-decoration: underline;
}

.award-recipient-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 4px;
}

.award-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
}

.award-badge-container {
    display: inline-block;
    position: relative;
}

.award-badge-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.award-badge-image {
    max-width: 360px;
    max-height: 360px;
    object-fit: contain;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3));
}

.award-badge-image-expired {
    filter: grayscale(100%);
    opacity: 0.35;
}

.award-badge-image-revoked {
    opacity: 0.5;
}

.award-badge-overlay-revoked {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    pointer-events: none;
}

.award-badge-image-placeholder {
    font-size: 5rem;
    color: var(--text-muted, #6c757d);
    opacity: 0.3;
    padding: 40px 0;
}

/* ============================================
   Award Page — Content Body
   ============================================ */
.award-body {
    padding: 32px 0 48px;
}

.award-issuer-link {
    font-size: 1rem;
}

.award-issuer-link a {
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
}

.award-issuer-link a:hover,
.award-issuer-link a:focus-visible {
    text-decoration: underline;
}

.award-description {
    color: #3a3a4a;
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 24px;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Recipient & date metadata */
.award-meta-label {
    font-size: 0.875rem;
    color: #4a4a5a;
}

.award-meta-value {
    display: inline-block;
    margin-top: 4px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
}

/* ============================================
   Custom Metadata Tables (Additional details)
   ============================================ */
.custom-metadata-card {
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.custom-metadata-table {
    --bs-table-bg: transparent;
    font-size: 0.9375rem;
    border-collapse: collapse;
    margin-bottom: 0;
}

.custom-metadata-table .custom-metadata-group-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a4a5a;
    background: transparent;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid #e9ecef;
}

.custom-metadata-table .custom-metadata-label {
    font-size: 0.875rem;
    color: #4a4a5a;
    font-weight: 500;
    width: 30%;
    padding: 0.5rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid #e9ecef;
}

.custom-metadata-table .custom-metadata-value {
    font-size: 0.9375rem;
    padding: 0.5rem 1rem;
    vertical-align: top;
    border-bottom: 1px solid #e9ecef;
    color: var(--text-dark, #1a1a2e);
}

.custom-metadata-table tbody tr:last-child .custom-metadata-label,
.custom-metadata-table tbody tr:last-child .custom-metadata-value {
    border-bottom: none;
}

/* ============================================
   Award Page — Section Headings
   ============================================ */
.award-section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark, #1a1a2e);
    margin-top: 48px;
    margin-bottom: 0;
}

.award-section-rule {
    border: none;
    border-top: 1px solid #c8c8df;
    margin: 12px 0 20px;
}

/* ============================================
   Award Page — Media Object (Criteria/Evidence/Alignments)
   ============================================ */
.award-media {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.award-media-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
    color: var(--brand-primary, #2f2fbc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.award-media-icon-check {
    background: linear-gradient(135deg, #d1e7dd 0%, #a3cfbb 100%);
    color: #198754;
}

.award-media-body {
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.award-media-body h5 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 4px;
    word-break: break-word;
}

.award-media-body h5 a {
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
    word-break: break-all;
}

.award-media-body h5 a:hover,
.award-media-body h5 a:focus-visible {
    text-decoration: underline;
}

.award-media-body p {
    font-size: 1rem;
    color: #3a3a4a;
    line-height: 1.65;
}

.award-media-detail {
    color: #4a4a5a;
}

.award-notes-heading {
    font-size: 1rem;
    color: #3a3a4a;
}

/* ============================================
   Award Page — Cached Page Links
   ============================================ */
.cache-modal-trigger {
    font-size: 0.8125rem;
    color: #1a7f37;
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
}

.cache-modal-trigger:hover,
.cache-modal-trigger:focus-visible {
    color: #116329;
    text-decoration: underline;
}

/* ============================================
   Award Page — Tags
   ============================================ */
.award-tag {
    display: inline-block;
    font-weight: 600;
    padding: 5px 14px;
    background-color: #fff;
    border: 1px solid #d8d8ec;
    color: var(--brand-primary, #2f2fbc);
    border-radius: 50px;
    font-size: 0.875rem;
    letter-spacing: 0.01em;
    transition: background-color 0.15s, border-color 0.15s;
}

.award-tag:hover,
.award-tag:focus-visible {
    background-color: rgba(47, 47, 188, 0.06);
    border-color: var(--brand-primary, #2f2fbc);
}

/* ============================================
   Award Page — Issuer Sidebar Card
   ============================================ */
.award-issuer-card {
    padding: 24px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.06);
    color: #4a4a5a;
}

.award-issuer-card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 12px;
}

.award-issuer-card a {
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
}

.award-issuer-card a:hover,
.award-issuer-card a:focus-visible {
    text-decoration: underline;
}

.award-issuer-logo-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.award-issuer-logo {
    max-width: 80%;
    max-height: 100px;
    object-fit: contain;
}

/* Credential verification — glossary-style terms */
.proof-check-term {
    text-decoration: underline dotted;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    opacity: 0.85;
    cursor: help;
}

.proof-check-term:hover {
    opacity: 1;
}

/* Credential verification — tooltip */
.proof-tooltip .tooltip-inner {
    max-width: 320px;
    text-align: left;
    font-size: 1rem;
    line-height: 1.6;
    padding: 0.625rem 0.875rem;
}

/* Credential verification — collapse chevron rotation */
#credTechDetails.show ~ a .bi-chevron-right,
a[aria-expanded="true"] .bi-chevron-right {
    transform: rotate(90deg);
}

/* ============================================
   Award Page — Verify Recipient
   ============================================ */
.award-verify-section {
    background-color: #f0f1f5;
    padding: 80px 0 96px;
}

.award-verify-section .award-section-heading {
    margin-top: 0;
}

.award-verify-input-group .form-control {
    border: 2px solid #e5e7eb;
    color: #1a1a2e;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.award-verify-input-group .form-control:focus {
    border-color: #2F2FBC;
    background-color: #f7f8fa;
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 188, 0.25);
    outline: 0;
}

.award-verify-input-group .btn {
    border: 2px solid #2F2FBC;
}

/* ============================================
   Award Page — Owner Controls
   ============================================ */
.award-owner-bar {
    background-color: #f0f0f8;
    border: 1px solid #d8d8ec;
    border-radius: 8px;
    margin-top: 24px;
}

.award-owner-bar-body {
    padding: 14px 20px;
}

.award-owner-bar-label {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--brand-primary, #2f2fbc);
    background-color: rgba(47, 47, 188, 0.08);
    padding: 4px 10px;
    border-radius: 4px;
    align-items: center;
    white-space: nowrap;
}

.award-owner-bar .form-control {
    font-size: 0.875rem;
    background-color: #fff;
}

/* Brand-coloured Save button (input group) */
.award-btn-brand {
    background-color: var(--brand-primary, #2f2fbc);
    border-color: #dee2e6;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}

.award-btn-brand:hover,
.award-btn-brand:focus-visible {
    background-color: #2424a0;
    border-color: #dee2e6;
    color: #fff;
}

/* Modal close icon */
.award-modal-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    border: 1.5px solid #adb5bd;
    border-radius: 50%;
    background: #fff;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
}
.award-modal-close::before,
.award-modal-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    background: #6c757d;
    border-radius: 1px;
    transition: background 0.15s ease-in-out;
}
.award-modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.award-modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.award-modal-close:hover,
.award-modal-close:focus {
    background: var(--brand-primary, #2f2fbc);
    border-color: var(--brand-primary, #2f2fbc);
    outline: none;
}
.award-modal-close:hover::before,
.award-modal-close:hover::after,
.award-modal-close:focus::before,
.award-modal-close:focus::after {
    background: #fff;
}

/* Copy link styled as a link */
.award-copy-link {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.award-copy-link:hover,
.award-copy-link:focus-visible {
    text-decoration: underline;
}

/* Brand-coloured toggle switch */
.award-toggle-brand:checked {
    background-color: var(--brand-primary, #2f2fbc);
    border-color: var(--brand-primary, #2f2fbc);
}

/* Hidden state */
.award-content-hidden {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

.award-hidden-banner-outer {
    padding: 16px 0;
}

.award-hidden-banner {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 12px 20px;
    text-align: center;
    font-size: 1rem;
    color: #856404;
}

/* ============================================
   Award Page — Evidence Note Cards
   ============================================ */
.award-note-card {
    background-color: #fff;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.award-note-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.award-note-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.award-note-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #e9ecef;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-muted, #6c757d);
    flex-shrink: 0;
}

.award-note-author {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark, #1a1a2e);
    line-height: 1.3;
}

.award-note-date {
    display: block;
    font-size: 0.8125rem;
    color: #3a3a4a;
}

.award-note-card-body {
    font-size: 1rem;
    line-height: 1.65;
    color: #3a3a4a;
    position: relative;
}

.award-note-card-body p {
    margin-bottom: 0.5rem;
}

.award-note-card-body p:last-child {
    margin-bottom: 0;
}

.award-note-card-body a {
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
}

.award-note-card-body a:hover,
.award-note-card-body a:focus-visible {
    text-decoration: underline;
}

.award-note-attachment {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
    background: #f0f1f3;
    border-radius: 6px;
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.award-note-attachment:hover,
.award-note-attachment:focus-visible {
    text-decoration: underline;
    background: #e4e6ea;
}

.award-note-attachment .attachment-icon {
    font-size: 1rem;
}

.award-note-attachment .attachment-size {
    color: #6b7280;
}

.award-note-attachment .attachment-download {
    font-size: 0.8125rem;
}

/* ============================================
   Award Page — Endorsement Cards
   ============================================ */
.award-endorsement-card {
    background-color: #fff;
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.award-endorsement-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.award-endorsement-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.award-endorsement-author {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark, #1a1a2e);
    line-height: 1.3;
}

.award-endorsement-relationship {
    font-size: 0.875rem;
    margin: 0 0 6px;
}

.award-endorsement-date {
    font-size: 0.8125rem;
    color: #3a3a4a;
}

.award-endorsement-card-body {
    font-size: 1rem;
    line-height: 1.65;
    color: #3a3a4a;
    position: relative;
}

.award-endorsement-card-body p {
    margin-bottom: 0.5rem;
}

.award-endorsement-card-body p:last-child {
    margin-bottom: 0;
}

/* Truncation & read more (shared by notes and endorsements) */
.award-note-truncated {
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.award-note-readmore {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-primary, #2f2fbc);
    cursor: pointer;
    margin-bottom: 6px;
    display: inline-block;
}

.award-note-readmore:hover,
.award-note-readmore:focus-visible {
    text-decoration: underline;
}

/* ============================================
   Award Page — Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .award-issuer-card {
        position: static;
        margin-top: 32px;
    }
}

@media (max-width: 575.98px) {
    .award-badge-image {
        max-width: 240px;
        max-height: 240px;
    }

    .award-hero {
        padding: 32px 0 40px;
    }

    .award-hero + .award-body {
        padding-bottom: 48px;
    }

    .award-section-heading {
        font-size: 1.125rem;
    }

    .award-owner-bar .card-body {
        padding: 12px 14px;
    }

    .public-header-nav {
        gap: 16px;
    }

    .public-header-nav a {
        font-size: 0.875rem;
    }
}

/* ============================================
   Portfolio - Owner Strip (full-width bar below header)
   ============================================ */
.portfolio-owner-strip {
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 12px 0;
    font-size: 0.8125rem;
}

/* Desktop: single-row layout */
.portfolio-owner-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.portfolio-owner-url-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    min-width: 0;
}

.portfolio-owner-visibility-group {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.portfolio-owner-visibility-group .form-check {
    display: flex;
    align-items: center;
    padding: 0;
    min-height: 0;
}

.portfolio-owner-visibility-group .form-check-input {
    float: none;
    margin: 0;
    width: 2.75rem;
    height: 1.375rem;
}

/* Field labels (mobile only, hidden on sm+) */
.portfolio-owner-field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #4a4a78;
    margin-bottom: 2px;
}

.portfolio-owner-field-hint {
    font-size: 0.75rem;
    color: #5a5a82;
    margin-bottom: 4px;
}

/* Mobile: stack into labelled rows */
@media (max-width: 575.98px) {
    .portfolio-owner-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .portfolio-owner-url-group {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .portfolio-owner-url-group .input-group {
        max-width: 100% !important;
    }

    .portfolio-owner-url-group .d-flex {
        flex-grow: 1;
    }

    .portfolio-owner-url-group .award-copy-link {
        align-self: flex-start;
        font-size: 0.875rem;
    }

    .portfolio-owner-visibility-group {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 12px;
        border-top: 1px solid #d8d8ec;
    }

    .portfolio-owner-visibility-group .portfolio-owner-field-label {
        margin-bottom: 0;
    }
}

/* Brand gradient button for owner strip */
.portfolio-btn-brand {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #292989 0%, #4a4acd 100%);
    border: none;
}

.portfolio-btn-brand:hover,
.portfolio-btn-brand:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #232375 0%, #4040b8 100%);
}

.portfolio-btn-brand:disabled,
.portfolio-btn-brand.disabled {
    color: #fff;
    opacity: 1;
    background: linear-gradient(135deg, #5a5ab0 0%, #7a7ad4 100%);
}

.portfolio-btn-brand-outline {
    font-size: 0.875rem;
    font-weight: 600;
    color: #292989;
    background: transparent;
    border: 1.5px solid #292989;
}

.portfolio-btn-brand-outline:hover,
.portfolio-btn-brand-outline:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #292989 0%, #4a4acd 100%);
    border-color: transparent;
}

/* Secondary button for owner strip (matches bar-label tone) */
.portfolio-btn-secondary {
    font-size: 0.875rem !important;
    font-weight: 600;
    color: #2f2fbc;
    background-color: rgba(47, 47, 188, 0.08);
    border: 1px solid rgba(47, 47, 188, 0.08);
}

.portfolio-btn-secondary:hover,
.portfolio-btn-secondary:focus-visible {
    color: #2f2fbc;
    background-color: rgba(47, 47, 188, 0.14);
    border-color: rgba(47, 47, 188, 0.14);
}

/* Brand gradient toggle for owner strip */
.portfolio-toggle-brand:checked {
    background-color: #3a3aad;
    border-color: #3a3aad;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.portfolio-toggle-brand:focus {
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 188, 0.25);
}

/* ============================================
   Portfolio - Hero Wrap (white/black, no brand gradient)
   ============================================ */
.portfolio-hero-wrap {
    background-color: #fff;
}

.portfolio-hero-title {
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.25rem;
    color: var(--text-dark, #1a1a2e);
}

.portfolio-hero-bio {
    overflow-wrap: break-word;
    word-break: break-word;
}

.portfolio-hero-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e8eaf6;
    color: var(--brand-primary, #2f2fbc);
    font-size: 1.125rem;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, transform 0.15s;
}

.portfolio-hero-link:hover,
.portfolio-hero-link:focus-visible {
    background-color: var(--brand-primary, #2f2fbc);
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-2px);
}

/* ============================================
   Portfolio - Tab Bar
   ============================================ */
.portfolio-tab-bar {
    background-color: transparent;
}

.portfolio-tab-bar .nav-link,
.portfolio-tab-bar .nav-link:hover,
.portfolio-tab-bar .nav-link:focus {
    text-decoration: none !important;
}

.portfolio-tab-bar .nav-link.active {
    color: var(--text-dark, #1a1a2e) !important;
    border-bottom-color: var(--text-dark, #1a1a2e) !important;
}

/* ============================================
   Portfolio - Content Section (gradient bg)
   ============================================ */
.portfolio-content-bg {
    background: linear-gradient(180deg, #eceefb 0%, #f3f4fc 40%, #f7f8fa 100%);
    padding-top: 32px;
    padding-bottom: 96px;
}

/* (old portfolio-profile-card styles removed — now uses issuer-style hero layout) */

/* ============================================
   Portfolio - Collapsible Section Structure
   ============================================ */
.portfolio-section {
    margin-bottom: 32px;
}

.portfolio-section-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 0;
    border: none;
    background: none;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--text-dark, #1a1a2e);
    letter-spacing: normal;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
}

.portfolio-section-toggle::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-primary, #2f2fbc);
    margin-right: 10px;
    flex-shrink: 0;
}

.portfolio-section-toggle:hover,
.portfolio-section-toggle:focus-visible {
    color: var(--text-dark, #1a1a2e);
}

.portfolio-section-chevron {
    font-size: 1rem;
    color: var(--text-muted, #6c757d);
    transition: transform 0.25s ease;
}

.portfolio-section-toggle.collapsed .portfolio-section-chevron {
    transform: rotate(-90deg);
}

.portfolio-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background-color: transparent;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-muted, #6c757d);
    margin-left: 6px;
}

/* ============================================
   Portfolio - Badge Grid
   ============================================ */
.portfolio-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}

@media (max-width: 767.98px) {
    .portfolio-badge-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.portfolio-badge-card,
.portfolio-badge-card:hover,
.portfolio-badge-card:focus,
.portfolio-badge-card:focus-visible {
    text-decoration: none !important;
    color: inherit;
}

.portfolio-badge-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: none;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.portfolio-badge-card:hover,
.portfolio-badge-card:focus,
.portfolio-badge-card:focus-visible {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-8px);
}

.portfolio-badge-card:focus {
    outline: none;
}

.portfolio-badge-card:focus-visible {
    outline: 2px solid var(--brand-primary, #2f2fbc);
    outline-offset: 2px;
}

.portfolio-badge-image-container {
    aspect-ratio: 1;
    background-color: #e4e6f4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.portfolio-badge-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.portfolio-badge-image-placeholder {
    font-size: 2.5rem;
    color: var(--text-muted, #6c757d);
    opacity: 0.3;
}

.portfolio-badge-info {
    padding: 12px 14px 14px;
    text-align: center;
}

.portfolio-badge-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 4px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.portfolio-badge-issuer {
    font-size: 0.875rem;
    color: var(--text-muted, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}

.portfolio-badge-date {
    font-size: 0.8125rem;
    color: var(--text-muted, #6c757d);
}

/* ============================================
   Portfolio - Collection Folder Cards
   ============================================ */
.portfolio-collection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.portfolio-collection-card,
.portfolio-collection-card:hover,
.portfolio-collection-card:focus,
.portfolio-collection-card:focus-visible {
    text-decoration: none !important;
    color: inherit;
}

.portfolio-collection-card {
    display: block;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: none;
    box-shadow: none;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.portfolio-collection-card:hover,
.portfolio-collection-card:focus,
.portfolio-collection-card:focus-visible {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-8px);
}

.portfolio-collection-card:focus {
    outline: none;
}

.portfolio-collection-card:focus-visible {
    outline: 2px solid var(--brand-primary, #2f2fbc);
    outline-offset: 2px;
}

.portfolio-collection-thumbs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    background-color: #e4e6f4;
    min-height: 120px;
}

.portfolio-collection-thumb {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    object-fit: contain;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 4px;
}

.portfolio-collection-thumb-more {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
}

.portfolio-collection-empty-icon {
    font-size: 2rem;
    color: var(--text-muted, #6c757d);
    opacity: 0.3;
}

.portfolio-collection-body {
    padding: 12px 14px 14px;
}

.portfolio-collection-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 4px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.portfolio-collection-desc {
    font-size: 0.875rem;
    color: var(--text-muted, #6c757d);
    margin-bottom: 4px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.portfolio-collection-meta {
    font-size: 0.875rem;
    color: var(--text-muted, #6c757d);
}

@media (max-width: 575.98px) {
    .portfolio-collection-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   Portfolio - Empty State
   ============================================ */
.portfolio-empty {
    text-align: center;
    padding: 64px 24px;
}

.portfolio-empty i {
    font-size: 3.5rem;
    color: var(--text-muted, #6c757d);
    opacity: 0.25;
    display: block;
    margin-bottom: 16px;
}

.portfolio-empty p {
    color: var(--text-muted, #6c757d);
    font-size: 1rem;
    margin: 0;
}

/* ============================================
   Portfolio - Search
   ============================================ */
.portfolio-search-bar {
    position: relative;
    max-width: 480px;
}

.portfolio-search-input {
    padding: 12px 44px 12px 42px;
    border-radius: 50px;
    border: 2px solid var(--border-light, #e5e7eb);
    font-size: 1rem;
    background-color: #fff;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.portfolio-search-input:focus {
    background-color: #fff;
    border-color: var(--brand-primary, #2f2fbc);
    box-shadow: 0 0 0 3px rgba(47, 47, 188, 0.1);
}

.portfolio-search-input::placeholder {
    color: var(--text-muted, #6c757d);
}

.portfolio-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.portfolio-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #6c757d);
    font-size: 1rem;
    pointer-events: none;
    z-index: 1;
}

.portfolio-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px 6px;
    cursor: pointer;
    color: var(--text-muted, #6c757d);
    font-size: 1rem;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s, background-color 0.15s;
}

.portfolio-search-clear:hover,
.portfolio-search-clear:focus-visible {
    color: var(--text-dark, #1a1a2e);
    background-color: #f0f1f3;
}

.portfolio-search-status {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary, #5f6368);
}

@keyframes portfolio-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.portfolio-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--text-muted, #6c757d);
    border-top-color: transparent;
    border-radius: 50%;
    animation: portfolio-spin 0.6s linear infinite;
    vertical-align: middle;
}

/* ============================================
   Portfolio - Load More Button
   ============================================ */
.portfolio-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 8px;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #292989 0%, #4a4acd 100%);
    cursor: pointer;
    transition: opacity 0.15s, box-shadow 0.15s;
}

.portfolio-load-more-btn:hover {
    opacity: 0.85;
}

.portfolio-load-more-btn:focus-visible {
    opacity: 0.85;
    outline: 2px solid var(--brand-primary, #2f2fbc);
    outline-offset: 2px;
}

.portfolio-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   Portfolio - Read More (truncation)
   ============================================ */
.portfolio-text-truncated {
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.portfolio-readmore {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-primary, #2f2fbc);
    cursor: pointer;
    margin-top: 4px;
    display: inline-block;
}

.portfolio-readmore:hover,
.portfolio-readmore:focus-visible {
    text-decoration: underline;
}

/* (portfolio-hero owner bar and readmore overrides removed — portfolio no longer uses hero gradient) */

/* ============================================
   Portfolio - Responsive
   ============================================ */
@media (max-width: 575.98px) {
    .portfolio-hero-wrap .container {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .portfolio-hero-wrap img.rounded-circle {
        max-width: 120px !important;
        max-height: 120px !important;
    }
}

/* ============================================
   Public Collection Page — Hero Description & Curator Link
   ============================================ */
.collection-curator-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 4px;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.collection-curator-link {
    color: #4a4a6a;
    text-decoration: none;
    transition: color 0.15s;
}

.collection-curator-link:hover,
.collection-curator-link:focus-visible {
    color: #292989;
    text-decoration: underline;
}

.collection-hero-description {
    max-width: 720px;
    margin: 16px auto 0;
    color: var(--text-dark, #1a1a2e);
    line-height: 1.7;
    font-size: 1.125rem;
    position: relative;
}

/* ============================================
   Public Collection Page — Top Section
   ============================================ */
.marketing-section.portfolio-page-title + .collection-top {
    background: #eaecf9;
    padding: 48px 0 24px;
}

.marketing-section.portfolio-page-title + .collection-top + .award-body {
    background: linear-gradient(180deg, #eaecf9 0%, #dde0f7 100%);
    padding-bottom: 96px;
}

.marketing-section.portfolio-page-title {
    background: linear-gradient(180deg, #f7f8fa 0%, #eaecf9 100%);
}

.collection-public-description {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-secondary, #5f6368);
    line-height: 1.7;
    font-size: 1rem;
    position: relative;
}

/* ============================================
   Public Collection Page — Badge Cards
   ============================================ */
.collection-badge-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.collection-badge-card {
    background-color: #fff;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.collection-badge-card:hover,
.collection-badge-card:focus-visible {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-8px);
}

.collection-badge-card:focus-within {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    outline: 2px solid var(--brand-primary, #2f2fbc);
    outline-offset: 2px;
}

.collection-badge-card-image-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: #e4e6f4;
}

.collection-badge-card-image {
    max-width: 180px;
    max-height: 180px;
    object-fit: contain;
}

.collection-badge-image-expired {
    opacity: 0.5;
}

.collection-badge-card-image-placeholder {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--text-muted, #6c757d);
    opacity: 0.3;
}

.collection-badge-card-body {
    padding: 20px 24px;
}

.collection-badge-card-title {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-dark, #1a1a2e);
    margin: 0 0 4px;
    overflow-wrap: anywhere;
}

.collection-badge-card-title a {
    color: inherit;
    text-decoration: none !important;
}

.collection-badge-card-title a:hover,
.collection-badge-card-title a:focus-visible {
    color: var(--brand-primary, #2f2fbc);
}

.collection-badge-card-issuer {
    font-size: 1rem;
    color: var(--text-muted, #6c757d);
    margin: 0 0 12px;
}

.collection-badge-card-note {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary, #5f6368);
    position: relative;
}

/* Collection page responsive */
@media (max-width: 767.98px) {
    .collection-badge-card-image-col {
        padding: 16px;
    }

    .collection-badge-card-image {
        max-width: 100px;
        max-height: 100px;
    }

    .collection-badge-card-body {
        padding: 16px 20px;
    }

    .collection-badge-card-title {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .collection-badge-card .row {
        flex-direction: column;
    }

    .collection-badge-card-image-col {
        padding: 20px;
    }

    .collection-badge-card-image {
        max-width: 120px;
        max-height: 120px;
    }

    .collection-top + .award-body {
        padding-bottom: 48px;
    }
}

/* ============================================
   Learning Plan Public Page
   ============================================ */

/* Gradient spacer (matches collection-top) */
.lp-top {
    background: linear-gradient(180deg, #f7f8fa 0%, #eceefb 100%);
    padding: 96px 0 24px;
}

.lp-top + .award-body {
    background: linear-gradient(180deg, #eceefb 0%, #dde0f7 100%);
    padding-bottom: 96px;
}

/* ---- Filter bar ---- */
.lp-filter-bar {
    padding: 16px 0;
}

.lp-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.lp-filter-pills {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.lp-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 20px;
    background: #e9ecef;
    color: #495057;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

.lp-status-pill:hover {
    background: #dee2e6;
}

.lp-status-pill.active {
    background: linear-gradient(135deg, #292989 0%, #4a4acd 100%);
    color: #fff;
}

.lp-pill-count {
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
}

.lp-status-pill.active .lp-pill-count {
    background: rgba(255, 255, 255, 0.25);
}

.lp-filter-controls {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-left: auto;
}

.lp-filter-select {
    width: auto;
    min-width: 130px;
    font-size: 0.875rem;
    border-radius: 8px;
}

.lp-search-wrap {
    position: relative;
    min-width: 200px;
}

.lp-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    font-size: 0.875rem;
    pointer-events: none;
}

.lp-search-input {
    padding-left: 32px;
    padding-right: 32px;
    font-size: 0.875rem;
    border-radius: 8px;
}

.lp-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.8125rem;
    line-height: 1;
}

.lp-search-clear:hover {
    color: #495057;
}

/* ---- Status sections ---- */
.lp-status-section {
    margin-bottom: 32px;
}

.lp-status-heading {
    font-size: 1rem;
    font-weight: 700;
    color: #3a3a6a;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
}

.lp-heading-count {
    font-size: 0.8125rem;
    font-weight: 700;
    background: #e9ecef;
    color: #495057;
    border-radius: 10px;
    padding: 2px 8px;
    margin-left: 8px;
}

/* ---- Item cards ---- */
.lp-item-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lp-item-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

.lp-item-card:hover,
.lp-item-card:focus-visible {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.lp-item-card:focus-visible {
    outline: 2px solid #4a4acd;
    outline-offset: 2px;
}

.lp-item-status-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    gap: 8px;
    min-height: 100px;
}

.lp-item-status-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lp-item-status-col i {
    font-size: 2rem;
}

/* Status colour variants */
.lp-status-not_started { background-color: #e9ecef; }
.lp-status-not_started i,
.lp-status-not_started .lp-item-status-label { color: #6c757d; }

.lp-status-in_progress { background-color: #e3f2fd; }
.lp-status-in_progress i,
.lp-status-in_progress .lp-item-status-label { color: #1565c0; }

.lp-status-completed { background-color: #e8f5e9; }
.lp-status-completed i,
.lp-status-completed .lp-item-status-label { color: #2e7d32; }

.lp-item-body {
    padding: 20px 24px;
}

.lp-item-title {
    font-weight: 600;
    font-size: 1.125rem;
    margin: 0 0 8px;
    color: #1a1a2e;
}

.lp-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.lp-due-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6c757d;
    background: #f8f9fa;
    padding: 2px 8px;
    border-radius: 6px;
}

.lp-due-badge.lp-due-overdue {
    color: #dc3545;
    background: #fff5f5;
}

.lp-due-badge.lp-due-soon {
    color: #e67700;
    background: #fff8e1;
}

.lp-due-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-left: 4px;
    font-weight: 700;
}

.lp-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a4a6a;
    background: #eceefb;
    padding: 2px 8px;
    border-radius: 6px;
}

.lp-tag-more {
    color: #999;
    background: #f0f0f0;
}

.lp-item-description {
    font-size: 1rem;
    line-height: 1.6;
    color: #5f6368;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Progress bar ---- */
.lp-item-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.lp-progress-bar {
    flex: 1;
    height: 4px;
    background: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
}

.lp-progress-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.lp-progress-fill-not_started { background-color: #6c757d; }
.lp-progress-fill-in_progress { background-color: #1565c0; }
.lp-progress-fill-completed { background-color: #2e7d32; }

.lp-progress-text {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6c757d;
    white-space: nowrap;
}

/* ---- Footer / date ---- */
.lp-item-footer {
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lp-item-date {
    font-size: 0.8125rem;
    color: #adb5bd;
}

.lp-click-hint {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #adb5bd;
    opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.lp-click-hint i {
    font-size: 0.75rem;
}

.lp-item-card:hover .lp-click-hint,
.lp-item-card:focus-visible .lp-click-hint {
    opacity: 1;
    color: #4a4acd;
}

/* ---- Group cards (status containers) ---- */
.lp-group-card {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 16px;
    overflow: hidden;
}

.lp-group-header {
    padding: 16px 24px 12px;
    font-size: 1rem;
    font-weight: 700;
    color: #3a3a6a;
    display: flex;
    align-items: center;
}

.lp-group-body {
    padding: 0 16px 16px;
}

/* ---- Empty state per section ---- */
.lp-section-empty {
    text-align: center;
    padding: 24px 16px;
    color: #adb5bd;
}

.lp-section-empty i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
}

.lp-section-empty p {
    margin: 0;
    font-size: 1rem;
}

/* ---- Modal detail styles ---- */
.lp-modal-label {
    font-weight: 700;
    font-size: 1rem;
    color: #1a1a2e;
    margin-bottom: 6px;
}

.lp-modal-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #444;
}

.lp-modal-text[data-truncate] {
    max-height: 120px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.lp-modal-text[data-truncate].lp-text-expanded {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.lp-modal-text[data-truncate].lp-no-truncate {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.lp-readmore {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-primary, #2f2fbc);
    cursor: pointer;
    margin-top: 4px;
    display: inline-block;
}

.lp-readmore:hover,
.lp-readmore:focus-visible {
    text-decoration: underline;
}

.lp-modal-link {
    font-size: 1rem;
    word-break: break-all;
}

.lp-modal-dates {
    font-size: 0.875rem;
    color: #666;
}

/* ---- View more button ---- */
.lp-load-more-wrap {
    text-align: center;
    padding: 16px 0;
}

.lp-view-more {
    font-size: 0.875rem;
    font-weight: 600;
    color: #4a4acd;
    background: transparent;
    border: 1px dashed #c5c5e8;
    border-radius: 8px;
    padding: 8px 24px;
    transition: background 0.2s, border-color 0.2s;
}

.lp-view-more:hover {
    background: #f0f0f8;
    border-color: #4a4acd;
    color: #292989;
}

/* ---- Learning plan responsive ---- */
@media (max-width: 991.98px) {
    .lp-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .lp-filter-controls {
        margin-left: 0;
    }
}

@media (max-width: 767.98px) {
    .lp-item-status-col {
        padding: 16px 12px;
    }

    .lp-item-body {
        padding: 16px 20px;
    }

    .lp-item-title {
        font-size: 1rem;
    }

    .lp-top {
        padding-top: 56px;
    }

    .lp-top + .award-body {
        padding-bottom: 48px;
    }
}

@media (max-width: 575.98px) {
    .lp-item-card .row {
        flex-direction: column;
    }

    .lp-item-status-col {
        flex-direction: row;
        padding: 12px 16px;
        min-height: auto;
        gap: 8px;
    }

    .lp-item-status-col i {
        font-size: 1.25rem !important;
    }

    .lp-filter-pills {
        padding-bottom: 4px;
    }

    .lp-search-wrap {
        min-width: 100%;
    }

    .lp-filter-select {
        min-width: 0;
        flex: 1;
    }
}

/* ============================================
   Font Face — Open Sans (variable font, locally hosted)
   ============================================ */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url('../assets/fonts/open-sans-regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url('../assets/fonts/open-sans-italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================
   Marketing Layout — Header
   ============================================ */
.mkt-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 20px 0;
}

.mkt-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mkt-header-brand {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.mkt-header-actions {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Home page header — overlays hero, same size as subpage headers */
.mkt-header-home {
    padding: 24px 0;
}

.mkt-header-link {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}

.mkt-header-link:hover,
.mkt-header-link:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.mkt-header-btn {
    font-size: 0.875rem !important;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 6px;
    color: #292989;
    background-color: #fff;
    border-color: #fff;
}

.mkt-header-btn:hover,
.mkt-header-btn:focus-visible {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Light header variant — white bg, dark logo, brand buttons */
.mkt-header-light {
    position: relative;
    background: #fff;
    padding: 24px 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.mkt-header-link-dark {
    color: #4a4a6a;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}

.mkt-header-link-dark:hover,
.mkt-header-link-dark:focus-visible {
    color: #292989;
    text-decoration: underline;
}

.mkt-header-btn-brand {
    font-size: 0.875rem !important;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(135deg, #292989 0%, #4a4acd 100%);
    border: none;
    text-decoration: none;
    transition: opacity 0.15s;
}

.mkt-header-btn-brand:hover,
.mkt-header-btn-brand:focus-visible {
    color: #fff;
    opacity: 0.85;
    outline: none;
}

/* ============================================
   Marketing Layout — Mobile Navigation
   ============================================ */

/* Hamburger toggle button */
.mkt-nav-toggle {
    background: none;
    border: none;
    padding: 6px;
    font-size: 1.75rem;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s;
}

.mkt-nav-toggle:hover,
.mkt-nav-toggle:focus-visible {
    opacity: 0.75;
}

.mkt-nav-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Dark variant for light headers */
.mkt-nav-toggle-dark {
    color: #1a1a2e;
}

.mkt-nav-toggle-dark:focus-visible {
    outline-color: var(--brand-primary, #2f2fbc);
}

/* Offcanvas panel */
.mkt-offcanvas {
    max-width: 300px;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mkt-offcanvas .offcanvas-header {
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.mkt-offcanvas .offcanvas-title {
    font-size: 1rem;
    color: var(--text-dark, #1a1a2e);
}

.mkt-offcanvas .offcanvas-body {
    padding: 20px;
}

/* Nav links inside offcanvas */
.mkt-mobile-nav-link {
    display: block;
    padding: 10px 12px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-dark, #1a1a2e);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.15s, color 0.15s;
}

.mkt-mobile-nav-link:hover,
.mkt-mobile-nav-link:focus-visible {
    background-color: #f0f1f5;
    color: var(--brand-primary, #2f2fbc);
}

.mkt-mobile-nav-link:focus-visible {
    outline: 2px solid var(--brand-primary, #2f2fbc);
    outline-offset: -2px;
}

/* Full-width buttons inside offcanvas */
.mkt-mobile-btn-brand {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #292989 0%, #4a4acd 100%);
    border: none;
    text-decoration: none;
    transition: opacity 0.15s;
}

.mkt-mobile-btn-brand:hover,
.mkt-mobile-btn-brand:focus-visible {
    color: #fff;
    opacity: 0.85;
}

.mkt-mobile-btn-brand:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 188, 0.4);
}

.mkt-mobile-btn-outline {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    color: var(--brand-primary, #2f2fbc);
    background-color: #fff;
    border: 2px solid #e5e7eb;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.mkt-mobile-btn-outline:hover,
.mkt-mobile-btn-outline:focus-visible {
    border-color: var(--brand-primary, #2f2fbc);
    color: var(--brand-primary, #2f2fbc);
}

.mkt-mobile-btn-outline:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 188, 0.4);
}

/* ============================================
   Marketing Layout — Hero
   ============================================ */
.mkt-hero {
    background: linear-gradient(135deg, #292989 0%, #3a3aad 50%, #4a4acd 100%);
    padding: 140px 0 100px;  /* extra top padding for overlaid header */
    position: relative;
    overflow: hidden;
}

.mkt-hero::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -80px;
    width: 500px;
    height: 500px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 50%;
    pointer-events: none;
}

.mkt-hero::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    pointer-events: none;
}

/* Eyebrow pill above hero headline */
.mkt-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    padding: 6px 16px;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.mkt-hero-eyebrow i {
    font-size: 1rem;
}

.mkt-hero-title {
    font-weight: 700;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    max-width: 540px;
}

.mkt-hero-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 500px;
}

/* Hero inner content — inset from edges */
.mkt-hero-inner {
    padding-left: 48px;
    padding-right: 48px;
}

.mkt-hero-btn {
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 6px;
}

/* Hero image wrapper — inset from right edge */
.mkt-hero-image-col {
    padding-right: 48px;
}

/* Hero image */
.mkt-hero-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Smaller hero for subpages */
.mkt-hero-sm {
    padding: 120px 0 56px;
}

.mkt-hero-sm .mkt-hero-title {
    font-size: 2.25rem;
    margin-bottom: 12px;
}

.mkt-hero-sm .mkt-hero-subtitle {
    margin-bottom: 0;
}

/* Home hero — taller to accommodate bigger header + slanted bottom */
.mkt-hero-home {
    padding: 180px 0 160px;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), 0 100%);
}

.mkt-hero-home + main > .marketing-section:first-child {
    margin-top: -24px;
}

/* Hero button variants */
.mkt-hero .btn-light,
.marketing-cta .btn-light {
    color: #292989;
    background-color: #fff;
    border-color: #fff;
}

.mkt-hero .btn-light:hover,
.marketing-cta .btn-light:hover,
.mkt-hero .btn-light:focus-visible,
.marketing-cta .btn-light:focus-visible {
    color: #292989;
    background-color: #d8d8f0;
    border-color: #d8d8f0;
}

.mkt-hero .btn-outline-light,
.marketing-cta .btn-outline-light {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

.mkt-hero .btn-outline-light:hover,
.marketing-cta .btn-outline-light:hover,
.mkt-hero .btn-outline-light:focus-visible,
.marketing-cta .btn-outline-light:focus-visible {
    color: #292989;
    background-color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.9);
}

.public-page > main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.public-page > main > .award-body:last-child {
    flex: 1;
}

.public-page > main a:not(.btn):not(.award-tag) {
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
}

.public-page > main a:not(.btn):not(.award-tag):hover,
.public-page > main a:not(.btn):not(.award-tag):focus-visible {
    text-decoration: underline;
}

/* ============================================
   Marketing Layout — Footer
   ============================================ */
.mkt-footer {
    background-color: #1a1a2e;
    color: rgba(255, 255, 255, 0.6);
    padding: 48px 0 32px;
}

.mkt-footer a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.15s;
}

.mkt-footer a:hover,
.mkt-footer a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.mkt-footer-tagline {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
    max-width: 280px;
}

.mkt-footer-heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.mkt-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mkt-footer-list li {
    margin-bottom: 8px;
}

.mkt-footer-list a {
    font-size: 1rem;
}

.mkt-footer-rule {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 32px 0 20px;
}

.mkt-footer-copyright {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0;
}

/* ============================================
   Marketing Pages — Section Base
   ============================================ */
.marketing-section {
    padding: 96px 0;
}

.marketing-section-alt {
    background-color: #f7f8fa;
}

.marketing-section-heading {
    font-weight: 700;
    font-size: 2rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 16px;
    letter-spacing: -0.01em;
}

.marketing-section-subheading {
    font-size: 1.125rem;
    color: var(--text-secondary, #5f6368);
    max-width: 640px;
    margin: 0 auto 48px;
    line-height: 1.7;
}

/* ============================================
   Marketing Pages — How It Works
   ============================================ */
.marketing-step {
    text-align: center;
    padding: 0 16px;
}

.marketing-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
    color: var(--brand-primary, #2f2fbc);
    font-size: 1.5rem;
    margin-bottom: 20px;
}

.marketing-step h3 {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 12px;
}

.marketing-step p {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    line-height: 1.65;
}

/* Step connector arrows (desktop only) */
.marketing-step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c5cae9;
    font-size: 1.5rem;
    padding-top: 16px;
}

/* ============================================
   Marketing Pages — Feature Cards (home)
   ============================================ */
.marketing-feature-card-link,
.marketing-feature-card-link:hover,
.marketing-feature-card-link:focus,
.marketing-feature-card-link:focus-visible {
    display: block;
    height: 100%;
    text-decoration: none !important;
    color: inherit !important;
}

.marketing-feature-card-link:focus {
    outline: none;
}

.marketing-feature-card-link:focus-visible .marketing-feature-card {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.marketing-feature-card {
    background: #fff;
    border: none;
    border-radius: 10px;
    padding: 32px 28px;
    height: 100%;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.marketing-feature-card-link:hover .marketing-feature-card,
.marketing-feature-card:hover,
.marketing-feature-card:focus-visible {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.marketing-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
    color: var(--brand-primary, #2f2fbc);
    font-size: 1.25rem;
}

.marketing-feature-card .marketing-feature-icon {
    margin-bottom: 16px;
}

.marketing-feature-card h3 {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 10px;
}

.marketing-feature-card p {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    line-height: 1.65;
    margin-bottom: 0;
}

/* ============================================
   Marketing Pages — Feature Text (features page)
   ============================================ */
.mkt-feature-text h2 {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 12px;
}

.mkt-feature-text p {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    line-height: 1.7;
}

.mkt-feature-text ul {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    line-height: 1.7;
    padding-left: 20px;
    margin-bottom: 0;
}

.mkt-feature-text ul li {
    margin-bottom: 4px;
}

/* Feature screenshots (features page) */
.mkt-screenshot-frame {
    border-radius: 12px;
    border: 2px solid #d1d5db;
    background-color: #f0f1f3;
    padding: 12px;
}

.mkt-screenshot {
    width: 100%;
    border-radius: 8px;
    display: block;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.mkt-screenshot:hover {
    opacity: 0.85;
}

.mkt-screenshot:focus-visible {
    outline: 3px solid var(--brand-primary, #2f2fbc);
    outline-offset: 2px;
}

/* ============================================
   Marketing Pages — CTA Section
   ============================================ */
.marketing-cta {
    background: linear-gradient(135deg, #292989 0%, #4a4acd 100%);
    padding: 128px 0 80px;
    clip-path: polygon(0 48px, 100% 0, 100% 100%, 0 100%);
    margin-top: 6px;
}

.marketing-section-alt:has(+ .marketing-cta) {
    padding-bottom: 144px;
}

.marketing-section-alt + .marketing-cta {
    margin-top: -48px;
}

.marketing-cta h2 {
    font-weight: 700;
    font-size: 1.75rem;
    color: #fff;
    margin-bottom: 12px;
}

.marketing-cta p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 580px;
    margin: 0 auto 32px;
    line-height: 1.7;
}

.mcp-cta-url {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 1rem;
    word-break: break-all;
}

.marketing-cta .btn {
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 32px;
    border-radius: 6px;
}

/* ============================================
   Marketing Pages — Info Content (open badges page)
   ============================================ */
.marketing-info h2 {
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 14px;
    margin-top: 48px;
}

.marketing-info h2:first-child {
    margin-top: 0;
}

.marketing-section a:not([class]) {
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
    transition: text-decoration 0.15s;
}

.marketing-section a:not([class]):hover,
.marketing-section a:not([class]):focus-visible {
    text-decoration: underline;
}

.marketing-info p {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    line-height: 1.7;
}

.marketing-info ul {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    line-height: 1.7;
    padding-left: 20px;
}

.marketing-info ul li {
    margin-bottom: 6px;
}

.marketing-info h3 {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 12px;
    margin-top: 36px;
}

.marketing-info h4 {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 8px;
    margin-top: 28px;
}

.marketing-info ol {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    line-height: 1.7;
    padding-left: 20px;
}

.marketing-info ol li {
    margin-bottom: 6px;
}

.marketing-info table {
    font-size: 0.9375rem;
    color: var(--text-secondary, #5f6368);
    margin-top: 16px;
    margin-bottom: 24px;
}

.marketing-info table th {
    color: var(--text-dark, #1a1a2e);
    font-weight: 600;
    font-size: 0.875rem;
}

.marketing-info table td,
.marketing-info table th {
    padding: 10px 14px;
    border-color: #e5e7eb;
}

.marketing-info blockquote {
    border-left: 3px solid var(--brand-primary, #2f2fbc);
    padding: 12px 20px;
    margin: 20px 0;
    font-style: italic;
    color: var(--text-secondary, #5f6368);
    line-height: 1.7;
}

.marketing-info-date {
    color: #5f6368;
    margin-bottom: 12px;
}

.marketing-info-summary {
    background: #f7f8fa;
    border-radius: 12px;
    padding: 24px 32px;
    margin-bottom: 40px;
}

.marketing-info-summary h2 {
    font-size: 1.25rem;
    margin-top: 0;
}

.marketing-info-summary p:last-child,
.marketing-info-summary ul:last-child {
    margin-bottom: 0;
}

.marketing-info hr {
    border-color: #e5e7eb;
    margin: 48px 0;
}

/* Benefits grid on open badges page */
.marketing-benefit-card {
    text-align: center;
    padding: 24px 16px;
}

.marketing-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
    color: var(--brand-primary, #2f2fbc);
    font-size: 1.5rem;
    margin-bottom: 14px;
}

.marketing-benefit-card h3 {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 6px;
}

.marketing-benefit-card p {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Setup steps — numbered list with left border accent */
.mkt-setup-steps {
    list-style: none;
    counter-reset: setup-step;
    padding-left: 0;
    margin: 32px 0;
}

.mkt-setup-steps li {
    counter-increment: setup-step;
    position: relative;
    padding: 20px 20px 20px 64px;
    margin-bottom: 12px;
    border-left: 3px solid var(--brand-primary, #2f2fbc);
    background: var(--mkt-step-bg, #f8f9fa);
    border-radius: 0 8px 8px 0;
}

.mkt-setup-steps li::before {
    content: counter(setup-step);
    position: absolute;
    left: 16px;
    top: 20px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-primary, #2f2fbc);
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mkt-setup-steps li strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
    margin-bottom: 4px;
}

.mkt-setup-steps li span {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    line-height: 1.6;
}

.mkt-setup-steps code {
    background: rgba(47, 47, 188, 0.08);
    color: var(--brand-primary, #2f2fbc);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    word-break: break-all;
}

/* ============================================
   Marketing Pages — Button Consistency
   ============================================ */
.mkt-btn-primary {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 6px;
    color: #292989 !important;
    background-color: #fff;
    border: 2px solid #fff;
    text-decoration: none !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.mkt-btn-primary:hover,
.mkt-btn-primary:focus,
.mkt-btn-primary:focus-visible {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    text-decoration: none !important;
}

.mkt-btn-secondary {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 6px;
    color: #fff !important;
    background-color: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    text-decoration: none !important;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.mkt-btn-secondary:hover,
.mkt-btn-secondary:focus,
.mkt-btn-secondary:focus-visible {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.2);
    text-decoration: none !important;
    border-color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
}

/* ============================================
   Marketing Pages — FAQ Accordion
   ============================================ */
.mkt-accordion {
    max-width: 860px;
    margin: 0 auto;
    text-align: left;
}

.mkt-accordion .accordion-item {
    border: none;
    border-radius: 10px !important;
    margin-bottom: 12px;
    overflow: hidden;
    background: #f0f1f5;
    box-shadow: none;
}

.mkt-accordion .accordion-item:last-child {
    margin-bottom: 0;
}

.mkt-accordion .accordion-button {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark, #1a1a2e);
    padding: 22px 28px;
    background-color: #f0f1f5;
    border: none;
    box-shadow: none;
}

.mkt-accordion .accordion-button:not(.collapsed) {
    color: #fff;
    background: linear-gradient(135deg, #292989 0%, #4a4acd 100%);
    box-shadow: none;
    border-bottom: none;
}

.mkt-accordion .accordion-collapse {
    border-top: none !important;
}

.mkt-accordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235f6368'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    width: 1.125rem;
    height: 1.125rem;
}

.mkt-accordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Hover — collapsed: darken background; expanded: lighten gradient */
.mkt-accordion .accordion-button.collapsed:hover,
.mkt-accordion .accordion-button.collapsed:focus-visible {
    background-color: #e4e5ec;
    color: var(--brand-primary, #2f2fbc);
}

.mkt-accordion .accordion-button:not(.collapsed):hover,
.mkt-accordion .accordion-button:not(.collapsed):focus-visible {
    background: linear-gradient(135deg, #33339e 0%, #5555d6 100%);
}

/* Focus-visible — keyboard navigation ring */
.mkt-accordion .accordion-button:focus-visible {
    outline: 3px solid rgba(47, 47, 188, 0.5);
    outline-offset: -3px;
    box-shadow: none;
}

/* Plain focus (mouse click) — subtle */
.mkt-accordion .accordion-button:focus {
    box-shadow: none;
}

.mkt-accordion .accordion-body {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    line-height: 1.75;
    padding: 20px 32px 28px;
}

.mkt-accordion .accordion-body blockquote {
    border-left: 3px solid var(--brand-primary, #2f2fbc);
    padding: 10px 18px;
    margin: 0 0 14px;
    color: var(--text-dark, #1a1a2e);
}

.mkt-accordion .accordion-body p:last-child {
    margin-bottom: 0;
}

/* ============================================
   Marketing Pages — Responsive
   ============================================ */
@media (max-width: 991.98px) {
    .mkt-hero {
        padding: 120px 0 64px;
    }

    .mkt-hero-home {
        padding: 150px 0 110px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%);
    }

    .mkt-hero-inner {
        padding-left: 24px;
        padding-right: 24px;
    }

    .mkt-hero-title {
        font-size: 2.25rem;
    }

    .marketing-step-connector {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .mkt-header-home {
        padding: 20px 0;
    }

    .mkt-header-home img {
        height: 36px;
    }

    .mkt-header-light {
        padding: 20px 0;
    }

    .mkt-header-light img {
        height: 36px;
    }

    .mkt-hero {
        padding: 100px 0 48px;
        text-align: center;
    }

    .mkt-hero-home {
        padding: 110px 0 80px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), 0 100%);
    }

    .mkt-hero-inner {
        padding-left: 0;
        padding-right: 0;
    }

    .mkt-hero-image-col {
        padding-right: 0;
        margin-bottom: 48px;
    }

    .mkt-hero-image-col .mkt-hero-image {
        max-width: 320px;
        margin: 0 auto;
    }

    .mkt-hero-title {
        font-size: 1.75rem;
        max-width: none;
        margin-bottom: 24px;
    }

    .mkt-hero-eyebrow {
        margin-bottom: 24px;
    }

    .mkt-hero-subtitle {
        max-width: none;
        margin-bottom: 36px;
    }

    .mkt-hero-subtitle {
        font-size: 1rem;
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .mkt-hero .d-flex {
        justify-content: center;
    }

    .mkt-hero-sm {
        padding: 100px 0 40px;
    }

    .mkt-hero-sm .mkt-hero-title {
        font-size: 1.625rem;
    }

    .marketing-section {
        padding: 56px 0;
    }

    .marketing-section-heading {
        font-size: 1.5rem;
    }

    .mkt-screenshot-frame {
        margin-top: 24px;
    }

    .marketing-cta {
        padding: 84px 0 56px;
        clip-path: polygon(0 28px, 100% 0, 100% 100%, 0 100%);
    }

    .marketing-cta h2 {
        font-size: 1.5rem;
    }

    .mkt-footer {
        text-align: left;
        padding: 40px 0 28px;
    }

    .mkt-footer-tagline {
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .public-page .container {
        padding-left: 24px;
        padding-right: 24px;
    }

    .mkt-hero-title {
        font-size: 1.5rem;
    }

    .marketing-step {
        margin-bottom: 24px;
    }

    .mkt-hero-btn,
    .mkt-btn-primary,
    .mkt-btn-secondary {
        font-size: 1rem;
        padding: 10px 22px;
    }

    .mkt-accordion .accordion-button {
        font-size: 1rem;
        padding: 16px 20px;
    }

    .mkt-accordion .accordion-body {
        padding: 16px 20px 20px;
    }
}

/* ============================================
   Keyboard Focus — Global focus-visible outlines
   ============================================ */

/* Header brand logo links */
.mkt-header-brand:focus-visible,
.public-header-brand:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 4px;
    border-radius: 4px;
}

.mkt-header-light .mkt-header-brand:focus-visible {
    outline-color: var(--brand-primary, #2f2fbc);
}

/* Focus outlines for links/buttons on dark/gradient backgrounds */
.mkt-header-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
    border-radius: 4px;
}

.mkt-header-link-dark:focus-visible {
    outline: 2px solid var(--brand-primary, #2f2fbc);
    outline-offset: 2px;
    border-radius: 4px;
}

.mkt-header-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.mkt-btn-primary:focus-visible,
.mkt-btn-secondary:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

.mkt-hero .btn-light:focus-visible,
.marketing-cta .btn-light:focus-visible,
.mkt-hero .btn-outline-light:focus-visible,
.marketing-cta .btn-outline-light:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
}

/* Footer links — visible focus ring on dark background */
.mkt-footer a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Contact type buttons — focus ring */
.contact-type-btn:focus-visible {
    outline: 2px solid var(--brand-primary, #2f2fbc);
    outline-offset: 2px;
}

/* Portfolio section toggle — keyboard focus */
.portfolio-section-toggle:focus-visible {
    color: var(--brand-primary, #2f2fbc);
    outline: 2px solid var(--brand-primary, #2f2fbc);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Portfolio hero links — keyboard focus */
.portfolio-hero-link:focus-visible {
    outline: 2px solid var(--brand-primary, #2f2fbc);
    outline-offset: 3px;
}

/* Contact page — info link */
.contact-info-link {
    color: #292989;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
}
.contact-info-link:hover,
.contact-info-link:focus-visible {
    text-decoration: underline;
}

/* Contact page — type selector buttons */
.contact-type-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #555;
}

.contact-type-btn i {
    font-size: 1.5rem;
}

.contact-type-btn:hover,
.contact-type-btn:focus-visible {
    border-color: #2F2FBC;
    color: #2F2FBC;
}

.contact-type-btn.active {
    border-color: #2F2FBC;
    background: rgba(47, 47, 188, 0.05);
    color: #2F2FBC;
}

.contact-type-btn.active i {
    color: #2F2FBC;
}

/* Contact page — form fields (match auth form styling) */
.contact-form .form-control {
    border: 2px solid #e5e7eb;
    color: #1a1a2e;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.contact-form .form-control:focus {
    border-color: #2F2FBC;
    background-color: #f7f8fa;
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 188, 0.25);
    outline: 0;
}

.contact-form .form-control.is-invalid {
    border-color: #dc3545;
}

.contact-form .form-control.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Contact page — required field indicator */
.contact-form .required::after {
    content: " *";
    color: #dc3545;
    font-weight: 600;
}

/* Contact page — submit button */
.contact-submit-btn {
    display: inline-block;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #292989 0%, #4a4acd 100%);
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    text-align: center;
}

.contact-submit-btn:hover,
.contact-submit-btn:focus-visible {
    color: #fff;
    opacity: 0.85;
}

.contact-submit-btn:focus-visible {
    color: #fff;
    opacity: 0.85;
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 188, 0.4);
}

/* Contact page — user details box (logged-in users) */
.contact-user-details {
    background: #f8f9fa;
    border-radius: 0.375rem;
}

/* Contact page — info separator & phone */
.contact-info-separator {
    margin: 0 0.5rem;
    color: var(--text-dark, #1a1a2e);
    font-size: 1.125rem;
}

.contact-info-phone {
    font-weight: 600;
    font-size: 1.125rem;
    color: var(--text-dark, #1a1a2e);
}

/* Contact page — email-only fallback */
.contact-info-icon {
    font-size: 3rem;
    color: #292989;
}

.contact-email-only-text {
    font-size: 1.125rem;
    max-width: 480px;
    margin: 0 auto 1.5rem;
}

/* ============================================
   Forms — Checkboxes (public/marketing pages)
   Brand-coloured checkboxes matching authenticated pages.
   ============================================ */
.public-page .form-check-input:not(.form-switch .form-check-input) {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    flex-shrink: 0;
}

.public-page .form-check-input:not(.form-switch .form-check-input):focus {
    border-color: var(--brand-primary, #2f2fbc);
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 188, 0.25);
    outline: 0;
}

.public-page .form-check-input:not(.form-switch .form-check-input):checked {
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") center / 100% 100% no-repeat,
               linear-gradient(135deg, #292989 0%, #4a4acd 100%) !important;
    border-color: #292989 !important;
}

.public-page .form-check-input:not(.form-switch .form-check-input):checked:focus {
    border-color: var(--brand-primary, #2f2fbc);
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 188, 0.5);
}

.public-page .form-check-label {
    cursor: pointer;
    user-select: none;
    padding-left: 0.375rem;
    line-height: 1.25rem;
    margin-top: 0.25rem;
}

/* ============================================
   Endorsement Pages
   Public endorsement form, confirmation, closed,
   and verification result pages.
   ============================================ */
.endorse-body {
    background-color: #f7f8fa;
    padding: 48px 0 64px;
    flex: 1;
}

.endorse-container {
    max-width: 700px;
    margin: 0 auto;
}

.endorse-container-sm {
    max-width: 500px;
    margin: 0 auto;
}

.endorse-card {
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.endorse-card .card-body {
    padding: 24px;
}

.endorse-status-card .card-body {
    padding: 48px 24px;
}

.endorse-form-title {
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 20px;
}

.endorse-form .form-label {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

.endorse-form .form-control,
.endorse-form .form-select {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.endorse-form .form-control:focus,
.endorse-form .form-select:focus {
    border-color: #2F2FBC;
    background-color: #f7f8fa;
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 188, 0.25);
    outline: 0;
}

.endorse-form .form-text {
    font-size: 0.875rem;
    margin-top: 6px;
}

.endorse-submit-btn {
    display: block;
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 28px;
    border: none;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #292989 0%, #4a4acd 100%);
    cursor: pointer;
    transition: opacity 0.15s ease, box-shadow 0.15s ease;
    text-decoration: none;
    text-align: center;
}

.endorse-submit-btn:hover,
.endorse-submit-btn:focus-visible {
    color: #fff;
    opacity: 0.85;
}

.endorse-submit-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(47, 47, 188, 0.4);
}

.endorse-badge-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.endorse-badge-image {
    width: 96px;
    height: 96px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}

.endorse-badge-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 4px;
}

.endorse-badge-meta {
    font-size: 1rem;
    color: var(--text-secondary, #5f6368);
    margin-bottom: 4px;
}

.endorse-badge-link {
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    color: var(--brand-primary, #2F2FBC);
    text-decoration: none;
}

.endorse-badge-link:hover,
.endorse-badge-link:focus-visible {
    color: var(--brand-primary-dark, #292989);
    text-decoration: underline;
}

.endorse-consent-text {
    font-size: 0.875rem;
    color: var(--text-secondary, #5f6368);
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
}

.endorse-status-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.endorse-status-icon.success {
    color: var(--bs-success, #198754);
}

.endorse-status-icon.brand {
    color: var(--brand-primary, #2F2FBC);
}

.endorse-status-icon.muted {
    color: var(--text-muted, #6b7280);
    opacity: 0.5;
}

.endorse-status-icon.danger {
    color: var(--bs-danger, #dc3545);
}

/* --- Learning log entry card links --- */
.ll-entry-card a {
    color: #4a4a6a;
    text-decoration: none;
}

.ll-entry-card a:hover,
.ll-entry-card a:focus-visible {
    color: #292989;
    text-decoration: underline;
}

/* --- Logo switching for dark mode --- */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark { display: inline; }

/* --- Screenshot switching for dark mode --- */
.mkt-screenshot-dark { display: none; }
[data-theme="dark"] .mkt-screenshot-light { display: none; }
[data-theme="dark"] .mkt-screenshot-dark { display: block; }

/* --- Modal close button (marketing pages) --- */
.app-modal-close {
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    border: 1.5px solid #adb5bd;
    border-radius: 50%;
    background: #fff;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.app-modal-close::before,
.app-modal-close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.5px;
    background: #6c757d;
    border-radius: 1px;
    transition: background 0.15s ease-in-out;
}
.app-modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.app-modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.app-modal-close:hover,
.app-modal-close:focus {
    background: var(--brand-primary, #2f2fbc);
    border-color: var(--brand-primary, #2f2fbc);
    outline: none;
}
.app-modal-close:hover::before,
.app-modal-close:hover::after,
.app-modal-close:focus::before,
.app-modal-close:focus::after {
    background: #fff;
}

/* ============================================
   Dark Mode — Marketing Pages
   Activated via data-theme="dark" attribute on <html>.
   Scoped to .public-page so dashboard is unaffected.
   ============================================ */
[data-theme="dark"] {

    /* --- Page background & base text --- */
    .public-page {
        background-color: #121218;
        color: #d8d8e2;
    }

    /* --- Light header variant (subpages) --- */
    .mkt-header-light {
        background: #1a1a26;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    .mkt-header-link-dark {
        color: #b0b0c8;
    }

    .mkt-header-link-dark:hover,
    .mkt-header-link-dark:focus-visible {
        color: #fff;
    }

    .mkt-header-btn-brand {
        background: linear-gradient(135deg, #3a3aad 0%, #5a5ae0 100%);
    }

    /* Hamburger icon — dark variant becomes light in dark mode */
    .mkt-nav-toggle-dark {
        color: #d8d8e2;
    }

    .mkt-nav-toggle-dark:focus-visible {
        outline-color: #5a5ae0;
    }

    /* Logo swap — hide dark logo, show white (handled via <picture>) */
    .mkt-header-light .mkt-header-brand:focus-visible {
        outline-color: #5a5ae0;
    }

    /* --- Mobile offcanvas nav --- */
    .mkt-offcanvas {
        background-color: #1a1a26;
        color: #d8d8e2;
    }

    .mkt-offcanvas .offcanvas-header {
        border-bottom-color: #2a2a3a;
    }

    .mkt-offcanvas .offcanvas-title {
        color: #d8d8e2;
    }

    .mkt-offcanvas .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }

    .mkt-mobile-nav-link {
        color: #c0c0d0;
    }

    .mkt-mobile-nav-link:hover,
    .mkt-mobile-nav-link:focus-visible {
        background-color: #252535;
        color: #8080e0;
    }

    .mkt-mobile-btn-outline {
        color: #a0a0d0;
        background-color: transparent;
        border-color: #3a3a4a;
    }

    .mkt-mobile-btn-outline:hover,
    .mkt-mobile-btn-outline:focus-visible {
        border-color: #5a5ae0;
        color: #8080e0;
    }

    /* --- Marketing sections --- */
    .marketing-section {
        background-color: #121218;
    }

    .marketing-section-alt {
        background-color: #16161f;
    }

    .marketing-section-heading {
        color: #e8e8ed;
    }

    .marketing-section-subheading {
        color: #a0a0b0;
    }

    .marketing-section a:not([class]) {
        color: #7a7ae8;
    }

    /* --- How It Works steps --- */
    .marketing-step h3 {
        color: #e8e8ed;
    }

    .marketing-step p {
        color: #a0a0b0;
    }

    .marketing-step-number {
        background: linear-gradient(135deg, #252540 0%, #303058 100%);
        color: #8080e0;
    }

    .marketing-step-connector {
        color: #3a3a58;
    }

    /* --- Feature cards --- */
    .marketing-feature-card {
        background: #1e1e2a;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }

    .marketing-feature-card-link:hover .marketing-feature-card,
    .marketing-feature-card:hover,
    .marketing-feature-card:focus-visible {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    }

    .marketing-feature-card h3 {
        color: #e8e8ed;
    }

    .marketing-feature-card p {
        color: #a0a0b0;
    }

    .marketing-feature-icon {
        background: linear-gradient(135deg, #252540 0%, #303058 100%);
        color: #8080e0;
    }

    /* --- Feature text (features page) --- */
    .mkt-feature-text h2 {
        color: #e8e8ed;
    }

    .mkt-feature-text p {
        color: #a0a0b0;
    }

    .mkt-feature-text ul {
        color: #a0a0b0;
    }

    /* Feature screenshots */
    .mkt-screenshot-frame {
        background-color: #1e1e2a;
        border-color: #2a2a3a;
    }

    .app-modal-close {
        background: #1e1e2a;
        border-color: #3a3a5a;
    }
    .app-modal-close::before,
    .app-modal-close::after {
        background: #a0a0b0;
    }
    .app-modal-close:hover,
    .app-modal-close:focus {
        background: #5a5ae0;
        border-color: #5a5ae0;
    }
    .app-modal-close:hover::before,
    .app-modal-close:hover::after,
    .app-modal-close:focus::before,
    .app-modal-close:focus::after {
        background: #fff;
    }

    /* --- Info content (open badges page) --- */
    .marketing-info h2 {
        color: #e8e8ed;
    }

    .marketing-info p {
        color: #a0a0b0;
    }

    .marketing-info ul {
        color: #a0a0b0;
    }

    .marketing-info h3,
    .marketing-info h4 {
        color: #e8e8ed;
    }

    .marketing-info ol {
        color: #a0a0b0;
    }

    .marketing-info table {
        color: #a0a0b0;
        --bs-table-bg: transparent;
        --bs-table-color: #a0a0b0;
    }

    .marketing-info table th {
        color: #e8e8ed;
    }

    .marketing-info table td,
    .marketing-info table th {
        border-color: rgba(255, 255, 255, 0.1);
        background-color: transparent;
    }

    .marketing-info blockquote {
        color: #a0a0b0;
        border-left-color: #5a5ae0;
    }

    .marketing-info-date {
        color: #9090a0;
    }

    .marketing-info-summary {
        background: #1c1c28;
    }

    .marketing-info hr {
        border-color: rgba(255, 255, 255, 0.1);
    }

    /* Benefits grid */
    .marketing-benefit-card h3 {
        color: #e8e8ed;
    }

    .marketing-benefit-card p {
        color: #a0a0b0;
    }

    .marketing-benefit-icon {
        background: linear-gradient(135deg, #252540 0%, #303058 100%);
        color: #8080e0;
    }

    /* --- Setup steps (MCP page) --- */
    .mkt-setup-steps li {
        background: #1c1c28;
        border-left-color: #5a5ae0;
    }

    .mkt-setup-steps li::before {
        background: #5a5ae0;
    }

    .mkt-setup-steps li strong {
        color: #e8e8ed;
    }

    .mkt-setup-steps li span {
        color: #a0a0b0;
    }

    .mkt-setup-steps code {
        background: rgba(90, 90, 224, 0.15);
        color: #8080e0;
    }

    /* --- FAQ accordion --- */
    .mkt-accordion .accordion-item {
        background: #1e1e2a;
    }

    .mkt-accordion .accordion-button {
        background-color: #1e1e2a;
        color: #d8d8e2;
    }

    .mkt-accordion .accordion-button.collapsed:hover,
    .mkt-accordion .accordion-button.collapsed:focus-visible {
        background-color: #252535;
        color: #8080e0;
    }

    .mkt-accordion .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23a0a0b0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    }

    .mkt-accordion .accordion-body {
        color: #a0a0b0;
    }

    .mkt-accordion .accordion-body blockquote {
        border-left-color: #5a5ae0;
        color: #d8d8e2;
    }

    /* --- Contact page --- */
    .contact-info-link {
        color: #7a7ae8;
    }

    .contact-type-btn {
        background: #1e1e2a;
        border-color: #2a2a3a;
        color: #a0a0b0;
    }

    .contact-type-btn:hover,
    .contact-type-btn:focus-visible {
        border-color: #5a5ae0;
        color: #8080e0;
    }

    .contact-type-btn.active {
        border-color: #5a5ae0;
        background: rgba(90, 90, 224, 0.1);
        color: #8080e0;
    }

    .contact-type-btn.active i {
        color: #8080e0;
    }

    .contact-form .form-control {
        background-color: #1e1e2a;
        border-color: #2a2a3a;
        color: #d8d8e2;
    }

    .contact-form .form-control:focus {
        background-color: #222230;
        border-color: #5a5ae0;
        box-shadow: 0 0 0 0.25rem rgba(90, 90, 224, 0.25);
    }

    .contact-form .form-control::placeholder {
        color: #606078;
    }

    .contact-form .form-label {
        color: #c0c0d0;
    }

    .contact-form .form-text {
        color: #9090a0;
    }

    .contact-submit-btn {
        background: linear-gradient(135deg, #3a3aad 0%, #5a5ae0 100%);
    }

    .contact-user-details {
        background: #0e0e18 !important;
    }

    .contact-user-details p {
        color: #c0c0d0;
    }

    .contact-user-details .text-muted {
        color: #9090a0 !important;
    }

    .contact-info-separator {
        color: #d8d8e2;
    }

    .contact-info-phone {
        color: #d8d8e2;
    }

    .contact-info-icon {
        color: #7a7ae8;
    }

    .contact-email-only-text {
        color: #a0a0b0;
    }

    /* Bootstrap alert overrides for dark mode */
    .public-page .alert-success {
        background-color: rgba(25, 135, 84, 0.15);
        border-color: rgba(25, 135, 84, 0.3);
        color: #6ddd9a;
    }

    .public-page .alert-danger {
        background-color: rgba(220, 53, 69, 0.15);
        border-color: rgba(220, 53, 69, 0.3);
        color: #f0868f;
    }

    /* Bootstrap .text-muted override for marketing & public pages */
    .public-page .text-muted {
        color: #a0a0b0 !important;
    }

    /* Bootstrap .fw-semibold labels in forms */
    .public-page .form-label {
        color: #c0c0d0;
    }

    /* --- Hero / CTA — these are already dark, just tweak slightly --- */
    .mkt-hero {
        background: linear-gradient(135deg, #1e1e60 0%, #2a2a8a 50%, #3a3aad 100%);
    }

    .mkt-hero .btn-light,
    .marketing-cta .btn-light {
        color: #1e1e60;
    }

    .mkt-hero .btn-light:hover,
    .marketing-cta .btn-light:hover,
    .mkt-hero .btn-light:focus-visible,
    .marketing-cta .btn-light:focus-visible {
        color: #1e1e60;
        background-color: #c8c8e0;
        border-color: #c8c8e0;
    }

    .marketing-cta {
        background: linear-gradient(135deg, #1e1e60 0%, #3a3aad 100%);
    }

    /* --- Footer — already dark, minor adjustments --- */
    .mkt-footer {
        background-color: #0e0e18;
    }

    .mkt-footer-rule {
        border-color: rgba(255, 255, 255, 0.06);
    }

    /* --- Offcanvas divider --- */
    .mkt-offcanvas hr {
        border-color: #2a2a3a !important;
    }

    /* --- Focus outlines for dark mode --- */
    .mkt-header-light .mkt-header-brand:focus-visible {
        outline-color: #5a5ae0;
    }

    .mkt-header-link-dark:focus-visible {
        outline-color: #5a5ae0;
    }

    .contact-type-btn:focus-visible {
        outline-color: #5a5ae0;
    }

    .mkt-accordion .accordion-button:focus-visible {
        outline-color: rgba(90, 90, 224, 0.5);
    }

    /* --- Endorse pages --- */
    .endorse-body {
        background-color: #16161f;
    }

    .endorse-card {
        background: #1a1a26;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .endorse-form .form-control,
    .endorse-form .form-select {
        background-color: #121218;
        border-color: #2a2a3a;
        color: #d8d8e2;
    }

    .endorse-form .form-control:focus,
    .endorse-form .form-select:focus {
        background-color: #16161f;
        border-color: #5a5ae0;
        box-shadow: 0 0 0 0.25rem rgba(90, 90, 224, 0.25);
    }

    .endorse-form .form-control::placeholder {
        color: #505060;
    }

    .endorse-submit-btn {
        background: linear-gradient(135deg, #3a3aad 0%, #5a5ae0 100%);
    }

    .endorse-badge-title {
        color: #e0e0e8;
    }

    .endorse-badge-meta {
        color: #a0a0b0;
    }

    .endorse-badge-link {
        color: #7b9ff0;
    }

    .endorse-badge-link:hover,
    .endorse-badge-link:focus-visible {
        color: #a0bff5;
    }

    .endorse-status-card h5 {
        color: #e0e0e8;
    }

    .endorse-status-card .text-muted {
        color: #a0a0b0 !important;
    }

    .endorse-status-card .text-muted strong {
        color: #d0d0da;
    }

    .endorse-form-title {
        color: #e0e0e8;
    }

    .endorse-form .form-label {
        color: #c8c8d4;
    }

    .endorse-form .form-text {
        color: #9090a0;
    }

    .endorse-consent-text {
        color: #9090a0;
    }

    .public-page .form-check-input:not(.form-switch .form-check-input) {
        background-color: #121218;
        border-color: #2a2a3a;
    }

    .public-page .form-check-input:not(.form-switch .form-check-input):focus {
        border-color: #5a5ae0;
        box-shadow: 0 0 0 0.25rem rgba(90, 90, 224, 0.25);
    }

    .public-page .form-check-label {
        color: #c8c8d8;
    }

    .public-page .alert-warning {
        background-color: rgba(255, 193, 7, 0.12);
        border-color: rgba(255, 193, 7, 0.25);
        color: #f0c050;
    }

    .public-page .alert-info {
        background-color: rgba(13, 202, 240, 0.12);
        border-color: rgba(13, 202, 240, 0.25);
        color: #6dd8ee;
    }

    /* --- Portfolio page --- */
    .portfolio-owner-strip {
        background-color: #1a1a26;
        border-bottom-color: #2a2a3a;
    }

    .portfolio-owner-field-label {
        color: #9090c0;
    }

    .portfolio-owner-field-hint {
        color: #8888b0;
    }

    .portfolio-owner-strip .award-owner-bar-label {
        color: #fff;
        background-color: rgba(140, 140, 255, 0.15);
    }

    .portfolio-owner-strip .award-copy-link {
        color: #c8c8ff;
    }

    .portfolio-owner-visibility-group {
        border-top-color: #2a2a3a;
    }

    .portfolio-owner-strip .form-control {
        background-color: #121218;
        border-color: #2a2a3a;
        color: #d8d8e2;
    }

    .portfolio-btn-brand {
        background: linear-gradient(135deg, #3a3aad 0%, #5a5ae0 100%);
    }

    .portfolio-btn-brand:hover,
    .portfolio-btn-brand:focus-visible {
        background: linear-gradient(135deg, #3030a0 0%, #5050d0 100%);
    }

    .portfolio-btn-brand-outline {
        color: #8080e0;
        border-color: #8080e0;
    }

    .portfolio-btn-brand-outline:hover,
    .portfolio-btn-brand-outline:focus-visible {
        color: #fff;
        background: linear-gradient(135deg, #3a3aad 0%, #5a5ae0 100%);
        border-color: transparent;
    }

    .portfolio-btn-secondary {
        color: #c8c8ff;
        background-color: rgba(140, 140, 255, 0.1);
        border-color: rgba(140, 140, 255, 0.1);
    }

    .portfolio-btn-secondary:hover,
    .portfolio-btn-secondary:focus-visible {
        color: #d8d8ff;
        background-color: rgba(140, 140, 255, 0.18);
        border-color: rgba(140, 140, 255, 0.18);
    }

    .portfolio-hero-wrap {
        background-color: #121218;
    }

    .portfolio-hero-title {
        color: #e8e8ed;
    }

    .portfolio-hero-link {
        background-color: #252540;
        color: #8888cc;
    }

    .portfolio-hero-link:hover,
    .portfolio-hero-link:focus-visible {
        background-color: #5a5ae0;
        color: #fff !important;
    }

    .portfolio-tab-bar {
        border-bottom-color: #2a2a3a !important;
    }

    .portfolio-tab-bar .nav-link {
        color: #a0a0b4;
    }

    .portfolio-tab-bar .nav-link:hover {
        color: #d8d8e2;
    }

    .portfolio-tab-bar .nav-link.active {
        color: #e8e8ed !important;
        border-bottom-color: #e8e8ed !important;
    }

    .portfolio-content-bg {
        background: linear-gradient(180deg, #121218 0%, #14142a 50%, #18183a 100%);
    }

    .portfolio-badge-card {
        background: #1e1e2a;
        box-shadow: none;
    }

    .portfolio-badge-card:hover,
    .portfolio-badge-card:focus,
    .portfolio-badge-card:focus-visible {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    }

    .portfolio-badge-image-container {
        background-color: #16161f;
    }

    .portfolio-badge-title {
        color: #e8e8ed;
    }

    .portfolio-badge-issuer {
        color: #a0a0b4;
    }

    .portfolio-badge-date {
        color: #b0b0c0;
    }

    .portfolio-collection-card {
        background: #1e1e2a;
        box-shadow: none;
    }

    .portfolio-collection-card:hover,
    .portfolio-collection-card:focus,
    .portfolio-collection-card:focus-visible {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    }

    .portfolio-collection-thumbs {
        background-color: #16161f;
    }

    .portfolio-collection-thumb {
        background-color: #1e1e2a;
        border-color: #2a2a3a;
    }

    .portfolio-collection-thumb-more {
        background-color: rgba(255, 255, 255, 0.05);
        border-color: #2a2a3a;
        color: #a0a0b4;
    }

    .portfolio-collection-title {
        color: #e8e8ed;
    }

    .portfolio-collection-desc {
        color: #a0a0b0;
    }

    .portfolio-collection-meta {
        color: #a0a0b4;
    }

    .form-control.portfolio-search-input {
        background-color: #1e1e2a;
        border-color: #2a2a3a;
        color: #e0e0ea;
    }

    .form-control.portfolio-search-input:focus {
        background-color: #222230;
        border-color: #5a5ae0;
        color: #e0e0ea;
        box-shadow: 0 0 0 3px rgba(90, 90, 224, 0.15);
    }

    .portfolio-search-input::placeholder {
        color: #787890;
    }

    .portfolio-search-icon {
        color: #606078;
    }

    .portfolio-search-clear {
        color: #808090;
    }

    .portfolio-search-clear:hover,
    .portfolio-search-clear:focus-visible {
        color: #d8d8e2;
        background-color: #252535;
    }

    .portfolio-section-toggle {
        color: #808090;
    }

    .portfolio-section-toggle::before {
        background: #5a5ae0;
    }

    .portfolio-section-toggle:hover,
    .portfolio-section-toggle:focus-visible {
        color: #d8d8e2;
    }

    .portfolio-section-count {
        color: #808090;
    }

    .portfolio-load-more-btn {
        background: linear-gradient(135deg, #3a3aad 0%, #5a5ae0 100%);
    }

    .portfolio-readmore {
        color: #7a7ae8;
    }

    .portfolio-readmore:hover,
    .portfolio-readmore:focus-visible {
        color: #9090f0;
    }

    .portfolio-empty i {
        color: #707080;
    }

    .portfolio-empty p {
        color: #a0a0b0;
    }

    .portfolio-search-status {
        color: #a0a0b0;
    }

    /* Hidden banner in dark mode (portfolio, collection, award) */
    .portfolio-owner-strip + .container .award-hidden-banner {
        background-color: rgba(255, 193, 7, 0.12);
        color: #f0c050;
    }

    /* --- Award page --- */
    .public-page > main a:not(.btn):not(.award-tag) {
        color: #8888cc;
    }

    .public-page > main a:not(.btn):not(.award-tag):hover,
    .public-page > main a:not(.btn):not(.award-tag):focus-visible {
        color: #9a9adf;
    }

    .award-hero {
        background: linear-gradient(135deg, #1e1e60 0%, #2a2a8a 50%, #3a3aad 100%);
    }

    .award-hero + .award-body {
        background: linear-gradient(180deg, #121218 0%, #14142a 50%, #18183a 100%);
    }

    .award-expired-banner {
        background-color: rgba(255, 193, 7, 0.12);
        color: #f0c050;
    }

    .award-title {
        color: #e8e8ed;
    }

    .award-issued-by {
        color: #a0a0b0;
    }

    .award-issued-by a {
        color: #8888cc;
    }

    .award-description {
        color: #a0a0b0;
    }

    .award-meta-label {
        color: #a0a0b0;
    }

    .award-meta-value {
        color: #d8d8e2;
    }

    .award-section-heading {
        color: #e8e8ed;
    }

    .award-section-rule {
        border-top-color: #2a2a3a;
    }

    .custom-metadata-card {
        background-color: #1e1e2a;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .custom-metadata-table .custom-metadata-group-heading {
        color: #a0a0b0;
        border-bottom-color: #2a2a3a;
    }

    .custom-metadata-table .custom-metadata-label {
        color: #a0a0b0;
        border-bottom-color: #2a2a3a;
    }

    .custom-metadata-table .custom-metadata-value {
        color: #d8d8e2;
        border-bottom-color: #2a2a3a;
    }

    .award-media-icon {
        background: linear-gradient(135deg, #252540 0%, #303058 100%);
        color: #8080e0;
    }

    .award-media-icon-check {
        background: linear-gradient(135deg, #1a3028 0%, #244034 100%);
        color: #4aba78;
    }

    .award-media-body h5 {
        color: #d8d8e2;
    }

    .award-media-body h5 a {
        color: #8888cc;
    }

    .award-media-body p {
        color: #a0a0b0;
    }

    .award-media-detail {
        color: #b0b0c0;
    }

    .award-notes-heading {
        color: #b0b0c0;
    }

    .award-note-card {
        background-color: #1e1e2a;
        border-color: #2a2a3a;
    }

    .award-note-avatar-placeholder {
        background-color: #252535;
        color: #a0a0b0;
    }

    .award-note-author {
        color: #d8d8e2;
    }

    .award-note-date {
        color: #b0b0c0;
    }

    .award-note-card-body {
        color: #a0a0b0;
    }

    .award-note-card-body a {
        color: #8888cc;
    }

    .award-note-attachment {
        background: #252535;
        color: #7a7ae8;
    }

    .award-note-attachment:hover,
    .award-note-attachment:focus-visible {
        background: #2a2a40;
        color: #9090f0;
    }

    .award-note-attachment .attachment-size {
        color: #a0a0b0;
    }

    .award-note-readmore {
        color: #7a7ae8;
    }

    .award-note-readmore:hover,
    .award-note-readmore:focus-visible {
        color: #9090f0;
    }

    .award-endorsement-card {
        background-color: #1e1e2a;
        border-color: #2a2a3a;
    }

    .award-endorsement-author {
        color: #d8d8e2;
    }

    .award-endorsement-date {
        color: #b0b0c0;
    }

    .award-endorsement-card-body {
        color: #a0a0b0;
    }

    .award-endorsement-relationship {
        color: #c0c0d0;
    }

    .award-tag {
        background-color: #1e1e2a;
        border-color: #3a3a5a;
        color: #8080e0;
    }

    .award-tag:hover,
    .award-tag:focus-visible {
        background-color: rgba(90, 90, 224, 0.12);
        border-color: #5a5ae0;
    }

    .award-issuer-card {
        background-color: #1e1e2a;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        color: #b0b0c0;
    }

    .award-issuer-card h2 {
        color: #e8e8ed;
    }

    .award-issuer-card a {
        color: #8888cc;
    }

    .award-issuer-card .badge.rounded-pill {
        background-color: rgba(122, 122, 232, 0.15) !important;
        color: #a0a0f0 !important;
    }

    .award-issuer-card .text-muted {
        color: #a0a0b0 !important;
    }

    .award-issuer-card .btn-outline-primary {
        color: #9a9af4;
        border-color: #9a9af4;
    }

    .award-issuer-card .btn-outline-primary:hover,
    .award-issuer-card .btn-outline-primary:focus-visible {
        background-color: rgba(154, 154, 244, 0.12);
        color: #b0b0ff;
        border-color: #b0b0ff;
    }

    .award-issuer-card .text-danger {
        color: #f65a5a !important;
    }

    .award-issuer-card .border-top {
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .cache-modal-trigger {
        color: #4aba78;
    }

    .cache-modal-trigger:hover,
    .cache-modal-trigger:focus-visible {
        color: #6ad098;
    }

    .award-hidden-banner {
        background-color: #302a1a;
        border-color: #4a3f20;
        color: #f0c050;
    }

    .award-modal-close {
        background: #1e1e2a;
        border-color: #3a3a5a;
    }

    .award-modal-close::before,
    .award-modal-close::after {
        background: #a0a0b0;
    }

    .award-modal-close:hover,
    .award-modal-close:focus {
        background: #5a5ae0;
        border-color: #5a5ae0;
    }

    .award-modal-close:hover::before,
    .award-modal-close:hover::after,
    .award-modal-close:focus::before,
    .award-modal-close:focus::after {
        background: #fff;
    }

    .award-verify-section {
        background-color: #121218;
    }

    .award-verify-input-group .form-control {
        background-color: #1a1a26;
        border-color: #2a2a3a;
        color: #d8d8e2;
    }

    .award-verify-input-group .form-control:focus {
        background-color: #1a1a26;
        border-color: #5a5ae0;
        box-shadow: 0 0 0 0.25rem rgba(90, 90, 224, 0.25);
    }

    .award-verify-input-group .form-control::placeholder {
        color: #6a6a8a;
    }

    .award-verify-input-group .btn {
        border-color: #3a3aad;
    }

    /* --- Collection page --- */
    .collection-curator-avatar {
        border-color: #2a2a3a;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

    .collection-curator-link {
        color: #b0b0c8;
    }

    .collection-curator-link:hover,
    .collection-curator-link:focus-visible {
        color: #fff;
    }

    .collection-hero-description {
        color: #d8d8e2;
    }

    .marketing-section.portfolio-page-title {
        background: linear-gradient(180deg, #121218 0%, #181828 100%);
    }

    .marketing-section.portfolio-page-title + .collection-top {
        background: #181828;
    }

    .marketing-section.portfolio-page-title + .collection-top + .award-body {
        background: linear-gradient(180deg, #181828 0%, #1e1e36 100%);
    }

    .collection-public-description {
        color: #a0a0b0;
    }

    .collection-badge-card {
        background: #1e1e2a;
    }

    .collection-badge-card:hover,
    .collection-badge-card:focus-visible {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    }

    .collection-badge-card-image-col {
        background-color: #16161f;
    }

    .collection-badge-card-title {
        color: #e8e8ed;
    }

    .collection-badge-card-title a:hover,
    .collection-badge-card-title a:focus-visible {
        color: #7a7ae8;
    }

    .collection-badge-card-issuer {
        color: #a0a0b4;
    }

    .collection-badge-card-note {
        color: #c8c8d4;
    }

    .collection-badge-card-note.text-muted {
        color: #b0b0c0 !important;
    }

    /* --- Learning plan public page --- */
    .lp-status-pill {
        background: #2a2a3a;
        color: #a0a0b0;
    }

    .lp-status-pill:hover {
        background: #353548;
        color: #d8d8e2;
    }

    .lp-status-pill.active {
        background: linear-gradient(135deg, #3a3aad 0%, #5a5ae0 100%);
        color: #fff;
    }

    .lp-pill-count {
        background: rgba(255, 255, 255, 0.08);
    }

    .lp-status-pill.active .lp-pill-count {
        background: rgba(255, 255, 255, 0.2);
    }

    .lp-filter-select {
        background-color: #1e1e2a;
        border-color: #2a2a3a;
        color: #d8d8e2;
    }

    .lp-filter-select:focus {
        background-color: #222230;
        border-color: #5a5ae0;
        box-shadow: 0 0 0 0.25rem rgba(90, 90, 224, 0.25);
    }

    .lp-search-input {
        background-color: #1e1e2a !important;
        border-color: #2a2a3a !important;
        color: #d8d8e2 !important;
    }

    .lp-search-input:focus {
        background-color: #222230 !important;
        border-color: #5a5ae0 !important;
        box-shadow: 0 0 0 0.25rem rgba(90, 90, 224, 0.25) !important;
    }

    .lp-search-input::placeholder {
        color: #606078 !important;
    }

    .lp-search-icon {
        color: #606078;
    }

    .lp-search-clear {
        color: #a0a0b0;
    }

    .lp-search-clear:hover {
        color: #d8d8e2;
    }

    .lp-top {
        background: linear-gradient(180deg, #16161f 0%, #1a1a2e 100%);
    }

    .lp-top + .award-body {
        background: linear-gradient(180deg, #1a1a2e 0%, #1e1e36 100%);
    }

    .lp-group-card {
        background: rgba(255, 255, 255, 0.04);
    }

    .lp-group-header {
        color: #e8e8ed;
    }

    .lp-heading-count {
        background: #2a2a3a;
        color: #a0a0b0;
    }

    .lp-item-card {
        background-color: #1e1e2a;
    }

    .lp-item-card:hover,
    .lp-item-card:focus-visible {
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    }

    .lp-item-card:focus-visible {
        outline-color: #5a5ae0;
    }

    /* Status column dark mode variants */
    .lp-status-not_started {
        background-color: #2a2a3a !important;
    }

    .lp-status-not_started i,
    .lp-status-not_started .lp-item-status-label {
        color: #a0a0b0 !important;
    }

    .lp-status-in_progress {
        background-color: #1a2540 !important;
    }

    .lp-status-in_progress i,
    .lp-status-in_progress .lp-item-status-label {
        color: #5c9ce6 !important;
    }

    .lp-status-completed {
        background-color: #1a3528 !important;
    }

    .lp-status-completed i,
    .lp-status-completed .lp-item-status-label {
        color: #5cb870 !important;
    }

    .lp-item-title {
        color: #e8e8ed;
    }

    .lp-item-description {
        color: #a0a0b0;
    }

    .lp-due-badge {
        color: #a0a0b0;
        background: #2a2a3a;
    }

    .lp-due-badge.lp-due-overdue {
        color: #f08080;
        background: rgba(220, 53, 69, 0.15);
    }

    .lp-due-badge.lp-due-soon {
        color: #f0c050;
        background: rgba(255, 193, 7, 0.12);
    }

    .lp-tag {
        color: #8080e0;
        background: rgba(90, 90, 224, 0.15);
    }

    .lp-tag-more {
        color: #a0a0b0;
        background: #2a2a3a;
    }

    .lp-progress-bar {
        background: #2a2a3a;
    }

    .lp-progress-fill-not_started { background-color: #a0a0b0; }
    .lp-progress-fill-in_progress { background-color: #5c9ce6; }
    .lp-progress-fill-completed { background-color: #5cb870; }

    .lp-progress-text {
        color: #a0a0b0;
    }

    .lp-item-date {
        color: #a0a0b0;
    }

    .lp-click-hint {
        color: #a0a0b0;
    }

    .lp-item-card:hover .lp-click-hint,
    .lp-item-card:focus-visible .lp-click-hint {
        color: #7a7ae8;
    }

    .lp-section-empty {
        color: #a0a0b0;
    }

    .lp-view-more {
        color: #7a7ae8;
        border-color: #3a3a5a;
    }

    .lp-view-more:hover {
        background: rgba(90, 90, 224, 0.1);
        border-color: #5a5ae0;
        color: #9090f0;
    }

    /* LP modal detail */
    #lpItemDetailBody {
        color: #d8d8e2;
    }

    #lpItemDetailBody .text-muted {
        color: #b0b0c0 !important;
    }

    #lpItemDetailBody .text-danger {
        color: #f08080 !important;
    }

    .lp-modal-label {
        color: #e8e8ed;
    }

    .lp-modal-text {
        color: #c0c0cc;
    }

    .lp-readmore {
        color: #7a7ae8;
    }

    .lp-readmore:hover,
    .lp-readmore:focus-visible {
        color: #9090f0;
    }

    .lp-modal-link {
        color: #7a7ae8;
    }

    .lp-modal-link:hover {
        color: #9090f0;
    }

    .lp-modal-dates {
        color: #b0b0c0;
        border-top-color: #2a2a3a !important;
    }

    /* --- Bootstrap modal dark mode --- */
    .modal-content {
        background-color: #1e1e2a;
        border-color: #2a2a3a;
    }

    .modal-header {
        border-bottom-color: #2a2a3a;
    }

    .modal-footer {
        border-top-color: #2a2a3a;
    }

    /* Cache content modal — borderless header/footer */
    #cacheContentModal .modal-header {
        border-bottom: none;
    }

    #cacheContentModal .modal-footer {
        border-top: none;
    }

    /* Dark scrollbars for textareas */
    .modal-body textarea {
        scrollbar-color: #3a3a5a #121218;
    }

    .modal-title {
        color: #e8e8ed;
    }

    .modal-body .form-label {
        color: #c0c0d0;
    }

    .modal-body .form-control {
        background-color: #121218;
        border-color: #2a2a3a;
        color: #d8d8e2;
    }

    .modal-body .form-control.bg-light {
        background-color: #16161f !important;
    }

    .modal-footer .btn-light {
        background-color: #2a2a3a;
        border-color: #2a2a3a;
        color: #d8d8e2;
    }

    .modal-footer .btn-light:hover,
    .modal-footer .btn-light:focus-visible {
        background-color: #353548;
        border-color: #353548;
        color: #e8e8ed;
    }

    /* --- Learning log public entry cards --- */
    .ll-entry-card {
        --text-dark: #e8e8ed;
        --text-muted: #a0a0b0;
        --bg-light: #2a2a3a;
        background-color: #1e1e2a;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    }

    .ll-entry-card .card-body {
        color: #d8d8e2;
    }

    .ll-entry-card h3,
    .ll-entry-card h6 {
        color: #e8e8ed;
    }

    .ll-entry-card h6 a {
        color: #e8e8ed;
    }

    .ll-entry-card a {
        color: #7a7ae8;
        text-decoration: none;
    }

    .ll-entry-card a:hover,
    .ll-entry-card a:focus-visible {
        color: #9090f0;
        text-decoration: underline;
    }

    .ll-entry-card .form-label {
        color: #d8d8e2;
    }

    .ll-entry-card .text-muted {
        color: #a0a0b0 !important;
    }

    .ll-entry-card hr {
        border-color: #2a2a3a;
    }

    .ll-entry-card .btn-outline-secondary {
        border-color: #3a3a5a;
        color: #b0b0c8;
    }

    .ll-entry-card .btn-outline-secondary:hover,
    .ll-entry-card .btn-outline-secondary:focus-visible {
        border-color: #5a5ae0;
        color: #d8d8e2;
        background-color: rgba(90, 90, 224, 0.12);
    }

    .ll-entry-card .dropdown-menu {
        background-color: #1a1a26;
        border-color: #2a2a3a;
    }

    .ll-entry-card .dropdown-item {
        color: #c0c0d0;
    }

    .ll-entry-card .dropdown-item:hover,
    .ll-entry-card .dropdown-item:focus-visible {
        background-color: #252535;
        color: #8080e0;
    }

    /* Learning log search input (inside lp-top) */
    .lp-top .form-control {
        background-color: #1e1e2a;
        border-color: #2a2a3a;
        color: #d8d8e2;
    }

    .lp-top .form-control:focus {
        background-color: #222230;
        border-color: #5a5ae0;
        box-shadow: 0 0 0 0.25rem rgba(90, 90, 224, 0.25);
    }

    .lp-top .form-control::placeholder {
        color: #606078;
    }

    .lp-top .input-group-text {
        background-color: #1e1e2a;
        border-color: #2a2a3a;
        color: #a0a0b0;
    }

    .lp-top .btn-outline-secondary {
        border-color: #2a2a3a;
        color: #a0a0b0;
    }

    /* Rendered markdown */
    .rendered-markdown a {
        color: #8a8aef;
    }
    .rendered-markdown code {
        background-color: #2a2a3a;
        color: #d8d8e2;
    }
    .rendered-markdown pre {
        background-color: #2a2a3a;
        color: #d8d8e2;
    }
    .rendered-markdown blockquote {
        border-left-color: #3a3a50;
        color: #a0a0b0;
    }

    /* Activity heatmap */
    .heatmap-year-card {
        background-color: #1e1e2a;
    }

    .heatmap-year-card h3 {
        color: #e8e8ed;
    }

    .heatmap-cell[data-level="0"] { background-color: #2a2a3a; }
    .heatmap-cell[data-level="1"] { background-color: #2a2a5c; }
    .heatmap-cell[data-level="2"] { background-color: #3a3a9c; }
    .heatmap-cell[data-level="3"] { background-color: #5a5ae0; }
    .heatmap-cell[data-level="4"] { background-color: #7a7aff; }

    .heatmap-table .heatmap-month-label {
        color: #c0c0cc;
    }

    .heatmap-legend .text-muted {
        color: #c0c0cc !important;
    }

}

/* ============================================
   Rendered Markdown
   ============================================ */
.rendered-markdown h1,
.rendered-markdown h2,
.rendered-markdown h3,
.rendered-markdown h4,
.rendered-markdown h5,
.rendered-markdown h6 {
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
.rendered-markdown h1:first-child,
.rendered-markdown h2:first-child,
.rendered-markdown h3:first-child,
.rendered-markdown h4:first-child,
.rendered-markdown h5:first-child,
.rendered-markdown h6:first-child {
    margin-top: 0;
}
.rendered-markdown p {
    margin-bottom: 0.75rem;
}
.rendered-markdown p:last-child {
    margin-bottom: 0;
}
.rendered-markdown ul,
.rendered-markdown ol {
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}
.rendered-markdown a {
    color: var(--brand-primary, #2f2fbc);
    text-decoration: none;
    font-weight: 600;
}
.rendered-markdown a:hover,
.rendered-markdown a:focus-visible {
    text-decoration: underline;
}
.rendered-markdown code {
    background-color: #f5f5f5;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}
.rendered-markdown pre {
    background-color: #f5f5f5;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
    margin-bottom: 0.75rem;
}
.rendered-markdown pre code {
    background: none;
    padding: 0;
}
.rendered-markdown blockquote {
    border-left: 3px solid #dee2e6;
    padding-left: 1rem;
    margin-left: 0;
    color: #6c757d;
}
.rendered-markdown img {
    max-width: 100%;
    height: auto;
}

/* ===== Activity Heatmap (Portfolio) ===== */
.heatmap-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 3px;
}
.heatmap-table .heatmap-td {
    padding: 0;
}
.heatmap-table .heatmap-month-label {
    font-size: 0.8125rem;
    color: #6b7280;
    text-align: center;
    padding: 2px 0 6px;
    line-height: 1.2;
}
.heatmap-cell {
    width: 100%;
    height: 20px;
    border-radius: 3px;
}
.heatmap-cell[data-level="0"] { background-color: #ebedf0; }
.heatmap-cell[data-level="1"] { background-color: #c8c8f0; }
.heatmap-cell[data-level="2"] { background-color: #8a8ae0; }
.heatmap-cell[data-level="3"] { background-color: #4a4acd; }
.heatmap-cell[data-level="4"] { background-color: #2F2FBC; }
.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}
.heatmap-legend .heatmap-cell {
    width: 14px;
    height: 14px;
    display: inline-block;
}
.heatmap-year-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
}