/* ============================
   Lofer Theme - 单栏博客主题
   ============================ */

/* --- Reset --- */
*{margin:0;padding:0;box-sizing:border-box}

:root{
    --accent:#e8634a;
    --accent-hover:#d4533b;
    --bg:#fafafa;
    --bg-card:#fff;
    --text:#2c2c2c;
    --text-sub:#666;
    --text-muted:#aaa;
    --border:#eee;
    --shadow:0 1px 3px rgba(0,0,0,.06);
    --radius:6px;
    --max-w:720px;
}

/* --- Body --- */
body{
    font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif;
    line-height:1.75;
    color:var(--text);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}

a{color:var(--text);text-decoration:none;transition:color .2s}
a:visited{color:var(--text)}
a:hover{color:var(--accent)}

img{max-width:100%;height:auto;display:block}

/* --- Header --- */
.lo-header{
    position:sticky;top:0;z-index:100;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
}

.lo-header-inner{
    max-width:var(--max-w);
    margin:0 auto;
    padding:16px 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}

.lo-logo{
    font-size:20px;
    font-weight:700;
    line-height:1;
    letter-spacing:-.02em;
    flex-shrink:0;
}

.lo-logo a{color:var(--text)}
.lo-logo a:hover{color:var(--accent)}

.lo-nav ul{
    display:flex;
    align-items:center;
    list-style:none;
    gap:6px;
}

.lo-nav a{
    display:block;
    padding:6px 14px;
    font-size:14px;
    font-weight:500;
    color:var(--text-sub);
    border-radius:20px;
    transition:all .2s;
}

.lo-nav a:hover{color:var(--accent);background:rgba(232,99,74,.06)}

/* 深色模式切换按钮 */
.lo-dark-toggle{
    background:none;border:none;cursor:pointer;
    font-size:16px;padding:6px;
    line-height:1;
    border-radius:20px;
    transition:background .2s;
}
.lo-dark-toggle:hover{background:rgba(0,0,0,.05)}
.lo-dm-sun{display:none}
.lo-dm-moon{display:inline}
html.dark .lo-dm-sun{display:inline}
html.dark .lo-dm-moon{display:none}
html.dark .lo-dark-toggle:hover{background:rgba(255,255,255,.08)}

/* 汉堡按钮 */
.lo-nav-toggle{
    display:none;
    background:none;border:none;cursor:pointer;
    width:36px;height:36px;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    padding:8px;
    border-radius:8px;
    transition:background .2s;
}
.lo-nav-toggle:hover{background:rgba(0,0,0,.04)}
.lo-nav-toggle span{display:block;width:18px;height:2px;background:var(--text);border-radius:1px;transition:all .3s}
.lo-nav-toggle.is-open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.lo-nav-toggle.is-open span:nth-child(2){opacity:0}
.lo-nav-toggle.is-open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* --- Main --- */
.lo-main{
    max-width:var(--max-w);
    margin:0 auto;
    padding:0 24px;
}

/* --- Post List --- */
.lo-post-list{display:flex;flex-direction:column;gap:40px;padding:40px 0 60px}

.lo-post-card{
    background:var(--bg-card);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:box-shadow .3s,transform .3s;
}

.lo-post-card:hover{
    box-shadow:0 6px 24px rgba(0,0,0,.08);
    transform:translateY(-2px);
}

.lo-post-cover{
    display:block;
    overflow:hidden;
    aspect-ratio:16/9;
    background:#f0f0f0;
}

.lo-post-cover img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .5s;
}

.lo-post-card:hover .lo-post-cover img{transform:scale(1.04)}

.lo-post-body{padding:24px 28px 28px}

.lo-post-title{
    font-size:22px;
    font-weight:700;
    line-height:1.4;
    margin-bottom:10px;
    letter-spacing:-.01em;
}

.lo-post-title a{color:var(--text)}
.lo-post-title a:hover{color:var(--accent)}

.lo-post-meta{
    font-size:13px;
    color:var(--text-muted);
    margin-bottom:14px;
    display:flex;
    flex-wrap:wrap;
    gap:2px;
}

.lo-post-meta a{color:var(--text-muted)}
.lo-post-meta a:hover{color:var(--accent)}

.lo-post-excerpt{
    font-size:15px;
    color:var(--text-sub);
    line-height:1.7;
    margin:0;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    line-clamp:3;
    overflow:hidden;
}

.lo-post-tags{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.lo-tag{
    display:inline-block;
    padding:3px 12px;
    font-size:12px;
    color:var(--text-sub);
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:20px;
    transition:all .2s;
}

.lo-tag:hover{
    color:#fff;
    background:var(--accent);
    border-color:var(--accent);
}

/* --- Article Detail --- */
.lo-article{padding:40px 0 60px}

.lo-cover{
    margin:0 -24px;
    overflow:hidden;
    max-height:420px;
}

.lo-cover img{
    width:100%;
    height:100%;
    max-height:420px;
    object-fit:cover;
}

.lo-article-header{padding:32px 0 0;text-align:center}

.lo-article-title{
    font-size:32px;
    font-weight:800;
    line-height:1.35;
    letter-spacing:-.02em;
    margin-bottom:16px;
}

.lo-article-meta{
    font-size:14px;
    color:var(--text-muted);
    margin-bottom:18px;
}

.lo-article-meta a{color:var(--text-muted)}
.lo-article-meta a:hover{color:var(--accent)}

.lo-article-tags{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:32px;
}

/* --- Content Typography --- */
.lo-content{
    font-size:16px;
    line-height:1.85;
    color:var(--text);
}

.lo-content p{margin:0 0 20px;text-indent:2em;text-align:justify}

.lo-content h1,.lo-content h2,.lo-content h3,.lo-content h4,.lo-content h5,.lo-content h6{
    font-weight:700;
    color:var(--text);
    margin:36px 0 18px;
    line-height:1.4;
}

.lo-content h1{font-size:26px}
.lo-content h2{font-size:23px}
.lo-content h3{font-size:20px}
.lo-content h4{font-size:18px}

.lo-content a{color:var(--accent);border-bottom:1px solid transparent;transition:border-color .2s}
.lo-content a:hover{border-bottom-color:var(--accent)}

.lo-content img{
    border-radius:var(--radius);
    margin:28px -4px;
    cursor:zoom-in;
}

.lo-content blockquote{
    margin:24px 0;
    padding:16px 24px;
    border-left:3px solid var(--accent);
    background:rgba(232,99,74,.04);
    color:var(--text-sub);
    border-radius:0 var(--radius) var(--radius) 0;
}

.lo-content pre{
    margin:24px -4px;
    padding:18px;
    background:#1e1e1e;
    border-radius:var(--radius);
    overflow-x:auto;
    font-size:14px;
    line-height:1.6;
}

.lo-content pre code{
    background:none;color:#d4d4d4;padding:0;
    font-family:'JetBrains Mono','Fira Code',Consolas,monospace;
    font-size:14px;
}

.lo-content code{
    background:#f5f5f5;
    color:#e8634a;
    padding:2px 7px;
    border-radius:3px;
    font-size:.88em;
    font-family:'JetBrains Mono','Fira Code',Consolas,monospace;
}

.lo-content ul,.lo-content ol{
    margin:20px 0;
    padding-left:28px;
}

.lo-content li{margin-bottom:8px;color:var(--text-sub)}
.lo-content ul li::marker{color:var(--accent)}

.lo-content hr{
    border:none;
    height:1px;
    background:var(--border);
    margin:36px 0;
}

.lo-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;border-radius:var(--radius);overflow:hidden}
.lo-content th,.lo-content td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border)}
.lo-content th{background:var(--bg);font-weight:600;color:var(--text)}
.lo-content td{color:var(--text-sub)}

/* --- TOC --- */
.lo-toc{
    margin:0 0 40px;
    padding:0;
}

.lo-toc-toggle{
    display:inline-block;
    background:none;border:1px solid var(--border);
    border-radius:20px;
    padding:8px 20px;
    font-size:14px;
    color:var(--text-sub);
    cursor:pointer;
    margin-bottom:12px;
    font-family:inherit;
    transition:all .2s;
}

.lo-toc-toggle:hover{border-color:var(--accent);color:var(--accent)}

.lo-toc ul{
    display:none;
    list-style:none;
    padding-left:0;
    border-left:2px solid var(--border);
    margin-left:8px;
}

.lo-toc.is-open ul{display:block}

.lo-toc-item a{
    display:block;
    padding:6px 16px;
    font-size:14px;
    color:var(--text-sub);
    border-radius:0 var(--radius) var(--radius) 0;
    transition:all .2s;
}

.lo-toc-item a:hover{color:var(--accent);background:rgba(232,99,74,.06)}

.lo-toc-level-2{padding-left:24px}
.lo-toc-level-3{padding-left:42px}

/* --- Comments --- */
.lo-comments{padding:0 0 60px}
.lo-section-title{font-size:20px;font-weight:700;margin-bottom:24px;padding-bottom:12px;border-bottom:2px solid var(--border)}

.lo-comment{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--border)}
.lo-comment:last-child{border-bottom:none}

.lo-comment-avatar{
    width:40px;height:40px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    background:#eee;
}

.lo-comment-body{flex:1;min-width:0}

.lo-comment-head{display:flex;gap:10px;align-items:baseline;margin-bottom:6px}
.lo-comment-head strong{font-size:14px;color:var(--text)}
.lo-comment-head time{font-size:12px;color:var(--text-muted)}

.lo-comment-text{font-size:14px;color:var(--text-sub);line-height:1.6;margin:0}

.lo-comment-reply{
    display:inline-block;
    margin-top:8px;
    font-size:12px;
    color:var(--text-muted);
    transition:color .2s;
}

.lo-comment-reply:hover{color:var(--accent)}

.lo-comment-replies{padding-left:20px;border-left:2px solid var(--border);margin-top:12px}
.lo-comment-replies .lo-comment-avatar{width:36px;height:36px}

.lo-empty{text-align:center;color:var(--text-muted);padding:30px 0;font-size:15px}

/* Comment Form */
.lo-comment-form{padding:0 0 60px}
.lo-comment-form form{display:flex;flex-direction:column;gap:14px}

.lo-form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.lo-form-full{
    padding:12px 16px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    font-size:14px;
    font-family:inherit;
    color:var(--text);
    background:var(--bg-card);
    outline:none;
    transition:border-color .2s;
}

.lo-form-full:focus{border-color:var(--accent)}

.lo-comment-form textarea{
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    font-size:14px;
    font-family:inherit;
    color:var(--text);
    background:var(--bg-card);
    min-height:120px;
    resize:vertical;
    outline:none;
    line-height:1.6;
    transition:border-color .2s;
}

.lo-comment-form textarea:focus{border-color:var(--accent)}

.lo-comment-form input:not([type=hidden]){
    padding:12px 16px;
    border:1px solid var(--border);
    border-radius:var(--radius);
    font-size:14px;
    font-family:inherit;
    color:var(--text);
    background:var(--bg-card);
    outline:none;
    transition:border-color .2s;
}

.lo-comment-form input:focus{border-color:var(--accent)}

.lo-btn{
    display:inline-block;
    align-self:flex-start;
    padding:10px 32px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:var(--radius);
    font-size:15px;
    font-weight:500;
    font-family:inherit;
    cursor:pointer;
    transition:background .2s;
}

.lo-btn:hover{background:var(--accent-hover)}

/* --- Page --- */
.lo-page{padding:40px 0 60px}
.lo-page-title{
    font-size:30px;
    font-weight:800;
    text-align:center;
    letter-spacing:-.02em;
    margin-bottom:32px;
}

/* --- Archive --- */
.lo-archive-header{padding:40px 0 8px}
.lo-archive-header h1{font-size:26px;font-weight:700}

.lo-archive-group{padding:24px 0 0}
.lo-archive-date{font-size:18px;font-weight:700;color:var(--accent);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}

.lo-archive-list{list-style:none;padding:0}
.lo-archive-list li{
    display:flex;
    align-items:baseline;
    gap:20px;
    padding:10px 0;
    border-bottom:1px solid rgba(0,0,0,.04);
}

.lo-archive-list time{
    font-size:14px;
    color:var(--text-muted);
    min-width:52px;
    font-variant-numeric:tabular-nums;
}

.lo-archive-list a{font-size:15px;color:var(--text)}
.lo-archive-list a:hover{color:var(--accent)}

/* --- Pagination (inherit from global) --- */
.pagination{display:flex;justify-content:center;gap:6px;padding:0 0 60px}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;font-size:14px;border-radius:20px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-sub);text-decoration:none;transition:all .2s}
.pagination a:hover{border-color:var(--accent);color:var(--accent)}
.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent)}

/* --- Footer --- */
.lo-footer{
    border-top:1px solid var(--border);
    padding:28px 24px;
    text-align:center;
}

.lo-footer p{font-size:13px;color:var(--text-muted);margin:4px 0}
.lo-footer a{color:var(--text-sub)}
.lo-footer a:hover{color:var(--accent)}

/* --- Back to Top --- */
.lo-back-top{
    position:fixed;
    right:24px;
    bottom:32px;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--bg-card);
    color:var(--text-sub);
    font-size:18px;
    cursor:pointer;
    box-shadow:var(--shadow);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:all .3s;
    z-index:90;
}

.lo-back-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
.lo-back-top:hover{color:var(--accent);border-color:var(--accent)}

/* --- Image Modal --- */
.lo-img-modal{
    position:fixed;inset:0;
    background:rgba(0,0,0,.85);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:9999;
    padding:20px;
}

.lo-img-modal.is-open{display:flex}

.lo-img-modal img{max-width:100%;max-height:85vh;border-radius:var(--radius);object-fit:contain}

.lo-img-close{
    position:absolute;top:16px;right:16px;
    width:36px;height:36px;
    border-radius:50%;
    border:none;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s;
}

.lo-img-close:hover{background:rgba(255,255,255,.3)}

/* =====================
   Responsive
   ===================== */
@media(max-width:768px){
    .lo-header-inner{padding:14px 20px}

    .lo-nav-toggle{display:flex}

    .lo-nav{
        display:none;
        position:absolute;
        top:100%;left:0;right:0;
        background:var(--bg-card);
        border-bottom:1px solid var(--border);
        padding:12px 20px 16px;
        box-shadow:0 8px 24px rgba(0,0,0,.08);
    }

    .lo-nav.is-open{display:block}

    .lo-nav ul{flex-direction:column;gap:2px}

    .lo-nav a{
        padding:12px 16px;
        font-size:15px;
        border-radius:8px;
    }

    .lo-main{padding:0 20px}

    .lo-post-list{gap:28px;padding:28px 0 40px}

    .lo-post-body{padding:18px 20px 20px}
    .lo-post-title{font-size:19px}
    .lo-post-excerpt{-webkit-line-clamp:2;line-clamp:2}

    .lo-article{padding:28px 0 40px}
    .lo-article-title{font-size:24px}
    .lo-cover{margin:0 -20px;max-height:240px}
    .lo-cover img{max-height:240px}

    .lo-content{font-size:15px}
    .lo-content h1{font-size:22px}
    .lo-content h2{font-size:20px}
    .lo-content h3{font-size:18px}
    .lo-content img{margin:20px -4px;border-radius:4px}

    .lo-form-row{grid-template-columns:1fr}

    .lo-comment-form input:not([type=hidden]),
    .lo-comment-form textarea{font-size:16px}

    .lo-page-title{font-size:24px}
    .lo-archive-header h1{font-size:22px}

    .lo-back-top{right:16px;bottom:24px;width:38px;height:38px;font-size:16px}
}

@media(max-width:420px){
    .lo-header-inner{padding:12px 16px}
    .lo-logo{font-size:18px}
    .lo-main{padding:0 16px}
    .lo-post-body{padding:16px 16px 18px}
    .lo-post-title{font-size:18px}
    .lo-article-title{font-size:21px}
}

/* =====================
   Dark Mode
   ===================== */
html.dark{
    --bg:#181818;
    --bg-card:#222;
    --text:#e0e0e0;
    --text-sub:#aaa;
    --text-muted:#666;
    --border:#333;
    --shadow:0 1px 3px rgba(0,0,0,.2);
}

html.dark body{background:var(--bg)}

html.dark .lo-header{background:rgba(34,34,34,.88);border-bottom-color:var(--border)}
html.dark .lo-nav{background:var(--bg-card);box-shadow:0 8px 24px rgba(0,0,0,.3)}
html.dark .lo-nav a:hover{background:rgba(232,99,74,.1)}
html.dark .lo-nav-toggle span{background:var(--text)}

html.dark .lo-post-card{background:var(--bg-card)}
html.dark .lo-post-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.2)}
html.dark .lo-post-cover{background:#2a2a2a}

html.dark .lo-content code{background:#2a2a2a}
html.dark .lo-content pre{background:#111}
html.dark .lo-content pre code{color:#d4d4d4}
html.dark .lo-content blockquote{background:rgba(232,99,74,.06)}
html.dark .lo-content th{background:var(--bg)}
html.dark .lo-content td{border-bottom-color:#2a2a2a}

html.dark .lo-toc-toggle{border-color:var(--border);color:var(--text-sub)}
html.dark .lo-toc-toggle:hover{border-color:var(--accent);color:var(--accent)}
html.dark .lo-toc ul{border-left-color:var(--border)}

html.dark .lo-comment-avatar{background:#333}
html.dark .lo-section-title{border-bottom-color:var(--border)}
html.dark .lo-comment{border-bottom-color:#2a2a2a}
html.dark .lo-comment-reply{color:var(--text-muted)}
html.dark .lo-comment-replies{border-left-color:#2a2a2a}

html.dark .lo-form-full,
html.dark .lo-comment-form input:not([type=hidden]),
html.dark .lo-comment-form textarea{background:var(--bg);border-color:var(--border);color:var(--text)}
html.dark .lo-form-full:focus,
html.dark .lo-comment-form input:focus,
html.dark .lo-comment-form textarea:focus{border-color:var(--accent)}

html.dark .lo-tag{background:var(--bg);border-color:var(--border);color:var(--text-sub)}
html.dark .lo-tag:hover{background:var(--accent);border-color:var(--accent);color:#fff}

html.dark .pagination a,.pagination span{background:var(--bg-card);border-color:var(--border);color:var(--text-sub)}
html.dark .pagination a:hover{border-color:var(--accent);color:var(--accent)}
html.dark .pagination .current{background:var(--accent);border-color:var(--accent)}

html.dark .lo-footer{border-top-color:var(--border)}
html.dark .lo-back-top{background:var(--bg-card);border-color:var(--border);color:var(--text-sub)}
html.dark .lo-back-top:hover{color:var(--accent);border-color:var(--accent)}

html.dark .lo-page{color:var(--text)}
html.dark .lo-archive-list li{border-bottom-color:var(--border)}
html.dark .lo-archive-date{color:var(--accent)}

html.dark .lo-img-close{background:rgba(255,255,255,.15)}
html.dark .lo-img-close:hover{background:rgba(255,255,255,.3)}

html.dark .lo-nav-toggle:hover{background:rgba(255,255,255,.06)}