/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║           CGo UI Library — cgo_clr.css                      ║
 * ║           颜色与配色系统 (Color & Palette System)            ║
 * ║                                                              ║
 * ║  版本：1.0.0 · 2026-06                                       ║
 * ║  作者：Central Go / NaL                                      ║
 * ║                                                              ║
 * ║  内容：                                                      ║
 * ║    1. 全局色彩 Token（亮色 / 暗色主题）                       ║
 * ║    2. 语义色（成功 / 警告 / 危险 / 信息）                     ║
 * ║    3. 管理台权限色                                            ║
 * ║    4. 玻璃态（Glassmorphism）色                               ║
 * ║    5. 地图专用色（线路图背景、站点描边等）                     ║
 * ║    6. 北京地铁各线路标志色                                    ║
 * ║    7. 用户头像预制配色                                        ║
 * ║    8. 品牌色与系统自适应 Token                                ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* =====================================================
   §1  全局色彩 Token — 亮色模式 (Light Mode)
   ===================================================== */
:root {
    /* ── 背景层 ── */
    --bg-color:        #f8f9fa;   /* 页面底层背景 */
    --bg-body:         var(--bg-color);
    --card-bg:         #ffffff;   /* 卡片 / 表格 / 容器背景 */
    --panel-bg:        #ffffff;   /* 面板背景 */
    --bg-card:         var(--card-bg);

    /* ── 文字 ── */
    --text-main:       #001d31;   /* 主文字（品牌深蓝黑） */
    --text-light:      #666666;   /* 次要 / 辅助文字 */
    --text-color:      var(--text-main);

    /* ── 边框 / 分割线 ── */
    --border-color:    #dee2e6;

    /* ── 品牌主色 ── */
    --primary-color:   #001d31;   /* 深蓝：按钮 / 高亮 / 选中 */
    --primary-hover:   #004060;
    --btn-text:        #ffffff;

    /* ── 导航 ── */
    --header-bg:       #ffffff;
    --header-height:   60px;
    --footer-bg:       #ffffff;

    /* ── 次级按钮 (灰色系) ── */
    --btn-info-bg:     #e9ecef;
    --btn-info-text:   #495057;
    --btn-info-hover:  #dee2e6;

    /* ── 表格 ── */
    --table-head-bg:   #f1f3f5;
    --table-head-text: #001d31;
    --table-row-hover: #f8f9fa;
    --table-cell-border: #eeeeee;

    /* ── 选项卡 ── */
    --tab-bg:          #f8f9fa;
    --tab-hover:       rgba(0, 0, 0, 0.03);

    /* ── 帮助弹窗 ── */
    --help-code-bg:    #f7f9fa;
    --filter-tag-bg:   #f8f9fa;
    --filter-toolbar-bg: #eef2f7;
}

/* =====================================================
   §1  全局色彩 Token — 暗色模式 (Dark Mode)
   ===================================================== */
[data-theme="dark"] {
    --bg-color:        #1a1a1a;
    --bg-body:         var(--bg-color);
    --card-bg:         #1f2020;
    --panel-bg:        #1f2020;
    --bg-card:         var(--card-bg);

    --text-main:       #e5e8ea;
    --text-light:      #a0b0b9;
    --text-color:      var(--text-main);

    --border-color:    #333333;

    --primary-color:   #006098;   /* 暗模式下提亮，适配深底 */
    --primary-hover:   #0070b0;
    --btn-text:        #ffffff;

    --header-bg:       #1f2020;
    --footer-bg:       #1f2020;

    --btn-info-bg:     #373838;
    --btn-info-text:   #e5e8ea;
    --btn-info-hover:  #4a4b4c;

    --table-head-bg:   #2c2d2e;
    --table-head-text: #e5e8ea;
    --table-row-hover: #2a2b2c;
    --table-cell-border: #333333;

    --tab-bg:          #2c2d2e;
    --tab-hover:       rgba(255, 255, 255, 0.05);

    --help-code-bg:    #2a2a2a;
    --filter-tag-bg:   #2c2d2e;
    --filter-toolbar-bg: #2c2d2e;
}

/* =====================================================
   §2  语义色 (Semantic Colors)
   ===================================================== */
:root {
    /* 成功 */
    --success-color:   #137333;
    --success-bg:      #e6ffed;
    --success-border:  #a8d5b5;

    /* 警告 */
    --warning-color:   #856404;
    --warning-bg:      rgba(255, 243, 205, 0.5);
    --warning-border:  rgba(255, 238, 186, 0.5);

    /* 危险 */
    --danger-color:    #d93025;
    --danger-hover:    #b3261e;
    --danger-bg:       #fff1f1;
    --danger-border:   #e58f8f;

    /* 信息 */
    --info-color:      #006098;
    --info-bg:         #e8f0fe;
    --info-border:     #b8d0ee;

    /* 对比模式 — 差异 */
    --diff-bg:         #efbdc3;
    --diff-text:       #d93025;
    /* 对比模式 — 相同 */
    --same-bg:         #e6ffed;
    --same-text:       #137333;
    /* 选中列 */
    --selected-bg:     #e8f0fe;
}

[data-theme="dark"] {
    --success-color:   #81c995;
    --success-bg:      #1b3e20;
    --success-border:  #2d5c36;

    --warning-color:   #ffd970;
    --warning-bg:      rgba(100, 75, 0, 0.2);
    --warning-border:  rgba(120, 90, 0, 0.3);

    --danger-color:    #ff8a80;
    --danger-hover:    #ff5252;
    --danger-bg:       #3b0f0f;
    --danger-border:   #7a2424;

    --info-color:      #7ab8e0;
    --info-bg:         #1a2a3a;
    --info-border:     #2a4060;

    --diff-bg:         #5c1b1b;
    --diff-text:       #ff8a80;
    --same-bg:         #1b3e20;
    --same-text:       #81c995;
    --selected-bg:     rgba(66, 133, 244, 0.2);
}

/* =====================================================
   §3  管理台权限色 (Admin Permission Colors)
   ===================================================== */
:root {
    --permission-enabled:         #16803d;
    --permission-enabled-soft:    #edf8f1;
    --permission-enabled-border:  #badfc8;

    --permission-disabled:        #52637a;
    --permission-disabled-soft:   #f0f4f8;
    --permission-disabled-border: #b9c5d4;

    --permission-hidden:          #c62828;
    --permission-hidden-soft:     #fff1f1;
    --permission-hidden-border:   #e58f8f;

    --permission-inherit:         #64748b;
    --permission-inherit-soft:    #f2f5f8;
    --permission-inherit-border:  #d2dbe6;
}

[data-theme="dark"] {
    --permission-enabled:         #81c995;
    --permission-enabled-soft:    #163820;
    --permission-enabled-border:  #245934;

    --permission-disabled:        #94a3b8;
    --permission-disabled-soft:   #202936;
    --permission-disabled-border: #334155;

    --permission-hidden:          #ff8a80;
    --permission-hidden-soft:     #3d1414;
    --permission-hidden-border:   #5c1c1c;

    --permission-inherit:         #a1b0cb;
    --permission-inherit-soft:    #242d3d;
    --permission-inherit-border:  #37455d;
}

/* =====================================================
   §4  玻璃态色 (Glassmorphism)
   ===================================================== */
:root {
    --glass-bg:        rgba(255, 255, 255, 0.7);
    --glass-border:    rgba(255, 255, 255, 0.4);
    --glass-shadow:    rgba(0, 0, 0, 0.08);
    --sidebar-width:   220px;
}

[data-theme="dark"] {
    --glass-bg:        rgba(31, 32, 32, 0.6);
    --glass-border:    rgba(255, 255, 255, 0.05);
    --glass-shadow:    rgba(0, 0, 0, 0.25);
}

/* =====================================================
   §5  地图专用色 (Map-specific Colors)
   ===================================================== */
:root {
    --map-bg:              #ffffff;
    --station-stroke:      #001d31;
    --not-open-color:      #bdcbd2;
    --panel-header-bg:     #001d31;
    --panel-header-text:   #ffffff;
    --close-btn-color:     rgba(255, 255, 255, 0.6);
    --capsule-bg:          #ffffff;
    --capsule-text:        #333333;
    --stops-tag-bg:        #f0f2f5;
    --control-bg:          #ffffff;
    --ctrl-btn-bg:         #f0f2f5;
    --ctrl-icon:           #333333;
    --ctrl-hover:          #e1e4e8;
    --divider:             #e0e0e0;
    --list-hover:          #f0f2f5;
    --sta-stroke-width-cn: 2px;
    --sta-stroke-width-en: 1.75px;
}

[data-theme="dark"] {
    --map-bg:              #1a1a1a;
    --station-stroke:      #bdcbd2;
    --not-open-color:      #4e4e4e;
    --panel-header-bg:     #373838;
    --panel-header-text:   #e5e8ea;
    --close-btn-color:     #78848b;
    --capsule-bg:          #1f2020;
    --capsule-text:        #78848b;
    --stops-tag-bg:        #78848b;
    --control-bg:          #1f2020;
    --ctrl-btn-bg:         #373838;
    --ctrl-icon:           #78848b;
    --ctrl-hover:          #4f4f4f;
    --divider:             #333333;
    --list-hover:          #373838;
}

/* =====================================================
   §6  北京地铁线路标志色 (Beijing Metro Line Colors)
   ===================================================== */

/* 地铁线路色工具类：可直接写 class="line-bg line-1号线八通线" */
.line-bg {
    color: var(--line-color-text-light);
    display: inline-block;
}

.line-bg.line-1号线八通线,
.filter-tag[data-line="1号线八通线"].active {
    background-color: var(--line-color-1);
    color: var(--line-color-text-light);
}

.line-bg.line-2号线,
.filter-tag[data-line="2号线"].active {
    background-color: var(--line-color-2);
    color: var(--line-color-text-light);
}

.line-bg.line-3号线,
.filter-tag[data-line="3号线"].active {
    background-color: var(--line-color-3);
    color: var(--line-color-text-light);
}

.line-bg.line-4号线大兴线,
.filter-tag[data-line="4号线大兴线"].active {
    background-color: var(--line-color-4);
    color: var(--line-color-text-light);
}

.line-bg.line-5号线,
.filter-tag[data-line="5号线"].active {
    background-color: var(--line-color-5);
    color: var(--line-color-text-light);
}

.line-bg.line-6号线,
.filter-tag[data-line="6号线"].active {
    background-color: var(--line-color-6);
    color: var(--line-color-text-light);
}

.line-bg.line-7号线,
.filter-tag[data-line="7号线"].active {
    background-color: var(--line-color-7);
    color: var(--line-color-text-dark);
}

.line-bg.line-8号线,
.filter-tag[data-line="8号线"].active {
    background-color: var(--line-color-8);
    color: var(--line-color-text-light);
}

.line-bg.line-9号线,
.filter-tag[data-line="9号线"].active {
    background-color: var(--line-color-9);
    color: var(--line-color-text-dark);
}

.line-bg.line-10号线,
.filter-tag[data-line="10号线"].active {
    background-color: var(--line-color-10);
    color: var(--line-color-text-light);
}

.line-bg.line-11号线,
.filter-tag[data-line="11号线"].active {
    background-color: var(--line-color-11);
    color: var(--line-color-text-light);
}

.line-bg.line-12号线,
.filter-tag[data-line="12号线"].active {
    background-color: var(--line-color-12);
    color: var(--line-color-text-light);
}

.line-bg.line-13号线,
.filter-tag[data-line="13号线"].active {
    background-color: var(--line-color-13);
    color: var(--line-color-text-dark);
}

.line-bg.line-14号线,
.filter-tag[data-line="14号线"].active {
    background-color: var(--line-color-14);
    color: var(--line-color-text-dark);
}

.line-bg.line-15号线,
.filter-tag[data-line="15号线"].active {
    background-color: var(--line-color-15);
    color: var(--line-color-text-light);
}

.line-bg.line-16号线,
.filter-tag[data-line="16号线"].active {
    background-color: var(--line-color-16);
    color: var(--line-color-text-light);
}

.line-bg.line-17号线,
.filter-tag[data-line="17号线"].active {
    background-color: var(--line-color-17);
    color: var(--line-color-text-light);
}

.line-bg.line-18号线,
.filter-tag[data-line="18号线"].active {
    background-color: var(--line-color-18);
    color: var(--line-color-text-light);
}

.line-bg.line-19号线,
.filter-tag[data-line="19号线"].active {
    background-color: var(--line-color-19);
    color: var(--line-color-text-dark);
}

.line-bg.line-22号线,
.filter-tag[data-line="22号线"].active {
    background-color: var(--line-color-22);
    color: var(--line-color-text-dark);
}

.line-bg.line-28号线,
.filter-tag[data-line="28号线"].active {
    background-color: var(--line-color-28);
    color: var(--line-color-text-light);
}

.line-bg.line-亦庄线,
.filter-tag[data-line="亦庄线"].active {
    background-color: var(--line-color-24);
    color: var(--line-color-text-light);
}

.line-bg.line-亦庄T1线,
.filter-tag[data-line="亦庄T1线"].active {
    background-color: var(--line-color-t1);
    color: var(--line-color-text-light);
}

.line-bg.line-房山线,
.filter-tag[data-line="房山线"].active {
    background-color: var(--line-color-25);
    color: var(--line-color-text-light);
}

.line-bg.line-燕房线,
.filter-tag[data-line="燕房线"].active {
    background-color: var(--line-color-25w);
    color: var(--line-color-text-light);
}

.line-bg.line-S1线,
.filter-tag[data-line="S1线"].active {
    background-color: var(--line-color-26);
    color: var(--line-color-text-light);
}

.line-bg.line-昌平线,
.filter-tag[data-line="昌平线"].active {
    background-color: var(--line-color-27);
    color: var(--line-color-text-dark);
}

.line-bg.line-西郊线,
.filter-tag[data-line="西郊线"].active {
    background-color: var(--line-color-xj);
    color: var(--line-color-text-light);
}

.line-bg.line-首都机场线,
.filter-tag[data-line="首都机场线"].active {
    background-color: var(--line-color-cae);
    color: var(--line-color-text-dark);
}

.line-bg.line-大兴机场线,
.filter-tag[data-line="大兴机场线"].active {
    background-color: var(--line-color-dae);
    color: var(--line-color-text-light);
}

.line-bg.line-市郊S1线,
.filter-tag[data-line="市郊S1线"].active {
    background-color: var(--line-color-sub-s1);
    color: var(--line-color-text-light);
}

.line-bg.line-市郊S2线,
.filter-tag[data-line="市郊S2线"].active {
    background-color: var(--line-color-sub-s2);
    color: var(--line-color-text-light);
}

.line-bg.line-市郊S5线,
.filter-tag[data-line="市郊S5线"].active {
    background-color: var(--line-color-sub-s5);
    color: var(--line-color-text-light);
}

.line-bg.line-市郊S6线,
.filter-tag[data-line="市郊S6线"].active {
    background-color: var(--line-color-sub-s6);
    color: var(--line-color-text-light);
}

/* 通用"全部"标签 */
.filter-tag[data-line="all"].active {
    background: var(--primary-color);
    color: var(--line-color-text-light);
}

/* ── 线路行内标签 ── */
.line-tag {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── CSS 变量：线路色（双色板设计） ── */
:root {
    /* =====================================================
       1. 官方标志色 (Official Line Colors)
       ===================================================== */
    --line-1-official: #c23a30;
    --line-2-official: #006098;
    --line-3-official: #e60033;
    --line-4-official: #008e9c;
    --line-5-official: #a6217f;
    --line-6-official: #d29700;
    --line-7-official: #fac671;
    --line-8-official: #009b6b;
    --line-9-official: #8fc31f;
    --line-10-official: #009bc0;
    --line-11-official: #ed796b;
    --line-12-official: #c76b00;
    --line-13-official: #f9e700;
    --line-14-official: #d5a7a1;
    --line-15-official: #6a357d;
    --line-16-official: #76a32d;
    --line-17-official: #00a9a9;
    --line-18-official: #5654a2;
    --line-19-official: #d6abc1;
    --line-22-official: #f7c8ce;
    --line-28-official: #35570b;
    --line-24-official: #e40077;
    --line-t1-official: #e6081b;
    --line-25-official: #e46022;
    --line-25w-official: #e46022;
    --line-26-official: #b25921;
    --line-27-official: #de82b2;
    --line-xj-official: #e6081b;
    --line-cae-official: #a29bbb;
    --line-dae-official: #004ba0;
    --line-sub-s1-official: #717071;
    --line-sub-s2-official: #717071;
    --line-sub-s5-official: #717071;
    --line-sub-s6-official: #717071;

    --line-text-light-official: #ffffff;
    --line-text-dark-official: #002538;

    /* =====================================================
       2. 优化色 (Screen Adaptive Line Colors)
       注：数值参考自 scmap_original/data_lines.js
       ===================================================== */
    --line-1-screen: #c23a30;
    --line-2-screen: #006098;
    --line-3-screen: #e60033;
    --line-4-screen: #008e9c;
    --line-5-screen: #a6217f;
    --line-6-screen: #d29700;
    --line-7-screen: #fac671;
    --line-8-screen: #009b63;
    --line-9-screen: #abcd03;
    --line-10-screen: #00a3c9;
    --line-11-screen: #ed796b;
    --line-12-screen: #c76b00;
    --line-13-screen: #f8de00;
    --line-14-screen: #d5a7a9;
    --line-15-screen: #6a357d;
    --line-16-screen: #6e992a;
    --line-17-screen: #00adb2;
    --line-18-screen: #5654a2;
    --line-19-screen: #d5abce;
    --line-22-screen: #f7c8ce;
    --line-28-screen: #35570b;
    --line-24-screen: #e40077;
    --line-t1-screen: #d80618;
    --line-25-screen: #e46022;
    --line-25w-screen: #e46022;
    --line-26-screen: #b25921;
    --line-27-screen: #ee87b4;
    --line-xj-screen: #d80618;
    --line-cae-screen: #a29bbb;
    --line-dae-screen: #004ba0;
    --line-sub-s1-screen: #d93932;
    --line-sub-s2-screen: #4080b7;
    --line-sub-s5-screen: #e98d95;
    --line-sub-s6-screen: #919a47;

    --line-text-light-screen: #ffffff;
    --line-text-dark-screen: #001d31;

    /* =====================================================
       3. 通用映射变量 (默认映射至优化色)
       ===================================================== */
    --line-color-1: var(--line-1-screen);
    --line-color-2: var(--line-2-screen);
    --line-color-3: var(--line-3-screen);
    --line-color-4: var(--line-4-screen);
    --line-color-5: var(--line-5-screen);
    --line-color-6: var(--line-6-screen);
    --line-color-7: var(--line-7-screen);
    --line-color-8: var(--line-8-screen);
    --line-color-9: var(--line-9-screen);
    --line-color-10: var(--line-10-screen);
    --line-color-11: var(--line-11-screen);
    --line-color-12: var(--line-12-screen);
    --line-color-13: var(--line-13-screen);
    --line-color-14: var(--line-14-screen);
    --line-color-15: var(--line-15-screen);
    --line-color-16: var(--line-16-screen);
    --line-color-17: var(--line-17-screen);
    --line-color-18: var(--line-18-screen);
    --line-color-19: var(--line-19-screen);
    --line-color-22: var(--line-22-screen);
    --line-color-28: var(--line-28-screen);
    --line-color-24: var(--line-24-screen);
    --line-color-t1: var(--line-t1-screen);
    --line-color-25: var(--line-25-screen);
    --line-color-25w: var(--line-25w-screen);
    --line-color-26: var(--line-26-screen);
    --line-color-27: var(--line-27-screen);
    --line-color-xj: var(--line-xj-screen);
    --line-color-cae: var(--line-cae-screen);
    --line-color-dae: var(--line-dae-screen);
    --line-color-sub-s1: var(--line-sub-s1-screen);
    --line-color-sub-s2: var(--line-sub-s2-screen);
    --line-color-sub-s5: var(--line-sub-s5-screen);
    --line-color-sub-s6: var(--line-sub-s6-screen);

    --line-color-text-light: var(--line-text-light-screen);
    --line-color-text-dark: var(--line-text-dark-screen);
}

/* =====================================================
   4. 色板属性选择器
   ===================================================== */
[data-color-palette="official"] {
    --line-color-1: var(--line-1-official);
    --line-color-2: var(--line-2-official);
    --line-color-3: var(--line-3-official);
    --line-color-4: var(--line-4-official);
    --line-color-5: var(--line-5-official);
    --line-color-6: var(--line-6-official);
    --line-color-7: var(--line-7-official);
    --line-color-8: var(--line-8-official);
    --line-color-9: var(--line-9-official);
    --line-color-10: var(--line-10-official);
    --line-color-11: var(--line-11-official);
    --line-color-12: var(--line-12-official);
    --line-color-13: var(--line-13-official);
    --line-color-14: var(--line-14-official);
    --line-color-15: var(--line-15-official);
    --line-color-16: var(--line-16-official);
    --line-color-17: var(--line-17-official);
    --line-color-18: var(--line-18-official);
    --line-color-19: var(--line-19-official);
    --line-color-22: var(--line-22-official);
    --line-color-28: var(--line-28-official);
    --line-color-24: var(--line-24-official);
    --line-color-t1: var(--line-t1-official);
    --line-color-25: var(--line-25-official);
    --line-color-25w: var(--line-25w-official);
    --line-color-26: var(--line-26-official);
    --line-color-27: var(--line-27-official);
    --line-color-xj: var(--line-xj-official);
    --line-color-cae: var(--line-cae-official);
    --line-color-dae: var(--line-dae-official);
    --line-color-sub-s1: var(--line-sub-s1-official);
    --line-color-sub-s2: var(--line-sub-s2-official);
    --line-color-sub-s5: var(--line-sub-s5-official);
    --line-color-sub-s6: var(--line-sub-s6-official);

    --line-color-text-light: var(--line-text-light-official);
    --line-color-text-dark: var(--line-text-dark-official);
}

[data-color-palette="screen"] {
    --line-color-1: var(--line-1-screen);
    --line-color-2: var(--line-2-screen);
    --line-color-3: var(--line-3-screen);
    --line-color-4: var(--line-4-screen);
    --line-color-5: var(--line-5-screen);
    --line-color-6: var(--line-6-screen);
    --line-color-7: var(--line-7-screen);
    --line-color-8: var(--line-8-screen);
    --line-color-9: var(--line-9-screen);
    --line-color-10: var(--line-10-screen);
    --line-color-11: var(--line-11-screen);
    --line-color-12: var(--line-12-screen);
    --line-color-13: var(--line-13-screen);
    --line-color-14: var(--line-14-screen);
    --line-color-15: var(--line-15-screen);
    --line-color-16: var(--line-16-screen);
    --line-color-17: var(--line-17-screen);
    --line-color-18: var(--line-18-screen);
    --line-color-19: var(--line-19-screen);
    --line-color-22: var(--line-22-screen);
    --line-color-28: var(--line-28-screen);
    --line-color-24: var(--line-24-screen);
    --line-color-t1: var(--line-t1-screen);
    --line-color-25: var(--line-25-screen);
    --line-color-25w: var(--line-25w-screen);
    --line-color-26: var(--line-26-screen);
    --line-color-27: var(--line-27-screen);
    --line-color-xj: var(--line-xj-screen);
    --line-color-cae: var(--line-cae-screen);
    --line-color-dae: var(--line-dae-screen);
    --line-color-sub-s1: var(--line-sub-s1-screen);
    --line-color-sub-s2: var(--line-sub-s2-screen);
    --line-color-sub-s5: var(--line-sub-s5-screen);
    --line-color-sub-s6: var(--line-sub-s6-screen);

    --line-color-text-light: var(--line-text-light-screen);
    --line-color-text-dark: var(--line-text-dark-screen);
}

/* =====================================================
   §7  用户头像预制配色 (Avatar Preset Colors)
   ===================================================== */
:root {
    /* 15色头像旧色板（保留用于后向兼容） */
    --avatar-color-red:       #d93025;
    --avatar-color-orange:    #e46022;
    --avatar-color-amber:     #d29700;
    --avatar-color-yellow:    #e8b800;
    --avatar-color-lime:      #8fc31f;
    --avatar-color-green:     #009655;
    --avatar-color-teal:      #008e9c;
    --avatar-color-sky:       #009bc0;
    --avatar-color-blue:      #006098;
    --avatar-color-indigo:    #3a4db8;
    --avatar-color-purple:    #6a357d;
    --avatar-color-pink:      #de82b2;
    --avatar-color-brown:     #b25921;
    --avatar-color-gray:      #78848b;
    --avatar-color-dark:      #001d31;

    /* 30色头像新色板 (自 cgoauth/app.js) */
    --avatar-color-0:  #ef4444;
    --avatar-color-1:  #f87171;
    --avatar-color-2:  #f97316;
    --avatar-color-3:  #fb923c;
    --avatar-color-4:  #f59e0b;
    --avatar-color-5:  #eab308;
    --avatar-color-6:  #fef08a;
    --avatar-color-7:  #84cc16;
    --avatar-color-8:  #a3e635;
    --avatar-color-9:  #22c55e;
    --avatar-color-10: #10b981;
    --avatar-color-11: #059669;
    --avatar-color-12: #064e3b;
    --avatar-color-13: #0d9488;
    --avatar-color-14: #14b8a6;
    --avatar-color-15: #22d3ee;
    --avatar-color-16: #38bdf8;
    --avatar-color-17: #2563eb;
    --avatar-color-18: #1d4ed8;
    --avatar-color-19: #1e3a8a;
    --avatar-color-20: #4f46e5;
    --avatar-color-21: #6366f1;
    --avatar-color-22: #8b5cf6;
    --avatar-color-23: #c084fc;
    --avatar-color-24: #d946ef;
    --avatar-color-25: #ec4899;
    --avatar-color-26: #f472b6;
    --avatar-color-27: #fda4af;
    --avatar-color-28: #64748b;
    --avatar-color-29: #334155;
}

/* 头像色旧工具类（保留） */
.avatar-color-red    { color: var(--avatar-color-red);    fill: var(--avatar-color-red);    }
.avatar-color-orange { color: var(--avatar-color-orange); fill: var(--avatar-color-orange); }
.avatar-color-amber  { color: var(--avatar-color-amber);  fill: var(--avatar-color-amber);  }
.avatar-color-yellow { color: var(--avatar-color-yellow); fill: var(--avatar-color-yellow); }
.avatar-color-lime   { color: var(--avatar-color-lime);   fill: var(--avatar-color-lime);   }
.avatar-color-green  { color: var(--avatar-color-green);  fill: var(--avatar-color-green);  }
.avatar-color-teal   { color: var(--avatar-color-teal);   fill: var(--avatar-color-teal);   }
.avatar-color-sky    { color: var(--avatar-color-sky);    fill: var(--avatar-color-sky);    }
.avatar-color-blue   { color: var(--avatar-color-blue);   fill: var(--avatar-color-blue);   }
.avatar-color-indigo { color: var(--avatar-color-indigo); fill: var(--avatar-color-indigo); }
.avatar-color-purple { color: var(--avatar-color-purple); fill: var(--avatar-color-purple); }
.avatar-color-pink   { color: var(--avatar-color-pink);   fill: var(--avatar-color-pink);   }
.avatar-color-brown  { color: var(--avatar-color-brown);  fill: var(--avatar-color-brown);  }
.avatar-color-gray   { color: var(--avatar-color-gray);   fill: var(--avatar-color-gray);   }
.avatar-color-dark   { color: var(--avatar-color-dark);   fill: var(--avatar-color-dark);   }

/* 头像色新工具类 */
.avatar-color-0  { color: var(--avatar-color-0);  fill: var(--avatar-color-0);  }
.avatar-color-1  { color: var(--avatar-color-1);  fill: var(--avatar-color-1);  }
.avatar-color-2  { color: var(--avatar-color-2);  fill: var(--avatar-color-2);  }
.avatar-color-3  { color: var(--avatar-color-3);  fill: var(--avatar-color-3);  }
.avatar-color-4  { color: var(--avatar-color-4);  fill: var(--avatar-color-4);  }
.avatar-color-5  { color: var(--avatar-color-5);  fill: var(--avatar-color-5);  }
.avatar-color-6  { color: var(--avatar-color-6);  fill: var(--avatar-color-6);  }
.avatar-color-7  { color: var(--avatar-color-7);  fill: var(--avatar-color-7);  }
.avatar-color-8  { color: var(--avatar-color-8);  fill: var(--avatar-color-8);  }
.avatar-color-9  { color: var(--avatar-color-9);  fill: var(--avatar-color-9);  }
.avatar-color-10 { color: var(--avatar-color-10); fill: var(--avatar-color-10); }
.avatar-color-11 { color: var(--avatar-color-11); fill: var(--avatar-color-11); }
.avatar-color-12 { color: var(--avatar-color-12); fill: var(--avatar-color-12); }
.avatar-color-13 { color: var(--avatar-color-13); fill: var(--avatar-color-13); }
.avatar-color-14 { color: var(--avatar-color-14); fill: var(--avatar-color-14); }
.avatar-color-15 { color: var(--avatar-color-15); fill: var(--avatar-color-15); }
.avatar-color-16 { color: var(--avatar-color-16); fill: var(--avatar-color-16); }
.avatar-color-17 { color: var(--avatar-color-17); fill: var(--avatar-color-17); }
.avatar-color-18 { color: var(--avatar-color-18); fill: var(--avatar-color-18); }
.avatar-color-19 { color: var(--avatar-color-19); fill: var(--avatar-color-19); }
.avatar-color-20 { color: var(--avatar-color-20); fill: var(--avatar-color-20); }
.avatar-color-21 { color: var(--avatar-color-21); fill: var(--avatar-color-21); }
.avatar-color-22 { color: var(--avatar-color-22); fill: var(--avatar-color-22); }
.avatar-color-23 { color: var(--avatar-color-23); fill: var(--avatar-color-23); }
.avatar-color-24 { color: var(--avatar-color-24); fill: var(--avatar-color-24); }
.avatar-color-25 { color: var(--avatar-color-25); fill: var(--avatar-color-25); }
.avatar-color-26 { color: var(--avatar-color-26); fill: var(--avatar-color-26); }
.avatar-color-27 { color: var(--avatar-color-27); fill: var(--avatar-color-27); }
.avatar-color-28 { color: var(--avatar-color-28); fill: var(--avatar-color-28); }
.avatar-color-29 { color: var(--avatar-color-29); fill: var(--avatar-color-29); }

/* 等级卡片渐变 (用户等级系统) */
:root {
    --level-default-gradient: linear-gradient(135deg, #1282b8, #009655);
    --level-test-gradient:    linear-gradient(135deg, #e98913, #f7b52c);
    --level-prime-gradient:   linear-gradient(135deg, #1c1887, #5f1985);
    --level-admin-gradient:   linear-gradient(135deg, #5c1c24, #e5757e);
}

/* =====================================================
   §8  品牌色与系统自适应 (Brand Colors & System Adaptive)
   ===================================================== */
:root {
    /* 品牌色变量 */
    --brand-color-vitool: #ad78eb;
    --brand-gradient-start-vitool: #8a56dd;
    --brand-gradient-end-vitool: #af80d2;
    --brand-gradient-vitool: linear-gradient(to top, var(--brand-gradient-start-vitool), var(--brand-gradient-end-vitool));
    --brand-border-vitool: #7549bc;

    --brand-color-wall: #a35490;
    --brand-gradient-start-wall: #843d79;
    --brand-gradient-end-wall: #c46ea9;
    --brand-gradient-wall: linear-gradient(to top, var(--brand-gradient-start-wall), var(--brand-gradient-end-wall));
    --brand-border-wall: #683060;

    --brand-color-stasign: #8787eb;
    --brand-gradient-start-stasign: #7146c2;
    --brand-gradient-end-stasign: #92a6fc;
    --brand-gradient-stasign: linear-gradient(to top, var(--brand-gradient-start-stasign), var(--brand-gradient-end-stasign));
    --brand-border-stasign: #5442ab;

    --brand-color-staline: #66a1c8;
    --brand-gradient-start-staline: #3a6894;
    --brand-gradient-end-staline: #84c2db;
    --brand-gradient-staline: linear-gradient(to top, var(--brand-gradient-start-staline), var(--brand-gradient-end-staline));
    --brand-border-staline: #30587d;

    --brand-color-project: #67caae;
    --brand-gradient-start-project: #43b1a2;
    --brand-gradient-end-project: #8fdeb2;
    --brand-gradient-project: linear-gradient(to top, var(--brand-gradient-start-project), var(--brand-gradient-end-project));
    --brand-border-project: #399c8f;

    --brand-color-admin: #475569;
    --brand-gradient-start-admin: #334155;
    --brand-gradient-end-admin: #64748b;
    --brand-gradient-admin: linear-gradient(to top, var(--brand-gradient-start-admin), var(--brand-gradient-end-admin));
    --brand-border-admin: #1e293b;

    /* 品牌渐变自动适配变量 (-appname) */
    --brand-gradient-start-appname: var(--brand-gradient-start-vitool);
    --brand-gradient-end-appname: var(--brand-gradient-end-vitool);
    --brand-gradient-appname: linear-gradient(to top, var(--brand-gradient-start-appname), var(--brand-gradient-end-appname));
    --brand-border-appname: var(--brand-border-vitool);
}

/* 根据 data-app 自动切换品牌渐变 (提高优先级至 html[data-app]) */
html[data-app='wall'] {
    --brand-gradient-start-appname: var(--brand-gradient-start-wall);
    --brand-gradient-end-appname: var(--brand-gradient-end-wall);
    --brand-border-appname: var(--brand-border-wall);
}

html[data-app='stasign'] {
    --brand-gradient-start-appname: var(--brand-gradient-start-stasign);
    --brand-gradient-end-appname: var(--brand-gradient-end-stasign);
    --brand-border-appname: var(--brand-border-stasign);
}

html[data-app='staline'] {
    --brand-gradient-start-appname: var(--brand-gradient-start-staline);
    --brand-gradient-end-appname: var(--brand-gradient-end-staline);
    --brand-border-appname: var(--brand-border-staline);
}

html[data-app='project'] {
    --brand-gradient-start-appname: var(--brand-gradient-start-project);
    --brand-gradient-end-appname: var(--brand-gradient-end-project);
    --brand-border-appname: var(--brand-border-project);
}

html[data-app='admin'] {
    --brand-gradient-start-appname: var(--brand-gradient-start-admin);
    --brand-gradient-end-appname: var(--brand-gradient-end-admin);
    --brand-border-appname: var(--brand-border-admin);
}