/* ==========================================================================
   留歌 UI Kit 设计系统 v1.0.0
   独立增量层：设计令牌 / 多主题 / 26 项视觉升级 / 暗色模式
   ========================================================================== */

/* --------------------------------------------------------------------------
   4. 全局设计令牌（色板 / 圆角 / 阴影 / 缓动）
   -------------------------------------------------------------------------- */
:root {
    /* 主色板 */
    --lg-blue: #3b6ff5;
    --lg-blue-2: #5b8def;
    --lg-green: #10b981;
    --lg-green-2: #34d399;
    --lg-red: #ef4444;
    --lg-red-2: #f87171;

    /* 柔和灰阶 */
    --lg-gray-50:  #f8fafc;
    --lg-gray-100: #f1f5f9;
    --lg-gray-200: #e5e9f0;
    --lg-gray-300: #cbd3e0;
    --lg-gray-400: #94a3b8;
    --lg-gray-500: #64748b;
    --lg-gray-600: #475569;
    --lg-gray-700: #334155;
    --lg-gray-800: #1e293b;
    --lg-gray-900: #0f172a;

    /* 语义色 */
    --lg-primary: var(--lg-blue);
    --lg-primary-rgb: 59, 111, 245;
    --lg-success: var(--lg-green);
    --lg-success-rgb: 16, 185, 129;
    --lg-danger: var(--lg-red);
    --lg-danger-rgb: 239, 68, 68;

    /* 圆角 / 动效 / 阴影 */
    --lg-radius: 0.5rem;
    --lg-radius-sm: 0.375rem;
    --lg-radius-lg: 0.875rem;
    --lg-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --lg-shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.06), 0 1px 2px rgba(17, 24, 39, 0.04);
    --lg-shadow: 0 6px 16px -4px rgba(17, 24, 39, 0.08), 0 2px 6px -2px rgba(17, 24, 39, 0.05);
    --lg-shadow-lg: 0 16px 40px -12px rgba(17, 24, 39, 0.16), 0 6px 14px -6px rgba(17, 24, 39, 0.08);

    /* 表面色（亮色） */
    --lg-body-bg: #f0f2f5;
    --lg-surface: #ffffff;
    --lg-surface-2: #f8fafc;
    --lg-text: #1e293b;
    --lg-text-muted: #64748b;
    --lg-border: #e5e9f0;

    /* 八色渐变库（图标/分区） */
    --lg-g1: linear-gradient(135deg, #3b6ff5, #5b8def);
    --lg-g2: linear-gradient(135deg, #10b981, #34d399);
    --lg-g3: linear-gradient(135deg, #7c3aed, #a78bfa);
    --lg-g4: linear-gradient(135deg, #ec4899, #f472b6);
    --lg-g5: linear-gradient(135deg, #f59e0b, #fbbf24);
    --lg-g6: linear-gradient(135deg, #06b6d4, #22d3ee);
    --lg-g7: linear-gradient(135deg, #6366f1, #818cf8);
    --lg-g8: linear-gradient(135deg, #f43f5e, #fb7185);

    /* 主渐变：跟随主题色（默认留歌蓝），供顶部氛围/登录按钮/悬浮条统一使用 */
    --lg-primary-grad: var(--lg-g1);
}

/* Bootstrap 变量对齐 */
:root {
    --bs-primary: var(--lg-blue);
    --bs-primary-rgb: var(--lg-primary-rgb);
    --bs-link-color: var(--lg-blue);
    --bs-link-color-rgb: var(--lg-primary-rgb);
    --bs-link-hover-color: #2f5de0;
    --bs-border-radius: var(--lg-radius);
    --bs-border-radius-sm: var(--lg-radius-sm);
    --bs-border-radius-lg: var(--lg-radius-lg);
    --bs-body-color: var(--lg-text);
    --bs-border-color: var(--lg-border);
    --bs-btn-primary-bg: var(--lg-blue);
    --bs-btn-primary-border-color: var(--lg-blue);
    --bs-btn-primary-hover-bg: #2f5de0;
    --bs-btn-primary-hover-border-color: #2f5de0;
    --bs-btn-primary-active-bg: #2a53c9;
    --bs-btn-border-radius: var(--lg-radius);
}

/* 多主题配色。
 * 关键：主题主样式(main.min.css)的组件真实使用 --ri-primary 体系，且 .btn-primary 等
 * 把主色硬编码为 #2163e8（不引用任何变量），仅覆盖 --lg-primary/--bs-primary 不会生效。
 * 因此每个配色先定义 --tc/--tc-rgb/--tc-h/--tc-a 四个主题变量，再用下方统一组件规则覆盖。 */
html[data-lg-theme="green"]  { --tc:#10b981; --tc-rgb:16,185,129;  --tc-h:#0d9a6c; --tc-a:#0b855d;
    --lg-blue:#10b981; --lg-blue-2:#34d399; --lg-primary:#10b981; --lg-primary-rgb:16,185,129;
    --ri-primary:#10b981; --ri-primary-rgb:16,185,129;
    --bs-primary:#10b981; --bs-primary-rgb:16,185,129;
    --lg-primary-grad:linear-gradient(135deg,#10b981,#34d399); }
html[data-lg-theme="purple"] { --tc:#7c3aed; --tc-rgb:124,58,237; --tc-h:#6d28d9; --tc-a:#5b21b6;
    --lg-blue:#7c3aed; --lg-blue-2:#a78bfa; --lg-primary:#7c3aed; --lg-primary-rgb:124,58,237;
    --ri-primary:#7c3aed; --ri-primary-rgb:124,58,237;
    --bs-primary:#7c3aed; --bs-primary-rgb:124,58,237;
    --lg-primary-grad:linear-gradient(135deg,#7c3aed,#a78bfa); }
html[data-lg-theme="red"]    { --tc:#ef4444; --tc-rgb:239,68,68;  --tc-h:#dc2626; --tc-a:#b91c1c;
    --lg-blue:#ef4444; --lg-blue-2:#f87171; --lg-primary:#ef4444; --lg-primary-rgb:239,68,68;
    --ri-primary:#ef4444; --ri-primary-rgb:239,68,68;
    --bs-primary:#ef4444; --bs-primary-rgb:239,68,68;
    --lg-primary-grad:linear-gradient(135deg,#ef4444,#f87171); }
html[data-lg-theme="dark"]   { --tc:#60a5fa; --tc-rgb:96,165,250; --tc-h:#3b82f6; --tc-a:#2563eb;
    --lg-blue:#60a5fa; --lg-blue-2:#93c5fd; --lg-primary:#60a5fa; --lg-primary-rgb:96,165,250;
    --ri-primary:#60a5fa; --ri-primary-rgb:96,165,250;
    --bs-primary:#60a5fa; --bs-primary-rgb:96,165,250;
    --lg-primary-grad:linear-gradient(135deg,#60a5fa,#93c5fd); }

/* 统一覆盖主样式中硬编码 #2163e8 的组件（选择器带 html 前缀提高特异性，确保后加载覆盖） */
html[data-lg-theme] .btn-primary {
    --ri-btn-bg:var(--tc); --ri-btn-border-color:var(--tc);
    --ri-btn-hover-bg:var(--tc-h); --ri-btn-hover-border-color:var(--tc-h);
    --ri-btn-active-bg:var(--tc-a); --ri-btn-active-border-color:var(--tc-a);
    --ri-btn-disabled-bg:var(--tc); --ri-btn-disabled-border-color:var(--tc);
    --ri-btn-focus-shadow-rgb:var(--tc-rgb);
    background-color:var(--tc); border-color:var(--tc);
}
html[data-lg-theme] .btn-primary:hover,
html[data-lg-theme] .btn-primary:focus { background-color:var(--tc-h); border-color:var(--tc-h); }
html[data-lg-theme] .btn-primary:active,
html[data-lg-theme] .btn-primary.show { background-color:var(--tc-a); border-color:var(--tc-a); }
html[data-lg-theme] .btn-outline-primary {
    --ri-btn-color:var(--tc); --ri-btn-border-color:var(--tc);
    --ri-btn-hover-bg:var(--tc); --ri-btn-hover-border-color:var(--tc);
    --ri-btn-active-bg:var(--tc-a); --ri-btn-active-border-color:var(--tc-a);
    --ri-btn-focus-shadow-rgb:var(--tc-rgb);
    color:var(--tc); border-color:var(--tc);
}
html[data-lg-theme] .btn-primary-soft { color:var(--tc); background-color:rgba(var(--tc-rgb),.1); }
html[data-lg-theme] .btn-primary-soft:active,
html[data-lg-theme] .btn-primary-soft:hover { color:#fff; background-color:var(--tc); border-color:var(--tc); }
html[data-lg-theme] .btn-primary-soft:focus { color:var(--tc); background-color:rgba(var(--tc-rgb),.1); border-color:rgba(var(--tc-rgb),.25); }
html[data-lg-theme] .link-primary { color:var(--tc) !important; }
html[data-lg-theme] .form-check-input:checked,
html[data-lg-theme] .form-check-input[type=checkbox]:indeterminate { background-color:var(--tc); border-color:var(--tc); }
html[data-lg-theme] .form-range::-webkit-slider-thumb { background-color:var(--tc); }
html[data-lg-theme] .form-range::-moz-range-thumb { background-color:var(--tc); }
html[data-lg-theme] .navbar .nav-list>.menu-item.current-menu-item>a,
html[data-lg-theme] .uc-page .uc-menu-warp .menu-item a:hover { color:var(--tc); }
/* 激活项为主题渐变胶囊底，文字保持白色保证对比度 */
html[data-lg-theme] .uc-page .uc-menu-warp .menu-item.current-menu-item a { color:#fff; }
html[data-lg-theme] .post-content .h3::before,
html[data-lg-theme] .post-content h3::before { background:var(--tc); }
html[data-lg-theme] .text-primary,
html[data-lg-theme] .text-primary a { color:var(--tc) !important; }
html[data-lg-theme] a.text-primary { color:var(--tc) !important; }
html[data-lg-theme] .bg-primary,
html[data-lg-theme] .badge.bg-primary { background-color:var(--tc) !important; }
html[data-lg-theme] .page-numbers.current,
html[data-lg-theme] .custom-nav .pagination span.current { background-color:var(--tc); border-color:var(--tc); color:#fff; }
html[data-lg-theme] .price-header.bg-primary { background:linear-gradient(135deg,var(--tc),var(--tc-h)) !important; }
html[data-lg-theme] .badge-primary-soft { background:rgba(var(--tc-rgb),.12); color:var(--tc-h); }

/* 6. body 基础 */
body {
    background-color: var(--lg-user-bg, var(--lg-body-bg));
    color: var(--lg-text);
    transition: background-color 0.4s var(--lg-ease);
}
html.lg-custom-bg body { background-color: var(--lg-user-bg); }

a, .btn, .post-item, .card, .nav-list a, .form-control, .form-select, .search-input {
    transition-timing-function: var(--lg-ease);
}
*, *::before, *::after { scrollbar-width: thin; scrollbar-color: var(--lg-gray-300) transparent; }

/* --------------------------------------------------------------------------
   7. 导航栏毛玻璃 + 主题色氛围 + 登录按钮渐变
   -------------------------------------------------------------------------- */
.site-header {
    /* 顶部跟随主题色：极淡主题色渐变氛围 + 白色毛玻璃，换色时顶部色调同步变化 */
    background:
        linear-gradient(90deg, rgba(var(--lg-primary-rgb), 0.10), rgba(var(--lg-primary-rgb), 0.04) 45%, rgba(var(--lg-primary-rgb), 0.10)),
        rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(var(--lg-primary-rgb), 0.14);
    box-shadow: 0 1px 12px rgba(17, 24, 39, 0.05);
}
/* 顶部主题色强调线：1px 主题渐变，精致点缀 */
.site-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--lg-primary-grad);
    opacity: .9;
    pointer-events: none;
}
/* 用户自定义背景色：顶部导航跟随（浅色模式下用背景色+透明度，暗色主题不受影响） */
html.lg-custom-bg:not([data-bs-theme="dark"]) .site-header {
    background:
        linear-gradient(90deg, rgba(var(--lg-primary-rgb), 0.10), rgba(var(--lg-primary-rgb), 0.04) 45%, rgba(var(--lg-primary-rgb), 0.10)),
        rgba(var(--lg-user-bg-rgb, 255,255,255), 0.72);
}
.site-header .navbar .nav-list a { border-radius: var(--lg-radius-sm); }
.site-header .navbar .nav-list .current-menu-item > a,
.site-header .navbar .nav-list .active > a {
    color: var(--lg-primary);
    background: rgba(var(--lg-primary-rgb), 0.08);
}
.login-btn,
.action-hover-menu > .avatar-warp + * .login-btn {
    background: var(--lg-primary-grad);
    color: #fff;
    border: none;
    box-shadow: 0 6px 16px -4px rgba(var(--lg-primary-rgb), 0.45);
}
.login-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(var(--lg-primary-rgb), 0.55);
    filter: brightness(1.05);
}
.action-btn { border-radius: var(--lg-radius-sm); }
.action-btn:hover { background: rgba(var(--lg-primary-rgb), 0.1); color: var(--lg-primary); }

/* --------------------------------------------------------------------------
   8. 用户下拉菜单：主题色头部 / 主题色图标 / 签到金色渐变
   （不使用炫彩流动渐变，统一跟随「个人中心-外观设置」主题色，默认留歌蓝）
   -------------------------------------------------------------------------- */
.action-hover-menu .hover-warp {
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-lg);
    overflow: hidden;
    box-shadow: var(--lg-shadow-lg);
    background: var(--lg-surface);
}
.action-hover-menu .hover-warp .hover-info {
    background: var(--lg-primary-grad);
    color: #fff;
    border: none;
}
.action-hover-menu .hover-warp .hover-info a { color: rgba(255,255,255,0.92); }
/* 菜单/退出等操作图标：统一主题色柔和底（余额、VIP 卡片内白色图标不受影响） */
.action-hover-menu .hover-warp i { border-radius: 8px; }
.navbar .action-hover-menu .hover-item .hover-link > a > i,
.action-hover-menu .hover-warp .abstop-item a > i {
    background: rgba(var(--lg-primary-rgb), 0.1);
    color: var(--lg-primary);
}
html[data-bs-theme="dark"] .navbar .action-hover-menu .hover-item .hover-link > a > i,
html[data-bs-theme="dark"] .action-hover-menu .hover-warp .abstop-item a > i {
    background: rgba(var(--lg-primary-rgb), 0.16);
    color: var(--lg-primary);
}
.action-hover-menu .hover-warp i,
.ssp-header-notify .hover-warp .badge i { width: 1.9rem; height: 1.9rem; line-height: 1.9rem; text-align: center; }
/* 签到按钮金色渐变 */
.user-qiandao-action,
.balance-qiandao a {
    background: linear-gradient(135deg, #f59e0b, #fbbf24 55%, #f59e0b) !important;
    background-size: 200% 100%;
    color: #fff !important;
    border: none;
    box-shadow: 0 6px 16px -4px rgba(245, 158, 11, 0.5);
    transition: transform 0.25s var(--lg-ease), background-position 0.4s var(--lg-ease), box-shadow 0.25s var(--lg-ease);
}
.user-qiandao-action:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 10px 22px -6px rgba(245,158,11,0.6); color: #fff !important; }

/* --------------------------------------------------------------------------
   8.5 个人中心侧边菜单：主题色圆角图标徽章（跟随「外观设置」主题色，默认留歌蓝）
   -------------------------------------------------------------------------- */
.uc-menu-warp li a > i {
    width: 2.1rem;
    height: 2.1rem;
    line-height: 2.1rem;
    flex-shrink: 0;
    text-align: center;
    border-radius: 10px;
    margin-right: 0.75rem;
    background: rgba(var(--lg-primary-rgb), 0.08);
    color: var(--lg-primary);
    font-size: 1rem;
    transition: background .25s var(--lg-ease), color .25s var(--lg-ease), transform .25s var(--lg-ease);
}
.uc-menu-warp li a:hover > i {
    background: rgba(var(--lg-primary-rgb), 0.16);
    color: var(--lg-primary);
    transform: translateY(-1px) scale(1.04);
}
.uc-menu-warp li.menu-item.current-menu-item a > i {
    background: rgba(255,255,255,0.24);
    color: #fff;
}
/* 激活项胶囊 / 悬停底色：跟随主题色（替换硬编码紫蓝渐变；body.uc-page 前缀提高特异性压过 main.min.css 的 #2163e8） */
body.uc-page .uc-menu-warp li a:hover {
    background: rgba(var(--lg-primary-rgb), 0.06);
    color: var(--lg-primary);
}
body.uc-page .uc-menu-warp li.menu-item.current-menu-item a {
    background: var(--lg-primary-grad);
    color: #fff;
    box-shadow: 0 4px 15px rgba(var(--lg-primary-rgb), 0.35);
}
/* 永久会员(SVIP)金色主题下的激活图标保持金色 */
.lg-svip-menu .uc-menu-warp .menu-item.current-menu-item a > i {
    background: rgba(245,158,11,.16);
    color: #d97706;
}
/* 移动端双列菜单：图标徽章紧凑化 */
@media (max-width: 767.98px) {
    .uc-menu-warp li a > i {
        width: 1.8rem;
        height: 1.8rem;
        line-height: 1.8rem;
        border-radius: 8px;
        margin-right: 0.5rem;
        font-size: 0.9rem;
    }
}

/* --------------------------------------------------------------------------
   8.6 顶部操作图标：主题色圆角徽章（搜索/公告/通知，与个人中心侧栏一致）
   -------------------------------------------------------------------------- */
.navbar .actions .action-btn:not(.login-btn):not(.language-selector) i {
    width: 1.85rem;
    height: 1.85rem;
    line-height: 1.85rem;
    text-align: center;
    border-radius: 9px;
    font-size: 0.95rem;
    background: rgba(var(--lg-primary-rgb), 0.08);
    color: var(--lg-primary);
    transition: background .25s var(--lg-ease), color .25s var(--lg-ease), transform .25s var(--lg-ease);
}
.navbar .actions .action-btn:not(.login-btn):not(.language-selector):hover { opacity: 1; }
.navbar .actions .action-btn:not(.login-btn):not(.language-selector):hover i {
    background: rgba(var(--lg-primary-rgb), 0.18);
    color: var(--lg-primary);
    transform: translateY(-1px);
}
/* 我的通知未读徽标（原为无样式裸数字） */
.ssp-header-notify .ssp-notify-bell { position: relative; }
.ssp-header-notify .ssp-unread-badge {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 1.05rem;
    height: 1.05rem;
    line-height: 1.05rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

/* --------------------------------------------------------------------------
   9. 文章卡片：hover 彩虹流动条 + 上浮 4px
   -------------------------------------------------------------------------- */
.post-item {
    position: relative;
    border-radius: var(--lg-radius);
    overflow: hidden;
    background: var(--lg-surface);
    box-shadow: var(--lg-shadow-sm);
    transition: transform 0.3s var(--lg-ease), box-shadow 0.3s var(--lg-ease);
}
.post-item::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b6ff5, #7c3aed, #ec4899, #f59e0b, #10b981, #06b6d4, #3b6ff5);
    background-size: 300% 100%;
    opacity: 0;
    z-index: 4;
    transition: opacity 0.3s var(--lg-ease);
}
.post-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--lg-shadow-lg);
}
.post-item:hover::before { opacity: 1; animation: lg-rainbow 3s linear infinite; }
@keyframes lg-rainbow { to { background-position: 300% 0; } }

/* --------------------------------------------------------------------------
   10. 标题渐变文字 / H2/H3 装饰线 / 引用蓝色强调条
   -------------------------------------------------------------------------- */
.entry-title a,
.entry-title {
    background: linear-gradient(120deg, var(--lg-gray-900) 30%, var(--lg-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
.entry-title a { -webkit-text-fill-color: currentColor; }
.entry-title a:hover { -webkit-text-fill-color: transparent; }

.single .entry-content h2,
.page .entry-content h2,
article .post-content h2 {
    position: relative;
    padding-left: 14px;
    line-height: 1.4;
}
.single .entry-content h2::before,
.page .entry-content h2::before,
article .post-content h2::before {
    content: "";
    position: absolute;
    left: 0; top: 0.18em; bottom: 0.18em;
    width: 5px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--lg-blue), #7c3aed);
}
.single .entry-content h3,
.page .entry-content h3,
article .post-content h3 {
    position: relative;
    padding-left: 12px;
}
.single .entry-content h3::before,
.page .entry-content h3::before,
article .post-content h3::before {
    content: "";
    position: absolute;
    left: 0; top: 0.22em; bottom: 0.22em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--lg-blue-2), #22d3ee);
}
.entry-content blockquote,
.post-content blockquote {
    border-left: 4px solid var(--lg-blue);
    background: rgba(var(--lg-primary-rgb), 0.06);
    border-radius: 0 var(--lg-radius) var(--lg-radius) 0;
    padding: 12px 18px;
    margin: 1.2em 0;
    color: var(--lg-gray-700);
}

/* --------------------------------------------------------------------------
   11. 标签云 hover 实心蓝 / 分页前后渐变圆圈
   -------------------------------------------------------------------------- */
.tagcloud a,
a.tag-cloud-link,
.widget .tagcloud a {
    display: inline-block;
    margin: 4px 6px 4px 0;
    padding: 4px 14px;
    border-radius: 999px;
    border: 1px solid var(--lg-border);
    background: var(--lg-surface);
    color: var(--lg-gray-600);
    font-size: 0.85rem;
    transition: all 0.25s var(--lg-ease);
}
.tagcloud a:hover,
a.tag-cloud-link:hover,
.widget .tagcloud a:hover {
    background: var(--lg-primary);
    border-color: var(--lg-primary);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px rgba(var(--lg-primary-rgb), 0.5);
}
.pagination .page-numbers {
    border-radius: 999px;
    margin: 0 3px;
    border: 1px solid var(--lg-border);
    transition: all 0.25s var(--lg-ease);
}
.pagination .prev,
.pagination .next,
.page-links > .post-page-numbers:first-child,
.pagination a[rel="prev"],
.pagination a[rel="next"] {
    width: 38px; height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lg-g1);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px -3px rgba(59, 111, 245, 0.45);
}
.pagination .prev:hover,
.pagination .next:hover { transform: translateY(-2px) scale(1.05); color: #fff; }
.pagination .current,
.pagination .active > .page-link {
    background: var(--lg-g1);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(var(--lg-primary-rgb), 0.18), 0 6px 16px -6px rgba(var(--lg-primary-rgb), 0.6);
}

/* --------------------------------------------------------------------------
   12. 评论区标题装饰条 + 提交按钮渐变
   -------------------------------------------------------------------------- */
.comments-title {
    position: relative;
    padding: 6px 0 6px 14px;
}
.comments-title::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 70%;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--lg-blue), #7c3aed);
}
.form-submit #submit,
.comment-form #submit,
#submit {
    background: var(--lg-g1);
    border: none;
    color: #fff;
    padding: 9px 30px;
    border-radius: 999px;
    box-shadow: 0 6px 16px -4px rgba(59, 111, 245, 0.45);
    transition: transform 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease), filter 0.25s var(--lg-ease);
}
.form-submit #submit:hover,
#submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px -6px rgba(59, 111, 245, 0.55);
}
.comment-form-comment textarea,
.comment-form input {
    border-radius: var(--lg-radius);
    border-color: var(--lg-border);
}

/* --------------------------------------------------------------------------
   13. 价格卡片：六色渐变头 + 光泽扫过
   -------------------------------------------------------------------------- */
.price-card {
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-lg);
    overflow: hidden;
    transition: transform 0.3s var(--lg-ease), box-shadow 0.3s var(--lg-ease);
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--lg-shadow-lg); }
.price-card .price-header { position: relative; overflow: hidden; }
.price-header.bg-primary   { background: linear-gradient(135deg, #3b6ff5, #5b8def) !important; }
.price-header.bg-success   { background: linear-gradient(135deg, #10b981, #34d399) !important; }
.price-header.bg-danger    { background: linear-gradient(135deg, #ef4444, #f87171) !important; }
.price-header.bg-warning   { background: linear-gradient(135deg, #f59e0b, #fbbf24) !important; }
.price-header.bg-info      { background: linear-gradient(135deg, #06b6d4, #22d3ee) !important; }
.price-header.bg-secondary { background: linear-gradient(135deg, #64748b, #94a3b8) !important; }
.price-card .price-header::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s var(--lg-ease);
}
.price-card:hover .price-header::after { left: 130%; }

/* --------------------------------------------------------------------------
   14. 分区图标八色渐变 / 排行榜金银铜徽章
   -------------------------------------------------------------------------- */
.ri-board-tit i,
.home-widget .widget-title i,
.widget-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: var(--lg-radius-sm);
    background: var(--lg-g1);
    color: #fff;
    font-style: normal;
}
.home-widget:nth-child(8n+1) .widget-title i,
.ri-sidenav-panel:nth-child(8n+1) .ri-board-tit i { background: var(--lg-g1); }
.home-widget:nth-child(8n+2) .widget-title i,
.ri-sidenav-panel:nth-child(8n+2) .ri-board-tit i { background: var(--lg-g2); }
.home-widget:nth-child(8n+3) .widget-title i,
.ri-sidenav-panel:nth-child(8n+3) .ri-board-tit i { background: var(--lg-g3); }
.home-widget:nth-child(8n+4) .widget-title i,
.ri-sidenav-panel:nth-child(8n+4) .ri-board-tit i { background: var(--lg-g4); }
.home-widget:nth-child(8n+5) .widget-title i,
.ri-sidenav-panel:nth-child(8n+5) .ri-board-tit i { background: var(--lg-g5); }
.home-widget:nth-child(8n+6) .widget-title i,
.ri-sidenav-panel:nth-child(8n+6) .ri-board-tit i { background: var(--lg-g6); }
.home-widget:nth-child(8n+7) .widget-title i,
.ri-sidenav-panel:nth-child(8n+7) .ri-board-tit i { background: var(--lg-g7); }
.home-widget:nth-child(8n+8) .widget-title i,
.ri-sidenav-panel:nth-child(8n+8) .ri-board-tit i { background: var(--lg-g8); }

.ri-rank-item .ri-rank-num { border-radius: 10px; color: #fff; font-weight: 700; }
.ri-rank-list .ri-rank-item:nth-child(1) .ri-rank-num,
.ri-rank-item:nth-child(1) .ri-rank-num { background: linear-gradient(135deg, #f59e0b, #fde68a, #d97706); color: #4a2f00; }
.ri-rank-list .ri-rank-item:nth-child(2) .ri-rank-num,
.ri-rank-item:nth-child(2) .ri-rank-num { background: linear-gradient(135deg, #94a3b8, #e2e8f0, #64748b); color: #1e293b; }
.ri-rank-list .ri-rank-item:nth-child(3) .ri-rank-num,
.ri-rank-item:nth-child(3) .ri-rank-num { background: linear-gradient(135deg, #b45309, #d97706, #92400e); color: #fff7ed; }

/* --------------------------------------------------------------------------
   15. 编号八色双色渐变循环 / 16. 统计渐变文字 / 分类导航 active 发光
   -------------------------------------------------------------------------- */
.ri-rank-item:nth-child(8n+4) .ri-rank-num { background: var(--lg-g1); }
.ri-rank-item:nth-child(8n+5) .ri-rank-num { background: var(--lg-g2); }
.ri-rank-item:nth-child(8n+6) .ri-rank-num { background: var(--lg-g3); }
.ri-rank-item:nth-child(8n+7) .ri-rank-num { background: var(--lg-g4); }
.ri-rank-item:nth-child(8n+8) .ri-rank-num { background: var(--lg-g5); }
.ri-rank-item:nth-child(8n+9) .ri-rank-num { background: var(--lg-g6); }
.ri-rank-item:nth-child(8n+10) .ri-rank-num { background: var(--lg-g7); }
.ri-rank-item:nth-child(8n+11) .ri-rank-num { background: var(--lg-g8); }

[class*="stat"] b,
[class*="stat"] strong,
.ri-board-tit em {
    background: var(--lg-g1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ri-sidenav-tab.active,
.ri-cat-avatar-item.active .ri-cat-avatar-title,
.nav-pills .nav-link.active {
    background: var(--lg-g1);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(var(--lg-primary-rgb), 0.15), 0 8px 18px -6px rgba(var(--lg-primary-rgb), 0.55);
}
.nav-pills .nav-link { border-radius: 999px; }

/* --------------------------------------------------------------------------
   18. 卡片 hover 浮起加深阴影
   -------------------------------------------------------------------------- */
.card {
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-sm);
    transition: transform 0.3s var(--lg-ease), box-shadow 0.3s var(--lg-ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--lg-shadow-lg); }

/* --------------------------------------------------------------------------
   19. 搜索框聚焦光晕 / 20. 回到顶部渐变
   -------------------------------------------------------------------------- */
.search-input,
.search-form .form-select {
    border-radius: 999px;
    border: 1.5px solid var(--lg-border);
    transition: box-shadow 0.25s var(--lg-ease), border-color 0.25s var(--lg-ease);
}
.search-input:focus {
    outline: none;
    border-color: var(--lg-primary);
    box-shadow: 0 0 0 4px rgba(var(--lg-primary-rgb), 0.16);
}
.search-fields { border-radius: 999px; }
.search-select .form-select { border-radius: 999px; }
.back-top {
    background: var(--lg-g1);
    color: #fff;
    border: none;
    box-shadow: 0 8px 20px -4px rgba(59, 111, 245, 0.55);
    transition: transform 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease);
}
.back-top:hover { transform: translateY(-3px); color: #fff; box-shadow: 0 12px 26px -4px rgba(59,111,245,0.65); }

/* --------------------------------------------------------------------------
   21. 按钮规范：渐变 + 彩色阴影 + 微光扫过 + 上浮
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info {
    position: relative;
    overflow: hidden;
    border: none;
    transition: transform 0.25s var(--lg-ease), box-shadow 0.25s var(--lg-ease), filter 0.25s var(--lg-ease);
}
.btn-primary { background: var(--lg-g1); box-shadow: 0 6px 16px -4px rgba(var(--lg-primary-rgb), 0.45); }
.btn-success { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 6px 16px -4px rgba(16,185,129,0.45); color:#fff; }
.btn-danger  { background: linear-gradient(135deg, #ef4444, #f87171); box-shadow: 0 6px 16px -4px rgba(239,68,68,0.4); color:#fff; }
.btn-warning { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 6px 16px -4px rgba(245,158,11,0.45); color:#fff; }
.btn-info    { background: linear-gradient(135deg, #06b6d4, #22d3ee); box-shadow: 0 6px 16px -4px rgba(6,182,212,0.45); color:#fff; }
.btn-primary::after,
.btn-success::after,
.btn-danger::after,
.btn-warning::after,
.btn-info::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 50%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s var(--lg-ease);
}
.btn-primary:hover,
.btn-success:hover,
.btn-danger:hover,
.btn-warning:hover,
.btn-info:hover {
    transform: translateY(-2px);
    color: #fff;
    filter: brightness(1.05);
}
.btn-primary:hover::after,
.btn-success:hover::after,
.btn-danger:hover::after,
.btn-warning:hover::after,
.btn-info:hover::after { left: 130%; }

/* --------------------------------------------------------------------------
   22. 轮廓按钮 2px 边框 hover 实心 + 三种新变体
   -------------------------------------------------------------------------- */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger {
    border-width: 2px;
    border-radius: var(--lg-radius);
    font-weight: 500;
    transition: all 0.25s var(--lg-ease);
}
.btn-outline-primary:hover   { background: var(--lg-primary); border-color: var(--lg-primary); transform: translateY(-2px); }
.btn-outline-success:hover   { background: var(--lg-green); border-color: var(--lg-green); transform: translateY(-2px); }
.btn-outline-danger:hover    { background: var(--lg-red); border-color: var(--lg-red); transform: translateY(-2px); }
.btn-outline-secondary:hover { background: var(--lg-gray-600); border-color: var(--lg-gray-600); transform: translateY(-2px); }

.btn-glass {
    background: rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff;
}
.btn-glass:hover { background: rgba(255,255,255,0.32); color:#fff; transform: translateY(-2px); }
.btn-gradient { background: var(--lg-g1); color: #fff; border: none; box-shadow: 0 6px 16px -4px rgba(var(--lg-primary-rgb),0.45); }
.btn-gradient:hover { color:#fff; transform: translateY(-2px); filter: brightness(1.06); }
.btn-neon {
    background: transparent;
    color: var(--lg-primary);
    border: 2px solid var(--lg-primary);
    box-shadow: 0 0 8px rgba(var(--lg-primary-rgb),0.35), inset 0 0 8px rgba(var(--lg-primary-rgb),0.12);
}
.btn-neon:hover {
    background: var(--lg-primary);
    color: #fff;
    box-shadow: 0 0 18px rgba(var(--lg-primary-rgb),0.65);
    transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   23. 柔和徽章
   -------------------------------------------------------------------------- */
.badge-soft,
.badge-primary-soft,
.badge-success-soft,
.badge-danger-soft,
.badge-warning-soft,
.badge-info-soft,
.badge-secondary-soft {
    border-radius: 999px;
    padding: 0.4em 0.85em;
    font-weight: 500;
}
.badge-primary-soft   { background: rgba(59,111,245,0.12);  color: #2f5de0; }
.badge-success-soft   { background: rgba(16,185,129,0.12);  color: #0d9a6c; }
.badge-danger-soft    { background: rgba(239,68,68,0.12);   color: #dc2626; }
.badge-warning-soft   { background: rgba(245,158,11,0.14);  color: #b45309; }
.badge-info-soft      { background: rgba(6,182,212,0.12);   color: #0e7490; }
.badge-secondary-soft { background: rgba(100,116,139,0.12); color: #475569; }

/* --------------------------------------------------------------------------
   24. 走马灯毛玻璃按钮 / 圆点加宽
   -------------------------------------------------------------------------- */
.carousel-control-prev,
.carousel-control-next {
    width: 44px; height: 44px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 12px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.35);
    opacity: 0;
    transition: opacity 0.3s var(--lg-ease), background 0.3s var(--lg-ease);
}
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next { opacity: 1; }
.carousel-control-prev:hover,
.carousel-control-next:hover { background: rgba(255,255,255,0.4); }
.carousel-indicators [data-bs-target] {
    width: 10px; height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.55);
    border: none;
    transition: width 0.3s var(--lg-ease);
}
.carousel-indicators .active { width: 26px; background: #fff; }

/* --------------------------------------------------------------------------
   25. 弹窗圆角深阴影 / 支付选项 hover 绿色边框浮起
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--lg-radius-lg);
    box-shadow: var(--lg-shadow-lg);
    overflow: hidden;
}
.modal-header, .modal-footer { border-color: var(--lg-border); }
[class*="pay-method"],
[class*="pay-option"],
.pay-channel-item,
li[data-channel],
label.pay-type {
    border: 2px solid var(--lg-border);
    border-radius: var(--lg-radius);
    transition: all 0.25s var(--lg-ease);
}
[class*="pay-method"]:hover,
[class*="pay-option"]:hover,
.pay-channel-item:hover,
li[data-channel]:hover {
    border-color: var(--lg-green);
    box-shadow: 0 10px 24px -10px rgba(16,185,129,0.5);
    transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   顶部加载进度条 & 文章阅读进度
   -------------------------------------------------------------------------- */
#lg-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
#lg-progress.is-active { opacity: 1; }
#lg-progress .lg-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #3b6ff5, #7c3aed, #ec4899);
    box-shadow: 0 0 10px rgba(59,111,245,0.7);
    border-radius: 0 3px 3px 0;
}
#lg-reading {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 1040;
    pointer-events: none;
    background: rgba(var(--lg-primary-rgb), 0.12);
}
#lg-reading span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--lg-blue), #22d3ee);
}

/* --------------------------------------------------------------------------
   顶部公告条
   -------------------------------------------------------------------------- */
.lg-announce {
    position: relative;
    z-index: 1030;
    background: linear-gradient(90deg, #3b6ff5, #5b8def 55%, #7c3aed);
    color: #fff;
    font-size: 0.875rem;
    overflow: hidden;
    max-height: 60px;
    transition: max-height 0.35s var(--lg-ease), opacity 0.35s var(--lg-ease);
}
.lg-announce-inner { display: flex; align-items: center; gap: 10px; min-height: 38px; }
.lg-announce-icon { flex: 0 0 auto; animation: lg-swing 2.4s ease-in-out infinite; }
@keyframes lg-swing { 0%,100%{ transform: rotate(-8deg);} 50%{ transform: rotate(8deg);} }
.lg-announce-text { flex: 1 1 auto; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .lg-announce-text { animation: lg-marquee 18s linear infinite; }
}
@keyframes lg-marquee { 0%{ transform: translateX(0);} 100%{ transform: translateX(-100%);} }
.lg-announce-close {
    flex: 0 0 auto;
    background: rgba(255,255,255,0.18);
    border: none;
    color: #fff;
    width: 26px; height: 26px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
}
.lg-announce-close:hover { background: rgba(255,255,255,0.38); }
html.lg-announce-off .lg-announce { display: none; }
/* 公告条存在时导航下移（导航为 sticky/fixed 时） */
.lg-announce + .site-header { top: 38px; }
@media (max-width: 575.98px) {
    .lg-announce-inner { min-height: 34px; font-size: 0.8rem; }
    .lg-announce + .site-header { top: 34px; }
}

/* --------------------------------------------------------------------------
   浮动外观面板
   -------------------------------------------------------------------------- */
.lg-fab {
    position: fixed;
    right: 18px;
    bottom: 96px;
    z-index: 1035;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.lg-fab-toggle {
    width: 46px; height: 46px;
    border-radius: 50%;
    border: none;
    background: var(--lg-g1);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 10px 24px -6px rgba(var(--lg-primary-rgb),0.55);
    cursor: pointer;
    transition: transform 0.4s var(--lg-ease);
}
.lg-fab:hover .lg-fab-toggle,
.lg-fab-toggle:hover { transform: rotate(45deg); }
.lg-fab-panel {
    width: 236px;
    background: rgba(255,255,255,0.86);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-lg);
    box-shadow: var(--lg-shadow-lg);
    padding: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(0.96);
    transform-origin: bottom right;
    transition: all 0.28s var(--lg-ease);
}
.lg-fab-panel.is-open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.lg-fab-title { font-size: 0.8rem; font-weight: 700; color: var(--lg-gray-600); margin: 8px 0 8px; }
.lg-fab-title:first-child { margin-top: 0; }
.lg-theme-list, .lg-bg-list { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-theme-dot, .lg-bg-swatch {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    box-shadow: var(--lg-shadow-sm);
    transition: transform 0.2s var(--lg-ease), border-color 0.2s;
}
.lg-theme-dot:hover, .lg-bg-swatch:hover { transform: scale(1.12); }
.lg-theme-dot.is-current { border-color: var(--lg-gray-800); box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lg-gray-400); }
.lg-bg-custom {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    position: relative;
}
.lg-bg-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.lg-bg-custom i { color: #fff; font-size: 0.75rem; pointer-events: none; }
.lg-reset-btn {
    width: 100%;
    margin-top: 12px;
    padding: 7px 0;
    border-radius: 999px;
    border: 1px solid var(--lg-border);
    background: var(--lg-surface);
    color: var(--lg-gray-600);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s var(--lg-ease);
}
.lg-reset-btn:hover { border-color: var(--lg-primary); color: var(--lg-primary); }

/* --------------------------------------------------------------------------
   16b. 外观设置面板 —— 个人中心「外观设置」页内嵌形态
   覆盖浮动定位：静态布局、面板常显、去掉毛玻璃浮层质感，融入卡片内容区
   -------------------------------------------------------------------------- */
.lg-fab--embed {
    position: static;
    right: auto;
    bottom: auto;
    z-index: auto;
    width: 100%;
    display: block;
}
.lg-fab--embed .lg-fab-toggle { display: none; }
.lg-fab--embed .lg-fab-panel {
    width: 100%;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.lg-fab--embed .lg-fab-title {
    font-size: 0.92rem;
    margin: 20px 0 12px;
}
.lg-fab--embed .lg-theme-list,
.lg-fab--embed .lg-bg-list { gap: 14px; }
.lg-fab--embed .lg-theme-dot,
.lg-fab--embed .lg-bg-swatch,
.lg-fab--embed .lg-bg-custom { width: 40px; height: 40px; }
.lg-fab--embed .lg-reset-btn {
    max-width: 240px;
    margin-top: 22px;
    padding: 9px 0;
}
/* 暗色模式：内嵌面板透明（沿用外层卡片底色），选中环用深色底衬白边 */
html[data-bs-theme="dark"] .lg-fab--embed .lg-fab-panel {
    background-color: transparent;
    border-color: transparent;
    color: inherit;
}
html[data-bs-theme="dark"] .lg-fab--embed .lg-theme-dot.is-current {
    box-shadow: 0 0 0 2px var(--lg-surface), 0 0 0 4px var(--lg-gray-400);
}

/* 背景色块当前选中态（主题点已有 is-current，补齐背景色块） */
.lg-bg-swatch.is-current {
    border-color: var(--lg-primary);
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--lg-primary);
}
.lg-fab--embed .lg-bg-swatch.is-current {
    box-shadow: 0 0 0 2px var(--lg-surface), 0 0 0 4px var(--lg-primary);
}

/* 取色器说明文字 */
.lg-picker-hint {
    margin: 10px 0 0;
    font-size: 0.74rem;
    color: var(--lg-gray-400);
    line-height: 1.5;
}

/* 保存状态提示条（保存中 / 已保存 / 失败） */
.lg-save-state {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .22s var(--lg-ease), transform .22s var(--lg-ease);
    pointer-events: none;
    background: var(--lg-gray-100);
    color: var(--lg-gray-500);
}
.lg-save-state.is-show { opacity: 1; transform: translateY(0); }
.lg-save-state.is-saving { background: rgba(59,111,245,.1); color: var(--lg-blue); }
.lg-save-state.is-ok     { background: rgba(16,185,129,.12); color: var(--lg-green); }
.lg-save-state.is-err    { background: rgba(239,68,68,.12); color: var(--lg-red); }
.lg-save-state::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 7px;
    background: currentColor;
}
.lg-save-state.is-saving::before { animation: lg-state-pulse 1s ease-in-out infinite; }
@keyframes lg-state-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* 恢复默认按钮与状态条并列时的间距 */
.lg-fab--embed .lg-save-state { margin-left: 12px; vertical-align: middle; }

html[data-bs-theme="dark"] .lg-save-state { background: var(--lg-surface-2); color: var(--lg-gray-400); }
html[data-bs-theme="dark"] .lg-picker-hint { color: var(--lg-gray-500); }

/* --------------------------------------------------------------------------
   17. 移动端底部导航毛玻璃 + active 渐变下划线
   -------------------------------------------------------------------------- */
.mobile-bottom-nav {
    background: rgba(255,255,255,0.78);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(229,233,240,0.7);
    box-shadow: 0 -6px 24px rgba(17,24,39,0.08);
    display: none;
}
.mobile-bottom-nav .nav-item {
    position: relative;
    color: var(--lg-gray-500);
    text-decoration: none;
}
.mobile-bottom-nav .nav-item i,
.mobile-bottom-nav .nav-item span { transition: color 0.25s var(--lg-ease), transform 0.25s var(--lg-ease); }
.mobile-bottom-nav .nav-item.active i,
.mobile-bottom-nav .nav-item.active span {
    color: var(--lg-primary);
}
.mobile-bottom-nav .nav-item.active i { transform: translateY(-2px) scale(1.08); }
.mobile-bottom-nav .nav-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--lg-g1);
}
@media (max-width: 991.98px) {
    .mobile-bottom-nav { display: flex; }
    body { padding-bottom: 74px; }
    .lg-fab { bottom: 84px; right: 12px; }
    .lg-fab-toggle { width: 42px; height: 42px; }
}

/* --------------------------------------------------------------------------
   写作辅助工具条
   -------------------------------------------------------------------------- */
.lg-writeaid {
    background: var(--lg-surface);
    border: 1px solid var(--lg-border);
    border-radius: var(--lg-radius-lg);
    box-shadow: var(--lg-shadow-sm);
    padding: 12px 14px;
    margin-bottom: 14px;
}
.lg-wa-head { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; margin-bottom: 10px; }
.lg-wa-head i { color: var(--lg-primary); }
.lg-wa-count { margin-left: auto; font-size: 0.8rem; color: var(--lg-gray-500); }
.lg-wa-count em { color: var(--lg-primary); font-style: normal; font-weight: 700; }
.lg-wa-tools { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.lg-wa-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lg-wa-group label { font-size: 0.8rem; color: var(--lg-gray-500); margin: 0; }
.lg-wa-chip {
    border: 1px solid var(--lg-border);
    background: var(--lg-surface-2);
    color: var(--lg-gray-700);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s var(--lg-ease);
}
.lg-wa-chip:hover { border-color: var(--lg-primary); color: var(--lg-primary); transform: translateY(-1px); }
.lg-wa-progress { height: 5px; border-radius: 3px; background: var(--lg-gray-100); margin-top: 10px; overflow: hidden; }
.lg-wa-progress i { display: block; height: 100%; width: 0; background: var(--lg-g2); border-radius: 3px; transition: width 0.3s var(--lg-ease); }
.lg-wa-msg { font-size: 0.78rem; color: var(--lg-green); margin-top: 6px; min-height: 1em; }

/* --------------------------------------------------------------------------
   26. 暗色模式全套适配
   -------------------------------------------------------------------------- */
html[data-bs-theme="dark"] {
    --lg-body-bg: #0f1419;
    --lg-surface: #1a1f2e;
    --lg-surface-2: #232a3b;
    --lg-text: #e5e7eb;
    --lg-text-muted: #94a3b8;
    --lg-border: #2d3648;
    --lg-shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
    --lg-shadow: 0 6px 16px -4px rgba(0,0,0,0.45), 0 2px 6px -2px rgba(0,0,0,0.3);
    --lg-shadow-lg: 0 16px 40px -12px rgba(0,0,0,0.6), 0 6px 14px -6px rgba(0,0,0,0.4);
}
html[data-bs-theme="dark"] body {
    background-color: var(--lg-user-bg, #0f1419);
    color: var(--lg-text);
}
html[data-bs-theme="dark"] .site-header,
html[data-bs-theme="dark"] .mobile-bottom-nav {
    background:
        linear-gradient(90deg, rgba(var(--lg-primary-rgb), 0.12), rgba(var(--lg-primary-rgb), 0.04) 45%, rgba(var(--lg-primary-rgb), 0.12)),
        rgba(19, 24, 35, 0.72);
    border-color: rgba(var(--lg-primary-rgb), 0.18);
}
html[data-bs-theme="dark"] .site-header { box-shadow: 0 1px 12px rgba(0,0,0,0.4); }
html[data-bs-theme="dark"] .site-header::before {
    opacity: .75;
}
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .post-item,
html[data-bs-theme="dark"] .price-card,
html[data-bs-theme="dark"] .widget,
html[data-bs-theme="dark"] .modal-content,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .hover-warp,
html[data-bs-theme="dark"] .action-hover-menu .hover-warp,
html[data-bs-theme="dark"] .lg-fab-panel,
html[data-bs-theme="dark"] .lg-writeaid,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .accordion-item {
    background-color: var(--lg-surface);
    border-color: var(--lg-border);
    color: var(--lg-text);
}
html[data-bs-theme="dark"] .price-card.bg-white,
html[data-bs-theme="dark"] .bg-white { background-color: var(--lg-surface) !important; }
html[data-bs-theme="dark"] .bg-light { background-color: var(--lg-surface-2) !important; }
html[data-bs-theme="dark"] .entry-title {
    background: linear-gradient(120deg, #f1f5f9 30%, var(--lg-blue-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}
html[data-bs-theme="dark"] .text-muted,
html[data-bs-theme="dark"] .text-secondary { color: var(--lg-text-muted) !important; }
html[data-bs-theme="dark"] .text-dark { color: var(--lg-text) !important; }
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select,
html[data-bs-theme="dark"] input,
html[data-bs-theme="dark"] textarea {
    background-color: var(--lg-surface-2);
    border-color: var(--lg-border);
    color: var(--lg-text);
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus {
    background-color: var(--lg-surface-2);
    color: var(--lg-text);
    border-color: var(--lg-primary);
}
html[data-bs-theme="dark"] .table,
html[data-bs-theme="dark"] .list-group-item {
    --bs-table-color: var(--lg-text);
    --bs-table-bg: var(--lg-surface);
    --bs-table-border-color: var(--lg-border);
    color: var(--lg-text);
    border-color: var(--lg-border);
}
html[data-bs-theme="dark"] .entry-content blockquote,
html[data-bs-theme="dark"] .post-content blockquote {
    background: rgba(var(--lg-primary-rgb), 0.12);
    color: var(--lg-gray-200);
}
html[data-bs-theme="dark"] .tagcloud a,
html[data-bs-theme="dark"] a.tag-cloud-link {
    background: var(--lg-surface-2);
    border-color: var(--lg-border);
    color: var(--lg-gray-300);
}
html[data-bs-theme="dark"] .pagination .page-numbers {
    background: var(--lg-surface);
    border-color: var(--lg-border);
    color: var(--lg-gray-300);
}
html[data-bs-theme="dark"] .modal-header,
html[data-bs-theme="dark"] .modal-footer { border-color: var(--lg-border); }
html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-bs-theme="dark"] .search-input,
html[data-bs-theme="dark"] .search-form .form-select {
    background: var(--lg-surface-2);
    border-color: var(--lg-border);
    color: var(--lg-text);
}
html[data-bs-theme="dark"] .lg-reset-btn { background: var(--lg-surface-2); color: var(--lg-gray-300); }
html[data-bs-theme="dark"] .lg-wa-chip { background: var(--lg-surface-2); color: var(--lg-gray-200); border-color: var(--lg-border); }
html[data-bs-theme="dark"] .lg-wa-progress { background: var(--lg-surface-2); }
html[data-bs-theme="dark"] .carousel-control-prev,
html[data-bs-theme="dark"] .carousel-control-next { background: rgba(255,255,255,0.12); }
html[data-bs-theme="dark"] .site-footer { background: var(--lg-surface); color: var(--lg-gray-300); }
html[data-bs-theme="dark"] .navbar-search,
html[data-bs-theme="dark"] .dimmer { background: rgba(10, 13, 20, 0.72); }
html[data-bs-theme="dark"] .border,
html[data-bs-theme="dark"] .border-top,
html[data-bs-theme="dark"] .border-bottom,
html[data-bs-theme="dark"] .border-end,
html[data-bs-theme="dark"] .border-start { border-color: var(--lg-border) !important; }

/* --------------------------------------------------------------------------
   首页「文章列表」小工具（.liuge-alw）暗色补齐
   该小工具自带的深色样式只挂在 @media (prefers-color-scheme: dark) 上，
   用户通过站点属性开关（[data-bs-theme="dark"]）切换暗色时不会触发，
   这里按站点暗色机制等价覆盖，色值沿用其系统暗色设计，保持层次一致。
   -------------------------------------------------------------------------- */
html[data-bs-theme="dark"] .liuge-alw {
    --alw-text-1: #f9fafb;
    --alw-text-2: #9ca3af;
    --alw-border: #374151;
    --alw-bg: #1f2937;
    --alw-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
    --alw-shadow-md: 0 10px 20px rgba(0, 0, 0, 0.40);
    --alw-shadow-lg: 0 20px 30px rgba(0, 0, 0, 0.50);
}
html[data-bs-theme="dark"] .liuge-alw-item { background: #374151; }
html[data-bs-theme="dark"] .liuge-alw.layout-circular .liuge-alw-item {
    background: linear-gradient(180deg, #374151 0%, #2d3741 100%);
}
html[data-bs-theme="dark"] .liuge-alw.layout-card .liuge-alw-media,
html[data-bs-theme="dark"] .liuge-alw .thumb-placeholder,
html[data-bs-theme="dark"] .liuge-alw.layout-circular .thumb-circle {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
}
html[data-bs-theme="dark"] .liuge-alw-meta .meta-cat a { background: rgba(99, 102, 241, 0.20); }

/* 封面懒加载占位底色（仅改 background-color，不影响元素内联 background-image 封面图） */
html[data-bs-theme="dark"] .media-img.lazy { background-color: #232a3b; }

/* 移动端首页大搜索框：home-mobile.css 以 !important 固定为 95% 白（亮色毛玻璃设计），
   暗色下与桌面深色玻璃搜索框统一；搜索区背景仍是蓝色波浪图，深框浮于其上同样协调 */
html[data-bs-theme="dark"] .search-bg .search-input,
html[data-bs-theme="dark"] .search-bg .search-input:focus {
    background: rgba(15, 20, 25, 0.92) !important;
    color: #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
}
html[data-bs-theme="dark"] .search-bg .search-input::placeholder { color: #8a93a6; }

/* --------------------------------------------------------------------------
   减弱动效偏好（无障碍）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   用户中心头像卡片 —— 文字对比度增强
   解决：VIP 信息区 bg-* bg-opacity-10 + text-* 同色系低对比度导致看不清
   ========================================================================== */

/* 头像卡片用户名：加粗 + 提升字色对比度（排除 .uc-idcard 紫蓝渐变身份卡，其文字另有白色规则） */
.user-center-card .card.text-center:not(.uc-idcard) h5 {
    font-weight: 600 !important;
    color: #1f2937 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* 登录名 / 到期时间：text-muted 加深，避免浅色背景下发虚（同样排除 .uc-idcard） */
.user-center-card .card.text-center:not(.uc-idcard) p.text-muted,
.user-center-card .card.text-center:not(.uc-idcard) sub.text-muted {
    color: #6b7280 !important;
    font-weight: 500 !important;
}

/* VIP 信息卡片文字：不管背景色如何，强制加粗加深 */
.user-center-card > .card.bg-success,
.user-center-card > .card.bg-primary,
.user-center-card > .card.bg-danger,
.user-center-card > .card.bg-info,
.user-center-card > .card.bg-warning,
.user-center-card > .card.bg-secondary {
    padding: 0.5rem 0;
}

/* VIP 信息区文字：加粗 + 纯色文字色（忽略 bg-opacity-10 的低对比） */
.user-center-card .card[class*="bg-"].bg-opacity-10 p.fw-bold {
    font-weight: 700 !important;
    -webkit-text-stroke: 0.3px;
}

/* 徽章：背景加深到 25% 透明度，文字加粗 */
.user-center-card .card[class*="bg-"].bg-opacity-10 .badge {
    background-color: rgba(0, 0, 0, 0.08) !important;
    font-weight: 600 !important;
    padding: 0.35em 0.65em !important;
}

/* ---- 暗色模式：头像卡片文字（排除 .uc-idcard，其文字在暗色下仍保持白色） ---- */
html[data-bs-theme="dark"] .user-center-card .card.text-center:not(.uc-idcard) h5 {
    color: #f1f5f9 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html[data-bs-theme="dark"] .user-center-card .card.text-center:not(.uc-idcard) p.text-muted,
html[data-bs-theme="dark"] .user-center-card .card.text-center:not(.uc-idcard) sub.text-muted {
    color: #a0aec0 !important;
}

html[data-bs-theme="dark"] .user-center-card .card[class*="bg-"].bg-opacity-10 p.fw-bold {
    color: inherit !important;
    filter: brightness(1.15);
}

html[data-bs-theme="dark"] .user-center-card .card[class*="bg-"].bg-opacity-10 .badge {
    background-color: rgba(255, 255, 255, 0.12) !important;
}

/* ==========================================================================
   27. SVIP 永久会员专属动效（仅 boosvip 用户可见，营造高级感）
   ========================================================================== */

/* 金色渐变文字动画 */
@keyframes lg-gold-text {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}
.lg-svip-gold-text {
    background: linear-gradient(120deg, #f59e0b, #fbbf24, #f59e0b, #d97706, #f59e0b);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: lg-gold-text 3s ease infinite;
}

/* 永久会员横幅：流动渐变 + 光斑 */
@keyframes lg-svip-banner-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.lg-svip-banner {
    background: linear-gradient(135deg, #f59e0b, #d97706, #b45309, #f59e0b, #fbbf24) !important;
    background-size: 300% 300% !important;
    animation: lg-svip-banner-flow 8s ease infinite;
    position: relative;
    overflow: hidden;
}
.lg-svip-banner::before {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    top: -100px; right: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.15), transparent 65%);
    animation: lg-svip-orb-a 10s ease-in-out infinite;
    pointer-events: none;
}
.lg-svip-banner::after {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    bottom: -80px; left: -50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251,191,36,.2), transparent 65%);
    animation: lg-svip-orb-b 12s ease-in-out infinite;
    pointer-events: none;
}
@keyframes lg-svip-orb-a {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(-40px,30px) scale(1.1); }
}
@keyframes lg-svip-orb-b {
    0%,100% { transform: translate(0,0) scale(1); }
    50%     { transform: translate(30px,-25px) scale(1.08); }
}

/* 永久会员头像金色光环 */
@keyframes lg-svip-avatar-ring {
    0%   { box-shadow: 0 0 0 3px rgba(245,158,11,.5), 0 0 20px rgba(245,158,11,.3); }
    50%  { box-shadow: 0 0 0 5px rgba(245,158,11,.3), 0 0 35px rgba(245,158,11,.5); }
    100% { box-shadow: 0 0 0 3px rgba(245,158,11,.5), 0 0 20px rgba(245,158,11,.3); }
}
.lg-svip-avatar .avatar-img {
    animation: lg-svip-avatar-ring 3s ease-in-out infinite;
    border-color: #f59e0b !important;
}

/* 永久会员侧边栏卡片金色顶部条 */
.lg-svip-card-top {
    position: relative;
}
.lg-svip-card-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, #f59e0b, #fbbf24, #f59e0b);
    background-size: 200% 100%;
    animation: lg-svip-banner-flow 4s linear infinite;
    z-index: 2;
}

/* 永久会员统计卡片脉冲光效 */
@keyframes lg-svip-stat-glow {
    0%,100% { box-shadow: 0 0 8px rgba(245,158,11,.15); }
    50%     { box-shadow: 0 0 20px rgba(245,158,11,.3); }
}
.lg-svip-stat {
    animation: lg-svip-stat-glow 3s ease-in-out infinite;
    border: 1px solid rgba(245,158,11,.25) !important;
}

/* 永久会员菜单高亮 */
.lg-svip-menu .uc-menu-warp .menu-item.current-menu-item a {
    color: #d97706 !important;
    background: rgba(245,158,11,.08) !important;
}
.lg-svip-menu .uc-menu-warp .menu-item a:hover {
    color: #d97706;
}

/* 永久会员按钮渐变动画 */
.lg-svip-btn {
    background: linear-gradient(135deg, #f59e0b, #fbbf24, #f59e0b) !important;
    background-size: 200% 200% !important;
    animation: lg-svip-banner-flow 3s ease infinite !important;
    border: none !important;
    color: #fff !important;
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .lg-svip-gold-text,
    .lg-svip-banner,
    .lg-svip-banner::before,
    .lg-svip-banner::after,
    .lg-svip-avatar .avatar-img,
    .lg-svip-stat,
    .lg-svip-card-top::before,
    .lg-svip-btn { animation: none !important; }
}