:root {
      --bg-paper: #f4e4bc;
      --ink-color: #2b2b2b;
      --accent-red: #8a2be2; /* 原代码中是红色，但CSS变量写的是紫罗兰色，这里修正为红色或保留原样 */
      --card-bg: #fffcf5;
      --border-style: 2px solid var(--ink-color);
      
       --pico-primary: #017FC0 !important;
  --pico-primary-hover: #02659A !important;
  --pico-background-color: #fffbeb !important;
  --pico-muted-border-color: rgba(0, 0, 0, .1) !important;
  --pico-form-element-border-color: rgba(0, 0, 0, .2) !important;
  --pico-code-background-color: rgba(0, 0, 0, .05) !important;
      }

   body {
       
      background-color: var(--bg-paper);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 0px;
    margin: 0px;
    overflow-y: scroll;
}
 
    .container {max-width: 576px;
    background-color: #fff;
    width: 100%;
    margin: 0 auto;
    padding: 0px;}
    header { text-align: center; padding: 40px 20px;  margin-bottom: 50px; }
    h1 { font-family: 'Cinzel', serif; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; }
    .subtitle { font-size: 1.1rem; opacity: 0.8; }
    .date-stamp { background: #ff5858; display: inline-block; margin-top: 15px; padding: 5px 15px; border: 1px solid var(--ink-color); font-size: 0.9rem; transform: rotate(-2deg); }
     .feed-list { display: flex; flex-direction: column;padding: 5px; }
    .d-flex{display:flex}
    .justify-content-between{justify-content:space-between}
    .list-inline{padding-left:0;list-style:none;margin-bottom:0}.list-inline li{display:inline-block;margin-bottom:0}.list-inline li:not(:last-child){margin-right:1rem}.list-inline svg{vertical-align:text-bottom}
    .text-muted,.text-muted a{color:var(--pico-secondary)}.text-muted a:hover{color:var(--pico-secondary-hover)}
    .site-footer{padding-bottom:1rem}
    .container-fluid{width:100%;margin-right:auto;margin-left:auto;padding-right:var(--pico-spacing);padding-left:var(--pico-spacing)}
    
    /* 卡片主体 */
        .card {
            width: 100%;
            background: #fff;
            border: var(--border-style);
            box-shadow: 5px 5px 0px rgba(43, 43, 43, 0.2);
            overflow: hidden;
            position: relative;
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 30px double #dddddd;
        }

        /* 1. 顶部背景区域 (UI改版) */
        .header-bg {
            height: 100px;
            position: relative;
            /* 使用渐变模拟天空和海洋的色调 */
            background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
            overflow: hidden;
            border-radius: 0px 0px 100px 100px;
        }

        /* 装饰用的半透明圆圈，增加UI层次感 */
        .header-bg::before {
            content: '';
            position: absolute;
            width: 150px;
            height: 150px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            top: -50px;
            right: -50px;
        }
        
        .header-bg::after {
            content: '';
            position: absolute;
            width: 80px;
            height: 80px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 50%;
            bottom: 20px;
            left: 20px;
        }

        /* 顶部的气泡提示 */
        .bubble {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(255, 255, 255, 0.9);
            padding: 8px 12px;
            border-radius: 12px;
            font-size: 10px;
            color: #555;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            backdrop-filter: blur(5px);
            z-index: 2;
        }

        /* 2. 头像区域 (图片替换) */
        .avatar-container {
            margin-top: -45px; /* 向上浮动，产生重叠效果 */
            margin-bottom: 5px;
            position: relative;
            z-index: 5;
        }

        .avatar-img {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            border: 4px solid #fff; /* 白色边框 */
            object-fit: cover; /* 保证图片不变形 */
            box-shadow: 0 4px 10px rgba(0,0,0,0.15);
        }

        /* 文字信息 */
        h2 {
            margin: 0 0 10px 0;
            font-size: 24px;
            color: #333;
            font-weight: 700;
        }

        .level {
            background: #333; /* 深色标签 */
            color: #fff;
            padding: 4px 12px;
            border-radius: 10px;
            font-size: 12px;
            display: inline-block;
            margin-bottom: 15px;
            font-weight: 500;
        }

        .welcome-text {
            color: #666;
            font-size: 14px;
            margin-bottom: 20px;
        }

        /* 底部位置标签 */
        .location {
            background: #e1f5fe;
            color: #0277bd;
            padding: 6px 15px;
            border-radius: 15px;
            font-size: 13px;
            display: inline-block;
            font-weight: 500;
        }
    
    
    
    
    
    
    /* 容器基础样式 */
.feed-item {
    padding: 10px;
    border-bottom: 1px solid #eee; /* 分隔线 */
    margin-bottom: 15px;
    background: #fff;
    border: 5px;
    box-shadow: 5px 5px 0px rgb(251 251 251 / 20%);
    transition: all 0.3s ease;
}



.feed-category a {
        font-size: 0.7rem;
        background: #333;
        color: #fff;
        padding: 2px 6px;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 1px;
    }
    .feed-category a:hover {
        background: #ff5858;
    }




.feed-category{ display: flex;
    justify-content: center;
    align-items: center;
}

/* --- 核心布局代码 --- */

/* 有图模式的容器 */
.feed-layout-image {
    display: flex; /* 开启 Flex 布局 */
    gap: 20px;     /* 图片和文字之间的间距 */
    align-items: flex-start; /* 顶部对齐 */
}

/* 左侧图片样式 */
.feed-thumb {
    flex: 0 0 200px; /* 固定宽度 200px，不伸缩 */
    height: 140px;   /* 固定高度 */
    overflow: hidden;
    border-radius: 6px;
}

.feed-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片填满且不变形 */
    display: block;
}

/* 右侧内容区域 */
.feed-content {
    flex: 1; /* 占据剩余所有宽度 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 内容垂直居中 (可选) */
}

/* --- 文字排版微调 --- */
.feed-title {
    margin: 0 0 10px 0;
    line-height: 1.4;
    font-size: 1rem;
    margin-bottom: 20px;
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
}

.feed-title a {
    text-decoration: none;
    color: var(--ink-color);
    background: linear-gradient(transparent 80%, #d3d3d3 80%);
    transition: background 0.3s;
}

.feed-meta {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 10px;
}

.feed-meta span {
    margin-right: 10px;
}

.feed-meta span::before {
    content: '#';
    margin-right: 4px;
    color: var(--accent-red);
}

.feed-desc {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    /* 限制摘要行数，超出显示省略号 (可选) */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 移动端适配 --- */
@media (max-width: 600px) {
    .feed-layout-image {
        /*flex-direction: column;  手机上改为上下排列 */
    }
    
    .feed-thumb {
        flex: auto;
        max-width: 100px;
        width: 100%;
        height: 100px; /* 手机上图片稍微高一点 */
    }
}
    
    
    
    
    
    
    

    .page-btn { background: transparent; border: 2px solid var(--ink-color); color: var(--ink-color); padding: 4px 10px;  font-size: 1rem; cursor: pointer; transition: all 0.2s; text-transform: uppercase; font-weight: bold; }
    .page-btn:hover { background: var(--ink-color); color: var(--bg-paper); }
    .page-btn.active { background: var(--accent-red); border-color: var(--accent-red); color: white; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); }
    .loading { text-align: center; padding: 50px; font-size: 1.2rem; animation: blink 1s infinite; }
    @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
    
    
      /* 分页容器 */
.pagination { 
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 15px; 
    margin-top: 0px; 
    margin-bottom: 0px;
    padding: 5px;
}


.page-navigator{margin:0;flex:1}
.page-navigator .current a{text-decoration:underline;color:inherit;pointer-events:none}
.page-navigator a:focus{background-color:var(--pico-text-selection-color)}
.page-navigator .prev{margin-right:auto}
.page-navigator .prev a:before{content:" ";margin-right:0.25rem}
.page-navigator .next{margin-left:auto;text-align:right}.page-navigator .next a:after{content:" ";margin-left:0.25rem}




/* 分页容器 (Typecho 1.3 默认生成 ul.page-navigator) */
.page-navigator { 
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 10px; 
    margin-top: 10px; 
    margin-bottom: 10px;
    padding: 0; /* 去掉默认列表内边距 */
    list-style: none; /* 去掉列表默认圆点 */
}

/* 列表项 (li) */
.page-navigator li { 
    margin: 0; /* 去掉默认边距 */
}

/* 链接样式 (a 标签) */
.page-navigator a { 
    background: transparent; 
    border: 2px solid var(--ink-color); 
    color: var(--ink-color); 
    padding: 6px 12px; 
    font-size: 1rem; 
    text-decoration: none; 
    transition: all 0.2s; 
    text-transform: uppercase; 
    font-weight: bold; 
    display: inline-block;
    border-radius: 4px; /* 稍微加点圆角 */
}

/* 鼠标悬停效果 */
.page-navigator a:hover { 
    background: var(--ink-color); 
    color: var(--bg-paper); 
    border-color: var(--ink-color);
    transform: translateY(-2px); /* 悬停时轻微上浮 */
}

/* 当前激活的页面 (Typecho 会自动给 li 添加 current 类) */
.page-navigator .current a { 
    background: var(--accent-red); 
    border-color: var(--accent-red); 
    color: white; 
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2); 
    cursor: default;
}

/* 禁用状态 (上一页/下一页在首尾页时) */
.page-navigator .disabled a { 
    border-color: #ccc; 
    color: #ccc; 
    cursor: not-allowed; 
    box-shadow: none;
}
.page-navigator .disabled a:hover {
    background: transparent;
    color: #ccc;
    transform: none;
}
    
    
    
    
    /* 针对文章详情页的特殊样式 */
.post-detail { padding: 40px; }
.post-content { font-size: 1.1rem; line-height: 1.8; color: #333; }
.post-content h1, .post-content h2, .post-content h3 { margin-top: 30px; border-bottom: 2px solid #333; padding-bottom: 10px; }
.post-content p { margin-bottom: 20px; }
.post-content img { max-width: 100%; border: 1px solid #ddd; padding: 10px; background: #fff; box-shadow: 3px 3px 0 rgba(0,0,0,0.1); }
.post-content blockquote { border-left: 4px solid #ff5858; margin: 20px 0; padding-left: 20px; color: #555; font-style: italic; }
.post-content code { background: #f0f0f0; padding: 2px 5px; border-radius: 3px; font-family: monospace; }
.post-tags { font-size: 0.9rem; }
.post-tags a { background: #333; color: #fff; padding: 2px 8px; border-radius: 2px; text-decoration: none; font-size: 0.8rem; }
.post-tags a:hover { background: #ff5858; }










/* --- 评论列表与容器 --- */
.comment-list {
    list-style: none;
    padding: 0;
    /* 为嵌套评论增加左侧边框或间距，提升层级感 */
}

/* --- 单条评论容器 (核心卡片) --- */
.comment-body {
    margin: 1.5rem 0; /* 增加一点呼吸感 */
    padding: 1.5rem;
    /* 渐变边框 + 内阴影 + 外阴影，打造玻璃质感 */
    border: 1px solid transparent;
    border-radius: 1rem; /* 比原来的 0.25rem 更圆润 */
    background: linear-gradient(var(--pico-background-color), var(--pico-background-color)) padding-box,
                linear-gradient(to bottom right, rgba(136, 145, 164, 0.1), rgba(136, 145, 164, 0)) border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 平滑动画 */
}

/* 悬停效果：鼠标移上时卡片微微上浮并放大 */
.comment-body:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* --- 评论作者与头像 --- */
.comment-author {
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 0.5rem; /* 使用 gap 属性，比 margin 更整洁 */
}

.comment-author .avatar {
    flex-shrink: 0; /* 防止头像被压缩 */
    width: 2.5rem; /* 稍微大一点 */
    height: 2.5rem;
    border-radius: 50%; /* 确保是完美的圆 */
    border: 2px solid var(--pico-primary); /* 增加一个主题色描边 */
    transition: transform 0.3s ease;
}

/* 头像悬停微动效 */
.comment-author .avatar:hover {
    transform: scale(1.1);
}

.comment-author cite,
.comment-author cite a {
    font-style: normal;
    font-weight: 700;
    color: var(--pico-h1-color); /* 使用更深的标题色 */
    font-size: 1.1rem; /* 稍微大一点 */
}

/* --- 作者标识 (OP) --- */
.comment-by-author > .comment-author::after {
    content: "Author";
    margin-left: 0.5rem;
    color: #fff;
    background-color: var(--pico-primary); /* 主题色背景 */
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: bold;
    border-radius: 9999px; /* 极圆胶囊 */
    box-shadow: 0 2px 4px rgba(1, 114, 173, 0.3);
    text-transform: uppercase; /* 全大写 */
    letter-spacing: 0.05em; /* 字间距 */
}

/* --- 评论元数据 (时间/链接) --- */
.comment-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--pico-muted-color);
    font-size: 0.875em;
    margin-top: 0.25rem;
    padding-left: 2.5rem; /* 与头像对齐 */
}

/* 使用伪元素作为分隔符，比纯文本更可控 */
.comment-meta::before {
    content: none; /* 移除原来的 · */
}

/* 手动添加分隔符样式（如果需要） */
.comment-meta span {
    color: var(--pico-muted-border-color);
}

.comment-meta a,
.comment-reply a {
    color: var(--pico-secondary);
    transition: color 0.2s ease;
}

.comment-meta a:hover,
.comment-reply a:hover {
    color: var(--pico-primary); /* 悬停变为品牌色 */
    text-decoration: underline;
}

/* --- 评论内容区域 --- */
.comment-content {
    margin-top: 1rem;
    line-height: 1.7; /* 更舒适的行高 */
    color: var(--pico-color);
}

/* 针对等待审核的特殊样式 */
.comment-awaiting-moderation {
    color: #d97706; /* 橙色警示，比原来的红色更友好 */
    font-weight: 500;
    background-color: #fef3c7;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    display: inline-block;
    margin-top: 0.5rem;
}

/* --- 子评论 (嵌套评论) --- */
/* 为嵌套评论增加左侧边框，视觉上更清晰 */
.comment-children {
    margin: 1.5rem 0 0 2rem; /* 左侧缩进 */
    padding-left: 1.5rem;
    border-left: 2px solid var(--pico-muted-border-color);
    border-radius: 0 0.5rem 0.5rem 0;
}

/* 递归样式：如果有多层嵌套，颜色变浅 */
.comment-children .comment-body {
    background-color: rgba(255, 255, 255, 0.5); /* 半透明白 */
    border-color: rgba(136, 145, 164, 0.2);
}

/* --- 评论回复表单与输入框 --- */
#response {
    margin-bottom: 2rem;
    padding-top: 2rem;
    border-top: 1px dashed var(--pico-muted-border-color); /* 虚线分隔 */
}

.respond {
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: var(--pico-background-color);
    border-radius: 0.75rem;
    border: 1px solid var(--pico-muted-border-color);
}

/* 表单输入框聚焦效果 */
#comment-form textarea,
#comment-form input[type="text"] {
    transition: all 0.2s ease;
    border-color: rgba(136, 145, 164, 0.3);
}

#comment-form textarea:focus,
#comment-form input[type="text"]:focus {
    border-color: var(--pico-primary);
    box-shadow: 0 0 0 3px rgba(1, 170, 255, 0.1);
    outline: none;
}