/* ===============================
 * 亮色（默认）
 * =============================== */
:root {
    /* ========= 基础色板 ========= */
    --mxj-brand-500: #4569ff;
    --mxj-brand-50:  #F4F6FA;
    --mxj-brand-100: #E3F2FD;
    --mxj-brand-400: #5d7aff;
    --mxj-brand-600: #3858e8;
    --mxj-brand-900: #3a3baf;
    --mxj-brand-1000: #3c405f;
    --mxj-brand-rgb: 69, 105, 255;

    /* ========= 应用级设计变量 ========= */
    --mxj-font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --mxj-navbar-height: 70px;
    --mxj-content-max-width: 1680px;
    --mxj-content-padding-x: clamp(1rem, 2.4vw, 2.5rem);
    --mxj-content-padding-y: clamp(1.25rem, 2.4vw, 2.5rem);
    --mxj-content-viewport-gap: .5rem;
    --mxj-radius-sm: 10px;
    --mxj-radius-md: 14px;
    --mxj-radius-lg: 20px;
    --mxj-shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .04);
    --mxj-shadow-md: 0 16px 40px rgba(15, 23, 42, .08);
    --mxj-focus-ring: 0 0 0 3px rgba(69, 105, 255, .22);

    /*
     * 普通次级操作统一消费这一组语义变量，页面不得再各自写死 MDB 蓝。
     * 命名主题会覆盖同名变量；经典蓝在此提供完整、可直接使用的默认值。
     */
    --mxj-interactive-ink: var(--mxj-brand-600);
    --mxj-interactive-ink-strong: var(--mxj-brand-900);
    --mxj-interactive-border: var(--mxj-brand-500);
    --mxj-interactive-soft: var(--mxj-brand-50);
    --mxj-interactive-soft-strong: var(--mxj-brand-100);

    /*
     * 主题强调色只负责品牌交互与环境层次；成功、警告、错误等业务状态继续使用独立色板。
     * 默认值完整复刻旧版经典蓝，命名主题只需覆盖这一组即可消除页面里的蓝色残留。
     */
    --mxj-page-head-accent-strong: #7357f6;
    --mxj-accent-soft: rgba(37, 99, 235, .16);
    --mxj-accent-ink: #3657d6;
    --mxj-accent-hover: rgba(69, 105, 255, .1);
    --mxj-accent-border: rgba(37, 99, 235, .2);
    --mxj-accent-row-hover: #f8fbff;
    --mxj-divider-soft: #edf1f5;
    --mxj-link-strong: #3157df;
    --mxj-feature-head-accent: #4169e1;
    --mxj-feature-head-accent-strong: #7357f6;
    --mxj-feature-head-glow: rgba(65, 105, 225, .13);
    --mxj-progress-accent-end: #7c5cff;
    --mxj-shell-glow: rgba(69, 105, 255, .08);
    --mxj-shell-glow-mobile: rgba(69, 105, 255, .07);
    --mxj-page-head-glow: rgba(69, 105, 255, .12);
    --mxj-page-head-shadow: rgba(69, 105, 255, .2);
    --mxj-navbar-shadow: 0 1px 0 rgba(15, 23, 42, .02), 0 8px 24px rgba(15, 23, 42, .04);
    --mxj-sidenav-shadow: 12px 0 32px rgba(15, 23, 42, .035);
    --mxj-sidenav-drawer-shadow: 18px 0 46px rgba(15, 23, 42, .18);
    --mxj-mobile-nav-shadow: 0 -10px 30px rgba(15, 23, 42, .08);
    --mxj-backdrop: rgba(15, 23, 42, .48);

    /*
     * Study 共享壳层变量。
     * 业务卡片继续使用 surface / brand 语义；这一组只负责侧栏、顶部栏与外框，
     * 避免为了复刻壳层结构而污染页面自身的布局和主题颜色。
     */
    --mxj-shell-gap: 18px;
    --mxj-shell-radius: 24px;
    --mxj-shell-sidenav-start: #192e60;
    --mxj-shell-sidenav-end: #10234e;
    --mxj-shell-sidenav-base: #142858;
    --mxj-shell-sidenav-ink: #f4f7ff;
    --mxj-shell-sidenav-muted: #aebfe4;
    --mxj-shell-sidenav-hover: rgba(255, 255, 255, .08);
    --mxj-shell-sidenav-active: #33456f;
    /* 选中菜单标记跟随当前主题的品牌强调色，不再使用跨主题固定点缀色。 */
    --mxj-shell-sidenav-marker: var(--mxj-brand-400);
    /* 品牌黄不跟随命名主题变化，确保所有主题下的 LOGO 识别保持一致。 */
    --mxj-shell-logo-bg: #ffd269;
    --mxj-shell-logo-ink: #3a2900;
    --mxj-shell-status: #39bff0;
    --mxj-shell-header-bg: #fdfeff;
    --mxj-shell-header-border: #dbe6f4;
    --mxj-shell-frame-border: #dbe6f4;
    --mxj-shell-frame-shadow: 0 18px 46px rgba(30, 50, 90, .11);

    /*
     * 静态内容面板遵循全局扁平化偏好；浮层与键盘焦点继续使用独立阴影变量。
     * 页面如需表达层次，应优先使用背景色、留白和圆角，不再依赖外框或投影。
     */
    --mxj-panel-border: 0;
    --mxj-panel-shadow: none;

    --mxj-neutral-0:   #FFFFFF;
    --mxj-neutral-50:  #F0F0F0;
    --mxj-neutral-100: #EEEEEE;
    --mxj-neutral-200: #E5E7EB;
    --mxj-neutral-300: #D7D7D7;
    --mxj-neutral-900: #262626;
    --mxj-black:       #000000;

    --mxj-slate-900: rgba(31, 41, 55, 1);
    --mxj-slate-500: rgba(107, 114, 128, 1);


    /* ========= 语义层 ========= */
    --mxj-surface-0: #f8fafc;
    --mxj-surface-1: #f4f7fb;
    --mxj-surface-2: #ffffff;
    --mxj-surface-3: #f0f0f0;

    --mxj-border-1: #e2e8f0;
    --mxj-border-2: #e8edf4;
    --mxj-border-3: rgba(226, 232, 240, .78);

    --mxj-text-primary: #172033;
    --mxj-text-muted:   #5f6b7c;
    --mxj-text-subtle:  #7b8798;
    --mxj-text-secondary: var(--mxj-text-muted);

    /* 兼容仍使用旧语义名的独立页面，实际颜色统一回到当前主题变量。 */
    --mxj-primary: var(--mxj-brand-500);
    --mxj-body-bg: var(--mxj-surface-1);
    --mxj-border-color: var(--mxj-border-1);

    /* ========= 通用颜色 ========= */
    --mxj-color-blue:      var(--mxj-brand-500);
    --mxj-color-blue-900:  var(--mxj-brand-900);
    --mxj-color-green: #40b640;
    --mxj-color-green-900: #237523;
    --mxj-color-purple: #8b5cf6;
    --mxj-color-purple-900: #6d28d9;
    --mxj-color-red: #e5484d;
    --mxj-color-red-900: #b4232a;
    --mxj-color-yellow: #facc15;
    --mxj-color-yellow-900: #d97706;
    --mxj-color-black: #111827;
    --mxj-color-black-900: #000000;
    --mxj-color-gray: #e0e0e0;
    --mxj-color-gray-900: #b1aeae;
    --mxj-color-white:     var(--mxj-neutral-0);

    /*
     * 跨页面基础色阶。
     *
     * 页面级样式优先引用这些原子变量，再在自身作用域内映射为业务语义变量；
     * 禁止继续为相同的 Slate / Blue 色值重复声明新的十六进制常量。
     */
    --mxj-color-slate-50: #f8fafc;
    --mxj-color-slate-100: #f1f5f9;
    --mxj-color-slate-200: #e2e8f0;
    --mxj-color-slate-300: #cbd5e1;
    --mxj-color-slate-400: #94a3b8;
    --mxj-color-slate-500: #64748b;
    --mxj-color-slate-600: #475569;
    --mxj-color-slate-700: #334155;
    --mxj-color-slate-800: #1e293b;
    --mxj-color-slate-900: #0f172a;
    --mxj-color-gray-200: #e5e7eb;
    --mxj-color-gray-500: #6b7280;
    --mxj-color-gray-800: #1f2937;
    --mxj-color-blue-50: #eff6ff;
    --mxj-color-blue-100: #dbeafe;
    --mxj-color-blue-200: #bfdbfe;
    --mxj-color-blue-300: #93c5fd;
    --mxj-color-blue-400: #60a5fa;
    --mxj-color-blue-500: #3b82f6;
    --mxj-color-blue-600: #2563eb;
    --mxj-color-blue-700: #1d4ed8;
    --mxj-color-green-700: #15803d;
    --mxj-color-red-600: #dc2626;

    /* 学习端一级页面统一使用的教育蓝，避免每个页面重复维护标题图标色。 */
    --mxj-education-accent: #3b7cff;
    --mxj-education-accent-soft: #eef4ff;
    --mxj-education-accent-border: var(--mxj-color-blue-100);

    /* ========= 背景 ========= */
    --bg-color: var(--mxj-surface-1);

    /* ========= 侧边栏 ========= */
    --sidenav-bg-color: rgba(255, 255, 255, .96);
    --sidenav-border-color: var(--mxj-border-1);
    /* ========= 导航栏 ========= */
    --navbar-bg-color: rgba(255, 255, 255, .86);
    --navbar-border-color: var(--mxj-border-3);

    /* ========= 内容区域 ========= */
    --bg-main-content: transparent;

    /* ========= 菜单 ========= */
    --bg-menu-bg:        #eef2f7;
    --bg-menu-hover:     rgba(69, 105, 255, .1);
    --bg-menu-active:    var(--mxj-brand-500);

    --text-menu:         var(--mxj-text-primary);
    --text-menu-muted:   var(--mxj-text-subtle);
    --text-menu-bottom:  var(--mxj-text-subtle);

    --menu-hr:           #b5c3d5;
    --menu-border-right: var(--mxj-border-2);

    /* ========= 卡片 ========= */
    --card-bg: var(--mxj-surface-2);
    --card-text: var(--mxj-slate-900);

    /* ========= 分页 ========= */
    --page-link-color: var(--mxj-slate-900);
    --page-link-border-color: var(--mxj-neutral-300);
    --page-link-hover-color: var(--mxj-brand-500);
    --page-link-hover-border-color: var(--mxj-brand-500);
    --page-link-hover-background-color: var(--mxj-brand-50);
    --page-link-active-color: var(--mxj-neutral-0);
    --page-link-active-border-color: var(--mxj-brand-500);
    --page-link-active-background-color: var(--mxj-brand-500);
    --page-link-disabled-color: var(--mxj-neutral-300);
    --page-link-disabled-border-color: var(--mxj-black);
    --page-link-disabled-no-color: var(--mxj-neutral-300);
    --page-link-disabled-no-border-color: var(--mxj-neutral-200);

    /* ========= 筛选 ========= */
    /* 未选中项沿用主题轻染底色，悬停加深；选中态继续保留原有强调色。 */
    --filter-color: var(--mxj-black);
    --filter-background-color: var(--mxj-control-highlight);
    --filter-hover-color: var(--mxj-text-primary);
    --filter-hover-bg-color: color-mix(in srgb, var(--mxj-control-highlight) 90%, var(--mxj-text-primary));
    --filter-active-color: var(--mxj-neutral-0);
    --filter-active-bg-color: var(--mxj-brand-500);

    /* ========= 滚动条 ========= */
    --scrollbar-size:         6px;
    --scrollbar-thumb:        rgba(0,0,0,0.4);
    --scrollbar-thumb-hover:  rgba(0,0,0,0.4);
    --scrollbar-track:        transparent;

    /* ========= 标题 ========= */
    --title-text-color: var(--mxj-slate-900);

    /* ========= 导航标签 ========= */
    --mxj-nav-tabs-border-color: var(--mxj-neutral-200);
    --mxj-nav-link-color: var(--mxj-brand-1000);

    /* ========= Dashboard ========= */
    --mxj-dashboard-ink: var(--mxj-slate-900);
    --mxj-dashboard-muted: var(--mxj-slate-500);
    --mxj-dashboard-accent: var(--mxj-brand-500);
    --mxj-dashboard-card-bg: var(--card-bg);
    --mxj-dashboard-border: var(--mxj-border-2);
    --mxj-dashboard-hero-bg: var(--mxj-surface-2);
    --mxj-dashboard-line: var(--mxj-border-2);
    --mxj-dashboard-stat-time-bg: #0ea5e9;
    --mxj-dashboard-stat-user-bg: #22c55e;
    --mxj-dashboard-stat-class-bg: #f59e0b;
    --mxj-dashboard-stat-left-bg: #6366f1;
    --mxj-dashboard-icon-ink: #ffffff;
    --mxj-dashboard-badge-ink: #ffffff;

    /* ========= OJ Problem ========= */
    --oj-surface: #ffffff;
    --oj-surface-muted: #fafafa;
    --oj-surface-subtle: #f8fafc;
    --oj-border: #e5e7eb;
    --oj-border-soft: #eef2f7;
    --oj-text-main: #0f172a;
    --oj-text-muted: #6b7280;
    --oj-accent: #10b981;
    --oj-accent-strong: #22c55e;
    --oj-accent-warn: #f97316;
    --oj-resizer-bg: #f3f4f6;
    --oj-resizer-hover-bg: #e2e8f0;
    --oj-code-bg: #f1f5f9;
    --oj-pre-border: #e5e7eb;
    --oj-donut-hole: #ffffff;
    --oj-result-bg: #fafafa;
    --oj-btn-outline-text: #6b7280;
    --oj-btn-outline-border: #cbd5e1;
    --oj-btn-outline-hover-bg: #f1f5f9;
    --oj-btn-outline-hover-text: #111827;
    --oj-select-bg: #ffffff;
    --oj-select-text: #0f172a;
    --oj-select-border: #e5e7eb;
    --oj-select-focus: #94a3b8;
    --oj-select-focus-shadow: rgba(51, 65, 85, 0.35);
    --oj-badge-bg: #f1f5f9;
    --oj-badge-text: #0f172a;
    --oj-table-stripe-bg: rgba(148, 163, 184, 0.12);
}


/* ===============================
 * 暗黑模式
 * =============================== */
[data-mdb-theme="dark"] {

    /* ========= 语义层 ========= */
    --mxj-surface-0: #080d1a;
    --mxj-surface-1: #0b1020;
    --mxj-surface-2: #121a2b;
    --mxj-surface-3: #172033;

    --mxj-border-1: #14152d;
    --mxj-border-2: #111226;
    --mxj-border-3: #0c1043;

    --mxj-text-primary: #ffffff;
    --mxj-text-muted:   #8787ad;
    --mxj-text-subtle:  #7f8193;

    /* 星夜蓝在暗底上使用亮色交互文字，避免沿用亮色主题的深蓝文字导致对比不足。 */
    --mxj-interactive-ink: var(--mxj-brand-100);
    --mxj-interactive-ink-strong: var(--mxj-neutral-0);
    --mxj-interactive-border: var(--mxj-brand-400);
    --mxj-interactive-soft: rgba(var(--mxj-brand-rgb), .14);
    --mxj-interactive-soft-strong: rgba(var(--mxj-brand-rgb), .22);

    /* ========= 应用壳层 ========= */
    --sidenav-bg-color: rgba(11, 16, 32, .97);
    --sidenav-border-color: rgba(148, 163, 184, .14);
    --navbar-bg-color: rgba(11, 16, 32, .86);
    --navbar-border-color: rgba(148, 163, 184, .14);
    --mxj-shadow-sm: 0 1px 2px rgba(0, 0, 0, .14), 0 10px 28px rgba(0, 0, 0, .18);
    --mxj-shadow-md: 0 18px 46px rgba(0, 0, 0, .28);

    /* ========= 菜单 ========= */
    --bg-menu-bg: var(--mxj-surface-3);
    --bg-menu-hover: rgba(255,255,255,0.04);
    --menu-hr: #617081;

    /* ========= 卡片 ========= */
    --card-bg: var(--mxj-slate-900);
    --card-text: var(--mxj-brand-100);

    /* ========= 分页（暗黑补充色） ========= */
    --page-link-color: var(--mxj-slate-500);
    --page-link-border-color: var(--mxj-slate-500);

    --page-link-hover-color: var(--mxj-neutral-0);
    --page-link-hover-border-color: var(--mxj-brand-500);
    --page-link-hover-background-color: var(--mxj-brand-500);

    --page-link-active-color: var(--mxj-neutral-0);
    --page-link-active-border-color: var(--mxj-brand-500);
    --page-link-active-background-color: var(--mxj-brand-500);

    --page-link-disabled-color: var(--mxj-slate-900);
    --page-link-disabled-border-color: var(--mxj-slate-900);
    --page-link-disabled-no-color: var(--mxj-slate-900);
    --page-link-disabled-no-border-color: var(--mxj-slate-900);

    /* ========= 筛选 ========= */
    --filter-color: #afb1c4;
    --filter-background-color: var(--mxj-control-highlight);
    --filter-hover-color: var(--mxj-neutral-0);
    --filter-hover-bg-color: color-mix(in srgb, var(--mxj-control-highlight) 90%, var(--mxj-text-primary));
    --filter-active-color: var(--mxj-neutral-0);
    --filter-active-bg-color: var(--mxj-brand-500);

    /* ========= 滚动条 ========= */
    --scrollbar-size:        6px;
    --scrollbar-thumb:       rgba(0,0,0,0.4);
    --scrollbar-thumb-hover: rgba(0,0,0,0.4);

    /* ========= 标题 ========= */
    --title-text-color: #a4a6bf;

    /* ========= 导航标签 ========= */
    --mxj-nav-tabs-border-color: var(--mxj-slate-500);
    --mxj-nav-link-color: var(--mxj-neutral-300);

    /* ========= MDB ========== */
    --mdb-surface-bg: var(--mxj-surface-2);  /*卡片背景*/

    /* ========= Dashboard ========= */
    --mxj-dashboard-ink: var(--mxj-text-primary);
    --mxj-dashboard-muted: var(--mxj-text-muted);
    --mxj-dashboard-card-bg: var(--card-bg);
    --mxj-dashboard-border: var(--mxj-border-2);
    --mxj-dashboard-hero-bg: var(--mxj-surface-2);
    --mxj-dashboard-line: rgba(255, 255, 255, 0.08);
    --mxj-dashboard-icon-ink: #ffffff;
    --mxj-dashboard-badge-ink: #ffffff;

    /* ========= OJ Problem ========= */
    --oj-surface: #0b1220;
    --oj-surface-muted: #0f172a;
    --oj-surface-subtle: #0f172a;
    --oj-border: #1f2937;
    --oj-border-soft: #1f2937;
    --oj-text-main: #e5e7eb;
    --oj-text-muted: #94a3b8;
    --oj-accent: #34d399;
    --oj-accent-strong: #22c55e;
    --oj-accent-warn: #f97316;
    --oj-resizer-bg: #0f172a;
    --oj-resizer-hover-bg: #111827;
    --oj-code-bg: #111827;
    --oj-pre-border: #1f2937;
    --oj-donut-hole: #0b1220;
    --oj-result-bg: #0b1220;
    --oj-btn-outline-text: #cbd5f5;
    --oj-btn-outline-border: #334155;
    --oj-btn-outline-hover-bg: #1f2937;
    --oj-btn-outline-hover-text: #e5e7eb;
    --oj-select-bg: #0b1220;
    --oj-select-text: #e5e7eb;
    --oj-select-border: #1f2937;
    --oj-select-focus: #334155;
    --oj-select-focus-shadow: rgba(51, 65, 85, 0.5);
    --oj-badge-bg: #1f2937;
    --oj-badge-text: #e5e7eb;
    --oj-table-stripe-bg: rgba(148, 163, 184, 0.08);

    /* ========= MDB Table ========= */
    --mxj-table-bg: #0b1a33;
    --mxj-table-head-bg: #12264a;
    --mxj-table-stripe-bg: #0f2140;
    --mxj-table-border: #1f3558;
}

/* ===============================
 * MDB Table Dark Style (Blue)
 * =============================== */
[data-mdb-theme="dark"] .table,
[data-mdb-theme="dark"] .table-sm,
[data-mdb-theme="dark"] .table-bordered,
[data-mdb-theme="dark"] .table-striped {
    color: var(--mxj-text-primary);
}
[data-mdb-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--mxj-table-bg);
}
[data-mdb-theme="dark"] .table thead th {
    background-color: var(--mxj-table-head-bg);
}
[data-mdb-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--mxj-table-stripe-bg);
}
[data-mdb-theme="dark"] .table-bordered > :not(caption) > * {
    border-color: var(--mxj-table-border);
}

/*
 * 轻量性能模式只收敛绘制成本，不改变颜色语义、布局结构和业务状态。
 * 使用设计变量统一关闭大面积投影，避免各业务页面重复维护低配覆盖。
 */
html.mxj-performance-lite {
    --mxj-shadow-sm: none;
    --mxj-shadow-md: none;
    --navbar-bg-color: var(--mxj-surface-2);
    --sidenav-bg-color: var(--mxj-surface-2);
    --mxj-shell-sidenav-start: var(--mxj-shell-sidenav-base);
    --mxj-shell-sidenav-end: var(--mxj-shell-sidenav-base);
}

/* 命名主题文件后加载，同等权重会恢复渐变；提高壳层变量覆盖权重以真正收敛绘制成本。 */
:root.mxj-performance-lite[data-mxj-theme-id] {
    --mxj-shell-sidenav-start: var(--mxj-shell-sidenav-base);
    --mxj-shell-sidenav-end: var(--mxj-shell-sidenav-base);
}

html.mxj-performance-lite *,
html.mxj-performance-lite *::before,
html.mxj-performance-lite *::after {
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    /*
     * 业务页样式会在主题文件之后加载，因此这里使用 important 建立全应用性能兜底。
     * 仅取消背景像素采样，不改变颜色、透明度、布局或可交互状态。
     */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* 大面积纯装饰模糊在轻量模式下改为普通色块，保留信息图像本身的清晰度。 */
html.mxj-performance-lite .student-profile-hero-glow,
html.mxj-performance-lite .medal-overview-glow,
html.mxj-performance-lite .medal-image-wrap::after,
html.mxj-performance-lite .medal-image-preview-stage::before,
html.mxj-performance-lite .medal-showcase-picker-icon::after,
html.mxj-performance-lite .creation-workshop-hero::after {
    filter: none !important;
}

/* ===============================
 * 主题切换动效
 * =============================== */
@supports (view-transition-name: root) {
    /* 新旧主题由浏览器各生成一张快照，禁用默认淡入淡出后再由脚本执行圆形裁剪扩散。 */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
    }

    ::view-transition-old(root) {
        z-index: 1;
    }

    ::view-transition-new(root) {
        z-index: 2;
    }
}

/*
 * 非 View Transitions 浏览器的普通渐变兜底。
 * 该类只在用户主动切换主题的短暂窗口内存在，不参与首次渲染和日常页面交互。
 */
html.mxj-theme-transition-fallback,
html.mxj-theme-transition-fallback *,
html.mxj-theme-transition-fallback *::before,
html.mxj-theme-transition-fallback *::after {
    transition-property: color, background-color, border-color, outline-color, box-shadow, fill, stroke !important;
    transition-duration: 260ms !important;
    transition-timing-function: ease-out !important;
}

@media (prefers-reduced-motion: reduce) {
    html.mxj-theme-transition-fallback,
    html.mxj-theme-transition-fallback *,
    html.mxj-theme-transition-fallback *::before,
    html.mxj-theme-transition-fallback *::after {
        transition-duration: 0.01ms !important;
    }
}