/* ============================================================
   界面主题皮肤（core/themes.py THEMES 一一对应）
   - 骨架 base.html / mobile/base.html 在 <html data-theme="<key>"> 上承载主题；
   - 每主题两组色：
       「品牌亮色对」--primary-color/--secondary-color：装饰强调（边框/焦点环/
         色卡预览），保留品牌鲜亮观感；
       「白字表面对」--grad-from/--grad-to：导航条/主按钮/登录页头等白字渐变
         表面专用，白字对比度 ≥4.6:1（WCAG AA）；--bs-primary 与 --grad-from
         同色（分页激活/nav-pills/下拉选中/复选框等白字或白图标组件），
         各主题还带一套深色链接色 --bs-link-color（白底文字可读）。
   - 背景图主题（注册表带 bg_img）额外定义：
       --app-bg-*  应用内容区背景（浅色蒙版 + 底图，body.app-shell 消费，见下方通用规则）；
       另附 html[data-theme=key] body 满铺底图规则（登录页/首页消费，
       定义与消费同在本文件——url() 写进自定义属性会被按「使用处」的文档路径
       解析，放内联 style 里相对路径会指错，必须留在本 CSS 内）；
       以及导航条铺底图规则（.navbar/.m-topbar 深纱+底图，见「背景图主题 ·
       导航条铺底图」节——顶栏不再以纯色渐变盖住主题背景）。
   - 文件在骨架内联 <style> 之后加载，同 specificity 覆盖成立；
   - 新增皮肤：core/themes.py 加注册项 + 本文件加一段同名变量覆盖
     （背景图主题还需 static/img/themes/ 放同名 SVG）。
   ============================================================ */

/* ==================== 主题变量 ==================== */

/* 紫罗兰（默认）：亮色对与历史渐变一致；白字表面/组件主色统一走深色对，
   修复「主按钮紫、分页/焦点蓝」割裂的同时保证白字对比度 */
:root,
html[data-theme="default"] {
    --primary-color: #667eea;
    --secondary-color: #764ba2;
    --grad-from: #586cc9;
    --grad-to: #764ba2;
    --bs-primary: #586cc9;
    --bs-primary-rgb: 88, 108, 201;
    --bs-link-color: #5566d6;
    --bs-link-color-rgb: 85, 102, 214;
    --bs-link-hover-color: #4353c4;
    --bs-link-hover-color-rgb: 67, 83, 196;
}

/* 碧海晴空 */
html[data-theme="ocean"] {
    --primary-color: #0ea5e9;
    --secondary-color: #1d4ed8;
    --grad-from: #0a7aac;
    --grad-to: #1d4ed8;
    --bs-primary: #0a7aac;
    --bs-primary-rgb: 10, 122, 172;
    --bs-link-color: #0284c7;
    --bs-link-color-rgb: 2, 132, 199;
    --bs-link-hover-color: #0369a1;
    --bs-link-hover-color-rgb: 3, 105, 161;
}

/* 翡翠青绿 */
html[data-theme="emerald"] {
    --primary-color: #10b981;
    --secondary-color: #047857;
    --grad-from: #0c855d;
    --grad-to: #047857;
    --bs-primary: #0c855d;
    --bs-primary-rgb: 12, 133, 93;
    --bs-link-color: #059669;
    --bs-link-color-rgb: 5, 150, 105;
    --bs-link-hover-color: #047857;
    --bs-link-hover-color-rgb: 4, 120, 87;
}

/* 落日暖橙 */
html[data-theme="sunset"] {
    --primary-color: #f97316;
    --secondary-color: #e11d48;
    --grad-from: #bd5711;
    --grad-to: #e11d48;
    --bs-primary: #bd5711;
    --bs-primary-rgb: 189, 87, 17;
    --bs-link-color: #ea580c;
    --bs-link-color-rgb: 234, 88, 12;
    --bs-link-hover-color: #c2410c;
    --bs-link-hover-color-rgb: 194, 65, 12;
}

/* 午夜墨蓝：深色导航+深色侧栏，内容区强调色取天蓝 */
html[data-theme="midnight"] {
    --primary-color: #334155;
    --secondary-color: #0f172a;
    --grad-from: #334155;
    --grad-to: #0f172a;
    --bs-primary: #0369a1;
    --bs-primary-rgb: 3, 105, 161;
    --bs-link-color: #0369a1;
    --bs-link-color-rgb: 3, 105, 161;
    --bs-link-hover-color: #075985;
    --bs-link-hover-color-rgb: 7, 89, 133;
    --app-bg-color: #eef2f7;
}

/* 玫瑰绯红 */
html[data-theme="rose"] {
    --primary-color: #f43f5e;
    --secondary-color: #9f1239;
    --grad-from: #d73753;
    --grad-to: #9f1239;
    --bs-primary: #d73753;
    --bs-primary-rgb: 215, 55, 83;
    --bs-link-color: #e11d48;
    --bs-link-color-rgb: 225, 29, 72;
    --bs-link-hover-color: #be123c;
    --bs-link-hover-color-rgb: 190, 18, 60;
}

/* 极光青紫 */
html[data-theme="aurora"] {
    --primary-color: #06b6d4;
    --secondary-color: #7c3aed;
    --grad-from: #047f94;
    --grad-to: #7c3aed;
    --bs-primary: #047f94;
    --bs-primary-rgb: 4, 127, 148;
    --bs-link-color: #0e7490;
    --bs-link-color-rgb: 14, 116, 144;
    --bs-link-hover-color: #155e75;
    --bs-link-hover-color-rgb: 21, 94, 117;
}

/* ==================== 背景图主题（非纯色） ==================== */

/* 花纹雅致：黛青底四瓣花纹样；内容区铺暖白蒙版平铺纹样 */
html[data-theme="pattern"] {
    --primary-color: #6b8f83;
    --secondary-color: #46635a;
    --grad-from: #5c7b71;
    --grad-to: #46635a;
    --bs-primary: #5c7b71;
    --bs-primary-rgb: 92, 123, 113;
    --bs-link-color: #527368;
    --bs-link-color-rgb: 82, 115, 104;
    --bs-link-hover-color: #425d54;
    --bs-link-hover-color-rgb: 66, 93, 84;
    --app-bg-color: #f2f1ec;
    --app-bg-image: linear-gradient(rgba(250, 249, 245, 0.955), rgba(250, 249, 245, 0.955)), url("../img/themes/pattern.svg");
}

/* 登录页/首页满铺底图（定义与消费同在本文件，相对路径按本文件解析） */
html[data-theme="pattern"] body {
    background: url("../img/themes/pattern.svg") center/cover no-repeat fixed;
}


/* 童趣卡通：晴空笑脸太阳彩虹山丘 */
html[data-theme="cartoon"] {
    --primary-color: #38bdf8;
    --secondary-color: #f59e0b;
    --grad-from: #257da4;
    --grad-to: #a26807;
    --bs-primary: #db2777;
    --bs-primary-rgb: 219, 39, 119;
    --bs-link-color: #db2777;
    --bs-link-color-rgb: 219, 39, 119;
    --bs-link-hover-color: #be185d;
    --bs-link-hover-color-rgb: 190, 24, 93;
    --app-bg-color: #eaf6fd;
    --app-bg-image: linear-gradient(rgba(246, 251, 254, 0.93), rgba(246, 251, 254, 0.93)), url("../img/themes/cartoon.svg");
}

/* 登录页/首页满铺底图（定义与消费同在本文件，相对路径按本文件解析） */
html[data-theme="cartoon"] body {
    background: url("../img/themes/cartoon.svg") center/cover no-repeat fixed;
}


/* 国风古韵：朱红楼墙金檐宫灯 */
html[data-theme="guofeng"] {
    --primary-color: #a32c26;
    --secondary-color: #6d1d18;
    --grad-from: #a32c26;
    --grad-to: #6d1d18;
    --bs-primary: #a32c26;
    --bs-primary-rgb: 163, 44, 38;
    --bs-link-color: #991b1b;
    --bs-link-color-rgb: 153, 27, 27;
    --bs-link-hover-color: #7f1d1d;
    --bs-link-hover-color-rgb: 127, 29, 29;
    --app-bg-color: #f6f1e7;
    --app-bg-image: linear-gradient(rgba(250, 247, 242, 0.95), rgba(250, 247, 242, 0.95)), url("../img/themes/guofeng.svg");
}

/* 登录页/首页满铺底图（定义与消费同在本文件，相对路径按本文件解析） */
html[data-theme="guofeng"] body {
    background: url("../img/themes/guofeng.svg") center/cover no-repeat fixed;
}


/* 花鸟鸣春：暮色粉空玉兰双雀 */
html[data-theme="flowerbird"] {
    --primary-color: #d4568a;
    --secondary-color: #8e2f5c;
    --grad-from: #bb4c79;
    --grad-to: #8e2f5c;
    --bs-primary: #bb4c79;
    --bs-primary-rgb: 187, 76, 121;
    --bs-link-color: #be185d;
    --bs-link-color-rgb: 190, 24, 93;
    --bs-link-hover-color: #9d174d;
    --bs-link-hover-color-rgb: 157, 23, 77;
    --app-bg-color: #f8eef3;
    --app-bg-image: linear-gradient(rgba(252, 247, 249, 0.94), rgba(252, 247, 249, 0.94)), url("../img/themes/flowerbird.svg");
}

/* 登录页/首页满铺底图（定义与消费同在本文件，相对路径按本文件解析） */
html[data-theme="flowerbird"] body {
    background: url("../img/themes/flowerbird.svg") center/cover no-repeat fixed;
}


/* 山水清音：黛青暮山云雾江舟 */
html[data-theme="landscape"] {
    --primary-color: #178276;
    --secondary-color: #0c4a45;
    --grad-from: #178276;
    --grad-to: #0c4a45;
    --bs-primary: #178276;
    --bs-primary-rgb: 23, 130, 118;
    --bs-link-color: #0f766e;
    --bs-link-color-rgb: 15, 118, 110;
    --bs-link-hover-color: #115e59;
    --bs-link-hover-color-rgb: 17, 94, 89;
    --app-bg-color: #eef6f4;
    --app-bg-image: linear-gradient(rgba(245, 250, 249, 0.94), rgba(245, 250, 249, 0.94)), url("../img/themes/landscape.svg");
}

/* 登录页/首页满铺底图（定义与消费同在本文件，相对路径按本文件解析） */
html[data-theme="landscape"] body {
    background: url("../img/themes/landscape.svg") center/cover no-repeat fixed;
}


/* 极速赛车：碳黑赛道 F1 方格旗 */
html[data-theme="racing"] {
    --primary-color: #e10600;
    --secondary-color: #17171c;
    --grad-from: #e10600;
    --grad-to: #17171c;
    --bs-primary: #dc2626;
    --bs-primary-rgb: 220, 38, 38;
    --bs-link-color: #b91c1c;
    --bs-link-color-rgb: 185, 28, 28;
    --bs-link-hover-color: #991b1b;
    --bs-link-hover-color-rgb: 153, 27, 27;
    --app-bg-color: #f0f0f2;
    --app-bg-image: linear-gradient(rgba(246, 246, 248, 0.94), rgba(246, 246, 248, 0.94)), url("../img/themes/racing.svg");
}

/* 登录页/首页满铺底图（定义与消费同在本文件，相对路径按本文件解析） */
html[data-theme="racing"] body {
    background: url("../img/themes/racing.svg") center/cover no-repeat fixed;
}


/* 云端飞行：晴空爬升客机航迹云 */
html[data-theme="aviator"] {
    --primary-color: #2563eb;
    --secondary-color: #1e3a8a;
    --grad-from: #2563eb;
    --grad-to: #1e3a8a;
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #1d4ed8;
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: #1e40af;
    --bs-link-hover-color-rgb: 30, 64, 175;
    --app-bg-color: #e9f2fc;
    --app-bg-image: linear-gradient(rgba(244, 249, 255, 0.93), rgba(244, 249, 255, 0.93)), url("../img/themes/aviator.svg");
}

/* 登录页/首页满铺底图（定义与消费同在本文件，相对路径按本文件解析） */
html[data-theme="aviator"] body {
    background: url("../img/themes/aviator.svg") center/cover no-repeat fixed;
}


/* 星空夜语：深蓝夜幕繁星弯月 */
html[data-theme="starry"] {
    --primary-color: #6d28d9;
    --secondary-color: #0f172a;
    --grad-from: #6d28d9;
    --grad-to: #0f172a;
    --bs-primary: #7c3aed;
    --bs-primary-rgb: 124, 58, 237;
    --bs-link-color: #6d28d9;
    --bs-link-color-rgb: 109, 40, 217;
    --bs-link-hover-color: #5b21b6;
    --bs-link-hover-color-rgb: 91, 33, 182;
    --app-bg-color: #eef0f8;
    --app-bg-image: linear-gradient(rgba(242, 244, 252, 0.93), rgba(242, 244, 252, 0.93)), url("../img/themes/starry.svg");
}

/* 登录页/首页满铺底图（定义与消费同在本文件，相对路径按本文件解析） */
html[data-theme="starry"] body {
    background: url("../img/themes/starry.svg") center/cover no-repeat fixed;
}


/* ==================== 主题背景消费 ====================
   应用内容区（base.html / mobile/base.html 的 body.app-shell）：
   纯色主题无 --app-bg-* 变量 → 回退骨架原有底色；
   背景图主题 → 浅色蒙版 + 底图（fixed 铺满视口，小屏取消 fixed 防卡顿） */
html[data-theme] body.app-shell {
    background-color: var(--app-bg-color, #f8f9fa);
    background-image: var(--app-bg-image, none);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

@media (max-width: 767.98px) {
    html[data-theme] body.app-shell {
        background-attachment: scroll;
    }
}

/* ==================== 白字表面对消费 ====================
   各骨架/模块页写在渐变里硬引用品牌亮色对的白字表面，
   此处统一压到 --grad-* 深色对（同 specificity 后加载覆盖成立），
   一处声明全站生效；未定义 --grad-* 的旧主题回退亮色对不回归 */
.navbar,
.m-topbar,
.login-header,
.btn-login,
.login-left,
.btn-feature,
.btn-primary {
    background-image: linear-gradient(135deg, var(--grad-from, var(--primary-color, #667eea)) 0%, var(--grad-to, var(--secondary-color, #764ba2)) 100%);
}

/* ==================== Bootstrap 组件接管道 ====================
   一次定义、全主题生效：把 Bootstrap 硬编码蓝的常用组件
   改接 --bs-primary / 链接色变量，随主题联动 */

.btn-outline-primary {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-primary {
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    border: none;
}

.btn-link {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-active-color: var(--bs-link-hover-color);
}

/* 主按钮渐变已上收至「白字表面对消费」区，此处仅保留深色 hover 投影 */
.btn-primary:hover {
    box-shadow: 0 5px 15px rgba(var(--bs-primary-rgb), 0.35);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.22);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-check-input:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.45);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.22);
}

.form-switch .form-check-input:checked:focus {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.pagination {
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.page-item.active .page-link {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}

.list-group-item.active {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--bs-primary);
}

/* ==================== 侧栏可读性（全主题） ====================
   激活项文字/图标用深色链接色（品牌亮色在白底上对比不足 3:1），
   左侧强调条保留品牌亮色维持主题识别 */
html[data-theme] .sidebar .nav-link.active {
    color: var(--bs-link-color, var(--primary-color));
}

/* ==================== 午夜墨蓝：深色导航 + 深色侧栏 ==================== */

html[data-theme="midnight"] .sidebar {
    background: #0f172a;
    border-right-color: #1e293b;
}

html[data-theme="midnight"] .sidebar .nav-link {
    color: #cbd5e1;
}

html[data-theme="midnight"] .sidebar .nav-link:hover {
    background: rgba(148, 163, 184, 0.12);
    border-left-color: #38bdf8;
    color: #f1f5f9;
}

html[data-theme="midnight"] .sidebar .nav-link.active {
    background: rgba(56, 189, 248, 0.16);
    border-left-color: #38bdf8;
    color: #7dd3fc;
}

html[data-theme="midnight"] .sidebar .section-title {
    color: #64748b;
}

/* ==================== 个人中心 · 外观主题选择卡 ==================== */

.theme-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 12px;
}

.theme-picker-card {
    border: 2px solid #e9ecef;
    border-radius: 10px;
    background: #fff;
    padding: 10px 8px 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.theme-picker-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.theme-picker-card.active {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}

.theme-picker-swatch {
    position: relative;
    width: 100%;
    height: 44px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.theme-picker-swatch i {
    font-size: 1.3rem;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* 背景图主题色卡：铺底图而非渐变 */
.theme-picker-swatch-img {
    background-size: cover;
    background-position: center;
}

.theme-picker-card.active .theme-picker-swatch i {
    opacity: 1;
}

.theme-picker-name {
    font-size: 0.82rem;
    color: #495057;
    line-height: 1.2;
    text-align: center;
}

.theme-picker-card.active .theme-picker-name {
    color: var(--bs-link-color);
    font-weight: 600;
}

/* ==================== 背景图主题 · 导航条铺底图 ====================
   背景图主题的顶栏直接铺主题底图（与登录页/首页满铺底图同源），不再以
   纯色渐变盖住主题背景；叠一层深色纱保证白字可读——亮底图 0.5、中底图
   0.42、暗底图 0.3，白字对比 ≥4.5:1。url() 与消费同在本文件（相对路径
   按本文件解析）；新增背景图主题必须同步补一段同名规则。 */
html[data-theme="pattern"] .navbar,
html[data-theme="pattern"] .m-topbar {
    background-image: linear-gradient(rgba(9, 13, 26, 0.42), rgba(9, 13, 26, 0.42)), url("../img/themes/pattern.svg");
    background-size: cover;
    background-position: center;
}

html[data-theme="cartoon"] .navbar,
html[data-theme="cartoon"] .m-topbar {
    background-image: linear-gradient(rgba(9, 13, 26, 0.5), rgba(9, 13, 26, 0.5)), url("../img/themes/cartoon.svg");
    background-size: cover;
    background-position: center;
}

html[data-theme="guofeng"] .navbar,
html[data-theme="guofeng"] .m-topbar {
    background-image: linear-gradient(rgba(9, 13, 26, 0.3), rgba(9, 13, 26, 0.3)), url("../img/themes/guofeng.svg");
    background-size: cover;
    background-position: center;
}

html[data-theme="flowerbird"] .navbar,
html[data-theme="flowerbird"] .m-topbar {
    background-image: linear-gradient(rgba(9, 13, 26, 0.5), rgba(9, 13, 26, 0.5)), url("../img/themes/flowerbird.svg");
    background-size: cover;
    background-position: center;
}

html[data-theme="landscape"] .navbar,
html[data-theme="landscape"] .m-topbar {
    background-image: linear-gradient(rgba(9, 13, 26, 0.5), rgba(9, 13, 26, 0.5)), url("../img/themes/landscape.svg");
    background-size: cover;
    background-position: center;
}

html[data-theme="racing"] .navbar,
html[data-theme="racing"] .m-topbar {
    background-image: linear-gradient(rgba(9, 13, 26, 0.3), rgba(9, 13, 26, 0.3)), url("../img/themes/racing.svg");
    background-size: cover;
    background-position: center;
}

html[data-theme="aviator"] .navbar,
html[data-theme="aviator"] .m-topbar {
    background-image: linear-gradient(rgba(9, 13, 26, 0.5), rgba(9, 13, 26, 0.5)), url("../img/themes/aviator.svg");
    background-size: cover;
    background-position: center;
}

html[data-theme="starry"] .navbar,
html[data-theme="starry"] .m-topbar {
    background-image: linear-gradient(rgba(9, 13, 26, 0.3), rgba(9, 13, 26, 0.3)), url("../img/themes/starry.svg");
    background-size: cover;
    background-position: center;
}

/* ==================== 导航条主题标识条 ====================
   顶栏底缘 6px 主题条：背景图主题铺主题底图（内容区盖住满屏背景后，
   顶栏仍一眼可辨主题）；纯色主题铺品牌亮色对（装饰强调用途）。
   定义与消费同在本文件（url() 相对路径按本文件解析）。 */
.navbar::after,
.m-topbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    background-size: cover;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

html[data-theme="pattern"] .navbar::after,
html[data-theme="pattern"] .m-topbar::after {
    background-image: url("../img/themes/pattern.svg");
}

html[data-theme="cartoon"] .navbar::after,
html[data-theme="cartoon"] .m-topbar::after {
    background-image: url("../img/themes/cartoon.svg");
}

html[data-theme="guofeng"] .navbar::after,
html[data-theme="guofeng"] .m-topbar::after {
    background-image: url("../img/themes/guofeng.svg");
}

html[data-theme="flowerbird"] .navbar::after,
html[data-theme="flowerbird"] .m-topbar::after {
    background-image: url("../img/themes/flowerbird.svg");
}

html[data-theme="landscape"] .navbar::after,
html[data-theme="landscape"] .m-topbar::after {
    background-image: url("../img/themes/landscape.svg");
}

html[data-theme="racing"] .navbar::after,
html[data-theme="racing"] .m-topbar::after {
    background-image: url("../img/themes/racing.svg");
}

html[data-theme="aviator"] .navbar::after,
html[data-theme="aviator"] .m-topbar::after {
    background-image: url("../img/themes/aviator.svg");
}

html[data-theme="starry"] .navbar::after,
html[data-theme="starry"] .m-topbar::after {
    background-image: url("../img/themes/starry.svg");
}

/* ==================== 导航条主题胶囊 + 快捷切换菜单 ==================== */

/* 顶栏上的当前主题色卡胶囊（小圆卡） */
.nav-theme-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    display: inline-block;
    flex: 0 0 auto;
}

/* 下拉里的主题九宫格 */
.theme-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.theme-menu-item {
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.theme-menu-item:hover {
    background: #f1f3f5;
}

.theme-menu-item.active {
    border-color: var(--bs-primary);
}

.theme-menu-swatch {
    width: 44px;
    height: 30px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    display: inline-block;
}

.theme-menu-name {
    max-width: 72px;
    font-size: 0.72rem;
    color: #495057;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-menu-item.active .theme-menu-name {
    color: var(--bs-link-color);
    font-weight: 600;
}