/* =========================================================
 * 极简扁平风格 (Flat Clean Style)
 * 核心目标：0 动画延迟、去卡片感、去边框
 * =========================================================*/

/* --- 1. 变量定义：更柔和的对比度 --- */
:root {
    --style-primary: #5B9BD5;
    --style-primary-light: #82B1E1;
    /* 白天：背景不再纯白，而是极淡的灰，卡片纯白 */
    --style-bg: #F7F9FE;
    --style-surface: #FFFFFF;
    --style-text: #333333;
    --style-text-sub: #7F7F7F;
    --style-border: transparent; /* 移除默认边框 */
    /* 平时无阴影，悬停才有 */
    --style-shadow: none;
    --style-shadow-hover: 0 8px 20px rgba(0,0,0,0.08);
}

/* 夜间模式：降低黑白反差，更像“一块屏幕”而不是“方块” */
[data-theme="dark"] {
    --style-primary: #5B9BD5;
    --style-bg: #181818;      /* 背景深灰 */
    --style-surface: #202020; /* 卡片稍浅，对比度降低 */
    --style-text: #E0E0E0;
    --style-text-sub: #909090;
    --style-border: transparent;
    --style-shadow: none;
    --style-shadow-hover: 0 8px 24px rgba(0,0,0,0.4);
}

/* =========================================================
 * 2. 暴力移除所有入场动画 (解决“抽屉”感)
 * =========================================================*/
#nav,
#page-header,
#web_bg,
#body-wrap,
.layout {
    animation: none !important; /* 🚫 禁止 keyframes 动画 */
    transition: none !important; /* 🚫 禁止 transition 过渡 */
    transform: none !important;  /* 🚫 禁止位移 */
    opacity: 1 !important;       /* 强制立刻显示 */
}

/* 即使是JS控制的显隐，也强制立刻显示 */
#page-header #nav {
    transition: none !important;
}

/* =========================================================
 * 3. 导航栏：与背景融合，不再像一条“带子”
 * =========================================================*/
#nav {
    /* 使用 backdrop-filter 做一点点磨砂，增加现代感，但去掉阴影 */
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important; /* 极细的一条线即可 */
    position: fixed !important;
    top: 0;
    height: 60px !important;
    z-index: 999;
}

[data-theme="dark"] #nav {
    background: rgba(32, 32, 32, 0.9) !important;
    box-shadow: 0 1px 2px rgba(255,255,255,0.05) !important;
}

/* 导航栏文字 */
#page-header #nav #site-name,
#page-header #nav .menus_items .menus_item a {
    color: var(--style-text) !important;
    font-weight: 600;
}

/* 移除顶部大图区域的高度占位，让内容更紧凑 */
#page-header.not-top-img,
#page-header.post-bg {
    height: 60px !important;
    background: transparent !important;
    margin-bottom: 20px;
}

#page, #post, #archive, #tag, #category {
    margin-top: 80px !important;
}

/* =========================================================
 * 4. 卡片去“盒子感” (Flat Design)
 * =========================================================*/
.card-widget,
.recent-post-item,
#article-container,
#pagination .page-number,
#pagination .extend {
    background: var(--style-surface) !important;
    color: var(--style-text) !important;
    border-radius: 8px !important;
    /* 核心修改：默认无阴影，无边框 -> 看起来像贴在背景上 */
    box-shadow: var(--style-shadow) !important;
    border: none !important;
    transition: all 0.3s ease !important; /* 只保留悬停时的过渡 */
}

/* 只有鼠标放上去，才会有微微浮起的感觉 */
.card-widget:hover,
.recent-post-item:hover {
    box-shadow: var(--style-shadow-hover) !important;
    /*transform: translateY(-2px) !important; !* 极微小的上浮，反馈感 *!*/
    z-index: 1;
}

/* 调整卡片间距和内边距，让布局更紧凑 */
.recent-post-item {
    padding: 20px 24px !important; /* 增加内容呼吸感 */
    margin-bottom: 16px !important; /* 减小卡片间距 */
}

/* =========================================================
 * 5. 文章排版优化
 * =========================================================*/
#article-container h1,
#article-container h2,
#article-container h3 {
    color: var(--style-text) !important;
    font-weight: 600;
    border-bottom: 1px solid rgba(100,100,100,0.1); /* 极淡的分隔线 */
    padding-bottom: 10px;
}

/* 代码块 */
#article-container code {
    background: rgba(91, 155, 213, 0.1) !important; /* 主色调的极淡背景 */
    color: var(--style-primary) !important;
    padding: 2px 6px;
    border-radius: 4px;
}

#article-container pre {
    background: #282c34 !important; /* 统一代码块背景为深色 */
    border-radius: 6px;
}

/* =========================================================
 * 6. 右下角按钮
 * =========================================================*/
#rightside > div > button,
#rightside > div > a {
    background: var(--style-surface) !important; /* 跟随卡片颜色 */
    color: var(--style-primary) !important; /* 图标用主色 */
    border: 1px solid var(--style-primary) !important; /* 细线描边 */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: none !important;
}

#rightside > div > button:hover,
#rightside > div > a:hover {
    background: var(--style-primary) !important;
    color: white !important;
}

/* =========================================================
 * 7. 底部栏 (Footer) 紧凑清晰版
 * 修复：浅色模式看不清、高度太高、文字太小的问题
 * =========================================================*/
#footer {
    /* 1. 背景设置：跟随卡片颜色 */
    background: var(--style-surface) !important;
    border-top: 1px solid var(--style-border) !important;

    /* 2. 尺寸优化：大幅减小内边距，解决“太大”的问题 */
    padding: 15px 20px !important;
    margin-top: 20px !important;

    /* 3. 阴影：微弱的向上阴影，增加层次 */
    box-shadow: 0 -2px 8px rgba(0,0,0,0.03) !important;
}

/* 夜间模式适配 */
[data-theme="dark"] #footer {
    box-shadow: 0 -2px 8px rgba(0,0,0,0.2) !important;
}

#footer-wrap {
    /* 4. 文字颜色：强制不透明，确保清晰可见 */
    color: var(--style-text) !important;
    opacity: 1 !important; /* 彻底移除透明度 */

    /* 5. 字体优化：加大加粗 */
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

/* 链接样式 */
#footer-wrap a {
    color: var(--style-text) !important;
    font-weight: 700; /* 链接更粗一点 */
    margin: 0 5px;
}

#footer-wrap a:hover {
    color: var(--style-primary) !important;
    text-decoration: underline;
}

/* 移除遮罩 */
#footer:before {
    display: none !important;
}