/* ============================================================
   blog.h-acker.cn 全站 UI 大整改 · Cyber Security Dark
   设计语言：深蓝黑底色 + 网格纹理 + 霓虹粉青渐变 + 玻璃拟态
   参考案例：zibll 官方美化社区 / 彬红茶 / 阿呆日记 等全网子比美化方案
   生效方式：mu-plugin ui-enhance.php 加载（wp-content/custom-ui.css）
   ============================================================ */

/* ---------- 1. 暗色模式：变量覆盖 ---------- */
body.dark-theme {
    --body-bg-color: #0b0f1a;
    --main-bg-color: #111a28;
    --key-color: #dfe6f0;
    --blur-bg: rgba(10, 14, 24, 0.78);
    --header-bg: var(--blur-bg);
    --footer-bg: #0b0f1a;
    --c-bg: #0d1522;
    --c-divider: rgba(120, 200, 255, 0.08);
    --c-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}

/* ---------- 2. 背景：深色网格纹理 + 顶部霓虹辉光 ---------- */
body.dark-theme {
    background-color: #0b0f1a;
    background-image:
        radial-gradient(1200px 420px at 50% -120px, rgba(0, 200, 255, 0.08), transparent 60%),
        radial-gradient(900px 320px at 85% -80px, rgba(240, 68, 148, 0.06), transparent 60%),
        linear-gradient(rgba(120, 200, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 200, 255, 0.028) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
    background-attachment: fixed;
}

/* ---------- 3. 导航：玻璃拟态 + 底部辉光线 ---------- */
body.dark-theme .header {
    -webkit-backdrop-filter: blur(14px) saturate(1.25);
    backdrop-filter: blur(14px) saturate(1.25);
    background: linear-gradient(180deg, rgba(10, 14, 24, 0.88), rgba(10, 14, 24, 0.62)) !important;
    border-bottom: 1px solid rgba(0, 200, 255, 0.12);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.32);
}
body.dark-theme .header .nav > li > a,
body.dark-theme .header .navbar .nav > li > a {
    -webkit-transition: color .2s ease, text-shadow .2s ease;
    transition: color .2s ease, text-shadow .2s ease;
}
body.dark-theme .header .nav > li > a:hover,
body.dark-theme .header .navbar .nav > li > a:hover {
    color: #4dd4ff;
    text-shadow: 0 0 14px rgba(0, 200, 255, 0.45);
}

/* ---------- 4. 文章列表卡片：圆角 + 辉光悬浮 ---------- */
body.dark-theme .posts-item {
    border-radius: 14px;
    background: linear-gradient(160deg, #131d2d, #0f1726);
    border: 1px solid rgba(120, 200, 255, 0.07);
    -webkit-transition: -webkit-transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.dark-theme .posts-item:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    border-color: rgba(0, 200, 255, 0.38);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48), 0 0 26px rgba(0, 200, 255, 0.09);
}
body.dark-theme .posts-item .item-thumbnail {
    overflow: hidden;
    border-radius: 10px;
}
body.dark-theme .posts-item .item-thumbnail img {
    -webkit-transition: -webkit-transform .45s ease;
    transition: transform .45s ease;
}
body.dark-theme .posts-item:hover .item-thumbnail img {
    -webkit-transform: scale(1.06);
    transform: scale(1.06);
}

/* 卡片主体（box-body / widget / 通用卡片）统一圆角 */
body.dark-theme .box-body,
body.dark-theme .zib-widget,
body.dark-theme .theme-box,
body.dark-theme .widget-content {
    border-radius: 14px;
    background: linear-gradient(160deg, #131d2d, #0f1726);
    border: 1px solid rgba(120, 200, 255, 0.07);
}

/* ---------- 5. 板块标题：粉青渐变文字 ---------- */
body.dark-theme .section-title,
body.dark-theme .posts-title,
body.dark-theme .widget-title,
body.dark-theme .zib-widget > h3,
body.dark-theme .zib-widget > h4 {
    background: linear-gradient(90deg, #f04494, #00c8ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------- 6. 标签：霓虹轮换胶囊（沿用 round_tags 体系） ---------- */
body.dark-theme .article-tags a,
body.dark-theme .tags-page ul li a,
body.dark-theme .zib-widget .tagcloud a,
body.dark-theme .tag-cloud-link {
    border-radius: 999px;
    border: 1px solid rgba(0, 200, 255, 0.22);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
body.dark-theme .article-tags a:nth-child(5n + 1),
body.dark-theme .tags-page ul li:nth-child(5n + 1) a,
body.dark-theme .zib-widget .tagcloud a:nth-child(5n + 1) {
    background: rgba(240, 68, 148, 0.14);
    color: #ff8fc2;
}
body.dark-theme .article-tags a:nth-child(5n + 2),
body.dark-theme .tags-page ul li:nth-child(5n + 2) a,
body.dark-theme .zib-widget .tagcloud a:nth-child(5n + 2) {
    background: rgba(0, 200, 255, 0.14);
    color: #6fd9ff;
}
body.dark-theme .article-tags a:nth-child(5n + 3),
body.dark-theme .tags-page ul li:nth-child(5n + 3) a,
body.dark-theme .zib-widget .tagcloud a:nth-child(5n + 3) {
    background: rgba(0, 230, 118, 0.12);
    color: #5cf0a0;
}
body.dark-theme .article-tags a:nth-child(5n + 4),
body.dark-theme .tags-page ul li:nth-child(5n + 4) a,
body.dark-theme .zib-widget .tagcloud a:nth-child(5n + 4) {
    background: rgba(255, 176, 0, 0.14);
    color: #ffc65c;
}
body.dark-theme .article-tags a:nth-child(5n),
body.dark-theme .tags-page ul li:nth-child(5n) a,
body.dark-theme .zib-widget .tagcloud a:nth-child(5n) {
    background: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
}
body.dark-theme .article-tags a:hover,
body.dark-theme .tags-page ul li a:hover,
body.dark-theme .zib-widget .tagcloud a:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    border-color: rgba(0, 200, 255, 0.6);
    box-shadow: 0 6px 16px rgba(0, 200, 255, 0.16);
}

/* ---------- 7. 按钮：粉青渐变胶囊 ---------- */
body.dark-theme .btn-primary,
body.dark-theme .btn-theme,
body.dark-theme .theme-btn,
body.dark-theme .button.primary {
    background-image: linear-gradient(90deg, #f04494, #00c8ff) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 20px rgba(0, 200, 255, 0.18);
    -webkit-transition: all .25s ease;
    transition: all .25s ease;
}
body.dark-theme .btn-primary:hover,
body.dark-theme .btn-theme:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 200, 255, 0.3);
}

/* ---------- 8. 文章正文排版增强 ---------- */
body.dark-theme .article-content {
    color: #cfd8e3;
    font-size: 15.5px;
    line-height: 1.9;
}
body.dark-theme .article-content h2 {
    border-left: 3px solid transparent;
    border-image: linear-gradient(180deg, #f04494, #00c8ff) 1;
    padding-left: 14px;
    margin-top: 34px;
}
body.dark-theme .article-content h3 {
    position: relative;
    padding-left: 14px;
}
body.dark-theme .article-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: linear-gradient(180deg, #00c8ff, #f04494);
    border-radius: 2px;
}
body.dark-theme .article-content blockquote {
    border-left: 3px solid #00c8ff;
    background: rgba(0, 200, 255, 0.06);
    border-radius: 8px;
    padding: 12px 16px;
}
body.dark-theme .article-content a {
    color: #4dd4ff;
    border-bottom: 1px dashed rgba(0, 200, 255, 0.35);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
body.dark-theme .article-content a:hover {
    color: #7fe4ff;
    border-bottom-color: #00c8ff;
}
body.dark-theme .article-content pre,
body.dark-theme .article-content code {
    background: #0d1522;
    border: 1px solid rgba(0, 200, 255, 0.14);
    border-radius: 8px;
    color: #a9d9ff;
}
body.dark-theme .article-content pre {
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
}
body.dark-theme .article-content img {
    border-radius: 10px;
}
body.dark-theme .article-content table th {
    background: rgba(0, 200, 255, 0.08);
}

/* ---------- 9. 评论区卡片化 ---------- */
body.dark-theme .comment-form,
body.dark-theme .comment-list {
    border-radius: 14px;
    background: linear-gradient(160deg, #131d2d, #0f1726);
    border: 1px solid rgba(120, 200, 255, 0.07);
}
body.dark-theme .comment-form textarea,
body.dark-theme .comment-form input[type="text"],
body.dark-theme .comment-form input[type="email"],
body.dark-theme .comment-form input[type="url"] {
    background: #0d1522;
    border: 1px solid rgba(120, 200, 255, 0.14);
    border-radius: 10px;
    color: #dfe6f0;
    -webkit-transition: border-color .2s ease, box-shadow .2s ease;
    transition: border-color .2s ease, box-shadow .2s ease;
}
body.dark-theme .comment-form textarea:focus,
body.dark-theme .comment-form input:focus {
    border-color: rgba(0, 200, 255, 0.55);
    box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.1);
    outline: none;
}
body.dark-theme .comment-form .submit {
    background-image: linear-gradient(90deg, #f04494, #00c8ff) !important;
    border: none !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 20px rgba(0, 200, 255, 0.18);
}

/* ---------- 10. 侧边栏小工具 ---------- */
body.dark-theme .zib-widget .box-body,
body.dark-theme .zib-widget .widget-content .box-body {
    background: transparent;
    border: none;
}
body.dark-theme .zib-widget a {
    -webkit-transition: color .2s ease;
    transition: color .2s ease;
}
body.dark-theme .zib-widget a:hover {
    color: #4dd4ff;
}

/* ---------- 11. 页脚：顶部渐变辉光线 ---------- */
body.dark-theme .footer {
    position: relative;
    background: #0b0f1a;
    border-top: 1px solid rgba(0, 200, 255, 0.12);
}
body.dark-theme .footer::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 68, 148, 0.6), rgba(0, 200, 255, 0.6), transparent);
}

/* ---------- 12. 滚动条 ---------- */
body.dark-theme::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.dark-theme::-webkit-scrollbar-track {
    background: #0b0f1a;
}
body.dark-theme::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f04494, #00c8ff);
    border-radius: 4px;
}
body.dark-theme::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff6fae, #35d0ff);
}

/* ---------- 13. 悬浮按钮 / 返回顶部 ---------- */
body.dark-theme .back-to-top,
body.dark-theme .scroll-top-btn,
body.dark-theme .float-btn {
    background-image: linear-gradient(135deg, rgba(240, 68, 148, 0.9), rgba(0, 200, 255, 0.9)) !important;
    border: 1px solid rgba(0, 200, 255, 0.3) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4) !important;
}

/* ---------- 14. 站点头部 logo 区 ---------- */
body.dark-theme .logo a {
    text-shadow: 0 0 18px rgba(0, 200, 255, 0.35);
}

/* ============================================================
   亮色模式适配：干净白 + 青色点缀（保持一致的设计语言）
   ============================================================ */
body:not(.dark-theme) {
    --body-bg-color: #f3f6fa;
    --main-bg-color: #ffffff;
    --key-color: #1c2536;
    --c-divider: rgba(30, 80, 140, 0.08);
    background-image:
        radial-gradient(1200px 420px at 50% -120px, rgba(0, 200, 255, 0.05), transparent 60%),
        linear-gradient(rgba(30, 80, 140, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 80, 140, 0.02) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
}
body:not(.dark-theme) .posts-item {
    border-radius: 14px;
    border: 1px solid rgba(30, 80, 140, 0.08);
    box-shadow: 0 4px 20px rgba(20, 40, 80, 0.06);
    -webkit-transition: -webkit-transform .25s ease, box-shadow .25s ease;
    transition: transform .25s ease, box-shadow .25s ease;
}
body:not(.dark-theme) .posts-item:hover {
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(20, 40, 80, 0.14), 0 0 22px rgba(0, 200, 255, 0.08);
}
body:not(.dark-theme) .box-body,
body:not(.dark-theme) .zib-widget,
body:not(.dark-theme) .theme-box {
    border-radius: 14px;
    border: 1px solid rgba(30, 80, 140, 0.07);
    box-shadow: 0 4px 18px rgba(20, 40, 80, 0.05);
}
body:not(.dark-theme) .section-title,
body:not(.dark-theme) .posts-title,
body:not(.dark-theme) .widget-title {
    background: linear-gradient(90deg, #e0458c, #0093cc);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
body:not(.dark-theme) .btn-primary,
body:not(.dark-theme) .btn-theme {
    background-image: linear-gradient(90deg, #e0458c, #0093cc) !important;
    border: none !important;
    border-radius: 999px !important;
}
body:not(.dark-theme) .header {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.82) !important;
    border-bottom: 1px solid rgba(30, 80, 140, 0.09);
}

/* ---------- 15. 搜索热词：霓虹胶囊 ---------- */
body.dark-theme .search-keywords a,
body.dark-theme a.search_keywords {
    border-radius: 999px !important;
    border: 1px solid rgba(0, 200, 255, 0.2);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
}
body.dark-theme .search-keywords a:nth-child(6n + 1),
body.dark-theme .search-keywords a:nth-child(6n + 1) {
    background: rgba(240, 68, 148, 0.16) !important;
    color: #ff8fc2 !important;
}
body.dark-theme .search-keywords a:nth-child(6n + 2),
body.dark-theme .search-keywords a:nth-child(6n + 2) {
    background: rgba(0, 200, 255, 0.16) !important;
    color: #6fd9ff !important;
}
body.dark-theme .search-keywords a:nth-child(6n + 3),
body.dark-theme .search-keywords a:nth-child(6n + 3) {
    background: rgba(0, 230, 118, 0.14) !important;
    color: #5cf0a0 !important;
}
body.dark-theme .search-keywords a:nth-child(6n + 4),
body.dark-theme .search-keywords a:nth-child(6n + 4) {
    background: rgba(255, 176, 0, 0.16) !important;
    color: #ffc65c !important;
}
body.dark-theme .search-keywords a:nth-child(6n + 5),
body.dark-theme .search-keywords a:nth-child(6n + 5) {
    background: rgba(167, 139, 250, 0.16) !important;
    color: #c4b5fd !important;
}
body.dark-theme .search-keywords a:nth-child(6n),
body.dark-theme .search-keywords a:nth-child(6n) {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #9aa7b8 !important;
}
body.dark-theme .search-keywords a:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    border-color: rgba(0, 200, 255, 0.6);
    box-shadow: 0 6px 16px rgba(0, 200, 255, 0.16);
}

/* ============================================================
   v2 修复：暗色模式正文强制可读
   公众号转载文章内联深色文字（#333/黑/深红）在深背景下不可见，
   此处用 !important 强制正文文字为浅色，保留链接/代码/强调色。
   ============================================================ */
body.dark-theme .article-content,
body.dark-theme .article-content p,
body.dark-theme .article-content span,
body.dark-theme .article-content div,
body.dark-theme .article-content li,
body.dark-theme .article-content dd,
body.dark-theme .article-content td,
body.dark-theme .article-content blockquote,
body.dark-theme .article-content figcaption,
body.dark-theme .article-content section {
    color: #dfe6f0 !important;
}
body.dark-theme .article-content h1,
body.dark-theme .article-content h2,
body.dark-theme .article-content h3,
body.dark-theme .article-content h4,
body.dark-theme .article-content h5,
body.dark-theme .article-content h6 {
    color: #f2f6fb !important;
}
body.dark-theme .article-content a,
body.dark-theme .article-content a span {
    color: #4dd4ff !important;
    border-bottom: 1px dashed rgba(0, 200, 255, 0.35);
}
body.dark-theme .article-content a:hover,
body.dark-theme .article-content a:hover span {
    color: #7fe4ff !important;
}
body.dark-theme .article-content code,
body.dark-theme .article-content pre,
body.dark-theme .article-content pre * {
    color: #a9d9ff !important;
}
body.dark-theme .article-content strong {
    color: #ffd9ec !important;
}
body.dark-theme .article-content .highlight,
body.dark-theme .article-content mark {
    background: rgba(255, 176, 0, 0.18) !important;
    color: #ffc65c !important;
}

/* ---------- 移动端微调 ---------- */
@media (max-width: 991px) {
    body.dark-theme .posts-item {
        border-radius: 12px;
    }
    body.dark-theme .article-content {
        font-size: 15px;
    }
}