/* ===============================
 * 页面
 * =============================== */
/* 标题*/
.mxj-title {
    color: var(--title-text-color);
}

/**
 * 学习端一级页面标题区。
 *
 * 说明：
 * 1. 只在页面显式接入 `.mxj-page-head` 时生效，不替换历史 `.mxj-title` / `.mxj-course-header`；
 * 2. 图标仅保留字形并与标题共用主文字色，主题切换时不叠加底色或描边；
 * 3. 移动端收缩规则统一放在 responsive.css，业务页面无需重复维护触控布局。
 */
.mxj-page-head {
    --mxj-page-head-accent: var(--mxj-interactive-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 1.35rem;
    padding: 1.15rem 1.25rem;
    border: var(--mxj-panel-border);
    border-radius: var(--mxj-radius-lg);
    background: linear-gradient(135deg, var(--mxj-card-tint) 0%, var(--mxj-surface-2) 62%);
    box-shadow: var(--mxj-panel-shadow);
}

.mxj-page-head--with-tabs {
    margin-bottom: .85rem;
}

.mxj-page-head-main {
    display: flex;
    flex: 1 1 18rem;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

/* 标题图标只展示字形，不再消费页面级的底块和描边变量。 */
.mxj-page-head-icon {
    display: inline-flex;
    flex: 0 0 1.25rem;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 0;
    border-radius: 0;
    color: var(--mxj-text-primary);
    font-size: 1rem;
    line-height: 1;
    background: none;
    box-shadow: none;
}

.mxj-page-head-copy {
    min-width: 0;
}

.mxj-page-head-eyebrow {
    display: block;
    margin-bottom: .18rem;
    color: var(--mxj-interactive-ink);
    font-size: max(12px, .72rem);
    font-weight: 700;
    letter-spacing: .1em;
}

.mxj-study-app .mxj-page-head-title {
    margin: 0;
    color: var(--mxj-text-primary);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.mxj-page-head-subtitle {
    margin: .32rem 0 0;
    color: var(--mxj-text-muted);
    font-size: .88rem;
    line-height: 1.55;
}

.mxj-page-head-actions {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .5rem;
}

.mxj-page-head-actions > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}

[data-mdb-theme="dark"] .mxj-page-head {
    border-color: rgba(148, 163, 184, .16);
}

/**
 * 一级功能页的扁平标题变体。
 *
 * 课程、待办、作品、互动、题库和创作工坊共用该结构；页面只需覆盖变量，
 * 不再重复声明标题区边框、透明背景和无投影状态；图标统一采用无底块样式。
 */
.mxj-page-head--flat {
    padding: var(--mxj-page-head-flat-padding, .15rem 0 .85rem);
    margin-bottom: var(--mxj-page-head-flat-margin-bottom, .85rem);
    border: 0;
    border-bottom: 1px solid var(--mxj-page-head-flat-border, var(--mxj-border-2));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* 有副标题时仍按首行标题对齐裸图标，避免图标落在说明文字旁。 */
.mxj-page-head--flat .mxj-page-head-main:has(> .mxj-page-head-icon) {
    align-items: baseline;
}

/* 返回按钮 */
.mxj-title-back-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--mxj-color-white);
    background: var(--mxj-brand-500);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.mxj-title-back-btn:hover, .mxj-title-back-btn:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-brand-600) !important;
}
/* 课节功能按钮在无内容或不可进入时统一保留灰态文字，避免各模板单独兜底。 */
.mxj-feature-btn.disabled,
.mxj-feature-btn[aria-disabled='true'] {
    color: #9aa0a6 !important;
    opacity: 1;
}
/* 筛选项 */
.mxj-filter-group, .mxj-sort-group {
    display: flex;
    gap: 6px;
}
.mxj-filter-item, .mxj-sort-item {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    color: var(--filter-color);
    background: var(--filter-background-color);
    text-decoration: none;
    transition: all .2s;
}
.mxj-filter-item:hover, .mxj-sort-item:hover {
    color: var(--filter-hover-color);
    background: var(--filter-hover-bg-color);
}
.mxj-filter-item.active, .mxj-sort-item.active {
    color: var(--filter-active-color);
    background: var(--filter-active-bg-color);
    font-weight: 500;
}

/* 列表筛选栏在桌面端横向排列，移动端由 responsive.css 接管为可滑动分组。 */
.mxj-list-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    min-width: 0;
}

.mxj-filter-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

.mxj-mobile-scroll-group {
    min-width: 0;
}

/* 通用交互控件保持足够触控面积，移动端无需为每个页面重复补丁。 */
.mxj-study-app .btn {
    border-radius: var(--mxj-radius-sm);
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

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

/* ===============================
 * 按钮
 * =============================== */
.mxj-btn-blue{
    color: var(--mxj-color-white);
    background: var(--mxj-brand-500);
    box-shadow: none !important;
}
.mxj-btn-blue:hover, .mxj-btn-blue:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-brand-600) !important;
}

.mxj-btn-green{
    color: var(--mxj-color-white);
    background: var(--mxj-color-green);
    box-shadow: none !important;
}
.mxj-btn-green:hover, .mxj-btn-green:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-green-900) !important;
}

.mxj-btn-gray{
    color: var(--mxj-color-white);
    background: var(--mxj-color-gray);
    box-shadow: none !important;
}
.mxj-btn-gray:hover, .mxj-btn-gray:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-gray-900) !important;
}

.mxj-btn-purple{
    color: var(--mxj-color-white);
    background: var(--mxj-color-purple);
    box-shadow: none !important;
}
.mxj-btn-purple:hover, .mxj-btn-purple:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-purple-900) !important;
}

.mxj-btn-black{
    color: var(--mxj-color-white);
    background: var(--mxj-color-black);
    box-shadow: none !important;
}
.mxj-btn-black:hover, .mxj-btn-black:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-black-900) !important;
}

.mxj-btn-red{
    color: var(--mxj-color-white);
    background: var(--mxj-color-red);
    box-shadow: none !important;
}
.mxj-btn-red:hover, .mxj-btn-red:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-red-900) !important;
}

.mxj-btn-yellow{
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-yellow-900);
    border: 1px solid var(--mxj-color-yellow-900);
    box-shadow: none !important;
}
.mxj-btn-yellow:hover, .mxj-btn-yellow:active, .mxj-btn-yellow:focus {
    color: var(--mxj-color-white) !important;
    background: #b45309 !important;
    border-color: #b45309 !important;
}

.mxj-btn-outline-blue{
    color: var(--mxj-interactive-ink);
    background: transparent;
    border: 1px solid var(--mxj-interactive-border);
    box-shadow: none !important;
}
.mxj-btn-outline-blue:hover, .mxj-btn-outline-blue:active {
    color: var(--mxj-interactive-ink) !important;
    background: var(--mxj-control-highlight) !important;
    border-color: var(--mxj-interactive-border) !important;
}

.mxj-btn-outline-green{
    color: var(--mxj-color-green);
    background: transparent;
    border: 1px solid var(--mxj-color-green);
    box-shadow: none !important;
}
.mxj-btn-outline-green:hover, .mxj-btn-outline-green:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-green) !important;
    border-color: var(--mxj-color-green) !important;
}

.mxj-btn-outline-gray{
    color: var(--mxj-color-gray-900);
    background: transparent;
    border: 1px solid var(--mxj-color-gray-900);
    box-shadow: none !important;
}
.mxj-btn-outline-gray:hover, .mxj-btn-outline-gray:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-gray-900) !important;
    border-color: var(--mxj-color-gray-900) !important;
}

.mxj-btn-outline-purple{
    color: var(--mxj-color-purple);
    background: transparent;
    border: 1px solid var(--mxj-color-purple);
    box-shadow: none !important;
}
.mxj-btn-outline-purple:hover, .mxj-btn-outline-purple:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-purple) !important;
    border-color: var(--mxj-color-purple) !important;
}

.mxj-btn-outline-black{
    color: var(--mxj-color-black);
    background: transparent;
    border: 1px solid var(--mxj-color-black);
    box-shadow: none !important;
}
.mxj-btn-outline-black:hover, .mxj-btn-outline-black:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-black) !important;
    border-color: var(--mxj-color-black) !important;
}

.mxj-btn-outline-red{
    color: var(--mxj-color-red);
    background: transparent;
    border: 1px solid var(--mxj-color-red);
    box-shadow: none !important;
}
.mxj-btn-outline-red:hover, .mxj-btn-outline-red:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-red) !important;
    border-color: var(--mxj-color-red) !important;
}

.mxj-btn-outline-yellow{
    color: var(--mxj-color-yellow-900);
    background: #fffaf0;
    border: 1px solid rgba(217, 119, 6, .55);
    box-shadow: none !important;
}
.mxj-btn-outline-yellow:hover, .mxj-btn-outline-yellow:active {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-yellow-900) !important;
    border-color: var(--mxj-color-yellow-900) !important;
}
/* ===============================
 * 导航标签
 * =============================== */
.mxj-nav-tabs {
    border-bottom: 1px solid var(--mxj-nav-tabs-border-color);
}
.mxj-nav-tabs .nav-link {
    color: var(--mxj-nav-link-color);
    font-weight: 500;
    border: none;
    padding: 10px 20px;
    position: relative;
    background: transparent;
}
.mxj-nav-tabs .nav-link.active {
    color: var(--mxj-interactive-ink);
    font-weight: 700;
    background: transparent;
    border: none;
}
.mxj-nav-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--mxj-brand-500);
    border-radius: 3px 3px 0 0;
}
.mxj-nav-tabs .nav-link:hover {
    color: var(--mxj-interactive-ink);
}

/* 未读数量随互动中心页签展示，红色只表达待处理状态，不跟随品牌主题改色。 */
.mxj-nav-tabs .mxj-nav-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    margin-left: .28rem;
    padding: 0 .3rem;
    color: var(--mxj-color-white);
    font-size: max(12px, .625rem);
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    background: var(--mxj-color-red);
}

.mxj-nav-tabs .mxj-nav-tab-count[hidden] {
    display: none !important;
}

/* ===============================
 * 响应式粘性顶部
 * =============================== */
.sticky-top-px{
    top: 80px;
}
/* 自适应移动端 */
@media (max-width: 768px) {

    .mxj-nav-tabs {
        display: flex;
        flex-wrap: nowrap;          /* 不换行 */
        overflow-x: auto;           /* 横向滚动 */
        overflow-y: hidden;
        white-space: nowrap;

        -webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
        scrollbar-width: none;      /* Firefox 隐藏滚动条 */
    }

    /* Chrome / Safari 隐藏滚动条 */
    .mxj-nav-tabs::-webkit-scrollbar {
        display: none;
    }

    .mxj-nav-tabs .nav-item {
        flex: 0 0 auto;             /* 子项不被压缩 */
    }

    .mxj-nav-tabs .nav-link {
        padding: 10px 16px;         /* 移动端稍微紧凑 */
    }
    .sticky-top-px{
        top: 0;
    }
}

/* ===============================
 * 标签
 * =============================== */
.mxj-badge {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: .75rem;
    font-weight: 600;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0 !important;
}

.mxj-badge-purple {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-purple) !important;
}

.mxj-badge-black {
    color: var(--mxj-color-white) !important;
    background: var(--mxj-color-black) !important;
}

.mxj-badge-gray {
    color: var(--mxj-color-black) !important;
    background: var(--mxj-color-gray) !important;
}

.mxj-work-reaction-btn {
    box-sizing: border-box;
    height: 22px;
    min-height: 22px;
    padding: 0 8px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-size: 12px;
    line-height: 1;
}

.mxj-work-reaction-btn i {
    font-size: 12px;
    line-height: 1;
}

.mxj-comment-panel {
    flex: 0 0 auto;
    min-height: 0;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
}

.mxj-comment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding-bottom: .75rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid rgba(17, 24, 39, .08);
}

.mxj-comment-title {
    margin: 0;
    color: var(--title-text-color);
    font-size: .95rem;
    font-weight: 700;
}

.mxj-comment-form {
    flex: 0 0 auto;
    margin-top: .75rem;
    position: relative;
}

.mxj-comment-textarea {
    min-height: 72px !important;
    resize: vertical;
    font-size: .9rem;
}

.mxj-comment-list {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    padding-right: 0;
}

.mxj-comment-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.mxj-comment-form-note {
    min-width: 0;
    flex: 1 1 190px;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.mxj-comment-form-controls {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.mxj-comment-tip {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    color: var(--mxj-color-slate-400);
    font-size: .78rem;
    line-height: 1.45;
}

.mxj-comment-tip-icon {
    margin-right: .35rem;
    color: inherit;
    font-size: .82rem;
}

.mxj-comment-rule-link {
    display: inline;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--mxj-color-blue);
    font-family: inherit;
    font-size: .78rem;
    line-height: 1.45;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}

.mxj-comment-submit-btn {
    min-width: 60px;
}

.mxj-comment-rule-link:hover {
    text-decoration: underline;
}

.mxj-comment-emoji-btn {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(71, 85, 105, .22);
    border-radius: 6px;
    color: var(--mxj-color-slate-500);
    background: var(--mxj-color-white);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.mxjUserInfo[role="button"]:focus-visible {
    outline: 2px solid var(--mxj-color-blue);
    outline-offset: 3px;
    border-radius: 8px;
}

.mxj-comment-emoji-btn:hover,
.mxj-comment-emoji-btn.is-active {
    border-color: rgba(59, 130, 246, .42);
    color: var(--mxj-color-blue);
    background: rgba(59, 130, 246, .08);
}

.mxj-comment-emoji-popover {
    position: absolute;
    right: 76px;
    bottom: 40px;
    z-index: 30;
    width: 322px;
    max-width: min(322px, calc(100vw - 32px));
    height: 340px;
    display: none;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 8px;
    background: var(--mxj-color-white);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
}

.mxj-comment-emoji-popover.is-open {
    display: block;
}

.mxj-comment-emoji-popover emoji-picker {
    width: 100%;
    height: 100%;
    --border-size: 0;
    --border-radius: 8px;
    --num-columns: 8;
    --emoji-size: 1.25rem;
    --emoji-padding: .36rem;
    --input-font-size: .86rem;
    --category-font-size: .84rem;
    --indicator-color: var(--mxj-color-blue);
}

.mxj-comment-emoji-loading {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mxj-color-slate-500);
    font-size: .84rem;
}

@media (max-width: 575.98px) {
    .mxj-comment-emoji-popover {
        right: 0;
        width: min(322px, calc(100vw - 24px));
    }

    .mxj-comment-emoji-popover emoji-picker {
        --num-columns: 7;
    }
}

.mxj-comment-rule-list {
    margin: 0;
    padding-left: 1rem;
    color: var(--mxj-color-slate-700);
    font-size: .86rem;
    line-height: 1.75;
}

.mxj-comment-rule-intro {
    margin-bottom: .75rem;
    color: var(--mxj-color-slate-500);
    font-size: .88rem;
}

.mxj-comment-rule-subtitle {
    margin: .75rem 0 .35rem;
    color: var(--title-text-color);
    font-size: .9rem;
    font-weight: 700;
}

.mxj-comment-item {
    display: flex;
    gap: .65rem;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(17, 24, 39, .07);
}

.mxj-comment-item:last-child {
    border-bottom: 0;
}

.mxj-comment-avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.mxj-comment-main {
    min-width: 0;
    flex: 1 1 auto;
}

.mxj-comment-meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    color: var(--mxj-color-gray-500);
    font-size: .78rem;
}

.mxj-comment-name {
    color: var(--mxj-color-gray-800);
    font-weight: 600;
}

.mxj-comment-student-no {
    color: var(--mxj-color-gray-500);
    font-weight: 400;
}

/* 讲师身份标签使用紫色，与作品作者的黄色标签区分。 */
.mxj-comment-teacher-badge {
    color: var(--mxj-color-white);
    background: #7c3aed;
}

.mxj-comment-content {
    margin-top: .25rem;
    color: #374151;
    font-size: .88rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.mxj-comment-item.is-blocked .mxj-comment-content {
    color: var(--mxj-color-slate-400);
    font-size: .8rem;
}

.mxj-comment-item.is-deleted .mxj-comment-content {
    color: var(--mxj-color-slate-400);
    font-size: .8rem;
    font-style: italic;
}

.mxj-comment-actions {
    margin-top: .25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.mxj-comment-action {
    padding: 0;
    border: 0;
    color: var(--mxj-color-slate-500);
    background: transparent;
    font-size: .78rem;
    line-height: 1.4;
}

.mxj-comment-action:hover {
    color: var(--mxj-color-blue);
}

.mxj-comment-like,
.mxj-comment-dislike {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

.mxj-comment-like.is-active,
.mxj-comment-dislike.is-active {
    color: var(--mxj-color-blue);
}

.mxj-comment-action:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.mxj-comment-pagination {
    flex: 0 0 auto;
    margin-top: .65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .35rem;
}

.mxj-comment-page-btn,
.mxj-comment-reply-more {
    border: 0;
    background: transparent;
    color: var(--mxj-color-blue);
    font-size: .78rem;
    line-height: 1.4;
}

.mxj-comment-page-btn {
    min-width: 28px;
    height: 24px;
    padding: 0 .45rem;
    border-radius: 999px;
}

.mxj-comment-page-btn.active {
    color: var(--mxj-color-white);
    background: var(--mxj-color-blue);
}

.mxj-comment-page-btn:disabled {
    color: var(--mxj-color-slate-300);
    cursor: not-allowed;
}

.mxj-comment-reply-more {
    margin-top: .35rem;
    padding: 0;
}

.mxj-comment-replies {
    margin-top: .55rem;
    padding-left: .65rem;
    border-left: 2px solid rgba(79, 70, 229, .12);
}

.mxj-comment-replies .mxj-comment-item {
    padding: .55rem 0;
}

.mxj-comment-replying {
    display: none;
    margin-bottom: .4rem;
    color: var(--mxj-color-slate-500);
    font-size: .8rem;
}

.mxj-comment-form.is-replying .mxj-comment-replying {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.mxj-comment-empty,
.mxj-comment-loading {
    min-height: 12rem;
    padding: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mxj-color-slate-400);
    text-align: center;
    font-size: .88rem;
}

[data-mdb-theme="dark"] .mxj-comment-head {
    border-bottom-color: rgba(148, 163, 184, .16);
}

[data-mdb-theme="dark"] .mxj-comment-item {
    border-bottom-color: rgba(148, 163, 184, .12);
}

[data-mdb-theme="dark"] .mxj-comment-name,
[data-mdb-theme="dark"] .mxj-comment-title {
    color: var(--mxj-color-slate-50);
}

[data-mdb-theme="dark"] .mxj-comment-meta,
[data-mdb-theme="dark"] .mxj-comment-action {
    color: var(--mxj-color-slate-400);
}

[data-mdb-theme="dark"] .mxj-comment-student-no {
    color: var(--mxj-color-slate-400);
}

[data-mdb-theme="dark"] .mxj-comment-tip,
[data-mdb-theme="dark"] .mxj-comment-page-btn:disabled {
    color: var(--mxj-color-slate-500);
}

[data-mdb-theme="dark"] .mxj-comment-rule-list,
[data-mdb-theme="dark"] .mxj-comment-rule-intro {
    color: var(--mxj-color-slate-300);
}

[data-mdb-theme="dark"] .mxj-comment-content {
    color: var(--mxj-color-slate-300);
}

[data-mdb-theme="dark"] .mxj-comment-emoji-btn {
    border-color: rgba(148, 163, 184, .22);
    color: var(--mxj-color-slate-400);
    background: var(--mxj-color-black);
}

[data-mdb-theme="dark"] .mxj-comment-emoji-btn:hover,
[data-mdb-theme="dark"] .mxj-comment-emoji-btn.is-active {
    border-color: rgba(83, 115, 236, .48);
    color: var(--mxj-color-blue-300);
    background: rgba(83, 115, 236, .14);
}

[data-mdb-theme="dark"] .mxj-comment-emoji-popover {
    border-color: rgba(148, 163, 184, .18);
    background: #222;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .38);
}

[data-mdb-theme="dark"] .mxj-comment-emoji-loading {
    color: var(--mxj-color-slate-400);
}

[data-mdb-theme="dark"] .mxj-comment-item.is-blocked .mxj-comment-content {
    color: var(--mxj-color-slate-500);
}

[data-mdb-theme="dark"] .mxj-comment-item.is-deleted .mxj-comment-content {
    color: var(--mxj-color-slate-500);
}

[data-mdb-theme="dark"] .mxj-comment-replies {
    border-left-color: rgba(148, 163, 184, .18);
}

.mxj-author-avatar {
    width: 22px;
    height: 22px;
    object-fit: cover;
}

/* OJ badge */
.oj-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    padding: 2px 8px;
    border-radius: 999px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ===============================
 * 表格：透明 + 暗黑兼容
 * =============================== */
/* 默认表格单元格透明，跟随卡片背景色 */
.mxj-table-transparent,
.mxj-table-transparent > :not(caption) > * > * {
    background-color: transparent !important;
}
/* 暗黑主题下统一使用表格背景变量，与 OJ 列表保持一致 */
[data-mdb-theme="dark"] .mxj-table-transparent,
[data-mdb-theme="dark"] .mxj-table-transparent > :not(caption) > * > * {
    background-color: var(--mxj-table-bg) !important;
}


.oj-table th,
.oj-table td {
    vertical-align: middle;
    white-space: nowrap;
}

.oj-table .oj-col-title {
    white-space: normal;
}

.oj-table pre {
    white-space: pre-wrap;
    word-break: break-word;
}

@media (max-width: 768px) {
    .oj-table th,
    .oj-table td {
        white-space: normal;
    }
}

.oj-row-highlight > * {
    background-color: var(--mxj-control-highlight) !important;
}

[data-mdb-theme="dark"] .oj-row-highlight > * {
    background-color: var(--mxj-control-highlight) !important;
}

/* ===============================
 * 卡片
 * =============================== */
.mxj-card {
    position: relative;
    background: var(--mxj-surface-2);
    border-radius: 12px;
    padding: 6px;
    box-shadow: none;
    transition: background-color .15s ease;
}

/* 扁平卡片由公共修饰类承接，避免页面重复维护装饰性外框和投影。 */
.mxj-card--flat,
.mxj-card--flat:hover,
.mxj-card--flat:focus-within {
    border: var(--mxj-panel-border) !important;
    box-shadow: none !important;
}

/* 课程和课节卡片共用信息行，保持图标、文字与暗黑主题口径一致。 */
.mxj-card-meta-row {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    min-width: 0;
    color: var(--mxj-text-muted);
    line-height: 1.5;
}

.mxj-card-meta-row > i {
    flex: 0 0 1rem;
    width: 1rem;
    margin-top: .16rem;
    color: var(--mxj-interactive-ink);
    text-align: center;
}

.mxj-card-meta-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mxj-course-card,
.mxj-lesson-card {
    overflow: hidden;
    padding: 0;
    color: var(--mxj-text-primary);
    border: var(--mxj-panel-border);
    background: var(--mxj-surface-2);
    box-shadow: var(--mxj-panel-shadow);
}

.mxj-course-card:hover {
    color: var(--mxj-text-primary);
}

.mxj-course-card .card-title,
.mxj-lesson-title {
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mxj-course-progress {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--mxj-surface-3);
}

.mxj-course-progress .progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mxj-secondary-500), var(--mxj-accent-500));
}

.mxj-course-next {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .75rem 1rem;
    color: var(--mxj-text-muted);
    border-top: 1px solid var(--mxj-border-2);
    background: linear-gradient(110deg, var(--mxj-card-tint) 0%, var(--mxj-surface-3) 68%);
    line-height: 1.45;
}

.mxj-course-next > i {
    flex: 0 0 auto;
    margin-top: .2rem;
    color: var(--mxj-interactive-ink);
}

.mxj-lesson-meta {
    display: grid;
    gap: .5rem;
    margin-top: 1rem;
}

.mxj-lesson-unscheduled {
    margin-top: 1rem;
    padding: .85rem;
    color: var(--mxj-text-muted);
    border: 1px dashed var(--mxj-border-1);
    border-radius: var(--mxj-radius-sm);
    background: var(--mxj-surface-3);
    text-align: center;
}

/* 正式空状态统一复用，替代历史测试文字和无引导的空白区域。 */
.mxj-empty-state {
    width: min(100%, 620px);
    margin: 2rem auto;
    padding: clamp(2rem, 6vw, 3.5rem) 1.25rem;
    color: var(--mxj-text-primary);
    text-align: center;
}

/*
 * 列表无记录提示只承担信息说明，不再呈现为独立内容卡片。
 * 使用独立修饰类覆盖页面级卡片规则，确保亮色、暗色及专题主题下都保持透明、无边框、无阴影。
 */
.mxj-list-empty-state,
.mxj-list-empty-state.card,
.mxj-list-empty-state.mxj-card,
.mxj-list-empty-state.mxj-panel {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.mxj-empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 1rem;
    color: var(--mxj-interactive-ink);
    border-radius: 18px;
    background: var(--mxj-control-highlight);
    font-size: 1.35rem;
}

[data-mdb-theme="dark"] .mxj-empty-state-icon {
    color: var(--mxj-interactive-ink);
    background: var(--mxj-control-highlight);
}

/* 桌面端不展示底部高频导航，避免与完整侧栏形成重复入口。 */
.mxj-mobile-nav {
    display: none;
}

.mxj-mobile-nav-inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: min(100%, 560px);
    height: 64px;
    margin: 0 auto;
}

.mxj-mobile-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    color: var(--mxj-text-muted);
    text-decoration: none;
}

.mxj-mobile-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    border-radius: 999px;
    font-size: 1rem;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

/* 移动端待办红点贴合图标右上角，不挤压底部导航文案。 */
.mxj-menu-indicator--mobile {
    top: 0;
    right: 0;
    border-color: var(--mxj-surface-2);
}

.mxj-mobile-nav-item.is-active .mxj-menu-indicator--mobile {
    border-color: var(--mxj-interactive-border);
}

/*
 * 创作工坊保留原有魔法棒图标，用彩色渐变表达创意的丰富与无限可能。
 * 渐变直接裁剪到字形，因此在侧栏、移动底栏及深色主题中都不需要额外图片资源。
 */
.mxj-creative-color-icon {
    color: transparent !important;
    background: linear-gradient(105deg, #ff4d8d 4%, #ff9f1c 24%, #22c55e 44%, #06b6d4 62%, #6366f1 80%, #a855f7 98%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 1px 2px rgba(99, 102, 241, .18));
}

/* 选中时取消彩色裁剪，颜色与阴影统一继承侧栏的全局选中规则。 */
#main-sidenav .sidenav-item.active .mxj-creative-color-icon {
    background: none;
    filter: none;
}

[data-mdb-theme="dark"] .mxj-creative-color-icon {
    filter: brightness(1.12) saturate(1.08) drop-shadow(0 1px 3px rgba(99, 102, 241, .35));
}

.mxj-mobile-nav-label {
    overflow: hidden;
    font-size: max(12px, .68rem);
    font-weight: 600;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mxj-mobile-nav-item.is-active {
    color: var(--mxj-interactive-ink);
}

.mxj-mobile-nav-item.is-active .mxj-mobile-nav-icon {
    color: var(--mxj-interactive-ink);
    background: var(--mxj-control-highlight);
    transform: none;
}

[data-mdb-theme="dark"] .mxj-mobile-nav-item.is-active {
    color: var(--mxj-interactive-ink);
}

[data-mdb-theme="dark"] .mxj-mobile-nav-item.is-active .mxj-mobile-nav-icon {
    background: var(--mxj-control-highlight);
}

a.mxj-card:hover {
    background: var(--mxj-control-highlight);
    transform: none;
    box-shadow: none;
}
.mxj-card img {
    border-radius: 12px;
}

[data-mdb-theme="dark"] .mxj-card {
    color: var(--card-text);
    border-color: transparent;
}

.mxj-work-cover-wrap {
    position: relative;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    outline: 2px solid transparent;
    outline-offset: -2px;
    transition: outline-color .18s ease;
}

.mxj-work-cover-wrap > .mxj-work-cover {
    display: block;
    width: 100%;
    /* width/height 属性只负责首屏占位，展示高度继续按作品封面的 4:3 比例自适应。 */
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 0 !important;
}

.mxj-work-cover-wrap::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    background-color: rgba(0, 0, 0, .46);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

[data-work-card]:hover .mxj-work-cover-wrap::after,
[data-work-card]:focus-within .mxj-work-cover-wrap::after,
.mxj-work-cover-wrap:hover::after {
    opacity: 1;
}

.mxj-work-cover-badges {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: calc(100% - 20px);
}

.mxj-work-world-cover-wrap::after {
    display: none;
}

.mxj-work-world-cover-wrap {
    border: 0;
}

.mxj-work-world-cover-wrap:hover,
.mxj-work-world-cover-wrap:focus-visible {
    outline-color: var(--mxj-interactive-border);
    box-shadow: none;
}

.mxj-work-cover-badge {
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
}

.mxj-work-cover-size-badge {
    color: var(--mxj-color-gray-800);
    border: 1px solid rgba(148, 163, 184, .32);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
}

[data-mdb-theme="dark"] .mxj-work-cover-size-badge {
    color: var(--mxj-color-gray-200);
    border-color: rgba(148, 163, 184, .28);
    background: var(--mxj-surface-2);
    background: color-mix(in srgb, var(--mxj-surface-2) 82%, transparent);
}

.mxj-work-cover-stats {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 20px);
    padding: 4px 8px;
    color: var(--mxj-color-slate-700);
    font-size: .78rem;
    line-height: 1;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .1);
}

.mxj-work-cover-stats span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.mxj-work-cover-stat-separator {
    color: var(--mxj-color-slate-400);
}

.mxj-work-cover-actions {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: clamp(8px, 2.2vw, 12px);
    width: min(88%, 220px);
    max-width: calc(100% - 24px);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -46%) scale(.96);
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.mxj-work-cover-actions form {
    display: inline-flex;
}

.mxj-work-cover-actions .btn {
    width: clamp(38px, 10vw, 46px);
    height: clamp(38px, 10vw, 46px);
    font-size: clamp(.95rem, 2.4vw, 1.08rem);
    background-color: rgba(255, 255, 255, 0.92);
}

[data-work-card]:hover .mxj-work-cover-actions,
[data-work-card]:focus-within .mxj-work-cover-actions,
.mxj-work-cover-wrap:hover .mxj-work-cover-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

[data-mdb-theme="dark"] .mxj-work-cover-actions .btn {
    background-color: var(--mxj-surface-2);
    background-color: color-mix(in srgb, var(--mxj-surface-2) 82%, transparent);
}

[data-mdb-theme="dark"] .mxj-work-cover-stats {
    color: var(--mxj-color-blue-100);
    background: var(--mxj-surface-2);
    background: color-mix(in srgb, var(--mxj-surface-2) 78%, transparent);
}

/* ===============================
 * 顶部导航
 * =============================== */
.nav-tools {
    --nav-tools-gap: .5rem;
    --nav-tools-divider-color: rgba(0, 0, 0, 0.1);
    --nav-tools-divider-color-dark: rgba(255, 255, 255, 0.2);
    flex: 0 0 auto;
    align-items: center;
    gap: var(--nav-tools-gap);
}

.mxj-nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: var(--mxj-text-muted);
    border: 1px solid var(--mxj-shell-header-border);
    border-radius: 12px;
    background: var(--mxj-surface-2);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.mxj-nav-icon-btn:hover {
    color: var(--mxj-interactive-ink);
    border-color: var(--mxj-shell-header-border);
    background: var(--mxj-control-highlight);
}

/* 主题入口与通知入口共同使用中性图标按钮，切换主题时不再获得独立强调色。 */
/* 顶部通知、主题、移动更多与账号菜单统一由 MDB Dropdown / Popper 负责展开与防溢出定位。 */
.mxj-nav-dropdown {
    position: relative;
}

.mxj-nav-dropdown-toggle {
    padding: 0;
    font-size: 1.15rem;
    background: transparent;
    cursor: pointer;
}

.mxj-nav-dropdown-toggle[aria-expanded="true"] {
    border-color: transparent;
    background: var(--mxj-control-highlight);
}

.mxj-user-menu-toggle {
    width: 42px;
    min-height: 42px;
    gap: 0;
    padding: 2px;
    color: var(--mxj-text-primary);
    border: 1px solid var(--mxj-shell-header-border) !important;
    border-radius: 12px;
    background: var(--mxj-surface-2) !important;
}

.mxj-user-menu-toggle:hover,
.mxj-user-menu-toggle[aria-expanded="true"] {
    color: var(--mxj-text-primary);
    background: var(--mxj-control-highlight) !important;
}

.mxj-user-avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    object-fit: cover;
    border: 0;
    border-radius: 10px !important;
    box-shadow: none;
}

.mxj-user-menu-meta {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: .2rem;
    min-width: 0;
    line-height: 1;
}

.mxj-user-menu-name {
    max-width: 9rem;
    overflow: hidden;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 固定角色标签的垂直盒模型，避免不同主题字体渲染造成上下留白不一致。 */
.mxj-user-role-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 16px;
    margin: 0;
    padding: 0 8px;
    font-size: 12px;
    line-height: 1;
}

.mxj-user-menu-chevron {
    display: none;
    margin-left: .1rem;
    font-size: 12px;
    opacity: .55;
    transition: transform .18s ease;
}

.mxj-user-menu-toggle[aria-expanded="true"] .mxj-user-menu-chevron {
    transform: rotate(180deg);
}

#main-navbar .dropdown-menu {
    margin-top: .55rem !important;
    padding: .45rem;
    border: 1px solid var(--mxj-border-2);
    border-radius: var(--mxj-radius-md);
    background: var(--mxj-surface-2);
    box-shadow: var(--mxj-shadow-md);
}

#main-navbar .dropdown-item {
    min-height: 42px;
    padding: .65rem .8rem;
    color: var(--mxj-text-primary);
    border-radius: 9px;
}

/* 账号菜单仅承载短账户操作，收窄默认下拉宽度以减少两侧空白。 */
#main-navbar #mxjUserMenu {
    min-width: 8.75rem;
}

/* 账号菜单以固定图标槽和轻量间距组成居中的图文整体，避免不同图标宽度造成视觉偏移。 */
#main-navbar #mxjUserMenu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
}

#main-navbar #mxjUserMenu .dropdown-item > i {
    width: 1rem;
    flex: 0 0 1rem;
    padding-right: 0 !important;
    text-align: center;
}

#main-navbar .dropdown-item:hover {
    color: var(--mxj-interactive-ink);
    background: var(--mxj-control-highlight);
}

/* 顶部站内通知使用独立紧凑下拉，未读数量固定在铃铛右上角。 */
.mxj-notification-menu-toggle {
    position: relative;
}

.mxj-notification-badge {
    position: absolute;
    top: 2px;
    right: 0;
    display: inline-flex;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid var(--mxj-surface-1);
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: max(12px, .6rem);
    font-weight: 800;
    line-height: 1;
    box-shadow: none;
}

.mxj-notification-badge[hidden] {
    display: none;
}

#main-navbar .mxj-notification-dropdown {
    width: 21.5rem;
    max-width: calc(100vw - 2rem);
    max-height: min(30rem, calc(100vh - var(--mxj-navbar-height, 64px) - 1rem));
    max-height: min(30rem, calc(100dvh - var(--mxj-navbar-height, 64px) - 1rem));
    padding: 0;
    overflow: hidden;
}

#main-navbar .mxj-notification-dropdown.show {
    display: flex;
    flex-direction: column;
}

@media (max-width: 767.98px) {
    .mxj-has-mobile-nav #main-navbar .mxj-notification-dropdown {
        /* 常规字号会增加列表高度，手机端需避开固定底栏并把滚动限制在通知列表内部。 */
        max-height: calc(100dvh - var(--mxj-navbar-height, 58px) - 72px - env(safe-area-inset-bottom));
    }
}

.mxj-notification-dropdown-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .62rem .75rem .55rem;
    border-bottom: 1px solid var(--mxj-border-1);
}

.mxj-notification-dropdown-head > span {
    display: inline-flex;
    align-items: center;
    gap: .36rem;
    color: var(--mxj-text-primary);
    font-size: .875rem;
    font-weight: 750;
}

.mxj-notification-dropdown-head > span i {
    color: var(--mxj-brand-500);
}

.mxj-notification-dropdown-head > strong {
    color: var(--mxj-text-muted);
    font-size: .75rem;
    font-weight: 650;
}

.mxj-notification-dropdown-body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.mxj-notification-dropdown-list {
    display: block;
    min-height: 0;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    overscroll-behavior: contain;
    scrollbar-gutter: auto;
}

.mxj-notification-dropdown-item {
    display: grid;
    width: 100%;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: start;
    gap: .5rem;
    min-height: 76px;
    /* 紧凑布局仍把滚动条安全距离放在通知项内部，避免正文或状态被覆盖。 */
    padding: .52rem 1rem .52rem .7rem;
    border: 0;
    border-bottom: 1px solid var(--mxj-border-1);
    background: transparent;
    color: var(--mxj-text-primary);
    text-align: left;
    cursor: pointer;
    transition: background-color .18s ease;
}

.mxj-notification-dropdown-item:hover,
.mxj-notification-dropdown-item:focus-visible {
    background: var(--mxj-brand-50);
}

.mxj-notification-dropdown-item:focus-visible {
    outline: 2px solid rgba(99, 102, 241, .32);
    outline-offset: -2px;
}

.mxj-notification-dropdown-item[aria-busy="true"] {
    cursor: wait;
    opacity: .68;
}

.mxj-notification-dropdown-icon,
.mxj-notification-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #4f46e5;
    background: rgba(99, 102, 241, .12);
}

.mxj-notification-dropdown-icon {
    width: 30px;
    height: 30px;
    margin-top: .04rem;
    font-size: max(12px, .72rem);
}

.mxj-notification-dropdown-icon.is-success,
.mxj-notification-modal-icon.is-success {
    color: #047857;
    background: rgba(16, 185, 129, .13);
}

.mxj-notification-dropdown-icon.is-info,
.mxj-notification-modal-icon.is-info {
    color: #0369a1;
    background: rgba(14, 165, 233, .13);
}

.mxj-notification-dropdown-icon.is-warning,
.mxj-notification-modal-icon.is-warning {
    color: #b45309;
    background: rgba(245, 158, 11, .14);
}

.mxj-notification-dropdown-icon.is-danger,
.mxj-notification-modal-icon.is-danger {
    color: #be123c;
    background: rgba(244, 63, 94, .13);
}

.mxj-notification-dropdown-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .12rem;
}

.mxj-notification-dropdown-title-row {
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: .4rem;
}

.mxj-notification-dropdown-title-row strong {
    min-width: 0;
    flex: 1 1 auto;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mxj-notification-dropdown-status {
    flex: 0 0 auto;
    padding: .08rem .32rem;
    border-radius: 999px;
    background: rgba(239, 68, 68, .1);
    color: #dc2626;
    font-size: max(12px, .6875rem);
    font-weight: 750;
    line-height: 1.3;
}

.mxj-notification-dropdown-item.is-read .mxj-notification-dropdown-status {
    background: rgba(100, 116, 139, .1);
    color: var(--mxj-text-muted);
}

.mxj-notification-dropdown-item.is-read .mxj-notification-dropdown-icon {
    opacity: .72;
}

.mxj-notification-dropdown-preview {
    color: var(--mxj-text-muted);
    font-size: .8125rem;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mxj-notification-dropdown-preview:empty {
    display: none;
}

.mxj-notification-dropdown-copy time {
    color: var(--mxj-text-muted);
    font-size: .75rem;
    line-height: 1.3;
}

.mxj-notification-dropdown-empty {
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .3rem;
    color: var(--mxj-text-muted);
    font-size: .8125rem;
}

.mxj-notification-dropdown-empty[hidden] {
    display: none;
}

.mxj-notification-dropdown-empty i {
    font-size: 1.05rem;
    opacity: .65;
}

.mxj-notification-dropdown-footer a {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .48rem .75rem;
    color: var(--mxj-brand-500);
    background: var(--mxj-surface-3);
    font-size: .8125rem;
    font-weight: 700;
    text-decoration: none;
}

.mxj-notification-dropdown-footer a:hover,
.mxj-notification-dropdown-footer a:focus-visible {
    color: var(--mxj-brand-600);
    background: var(--mxj-brand-50);
}

@media (pointer: coarse) {
    /* 触屏端保留 44px 点击高度，紧凑化只压缩装饰留白。 */
    .mxj-notification-dropdown-footer a {
        min-height: 44px;
    }
}

.mxj-notification-modal-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: .85rem;
}

.mxj-notification-modal-icon {
    width: 48px;
    height: 48px;
    font-size: 1.05rem;
}

.mxj-notification-modal-copy {
    min-width: 0;
}

.mxj-notification-modal-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: .65rem;
    color: var(--mxj-text-muted);
    font-size: max(12px, .72rem);
}

.mxj-notification-modal-meta > span {
    padding: .18rem .5rem;
    border-radius: 999px;
    background: var(--mxj-surface-3);
    color: var(--mxj-brand-500);
    font-weight: 700;
}

.mxj-notification-modal-content {
    color: var(--mxj-text-primary);
    font-size: .9rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

[data-mdb-theme="dark"] .mxj-notification-badge {
    border-color: #111827;
}

[data-mdb-theme="dark"] .mxj-notification-dropdown-item:hover,
[data-mdb-theme="dark"] .mxj-notification-dropdown-item:focus-visible,
[data-mdb-theme="dark"] .mxj-notification-dropdown-footer a:hover,
[data-mdb-theme="dark"] .mxj-notification-dropdown-footer a:focus-visible {
    background: var(--mxj-surface-3);
}

[data-mdb-theme="dark"] .mxj-notification-dropdown-status {
    background: rgba(248, 113, 113, .14);
    color: #fda4af;
}

[data-mdb-theme="dark"] .mxj-notification-dropdown-item.is-read .mxj-notification-dropdown-status {
    background: rgba(148, 163, 184, .12);
    color: var(--mxj-text-muted);
}

[data-mdb-theme="dark"] .mxj-notification-dropdown-icon.is-success,
[data-mdb-theme="dark"] .mxj-notification-modal-icon.is-success {
    color: #6ee7b7;
}

[data-mdb-theme="dark"] .mxj-notification-dropdown-icon.is-info,
[data-mdb-theme="dark"] .mxj-notification-modal-icon.is-info {
    color: #7dd3fc;
}

[data-mdb-theme="dark"] .mxj-notification-dropdown-icon.is-warning,
[data-mdb-theme="dark"] .mxj-notification-modal-icon.is-warning {
    color: #fcd34d;
}

[data-mdb-theme="dark"] .mxj-notification-dropdown-icon.is-danger,
[data-mdb-theme="dark"] .mxj-notification-modal-icon.is-danger {
    color: #fda4af;
}

[data-mdb-theme="dark"] .mxj-nav-icon-btn:hover,
[data-mdb-theme="dark"] #main-navbar .dropdown-item:hover {
    color: var(--mxj-interactive-ink);
    background: var(--mxj-control-highlight);
}

[data-mdb-theme="dark"] .mxj-nav-dropdown-toggle[aria-expanded="true"] {
    background: var(--mxj-control-highlight);
}

[data-mdb-theme="dark"] .mxj-navbar-toggle:hover,
[data-mdb-theme="dark"] .mxj-navbar-toggle:active {
    color: var(--mxj-interactive-ink);
    background: var(--mxj-control-highlight);
}
.nav-tools > .nav-item + .nav-item {
    position: relative;
    margin-left: 0;
    padding-left: 0;
}
.nav-tools > .nav-item + .nav-item::before {
    display: none;
}
[data-mdb-theme="dark"] .nav-tools > .nav-item + .nav-item::before {
    background: var(--nav-tools-divider-color-dark);
}

/* 顶部连续图标工具使用紧凑间距，只在工具组与用户区之间保留分隔线。 */
.nav-tools > .nav-item.mxj-nav-tool-compact {
    margin-left: 0;
    padding-left: 0;
}

.nav-tools > .nav-item.mxj-nav-tool-compact::before {
    display: none;
}

/* ===============================
 * Dashboard
 * =============================== */
/* 大型静态面板只在起始区域使用轻染色，主体仍保持 surface-2，且不增加外框、投影或悬浮。 */
.mxj-hero {
    background: linear-gradient(135deg, var(--mxj-card-tint) 0%, var(--mxj-dashboard-hero-bg) 62%);
    border: var(--mxj-panel-border);
    border-radius: var(--mxj-radius-lg);
    box-shadow: var(--mxj-panel-shadow);
}
.mxj-hero-title {
    font-family: "Source Han Serif SC", "Noto Serif SC", "STZhongsong", serif;
    color: var(--mxj-dashboard-ink);
    letter-spacing: 0.5px;
}
.mxj-hero-sub {
    color: var(--mxj-dashboard-muted);
}

.mxj-panel {
    background: linear-gradient(135deg, var(--mxj-card-tint) 0%, var(--mxj-dashboard-card-bg) 58%);
    border: var(--mxj-panel-border);
    border-radius: var(--mxj-radius-lg);
    box-shadow: var(--mxj-panel-shadow);
}
.mxj-panel-header {
    background: transparent;
    border-bottom: 0;
    color: var(--mxj-dashboard-ink);
}

.mxj-stat-card {
    background: linear-gradient(135deg, var(--mxj-card-tint) 0%, var(--mxj-dashboard-card-bg) 58%);
    border: var(--mxj-panel-border);
    border-radius: var(--mxj-radius-md);
    box-shadow: var(--mxj-panel-shadow);
}

/* 讲师首页仅保留背景分区，移除卡片描边与投影以保持完整的扁平化视觉。 */
.mxj-teacher-dashboard .mxj-stat-card,
.mxj-teacher-dashboard .mxj-panel,
.mxj-teacher-dashboard .mxj-timeline-card {
    border: 0;
    box-shadow: none;
}

.mxj-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mxj-stat-icon-color, var(--mxj-dashboard-icon-ink));
    background: var(--mxj-stat-icon-bg, var(--mxj-dashboard-accent));
}
.mxj-stat-icon.is-time {
    --mxj-stat-icon-bg: var(--mxj-dashboard-stat-time-bg);
}
.mxj-stat-icon.is-user {
    --mxj-stat-icon-bg: var(--mxj-dashboard-stat-user-bg);
}
.mxj-stat-icon.is-class {
    --mxj-stat-icon-bg: var(--mxj-dashboard-stat-class-bg);
}
.mxj-stat-icon.is-left {
    --mxj-stat-icon-bg: var(--mxj-dashboard-stat-left-bg);
}

.mxj-timeline {
    position: relative;
    padding: 0.75rem 1.25rem;
}
.mxj-timeline::before {
    content: "";
    position: absolute;
    left: 22px;
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: var(--mxj-dashboard-line);
}
.mxj-timeline-item {
    position: relative;
    padding-left: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.mxj-timeline-dot {
    position: absolute;
    left: 14px;
    top: 18px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--mxj-dashboard-card-bg);
    border: 3px solid var(--mxj-dashboard-accent);
}
.mxj-timeline-meta {
    color: var(--mxj-dashboard-muted);
}
.mxj-timeline-card {
    border: 1px solid var(--mxj-dashboard-border);
    border-radius: 12px;
    background: var(--mxj-dashboard-card-bg);
    padding: 12px 14px;
}
.mxj-status-badge {
    font-weight: 600;
    letter-spacing: 0.3px;
    background: var(--mxj-status-bg, var(--mxj-dashboard-accent));
    color: var(--mxj-status-color, var(--mxj-dashboard-badge-ink));
}

/* ===============================
 * 讲师今日工作台
 * =============================== */
.mxj-teacher-dashboard {
    --mxj-teacher-blue: var(--mxj-interactive-ink);
    --mxj-teacher-blue-soft: var(--mxj-secondary-soft);
    --mxj-teacher-green: #16a34a;
    --mxj-teacher-green-soft: #f0fdf4;
    --mxj-teacher-orange: #ea580c;
    --mxj-teacher-orange-soft: #fff7ed;
    --mxj-teacher-teal: #0f9f8f;
    --mxj-teacher-teal-soft: #ecfdf5;
    --mxj-teacher-purple: #7c3aed;
    --mxj-teacher-purple-soft: #f5f3ff;
    color: var(--mxj-text-primary);
}

.mxj-teacher-dashboard-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .25rem 0 .5rem;
}

.mxj-teacher-dashboard-date,
.mxj-teacher-panel-kicker {
    color: var(--mxj-teacher-blue);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.mxj-teacher-dashboard-title {
    margin: .3rem 0 .35rem;
    color: var(--mxj-text-primary);
    font-size: clamp(1.45rem, 2.2vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
}

.mxj-teacher-dashboard-subtitle,
.mxj-teacher-section-subtitle {
    color: var(--mxj-text-muted);
}

.mxj-teacher-dashboard-head-action {
    flex: 0 0 auto;
}

.mxj-teacher-metric {
    position: relative;
    min-height: 88px;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem;
    color: var(--mxj-text-primary);
    background: var(--mxj-dashboard-card-bg);
    border-radius: var(--mxj-radius-md);
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease;
}

a.mxj-teacher-metric:hover,
a.mxj-teacher-metric:focus-visible {
    color: var(--mxj-text-primary);
    background: var(--mxj-control-highlight);
    transform: none;
}

.mxj-teacher-metric:focus-visible,
.mxj-teacher-quick-action:focus-visible,
.mxj-teacher-today-item:focus-visible,
.mxj-teacher-data-details > summary:focus-visible {
    outline: 0;
    box-shadow: var(--mxj-focus-ring);
}

.mxj-teacher-metric-icon,
.mxj-teacher-quick-icon,
.mxj-teacher-data-summary-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mxj-teacher-blue);
    background: var(--mxj-teacher-blue-soft);
}

.mxj-teacher-metric-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 1.05rem;
}

.mxj-teacher-metric.is-orange .mxj-teacher-metric-icon {
    color: var(--mxj-teacher-orange);
    background: var(--mxj-teacher-orange-soft);
}

.mxj-teacher-metric.is-green .mxj-teacher-metric-icon,
.mxj-teacher-quick-action.is-green .mxj-teacher-quick-icon {
    color: var(--mxj-teacher-green);
    background: var(--mxj-teacher-green-soft);
}

.mxj-teacher-metric.is-teal .mxj-teacher-metric-icon,
.mxj-teacher-quick-action.is-teal .mxj-teacher-quick-icon {
    color: var(--mxj-teacher-teal);
    background: var(--mxj-teacher-teal-soft);
}

.mxj-teacher-quick-action.is-purple .mxj-teacher-quick-icon {
    color: var(--mxj-teacher-purple);
    background: var(--mxj-teacher-purple-soft);
}

.mxj-teacher-metric-content {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.mxj-teacher-metric-label {
    color: var(--mxj-text-muted);
    font-size: .78rem;
}

.mxj-teacher-metric-value {
    color: var(--mxj-text-primary);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
}

.mxj-teacher-metric-value small {
    margin-left: .2rem;
    color: var(--mxj-text-muted);
    font-size: .75rem;
    font-weight: 500;
}

.mxj-teacher-metric-arrow {
    color: var(--mxj-text-subtle);
    font-size: max(12px, .72rem);
}

.mxj-teacher-work-panel,
.mxj-teacher-data-details {
    background: var(--mxj-dashboard-card-bg);
    border-radius: var(--mxj-radius-lg);
}

.mxj-teacher-work-panel {
    min-height: 330px;
    overflow: hidden;
}

#teacher-today-lessons {
    scroll-margin-top: calc(var(--mxj-navbar-height) + 1rem);
}

.mxj-teacher-next-panel {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow: visible;
    color: var(--mxj-text-primary);
    /* 与今日课程等工作台面板使用同一纯色背景，避免亮色模式下渐变与页面底色混在一起。 */
    background: var(--mxj-dashboard-card-bg);
}

.mxj-teacher-panel-heading {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem .8rem;
}

.mxj-teacher-panel-title,
.mxj-teacher-section-title {
    color: var(--mxj-text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.mxj-teacher-next-content {
    min-height: 250px;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: .5rem 1.25rem 1.25rem;
}

.mxj-teacher-cancel-note {
    color: var(--mxj-text-muted);
    font-size: .78rem;
}

.mxj-teacher-next-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: start;
    margin: .15rem 0 .85rem;
}

.mxj-teacher-next-title {
    min-width: 0;
    margin: 0;
    color: var(--mxj-text-primary);
    /* 课节名称回落到普通内容标题层级，避免压过工作台区块标题和其它课程信息。 */
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5;
}

.mxj-teacher-next-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    color: var(--mxj-text-muted);
    font-size: .875rem;
}

.mxj-teacher-next-meta span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.mxj-teacher-next-students {
    position: relative;
    min-height: 58px;
    margin-top: 1.15rem;
}

.mxj-teacher-next-students-head {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .55rem;
    color: var(--mxj-text-muted);
    font-size: .78rem;
}

.mxj-teacher-next-students-head span {
    color: var(--mxj-text-secondary);
    font-weight: 600;
}

.mxj-teacher-next-students-head small {
    font-size: inherit;
}

.mxj-teacher-next-students.is-empty {
    min-height: 42px;
    display: flex;
    align-items: center;
    color: var(--mxj-text-muted);
    font-size: .8rem;
}

.mxj-teacher-next-students.is-empty span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.mxj-teacher-student-avatars {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 2px;
}

.mxj-teacher-student {
    position: relative;
    width: 34px;
    height: 34px;
    margin-left: -10px;
    padding: 0;
    flex: 0 0 auto;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.mxj-teacher-student:first-child {
    margin-left: 0;
}

.mxj-teacher-student > img {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: cover;
    background: var(--mxj-surface-2);
    border: 2px solid var(--mxj-dashboard-card-bg);
    border-radius: 50%;
    box-shadow: 0 1px 5px rgba(15, 23, 42, .15);
    transition: transform .18s ease, box-shadow .18s ease;
}

.mxj-teacher-student:hover,
.mxj-teacher-student:focus {
    z-index: 30;
    outline: 0;
}

.mxj-teacher-student:hover > img,
.mxj-teacher-student:focus > img {
    box-shadow: 0 4px 12px rgba(15, 23, 42, .2);
    transform: translateY(-2px);
}

.mxj-teacher-student:focus-visible > img {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .24), 0 4px 12px rgba(15, 23, 42, .2);
}

.mxj-teacher-student-popover {
    position: absolute;
    top: calc(100% + 9px);
    left: 50%;
    z-index: 40;
    width: 272px;
    padding: .75rem;
    display: none;
    align-items: flex-start;
    gap: .7rem;
    color: var(--mxj-text-secondary);
    text-align: left;
    background: var(--mxj-dashboard-card-bg);
    border: 1px solid var(--mxj-dashboard-border);
    border-radius: .75rem;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .18);
    transform: translateX(-50%);
}

.mxj-teacher-student-popover::before {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    content: "";
    background: var(--mxj-dashboard-card-bg);
    border-top: 1px solid var(--mxj-dashboard-border);
    border-left: 1px solid var(--mxj-dashboard-border);
    transform: translateX(-50%) rotate(45deg);
}

.mxj-teacher-student:hover .mxj-teacher-student-popover,
.mxj-teacher-student:focus .mxj-teacher-student-popover {
    display: flex;
}

.mxj-teacher-student-popover .mxj-teacher-student-popover-avatar {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    object-fit: cover;
    border: 0;
    border-radius: 50%;
}

.mxj-teacher-student-popover-main {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    font-size: .78rem;
    line-height: 1.4;
}

.mxj-teacher-student-popover-name {
    max-width: 100%;
    overflow: hidden;
    color: var(--mxj-text-primary);
    font-size: .86rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mxj-teacher-student-popover-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin: .35rem 0 .4rem;
}

.mxj-teacher-student-popover-badges .badge {
    font-size: max(12px, .68rem);
    line-height: 1.2;
}

.mxj-teacher-student-homework,
.mxj-teacher-student-homework-time {
    display: block;
    color: var(--mxj-text-muted);
}

.mxj-teacher-student-homework.is-completed {
    color: var(--mxj-teacher-green);
    font-weight: 600;
}

.mxj-teacher-student-homework.is-warning {
    color: var(--mxj-teacher-orange);
    font-weight: 600;
}

.mxj-teacher-student-homework-time {
    margin-top: .1rem;
}

.mxj-teacher-lesson-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .28rem .65rem;
    color: var(--mxj-teacher-orange);
    background: var(--mxj-teacher-orange-soft);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.mxj-teacher-lesson-status.is-current {
    color: var(--mxj-teacher-blue);
    background: var(--mxj-teacher-blue-soft);
}

.mxj-teacher-lesson-status.is-completed {
    color: var(--mxj-teacher-green);
    background: var(--mxj-teacher-green-soft);
}

.mxj-teacher-lesson-status.is-cancelled {
    color: var(--mxj-color-slate-500);
    background: var(--mxj-color-slate-100);
}

.mxj-teacher-panel-link {
    color: var(--mxj-teacher-blue);
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}

.mxj-teacher-panel-link:hover,
.mxj-teacher-panel-link:focus-visible {
    color: var(--mxj-color-blue-700);
    text-decoration: underline;
}

.mxj-teacher-today-list {
    padding: 0 .75rem .75rem;
}

.mxj-teacher-today-item {
    position: relative;
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) auto 14px;
    align-items: center;
    gap: .85rem;
    min-height: 70px;
    padding: .75rem .5rem .75rem .75rem;
    color: var(--mxj-text-primary);
    border-top: 1px solid var(--mxj-dashboard-line);
    border-radius: var(--mxj-radius-sm);
    text-decoration: none;
    transition: background-color .18s ease;
}

.mxj-teacher-today-item:hover,
.mxj-teacher-today-item:focus-visible {
    color: var(--mxj-text-primary);
    background: var(--mxj-control-highlight);
}

.mxj-teacher-today-item.is-cancelled {
    opacity: .66;
}

.mxj-teacher-today-time {
    color: var(--mxj-text-primary);
    font-size: .82rem;
    font-weight: 700;
    white-space: nowrap;
}

.mxj-teacher-today-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

.mxj-teacher-today-main strong,
.mxj-teacher-today-main small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mxj-teacher-today-main strong {
    color: var(--mxj-text-primary);
    font-size: .9rem;
}

.mxj-teacher-today-main small {
    color: var(--mxj-text-muted);
}

.mxj-teacher-today-main small i {
    margin-right: .35rem;
}

.mxj-teacher-today-arrow {
    color: var(--mxj-text-subtle);
    font-size: max(12px, .7rem);
}

.mxj-teacher-empty-state {
    min-height: 245px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.5rem;
    text-align: center;
}

.mxj-teacher-empty-state.is-compact {
    min-height: 240px;
}

.mxj-teacher-empty-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .85rem;
    color: var(--mxj-teacher-blue);
    background: var(--mxj-teacher-blue-soft);
    border-radius: 16px;
    font-size: 1.1rem;
}

.mxj-teacher-empty-state h3 {
    margin-bottom: .35rem;
    color: var(--mxj-text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.mxj-teacher-empty-state p {
    max-width: 320px;
    margin-bottom: 1rem;
    color: var(--mxj-text-muted);
    font-size: .82rem;
}

.mxj-teacher-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .8rem;
}

.mxj-teacher-section-title {
    margin-bottom: .15rem;
}

.mxj-teacher-section-subtitle {
    margin: 0;
    font-size: .78rem;
}

.mxj-teacher-quick-action {
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    color: var(--mxj-text-primary);
    background: var(--mxj-dashboard-card-bg);
    border-radius: var(--mxj-radius-md);
    text-decoration: none;
    transition: transform .18s ease, background-color .18s ease;
}

.mxj-teacher-quick-action:hover,
.mxj-teacher-quick-action:focus-visible {
    color: var(--mxj-text-primary);
    background: var(--mxj-control-highlight);
    transform: none;
}

.mxj-teacher-quick-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.mxj-teacher-quick-content {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .15rem;
}

.mxj-teacher-quick-content strong {
    color: var(--mxj-text-primary);
    font-size: .9rem;
}

.mxj-teacher-quick-content small {
    overflow: hidden;
    color: var(--mxj-text-muted);
    font-size: max(12px, .74rem);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mxj-teacher-quick-arrow {
    color: var(--mxj-text-subtle);
    font-size: max(12px, .72rem);
}

.mxj-teacher-data-details {
    overflow: hidden;
}

.mxj-teacher-data-details > summary {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.mxj-teacher-data-details > summary::-webkit-details-marker {
    display: none;
}

.mxj-teacher-data-summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.mxj-teacher-data-details > summary > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.mxj-teacher-data-details > summary strong {
    color: var(--mxj-text-primary);
    font-size: .9rem;
}

.mxj-teacher-data-details > summary small,
.mxj-teacher-data-summary-action {
    color: var(--mxj-text-muted);
    font-size: max(12px, .74rem);
}

.mxj-teacher-data-summary-action {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
}

.mxj-teacher-data-summary-action i {
    transition: transform .18s ease;
}

.mxj-teacher-data-details[open] .mxj-teacher-data-summary-action i {
    transform: rotate(180deg);
}

.mxj-teacher-data-content {
    padding: 0 1rem 1rem;
}

.mxj-teacher-data-group {
    height: 100%;
    padding: 1rem;
    background: var(--mxj-surface-1);
    border-radius: var(--mxj-radius-md);
}

.mxj-teacher-data-group h3 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .85rem;
    color: var(--mxj-text-primary);
    font-size: .88rem;
    font-weight: 700;
}

.mxj-teacher-data-group h3 i {
    color: var(--mxj-teacher-blue);
}

.mxj-teacher-data-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.mxj-teacher-data-grid > div,
.mxj-teacher-progress-list > div {
    min-width: 0;
    padding: .7rem .75rem;
    background: var(--mxj-dashboard-card-bg);
    border-radius: var(--mxj-radius-sm);
}

.mxj-teacher-data-grid > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.mxj-teacher-data-grid span,
.mxj-teacher-progress-list span,
.mxj-teacher-progress-list small {
    color: var(--mxj-text-muted);
    font-size: .76rem;
}

.mxj-teacher-data-grid strong,
.mxj-teacher-progress-list strong {
    color: var(--mxj-text-primary);
    font-size: .82rem;
    white-space: nowrap;
}

.mxj-teacher-progress-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}

.mxj-teacher-progress-list small {
    display: block;
    margin-top: .3rem;
}

[data-mdb-theme="dark"] .mxj-teacher-dashboard {
    --mxj-teacher-blue-soft: rgba(59, 130, 246, .14);
    --mxj-teacher-green-soft: rgba(34, 197, 94, .13);
    --mxj-teacher-orange-soft: rgba(249, 115, 22, .14);
    --mxj-teacher-teal-soft: rgba(20, 184, 166, .14);
    --mxj-teacher-purple-soft: rgba(139, 92, 246, .14);
}

[data-mdb-theme="dark"] .mxj-teacher-lesson-status.is-cancelled {
    color: var(--mxj-color-slate-400);
    background: rgba(148, 163, 184, .12);
}

[data-mdb-theme="dark"] a.mxj-teacher-metric:hover,
[data-mdb-theme="dark"] a.mxj-teacher-metric:focus-visible,
[data-mdb-theme="dark"] .mxj-teacher-quick-action:hover,
[data-mdb-theme="dark"] .mxj-teacher-quick-action:focus-visible,
[data-mdb-theme="dark"] .mxj-teacher-today-item:hover,
[data-mdb-theme="dark"] .mxj-teacher-today-item:focus-visible {
    background: var(--mxj-surface-3);
}

@media (max-width: 991.98px) {
    .mxj-teacher-work-panel {
        min-height: 0;
    }

    .mxj-teacher-next-content {
        min-height: 230px;
    }
}

@media (max-width: 767.98px) {
    .mxj-teacher-dashboard-head {
        align-items: stretch;
        flex-direction: column;
        gap: .8rem;
    }

    .mxj-teacher-dashboard-head-action {
        align-self: flex-start;
    }

    .mxj-teacher-metric {
        min-height: 82px;
        padding: .8rem;
    }

    .mxj-teacher-metric-icon {
        width: 38px;
        height: 38px;
    }

    .mxj-teacher-metric-value {
        font-size: 1.25rem;
    }

    .mxj-teacher-today-item {
        grid-template-columns: 76px minmax(0, 1fr) auto;
        gap: .55rem;
    }

    .mxj-teacher-today-arrow {
        display: none;
    }

    .mxj-teacher-quick-action {
        align-items: flex-start;
        min-height: 108px;
        flex-direction: column;
        gap: .55rem;
    }

    .mxj-teacher-quick-arrow {
        display: none;
    }

    .mxj-teacher-quick-content small {
        white-space: normal;
    }

    .mxj-teacher-data-grid,
    .mxj-teacher-progress-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .mxj-teacher-dashboard-title {
        font-size: 1.35rem;
    }

    .mxj-teacher-metric {
        align-items: flex-start;
        min-height: 104px;
        flex-direction: column;
        gap: .45rem;
    }

    .mxj-teacher-metric-arrow {
        position: absolute;
        right: 1rem;
        margin-top: .7rem;
    }

    .mxj-teacher-panel-heading {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .mxj-teacher-next-content {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    /* 手机端将学员浮层固定在视口底部，避免首尾头像的浮层撑出横向滚动。 */
    .mxj-teacher-student-popover {
        position: fixed;
        top: auto;
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
        transform: none;
    }

    .mxj-teacher-student-popover::before {
        display: none;
    }

    .mxj-teacher-today-list {
        padding-right: .5rem;
        padding-left: .5rem;
    }

    .mxj-teacher-today-item {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: .8rem .5rem;
    }

    .mxj-teacher-today-time {
        grid-column: 1 / -1;
    }

    .mxj-teacher-data-summary-action {
        font-size: 0; /* study-font-zero-ok：窄屏仅隐藏操作文字，子图标保持至少 12px。 */
    }

    .mxj-teacher-data-summary-action i {
        font-size: .75rem;
    }
}

@media (min-width: 1200px) and (max-height: 800px) {
    .mxj-teacher-dashboard-head {
        padding-top: 0;
    }

    .mxj-teacher-metric {
        min-height: 80px;
        padding-top: .75rem;
        padding-bottom: .75rem;
    }

    .mxj-teacher-work-panel {
        min-height: 306px;
    }

    .mxj-teacher-next-content {
        min-height: 226px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mxj-teacher-dashboard .mxj-teacher-metric,
    .mxj-teacher-dashboard .mxj-teacher-quick-action,
    .mxj-teacher-dashboard .mxj-teacher-data-summary-action i {
        transition: none;
    }
}

/*
 * 深空黑暗色细节：只重映射普通界面与交互反馈；成功、警告、错误等业务状态色
 * 继续由组件自身维护。静态卡片保持扁平，不额外引入描边或投影。
 */
/* 星舰黑移除普通组件中的紫色工具语义，统一收敛为炭灰材质与小面积主题信号色。 */
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-purple:not(:disabled):not(.disabled),
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-badge-purple {
    color: var(--mxj-accent-on) !important;
    border-color: var(--mxj-accent-500) !important;
    background: var(--mxj-accent-500) !important;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-purple:not(:disabled):not(.disabled):hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-purple:not(:disabled):not(.disabled):active {
    color: var(--mxj-accent-on) !important;
    border-color: var(--mxj-accent-500) !important;
    background: var(--mxj-accent-500) !important;
    background: color-mix(in srgb, var(--mxj-accent-500) 82%, var(--mxj-secondary-500)) !important;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-outline-purple:not(:disabled):not(.disabled) {
    color: var(--mxj-secondary-500) !important;
    border-color: var(--mxj-secondary-500) !important;
    background: transparent !important;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-outline-purple:not(:disabled):not(.disabled):hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-outline-purple:not(:disabled):not(.disabled):active {
    color: var(--mxj-secondary-500) !important;
    border-color: var(--mxj-secondary-500) !important;
    background: var(--mxj-secondary-soft) !important;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-quick-action.is-purple .mxj-teacher-quick-icon {
    color: var(--mxj-secondary-500);
    background: var(--mxj-secondary-soft);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-stat-icon.is-left {
    --mxj-stat-icon-bg: var(--mxj-secondary-500);
    --mxj-stat-icon-color: var(--mxj-accent-on);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-blue:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    color: var(--mxj-accent-on) !important;
    border-color: var(--mxj-accent-500) !important;
    background: var(--mxj-accent-500) !important;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-blue:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-blue:not(:disabled):not(.disabled):not([aria-disabled="true"]):active {
    color: var(--mxj-accent-on) !important;
    border-color: var(--mxj-accent-500) !important;
    background: var(--mxj-accent-500) !important;
    background: color-mix(in srgb, var(--mxj-accent-500) 86%, var(--mxj-surface-1)) !important;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-blue:not(:disabled):not(.disabled):not([aria-disabled="true"]):focus-visible {
    outline: 0;
    box-shadow: var(--mxj-focus-ring) !important;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-blue:disabled,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-blue.disabled,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-btn-blue[aria-disabled="true"] {
    color: var(--mxj-text-subtle) !important;
    border-color: var(--mxj-border-1) !important;
    background: var(--mxj-surface-3) !important;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-page-head {
    border-color: var(--mxj-border-2);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-comment-head,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-comment-item,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-comment-replies {
    border-color: var(--mxj-border-2);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-comment-emoji-btn {
    color: var(--mxj-text-muted);
    border-color: var(--mxj-border-1);
    background: var(--mxj-surface-1);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-comment-emoji-btn:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-comment-emoji-btn.is-active {
    color: var(--mxj-secondary-500);
    border-color: var(--mxj-interactive-border);
    background: var(--mxj-control-highlight);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-comment-emoji-popover {
    border-color: var(--mxj-border-1);
    background: var(--mxj-surface-2);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .oj-row-highlight > * {
    background-color: var(--mxj-control-highlight) !important;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-card {
    color: var(--mxj-text-primary);
    border-color: transparent;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-card--flat,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-card--flat:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-card--flat:focus-within {
    border-color: transparent !important;
    box-shadow: none !important;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-empty-state-icon,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-mobile-nav-item.is-active {
    color: var(--mxj-interactive-ink);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-empty-state-icon,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-mobile-nav-item.is-active .mxj-mobile-nav-icon {
    background: var(--mxj-control-highlight);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-work-world-cover-wrap:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-work-world-cover-wrap:focus-visible {
    outline-color: var(--mxj-interactive-border);
    box-shadow: none;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] #main-navbar .dropdown-menu {
    color: var(--mxj-text-primary);
    border-color: var(--mxj-border-1);
    background: var(--mxj-surface-2);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-nav-icon-btn:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] #main-navbar .dropdown-item:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] #main-navbar .dropdown-item:focus-visible,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-nav-dropdown-toggle[aria-expanded="true"],
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-navbar-toggle:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-navbar-toggle:active {
    color: var(--mxj-interactive-ink);
    border-color: transparent;
    background: var(--mxj-control-highlight);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-badge {
    border-color: var(--mxj-surface-0);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-dropdown-head,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-dropdown-footer {
    border-color: var(--mxj-border-2);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-dropdown-head > span i,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-dropdown-footer a {
    color: var(--mxj-secondary-500);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-dropdown-item:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-dropdown-item:focus-visible,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-dropdown-footer a:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-dropdown-footer a:focus-visible {
    color: var(--mxj-secondary-500);
    background: var(--mxj-control-highlight);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-dropdown-item:focus-visible {
    outline-color: var(--mxj-interactive-border);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-dropdown-icon:not(.is-success):not(.is-info):not(.is-warning):not(.is-danger),
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-notification-modal-icon:not(.is-success):not(.is-info):not(.is-warning):not(.is-danger) {
    color: var(--mxj-secondary-500);
    background: var(--mxj-secondary-soft);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-dashboard {
    --mxj-teacher-blue: var(--mxj-secondary-500);
    --mxj-teacher-blue-soft: var(--mxj-secondary-soft);
    --mxj-teacher-purple: var(--mxj-secondary-500);
    --mxj-teacher-purple-soft: var(--mxj-secondary-soft);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-dashboard .mxj-stat-card,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-dashboard .mxj-panel,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-dashboard .mxj-timeline-card,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-metric,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-work-panel,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-data-details,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-quick-action {
    border: 0;
    background: var(--mxj-surface-2);
    box-shadow: none;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-data-group {
    border: 0;
    background: var(--mxj-surface-1);
    box-shadow: none;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-data-grid > div,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-progress-list > div {
    border: 0;
    background: var(--mxj-surface-2);
    box-shadow: none;
}

/* 星舰黑的大型面板保留金属炭灰轻染，小型内容卡继续使用纯表面色控制彩色面积。 */
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-dashboard .mxj-stat-card,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-dashboard .mxj-panel,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-dashboard .mxj-timeline-card {
    background: linear-gradient(135deg, var(--mxj-card-tint) 0%, var(--mxj-surface-2) 58%);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] a.mxj-teacher-metric:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] a.mxj-teacher-metric:focus-visible,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-quick-action:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-quick-action:focus-visible,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-today-item:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-today-item:focus-visible {
    background: var(--mxj-control-highlight);
    transform: none;
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-metric:focus-visible,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-quick-action:focus-visible,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-today-item:focus-visible,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-data-details > summary:focus-visible {
    outline: 0;
    box-shadow: var(--mxj-focus-ring);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-today-item {
    border-color: var(--mxj-border-2);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-panel-link,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-data-group h3 i {
    color: var(--mxj-secondary-500);
}

:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-panel-link:hover,
:root[data-mxj-theme-id="cosmic-black"][data-mdb-theme="dark"] .mxj-teacher-panel-link:focus-visible {
    color: var(--mxj-accent-500);
}

/*
 * 学习端 MDB Tooltip 全局视觉规范。
 * 只覆盖浮层表现，不修改 MDB 源码与定位逻辑；页面级 customClass 仍可继续覆盖强调色。
 */
.tooltip {
    --mxj-tooltip-accent: var(--mxj-accent-500, #60a5fa);
    --mxj-tooltip-bg: rgba(15, 23, 42, 0.94);
    --mxj-tooltip-border: color-mix(in srgb, var(--mxj-tooltip-accent) 32%, rgba(255, 255, 255, 0.16));
    --bs-tooltip-opacity: 1;
    --mdb-tooltip-opacity: 1;
    z-index: 1090;
}

.tooltip.show {
    opacity: 1;
}

.tooltip:not(.mxj-user-info-medal-tooltip) .tooltip-inner {
    width: max-content;
    min-width: 44px;
    max-width: min(320px, calc(100vw - 24px));
    padding: 0.48rem 0.68rem;
    overflow: hidden;
    border: 1px solid var(--mxj-tooltip-border);
    border-radius: 11px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--mxj-tooltip-accent) 12%, transparent), transparent 58%),
        var(--mxj-tooltip-bg);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px) saturate(125%);
    -webkit-backdrop-filter: blur(14px) saturate(125%);
    color: #f8fafc;
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.008em;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
}

.tooltip:not(.mxj-user-info-medal-tooltip) .tooltip-inner img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--mxj-tooltip-bg);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--mxj-tooltip-bg);
}

.tooltip.bs-tooltip-start .tooltip-arrow::before,
.tooltip[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--mxj-tooltip-bg);
}

.tooltip.bs-tooltip-end .tooltip-arrow::before,
.tooltip[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--mxj-tooltip-bg);
}

.tooltip:not(.mxj-user-info-medal-tooltip).fade .tooltip-inner {
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.tooltip:not(.mxj-user-info-medal-tooltip).fade:not(.show) .tooltip-inner {
    opacity: 0;
    transform: translateY(2px) scale(0.97);
}

[data-mdb-theme="dark"] .tooltip,
:root[data-mdb-theme="dark"] .tooltip {
    --mxj-tooltip-bg: rgba(2, 6, 23, 0.96);
    --mxj-tooltip-border: color-mix(in srgb, var(--mxj-tooltip-accent) 38%, rgba(148, 163, 184, 0.2));
}

@media (prefers-reduced-motion: reduce) {
    .tooltip:not(.mxj-user-info-medal-tooltip).fade .tooltip-inner {
        transition: none;
    }
}