/* ==========================================================================
   留歌 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);
}

/* 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);
}

/* 多主题：仅换主色，表面保持亮色 */
html[data-lg-theme="green"]  { --lg-primary: #10b981; --lg-primary-rgb: 16,185,129; --bs-primary:#10b981; --bs-primary-rgb:16,185,129; --bs-link-color:#10b981; --bs-link-color-rgb:16,185,129; --bs-link-hover-color:#0d9a6c;
    --bs-btn-primary-bg:#10b981; --bs-btn-primary-border-color:#10b981; --bs-btn-primary-hover-bg:#0d9a6c; --bs-btn-primary-hover-border-color:#0d9a6c; --bs-btn-primary-active-bg:#0b855d; }
html[data-lg-theme="purple"] { --lg-primary: #7c3aed; --lg-primary-rgb: 124,58,237; --bs-primary:#7c3aed; --bs-primary-rgb:124,58,237; --bs-link-color:#7c3aed; --bs-link-color-rgb:124,58,237; --bs-link-hover-color:#6d28d9;
    --bs-btn-primary-bg:#7c3aed; --bs-btn-primary-border-color:#7c3aed; --bs-btn-primary-hover-bg:#6d28d9; --bs-btn-primary-hover-border-color:#6d28d9; --bs-btn-primary-active-bg:#5b21b6; }
html[data-lg-theme="red"]    { --lg-primary: #ef4444; --lg-primary-rgb: 239,68,68; --bs-primary:#ef4444; --bs-primary-rgb:239,68,68; --bs-link-color:#ef4444; --bs-link-color-rgb:239,68,68; --bs-link-hover-color:#dc2626;
    --bs-btn-primary-bg:#ef4444; --bs-btn-primary-border-color:#ef4444; --bs-btn-primary-hover-bg:#dc2626; --bs-btn-primary-hover-border-color:#dc2626; --bs-btn-primary-active-bg:#b91c1c; }

/* 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: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(229, 233, 240, 0.7);
    box-shadow: 0 1px 12px rgba(17, 24, 39, 0.05);
}
.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-g1);
    color: #fff;
    border: none;
    box-shadow: 0 6px 16px -4px rgba(59, 111, 245, 0.45);
}
.login-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(59, 111, 245, 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: linear-gradient(120deg, #3b6ff5, #7c3aed, #ec4899, #3b6ff5);
    background-size: 300% 300%;
    animation: lg-flow 8s ease infinite;
    color: #fff;
    border: none;
}
.action-hover-menu .hover-warp .hover-info a { color: rgba(255,255,255,0.92); }
@keyframes lg-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* 八个（以上）菜单图标各自独立渐变 */
.action-hover-menu .hover-warp i { border-radius: 8px; }
.action-hover-menu .hover-warp .fa-user,
.action-hover-menu .hover-warp [class*="fa-user"] { background: var(--lg-g1); color: #fff; }
.action-hover-menu .hover-warp .fa-qrcode { background: var(--lg-g6); color: #fff; }
.action-hover-menu .hover-warp .fa-gem { background: var(--lg-g3); color: #fff; }
.action-hover-menu .hover-warp .fa-shopify,
.action-hover-menu .hover-warp .fa-shopping-bag { background: var(--lg-g7); color: #fff; }
.action-hover-menu .hover-warp .fa-cloud-download-alt { background: var(--lg-g2); color: #fff; }
.action-hover-menu .hover-warp .fa-star { background: var(--lg-g5); color: #fff; }
.action-hover-menu .hover-warp .fa-hand-holding-usd { background: var(--lg-g4); color: #fff; }
.action-hover-menu .hover-warp .fa-edit { background: var(--lg-g8); color: #fff; }
.action-hover-menu .hover-warp .fa-bell { background: var(--lg-g1); color: #fff; }
.action-hover-menu .hover-warp .fa-cog { background: linear-gradient(135deg,#64748b,#94a3b8); color: #fff; }
.action-hover-menu .hover-warp .fa-comment-dots { background: var(--lg-g6); color: #fff; }
.action-hover-menu .hover-warp .fa-sign-out-alt { background: linear-gradient(135deg,#ef4444,#f87171); color: #fff; }
.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; }
.ssp-header-notify .hover-warp .hover-info { animation: none; background: var(--lg-g1); }
/* 签到按钮金色渐变 */
.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; }

/* --------------------------------------------------------------------------
   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); }

/* --------------------------------------------------------------------------
   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: rgba(19, 24, 35, 0.72);
    border-color: rgba(45, 54, 72, 0.7);
}
html[data-bs-theme="dark"] .site-header { box-shadow: 0 1px 12px rgba(0,0,0,0.4); }
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;
    }
}