/* ==========================================================================
   Bloom v6 - 三栏博客主题（卡片+朋友圈多图+回复评论）
   ========================================================================== */

/* === Variables === */
:root{
    --accent:#4a9d88;
    --accent-rgb:74,157,136;
    --bg:#e8f0f2;--card:#ffffff;--card2:#f8fafa;
    --border:#e0eaec;--border2:#d0dcde;
    --text:#2c3e2d;--text2:#5a6b5c;--text3:#8a9a8c;
    --shadow:0 2px 12px rgba(0,0,0,.06);
    --shadow2:0 8px 30px rgba(0,0,0,.1);
    --radius:10px;--radius-sm:6px;
    --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft Yahei","Segoe UI",sans-serif;
    --left:250px;--right:250px;--gap:16px;
    --tr:.2s ease;
}
[data-theme="dark"]{
    --bg:#1a1f25;--card:#232a32;--card2:#2a333c;
    --border:#343d47;--border2:#3e4a56;
    --text:#e0e6eb;--text2:#9aa8b4;--text3:#6b7a87;
    --shadow:0 2px 12px rgba(0,0,0,.3);
    --shadow2:0 8px 30px rgba(0,0,0,.4);
}

/* === Reset === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--text);text-decoration:none;transition:color var(--tr)}
a:hover{color:var(--accent)}
img{max-width:100%;display:block}
ul,ol{list-style:none}
input,textarea,button{font-family:inherit;font-size:inherit;border:none;outline:none}
::selection{background:rgba(var(--accent-rgb),.25)}
#pjax-container{transition:opacity .15s ease}

/* === 三栏布局 === */
.container{max-width:1200px;margin:0 auto;display:flex;gap:var(--gap);padding:16px 12px}
.main-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--gap)}

/* ==================== LEFT SIDEBAR ==================== */
.left-sidebar{
    width:var(--left);flex-shrink:0;
    display:flex;flex-direction:column;gap:10px;
    position:sticky;top:16px;
    max-height:calc(100vh - 32px);overflow-y:auto;
    scrollbar-width:none;
}
.left-sidebar::-webkit-scrollbar{width:0}

.sidebar-profile{background:var(--card);border-radius:var(--radius);padding:24px 16px;text-align:center;border:1px solid var(--border)}
.sidebar-avatar{margin-bottom:10px}
.sidebar-avatar img,.avatar-placeholder{width:60px;height:60px;border-radius:50%;margin:0 auto;object-fit:cover;border:3px solid rgba(var(--accent-rgb),.2)}
.avatar-placeholder{background:rgba(var(--accent-rgb),.15);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:22px}
.sidebar-name{font-size:15px;font-weight:700;margin-bottom:2px}
.sidebar-bio{font-size:11px;color:var(--text3)}

.sidebar-nav{background:var(--card);border-radius:var(--radius);padding:6px;border:1px solid var(--border)}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--radius-sm);color:var(--text2);font-size:13px;font-weight:500;transition:all var(--tr)}
.nav-item:hover{background:rgba(var(--accent-rgb),.08);color:var(--accent)}
.nav-item.active{background:rgba(var(--accent-rgb),.15);color:var(--accent);font-weight:600}
.nav-item i{width:18px;text-align:center;font-size:14px}

.sidebar-section{background:var(--card);border-radius:var(--radius);padding:14px;border:1px solid var(--border)}
.sidebar-heading{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;gap:5px}
.sidebar-heading i{color:var(--accent);font-size:12px}

.topic-tags{display:flex;flex-wrap:wrap;gap:5px}
.topic-tag{padding:3px 10px;background:rgba(var(--accent-rgb),.08);border-radius:12px;font-size:11px;color:var(--accent);transition:all var(--tr);border:1px solid transparent}
.topic-tag:hover{background:rgba(var(--accent-rgb),.18);border-color:var(--accent)}

.social-icons{display:flex;gap:7px}
.social-icons a{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center;color:#fff;font-size:12px;transition:transform var(--tr)}
.social-icons a:hover{transform:translateY(-2px)}
.social-icons a:nth-child(1){background:#ff7a2f}
.social-icons a:nth-child(2){background:#12b7f5}
.social-icons a:nth-child(3){background:#07c160}
.social-icons a:nth-child(4){background:#333}
.social-icons a:nth-child(5){background:#333}

.about-list p{font-size:11px;color:var(--text2);margin:5px 0;display:flex;align-items:center;gap:5px}
.about-list p i{width:13px;text-align:center;color:var(--accent);font-size:11px}

.theme-toggle{background:var(--card);border-radius:var(--radius);padding:10px 14px;display:flex;align-items:center;gap:7px;cursor:pointer;border:1px solid var(--border);font-size:11px;color:var(--text3);user-select:none;transition:all var(--tr)}
.theme-toggle:hover{border-color:var(--accent)}
.theme-toggle i{color:var(--accent);font-size:13px}
.toggle-switch{width:34px;height:18px;background:var(--border);border-radius:9px;position:relative;margin-left:auto;transition:background var(--tr)}
.toggle-dot{width:14px;height:14px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform var(--tr);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.theme-toggle.on .toggle-switch{background:var(--accent)}
.theme-toggle.on .toggle-dot{transform:translateX(16px)}

/* ==================== BANNER ==================== */
.banner-card{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);position:relative}
.banner-bg{height:200px;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 40%,#0f3460 100%);position:relative;overflow:hidden}
.banner-stars{position:absolute;inset:0;background:radial-gradient(2px 2px at 10% 20%,rgba(255,255,255,.7) 50%,transparent 50%),radial-gradient(2px 2px at 30% 55%,rgba(255,255,255,.5) 50%,transparent 50%),radial-gradient(1px 1px at 55% 15%,rgba(255,255,255,.6) 50%,transparent 50%),radial-gradient(2px 2px at 75% 35%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(1px 1px at 90% 65%,rgba(255,255,255,.5) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 15% 75%,rgba(255,255,255,.6) 50%,transparent 50%),radial-gradient(1px 1px at 65% 70%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(2px 2px at 45% 40%,rgba(255,255,255,.3) 50%,transparent 50%)}
.banner-bg::after{content:'';position:absolute;top:12px;right:45px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#f0e6a0,#e8d580);box-shadow:0 0 18px rgba(240,230,160,.3)}

.banner-body{position:absolute;bottom:16px;left:0;right:0;z-index:1;padding:0 20px}
.banner-search-wrap{display:flex;justify-content:flex-end}
.banner-search{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25);border-radius:20px;overflow:hidden;transition:all var(--tr)}
.banner-search:hover,.banner-search:focus-within{background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.4)}
.banner-search input{padding:9px 18px;width:220px;font-size:13px;background:transparent;color:#fff;border:none;outline:none}
.banner-search input::placeholder{color:rgba(255,255,255,.65)}
[data-theme="dark"] .banner-search{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.15)}
[data-theme="dark"] .banner-search:hover,[data-theme="dark"] .banner-search:focus-within{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.25)}

/* ==================== 首页文章卡片 ==================== */
.article-list{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
    gap:24px;
    margin-top:24px;
}

.article-card{
    display:flex;
    flex-direction:column;
    background:var(--card);
    border-radius:16px;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
    transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow:hidden;
    border:1px solid var(--border);
    height:100%;
    position:relative;
    transform:translateY(0);
}
.article-card:hover{
    box-shadow:0 12px 40px rgba(var(--accent-rgb), 0.15);
    transform:translateY(-6px);
    border-color:var(--accent);
}

/* 缩略图 - 卡片顶部 */
.card-thumb{
    width:100%;
    height:220px;
    overflow:hidden;
    position:relative;
    flex-shrink:0;
}
.card-thumb::before{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(transparent 50%, rgba(0,0,0,0.1));
    z-index:1;
    opacity:0;
    transition:opacity 0.3s ease;
}
.article-card:hover .card-thumb::before{
    opacity:1;
}
.card-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.article-card:hover .card-thumb img{
    transform:scale(1.1);
}

/* 卡片文字区域 */
.card-body{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    padding:24px;
}
.card-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:12px;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:var(--text);
    transition:color 0.3s ease;
}
.article-card:hover .card-title{
    color:var(--accent);
}
.card-desc{
    font-size:15px;
    color:var(--text2);
    line-height:1.7;
    margin-bottom:20px;
    flex:1;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* 卡片元信息 */
.card-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:13px;
    color:var(--text3);
    padding-top:16px;
    border-top:1px solid var(--border);
}
.meta-left{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
.meta-item{
    display:flex;
    align-items:center;
    gap:6px;
    color:var(--text3);
    font-size:13px;
    transition:color 0.3s ease;
}
.meta-item i{
    font-size:14px;
    color:var(--accent);
}
.meta-right{
    display:flex;
    align-items:center;
    gap:16px;
}
.meta-stat{
    display:flex;
    align-items:center;
    gap:5px;
    color:var(--text3);
    font-size:13px;
}
.meta-stat i{
    font-size:14px;
    color:var(--accent);
}

/* 卡片标签 */
.card-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:12px;
}
.card-tag{
    padding:4px 10px;
    background:rgba(var(--accent-rgb), 0.08);
    border-radius:12px;
    font-size:11px;
    color:var(--accent);
    font-weight:500;
    transition:all 0.3s ease;
}
.card-tag:hover{
    background:rgba(var(--accent-rgb), 0.15);
    transform:translateY(-1px);
}
    opacity:0;
    transition:opacity 0.3s ease;
}
.article-card:hover .card-thumb::after{opacity:1}

/* 移动端：单列布局 */
@media(max-width:768px){
    .article-list{
        grid-template-columns:1fr;
        gap:16px;
        margin-top:16px;
    }
    .card-thumb{
        height:180px;
    }
    .card-body{
        padding:20px;
    }
    .card-title{
        font-size:18px;
        margin-bottom:10px;
    }
    .card-desc{
        font-size:14px;
        margin-bottom:16px;
    }
    .card-meta{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
        padding-top:16px;
    }
    .meta-left{
        gap:10px;
    }
    .meta-right{
        width:100%;
        justify-content:space-between;
        gap:0;
    }
}

/* === 分页 === */
.pagination{text-align:center;padding:6px 0}
.pagination a,.pagination span{display:inline-block;padding:5px 13px;margin:0 2px;font-size:12px;border-radius:var(--radius-sm);background:var(--card);color:var(--text2);border:1px solid var(--border);transition:all var(--tr)}
.pagination a:hover{background:rgba(var(--accent-rgb),.12);color:var(--accent);border-color:var(--accent)}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ==================== RIGHT SIDEBAR ==================== */
.right-sidebar{
    width:var(--right);flex-shrink:0;
    display:flex;flex-direction:column;gap:10px;
    position:sticky;top:16px;
    max-height:calc(100vh - 32px);overflow-y:auto;
    scrollbar-width:none;
}
.right-sidebar::-webkit-scrollbar{width:0}

.yiyan-card{height:190px;background:linear-gradient(135deg,#2c5364,#203a43,#0f2027);border-radius:var(--radius);position:relative;color:white;padding:14px;overflow:hidden}
.yiyan-card::before{content:'';position:absolute;inset:0;background:radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.4) 50%,transparent 50%),radial-gradient(1px 1px at 38% 12%,rgba(255,255,255,.3) 50%,transparent 50%),radial-gradient(1px 1px at 68% 32%,rgba(255,255,255,.25) 50%,transparent 50%),radial-gradient(1.5px 1.5px at 82% 55%,rgba(255,255,255,.4) 50%,transparent 50%)}
.yiyan-date{font-size:26px;font-weight:800;z-index:1;line-height:1}
.yiyan-date small{font-size:10px;font-weight:400;color:rgba(255,255,255,.6)}
.yiyan-text{position:absolute;bottom:18px;left:14px;right:14px;font-size:12px;line-height:1.6;z-index:1}

.widget-card{background:var(--card);border-radius:var(--radius);padding:14px;border:1px solid var(--border)}
.widget-title{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:5px}
.widget-title i{color:var(--accent);font-size:12px}

.hot-item{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);transition:all var(--tr)}
.hot-item:last-child{border-bottom:none}
.hot-item:hover{padding-left:3px}
.hot-thumb{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;background:rgba(var(--accent-rgb),.1)}
.hot-thumb-ph{display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:11px}
.hot-body{flex:1;min-width:0}
.hot-title{font-size:12px;font-weight:500;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hot-meta{font-size:10px;color:var(--text3)}

.cmt-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.cmt-item:last-child{border-bottom:none}
.cmt-avatar{width:36px;height:36px;border-radius:50%;flex-shrink:0}
.cmt-body{flex:1;min-width:0}
.cmt-meta{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.cmt-author{font-size:12px;font-weight:600;color:var(--text)}
.cmt-date{font-size:10px;color:var(--text3)}
.cmt-text{font-size:12px;color:var(--text2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6}
.cmt-reply{margin-top:6px;display:inline-block;font-size:10px;color:var(--accent);cursor:pointer}

.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.stat-item{background:rgba(var(--accent-rgb),.06);padding:8px 6px;border-radius:var(--radius-sm);text-align:center;transition:all var(--tr)}
.stat-item:hover{background:rgba(var(--accent-rgb),.12)}
.stat-num{display:block;font-size:15px;font-weight:700;color:var(--accent)}
.stat-label{font-size:10px;color:var(--text3)}

/* ==================== 文章页 ==================== */
.post-page,.page-body-card{background:var(--card);border-radius:var(--radius);padding:24px;border:1px solid var(--border)}
.post-title,.page-title{font-size:22px;font-weight:700;margin-bottom:6px;line-height:1.3}
.post-meta-bar{display:flex;gap:10px;font-size:12px;color:var(--text3);margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.post-meta-bar i{margin-right:2px}
.post-meta-bar .meta-cat{color:var(--accent)}

.post-body,.page-body{font-size:14px;line-height:1.85;color:var(--text)}
.post-body h2,.page-body h2{font-size:19px;font-weight:700;margin:26px 0 10px}
.post-body h3,.page-body h3{font-size:16px;font-weight:600;margin:22px 0 8px}
.post-body h4,.page-body h4{font-size:15px;font-weight:600;margin:18px 0 6px}
.post-body p,.page-body p{margin-bottom:14px}
.post-body a,.page-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.post-body blockquote,.page-body blockquote{margin:14px 0;padding:12px 16px;background:rgba(var(--accent-rgb),.06);border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--text2)}
.post-body blockquote p{margin-bottom:0}
.post-body code,.page-body code{padding:2px 6px;background:rgba(var(--accent-rgb),.08);border-radius:3px;font-size:13px;color:var(--accent)}
.post-body pre,.page-body pre{margin:14px 0;padding:14px;background:#2c2c2c;color:#e8e8e8;border-radius:var(--radius-sm);overflow-x:auto}
.post-body pre code,.page-body pre code{padding:0;background:none;color:inherit}
.post-body ul,.post-body ol,.page-body ul,.page-body ol{margin:12px 0;padding-left:22px}
.post-body ul,.page-body ul{list-style:disc}
.post-body ol,.page-body ol{list-style:decimal}
.post-body li,.page-body li{margin-bottom:4px}
.post-body img,.page-body img{max-width:100%;height:auto;margin:14px 0;border-radius:var(--radius-sm);display:block}
.post-body table,.page-body table{width:100%;margin:14px 0;border-collapse:collapse}
.post-body th,.post-body td,.page-body th,.page-body td{padding:8px 12px;border:1px solid var(--border);text-align:left}
.post-body th,.page-body th{background:rgba(var(--accent-rgb),.06);font-weight:600}
.post-body hr,.page-body hr{margin:24px 0;border:none;border-top:1px solid var(--border)}

.post-tags{margin-top:18px;padding-top:12px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:5px}
.post-tags a{padding:3px 10px;background:rgba(var(--accent-rgb),.08);border-radius:12px;font-size:11px;color:var(--accent);transition:all var(--tr)}
.post-tags a:hover{background:rgba(var(--accent-rgb),.18)}

.post-nav-links{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.pn-card{padding:12px;background:rgba(var(--accent-rgb),.06);border-radius:var(--radius-sm);transition:all var(--tr);border:1px solid transparent;display:block}
.pn-card:hover{background:rgba(var(--accent-rgb),.12);border-color:var(--accent)}
.pn-right{text-align:right}
.pn-label{display:block;font-size:10px;color:var(--text3);margin-bottom:2px}
.pn-title{display:block;font-size:13px;font-weight:500}
.pn-empty{color:var(--text3);font-size:12px;display:flex;align-items:center}

/* ==================== PAGE HEADER ==================== */
.page-header-card{background:var(--card);border-radius:var(--radius);padding:24px;border:1px solid var(--border)}
.page-header-card h1{font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px}
.page-header-card h1 i{color:var(--accent)}
.page-header-card p{font-size:13px;color:var(--text2);margin-top:4px}

.about-header{text-align:center}
.about-avatar{margin-bottom:14px}
.about-avatar img,.about-avatar .avatar-placeholder-lg{width:80px;height:80px;margin:0 auto}

/* ==================== ARCHIVE TIMELINE ==================== */
.archive-timeline{background:var(--card);border-radius:var(--radius);padding:20px;border:1px solid var(--border)}
.timeline-group{margin-bottom:14px}
.timeline-group:last-child{margin-bottom:0}
.timeline-month{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:8px;padding-bottom:5px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:5px}
.timeline-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--radius-sm);transition:all var(--tr);margin-bottom:1px}
.timeline-item:hover{background:rgba(var(--accent-rgb),.06);padding-left:14px}
.tl-date{font-size:11px;color:var(--text3);flex-shrink:0;width:38px}
.tl-title{flex:1;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-cmt{font-size:10px;color:var(--text3);flex-shrink:0;background:rgba(var(--accent-rgb),.08);padding:1px 6px;border-radius:8px}

/* ==================== LINKS PAGE ==================== */
.links-default{margin-bottom:20px}
.links-default h3{font-size:16px;margin-bottom:12px}
.link-format{background:rgba(var(--accent-rgb),.06);padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:14px;border-left:3px solid var(--accent)}
.link-format p{font-size:13px;margin:4px 0}
.link-note{font-size:13px;color:var(--text2);margin-bottom:8px}
.links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.link-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;gap:12px;align-items:center;transition:all var(--tr)}
.link-card:hover{box-shadow:var(--shadow);border-color:rgba(var(--accent-rgb),.3);transform:translateY(-2px)}
.link-card img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex-shrink:0}
.link-avatar-placeholder{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:rgba(var(--accent-rgb),.15);display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:18px;font-weight:700}
.link-info h4{font-size:14px;font-weight:600;margin-bottom:2px}
.link-info p{font-size:11px;color:var(--text3);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}

/* ==================== GALLERY PAGE ==================== */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.gallery-item{border-radius:var(--radius);overflow:hidden;aspect-ratio:1;position:relative;cursor:pointer;border:1px solid var(--border)}
.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.gallery-item:hover img{transform:scale(1.08)}
.gallery-item::after{content:attr(data-title);position:absolute;bottom:0;left:0;right:0;padding:8px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff;font-size:12px;opacity:0;transition:opacity .3s}
.gallery-item:hover::after{opacity:1}

/* ==================== PHOTOS GRID (朋友圈多图) ==================== */
.photos-grid{display:grid;gap:4px;margin:20px 0;border-radius:var(--radius-sm);overflow:hidden;background:transparent}
.photos-1{grid-template-columns:1fr;max-width:100%}
.photos-1 .photo-item{aspect-ratio:16/9}
.photos-1 .photo-item img{height:auto;max-height:500px;object-fit:contain}
.photos-2{grid-template-columns:1fr 1fr;max-width:100%}
.photos-2 .photo-item{aspect-ratio:1}
.photos-3{grid-template-columns:1fr 1fr 1fr;max-width:100%}
.photos-3 .photo-item{aspect-ratio:1}
.photos-4{grid-template-columns:1fr 1fr;max-width:100%}
.photos-4 .photo-item{aspect-ratio:1}
.photos-5{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;max-width:100%}
.photos-5 .photo-item:nth-child(1){grid-column:span 2;grid-row:span 2}
.photos-5 .photo-item:nth-child(2){grid-column:3}
.photos-5 .photo-item:nth-child(3){grid-column:3}
.photos-5 .photo-item:nth-child(4){grid-column:1}
.photos-5 .photo-item:nth-child(5){grid-column:2}
.photos-6{grid-template-columns:1fr 1fr 1fr;max-width:100%}
.photos-6 .photo-item{aspect-ratio:1}
.photos-7{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;max-width:100%}
.photos-7 .photo-item:nth-child(7){grid-column:span 2}
.photos-8{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;max-width:100%}
.photos-8 .photo-item:nth-child(8){grid-column:span 2}
.photos-9{grid-template-columns:1fr 1fr 1fr;max-width:100%}
.photos-9 .photo-item{aspect-ratio:1}
.photo-item{overflow:hidden;cursor:pointer;position:relative;border-radius:8px}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.3s ease, filter 0.3s ease}
.photo-item:hover img{transform:scale(1.05);filter:brightness(1.1)}
.photo-item::before{content:'';position:absolute;inset:0;border:1px solid rgba(0,0,0,.1);border-radius:8px;pointer-events:none}
[data-theme="dark"] .photo-item::before{border-color:rgba(255,255,255,.1)}

/* ==================== 评论 ==================== */
.comments-section{background:var(--card);border-radius:var(--radius);padding:20px;border:1px solid var(--border)}
.comment-list{margin-bottom:14px}
.comment-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}
.comment-item:last-child{border-bottom:none}
.comment-item[data-parent]:not([data-parent="0"]){margin-left:30px;border-left:2px solid rgba(var(--accent-rgb),.2);padding-left:12px}
.comment-item[data-parent]:not([data-parent="0"]) .cmt-avatar{width:32px;height:32px}

.cmt-form{padding:14px;background:rgba(var(--accent-rgb),.05);border-radius:var(--radius-sm);margin-top:10px}
.cmt-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.cmt-form input,.cmt-form textarea{width:100%;padding:9px 12px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:13px;color:var(--text);margin-bottom:10px;transition:border-color var(--tr)}
.cmt-form input:focus,.cmt-form textarea:focus{border-color:var(--accent)}
.cmt-form textarea{resize:vertical;min-height:70px}
.cmt-form button{padding:9px 22px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--tr);display:inline-flex;align-items:center;gap:5px}
.cmt-form button:hover{filter:brightness(1.1)}

/* ==================== 返回顶部 ==================== */
.back-to-top{position:fixed;bottom:30px;right:30px;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s ease;z-index:999}
.back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{filter:brightness(1.15);transform:translateY(-2px)}

/* ==================== 响应式 - 仅手机折叠 ==================== */
@media(max-width:640px){
    .container{flex-direction:column;gap:10px;padding:10px 8px}
    .left-sidebar{width:100%;position:static;max-height:none;flex-direction:row;flex-wrap:wrap;gap:8px}
    .sidebar-profile{flex:0 0 100%}
    .sidebar-nav{flex:2;display:flex;gap:0;padding:4px}
    .sidebar-nav .nav-item{flex:1;justify-content:center;padding:7px}
    .sidebar-section{flex:1;min-width:180px}
    .theme-toggle{flex:0 0 auto;margin-left:auto}
    .right-sidebar{width:100%;position:static;max-height:none;flex-direction:row;flex-wrap:wrap;gap:8px}
    .yiyan-card{flex:1;min-width:200px;height:140px}
    .widget-card{flex:1;min-width:200px}
    .banner-bg{height:140px}
    .banner-search input{width:180px}
    .post-page,.page-body-card{padding:16px}
    .post-title{font-size:18px}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .links-grid{grid-template-columns:1fr}
    .gallery-grid{grid-template-columns:repeat(2,1fr)}
    .photos-grid{max-width:100%!important}
    .post-nav-links{grid-template-columns:1fr}
    .pn-right{text-align:left}
    .back-to-top{bottom:20px;right:20px;width:36px;height:36px;font-size:14px}
}