:root {
--primary: #4f46e5;
--primary-light: #6366f1;
--primary-2: #7c3aed;
--primary-rgb: 79,70,229;
--text: #1e293b; --text-light: #64748b; --text-lighter: #94a3b8;
--bg: #f1f5f9; --card-bg: #fff; --border: #e2e8f0;
--radius: 0.75rem;
--shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,.06), 0 0.0625rem 0.125rem rgba(0,0,0,.04);
--shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,.08), 0 0.25rem 0.375rem -0.25rem rgba(0,0,0,.04);
--max-width: 75rem;
--header-bg: rgba(255,255,255,.92);
--code-bg: #f1f5f9;
}
[data-theme="dark"] {
--text: #e2e8f0; --text-light: #94a3b8; --text-lighter: #64748b;
--bg: #0f172a; --card-bg: #1e293b; --border: #334155;
--shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,.2), 0 0.0625rem 0.125rem rgba(0,0,0,.15);
--shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0,0,0,.3), 0 0.25rem 0.375rem -0.25rem rgba(0,0,0,.2);
--header-bg: rgba(15,23,42,.92);
--code-bg: #0f172a;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;color:var(--text);background:var(--bg);line-height:1.7;font-size:0.9375rem;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;transition:background-color .3s,color .3s}
a{color:var(--primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--primary-light)}
img{max-width:100%;height:auto}
::selection{background:rgba(var(--primary-rgb),.2);color:var(--text)}

.reading-progress{position:fixed;top:0;left:0;height:0.1875rem;background:linear-gradient(90deg,var(--primary),var(--primary-light));z-index:9999;width:0;transition:width .1s}

.site-header{background:var(--header-bg);border-bottom:0.0625rem solid var(--border);position:sticky;top:0;z-index:100;backdrop-filter:saturate(180%) blur(1.25rem);-webkit-backdrop-filter:saturate(180%) blur(1.25rem)}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:4rem}
.site-logo{display:flex;align-items:center;gap:0.625rem;font-size:1.375rem;font-weight:800;color:var(--text);letter-spacing:-0.02em}
.site-logo:hover{color:var(--primary)}
.site-logo img{height:2.25rem;width:auto}
.header-right{display:flex;align-items:center;gap:0.25rem}
.site-nav{display:flex;align-items:center;gap:0.125rem}
.site-nav a{padding:0.5rem 0.875rem;color:var(--text-light);font-size:0.875rem;font-weight:500;border-radius:0.625rem;transition:all .25s cubic-bezier(.4,0,.2,1);white-space:nowrap;position:relative}
.site-nav a:hover,.site-nav a.active{color:var(--primary);background:rgba(var(--primary-rgb),.06)}
.site-nav a::after{content:'';position:absolute;bottom:0.15rem;left:50%;transform:translateX(-50%);width:0;height:0.125rem;border-radius:0.125rem;background:var(--primary);transition:width .25s}
.site-nav a:hover::after,.site-nav a.active::after{width:1.25rem}
.nav-search{display:flex;align-items:center;margin-left:0.75rem}
.nav-search form{display:flex;align-items:center;position:relative}
.nav-search input{border:0.0625rem solid var(--border);border-radius:1.25rem;padding:0.4375rem 2.25rem 0.4375rem 1rem;font-size:0.8125rem;width:10.625rem;outline:none;transition:all .3s;background:var(--bg)}
.nav-search input:focus{border-color:var(--primary);width:13.75rem;background:var(--card-bg);box-shadow:0 0 0 0.1875rem rgba(var(--primary-rgb),.1)}
.nav-search button{position:absolute;right:0.25rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-light);cursor:pointer;padding:0.25rem 0.5rem;font-size:0.8125rem;border-radius:50%;transition:color .2s}
.nav-search button:hover{color:var(--primary)}
.mobile-toggle{display:none;background:none;border:none;font-size:1.25rem;color:var(--text);cursor:pointer;padding:0.5rem;border-radius:0.625rem}
.mobile-toggle:hover{background:var(--bg)}
.mobile-menu{display:none;position:fixed;top:4rem;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:99}
.mobile-menu.show{display:block}
.mobile-menu-inner{background:var(--card-bg);padding:1rem;max-height:70vh;overflow-y:auto;box-shadow:0 0.25rem 1.25rem rgba(0,0,0,.1)}
.mobile-menu-inner a{display:block;padding:0.75rem 1rem;color:var(--text);font-size:0.9375rem;border-radius:0.625rem;margin-bottom:0.125rem}
.mobile-menu-inner a:hover{background:var(--bg)}
.mobile-menu-inner .search-box{padding:0.75rem 0}
.mobile-menu-inner .search-box form{display:flex;gap:0.5rem}
.mobile-menu-inner .search-box input{flex:1;border:0.0625rem solid var(--border);border-radius:0.625rem;padding:0.625rem 1rem;font-size:0.875rem;outline:none;background:var(--bg)}
.mobile-menu-inner .search-box button{padding:0.625rem 1rem;background:var(--primary);color:#fff;border:none;border-radius:0.625rem;font-size:0.875rem;cursor:pointer}

.site-main{max-width:var(--max-width);margin:0 auto;padding:2rem 1.5rem;display:grid;grid-template-columns:1fr 18.75rem;gap:2rem}
.site-main.full-width{grid-template-columns:1fr;max-width:56.25rem}

/* Sticky sidebar */
.site-main > .sidebar{
    align-self: stretch;
    min-width: 0;
}
.sidebar-sticky-inner{
    position: sticky;
    top: var(--sidebar-top, 5rem);
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
/* 当侧边栏内容比视口还高时，取消 sticky 避免溢出 */
.sidebar-sticky-inner.sidebar-no-sticky{
    position: static !important;
    top: auto !important;
}

.post-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.5rem;transition:all .35s cubic-bezier(.4,0,.2,1)}
.post-card:hover{box-shadow:0 0.75rem 1.5rem -0.3125rem rgba(var(--primary-rgb),.15),0 0.375rem 0.625rem -0.375rem rgba(0,0,0,.06);transform:translateY(-0.25rem)}
.post-card-cover-wrap{overflow:hidden;position:relative}
.post-card-cover{width:100%;height:15rem;object-fit:cover;transition:transform .5s ease;display:block}
.post-card:hover .post-card-cover{transform:scale(1.03)}
.post-card-body{padding:1.5rem}
.post-card-meta{display:flex;align-items:center;gap:0.75rem;font-size:0.8125rem;color:var(--text-light);margin-bottom:0.75rem;flex-wrap:wrap}
.post-card-meta .cat-tag{background:rgba(var(--primary-rgb),.08);color:var(--primary);padding:0.125rem 0.625rem;border-radius:0.875rem;font-size:0.75rem;font-weight:600}
.post-card h2{font-size:1.25rem;font-weight:700;line-height:1.4;margin-bottom:0.625rem}
.post-card h2 a{color:var(--text)}
.post-card h2 a:hover{color:var(--primary)}
.post-card-excerpt{color:var(--text-light);font-size:0.875rem;line-height:1.8;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-footer{padding:0.875rem 1.5rem;border-top:0.0625rem solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:0.8125rem;color:var(--text-light)}
.post-card-footer .author-info{display:flex;align-items:center;gap:0.5rem}
.post-card-footer .author-info img{width:1.5rem;height:1.5rem;border-radius:50%}
.post-card-footer .stats{display:flex;gap:1rem}
.post-card-footer .stats span{display:flex;align-items:center;gap:0.25rem}

.post-content{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:3rem}
.post-content .post-title{font-size:1.875rem;font-weight:800;line-height:1.35;margin-bottom:1rem}
.post-content .post-meta{display:flex;align-items:center;gap:1rem;font-size:0.875rem;color:var(--text-light);padding-bottom:1.5rem;border-bottom:0.0625rem solid var(--border);margin-bottom:2rem;flex-wrap:wrap}
.post-content .post-meta a{color:var(--text-light)}
.post-content .post-meta a:hover{color:var(--primary)}
.post-content .post-cover{width:100%;border-radius:0.625rem;margin-bottom:2rem;max-height:30rem;object-fit:cover}
.post-body{font-size:1rem;line-height:2;color:#334155;word-break:break-word;overflow-wrap:break-word}
.post-body h2{font-size:1.375rem;margin:2.25rem 0 1rem;font-weight:700;padding-bottom:0.5rem;border-bottom:0.0625rem solid var(--border)}
.post-body h3{font-size:1.125rem;margin:1.75rem 0 0.75rem;font-weight:600}
.post-body h4{font-size:1rem;margin:1.25rem 0 0.5rem;font-weight:600}
.post-body p{margin-bottom:1rem}
.post-body img{max-width:100%;height:auto;border-radius:0.625rem;margin:1rem 0;cursor:zoom-in;display:block}
.post-body ul,.post-body ol{margin:0.75rem 0 0.75rem 1.5rem}
.post-body li{margin-bottom:0.375rem}
.post-body blockquote{border-left:0.25rem solid var(--primary);padding:1rem 1.5rem;background:var(--bg);border-radius:0 0.5rem 0.5rem 0;margin:1.25rem 0;color:var(--text-light);font-style:italic}
.post-body pre{background:#1e293b;color:#e2e8f0;padding:1.25rem 1.5rem;border-radius:0.6rem;overflow-x:auto;margin:1.25rem 0;font-size:0.875rem;line-height:1.6}
.post-body code{background:var(--code-bg);padding:0.1rem 0.4rem;border-radius:0.25rem;font-size:0.875rem;color:#e11d48;font-family:'Fira Code',Menlo,Monaco,Consolas,monospace}
.post-body pre code{background:none;color:inherit;padding:0;font-size:inherit}
.post-body table{width:100%;border-collapse:collapse;margin:1rem 0;font-size:0.875rem}
.post-body table th,.post-body table td{border:0.0625rem solid var(--border);padding:0.6rem 0.9rem;text-align:left}
.post-body table th{background:var(--bg);font-weight:600}
.post-body hr{border:none;border-top:0.0625rem solid var(--border);margin:2rem 0}
.post-body iframe,.post-body video,.post-body embed{max-width:100%;height:auto;border-radius:0.5rem;margin:1rem 0}
.post-body iframe{width:100%;aspect-ratio:16/9;min-height:auto}
.post-body .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0}
.post-body table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

.share-bar{display:flex;align-items:center;gap:0.75rem;margin-top:1.75rem;padding-top:1.5rem;border-top:0.0625rem solid var(--border)}
.share-bar span{font-size:0.875rem;color:var(--text-light)}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:50%;color:#fff;font-size:0.875rem;transition:transform .2s}
.share-btn:hover{transform:scale(1.15);color:#fff}

.sidebar .widget{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem;margin-bottom:1.25rem}
.widget-title{font-size:1rem;font-weight:700;margin-bottom:1rem;padding-bottom:0.75rem;border-bottom:0.125rem solid var(--primary);display:inline-block}
.widget ul{list-style:none}
.widget ul li{padding:0.5rem 0;border-bottom:0.0625rem dashed #f0f0f0}
.widget ul li:last-child{border-bottom:none}
.widget ul li a{color:var(--text);font-size:0.875rem}
.widget ul li a:hover{color:var(--primary)}
.widget .tag-cloud{display:flex;flex-wrap:wrap;gap:0.5rem}
.widget .tag-cloud a{background:#f1f5f9;color:var(--text-light);padding:0.25rem 0.75rem;border-radius:1rem;font-size:0.8125rem;transition:all .2s}
.widget .tag-cloud a:hover{background:var(--primary);color:#fff}

.profile-card-wrap{position:relative;overflow:hidden;padding:0 !important;}
.profile-card-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.profile-card-bg img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-card-bg-default{background:linear-gradient(135deg,#1e3a5f 0%,#0f1b2d 40%,#1a1040 70%,#0d0d2b 100%);}
.profile-card-bg-default::before{content:'';position:absolute;inset:0;background:repeating-conic-gradient(rgba(255,255,255,.02) 0% 25%,transparent 0% 50%) 0 0/3rem 3rem;animation:profileBgRotate 60s linear infinite;}
.profile-card-bg-default::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(99,102,241,.25),transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(139,92,246,.2),transparent 60%);}
@keyframes profileBgRotate{to{transform:rotate(360deg);}}
.profile-card-body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:2rem 1.5rem 1.5rem;background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.25) 100%);text-align:center;}
.profile-avatar{width:4.5rem;height:4.5rem;border-radius:50%;border:0.15rem solid rgba(255,255,255,.35);object-fit:cover;margin-bottom:0.6rem;box-shadow:0 0.25rem 1rem rgba(0,0,0,.3);}
.profile-social-row{display:flex;gap:0.5rem;margin-bottom:0.6rem;}
.profile-social-icon{width:1.8rem;height:1.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;font-size:0.75rem;transition:all .25s;backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem);border:0.0625rem solid rgba(255,255,255,.1);}
.profile-social-icon:hover{background:rgba(255,255,255,.25);transform:translateY(-0.1rem);color:#fff;}
.profile-nickname{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:0.25rem;text-shadow:0 0.0625rem 0.2rem rgba(0,0,0,.4);}
.profile-bio{font-size:0.8rem;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:0.8rem;max-width:100%;word-break:break-word;}
.profile-stats{display:flex;justify-content:center;gap:1.5rem;padding-top:0.75rem;border-top:0.0625rem solid rgba(255,255,255,.12);width:100%;}
.profile-stats .stat{text-align:center;}
.profile-stats .stat .num{font-size:1.1rem;font-weight:800;color:#fff;}
.profile-stats .stat .label{font-size:0.7rem;color:rgba(255,255,255,.55);}

.cat-list a{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 0;color:var(--text);font-size:0.875rem;border-bottom:0.0625rem dashed #f0f0f0}
.cat-list a:last-child{border-bottom:none}
.cat-list a:hover{color:var(--primary)}
.cat-list .count{background:#f1f5f9;color:var(--text-light);padding:0.0625rem 0.5rem;border-radius:0.625rem;font-size:0.75rem}

.pagination{display:flex;justify-content:center;gap:0.375rem;margin-top:2rem;padding-bottom:1rem}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:2.375rem;height:2.375rem;padding:0 0.75rem;border-radius:0.625rem;font-size:0.875rem;transition:all .25s cubic-bezier(.4,0,.2,1)}
.pagination a{background:var(--card-bg);color:var(--text);box-shadow:var(--shadow)}
.pagination a:hover{background:var(--primary);color:#fff;transform:translateY(-0.125rem);box-shadow:0 0.375rem 0.75rem rgba(var(--primary-rgb),.25)}
.pagination .current{background:var(--primary);color:#fff;font-weight:600;box-shadow:0 0.375rem 0.75rem rgba(var(--primary-rgb),.25)}

.comment-list{margin-top:1.5rem}
.comment-item{padding:1.25rem 0;border-bottom:0.0625rem solid var(--border)}
.comment-item:last-child{border-bottom:none}
.comment-header{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.5rem}
.comment-avatar{width:2.5rem;height:2.5rem;border-radius:50%;flex-shrink:0}
.comment-author{font-weight:600;font-size:0.875rem}
.comment-time{font-size:0.75rem;color:var(--text-light)}
.comment-body{font-size:0.875rem;line-height:1.8;color:#475569;margin-left:3.25rem}
.comment-reply{margin-left:0;margin-top:0.25rem}

.site-footer-new{background:var(--bg);color:var(--text-light);padding:2.5rem 0 1.5rem;margin-top:3.5rem;}
.footer-new-inner{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem;}
.footer-new-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;padding-bottom:1.5rem;border-bottom:0.0625rem solid var(--border);}
.footer-new-col{display:flex;flex-direction:column;gap:0.5rem;}
.footer-col-title{font-size:0.8rem;font-weight:700;color:var(--text);letter-spacing:0.02em;margin-bottom:0.25rem;}
.footer-col-link{display:flex;align-items:center;gap:0.5rem;font-size:0.82rem;color:var(--text-light);text-decoration:none;transition:color .2s;padding:0.15rem 0;border-radius:0.25rem;}
.footer-col-link:hover{color:var(--primary);}
.footer-col-link i{width:1rem;text-align:center;font-size:0.75rem;color:var(--text-lighter);flex-shrink:0;}
.footer-col-link:hover i{color:var(--primary);}
.footer-col-plain{cursor:default;}
.footer-col-plain:hover{color:var(--text-light);}
.footer-col-plain:hover i{color:var(--text-lighter);}
.footer-new-bottom{text-align:center;padding-top:1.25rem;font-size:0.75rem;color:var(--text-lighter);}
@media(max-width:48rem){
.footer-new-grid{grid-template-columns:1fr 1fr;gap:1.5rem;}
}
@media(max-width:30rem){
.footer-new-grid{grid-template-columns:1fr;gap:1.25rem;}
.site-footer-new{padding:2rem 0 1.25rem;margin-top:2.5rem;}
}

.back-to-top{position:fixed;right:1.5rem;bottom:1.5rem;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(255,255,255,.35);backdrop-filter:saturate(180%) blur(0.75rem);-webkit-backdrop-filter:saturate(180%) blur(0.75rem);color:var(--primary);border:0.0625rem solid rgba(255,255,255,.25);font-size:1.125rem;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 0.125rem 0.75rem rgba(0,0,0,.1);transition:all .3s;z-index:99}
.back-to-top:hover{transform:translateY(-0.1875rem);box-shadow:0 0.25rem 1rem rgba(0,0,0,.15);background:rgba(255,255,255,.5)}
.back-to-top.show{display:flex}
[data-theme="dark"] .back-to-top{background:rgba(30,41,59,.45);border-color:rgba(255,255,255,.1);color:var(--primary-light)}
[data-theme="dark"] .back-to-top:hover{background:rgba(30,41,59,.6)}

@media(max-width:62rem){
.site-main{grid-template-columns:1fr;padding:1.25rem 1rem;gap:1.25rem}

/* 移动端取消 sticky，侧边栏自然流动 */
.site-main > .sidebar{align-self:auto}
.sidebar-sticky-inner{position:static!important;top:auto!important;display:flex}

.detail-related-grid{grid-template-columns:1fr 1fr;}
.detail-nav{grid-template-columns:1fr;}
}
@media(max-width:48rem){
.site-nav,.nav-search{display:none}
.mobile-toggle{display:block}
.header-inner{padding:0 1rem}
.post-content{padding:1.5rem 1rem}
.post-content .post-title{font-size:1.5rem}
.post-card-body{padding:1rem}
.post-card-cover{height:11rem}
.post-card-footer{padding:0.75rem 1rem}

.detail-related-grid{grid-template-columns:1fr;}
.detail-nav{grid-template-columns:1fr;}
.link-card{padding:0.6rem 0.8rem;gap:0.6rem;}
.link-card-icon{width:2rem;height:2rem;font-size:0.9rem;}
.detail-comment-box{padding:1.25rem 1rem;}

/* 移动端评论表单修复 */
.comment-form{padding:1rem;border-radius:0.75rem}
.comment-form-header{gap:0.5rem}
.comment-user-avatar{width:2.5rem;height:2.5rem}
.comment-guest-fields{flex-direction:column;gap:0.5rem}
.comment-guest-fields input{width:100%;padding:0.6rem 0.8rem;font-size:0.875rem}
.comment-form textarea{font-size:16px;min-height:6rem}
.comment-form-footer{flex-direction:column;align-items:stretch;gap:0.5rem}
.comment-toolbar{overflow-x:auto}
.comment-submit-area{width:100%;justify-content:space-between}
.comment-submit-area .submit-btn{width:auto;flex:1;justify-content:center}
.captcha-row{flex-wrap:nowrap;gap:0.5rem}
.captcha-q{min-width:50px}
/* 表情面板移动端适配 */
.emoji-panel{
    position:fixed !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    width:100% !important;
    max-width:100% !important;
    max-height:60vh !important;
    border-radius:0.75rem 0.75rem 0 0 !important;
    box-shadow:0 -0.25rem 1rem rgba(0,0,0,.2) !important;
    z-index:9999 !important;
    animation:slideUp .25s ease;
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.emoji-grid{grid-template-columns:repeat(7,1fr) !important;max-height:calc(60vh - 3rem)}

/* 移动端文章内容溢出保护 */
.post-body img{max-width:100%;height:auto}
.post-body table{display:block;max-width:100%;overflow-x:auto}
.post-body iframe,.post-body video{max-width:100%;height:auto}
.post-body pre{max-width:100%;overflow-x:auto;font-size:0.8125rem}
.post-content .post-cover{max-height:20rem}

/* 移动端文章详情完整适配 */
.post-content{padding:1rem 0.875rem;margin:0}
.post-content .post-title{font-size:1.25rem;line-height:1.35;margin-bottom:0.875rem}
.post-content .post-meta{display:flex;flex-wrap:wrap;font-size:0.75rem;gap:0.5rem 0.75rem;padding-bottom:0.875rem;margin-bottom:1rem;line-height:1.6}
.post-content .post-meta span{white-space:nowrap}
.post-content .post-meta .post-author-meta{width:100%;margin-bottom:0.25rem;font-size:0.8125rem;font-weight:500}
.post-content .post-meta .post-author-meta img{width:1.5rem;height:1.5rem}
.post-content .post-cover{margin-bottom:1rem;border-radius:0.5rem;max-height:16rem}
.post-body{font-size:0.9375rem;line-height:1.85}
.post-body h1{font-size:1.5rem}
.post-body h2{font-size:1.25rem;margin:1.5rem 0 0.8rem}
.post-body h3{font-size:1.0625rem;margin:1.25rem 0 0.6rem}
.post-body h4{font-size:0.9375rem}
.post-body p{margin-bottom:0.875rem}
.post-body blockquote{padding:0.75rem 1rem;margin:1rem 0}
.post-body pre{padding:1rem;font-size:0.8125rem}
.post-body table{font-size:0.75rem}
.post-body table th,.post-body table td{padding:0.4rem 0.5rem}
.post-body img{margin:0.75rem 0;border-radius:0.375rem}
.post-body ul,.post-body ol{margin:0.5rem 0 0.5rem 1.25rem}

/* 分享条 */
.share-bar{flex-wrap:wrap;gap:0.375rem;padding:0.875rem 0 0}
.share-bar > span{width:100%;margin-bottom:0.25rem}
.share-btn{width:2.25rem;height:2.25rem;font-size:0.8125rem}

/* 标签和来源 */
.detail-tags{margin-top:0.875rem;gap:0.375rem}
.detail-tags a{padding:0.1875rem 0.625rem;font-size:0.6875rem}
.detail-source{padding:0.5rem 0.75rem;font-size:0.75rem;line-height:1.5}

/* 导航（上一篇/下一篇） */
.detail-nav{grid-template-columns:1fr;gap:0.5rem;margin-top:1rem;padding-top:0.875rem}
.detail-nav-item{padding:0.75rem}
.detail-nav-item img{width:3rem;height:2.25rem}
.detail-nav-item .nav-title{font-size:0.8125rem;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.detail-nav-item.next-item{text-align:left;justify-content:flex-start}
.detail-nav-item.next-item .nav-text{text-align:left}

/* 相关文章 */
.detail-related{padding:1rem;margin-top:0.875rem}
.detail-related-title{font-size:0.9375rem;margin-bottom:0.75rem}
.detail-related-grid{grid-template-columns:1fr;gap:0.5rem}
.detail-related-item{padding:0.625rem}

/* 评论区域 */
.detail-comment-box{padding:0.875rem 0.75rem;margin-top:1rem}
.detail-comment-title{font-size:0.9375rem}
}

/* ========== 轮播图 ========== */
.home-carousel{position:relative;overflow:hidden;border-radius:var(--radius);margin-bottom:1.5rem;box-shadow:var(--shadow-lg);background:#1e293b;}
.carousel-track{display:flex;transition:transform .5s ease;height:100%;}
.carousel-slide{flex:0 0 100%;position:relative;overflow:hidden;}
.carousel-slide img{width:100%;height:100%;object-fit:cover;display:block;}
.carousel-slide a{display:block;width:100%;height:100%;}
.carousel-caption{position:absolute;bottom:0;left:0;right:0;padding:1.5rem 2rem;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;font-size:1.2rem;font-weight:700;text-shadow:0 0.0625rem 0.25rem rgba(0,0,0,.4);}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.25);backdrop-filter:blur(0.25rem);border:none;color:#fff;width:2.8rem;height:2.8rem;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:all .25s;z-index:5;}
.carousel-btn:hover{background:rgba(255,255,255,.5);}
.carousel-prev{left:1rem;}
.carousel-next{right:1rem;}
.carousel-dots{position:absolute;bottom:0.8rem;left:50%;transform:translateX(-50%);display:flex;gap:0.5rem;z-index:5;}
.carousel-dot{width:0.5rem;height:0.5rem;border-radius:50%;background:rgba(255,255,255,.5);cursor:pointer;transition:all .25s;}
.carousel-dot.active{background:#fff;width:1.2rem;border-radius:1rem;}

/* ========== 公告栏 ========== */
.home-announcement{display:flex;align-items:center;gap:0.75rem;background:linear-gradient(135deg,rgba(var(--primary-rgb),.06) 0%,rgba(var(--primary-rgb),.02) 100%);border-radius:0.875rem;padding:0.65rem 1rem;margin-bottom:1.5rem;box-shadow:var(--shadow);overflow:hidden;border:0.0625rem solid rgba(var(--primary-rgb),.1);max-width:100%;}
.announcement-icon-wrap{flex-shrink:0;width:2rem;height:2rem;border-radius:0.625rem;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.8rem;box-shadow:0 0.15rem 0.4rem rgba(var(--primary-rgb),.3);}
.announcement-scroll{flex:1;overflow:hidden;position:relative;min-width:0;}
.announcement-text{display:inline-block;white-space:nowrap;font-size:0.85rem;font-weight:500;color:var(--text);will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;}

/* ========== 热门项目 ========== */
.home-hot-projects{margin-bottom:1.5rem;}
.section-title{font-size:1.1rem;font-weight:700;margin-bottom:0.8rem;color:var(--text);}
.projects-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem;}
.project-card{display:flex;align-items:center;gap:0.7rem;padding:0.8rem 1rem;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);transition:all .25s;text-decoration:none;color:var(--text);}
.project-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-0.15rem);color:var(--primary);}
.project-icon{flex-shrink:0;width:2.2rem;height:2.2rem;display:flex;align-items:center;justify-content:center;background:rgba(var(--primary-rgb),.1);color:var(--primary);border-radius:0.6rem;font-size:1rem;}
.project-info{flex:1;min-width:0;}
.project-name{font-size:0.9rem;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.project-desc{font-size:0.75rem;color:var(--text-light);margin-top:0.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ========== 新帖子卡片 ========== */
.posts-grid{display:grid;grid-template-columns:1fr;gap:1.2rem;}
.post-card-new{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:all .4s cubic-bezier(.4,0,.2,1);min-height:18rem}
.post-card-new:hover{box-shadow:0 1rem 2.5rem -0.5rem rgba(var(--primary-rgb),.2),0 0.5rem 1rem -0.5rem rgba(0,0,0,.08);transform:translateY(-0.3rem)}
.post-cover-bg{position:absolute;inset:0;display:block;z-index:1;}
.post-cover-bg img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.post-card-new:hover .post-cover-bg img{transform:scale(1.05);}
.post-cover-placeholder{background:linear-gradient(135deg,#334155 0%,#1e293b 100%);}
.placeholder-pattern{position:absolute;inset:0;opacity:.08;background:repeating-linear-gradient(45deg,transparent,transparent 1.5rem,rgba(255,255,255,.15) 1.5rem,rgba(255,255,255,.15) 3rem);}
.post-overlay{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-height:18rem;padding:1rem 1.2rem;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.05) 35%,rgba(0,0,0,.55) 100%);color:#fff;}
.post-top-meta{position:absolute;top:1rem;left:1.2rem;right:1.2rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;z-index:3;pointer-events:none;}
.post-top-meta > * {pointer-events:auto;}
.pin-badge{background:rgba(239,68,68,.9);color:#fff;padding:0.15rem 0.5rem;border-radius:0.3rem;font-size:0.7rem;font-weight:700;display:inline-flex;align-items:center;gap:0.25rem;}
.cat-tag-new{background:rgba(var(--primary-rgb),.85);color:#fff;padding:0.15rem 0.55rem;border-radius:0.3rem;font-size:0.7rem;font-weight:600;}
.post-bottom-info{position:relative;z-index:2;width:100%;padding-top:2.2rem;}
.post-title-new{font-size:1.15rem;font-weight:700;line-height:1.35;margin:0 0 0.4rem;text-shadow:0 0.0625rem 0.1875rem rgba(0,0,0,.3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-title-new a{color:#fff;text-decoration:none;}
.post-title-new a:hover{text-decoration:none;}
.post-excerpt-new{font-size:0.82rem;line-height:1.55;color:rgba(255,255,255,.78);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:0.5rem;}
.post-footer-new{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex-wrap:wrap;font-size:0.75rem;color:rgba(255,255,255,.65);}
.post-author-new{display:flex;align-items:center;gap:0.4rem;}
.post-author-new img{width:1.2rem;height:1.2rem;border-radius:50%;border:0.0625rem solid rgba(255,255,255,.3);}
.post-stats-new{display:flex;align-items:center;gap:0.7rem;}
.post-stats-new span{display:flex;align-items:center;gap:0.2rem;}

/* 置顶卡片左边框 */
.post-card-new.is-pinned{border-left:0.1875rem solid #ef4444;}

/* ========== 链接卡片（圆角卡片） ========== */
.link-card{display:flex;align-items:center;gap:0.85rem;padding:0.9rem 1.15rem;background:var(--card-bg);border:0.0625rem solid var(--border);border-radius:1rem;text-decoration:none;color:var(--text);transition:all .25s;margin:1rem 0;overflow:hidden;box-shadow:var(--shadow);}
.link-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-0.1rem);border-color:var(--primary);color:var(--text);}
.link-card-icon{flex-shrink:0;width:2.8rem;height:2.8rem;border-radius:0.65rem;background:rgba(var(--primary-rgb),.06);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.link-card-icon img{width:1.5rem;height:1.5rem;border-radius:0.4rem;object-fit:contain;}
.link-card-icon .fas{font-size:1.1rem;color:var(--primary);}
.link-card-body{flex:1;min-width:0;}
.link-card-title{font-size:0.9rem;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);}
.link-card-url{font-size:0.75rem;color:var(--text-light);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:0.15rem;}
.link-card-arrow{flex-shrink:0;color:var(--text-lighter);font-size:0.85rem;transition:transform .2s;}
.link-card:hover .link-card-arrow{transform:translateX(0.15rem);color:var(--primary);}
[data-theme="dark"] .link-card-icon{background:rgba(var(--primary-rgb),.12);}

/* ========== 详情页增强 ========== */
.detail-source{background:var(--bg);padding:0.9rem 1.25rem;border-radius:0.625rem;margin-top:1.5rem;font-size:0.875rem;color:var(--text-light);display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;}
.detail-tags{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center;}
.detail-tags a{background:var(--bg);color:var(--text-light);padding:0.25rem 0.9rem;border-radius:1rem;font-size:0.8rem;transition:all .2s;}
.detail-tags a:hover{background:var(--primary);color:#fff;}
.detail-nav{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:0.0625rem solid var(--border);}
.detail-nav-item{display:flex;gap:0.75rem;padding:1rem;border-radius:0.6rem;background:var(--bg);transition:all .2s;color:var(--text);text-decoration:none;overflow:hidden;}
.detail-nav-item:hover{box-shadow:var(--shadow);background:var(--card-bg);}
.detail-nav-item img{width:3.75rem;height:2.8rem;object-fit:cover;border-radius:0.4rem;flex-shrink:0;}
.detail-nav-item .nav-label{font-size:0.75rem;color:var(--text-light);margin-bottom:0.15rem;}
.detail-nav-item .nav-title{font-size:0.875rem;font-weight:600;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.detail-nav-item.next-item{text-align:right;justify-content:flex-end;}
.detail-nav-item.next-item .nav-text{text-align:right;}
.detail-related{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.75rem;margin-top:1.25rem;}
.detail-related-title{font-size:1.1rem;font-weight:700;margin-bottom:1.25rem;}
.detail-related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
.detail-related-item{display:flex;gap:0.75rem;padding:0.9rem;border-radius:0.6rem;background:var(--bg);transition:all .2s;color:var(--text);text-decoration:none;overflow:hidden;}
.detail-related-item:hover{box-shadow:var(--shadow);background:var(--card-bg);}
.detail-related-item img{width:5rem;height:3.75rem;object-fit:cover;border-radius:0.4rem;flex-shrink:0;}
.detail-related-item .ri-cover{width:5rem;height:3.75rem;background:linear-gradient(135deg,#e0e7ff,#c7d2fe);border-radius:0.4rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.detail-related-item .ri-cover i{color:#818cf8;}
.detail-related-item .ri-title{font-size:0.875rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.detail-related-item .ri-stats{font-size:0.75rem;color:var(--text-light);margin-top:0.25rem;}
.detail-comment-box{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.75rem;margin-top:1.25rem;}
.detail-comment-title{font-size:1.1rem;font-weight:700;margin-bottom:1.25rem;}
.detail-comment-form{margin-bottom:1.5rem;}
.detail-comment-form input[type=text],.detail-comment-form input[type=email],.detail-comment-form textarea{width:100%;border:0.0625rem solid var(--border);border-radius:0.625rem;padding:0.6rem 0.9rem;font-size:0.875rem;outline:none;transition:border-color .2s;font-family:inherit;background:var(--card-bg);color:var(--text);}
.detail-comment-form input:focus,.detail-comment-form textarea:focus{border-color:var(--primary);}
.detail-comment-form textarea{resize:vertical;}
.detail-reply-hint{margin-bottom:0.5rem;padding:0.5rem 0.9rem;background:var(--bg);border-radius:0.625rem;font-size:0.8rem;display:flex;align-items:center;gap:0.3rem;}
.detail-reply-hint a{margin-left:auto;color:var(--text-light);}
.detail-comment-actions{display:flex;justify-content:space-between;align-items:center;margin-top:0.75rem;}
.detail-captcha{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:var(--text-light);}
.detail-captcha input[type=number]{width:3.5rem;border:0.0625rem solid var(--border);border-radius:0.4rem;padding:0.4rem 0.6rem;font-size:0.875rem;outline:none;text-align:center;background:var(--card-bg);color:var(--text);}
.detail-submit-btn{background:var(--primary);color:#fff;border:none;border-radius:0.625rem;padding:0.6rem 1.75rem;font-size:0.875rem;cursor:pointer;font-weight:600;transition:all .2s;}
.detail-submit-btn:hover{opacity:.9;}
.detail-pwd-box{text-align:center;padding:5rem 2.5rem;}
.detail-pwd-box i{font-size:3.5rem;color:var(--border);margin-bottom:1.25rem;display:block;}
.detail-pwd-box h1{font-size:1.5rem;font-weight:700;margin-bottom:0.5rem;}
.detail-pwd-box p{color:var(--text-light);margin-bottom:1.5rem;}
.detail-pwd-form{max-width:20rem;margin:0 auto;}
.detail-pwd-form input{width:100%;border:0.125rem solid var(--border);border-radius:0.6rem;padding:0.75rem 1rem;font-size:0.9rem;outline:none;margin-bottom:0.75rem;text-align:center;background:var(--card-bg);color:var(--text);}
.detail-pwd-form button{width:100%;background:var(--primary);color:#fff;border:none;border-radius:0.6rem;padding:0.75rem;font-size:0.9rem;font-weight:600;cursor:pointer;}
.detail-empty{text-align:center;padding:5rem 0;}
.detail-empty i{font-size:4rem;color:var(--border);}
.detail-empty p{margin-top:1.2rem;color:var(--text-light);font-size:1rem;}


/* ========== 性能优化 ========== */
.home-carousel{will-change:auto;}
.carousel-track{will-change:transform;}
.post-card-new{will-change:transform;}
.profile-card-bg-default::before{will-change:transform;}
img[loading="lazy"]{content-visibility:auto;}
/* ========== 响应式 ========== */
@media(max-width:62rem){
.projects-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:48rem){
.home-carousel{border-radius:0.625rem;}
.carousel-btn{width:2.2rem;height:2.2rem;font-size:0.9rem;}
.carousel-caption{font-size:1rem;padding:1rem;}
.carousel-prev{left:0.5rem;}
.carousel-next{right:0.5rem;}
.projects-grid{grid-template-columns:1fr 1fr;}
.post-card-new{min-height:14rem;}
.post-overlay{min-height:14rem;padding:0.75rem 0.9rem;}
.post-title-new{font-size:0.95rem;}
.post-excerpt-new{-webkit-line-clamp:2;}
}
.comment-author-row{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:0.75rem;}
.share-bar{flex-wrap:wrap;}

@media(max-width:30rem){
.projects-grid{grid-template-columns:1fr 1fr;gap:0.5rem;}
.project-card{padding:0.6rem 0.7rem;gap:0.5rem;}
.project-icon{width:1.8rem;height:1.8rem;font-size:0.85rem;border-radius:0.625rem;}
.project-name{font-size:0.8rem;}
.project-desc{font-size:0.7rem;}
.post-card-new{min-height:12rem;}
.post-overlay{min-height:12rem;}
.comment-author-row{grid-template-columns:1fr;}
.post-content .post-meta{gap:0.625rem;}
.share-bar{gap:0.5rem;}
.share-bar span{width:100%;}
}

/* ========== 暗色模式补丁 ========== */
[data-theme="dark"] .home-announcement{background:linear-gradient(135deg,rgba(var(--primary-rgb),.12) 0%,rgba(var(--primary-rgb),.04) 100%);border-color:rgba(var(--primary-rgb),.2);}
[data-theme="dark"] .announcement-text{color:var(--text);}
[data-theme="dark"] .project-card{background:var(--card-bg);}
[data-theme="dark"] .project-card:hover{color:var(--primary);}
[data-theme="dark"] .project-icon{background:rgba(var(--primary-rgb),.15);}
[data-theme="dark"] .post-cover-placeholder{background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);}
[data-theme="dark"] .placeholder-pattern{opacity:.04;}
[data-theme="dark"] .link-card{background:var(--card-bg);border-color:var(--border);}
[data-theme="dark"] .link-card:hover{border-color:var(--primary);}
[data-theme="dark"] .detail-nav-item{background:rgba(255,255,255,.03);}
[data-theme="dark"] .detail-nav-item:hover{background:var(--card-bg);}
[data-theme="dark"] .detail-related-item{background:rgba(255,255,255,.03);}
[data-theme="dark"] .detail-related-item:hover{background:var(--card-bg);}
[data-theme="dark"] .detail-pwd-form input{background:var(--card-bg);color:var(--text);border-color:var(--border);}
[data-theme="dark"] .profile-card-bg-default{background:linear-gradient(135deg,#0f172a 0%,#020617 40%,#1e1040 70%,#0d0d2b 100%);}
[data-theme="dark"] .profile-card-bg-default::after{background:radial-gradient(ellipse at 30% 20%,rgba(99,102,241,.35),transparent 60%),radial-gradient(ellipse at 70% 80%,rgba(139,92,246,.3),transparent 60%);}

/* ========== Heo-style Custom Scrollbar ========== */
::-webkit-scrollbar{width:0.5rem;height:0.5rem}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(var(--primary-rgb),.25);border-radius:0.3rem;transition:background .2s}
::-webkit-scrollbar-thumb:hover{background:rgba(var(--primary-rgb),.45)}
::-webkit-scrollbar-corner{background:transparent}
[data-theme="dark"]::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15)}
[data-theme="dark"]::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}
*{scrollbar-width:thin;scrollbar-color:rgba(var(--primary-rgb),.25) transparent}

/* ========== Heo-style Widget Hover ========== */
.sidebar .widget{transition:all .3s cubic-bezier(.4,0,.2,1)}
.sidebar .widget:hover{box-shadow:var(--shadow-lg)}
.widget .tag-cloud a{transition:all .25s cubic-bezier(.4,0,.2,1)}
.widget .tag-cloud a:hover{background:var(--primary);color:#fff;transform:translateY(-0.125rem);box-shadow:0 0.25rem 0.625rem rgba(var(--primary-rgb),.2)}

/* ========== Heo-style Link Card Enhancement ========== */
.link-card{transition:all .3s cubic-bezier(.4,0,.2,1)}
.link-card:hover{box-shadow:0 0.625rem 1.5rem -0.3125rem rgba(var(--primary-rgb),.15);transform:translateY(-0.15rem);border-color:var(--primary)}

/* ========== Heo-style Comment Avatar ========== */
.comment-avatar{transition:transform .25s}
.comment-item:hover .comment-avatar{transform:scale(1.08) rotate(-3deg)}

/* ========== Heo-style Smooth Transitions ========== */
.site-header,.site-nav a,.post-card,.heo-card,.heo-side-card,.heo-feature,
.project-card,.link-card,.pagination a,.widget,.widget .tag-cloud a,
.back-to-top,.comment-avatar{transition-property:background-color,border-color,box-shadow,color,transform;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1)}

/* ========== Heo-style Code Block Enhancement ========== */
.post-body pre{position:relative;border-left:0.1875rem solid var(--primary)}
.post-body pre::before{content:'\f121';font-family:'Font Awesome 6 Free';font-weight:900;position:absolute;top:0.5rem;right:0.75rem;font-size:0.75rem;color:rgba(255,255,255,.2)}

/* ========== Heo-style Hero Section ========== */
.heo-hero{display:grid;grid-template-columns:1fr 16rem;gap:1rem;margin-bottom:1.5rem}
.heo-hero.heo-hero-full{grid-template-columns:1fr}
.heo-hero-main{position:relative;height:22rem;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.heo-hero-link{display:block;width:100%;height:100%;position:relative}
.heo-hero-img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.heo-hero-link::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.65) 100%);z-index:1;transition:background .35s}
.heo-hero-link:hover::before{background:linear-gradient(180deg,transparent 20%,rgba(0,0,0,.75) 100%)}
.heo-hero-link:hover .heo-hero-img{transform:scale(1.05)}
.heo-hero-content{position:absolute;bottom:0;left:0;right:0;padding:2rem 2.2rem;z-index:2;color:#fff}
.heo-hero-badge{display:inline-flex;align-items:center;gap:0.375rem;padding:0.35rem 0.75rem;background:rgba(255,255,255,.2);backdrop-filter:blur(0.625rem);-webkit-backdrop-filter:blur(0.625rem);border-radius:9rem;font-size:0.75rem;font-weight:600;margin-bottom:0.875rem;border:0.0625rem solid rgba(255,255,255,.15)}
.heo-hero-title{font-size:1.5rem;font-weight:800;line-height:1.3;margin-bottom:0.75rem;text-shadow:0 0.125rem 0.625rem rgba(0,0,0,.2)}
.heo-hero-meta{display:flex;align-items:center;gap:0.75rem;font-size:0.8125rem;opacity:.9}
.heo-hero-meta img{width:1.75rem;height:1.75rem;border-radius:50%;border:0.125rem solid rgba(255,255,255,.3)}
.heo-hero-dot{opacity:.5 }
.heo-hero-placeholder{background:linear-gradient(135deg,#1e3a5f 0%,#0f1b2d 40%,#1a1040 70%,#0d0d2b 100%)}
.heo-hero-side{display:flex;flex-direction:column;gap:1rem}
.heo-side-card{background:var(--card-bg);border-radius:0.75rem;padding:1.125rem;box-shadow:var(--shadow);border:0.0625rem solid var(--border);transition:all .35s cubic-bezier(.4,0,.2,1)}
.heo-side-card:hover{transform:translateY(-0.25rem);box-shadow:0 0 0 0.0625rem rgba(var(--primary-rgb),.08),0 1.25rem 1.5rem -0.3125rem rgba(var(--primary-rgb),.15);border-color:rgba(var(--primary-rgb),.15)}
.heo-side-title{font-size:0.9375rem;font-weight:700;margin-bottom:0.875rem;display:flex;align-items:center;gap:0.5rem}
.heo-side-title span{width:0.375rem;height:0.375rem;background:var(--primary);border-radius:50%}
.heo-trend-item{display:flex;align-items:center;gap:0.75rem;padding:0.625rem 0;border-bottom:0.0625rem solid var(--border);transition:all .25s}
.heo-trend-item:last-child{border-bottom:none;padding-bottom:0}
.heo-trend-item:first-child{padding-top:0}
.heo-trend-item:hover{transform:translateX(0.25rem)}
.heo-trend-rank{width:1.5rem;height:1.5rem;display:grid;place-items:center;border-radius:0.375rem;font-size:0.75rem;font-weight:700;background:var(--bg);color:var(--text-lighter);flex-shrink:0}
.heo-rank-1{background:#fef3c7 !important;color:#b45309 !important}
.heo-rank-2{background:#e0e7ff !important;color:#4338ca !important}
.heo-rank-3{background:#fce7f3 !important;color:#be185d !important}
.heo-trend-text{font-size:0.8125rem;font-weight:500;color:var(--text-light);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.heo-trend-item:hover .heo-trend-text{color:var(--primary)}

/* ========== Heo-style Category Tabs ========== */
.heo-tabs{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.75rem;padding:0.5rem;background:var(--card-bg);border-radius:0.75rem;border:0.0625rem solid var(--border);overflow-x:auto;scrollbar-width:none}
.heo-tabs::-webkit-scrollbar{display:none}
.heo-tab{padding:0.5rem 1.125rem;border-radius:9rem;font-size:0.875rem;font-weight:500;color:var(--text-light);white-space:nowrap;transition:all .35s cubic-bezier(.4,0,.2,1);cursor:pointer;border:none;background:transparent}
.heo-tab:hover{color:var(--primary);background:var(--bg)}
.heo-tab.active{background:var(--primary);color:#fff;box-shadow:0 0.25rem 0.875rem rgba(var(--primary-rgb),.35)}
.heo-tab-more{margin-left:auto;display:flex;align-items:center;gap:0.25rem;color:var(--text-lighter);font-size:0.8125rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .25s;padding:0.5rem 0.75rem}
.heo-tab-more:hover{color:var(--primary)}

/* ========== Heo-style Post Cards Grid ========== */
.heo-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;align-content:start}
.heo-cards.heo-cols-1{grid-template-columns:1fr}
.heo-card{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;border:0.0625rem solid var(--border);box-shadow:var(--shadow);transition:all .35s cubic-bezier(.4,0,.2,1);cursor:pointer;display:flex;flex-direction:column}
.heo-card:hover{transform:translateY(-0.5rem);box-shadow:0 0 0 0.0625rem rgba(var(--primary-rgb),.08),0 1.25rem 1.5rem -0.3125rem rgba(var(--primary-rgb),.15);border-color:rgba(var(--primary-rgb),.12)}
.heo-card-thumb{position:relative;height:11rem;overflow:hidden;display:block}
.heo-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.heo-card:hover .heo-card-thumb img{transform:scale(1.08)}
.heo-card-noimg{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(135deg,var(--bg),var(--border));color:var(--text-lighter);font-size:2rem}
.heo-card-tag{position:absolute;top:0.75rem;left:0.75rem;padding:0.3rem 0.75rem;background:rgba(255,255,255,.92);backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);border-radius:9rem;font-size:0.75rem;font-weight:600;color:var(--primary);box-shadow:var(--shadow)}
.heo-card-tag-pin{background:rgba(239,68,68,.92);color:#fff}
.heo-card-body{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.heo-card-title{font-size:1.0625rem;font-weight:700;line-height:1.45;margin-bottom:0.625rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .25s}
.heo-card-title a{color:var(--text)}
.heo-card:hover .heo-card-title a{color:var(--primary)}
.heo-card-desc{font-size:0.8125rem;color:var(--text-light);line-height:1.6;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.heo-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:0.875rem;border-top:0.0625rem solid var(--border)}
.heo-card-author{display:flex;align-items:center;gap:0.5rem}
.heo-card-author img{width:1.75rem;height:1.75rem;border-radius:50%;object-fit:cover}
.heo-card-author span{font-size:0.8125rem;color:var(--text-light);font-weight:500}
.heo-card-stats{display:flex;gap:0.75rem;font-size:0.75rem;color:var(--text-lighter)}
.heo-card-stats span{display:flex;align-items:center;gap:0.25rem}

/* ========== Heo-style Features Section ========== */
.heo-features{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin:2.5rem 0 1rem}
.heo-feature{background:var(--card-bg);border-radius:0.75rem;padding:1.5rem;border:0.0625rem solid var(--border);text-align:center;transition:all .35s cubic-bezier(.4,0,.2,1)}
.heo-feature:hover{transform:translateY(-0.375rem);box-shadow:0 0 0 0.0625rem rgba(var(--primary-rgb),.08),0 1.25rem 1.5rem -0.3125rem rgba(var(--primary-rgb),.15);border-color:rgba(var(--primary-rgb),.15)}
.heo-feature-icon{width:3.25rem;height:3.25rem;margin:0 auto 0.875rem;border-radius:0.875rem;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(135deg,rgba(var(--primary-rgb),.1),rgba(var(--primary-rgb),.18));color:var(--primary)}
.heo-feature h4{font-size:0.9375rem;font-weight:700;margin-bottom:0.375rem}
.heo-feature p{font-size:0.8125rem;color:var(--text-light)}

/* ========== Heo-style Dark Mode ========== */
[data-theme="dark"] .heo-side-card{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] .heo-card{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] .heo-card-noimg{background:linear-gradient(135deg,var(--bg),var(--border))}
[data-theme="dark"] .heo-feature{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] .heo-tab{color:var(--text-light)}
[data-theme="dark"] .heo-tab:hover{background:var(--bg)}
[data-theme="dark"] .heo-trend-rank{background:var(--bg)}
[data-theme="dark"] .heo-rank-1{background:rgba(180,83,9,.3) !important;color:#fbbf24 !important}
[data-theme="dark"] .heo-rank-2{background:rgba(67,56,202,.3) !important;color:#a5b4fc !important}
[data-theme="dark"] .heo-rank-3{background:rgba(190,24,93,.3) !important;color:#f9a8d4 !important}

/* ========== Heo-style Responsive ========== */
@media(max-width:64rem){
.heo-hero{grid-template-columns:1fr 14rem;gap:0.875rem}
.heo-hero-main{height:20rem}
}
@media(max-width:48rem){
.heo-cards,.heo-cards.heo-cols-1{grid-template-columns:1fr}
.heo-hero,.heo-hero.heo-hero-full{grid-template-columns:1fr}
.heo-hero-main{height:16rem}
.heo-hero-title{font-size:1.25rem}
.heo-hero-content{padding:1.25rem}
.heo-features{grid-template-columns:repeat(2,1fr)}
.heo-hero-side{flex-direction:column}
.heo-side-card{min-width:auto}
}
@media(max-width:30rem){
.heo-features{grid-template-columns:1fr}
.heo-hero-main{height:14rem}
}

/* ========== Comment Redesigned UI (Image 2 Style) ========== */
.post-author-meta{display:inline-flex;align-items:center;gap:0.375rem}
.post-author-meta img{margin-right:0 !important}

/* Comment Form */
.comment-form{
    background:var(--card-bg);
    border:0.0625rem solid var(--border);
    border-radius:1rem;
    padding:1.25rem;
    margin-bottom:1.5rem;
    transition:border-color .2s, box-shadow .2s;
    position:relative;
}
.comment-form:focus-within{
    border-color:var(--primary);
    box-shadow:0 0 0 0.1875rem rgba(var(--primary-rgb),.08);
}

/* Form header */
.comment-form-header{
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
    margin-bottom:0.75rem;
}
.comment-user-avatar{
    width:3rem;
    height:3rem;
    border-radius:50%;
    flex-shrink:0;
}
.comment-user-greeting{
    display:flex;
    flex-direction:column;
    gap:0.125rem;
    padding-top:0.25rem;
}
.greeting-name{font-weight:600;font-size:0.9375rem;color:var(--text)}
.greeting-hint{font-size:0.875rem;color:var(--text-lighter)}

/* Guest fields */
.comment-guest-fields{
    display:flex;
    gap:0.5rem;
    margin-bottom:0.75rem;
}
.comment-guest-fields input{
    flex:1;
    padding:0.5rem 0.75rem;
    border:0.0625rem solid var(--border);
    border-radius:0.5rem;
    background:transparent;
    color:var(--text);
    font-size:0.8125rem;
    outline:none;
    transition:border-color .2s;
}
.comment-guest-fields input:focus{border-color:var(--primary)}

/* Textarea */
.comment-form textarea{
    width:100%;
    border:0.0625rem solid var(--border);
    border-radius:0.75rem;
    padding:0.75rem 1rem;
    resize:vertical;
    font-size:0.9375rem;
    line-height:1.6;
    color:var(--text);
    background:var(--bg);
    outline:none;
    min-height:4.5rem;
    font-family:inherit;
    transition:border-color .2s;
}
.comment-form textarea:focus{border-color:var(--primary);background:var(--card-bg)}
.comment-form textarea::placeholder{color:var(--text-lighter)}

/* Form footer */
.comment-form-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:0.75rem;
    gap:0.75rem;
    flex-wrap:wrap;
    border:none !important;
    padding:0 !important;
}

/* Toolbar */
.comment-toolbar{
    display:flex;
    align-items:center;
    gap:0.25rem;
    border:none !important;
    border-top:none !important;
    padding:0 !important;
}
.toolbar-group{display:flex;align-items:center;gap:0.125rem;position:relative}
.toolbar-btn{
    width:2rem;
    height:2rem;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0.0625rem solid transparent;
    background:transparent;
    color:var(--text-light);
    border-radius:0.5rem;
    cursor:pointer;
    transition:all .15s;
}
.toolbar-btn:hover{
    background:rgba(var(--primary-rgb),.08);
    color:var(--primary);
    border-color:var(--border);
}
.toolbar-btn i{font-size:0.875rem}

/* Submit area */
.comment-submit-area{
    display:flex;
    align-items:center;
    gap:0.5rem;
    margin-left:auto;
}
.guest-login-promo{display:flex;align-items:center}
.login-promo-btn{
    display:inline-flex;
    align-items:center;
    gap:0.375rem;
    padding:0.4375rem 0.875rem;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#fff;
    border:none;
    border-radius:0.5rem;
    font-size:0.8125rem;
    font-weight:500;
    cursor:pointer;
    text-decoration:none;
    transition:all .2s;
}
.login-promo-btn:hover{transform:translateY(-0.0625rem);box-shadow:0 0.25rem 0.5rem rgba(var(--primary-rgb),.3)}

/* Captcha */
.captcha-row{
    display:flex;
    align-items:center;
    gap:0.375rem;
    padding:0.25rem 0.5rem;
    background:var(--bg);
    border:none;
    border-radius:0.5rem;
    min-height:2.25rem;
    flex-shrink:0;
    white-space:nowrap;
}
.captcha-q{
    font-size:0.875rem;
    font-weight:700;
    color:var(--text);
    font-family:monospace;
    padding:0.125rem 0.25rem;
    display:inline-block;
    line-height:1.4;
}
.captcha-input{
    width:3.5rem;
    height:2rem;
    padding:0.125rem 0.25rem;
    border:0.0625rem solid var(--border);
    border-radius:0.375rem;
    background:var(--card-bg);
    color:var(--text);
    font-size:0.875rem;
    text-align:center;
    outline:none;
    font-family:monospace;
}
.captcha-input::placeholder{color:var(--text-lighter);font-size:0.75rem}
.captcha-input:focus{border-color:var(--primary)}

/* Submit button */
.submit-btn{
    display:inline-flex;
    align-items:center;
    gap:0.375rem;
    padding:0.5rem 1.25rem;
    height:2.25rem;
    background:linear-gradient(135deg,var(--primary),var(--primary-2));
    color:#fff;
    border:none;
    border-radius:9999px;
    font-size:0.875rem;
    font-weight:600;
    cursor:pointer;
    transition:all .2s;
    flex-shrink:0;
    white-space:nowrap;
}
.submit-btn:hover{transform:translateY(-0.0625rem);box-shadow:0 0.25rem 0.5rem rgba(var(--primary-rgb),.3)}
.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}

/* ===== 胶囊提示 Toast ===== */
.comment-toast{
    position:fixed;
    top:2rem;
    left:50%;
    transform:translateX(-50%) translateY(-3rem);
    background:#111827;
    color:#fff;
    padding:0.625rem 1.25rem;
    border-radius:9999px;
    box-shadow:0 0.25rem 0.75rem rgba(0,0,0,.2);
    z-index:99999;
    opacity:0;
    transition:all .3s cubic-bezier(.4,0,.2,1);
    font-size:0.875rem;
    font-weight:500;
    pointer-events:none;
    max-width:90vw;
    display:flex;align-items:center;gap:0.5rem;
}
.comment-toast::before{
    content:'';
    width:0.5rem;height:0.5rem;border-radius:50%;background:#60a5fa;flex-shrink:0;
}
.comment-toast-success{background:#059669}
.comment-toast-success::before{background:#34d399}
.comment-toast-error{background:#dc2626}
.comment-toast-error::before{background:#f87171}
.comment-toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}
.comment-toast span{display:inline-block;max-width:22rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Image preview */
.toolbar-preview{
    display:flex;
    align-items:center;
    gap:0.375rem;
}
.image-preview-item{
    position:relative;
    width:3rem;
    height:3rem;
    border-radius:0.375rem;
    overflow:hidden;
    border:0.0625rem solid var(--border);
}
.image-preview-item img{width:100%;height:100%;object-fit:cover}
.image-preview-item button{
    position:absolute;top:0.125rem;right:0.125rem;
    width:1.25rem;height:1.25rem;
    border:none;background:rgba(0,0,0,.6);color:#fff;
    border-radius:50%;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:0.5rem;
}
.image-upload-loading{
    padding:0.375rem 0.625rem;
    background:rgba(var(--primary-rgb),.1);
    color:var(--primary);
    border-radius:0.375rem;
    font-size:0.75rem;
    display:flex;align-items:center;gap:0.375rem;
}

/* Emoji panel */
.emoji-panel{
    position:absolute;
    bottom:calc(100% + 0.5rem);
    left:0;
    background:var(--card-bg);
    border:0.0625rem solid var(--border);
    border-radius:0.75rem;
    box-shadow:0 -0.375rem 1.5rem rgba(0,0,0,.15);
    padding:0.75rem;
    width:20rem;
    max-width:calc(100vw - 2rem);
    max-height:18rem;
    overflow:hidden;
    z-index:200;
}
.emoji-categories{
    display:flex;gap:0.125rem;margin-bottom:0.5rem;
    padding-bottom:0.5rem;border-bottom:0.0625rem solid var(--border);
}
.emoji-cat{
    width:1.75rem;height:1.75rem;border:none;background:transparent;
    border-radius:0.375rem;cursor:pointer;font-size:1rem;
    display:flex;align-items:center;justify-content:center;transition:background .15s;
}
.emoji-cat:hover{background:rgba(var(--primary-rgb),.1)}
.emoji-cat.active{background:rgba(var(--primary-rgb),.15)}
.emoji-grid{
    display:grid;grid-template-columns:repeat(8,1fr);gap:0.125rem;
    max-height:12rem;overflow-y:auto;
}
.emoji-item{
    width:1.75rem;height:1.75rem;border:none;background:transparent;
    border-radius:0.375rem;cursor:pointer;font-size:1rem;
    display:flex;align-items:center;justify-content:center;transition:all .15s;
}
.emoji-item:hover{background:rgba(var(--primary-rgb),.1);transform:scale(1.15)}

/* Mention panel */
.mention-panel{
    position:absolute;
    bottom:calc(100% + 0.5rem);
    left:0;
    background:var(--card-bg);
    border:0.0625rem solid var(--border);
    border-radius:0.75rem;
    box-shadow:0 -0.375rem 1.5rem rgba(0,0,0,.15);
    width:15rem;
    max-width:calc(100vw - 2rem);
    max-height:16rem;
    z-index:200;
    overflow:hidden;
    display:flex;flex-direction:column;
}
.mention-panel input{
    width:100%;padding:0.5rem 0.625rem;border:none;
    border-bottom:0.0625rem solid var(--border);background:transparent;
    font-size:0.8125rem;outline:none;color:var(--text);
}
.mention-list{overflow-y:auto;flex:1;max-height:12rem}
.mention-item{
    display:flex;align-items:center;gap:0.5rem;
    padding:0.5rem 0.625rem;cursor:pointer;transition:background .15s;
}
.mention-item:hover{background:rgba(var(--primary-rgb),.08)}
.mention-avatar{width:1.75rem;height:1.75rem;border-radius:50%;object-fit:cover}
.mention-name{font-size:0.8125rem;font-weight:500;color:var(--text)}
.mention-empty{padding:1rem;text-align:center;color:var(--text-lighter);font-size:0.8125rem}

/* ========== Comment List Redesigned ========== */
.comment-list{margin-top:1rem}
.comment-empty{
    text-align:center;padding:2.5rem 0;
    color:var(--text-lighter);
}
.comment-empty i{font-size:2.5rem;color:var(--border);display:block;margin-bottom:0.75rem}
.comment-empty p{font-size:0.9375rem}

/* Comment item */
.comment-item{
    padding:1rem 0;
    border-bottom:0.0625rem solid var(--border);
}
.comment-item:last-child{border-bottom:none}
.comment-item.comment-root{padding:1.25rem 0}

.comment-main-row{
    display:flex;
    align-items:flex-start;
    gap:0.75rem;
}

.comment-avatar{
    width:2.75rem;
    height:2.75rem;
    border-radius:50%;
    flex-shrink:0;
}
.comment-avatar-sm{width:2.25rem;height:2.25rem}

.comment-content-wrap{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:0.25rem;
}

/* Header line: name + level + badge + tags */
.comment-header-line{
    display:flex;
    align-items:center;
    gap:0.375rem;
    flex-wrap:wrap;
}
.comment-author-name{
    font-weight:600;
    font-size:0.9375rem;
    color:var(--text);
}
.comment-badge-verified{
    color:#3b82f6;
    font-size:0.8125rem;
}

/* Reply indicator for nested comments */
.reply-indicator{
    font-size:0.8125rem;
    color:var(--text-light);
    margin-top:0.125rem;
}
.reply-to-name{color:var(--primary);font-weight:500}

/* Comment text */
.comment-text{
    font-size:0.9375rem;
    line-height:1.7;
    color:var(--text);
    word-break:break-word;
    margin-top:0.125rem;
}
.comment-text img{
    max-width:100%;
    border-radius:0.5rem;
    margin:0.5rem 0;
    display:block;
}
.comment-mention{
    color:var(--primary);
    font-weight:500;
    cursor:pointer;
}

/* Meta line: time + tags + location + OS */
.comment-meta-line{
    display:flex;
    align-items:center;
    gap:0.5rem;
    flex-wrap:wrap;
    font-size:0.75rem;
    color:var(--text-lighter);
    margin-top:0.25rem;
}
.comment-meta-line i{font-size:0.6875rem;margin-right:0.125rem}
.comment-tag{
    display:inline-flex;
    align-items:center;
    padding:0.125rem 0.5rem;
    border-radius:0.375rem;
    font-size:0.6875rem;
    font-weight:500;
}
.comment-tag-quality{
    background:linear-gradient(135deg,#fef3c7,#fde68a);
    color:#92400e;
}
.comment-location, .comment-os, .comment-browser{
    padding:0.125rem 0.375rem;
    background:var(--bg);
    border-radius:0.25rem;
    color:var(--text-light);
}

/* Actions line */
.comment-actions-line{
    display:flex;
    align-items:center;
    gap:0.125rem;
    margin-top:0.5rem;
}
.comment-action-item{
    display:inline-flex;
    align-items:center;
    gap:0.1875rem;
    padding:0.375rem 0.625rem;
    border:none;
    background:transparent;
    color:var(--text-lighter);
    border-radius:0.375rem;
    cursor:pointer;
    font-size:0.75rem;
    transition:all .15s;
}
.comment-action-item:hover{background:rgba(var(--primary-rgb),.08);color:var(--primary)}
.comment-action-item.liked{color:#ef4444}
.comment-action-item.liked:hover{color:#dc2626}
.comment-action-reply{
    gap:0.25rem;
    font-size:0.8125rem;
    font-weight:500;
    color:var(--text-light);
}
.comment-action-reply span{
    display:inline;
}
.comment-action-reply:hover{
    color:var(--primary);
    background:rgba(var(--primary-rgb),.08);
}
.comment-action-more{
    padding:0.375rem;
}

/* More menu */
.comment-more-menu{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    background:var(--card-bg);
    border:0.0625rem solid var(--border);
    border-radius:0.5rem;
    box-shadow:0 0.375rem 1rem rgba(0,0,0,.12);
    min-width:7rem;
    z-index:100;
    overflow:hidden;
}
.comment-item{position:relative}
.comment-action-more{position:relative}
.comment-more-menu.show{display:flex;flex-direction:column}
.comment-more-menu button{
    display:flex;align-items:center;gap:0.5rem;
    width:100%;padding:0.5rem 0.75rem;
    background:transparent;border:none;
    color:var(--text);font-size:0.8125rem;
    cursor:pointer;text-align:left;transition:background .15s;
}
.comment-more-menu button:hover{background:rgba(var(--primary-rgb),.08)}

/* Author tag */
.comment-author-tag{
    display:inline-flex;
    align-items:center;
    padding:0.0625rem 0.375rem;
    background:linear-gradient(135deg,#f59e0b,#ef4444);
    color:#fff;
    border-radius:0.25rem;
    font-size:0.625rem;
    font-weight:700;
    line-height:1.4;
    white-space:nowrap;
}

/* Level/badge in comments */
.comment-header-line .user-level-badge{
    margin-left:0.125rem;flex-shrink:0;
}

/* Comment level badge */
.comment-level-badge{
    display:inline-flex;
    align-items:center;
    padding:0.0625rem 0.375rem;
    border-radius:0.25rem;
    font-size:0.6875rem;
    font-weight:700;
    line-height:1.4;
    white-space:nowrap;
    color:#fff;
    background:linear-gradient(135deg,#64748b,#475569);
}
.comment-level-badge.level-1{background:linear-gradient(135deg,#94a3b8,#64748b)}
.comment-level-badge.level-2{background:linear-gradient(135deg,#22c55e,#16a34a)}
.comment-level-badge.level-3{background:linear-gradient(135deg,#3b82f6,#2563eb)}
.comment-level-badge.level-4{background:linear-gradient(135deg,#f59e0b,#d97706)}
.comment-level-badge.level-5{background:linear-gradient(135deg,#ef4444,#dc2626)}
.comment-level-badge.level-6{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.comment-level-badge.level-7{background:linear-gradient(135deg,#ec4899,#db2777)}
.comment-level-badge.level-8{background:linear-gradient(135deg,#f43f5e,#e11d48)}
.comment-level-badge.level-9{background:linear-gradient(135deg,#06b6d4,#0891b2)}
.comment-level-badge.level-10{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#78350f}
.comment-header-line .badge-img-wrap,
.comment-header-line .badge-svg-wrap,
.comment-header-line .badge-svga-wrap,
.comment-header-line .badge-default-wrap{
    flex-shrink:0;
}

/* Nested children - all replies aligned same left edge, no staircase */
.comment-children{
    margin-top:0.5rem;
    padding-left:0;
    border:none;
    margin-left:0;
}
.comment-children .comment-item{
    padding:0.625rem 0;
    border-bottom:0.0625rem dashed var(--border);
}
.comment-children .comment-item:last-child{border-bottom:none}
.comment-children .comment-children{
    margin-left:0;
}

/* Horizontal reply layout - same alignment as parent */
.comment-item.comment-reply{
    padding-left:0;
}
.comment-item.comment-reply .comment-main-row{
    position:relative;
}
.comment-item.comment-reply .comment-avatar{
    width:2.25rem;height:2.25rem;
}

/* Dark mode */
[data-theme="dark"] .comment-mention{color:var(--primary-light)}
[data-theme="dark"] .comment-tag-quality{background:linear-gradient(135deg,rgba(251,191,36,.2),rgba(245,158,11,.2));color:#fbbf24}
[data-theme="dark"] .comment-location,
[data-theme="dark"] .comment-os,
[data-theme="dark"] .comment-browser{background:rgba(255,255,255,.05)}

/* Responsive */
@media(max-width:48rem){
    .comment-form-footer{flex-wrap:wrap}
    .comment-submit-area{margin-left:0;width:100%;justify-content:space-between}
    .comment-guest-fields{flex-direction:column}
    .captcha-row{flex:1}
}
@media(max-width:30rem){
    /* 评论 */
    .comment-children{margin-left:0.75rem}
    .comment-user-avatar{width:2.25rem;height:2.25rem}
    .comment-avatar{width:2rem;height:2rem}
    .comment-avatar-sm{width:1.5rem;height:1.5rem}
    .comment-author-tag{font-size:0.5625rem}
    .comment-form{padding:0.75rem}
    
    /* 文章详情超小屏适配 */
    .site-main{padding:0.5rem 0.375rem}
    .post-content{padding:0.75rem 0.625rem;margin:0}
    .post-content .post-title{font-size:1.0625rem;line-height:1.3}
    .post-content .post-meta{font-size:0.6875rem;gap:0.25rem 0.5rem}
    .post-content .post-meta .post-author-meta{font-size:0.75rem}
    .post-content .post-cover{max-height:10rem;margin-bottom:0.75rem;border-radius:0.375rem}
    .post-body{font-size:0.875rem;line-height:1.75}
    .post-body h1{font-size:1.25rem}
    .post-body h2{font-size:1.0625rem}
    .post-body h3{font-size:0.9375rem}
    .post-body p{margin-bottom:0.625rem}
    .post-body img{margin:0.5rem 0}
    .post-body blockquote{padding:0.5rem 0.75rem}
    .post-body pre{padding:0.625rem;font-size:0.75rem}
    .post-body ul,.post-body ol{margin:0.375rem 0 0.375rem 1rem}
    .detail-source{font-size:0.6875rem;padding:0.375rem 0.5rem}
    .detail-tags a{padding:0.125rem 0.5rem;font-size:0.625rem}
    .detail-nav-item{flex-direction:column;align-items:flex-start}
    .detail-nav-item.next-item{align-items:flex-end}
    .detail-nav-item img{display:none}
    .share-bar{gap:0.25rem}
    .share-btn{width:1.75rem;height:1.75rem;font-size:0.6875rem}
    .share-bar > span{font-size:0.6875rem}
    .detail-comment-box{padding:0.75rem 0.625rem}
    .detail-comment-title{font-size:0.875rem}
    .footer-social{gap:1rem}
    .footer-social-item{width:2rem;height:2rem;font-size:0.75rem}
    .footer-cats{gap:1.5rem 2rem}
    .footer-cat{min-width:8rem}
}
.comment-replies-new > .comment-item{
    padding-left:0;
}

/* Reply hint */
.detail-reply-hint{
    display:flex;
    align-items:center;
    gap:0.375rem;
    padding:0.5rem 0.75rem;
    background:rgba(var(--primary-rgb),.08);
    border-radius:0.375rem;
    font-size:0.8125rem;
    color:var(--text-light);
    margin-bottom:0.5rem;
}
.detail-reply-hint a{
    margin-left:auto;
    color:var(--text-lighter);
    cursor:pointer;
}
.detail-reply-hint a:hover{color:var(--primary);}

/* Badge in comments */
.comment-author-row .badge-img-wrap,
.comment-author-row .badge-svg-wrap{
    vertical-align:middle;
}

/* ===== User Profile Badge Wear UI ===== */
.user-badge-wear-btn{
    margin-top:0.5rem;
    padding:0.25rem 0.625rem;
    font-size:0.6875rem;
    border:0.0625rem solid var(--user-accent);
    background:transparent;
    color:var(--user-accent);
    border-radius:0.375rem;
    cursor:pointer;
    transition:all .15s;
    font-weight:500;
}
.user-badge-wear-btn:hover{
    background:var(--user-accent);
    color:#fff;
}
.user-badge-wear-btn.worn{
    background:var(--user-accent);
    color:#fff;
}
.user-badge-worn{
    border-color:var(--user-accent) !important;
    background:rgba(var(--user-accent-rgb),.08) !important;
}
.user-badge-worn-badge{
    position:absolute;
    top:-4px;
    right:-4px;
    width:1.25rem;
    height:1.25rem;
    background:var(--user-accent);
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.625rem;
    box-shadow:0 2px 8px rgba(var(--user-accent-rgb),.3);
    animation:badge-pop .4s cubic-bezier(.34,1.56,.64,1);
}
.user-badge-worn-notice{
    margin-top:0.75rem;
    padding:0.5rem 0.75rem;
    background:rgba(var(--user-accent-rgb),.08);
    border-radius:0.5rem;
    font-size:0.75rem;
    color:var(--user-accent);
    display:flex;
    align-items:center;
    gap:0.375rem;
}

/* SVGA Badge Canvas */
.badge-svga-wrap{
    position:relative;
    overflow:hidden;
}
.badge-svga-canvas{
    display:block;
    width:100%;
    height:100%;
}

/* Badge loading animation */
.badge-svga-wrap::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
    background-size:200% 100%;
    animation:badge-loading 1.5s infinite;
    opacity:0;
    pointer-events:none;
}
.badge-svga-wrap.loading::after{opacity:1}
@keyframes badge-loading{
    0%{background-position:200% 0}
    100%{background-position:-200% 0}
}

/* ===== Dark mode comment new UI ===== */
[data-theme="dark"] .detail-comment-form-new{
    background:var(--card-bg);
    border-color:var(--border);
}
[data-theme="dark"] .comment-toolbar{border-top-color:var(--border)}
[data-theme="dark"] .detail-comment-actions-new{border-top-color:var(--border)}
[data-theme="dark"] .toolbar-btn:hover{background:rgba(var(--primary-rgb),.15)}
[data-theme="dark"] .login-alt{border-color:var(--border);color:var(--text-lighter)}
[data-theme="dark"] .comment-item{border-bottom-color:var(--border)}
[data-theme="dark"] .comment-replies-new > .comment-item::before{background:var(--border)}
[data-theme="dark"] .user-badge-wear-btn{border-color:var(--user-accent)}
[data-theme="dark"] .user-badge-worn{background:rgba(var(--user-accent-rgb),.15) !important}
[data-theme="dark"] .emoji-panel{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] .emoji-cat:hover{background:rgba(var(--primary-rgb),.15)}
[data-theme="dark"] .emoji-item:hover{background:rgba(var(--primary-rgb),.15)}
[data-theme="dark"] .mention-panel{background:var(--card-bg);border-color:var(--border)}
[data-theme="dark"] .mention-item:hover{background:rgba(var(--primary-rgb),.12)}

/* ===== Responsive comment UI ===== */
@media(max-width:48rem){
    .comment-header-new{flex-wrap:wrap}
    .comment-actions-new{width:100%;justify-content:flex-end}
    .comment-body-new{padding-left:0}
    .comment-replies-new{padding-left:2.5rem}
    .login-promo{flex-wrap:wrap}
    .emoji-panel{width:18rem}
    .mention-panel{width:13rem}
}
@media(max-width:30rem){
    .comment-toolbar{overflow-x:auto;flex-wrap:nowrap}
    .toolbar-divider{margin-left:0.25rem;padding-left:0.375rem}
    .detail-comment-actions-new{flex-direction:column;align-items:stretch}
    .comment-submit-row{margin-left:0;justify-content:space-between}
    .login-promo{justify-content:center}
    .comment-body-new{padding-left:0}
    .comment-replies-new{padding-left:1.5rem}
    .comment-avatar{width:2rem;height:2rem}
    .comment-author-tag{font-size:0.5625rem}
}

/* ========== User Level Badge ========== */
.user-level-badge{
    display:inline-flex;
    align-items:center;
    gap:0.1875rem;
    padding:0.125rem 0.5rem;
    background:linear-gradient(135deg, rgba(var(--primary-rgb),0.1), rgba(var(--primary-rgb),0.18));
    border:0.0625rem solid rgba(var(--primary-rgb),0.25);
    border-radius:0.375rem;
    color:var(--primary);
    font-size:0.75rem;
    font-weight:600;
    line-height:1;
    vertical-align:middle;
    white-space:nowrap;
    transition:all .2s;
}
.user-level-badge i{font-size:0.6875rem;}
.user-level-badge:hover{
    background:linear-gradient(135deg, var(--primary), var(--primary-2));
    color:#fff;
    border-color:transparent;
    transform:translateY(-0.0625rem);
}
.user-level-badge.level-badge-sm{font-size:0.625rem;padding:0.0625rem 0.375rem;}
.user-level-badge.level-badge-sm i{font-size:0.5625rem;}
.user-level-badge.level-badge-md{font-size:0.75rem;padding:0.125rem 0.5rem;}
.user-level-badge.level-badge-lg{font-size:0.8125rem;padding:0.1875rem 0.625rem;}
.user-level-badge.level-badge-lg i{font-size:0.75rem;}

/* Level badge in post author meta */
.post-author-meta .user-level-badge{
    margin-left:0.125rem;
}

/* Level badge in comments */
.comment-author-row .user-level-badge{
    margin-left:0.25rem;
}

/* Level progress bar (for profile page) */
.user-level-progress{
    margin-top:0.5rem;
    padding:0.75rem;
    background:var(--bg);
    border-radius:0.5rem;
}
.user-level-progress-bar{
    height:0.375rem;
    background:var(--border);
    border-radius:0.1875rem;
    overflow:hidden;
    margin-bottom:0.375rem;
}
.user-level-progress-fill{
    height:100%;
    background:linear-gradient(90deg,var(--primary),var(--primary-2));
    border-radius:0.1875rem;
    transition:width .3s;
}
.user-level-progress-info{
    display:flex;
    justify-content:space-between;
    font-size:0.75rem;
    color:var(--text-light);
}

/* Dark mode level badge */
[data-theme="dark"] .user-level-badge{
    background:linear-gradient(135deg, rgba(var(--primary-rgb),0.2), rgba(var(--primary-rgb),0.3));
    border-color: rgba(var(--primary-rgb),0.4);
}
[data-theme="dark"] .user-level-progress{background:var(--bg);}