*
/* 电脑端博客主页样式文件 */
/* 将博客预览卡片转为博客预览大模块 */
/* --- 1. 全局画布固定设置 --- */
html, body {
    /* 设定一个固定的最小宽度 (建议 1200px 或 1280px) */
    min-width: 1200px !important; 
    
    /* 允许横向和纵向滚动 */
    overflow-x: auto !important;
    overflow-y: auto !important;
    position:relative !important;
    /* 确保背景铺满，防止滑动出现白边 */
    width: 100%; 
    height: 100%;
}
.blog-card,
.blog-card.active,
.blog-card:not(.active):hover {
   /* 1. 位置大改：取消居中，改为“靠右站” */
   position: absolute;
    left: 600px !important;  
    right: auto !important;   /* 固定在右侧，留 4% 的空隙 */
    transform: none !important; /* 取消 translate(-50%) */
    cursor: default;
    height: 95%;
    bottom: 0; 
}   
.blog-card{
    
    max-width: 700px;
    /* 优化卡片 */
    border-radius: 20px 20px 0 0;
    overflow-y: auto; 
    
    /* 3. 优化滚动体验：平滑滚动 */
    scroll-behavior: smooth;
}

.click-hint {
    display: none !important; 
}
.close-btn {
    display: none !important; 
}
.blog-img-circle {
    transform: translateX(-50%) scale(1.1) !important;
}
.menu-toggle {
    display: none !important;
}    
.cebianlan {
    /* 1. 强制归位：直接固定在左侧 */
    /* 原本是 4.5vw，但在电脑上用固定像素(px)控制边距通常更好看，你可以自己选 */
    position: absolute !important;
    height: 100%;
    transform: translate(95%,10%);
    left: 20px;

    /* 2. 杀掉动画：取消所有过渡效果，让它看起来是“长”在页面上的 */
    border: none;
    transition: none !important; 
    /* 3. 【关键建议】调整宽度 */
    /* 手机上 55vw 很好，但电脑上太宽了。建议固定为 250px-300px 左右 */
    width: 280px !important;
    /* 4. 高度和位置微调（可选），让它在电脑屏幕垂直居中 */
    height: 90vh !important;
    top: 5vh !important; 
    /* 5. 确保层级正确 */
    z-index: 1000 !important;
}
.welcome-text{
    /* 将欢迎语放到cebianlan头上 */
    position: absolute;
    top: 60px;
    left: 430px;
}
.blog-card.hidden{
    opacity: 0 !important;
    transform: translateY(10%) !important;
    pointer-events: none; /* 确保隐藏后完全点不到 */
}
.cebianlan.hidden{
    opacity: 0 !important;
    transform: translateY(10%) !important;
    pointer-events: none; /* 确保隐藏后完全点不到 */
}
.post-item{
    padding: 30px 50px;
}
.view-all-box {
    text-align: center;
    margin-top: 40px;
    padding-bottom: 10px;
}
.post-list-container {
    margin-top: 30px; /* 给上面的圆图留位置 */
    max-height: 80vh; /* 防止卡片太高超出手机屏幕 */
    overflow-y: auto; /* 超出部分显示滚动条 */
    padding: 0 10px;
}
.search-box {
    position: absolute;
    top: 20px;       /* 紧贴容器顶部，和标题平行 */
    right: 20px;  /* 靠右 10px */
    z-index: 10;
    display: flex;
    align-items: center;
}
/* 3. 输入框本体样式 */
.search-input {
    /* 背景：极淡的白色透明，保持磨砂感 */
    background: rgba(255, 255, 255, 0.05);
    /* 边框：细微的亮边 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px; /* 圆角胶囊形状 */
    
    /* 尺寸控制 */
    width: 120px; /* 默认宽度窄一点，不遮挡标题 */
    height: 40px;
    padding: 10px 15px;
    
    /* 文字样式 */
    color: #f5f6ff;
    font-size: 12px;
    letter-spacing: 1px;
    outline: none; /* 去掉点击时的默认黑框 */
    
    /* 动画过渡：让变长和变色很丝滑 */
    transition: all 0.4s ease;
    backdrop-filter: blur(5px);
}
/* 4. 占位符文字颜色（Search...） */
.search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 200;
}
/* 5. 鼠标悬停 或 点击输入时 的状态 */
.search-input:hover,
.search-input:focus {
    width: 160px; /* 伸长，方便输入 */
    background: rgba(255, 255, 255, 0.15); /* 变亮一点 */
    border-color: #ff5acd; /* 边框变成你的主题粉色，呼应查看归档按钮 */
    box-shadow: 0 0 10px rgba(255, 90, 205, 0.2); /* 淡淡的发光效果 */
}
/* 6. 搜索图标样式（如果有的话） */
.search-box .iconfont {
    position: absolute;
    right: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    pointer-events: none; /* 让鼠标穿透图标，直接点到输入框 */
}

/* --- 搜索框样式结束 --- */
/* ========================================= */
.copyright-footer{
    position: absolute;
    right: 0px;
}
.site-logo{
    position:absolute;
}