/*
 * Study 命名主题层。
 *
 * 主题主体只重写设计变量；少量 MDB 与独立作业壳层因历史固定色无法消费变量，
 * 在本文件集中提供兼容适配。旧页面仍通过 data-mdb-theme 获得明暗兼容。
 */
/*
 * 经典蓝直接继承 theme.css 的旧版明亮模式；星夜蓝直接继承其中的旧版暗黑模式。
 * 这里不复制两套基线，避免同一配色在后加载文件中逐渐漂移。
 */

/*
 * 六主题共享的多色色板协议。
 * secondary 用于辅助识别，accent 仅用于小面积点缀；ambient、card-tint 与
 * control-highlight 让页面环境、卡片和控件各有独立层次。业务成功、警告、错误色不在此重映射。
 */
:root[data-mxj-theme-id="classic-blue"] {
    --mxj-secondary-500: #22a6c7;
    --mxj-secondary-soft: rgba(34, 166, 199, .13);
    --mxj-accent-500: #f2b84b;
    --mxj-accent-soft-color: #fff3d6;
    --mxj-accent-on: #3a2900;
    --mxj-ambient-a: rgba(69, 105, 255, .12);
    --mxj-ambient-b: rgba(34, 166, 199, .1);
    --mxj-card-tint: #f8faff;
    --mxj-control-highlight: #eaf0ff;
    /* 经典蓝使用低饱和雾蓝外壳，内容画布保持明亮，建立清晰但克制的桌面层次。 */
    --mxj-shell-outer-bg: #dce7f8;
    --mxj-shell-frame-bg: #f4f7fb;
    --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-divider: rgba(174, 191, 228, .18);
    --mxj-shell-sidenav-hover: rgba(255, 255, 255, .08);
    --mxj-shell-sidenav-active: #33456f;
    --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);
    /* 未选中胶囊保留白底，悬停略微加深；与渐变背景对比时不改变选中蓝色。 */
    --filter-background-color: var(--mxj-neutral-0);
    --filter-hover-bg-color: var(--mxj-neutral-100);
}

:root[data-mxj-theme-id="forest-green"] {
    --mxj-secondary-500: #7c9e83;
    --mxj-secondary-soft: rgba(124, 158, 131, .16);
    --mxj-accent-500: #d79a2b;
    --mxj-accent-soft-color: #fff1d4;
    --mxj-accent-on: #3b2600;
    --mxj-ambient-a: rgba(47, 133, 90, .12);
    --mxj-ambient-b: rgba(215, 154, 43, .09);
    --mxj-card-tint: #fbfdf9;
    --mxj-control-highlight: #e5f2e8;
    --mxj-shell-outer-bg: #dbeadd;
    --mxj-shell-frame-bg: #eef6f1;
    --mxj-shell-sidenav-start: #1d4b38;
    --mxj-shell-sidenav-end: #123126;
    --mxj-shell-sidenav-base: #173a2c;
    --mxj-shell-sidenav-ink: #f2fbf5;
    --mxj-shell-sidenav-muted: #a9ccb5;
    --mxj-shell-sidenav-divider: rgba(169, 204, 181, .18);
    --mxj-shell-sidenav-hover: rgba(255, 255, 255, .08);
    --mxj-shell-sidenav-active: #35634f;
    --mxj-shell-logo-ink: #3b2600;
    --mxj-shell-status: #72d6a2;
    --mxj-shell-header-bg: #fcfefd;
    --mxj-shell-header-border: #d9e7dc;
    --mxj-shell-frame-border: #d9e7dc;
    --mxj-shell-frame-shadow: 0 18px 46px rgba(23, 58, 44, .14);
}

:root[data-mxj-theme-id="warm-sun"] {
    --mxj-secondary-500: #d89a21;
    --mxj-secondary-soft: rgba(216, 154, 33, .16);
    --mxj-accent-500: #217c75;
    --mxj-accent-soft-color: #dcf4f1;
    --mxj-accent-on: #ffffff;
    --mxj-ambient-a: rgba(194, 85, 14, .12);
    --mxj-ambient-b: rgba(33, 124, 117, .09);
    --mxj-card-tint: #fffcf7;
    --mxj-control-highlight: #ffe8cf;
    --mxj-shell-outer-bg: #f3dfc9;
    --mxj-shell-frame-bg: #fff3e8;
    --mxj-shell-sidenav-start: #713515;
    --mxj-shell-sidenav-end: #4e2513;
    --mxj-shell-sidenav-base: #5e2c15;
    --mxj-shell-sidenav-ink: #fff7ed;
    --mxj-shell-sidenav-muted: #e2bfa4;
    --mxj-shell-sidenav-divider: rgba(226, 191, 164, .18);
    --mxj-shell-sidenav-hover: rgba(255, 255, 255, .08);
    --mxj-shell-sidenav-active: #844b2f;
    --mxj-shell-logo-ink: #38261a;
    --mxj-shell-status: #62c4ba;
    --mxj-shell-header-bg: #fffdfa;
    --mxj-shell-header-border: #ecdcc9;
    --mxj-shell-frame-border: #ecdcc9;
    --mxj-shell-frame-shadow: 0 18px 46px rgba(94, 44, 21, .14);
}

:root[data-mxj-theme-id="sakura-pink"] {
    --mxj-secondary-500: #7c4a66;
    --mxj-secondary-soft: rgba(124, 74, 102, .13);
    --mxj-accent-500: #c68a34;
    --mxj-accent-soft-color: #fff1d8;
    --mxj-accent-on: #2f1d00;
    --mxj-ambient-a: rgba(189, 63, 105, .11);
    --mxj-ambient-b: rgba(198, 138, 52, .08);
    --mxj-card-tint: #fffdfd;
    --mxj-control-highlight: #fbe5ec;
    --mxj-shell-outer-bg: #f1dce4;
    --mxj-shell-frame-bg: #fff1f5;
    --mxj-shell-sidenav-start: #6c2944;
    --mxj-shell-sidenav-end: #471d32;
    --mxj-shell-sidenav-base: #57223a;
    --mxj-shell-sidenav-ink: #fff4f7;
    --mxj-shell-sidenav-muted: #deb2c1;
    --mxj-shell-sidenav-divider: rgba(222, 178, 193, .18);
    --mxj-shell-sidenav-hover: rgba(255, 255, 255, .08);
    --mxj-shell-sidenav-active: #83445b;
    --mxj-shell-logo-ink: #2f1d00;
    --mxj-shell-status: #f28cac;
    --mxj-shell-header-bg: #fffdfd;
    --mxj-shell-header-border: #efd5de;
    --mxj-shell-frame-border: #efd5de;
    --mxj-shell-frame-shadow: 0 18px 46px rgba(87, 34, 58, .13);
}

:root[data-mxj-theme-id="midnight-blue"] {
    --mxj-secondary-500: #54c6f0;
    --mxj-secondary-soft: rgba(84, 198, 240, .15);
    --mxj-accent-500: #c7d3e3;
    --mxj-accent-soft-color: rgba(199, 211, 227, .14);
    --mxj-accent-on: #0b1020;
    --mxj-ambient-a: rgba(69, 105, 255, .15);
    --mxj-ambient-b: rgba(84, 198, 240, .08);
    --mxj-card-tint: #141e31;
    --mxj-control-highlight: #172641;
    --mxj-text-muted: #9aa9c2;
    --mxj-text-subtle: #8291ad;
    --title-text-color: #b8c3d8;
    --mxj-nav-tabs-border-color: #394965;

    /*
     * 星夜蓝壳层使用同一组深靛表面，侧栏只比主画布抬高一层；
     * 导航信号统一为星蓝，暖金仅保留在品牌标志，避免菜单同时出现黄、灰蓝两套重心。
     */
    --mxj-shell-outer-bg: #18243b;
    --mxj-shell-frame-bg: #0b1020;
    --mxj-shell-sidenav-start: #111a30;
    --mxj-shell-sidenav-end: #0a1021;
    --mxj-shell-sidenav-base: #0d1629;
    --mxj-shell-sidenav-ink: #f2f6ff;
    --mxj-shell-sidenav-text: #d3dced;
    --mxj-shell-sidenav-muted: #8497ba;
    --mxj-shell-sidenav-divider: rgba(137, 155, 196, .18);
    --mxj-shell-sidenav-hover: rgba(111, 140, 255, .1);
    --mxj-shell-sidenav-active: rgba(69, 105, 255, .22);
    --mxj-shell-sidenav-active-border: rgba(127, 156, 255, .28);
    --mxj-shell-logo-ink: #0b1020;
    --mxj-shell-status: #68c9ee;
    --mxj-shell-header-bg: #101829;
    --mxj-shell-header-border: rgba(137, 155, 196, .18);
    --mxj-shell-frame-border-width: 0;
    --mxj-shell-frame-border: rgba(137, 155, 196, .2);
    --mxj-shell-frame-shadow: 0 18px 46px rgba(0, 0, 0, .36);
}

:root[data-mxj-theme-id="cosmic-black"] {
    --mxj-secondary-500: #bdc7cc;
    --mxj-secondary-soft: rgba(189, 199, 204, .12);
    --mxj-accent-500: #3f5fe8;
    --mxj-accent-soft-color: rgba(69, 105, 255, .16);
    --mxj-accent-on: #ffffff;
    --mxj-ambient-a: rgba(189, 199, 204, .055);
    --mxj-ambient-b: rgba(69, 105, 255, .1);
    --mxj-card-tint: #2d3439;
    --mxj-control-highlight: #32393f;
    --mxj-shell-outer-bg: #252b30;
    --mxj-shell-frame-bg: #101214;
    --mxj-shell-sidenav-start: #22272b;
    --mxj-shell-sidenav-end: #121416;
    --mxj-shell-sidenav-base: #171a1d;
    --mxj-shell-sidenav-ink: #f3f5f6;
    --mxj-shell-sidenav-muted: #a8b2b8;
    --mxj-shell-sidenav-divider: #394147;
    --mxj-shell-sidenav-hover: rgba(189, 199, 204, .09);
    --mxj-shell-sidenav-active: #343b40;
    --mxj-shell-logo-ink: #101214;
    --mxj-shell-status: #6f8cff;
    --mxj-shell-header-bg: #1f2428;
    --mxj-shell-header-border: #394147;
    --mxj-shell-frame-border-width: 0;
    --mxj-shell-frame-border: #394147;
    --mxj-shell-frame-shadow: 0 18px 46px rgba(0, 0, 0, .38);
}

:root[data-mxj-theme-id="forest-green"] {
    --mxj-brand-50: #eef7f1;
    --mxj-brand-100: #dceee2;
    --mxj-brand-400: #459a69;
    --mxj-brand-500: #2f855a;
    --mxj-brand-600: #277249;
    --mxj-brand-600-rgb: 39, 114, 73;
    --mxj-brand-900: #1f6845;
    --mxj-brand-1000: #24483a;
    --mxj-brand-rgb: 47, 133, 90;
    --mdb-primary: var(--mxj-brand-500);
    --mdb-primary-rgb: var(--mxj-brand-rgb);
    --mdb-link-color: var(--mxj-brand-500);
    --mdb-link-color-rgb: var(--mxj-brand-rgb);
    --mdb-link-hover-color: var(--mxj-brand-600);
    --mdb-link-hover-color-rgb: var(--mxj-brand-600-rgb);
    --mdb-input-focus-border-color: var(--mxj-brand-500);
    --mdb-focus-ring-color: rgba(var(--mxj-brand-rgb), .25);
    --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-exercise-shell-bg: var(--mxj-brand-500);
    --mxj-focus-ring: 0 0 0 3px rgba(47, 133, 90, .22);
    --mxj-page-head-accent-strong: #1f6845;
    --mxj-accent-soft: rgba(39, 114, 73, .15);
    --mxj-accent-ink: #277249;
    --mxj-accent-hover: rgba(47, 133, 90, .11);
    --mxj-accent-border: rgba(39, 114, 73, .24);
    --mxj-accent-row-hover: #f2f8f4;
    --mxj-divider-soft: #e8f0ea;
    --mxj-link-strong: #277249;
    --mxj-feature-head-accent: var(--mxj-brand-500);
    --mxj-feature-head-accent-strong: var(--mxj-brand-900);
    --mxj-feature-head-glow: rgba(47, 133, 90, .13);
    --mxj-progress-accent-end: var(--mxj-brand-400);
    --mxj-shell-glow: rgba(47, 133, 90, .08);
    --mxj-shell-glow-mobile: rgba(47, 133, 90, .07);
    --mxj-page-head-glow: rgba(47, 133, 90, .12);
    --mxj-page-head-shadow: rgba(47, 133, 90, .2);
    --mxj-menu-active-background: linear-gradient(45deg, var(--mxj-brand-600), var(--mxj-brand-400));

    --mxj-surface-0: #f6faf7;
    --mxj-surface-1: #eef6f1;
    --mxj-surface-2: #ffffff;
    --mxj-surface-3: #e7f1ea;
    --mxj-border-1: #d9e7dc;
    --mxj-border-2: #e4ede6;
    --mxj-border-3: rgba(154, 181, 160, .5);
    --mxj-text-primary: #1c3327;
    --mxj-text-muted: #586c61;
    --mxj-text-subtle: #66796e;
    --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);
    --mdb-surface-bg: var(--mxj-surface-2);

    --mxj-slate-900: rgba(28, 51, 39, 1);
    --mxj-slate-500: rgba(88, 108, 97, 1);
    --mxj-color-slate-50: #f6faf7;
    --mxj-color-slate-100: #edf4ef;
    --mxj-color-slate-200: #d9e7dc;
    --mxj-color-slate-300: #bdd1c2;
    --mxj-color-slate-400: #8ea497;
    --mxj-color-slate-500: #66796e;
    --mxj-color-slate-600: #52665a;
    --mxj-color-slate-700: #3d5146;
    --mxj-color-slate-800: #293e33;
    --mxj-color-slate-900: #1c3327;
    --mxj-color-gray-200: #dfe9e1;
    --mxj-color-gray-500: #687a70;
    --mxj-color-gray-800: #26392f;

    --sidenav-bg-color: rgba(255, 255, 255, .96);
    --sidenav-border-color: var(--mxj-border-1);
    --navbar-bg-color: rgba(255, 255, 255, .88);
    --navbar-border-color: var(--mxj-border-3);
    --bg-menu-bg: #e8f1ea;
    --bg-menu-hover: var(--mxj-accent-hover);
    --bg-menu-active: var(--mxj-brand-500);
    --menu-hr: #9cb5a3;
    --menu-border-right: var(--mxj-border-2);
    --card-bg: var(--mxj-surface-2);
    --card-text: var(--mxj-slate-900);
    --title-text-color: var(--mxj-slate-900);
    --mxj-nav-tabs-border-color: var(--mxj-color-gray-200);
    --mxj-nav-link-color: var(--mxj-brand-1000);

    /*
     * 兼容历史页面仍在使用的 blue 色阶别名；实际语义统一跟随当前主题强调色。
     */
    --mxj-color-blue: var(--mxj-brand-500);
    --mxj-color-blue-50: #eff8f1;
    --mxj-color-blue-100: #dceee2;
    --mxj-color-blue-200: #b9dcc5;
    --mxj-color-blue-300: #8cc69f;
    --mxj-color-blue-400: #58a875;
    --mxj-color-blue-500: #2f855a;
    --mxj-color-blue-600: #277249;
    --mxj-color-blue-700: #1f603d;
    --mxj-color-blue-900: var(--mxj-brand-900);

    --mxj-education-accent: var(--mxj-brand-500);
    --mxj-education-accent-soft: #edf8f0;
    --mxj-education-accent-border: #cfe7d6;
    --mxj-dashboard-accent: var(--mxj-brand-500);

    /* OJ 详情与编辑区域保持业务状态色，只让工作区表面、边界和文字进入当前主题。 */
    --oj-surface: var(--mxj-surface-2);
    --oj-surface-muted: var(--mxj-surface-1);
    --oj-surface-subtle: var(--mxj-surface-0);
    --oj-border: var(--mxj-border-1);
    --oj-border-soft: var(--mxj-border-2);
    --oj-text-main: var(--mxj-text-primary);
    --oj-text-muted: var(--mxj-text-muted);
    --oj-resizer-bg: var(--mxj-surface-3);
    --oj-resizer-hover-bg: var(--mxj-border-1);
    --oj-code-bg: var(--mxj-color-slate-100);
    --oj-pre-border: var(--mxj-border-1);
    --oj-donut-hole: var(--mxj-surface-2);
    --oj-result-bg: var(--mxj-surface-1);
    --oj-btn-outline-text: var(--mxj-text-muted);
    --oj-btn-outline-border: var(--mxj-color-slate-300);
    --oj-btn-outline-hover-bg: var(--mxj-color-slate-100);
    --oj-btn-outline-hover-text: var(--mxj-text-primary);
    --oj-select-bg: var(--mxj-surface-2);
    --oj-select-text: var(--mxj-text-primary);
    --oj-select-border: var(--mxj-border-1);
    --oj-select-focus: var(--mxj-color-slate-400);
    --oj-select-focus-shadow: rgba(61, 81, 70, .3);
    --oj-badge-bg: var(--mxj-color-slate-100);
    --oj-badge-text: var(--mxj-text-primary);
    --oj-table-stripe-bg: rgba(47, 133, 90, .07);
}

:root[data-mxj-theme-id="warm-sun"] {
    --mxj-brand-50: #fff6ec;
    --mxj-brand-100: #ffe8cf;
    --mxj-brand-400: #d96a1c;
    --mxj-brand-500: #c2550e;
    --mxj-brand-600: #a9470b;
    --mxj-brand-600-rgb: 169, 71, 11;
    --mxj-brand-900: #8f3b08;
    --mxj-brand-1000: #66371f;
    --mxj-brand-rgb: 194, 85, 14;
    --mdb-primary: var(--mxj-brand-500);
    --mdb-primary-rgb: var(--mxj-brand-rgb);
    --mdb-link-color: var(--mxj-brand-500);
    --mdb-link-color-rgb: var(--mxj-brand-rgb);
    --mdb-link-hover-color: var(--mxj-brand-600);
    --mdb-link-hover-color-rgb: var(--mxj-brand-600-rgb);
    --mdb-input-focus-border-color: var(--mxj-brand-500);
    --mdb-focus-ring-color: rgba(var(--mxj-brand-rgb), .25);
    --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-exercise-shell-bg: var(--mxj-brand-500);
    --mxj-focus-ring: 0 0 0 3px rgba(194, 85, 14, .23);
    --mxj-page-head-accent-strong: #8f3b08;
    --mxj-accent-soft: rgba(169, 71, 11, .15);
    --mxj-accent-ink: #a9470b;
    --mxj-accent-hover: rgba(194, 85, 14, .11);
    --mxj-accent-border: rgba(169, 71, 11, .24);
    --mxj-accent-row-hover: #fff7ee;
    --mxj-divider-soft: #f3e8dc;
    --mxj-link-strong: #a9470b;
    --mxj-feature-head-accent: var(--mxj-brand-500);
    --mxj-feature-head-accent-strong: var(--mxj-brand-900);
    --mxj-feature-head-glow: rgba(194, 85, 14, .13);
    --mxj-progress-accent-end: var(--mxj-brand-400);
    --mxj-shell-glow: rgba(194, 85, 14, .08);
    --mxj-shell-glow-mobile: rgba(194, 85, 14, .07);
    --mxj-page-head-glow: rgba(194, 85, 14, .12);
    --mxj-page-head-shadow: rgba(194, 85, 14, .2);
    --mxj-menu-active-background: linear-gradient(45deg, var(--mxj-brand-600), var(--mxj-brand-400));

    --mxj-surface-0: #fffaf5;
    --mxj-surface-1: #fff3e8;
    --mxj-surface-2: #ffffff;
    --mxj-surface-3: #f8ead8;
    --mxj-border-1: #ecdcc9;
    --mxj-border-2: #f1e5d7;
    --mxj-border-3: rgba(212, 180, 145, .5);
    --mxj-text-primary: #38261a;
    --mxj-text-muted: #705c4e;
    --mxj-text-subtle: #7f695a;
    --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);
    --mdb-surface-bg: var(--mxj-surface-2);

    --mxj-slate-900: rgba(56, 38, 26, 1);
    --mxj-slate-500: rgba(112, 92, 78, 1);
    --mxj-color-slate-50: #fffaf5;
    --mxj-color-slate-100: #f9f0e7;
    --mxj-color-slate-200: #ecdcc9;
    --mxj-color-slate-300: #ddc7ac;
    --mxj-color-slate-400: #b59c86;
    --mxj-color-slate-500: #7f695a;
    --mxj-color-slate-600: #6d5749;
    --mxj-color-slate-700: #574235;
    --mxj-color-slate-800: #443126;
    --mxj-color-slate-900: #38261a;
    --mxj-color-gray-200: #eee0d0;
    --mxj-color-gray-500: #826d5e;
    --mxj-color-gray-800: #463329;

    --sidenav-bg-color: rgba(255, 255, 255, .97);
    --sidenav-border-color: var(--mxj-border-1);
    --navbar-bg-color: rgba(255, 255, 255, .9);
    --navbar-border-color: var(--mxj-border-3);
    --bg-menu-bg: #f8ead8;
    --bg-menu-hover: var(--mxj-accent-hover);
    --bg-menu-active: var(--mxj-brand-500);
    --menu-hr: #c7a681;
    --menu-border-right: var(--mxj-border-2);
    --card-bg: var(--mxj-surface-2);
    --card-text: var(--mxj-slate-900);
    --title-text-color: var(--mxj-slate-900);
    --mxj-nav-tabs-border-color: var(--mxj-color-gray-200);
    --mxj-nav-link-color: var(--mxj-brand-1000);

    /*
     * 兼容历史页面仍在使用的 blue 色阶别名；实际语义统一跟随当前主题强调色。
     */
    --mxj-color-blue: var(--mxj-brand-500);
    --mxj-color-blue-50: #fff6ec;
    --mxj-color-blue-100: #ffe8cf;
    --mxj-color-blue-200: #ffd2a2;
    --mxj-color-blue-300: #f6ae69;
    --mxj-color-blue-400: #df7b32;
    --mxj-color-blue-500: #c2550e;
    --mxj-color-blue-600: #a9470b;
    --mxj-color-blue-700: #8f3b08;
    --mxj-color-blue-900: var(--mxj-brand-900);

    --mxj-education-accent: var(--mxj-brand-500);
    --mxj-education-accent-soft: #fff4e6;
    --mxj-education-accent-border: #f5d7b6;
    --mxj-dashboard-accent: var(--mxj-brand-500);

    --oj-surface: var(--mxj-surface-2);
    --oj-surface-muted: var(--mxj-surface-1);
    --oj-surface-subtle: var(--mxj-surface-0);
    --oj-border: var(--mxj-border-1);
    --oj-border-soft: var(--mxj-border-2);
    --oj-text-main: var(--mxj-text-primary);
    --oj-text-muted: var(--mxj-text-muted);
    --oj-resizer-bg: var(--mxj-surface-3);
    --oj-resizer-hover-bg: var(--mxj-border-1);
    --oj-code-bg: var(--mxj-color-slate-100);
    --oj-pre-border: var(--mxj-border-1);
    --oj-donut-hole: var(--mxj-surface-2);
    --oj-result-bg: var(--mxj-surface-1);
    --oj-btn-outline-text: var(--mxj-text-muted);
    --oj-btn-outline-border: var(--mxj-color-slate-300);
    --oj-btn-outline-hover-bg: var(--mxj-color-slate-100);
    --oj-btn-outline-hover-text: var(--mxj-text-primary);
    --oj-select-bg: var(--mxj-surface-2);
    --oj-select-text: var(--mxj-text-primary);
    --oj-select-border: var(--mxj-border-1);
    --oj-select-focus: var(--mxj-color-slate-400);
    --oj-select-focus-shadow: rgba(87, 66, 53, .3);
    --oj-badge-bg: var(--mxj-color-slate-100);
    --oj-badge-text: var(--mxj-text-primary);
    --oj-table-stripe-bg: rgba(194, 85, 14, .07);
}

/*
 * 樱花粉采用低饱和胭脂红作为主交互色，背景只保留轻微暖粉雾感。
 * 状态色、年级色与勋章色继续由业务组件维护，避免整页被单一粉色淹没。
 */
:root[data-mxj-theme-id="sakura-pink"] {
    --mxj-brand-50: #fff1f5;
    --mxj-brand-100: #ffe1ea;
    --mxj-brand-400: #d85d83;
    --mxj-brand-500: #bd3f69;
    --mxj-brand-600: #a8325a;
    --mxj-brand-600-rgb: 168, 50, 90;
    --mxj-brand-900: #7a2445;
    --mxj-brand-1000: #5a2b3d;
    --mxj-brand-rgb: 189, 63, 105;
    --mdb-primary: var(--mxj-brand-500);
    --mdb-primary-rgb: var(--mxj-brand-rgb);
    --mdb-link-color: var(--mxj-brand-500);
    --mdb-link-color-rgb: var(--mxj-brand-rgb);
    --mdb-link-hover-color: var(--mxj-brand-600);
    --mdb-link-hover-color-rgb: var(--mxj-brand-600-rgb);
    --mdb-input-focus-border-color: var(--mxj-brand-500);
    --mdb-focus-ring-color: rgba(var(--mxj-brand-rgb), .24);
    --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-exercise-shell-bg: var(--mxj-brand-500);
    --mxj-focus-ring: 0 0 0 3px rgba(189, 63, 105, .22);
    --mxj-page-head-accent-strong: var(--mxj-brand-900);
    --mxj-accent-soft: rgba(189, 63, 105, .14);
    --mxj-accent-ink: var(--mxj-brand-600);
    --mxj-accent-hover: rgba(189, 63, 105, .1);
    --mxj-accent-border: rgba(189, 63, 105, .24);
    --mxj-accent-row-hover: #fff5f8;
    --mxj-divider-soft: #f5e6eb;
    --mxj-link-strong: var(--mxj-brand-600);
    --mxj-feature-head-accent: var(--mxj-brand-500);
    --mxj-feature-head-accent-strong: var(--mxj-brand-900);
    --mxj-feature-head-glow: rgba(189, 63, 105, .12);
    --mxj-progress-accent-end: var(--mxj-brand-400);
    --mxj-shell-glow: rgba(189, 63, 105, .075);
    --mxj-shell-glow-mobile: rgba(189, 63, 105, .065);
    --mxj-page-head-glow: rgba(189, 63, 105, .11);
    --mxj-page-head-shadow: rgba(189, 63, 105, .18);
    --mxj-menu-active-background: linear-gradient(45deg, var(--mxj-brand-600), var(--mxj-brand-400));

    --mxj-surface-0: #fffafb;
    --mxj-surface-1: #fff1f5;
    --mxj-surface-2: #fff;
    --mxj-surface-3: #fae7ed;
    --mxj-border-1: #efd5de;
    --mxj-border-2: #f5e4ea;
    --mxj-border-3: rgba(210, 160, 176, .5);
    --mxj-text-primary: #3b2430;
    --mxj-text-muted: #735b66;
    --mxj-text-subtle: #846a76;
    --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-control-border: #b58e9e;
    --mdb-surface-bg: var(--mxj-surface-2);

    --mxj-slate-900: rgba(59, 36, 48, 1);
    --mxj-slate-500: rgba(115, 91, 102, 1);
    --mxj-color-slate-50: #fffafb;
    --mxj-color-slate-100: #fcf1f4;
    --mxj-color-slate-200: #efd5de;
    --mxj-color-slate-300: #debcc8;
    --mxj-color-slate-400: #b893a1;
    --mxj-color-slate-500: #846a76;
    --mxj-color-slate-600: #705762;
    --mxj-color-slate-700: #5b414d;
    --mxj-color-slate-800: #49313c;
    --mxj-color-slate-900: #3b2430;
    --mxj-color-gray-200: #f0dfe5;
    --mxj-color-gray-500: #866b77;
    --mxj-color-gray-800: #49313c;

    --sidenav-bg-color: rgba(255, 255, 255, .97);
    --sidenav-border-color: var(--mxj-border-1);
    --navbar-bg-color: rgba(255, 255, 255, .9);
    --navbar-border-color: var(--mxj-border-3);
    --bg-menu-bg: #f9e8ee;
    --bg-menu-hover: var(--mxj-accent-hover);
    --bg-menu-active: var(--mxj-brand-500);
    --menu-hr: #c9a1af;
    --menu-border-right: var(--mxj-border-2);
    --card-bg: var(--mxj-surface-2);
    --card-text: var(--mxj-slate-900);
    --title-text-color: var(--mxj-slate-900);
    --mxj-nav-tabs-border-color: var(--mxj-color-gray-200);
    --mxj-nav-link-color: var(--mxj-brand-1000);

    --mxj-color-blue: var(--mxj-brand-500);
    --mxj-color-blue-50: #fff1f5;
    --mxj-color-blue-100: #ffe1ea;
    --mxj-color-blue-200: #f7bfd0;
    --mxj-color-blue-300: #e990ac;
    --mxj-color-blue-400: #d85d83;
    --mxj-color-blue-500: #bd3f69;
    --mxj-color-blue-600: #a8325a;
    --mxj-color-blue-700: #8d294e;
    --mxj-color-blue-900: var(--mxj-brand-900);

    --mxj-education-accent: var(--mxj-brand-500);
    --mxj-education-accent-soft: #fff0f5;
    --mxj-education-accent-border: #f4ceda;
    --mxj-dashboard-accent: var(--mxj-brand-500);

    --oj-surface: var(--mxj-surface-2);
    --oj-surface-muted: var(--mxj-surface-1);
    --oj-surface-subtle: var(--mxj-surface-0);
    --oj-border: var(--mxj-border-1);
    --oj-border-soft: var(--mxj-border-2);
    --oj-text-main: var(--mxj-text-primary);
    --oj-text-muted: var(--mxj-text-muted);
    --oj-resizer-bg: var(--mxj-surface-3);
    --oj-resizer-hover-bg: var(--mxj-border-1);
    --oj-code-bg: var(--mxj-color-slate-100);
    --oj-pre-border: var(--mxj-border-1);
    --oj-donut-hole: var(--mxj-surface-2);
    --oj-result-bg: var(--mxj-surface-1);
    --oj-btn-outline-text: var(--mxj-text-muted);
    --oj-btn-outline-border: var(--mxj-color-slate-300);
    --oj-btn-outline-hover-bg: var(--mxj-color-slate-100);
    --oj-btn-outline-hover-text: var(--mxj-text-primary);
    --oj-select-bg: var(--mxj-surface-2);
    --oj-select-text: var(--mxj-text-primary);
    --oj-select-border: var(--mxj-border-1);
    --oj-select-focus: var(--mxj-color-slate-400);
    --oj-select-focus-shadow: rgba(91, 65, 77, .28);
    --oj-badge-bg: var(--mxj-color-slate-100);
    --oj-badge-text: var(--mxj-text-primary);
    --oj-table-stripe-bg: rgba(189, 63, 105, .065);
    --mxj-table-bg: #ffffff;
    --mxj-table-head-bg: #fae7ed;
    --mxj-table-stripe-bg: #fff7f9;
    --mxj-table-border: #efd5de;
}

/*
 * 星舰黑以石墨黑、枪灰和液态银建立机械层次，Logo 同系蓝用于导航选中、链接、焦点和进度信号。
 * 普通表面继续保持中性，避免整体变成星夜蓝；成功、警告、错误等业务状态色继续由组件自身维护，
 * 避免主题装饰色抹掉功能含义。
 */
:root[data-mxj-theme-id="cosmic-black"] {
    --mxj-brand-50: #1a1d20;
    --mxj-brand-100: #24292d;
    --mxj-brand-400: #65727a;
    --mxj-brand-500: #4b555c;
    --mxj-brand-600: #3d464c;
    --mxj-brand-600-rgb: 61, 70, 76;
    --mxj-brand-900: #293136;
    --mxj-brand-1000: #eef1f2;
    --mxj-brand-rgb: 75, 85, 92;
    --mdb-primary: var(--mxj-brand-500);
    --mdb-primary-rgb: var(--mxj-brand-rgb);
    --mdb-link-color: #8fa5ff;
    --mdb-link-color-rgb: 143, 165, 255;
    --mdb-link-hover-color: #ffffff;
    --mdb-link-hover-color-rgb: 255, 255, 255;
    --mdb-input-focus-border-color: #6f8cff;
    --mdb-focus-ring-color: rgba(69, 105, 255, .32);
    --mxj-interactive-ink: #d8dde0;
    --mxj-interactive-ink-strong: #ffffff;
    --mxj-interactive-border: rgba(189, 199, 204, .48);
    --mxj-interactive-soft: #32393f;
    --mxj-interactive-soft-strong: #4b555c;
    --mxj-exercise-shell-bg: linear-gradient(145deg, #1f2428, #101214);
    --mxj-focus-ring: 0 0 0 3px rgba(69, 105, 255, .32);
    --mxj-page-head-accent-strong: #eef1f2;
    --mxj-accent-soft: rgba(69, 105, 255, .16);
    --mxj-accent-ink: #8fa5ff;
    --mxj-accent-hover: #32393f;
    --mxj-accent-border: rgba(69, 105, 255, .36);
    --mxj-accent-row-hover: #32393f;
    --mxj-divider-soft: #394147;
    --mxj-link-strong: #8fa5ff;
    --mxj-feature-head-accent: #bdc7cc;
    --mxj-feature-head-accent-strong: #eef1f2;
    --mxj-feature-head-glow: rgba(69, 105, 255, .08);
    --mxj-progress-accent-end: #6f8cff;
    --mxj-shell-glow: rgba(189, 199, 204, .045);
    --mxj-shell-glow-mobile: rgba(189, 199, 204, .035);
    --mxj-page-head-glow: rgba(69, 105, 255, .07);
    --mxj-page-head-shadow: rgba(69, 105, 255, .1);
    --mxj-navbar-shadow: none;
    --mxj-sidenav-shadow: none;
    --mxj-mobile-nav-shadow: none;
    --mxj-menu-active-background: var(--mxj-accent-500);
    --mxj-backdrop: rgba(9, 11, 12, .8);
    --scrollbar-thumb: rgba(189, 199, 204, .3);
    --scrollbar-thumb-hover: rgba(238, 241, 242, .46);

    /* 四级石墨表面、枪灰交互与银蓝信号是星舰黑的事实源，后续变量统一从这里映射。 */
    --mxj-cosmic-canvas: #101214;
    --mxj-cosmic-shell: #171a1d;
    --mxj-cosmic-panel: #1f2428;
    --mxj-cosmic-card: #292f34;
    --mxj-cosmic-hover: #32393f;
    --mxj-cosmic-active: #4b555c;
    --mxj-metal-silver: #bdc7cc;
    --mxj-metal-highlight: #d8dde0;
    --mxj-signal-blue: #6f8cff;
    --mxj-surface-0: var(--mxj-cosmic-canvas);
    --mxj-surface-1: var(--mxj-cosmic-shell);
    --mxj-surface-2: var(--mxj-cosmic-panel);
    --mxj-surface-3: var(--mxj-cosmic-card);
    --mxj-border-1: #394147;
    --mxj-border-2: #32393f;
    --mxj-border-3: rgba(189, 199, 204, .16);
    --mxj-text-primary: #f3f5f6;
    --mxj-text-muted: #c2c9cd;
    --mxj-text-subtle: #969fa5;
    --mxj-text-secondary: var(--mxj-text-muted);
    --mxj-primary: var(--mxj-cosmic-active);
    --mxj-body-bg: var(--mxj-surface-0);
    --mxj-border-color: var(--mxj-border-1);
    --mxj-control-border: rgba(189, 199, 204, .5);
    --mdb-surface-bg: var(--mxj-surface-2);
    --bg-color: var(--mxj-surface-0);

    --mxj-slate-900: rgba(31, 36, 40, 1);
    --mxj-slate-500: rgba(194, 201, 205, 1);
    --mxj-color-slate-50: #f3f5f6;
    --mxj-color-slate-100: #eef1f2;
    --mxj-color-slate-200: #d8dde0;
    --mxj-color-slate-300: #bdc7cc;
    --mxj-color-slate-400: #9faab0;
    --mxj-color-slate-500: #7d898f;
    --mxj-color-slate-600: #626d73;
    --mxj-color-slate-700: #4b555c;
    --mxj-color-slate-800: #32393f;
    --mxj-color-slate-900: #1f2428;
    --mxj-color-gray-200: #394147;
    --mxj-color-gray-500: #969fa5;
    --mxj-color-gray-800: #292f34;

    --sidenav-bg-color: rgba(23, 26, 29, .98);
    --sidenav-border-color: rgba(189, 199, 204, .12);
    --navbar-bg-color: rgba(23, 26, 29, .94);
    --navbar-border-color: rgba(189, 199, 204, .13);
    --bg-menu-bg: var(--mxj-surface-2);
    --bg-menu-hover: color-mix(in srgb, var(--mxj-accent-500) 32%, var(--mxj-surface-3));
    --bg-menu-active: var(--mxj-accent-500);
    --menu-hr: #4b555c;
    --menu-border-right: var(--mxj-border-2);
    --card-bg: var(--mxj-surface-3);
    --card-text: var(--mxj-text-primary);
    --title-text-color: var(--mxj-text-primary);
    --mxj-nav-tabs-border-color: var(--mxj-border-1);
    --mxj-nav-link-color: var(--mxj-metal-highlight);

    --mxj-color-blue: var(--mxj-cosmic-active);
    --mxj-color-blue-50: #1a1d20;
    --mxj-color-blue-100: #24292d;
    --mxj-color-blue-200: #32393f;
    --mxj-color-blue-300: #4b555c;
    --mxj-color-blue-400: #65727a;
    --mxj-color-blue-500: #4b555c;
    --mxj-color-blue-600: #3d464c;
    --mxj-color-blue-700: #293136;
    --mxj-color-blue-900: #1f2428;

    /* 历史 blue / purple 普通组件仍映射为枪灰，仅明确的焦点与进度信号使用 Logo 同系蓝。 */
    --mxj-color-purple: var(--mxj-cosmic-active);
    --mxj-color-purple-900: var(--mxj-brand-600);

    --mxj-education-accent: var(--mxj-signal-blue);
    --mxj-education-accent-soft: rgba(69, 105, 255, .13);
    --mxj-education-accent-border: rgba(69, 105, 255, .3);
    --mxj-dashboard-accent: var(--mxj-metal-silver);

    --oj-surface: var(--mxj-surface-1);
    --oj-surface-muted: var(--mxj-surface-2);
    --oj-surface-subtle: var(--mxj-surface-0);
    --oj-border: var(--mxj-border-1);
    --oj-border-soft: var(--mxj-border-2);
    --oj-text-main: var(--mxj-text-primary);
    --oj-text-muted: var(--mxj-text-muted);
    --oj-resizer-bg: var(--mxj-surface-3);
    --oj-resizer-hover-bg: var(--mxj-cosmic-hover);
    --oj-code-bg: var(--mxj-surface-0);
    --oj-pre-border: var(--mxj-border-1);
    --oj-donut-hole: var(--mxj-surface-1);
    --oj-result-bg: var(--mxj-surface-1);
    --oj-btn-outline-text: var(--mxj-text-muted);
    --oj-btn-outline-border: rgba(189, 199, 204, .36);
    --oj-btn-outline-hover-bg: var(--mxj-surface-3);
    --oj-btn-outline-hover-text: var(--mxj-text-primary);
    --oj-select-bg: var(--mxj-surface-1);
    --oj-select-text: var(--mxj-text-primary);
    --oj-select-border: var(--mxj-border-1);
    --oj-select-focus: var(--mxj-signal-blue);
    --oj-select-focus-shadow: rgba(69, 105, 255, .3);
    --oj-badge-bg: var(--mxj-surface-3);
    --oj-badge-text: var(--mxj-text-primary);
    --oj-table-stripe-bg: rgba(189, 199, 204, .04);

    --mxj-table-bg: var(--mxj-surface-1);
    --mxj-table-head-bg: var(--mxj-surface-2);
    --mxj-table-stripe-bg: #252b30;
    --mxj-table-border: var(--mxj-border-1);
    --filter-color: var(--mxj-text-muted);
    --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-accent-on);
    --filter-active-bg-color: var(--mxj-accent-500);
    --page-link-color: var(--mxj-text-muted);
    --page-link-border-color: var(--mxj-border-1);
    --page-link-hover-color: var(--mxj-text-primary);
    --page-link-hover-border-color: var(--mxj-cosmic-active);
    --page-link-hover-background-color: var(--mxj-cosmic-active);
    --page-link-active-color: var(--mxj-text-primary);
    --page-link-active-border-color: var(--mxj-cosmic-active);
    --page-link-active-background-color: var(--mxj-cosmic-active);
    --page-link-disabled-color: var(--mxj-text-subtle);
    --page-link-disabled-border-color: var(--mxj-border-1);
    --page-link-disabled-no-color: var(--mxj-text-subtle);
    --page-link-disabled-no-border-color: var(--mxj-border-2);
}

/* 星舰黑的榜单分类复用筛选组件的蓝底白字选中态，不改变未选中项和其它主题。 */
:root[data-mxj-theme-id="cosmic-black"] .mxj-ranking-tabs .nav-link.active {
    color: var(--filter-active-color);
    background: var(--filter-active-bg-color);
}

/* 榜单入口的数量、图标和下划线跟随选中文字色，避免蓝底上残留灰色内容。 */
:root[data-mxj-theme-id="cosmic-black"] .mxj-ranking-tabs .active .mxj-ranking-tab-copy small,
:root[data-mxj-theme-id="cosmic-black"] .mxj-ranking-tabs .active .mxj-ranking-tab-icon {
    color: var(--filter-active-color);
}

:root[data-mxj-theme-id="cosmic-black"] .mxj-ranking-tabs .active .mxj-ranking-tab-icon {
    background: color-mix(in srgb, var(--filter-active-color) 16%, transparent);
}

:root[data-mxj-theme-id="cosmic-black"] .mxj-ranking-tabs .nav-link.active::after {
    background-color: var(--filter-active-color);
}

/*
 * 创作工坊入口直接落在页面画布上，两张工具卡使用最高一级石墨表面承接内容。
 * 卡片与正文共用同一底色，避免封面下方重新掉回面板色而削弱层级。
 */
:root[data-mxj-theme-id="cosmic-black"] .mxj-workspace-page .mxj-workspace-card,
:root[data-mxj-theme-id="cosmic-black"] .mxj-workspace-page .mxj-workspace-card-body {
    background: var(--mxj-surface-3);
}

/*
 * MDB 在组件选择器内部固定了默认蓝色，单改 :root 变量不会生效。
 * 只为自定义品牌主题建立适配，经典蓝和星夜蓝继续完整保留旧版 MDB 观感。
 */
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .btn-primary {
    --mdb-btn-bg: var(--mxj-brand-500);
    --mdb-btn-border-color: var(--mxj-brand-500);
    --mdb-btn-hover-bg: var(--mxj-brand-600);
    --mdb-btn-hover-border-color: var(--mxj-brand-600);
    --mdb-btn-focus-bg: var(--mxj-brand-600);
    --mdb-btn-focus-shadow-rgb: var(--mxj-brand-rgb);
    --mdb-btn-active-bg: var(--mxj-brand-900);
    --mdb-btn-active-border-color: var(--mxj-brand-900);
    --mdb-btn-disabled-bg: var(--mxj-brand-500);
    --mdb-btn-disabled-border-color: var(--mxj-brand-500);
    --mdb-btn-box-shadow: none;
    --mdb-btn-box-shadow-state: none;
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .btn-outline-primary {
    --mdb-btn-color: var(--mxj-interactive-ink);
    --mdb-btn-border-color: var(--mxj-interactive-border);
    --mdb-btn-hover-color: var(--mxj-interactive-ink-strong);
    --mdb-btn-hover-bg: var(--mxj-interactive-soft);
    --mdb-btn-hover-border-color: var(--mxj-interactive-border);
    --mdb-btn-focus-color: var(--mxj-interactive-ink-strong);
    --mdb-btn-focus-bg: var(--mxj-interactive-soft);
    --mdb-btn-focus-shadow-rgb: var(--mxj-brand-rgb);
    --mdb-btn-active-color: var(--mxj-interactive-ink-strong);
    --mdb-btn-active-bg: var(--mxj-interactive-soft-strong);
    --mdb-btn-active-border-color: var(--mxj-interactive-border);
    --mdb-btn-disabled-color: var(--mxj-text-subtle);
    --mdb-btn-disabled-border-color: var(--mxj-border-1);
    --mdb-btn-outline-border-color: var(--mxj-interactive-border);
    --mdb-btn-outline-focus-border-color: var(--mxj-interactive-border);
    --mdb-btn-outline-hover-border-color: var(--mxj-interactive-border);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .form-check-input:checked,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .form-check-input[type="checkbox"]:indeterminate {
    border-color: var(--mxj-brand-500);
    background-color: var(--mxj-brand-500);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .form-control:focus,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .form-select:focus,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .form-check-input:focus {
    border-color: var(--mdb-input-focus-border-color);
    box-shadow: var(--mxj-focus-ring);
}

/* MDB 的复选框伪元素自带固定蓝色扩散圈，新增主题统一改用外层 focus token。 */
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .form-check-input:focus::before {
    box-shadow: none;
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .form-check-input:checked:focus,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .form-check-input[type="checkbox"]:indeterminate:focus {
    border-color: var(--mxj-brand-500);
    background-color: var(--mxj-brand-500);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .form-switch .form-check-input:checked[type="checkbox"]::after {
    background-color: var(--mxj-brand-500);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .text-primary {
    color: var(--mxj-interactive-ink) !important;
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .bg-primary {
    background-color: var(--mxj-brand-500) !important;
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .border-primary {
    border-color: var(--mxj-interactive-border) !important;
}

/*
 * 独立作业壳层历史上固定为蓝紫色；自定义主题改用各自表面与品牌色，经典蓝和旧暗黑保持原貌。
 * 题目正确、错误、警告等状态色不在这里重映射。
 */
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]),
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) body.mxj-exercise-page {
    background: var(--mxj-exercise-shell-bg);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-main-panel,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-sidebar,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-user-card {
    background: var(--mxj-surface-2);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-topbar {
    background: linear-gradient(to left, var(--mxj-brand-400), var(--mxj-brand-600));
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-sidebar {
    --ce-question-index-pending-ring-color: var(--mxj-brand-500);
    --ce-question-index-hover-fill-color: var(--mxj-brand-50);
    --ce-question-index-done-color: var(--mxj-brand-500);
    border-color: var(--mxj-border-1);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-topbar-icon-btn.ce-draw-toggle-btn.is-active {
    background: var(--mxj-brand-600);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-option-row.js-select-answer {
    border-color: var(--mxj-color-slate-200);
    background: var(--mxj-surface-2);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-option-row.js-select-answer:hover,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-option-row.js-select-answer:focus-visible {
    border-color: var(--mxj-color-blue-300);
    background: var(--mxj-accent-row-hover);
    box-shadow: 0 0 0 1px rgba(var(--mxj-brand-rgb), .2);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-option-row.js-select-answer.is-selected {
    border-color: var(--mxj-color-blue-600);
    background: var(--mxj-color-blue-50);
    box-shadow: 0 0 0 1px rgba(var(--mxj-brand-rgb), .14);
}

/* 作业页只主题化普通交互；正确、错误、警告、禁用等业务状态色继续由页面自身维护。 */
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-read-icon:not(.is-disabled) {
    color: var(--mxj-accent-ink);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-read-icon:not(.is-disabled):hover {
    background: var(--mxj-accent-hover);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-read-icon:not(.is-disabled):focus-visible,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-editor-host .oj-run-layout-btn:focus-visible,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-ai-assistant__tag:focus-visible,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-ai-turn__knowledge-link:focus-visible {
    outline: none;
    box-shadow: var(--mxj-focus-ring);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-read-icon.is-reading:not(.is-disabled),
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-read-action.is-reading:not(.is-disabled) {
    color: #fff;
    border-color: var(--mxj-brand-500);
    background: var(--mxj-brand-500);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-editor-host .oj-run-layout-btn {
    color: var(--mxj-text-primary);
    border-color: var(--mxj-border-1);
    background: var(--mxj-surface-2);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-editor-host .oj-run-layout-btn:not(.active):not(:disabled):hover {
    color: var(--mxj-accent-ink);
    border-color: var(--mxj-brand-500);
    background: var(--mxj-accent-hover);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-editor-host .oj-run-layout-btn.active {
    color: #fff;
    border-color: var(--mxj-brand-500);
    background: var(--mxj-brand-500);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-ai-assistant__tag {
    color: var(--mxj-text-primary);
    border-color: var(--mxj-border-1);
    background: var(--mxj-surface-2);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-ai-assistant__tag:hover,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-ai-assistant__tag:focus-visible {
    color: var(--mxj-accent-ink);
    border-color: var(--mxj-accent-border);
    background: var(--mxj-accent-row-hover);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-ai-assistant__tag.active {
    color: #fff;
    border-color: var(--mxj-brand-500);
    background: var(--mxj-brand-500);
    box-shadow: none;
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-ai-assistant__tag.active:focus-visible {
    box-shadow: var(--mxj-focus-ring);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-ai-turn__knowledge-link {
    color: var(--mxj-accent-ink);
    border-color: var(--mxj-accent-border);
    background: var(--mxj-brand-50);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-ai-turn__knowledge-link:hover,
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .ce-ai-turn__knowledge-link:focus-visible {
    color: var(--mxj-interactive-ink-strong);
    border-color: var(--mxj-brand-400);
    background: var(--mxj-brand-100);
}

/* 任务中心的普通蓝色跟随主题，章节绿/金/橙等身份色不参与重映射。 */
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .mxj-task-page {
    --mxj-task-blue: var(--mxj-brand-500);
    --mxj-task-blue-deep: var(--mxj-brand-900);
    --mxj-task-blue-rgb: var(--mxj-brand-rgb);
}

/* 星舰黑在暗底上的普通文字使用高光银，避免深青灰品牌阶作为文字时对比不足。 */
:root[data-mxj-theme-id="cosmic-black"] .mxj-task-page {
    --mxj-task-blue-deep: var(--mxj-interactive-ink-strong);
}

/* 打字设置页保留课堂蓝、挑战橙、练习绿的功能识别色，只统一外围工作台与普通交互色。 */
:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .typing-settings-page {
    --typing-settings-ink: var(--mxj-text-primary);
    --typing-settings-muted: var(--mxj-text-muted);
    --typing-settings-border: var(--mxj-border-1);
    --typing-settings-border-strong: var(--mxj-accent-border);
    --typing-settings-panel: var(--mxj-surface-2);
    --typing-settings-soft: rgba(var(--mxj-brand-rgb), .07);
    --typing-settings-soft-strong: rgba(var(--mxj-brand-rgb), .12);
    --typing-settings-blue: var(--mxj-brand-500);
    --typing-settings-shadow: none;
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .typing-settings-workbench {
    background:
        radial-gradient(circle at top left, rgba(var(--mxj-brand-rgb), .08), transparent 28%),
        var(--mxj-surface-2);
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .typing-workspace-nav {
    border-color: var(--mxj-border-1);
    background: var(--mxj-surface-2);
    box-shadow: none;
}

:root:is([data-mxj-theme-id="forest-green"], [data-mxj-theme-id="warm-sun"], [data-mxj-theme-id="sakura-pink"], [data-mxj-theme-id="cosmic-black"]) .typing-workspace-tab:hover {
    background: var(--mxj-accent-hover);
}

/* ===============================
 * 顶部命名主题选择器
 * =============================== */
.mxj-theme-picker {
    width: min(340px, calc(100vw - 2rem));
    max-height: min(32rem, calc(100dvh - 5rem));
    padding: .85rem;
    color: var(--mxj-text-primary);
    background: var(--card-bg);
    border: 1px solid var(--mxj-border-1);
    border-radius: var(--mxj-radius-md);
    box-shadow: var(--mxj-shadow-md);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mxj-theme-picker-title {
    display: flex;
    align-items: center;
    margin-bottom: .7rem;
    font-size: .875rem;
    color: var(--mxj-text-muted);
}

.mxj-theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
}

.mxj-theme-option {
    position: relative;
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    justify-content: center;
    column-gap: .35rem;
    min-width: 0;
    min-height: 40px;
    padding: .58rem .7rem;
    text-align: left;
    color: var(--mxj-text-primary);
    background: var(--mxj-surface-1);
    border: 1px solid var(--mxj-border-1);
    border-radius: var(--mxj-radius-sm);
    cursor: pointer;
}

.mxj-theme-option:hover {
    border-color: var(--mxj-brand-500);
    background: var(--bg-menu-hover);
}

.mxj-theme-option:focus-visible {
    outline: none;
    box-shadow: var(--mxj-focus-ring);
}

.mxj-theme-option.is-active {
    border-color: var(--mxj-brand-500);
    box-shadow: inset 0 0 0 1px var(--mxj-brand-500);
}

.mxj-theme-option.is-active::after {
    content: "\f00c";
    position: absolute;
    z-index: 1;
    /* 徽标绝对定位在右上角，不参与居中的名称与四枚色点内容网格。 */
    top: .28rem;
    right: .28rem;
    display: inline-grid;
    place-items: center;
    width: .78rem;
    height: .78rem;
    color: #fff;
    background: var(--mxj-brand-500);
    border-radius: 50%;
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
    font-size: max(12px, .45rem);
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.mxj-theme-option-name {
    display: inline-flex;
    align-items: center;
    min-width: max-content;
    font-size: .82rem;
    font-weight: 650;
    line-height: 1.25;
    white-space: nowrap;
}

.mxj-theme-swatches {
    display: flex;
    align-items: center;
    gap: .14rem;
    min-width: max-content;
}

.mxj-theme-swatch {
    width: .66rem;
    height: .66rem;
    border: 1px solid rgba(100, 116, 139, .28);
    border-radius: 50%;
}

/*
 * 320px 窄屏仍保持三行两列：缩小色点与横向留白，不隐藏第四个色点，
 * 对勾作为右上角浮标脱离内容网格，卡片左右内边距保持相等。
 */
@media (max-width: 360px) {
    .mxj-theme-picker {
        width: min(340px, calc(100vw - 1rem));
        padding: .65rem;
    }

    .mxj-theme-option {
        column-gap: .25rem;
        padding: .55rem;
    }

    .mxj-theme-swatches {
        gap: .1rem;
    }

    .mxj-theme-swatch {
        width: .5rem;
        height: .5rem;
    }
}