/* Theme tokens for account pages whose original layouts use fixed light colors. */
html[data-theme="light"] {
    --account-page-bg: #f6f8fb;
    --account-surface: #fff;
    --account-surface-soft: #f8fafc;
    --account-ink: #172033;
    --account-muted: #64748b;
    --account-border: #e4eaf1;
}

html[data-theme="dark"] {
    --account-page-bg: var(--mjk-bg);
    --account-surface: var(--mjk-panel);
    --account-surface-soft: var(--mjk-panel-2);
    --account-ink: var(--mjk-text);
    --account-muted: var(--mjk-muted);
    --account-border: var(--mjk-border);
}

html[data-theme] .apps-page,
html[data-theme] .invite-page,
html[data-theme] .sent-page,
html[data-theme] .messages-page {
    background: var(--account-page-bg) !important;
    color: var(--account-ink);
}

html[data-theme] .apps-hero,
html[data-theme] .apps-panel,
html[data-theme] .apps-filter,
html[data-theme] .invite-hero,
html[data-theme] .invite-card,
html[data-theme] .invite-stat,
html[data-theme] .sent-hero,
html[data-theme] .sent-stat,
html[data-theme] .sent-panel,
html[data-theme] .messages-shell {
    background: var(--account-surface) !important;
    border-color: var(--account-border) !important;
    color: var(--account-ink);
}

html[data-theme] .apps-hero h1,
html[data-theme] .invite-hero h1,
html[data-theme] .sent-hero h1,
html[data-theme] .filter-value,
html[data-theme] .stat-value,
html[data-theme] .row-title,
html[data-theme] .messages-title,
html[data-theme] .conv-name,
html[data-theme] .conversation-item.unread .conv-name,
html[data-theme] .conversation-item.unread .conv-preview,
html[data-theme] .chat-main-title {
    color: var(--account-ink) !important;
}

html[data-theme] .eyebrow,
html[data-theme] .hero-copy,
html[data-theme] .filter-label,
html[data-theme] .stat-label,
html[data-theme] .row-meta,
html[data-theme] .text-link,
html[data-theme] .chat-main-sub,
html[data-theme] .conv-time,
html[data-theme] .conv-preview,
html[data-theme] .date-sep,
html[data-theme] .msg-time {
    color: var(--account-muted) !important;
}

html[data-theme] .apps-row,
html[data-theme] .invite-card,
html[data-theme] .messages-sidebar,
html[data-theme] .messages-head,
html[data-theme] .conversation-item,
html[data-theme] .chat-main-head,
html[data-theme] .chat-input {
    border-color: var(--account-border) !important;
}

html[data-theme] .logo-mark,
html[data-theme] .avatar-mark {
    background: var(--account-surface-soft) !important;
    border-color: var(--account-border) !important;
    color: var(--mjk-green-dark) !important;
}

html[data-theme] .messages-main {
    background: var(--account-page-bg) !important;
}

html[data-theme] .chat-main-head,
html[data-theme] .chat-input,
html[data-theme] .msg-bubble,
html[data-theme] .btn-app-secondary,
html[data-theme] .btn-invite-secondary,
html[data-theme] .btn-invite-danger,
html[data-theme] .btn-sent-secondary {
    background: var(--account-surface) !important;
    border-color: var(--account-border) !important;
    color: var(--account-ink) !important;
}

html[data-theme] .conversation-item:hover,
html[data-theme] .conversation-item.active {
    background: var(--account-surface-soft) !important;
}

html[data-theme] .conversation-item.active {
    box-shadow: inset 3px 0 0 var(--mjk-green);
}

html[data-theme] .chat-search,
html[data-theme] .reply-wrap textarea {
    background: var(--account-surface-soft) !important;
    border-color: var(--account-border) !important;
    color: var(--account-ink) !important;
}

html[data-theme] .chat-search::placeholder,
html[data-theme] .reply-wrap textarea::placeholder {
    color: var(--account-muted) !important;
}

html[data-theme] .employer-note,
html[data-theme] .success-alert {
    background: color-mix(in srgb, var(--mjk-green) 12%, var(--account-surface)) !important;
    border-color: color-mix(in srgb, var(--mjk-green) 24%, var(--account-border)) !important;
    color: var(--account-ink) !important;
}

html[data-theme="dark"] .status-pending {
    background: rgba(245, 158, 11, .15) !important;
    border-color: rgba(251, 191, 36, .28) !important;
    color: #f8d980 !important;
}

html[data-theme="dark"] .status-reviewed {
    background: rgba(59, 130, 246, .15) !important;
    border-color: rgba(96, 165, 250, .28) !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] .status-shortlisted,
html[data-theme="dark"] .status-hired,
html[data-theme="dark"] .status-accepted {
    background: rgba(34, 197, 94, .15) !important;
    border-color: rgba(74, 222, 128, .28) !important;
    color: #a7f3c0 !important;
}

html[data-theme="dark"] .status-rejected,
html[data-theme="dark"] .status-declined {
    background: rgba(239, 68, 68, .15) !important;
    border-color: rgba(248, 113, 113, .28) !important;
    color: #fecaca !important;
}

@media (prefers-reduced-motion: no-preference) {
    html[data-theme] .apps-page,
    html[data-theme] .invite-page,
    html[data-theme] .sent-page,
    html[data-theme] .messages-page,
    html[data-theme] .apps-hero,
    html[data-theme] .invite-hero,
    html[data-theme] .sent-hero {
        transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    }
}

/* Course catalog, detail, player, and learner pages use page-specific colors. */
html[data-theme="dark"] .course-market,
html[data-theme="dark"] .course-detail-page,
html[data-theme="dark"] .course-detail-v2,
html[data-theme="dark"] .course-study-v2,
html[data-theme="dark"] .learning-page,
html[data-theme="dark"] .checkout-page {
    background: var(--mjk-bg) !important;
    color: var(--mjk-text) !important;
}

html[data-theme="dark"] .course-market-stats,
html[data-theme="dark"] .course-market-search,
html[data-theme="dark"] .course-catalog-card,
html[data-theme="dark"] .course-empty-state,
html[data-theme="dark"] .course-detail-v2 .course-action-panel,
html[data-theme="dark"] .course-detail-v2 .course-detail-section,
html[data-theme="dark"] .course-detail-v2 .course-rail-box,
html[data-theme="dark"] .course-detail-v2 .course-related-card,
html[data-theme="dark"] .course-detail-v2 .course-curriculum-group,
html[data-theme="dark"] .course-study-topbar,
html[data-theme="dark"] .course-study-rail,
html[data-theme="dark"] .course-study-player-card,
html[data-theme="dark"] .course-study-notes,
html[data-theme="dark"] .course-study-nextbar,
html[data-theme="dark"] .learning-hero,
html[data-theme="dark"] .learning-stat,
html[data-theme="dark"] .learning-panel,
html[data-theme="dark"] .learning-page .course-card {
    background: var(--mjk-panel) !important;
    border-color: var(--mjk-border) !important;
    color: var(--mjk-text) !important;
}

html[data-theme="dark"] .course-market h1,
html[data-theme="dark"] .course-market-stats strong,
html[data-theme="dark"] .course-catalog-card h2 a,
html[data-theme="dark"] .course-detail-v2 .course-section-heading,
html[data-theme="dark"] .course-detail-v2 .course-curriculum-title,
html[data-theme="dark"] .course-study-topbar h1,
html[data-theme="dark"] .course-study-progress strong,
html[data-theme="dark"] .course-study-player-head h2,
html[data-theme="dark"] .course-study-section-heading h2,
html[data-theme="dark"] .learning-hero h1,
html[data-theme="dark"] .learning-page .course-title,
html[data-theme="dark"] .learning-page .stat-value {
    color: var(--mjk-text) !important;
}

html[data-theme="dark"] .course-market > .container > .course-market-head p,
html[data-theme="dark"] .course-market-stats span,
html[data-theme="dark"] .course-market-toolbar span,
html[data-theme="dark"] .course-market .course-catalog-card p,
html[data-theme="dark"] .course-market .course-card-foot span,
html[data-theme="dark"] .course-market .course-empty-state p,
html[data-theme="dark"] .course-study-topbar p,
html[data-theme="dark"] .course-study-progress,
html[data-theme="dark"] .course-study-section-title,
html[data-theme="dark"] .course-study-rail-head strong,
html[data-theme="dark"] .course-study-lesson,
html[data-theme="dark"] .course-study-lesson em,
html[data-theme="dark"] .learning-page .course-meta,
html[data-theme="dark"] .learning-page .stat-label {
    color: var(--mjk-muted) !important;
}

html[data-theme="dark"] .course-market .course-search-box,
html[data-theme="dark"] .course-market .course-free-toggle,
html[data-theme="dark"] .course-market .course-filter-chips span,
html[data-theme="dark"] .course-market .course-card-meta span,
html[data-theme="dark"] .course-market .course-card-media,
html[data-theme="dark"] .course-detail-v2 .course-learn-grid div,
html[data-theme="dark"] .course-detail-v2 .course-requirement-list div,
html[data-theme="dark"] .course-detail-v2 .course-curriculum-group summary,
html[data-theme="dark"] .course-detail-v2 .course-share-row a,
html[data-theme="dark"] .course-study-lesson:hover,
html[data-theme="dark"] .course-study-lesson.is-active,
html[data-theme="dark"] .learning-page .course-thumb,
html[data-theme="dark"] .learning-page .progress-track,
html[data-theme="dark"] .learning-page .learning-tabs .nav-link {
    background: var(--mjk-panel-2) !important;
    border-color: var(--mjk-border) !important;
    color: var(--mjk-text) !important;
}

html[data-theme="dark"] .course-market-search .form-select,
html[data-theme="dark"] .course-market-search input,
html[data-theme="dark"] .course-study-v2 .btn-outline-secondary,
html[data-theme="dark"] .course-study-v2 .course-mobile-curriculum {
    background-color: var(--mjk-panel-2) !important;
    border-color: var(--mjk-border) !important;
    color: var(--mjk-text) !important;
}

html[data-theme="dark"] .course-market .course-search-box input {
    background: transparent !important;
    border: 0 !important;
}

html[data-theme="dark"] .course-market-search input::placeholder {
    color: var(--mjk-muted) !important;
}

html[data-theme="dark"] .course-market .course-card-rating {
    color: #fbbf24 !important;
}

html[data-theme="dark"] .course-market .course-card-foot strong,
html[data-theme="dark"] .course-study-back,
html[data-theme="dark"] .course-study-done,
html[data-theme="dark"] .course-study-section-heading span,
html[data-theme="dark"] .course-study-player-head span {
    color: #a7d77d !important;
}

html[data-theme="dark"] .course-market .course-card-fallback,
html[data-theme="dark"] .course-market .course-empty-state i,
html[data-theme="dark"] .course-market .course-card-media {
    color: var(--mjk-muted) !important;
}

html[data-theme="dark"] .course-detail-v2 .course-preview-box {
    background: var(--mjk-panel-3) !important;
}

html[data-theme="dark"] .course-detail-v2 .course-preview-fallback,
html[data-theme="dark"] .course-detail-v2 .course-action-body,
html[data-theme="dark"] .course-detail-v2 .course-progress-block,
html[data-theme="dark"] .course-detail-v2 .course-includes-list,
html[data-theme="dark"] .course-detail-v2 .course-section-title,
html[data-theme="dark"] .course-detail-v2 .course-section-row,
html[data-theme="dark"] .course-detail-v2 .course-detail-description,
html[data-theme="dark"] .course-detail-v2 .course-requirement-list,
html[data-theme="dark"] .course-detail-v2 .course-side-rail {
    color: var(--mjk-text) !important;
}

html[data-theme="dark"] .course-detail-v2 .course-section-title h2,
html[data-theme="dark"] .course-detail-v2 .course-curriculum-lesson strong,
html[data-theme="dark"] .course-detail-v2 .course-related-card strong,
html[data-theme="dark"] .course-detail-v2 .course-mini-link strong,
html[data-theme="dark"] .course-detail-v2 .course-price-row strong {
    color: var(--mjk-text) !important;
}

html[data-theme="dark"] .course-detail-v2 .course-price-row,
html[data-theme="dark"] .course-detail-v2 .course-progress-block,
html[data-theme="dark"] .course-detail-v2 .course-share-row,
html[data-theme="dark"] .course-detail-v2 .course-section-row,
html[data-theme="dark"] .course-detail-v2 .course-curriculum-lesson,
html[data-theme="dark"] .course-detail-v2 .course-related-card,
html[data-theme="dark"] .course-detail-v2 .course-mini-link {
    border-color: var(--mjk-border) !important;
}

html[data-theme="dark"] .course-detail-v2 .course-price-row span,
html[data-theme="dark"] .course-detail-v2 .course-share-row span,
html[data-theme="dark"] .course-detail-v2 .course-section-row small,
html[data-theme="dark"] .course-detail-v2 .course-section-row a,
html[data-theme="dark"] .course-detail-v2 .course-curriculum-lesson small,
html[data-theme="dark"] .course-detail-v2 .course-related-card span,
html[data-theme="dark"] .course-detail-v2 .course-related-card em,
html[data-theme="dark"] .course-detail-v2 .course-mini-link em {
    color: var(--mjk-muted) !important;
}

html[data-theme="dark"] .course-detail-v2 .course-share-row a,
html[data-theme="dark"] .course-study-nextbar a,
html[data-theme="dark"] .learning-tabs .nav-link {
    background: var(--mjk-panel-2) !important;
    border-color: var(--mjk-border) !important;
    color: var(--mjk-text) !important;
}

html[data-theme="dark"] .learning-tabs .nav-link.active {
    background: rgba(143, 210, 74, .12) !important;
    border-color: rgba(143, 210, 74, .35) !important;
    color: #b7ee78 !important;
}

html[data-theme="dark"] .learning-page .course-badge {
    border: 1px solid var(--mjk-border);
}

html[data-theme="dark"] .learning-page .badge-complete,
html[data-theme="dark"] .learning-page .badge-live {
    background: rgba(34, 197, 94, .14) !important;
    color: #a7f3c0 !important;
}

html[data-theme="dark"] .learning-page .badge-progress {
    background: rgba(59, 130, 246, .15) !important;
    color: #bfdbfe !important;
}

html[data-theme="dark"] .learning-page .badge-draft {
    background: rgba(245, 158, 11, .15) !important;
    color: #f8d980 !important;
}

html[data-theme="dark"] .course-study-copy,
html[data-theme="dark"] .course-study-empty-copy,
html[data-theme="dark"] .course-study-nextbar span {
    color: var(--mjk-muted) !important;
}

html[data-theme="dark"] .course-study-nextbar strong {
    color: var(--mjk-text) !important;
}

html[data-theme="dark"] .course-study-rail,
html[data-theme="dark"] .course-study-player-card,
html[data-theme="dark"] .course-study-notes,
html[data-theme="dark"] .course-study-nextbar,
html[data-theme="dark"] .course-market-stats div,
html[data-theme="dark"] .course-card-foot {
    border-color: var(--mjk-border) !important;
}