:root { --primary: #0984e3; --text: #2d3436; --light: #636e72; --bg: #f5f7fa; --card: #ffffff; --danger: #d63031; }

body { font-family: -apple-system, sans-serif; background: var(--bg); color: var(--text); margin: 0; overflow-x: hidden; }
.container { max-width: 1000px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }

/* 顶栏与底栏风格统一 */
.top-bar, .bottom-bar { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); padding: 12px 0; position: sticky; top: 0; z-index: 1000 !important; }

.nav-content { display: flex; justify-content: space-between; align-items: center; }
.nav-brand { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.nav-brand img { width: 24px; }

/* 布局控制 */
/* 修改或添加这段代码：强制左侧内容区可以收缩 */
.main-layout {
    display: flex !important;
    gap: 30px !important; /* 增加这个数值可以拉开时钟与文章的距离 */
}
.sidebar {
    width: 280px !important; /* 锁定宽度 */
    flex-shrink: 0 !important; /* 强制不允许被挤压 */
}
.main-content {
    flex: 1;       /* 占据剩余空间 */
    min-width: 0;  /* ！！！这是核心：防止被长代码块撑开而挤坏侧边栏 */
}
#content-view {
    min-width: 0;  /* 允许卡片收缩 */
}

.markdown-body {
    min-width: 0;
}
/* 针对代码块的最终修复方案 */
.markdown-body pre {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important; /* 允许横向滚动 */
    white-space: pre !important;  /* 强制不换行 */
}

/* 确保内部代码不会撑破 pre */
.markdown-body pre code {
    white-space: pre !important;
    overflow-x: auto !important;
    display: block !important;
}
.card { background: var(--card); border-radius: 12px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.03); border: 1px solid rgba(0,0,0,0.02); }

/* 文章列表卡片 */
.post-card { cursor: pointer; transition: 0.3s; margin-bottom: 16px; }
.post-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.06); }
.post-header { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.post-header h2 { margin: 0; font-size: 1.25rem; color: var(--primary); flex: 1; }
.post-meta { font-size: 12px; color: var(--light); margin-top: 8px; }

/* 按钮样式 */
.btn-modern { background: white; border: 1px solid #eee; padding: 6px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; transition: 0.2s; white-space: nowrap; }
.btn-modern:hover { border-color: var(--primary); color: var(--primary); background: #f0f7ff; }
.btn-primary { background: var(--primary); color: white; border: none; }
.admin-btns { display: flex; gap: 8px; }

/* 返回按钮 */
.btn-back-wrapper { display: flex; gap: 10px; }
.btn-back-custom { background: #f8f9fa; border: 1px solid #eee; padding: 8px 20px; border-radius: 30px; font-size: 13px; cursor: pointer; transition: 0.3s; }
.btn-back-custom:hover { border-color: var(--primary); color: var(--primary); box-shadow: 0 4px 12px rgba(9,132,227,0.1); }

/* 侧边栏与时钟 */
.sticky-container { position: sticky; top: 80px; }
.clock-widget { display: flex; flex-direction: column; align-items: center; padding: 20px 0 !important; }
#clock-canvas-container { width: 180px; height: 180px; }
.date-info { text-align: center; margin-top: 10px; }
#date-display { font-weight: bold; font-size: 14px; }
#day-display { color: var(--light); font-size: 12px; margin-top: 4px; }

/* 弹窗样式 */
#modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.modal-card { background: white; width: 90%; max-width: 600px; border-radius: 16px; padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); position: relative; height: auto; max-height: 90vh;}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.close-icon { position: absolute; right: 20px; width: 32px; height: 32px; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; transition: 0.2s; border: 1px solid #eee; }
.close-icon:hover { background: var(--danger); color: white; transform: rotate(90deg); }
.modal-input { width: 100%; padding: 12px; margin-top: 12px; border: 1px solid #eee; border-radius: 8px; box-sizing: border-box; outline: none; font-size: 14px; }
.modal-input:focus { border-color: var(--primary); }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; padding: 15px; border-top: 1px solid #eee; background: #fff; flex-shrink: 0;}

/* 分页 */
.pagination-wrapper { display: flex; justify-content: center; padding: 30px 0; }
.pagination { display: flex; gap: 8px; }
.pagination button { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #eee; background: white; cursor: pointer; }
.pagination button.active { background: var(--primary); color: white; border: none; }

/* 移动端处理 */
@media (max-width: 800px) {
    .main-layout { grid-template-columns: 1fr; }
    .sidebar { display: none; }
    .post-header { flex-direction: column; align-items: flex-start; }
    .admin-btns { margin-top: 10px; }
    .markdown-body img { max-width: 100%; }
    .markdown-body pre { white-space: pre-wrap; word-break: break-all; }
    #toc-mobile { background: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 20px; }
}

.animate-up { animation: fadeInUp 0.4s ease-out; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* 适配高亮后的代码块样式 */
.markdown-body pre[class*="language-"] {
    margin: 1.5em 0 !important;
    padding: 1.2em !important;
    border-radius: 8px !important;
    background: #1d1f21 !important; /* Prism Tomorrow Night 背景色 */
    font-size: 14px !important;
    line-height: 1.5 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
    /* 保持之前的防溢出逻辑 */
    overflow-x: auto !important;
    max-width: 100% !important;
}

/* 调整复制按钮的位置，避免挡住代码 */
.copy-btn {
    opacity: 0.6;
    background: rgba(255,255,255,0.1) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}
.copy-btn:hover { opacity: 1; background: var(--primary) !important; }
/* 确保代码块容器是定位基准 */
.markdown-body pre {
    position: relative !important;
    padding-top: 2.5em !important; /* 为右上角的按钮预留顶部空间 */
}

/* 强制将复制按钮移动到右上角 */
.copy-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 100 !important;
    
    /* 样式微调：让它更精致，不遮挡代码 */
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ccc !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1 !important;
}

.copy-btn:hover {
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}

#back-to-top {
    display: none; /* 初始隐藏 */
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    width: 45px;
    height: 45px;
    background-color: var(--primary, #0984e3);
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 20px;
    transition: opacity 0.3s, transform 0.3s;
}

#back-to-top:hover {
    transform: translateY(-5px); /* 悬停时轻微上浮 */
    background-color: #0773c5;
}

/* 移动端适配：稍微调小一点，避免挡住内容 */
@media (max-width: 600px) {
    #back-to-top {
        bottom: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

#editor-view {
    width: 95%;          /* 在移动端占据绝大部分宽度 */
    max-width: 600px;    /* PC端保持适中高度 */
    max-height: 90vh;    /* 【关键】最高不超过屏幕高度的 90% */
    display: flex;
    flex-direction: column; /* 纵向排列布局 */
    overflow: hidden;    /* 整体不滚动 */
}

/* 编辑器主体区域允许滚动 */
#editor-layout, .modal-body {
    flex: 1;             /* 占据剩余所有空间 */
    overflow-y: auto;    /* 【关键】如果内容长，这里会出现滚动条 */
    padding: 15px;
    -webkit-overflow-scrolling: touch; /* 优化移动端滚动手感 */
}

/* 扩大弹窗宽度以容纳两栏 */
#editor-view.modal-card {
    max-width: 950px !important; 
    width: 90%;
}

/* 编辑器布局 */
.editor-layout {
    display: flex;
    gap: 15px;
    height: 450px; /* 固定高度 */
    margin-bottom: 15px;
}

#post-body {
    flex: 1;
    margin-bottom: 0 !important; /* 覆盖原有的 margin */
    font-family: 'Courier New', Courier, monospace;
}

#editor-preview {
    flex: 1;
    padding: 15px;
    background: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow-y: auto;
    text-align: left;
    font-size: 14px;
}

/* 移动端自动变成上下堆叠 */
@media (max-width: 768px) {
    .editor-layout {
        flex-direction: column;
        height: 600px;
    }
}
/* 文件名标签化处理 */
.post-filename {
    color: #888 !important; /* 降低饱和度 */
    background: #f0f2f5;    /* 浅灰色背景 */
    padding: 2px 8px;
    border-radius: 4px;
    font-family: monospace; /* 代码风格字体 */
    border: 1px solid #e1e4e8;
}

/* 标题样式微调 */
.post-card h2 {
    color: #2d3436;
    line-height: 1.3;
}

/* 悬停效果：标题变色 */
.post-card:hover h2 {
    color: var(--primary);
}
.post-card {
    padding: 20px !important;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.08);
}
/* 默认隐藏管理按钮组 */
.admin-btns {
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateX(10px); /* 初始位置稍微右移，增加滑入感 */
}

/* 当鼠标悬停在卡片上时，显示按钮 */
.post-card:hover .admin-btns {
    opacity: 1;
    transform: translateX(0);
}

/* 即使在移动端，我们也让它默认显示，方便触屏操作 */
@media (max-width: 768px) {
    .admin-btns {
        opacity: 1;
        transform: none;
    }
}
.site-footer {
    padding: 40px 0 20px;
    text-align: center;
    color: #a0a0a0;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.site-footer b { color: #666; }
.site-footer a { color: inherit; text-decoration: none; border-bottom: 1px solid #ddd; }
.site-footer a:hover { color: var(--primary); border-color: var(--primary); }

.site-footer {
    margin-top: 50px;
    padding: 30px 0;
    border-top: 1px solid #f0f0f0; /* 加一条极淡的分割线，增加精致感 */
    background: #fff; /* 确保背景干净 */
}

.footer-container {
    /* 这里的宽度建议和你文章列表的最大宽度保持一致，比如 800px 或 900px */
    max-width: 970px; 
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* 核心：左右对齐 */
    align-items: center;
    padding: 0 20px; /* 侧边边距，防止手机端贴边 */
    color: #999;
    font-size: 0.85rem;
}

.footer-left b {
    color: #555;
}

.footer-right a {
    color: var(--primary); /* 使用你的蓝色主题色 */
    text-decoration: none;
    font-weight: 500;
}

.footer-right a:hover {
    text-decoration: underline;
}

/* 适配手机端：宽度不足时改为上下居中排列 */
@media (max-width: 600px) {
    .footer-container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}
/* 目录容器 */
.sticky-container {
    position: -webkit-sticky;
    position: sticky;
    top: 60px; /* 距离顶部导航栏的距离 */
    z-index: 5;
}

/* 针对代码块溢出的终极方案（保留你之前的防爆逻辑，但不影响外层） */
.markdown-body pre {
    width: 100% !important;
    max-width: 100%; /* 确保不撑破容器 */
    overflow-x: auto !important; /* 只允许代码块内部滚动 */
    white-space: pre !important;
}

.toc-box {
    max-height: calc(100vh - 120px); /* 屏幕高度减去顶部预留空间 */
    overflow-y: auto; /* 目录太长时可以内部滚动 */
}
#toc-widget {
    /* 在搜索框和目录之间强制空出 20 像素 */
    margin-top: 20px !important; 
}
/* 让评论区容器更有层次感 */
#giscus-container {
    min-height: 150px;
    width: 100%;
    /* 解决一些高度塌陷问题 */
    display: block; 
}

/* 如果你的 card 类没有背景色，确保这里有 */
#comments-section {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* 适配移动端 */
@media (max-width: 768px) {
    #comments-section {
        padding: 15px;
        margin-top: 20px;
    }
}
.editor-toolbar .separator {
    color: #ddd;
    font-style: normal;
    margin: 0 5px;
    align-self: center;
}

.editor-toolbar span {
    background: #fff;
    border: 1px solid #eee;
    padding: 2px 10px;
    font-size: 13px;
    border-radius: 3px;
    cursor: pointer;
}

.editor-toolbar span:hover {
    border-color: var(--primary);
    color: var(--primary);
}
@media (max-width: 480px) {
    .editor-toolbar {
        overflow-x: auto; /* 允许横向滑动 */
        white-space: nowrap; /* 不换行 */
        padding-bottom: 5px;
    }
    
    #editor-view {
        width: 100%;
        height: 100%;    /* 全屏模式 */
        max-height: 100vh;
        border-radius: 0; /* 手机全屏时不需要圆角 */
    }
}
/* 基础按钮样式：让它们高度对齐、圆角统一 */
.btn-action {
    border: none;
    padding: 6px 15px;
    border-radius: 20px; /* 胶囊形状关键点 */
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 编辑按钮：蓝色系 */
.btn-edit {
    background-color: #007bff;
    color: white;
}
.btn-edit:hover {
    background-color: #0056b3;
    transform: translateY(-1px); /* 悬停微动感 */
}

/* 删除按钮：红色系 */
.btn-delete {
    background-color: #d63031; /* 对应你截图里的颜色 */
    color: white;
}
.btn-delete:hover {
    background-color: #b32d2d;
    transform: translateY(-1px);
}
/* 针对内容页渲染后的图片进行限制 */
#content-view img, 
.markdown-body img {
    max-width: 100%;    /* 【关键】图片最宽只能和父容器一样宽 */
    height: auto;       /* 高度自动缩放，防止图片变形 */
    display: block;     /* 消除图片底部的微小缝隙 */
    margin: 15px auto;  /* 让图片居中显示，并与文字保持距离 */
    border-radius: 8px; /* 可选：给图片加点圆角，显得更精致 */
}
#content-view video, 
#content-view iframe {
    max-width: 100%;
    border-radius: 8px;
}
/* 双栏瀑布流容器 */
.photo-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 强制双栏 */
    gap: 10px;                             /* 图片间距 */
    margin: 20px 0;
}

/* 让容器内的图片自适应 */
.photo-layout img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    margin: 0 !important; /* 覆盖之前全局设置的居中 margin */
}

/* 移动端自动回到单栏，保证体验 */
@media (max-width: 600px) {
    .photo-layout {
        grid-template-columns: 1fr;
    }
}
/* 建议添加到 style.css */
#offline-indicator {
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    font-weight: 500;
    letter-spacing: 0.5px;
}
/* 针对手机端编辑器工具栏的精准适配 */
@media screen and (max-width: 600px) {
    /* 1. 强制工具栏不换行并支持横向滚动 */
    .editor-toolbar {
        display: flex !important;
        flex-wrap: nowrap !important; /* 覆盖内联的 wrap，防止按钮折行 */
        overflow-x: auto !important;  /* 开启横向滚动 */
        padding: 10px !important;
        gap: 12px !important;         /* 适当加大间距，方便手指点按 */
        -webkit-overflow-scrolling: touch; /* 让 iOS 滚动顺滑 */
        background: #f9f9f9;
        border-bottom: 1px solid #eee;
    }

    /* 2. 优化工具栏内的按钮（span 标签） */
    .editor-toolbar span {
        flex: 0 0 auto !important;    /* 绝对禁止按钮被压缩变形 */
        min-width: 44px;              /* 增加点击热区 */
        flex-shrink: 0 !important; /* 禁止压缩 */
        min-width: 50px !important; /* 确保有足够的宽度显示文字 */
        height: 32px;
        line-height: 32px;
        text-align: center;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 0 8px !important;
        font-size: 14px;
        white-space: nowrap;          /* 保证按钮文字不换行 */
        cursor: pointer;
    }

    /* 3. 隐藏横向滚动条，保持界面简洁（可选） */
    .editor-toolbar::-webkit-scrollbar {
        display: none;
    }
}
/* 优化工具栏按钮的手感 */
.editor-toolbar span {
    transition: background-color 0.2s, transform 0.1s;
    user-select: none; /* 防止长按选中文本 */
}

.editor-toolbar span:active {
    background-color: #e1e1e1 !important; /* 按下去变深色 */
    transform: scale(0.95);             /* 按下去轻微缩小 */
}

/* 优化移动端弹窗布局 */
@media screen and (max-width: 600px) {
    #editor-view {
        display: flex;
        flex-direction: column;
        height: 90vh !important; /* 限制弹窗总高度为屏幕的 90% */
    }

    /* 编辑器内容区可滚动，不再撑开父容器 */
    #post-content {
        flex: 1; /* 占据剩余所有空间 */
        overflow-y: auto;
        min-height: 200px !important; 
    }

    /* 强制底部按钮固定 */
    .modal-footer, .editor-buttons { 
        position: sticky;
        bottom: 0;
        background: white;
        padding: 10px 0;
        border-top: 1px solid #eee;
        display: flex;
        justify-content: space-around;
        z-index: 100;
    }
}