:root {
            --bg: #ffffff;
            --text: #50616d;
            --text-sub: #9aa5b1;
            --accent: #42b983;
            --border: #f0f2f5;
            --menu-bg: rgba(255, 255, 255, 0.98);
            --tag-bg: #f8fafc;
            --float-btn-bg: #ffffff;
            --status-bg: #f7f9fa;

            ---theme-color: var(--accent) !important;
            ---active-color: #2c3e50 !important;
            ---bgcolor: #ffffff !important;
            ---bgcolor-light: #f8f9fa !important;
            ---border-color: #eee !important;
        }

        [data-theme="dark"] {
            --bg: #1a202c;
            --text: #e2e8f0;
            --text-sub: #a0aec0;
            --accent: #68d391;
            --border: #2d3748;
            --menu-bg: rgba(26, 32, 44, 0.98);
            --tag-bg: #2d3748;
            --float-btn-bg: #2d3748;
            --status-bg: #2d3748;

            ---theme-color: var(--accent) !important;
            ---active-color: #e2e8f0 !important;
            ---bgcolor: #1a202c !important;
            ---bgcolor-light: #2d3748 !important;
            ---border-color: #2d3748 !important;
        }

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

        html, body { background: var(--bg); }

        body {
            font-family: 'Nunito', sans-serif;
            background: var(--bg);
            color: var(--text);
            line-height: 1.6;
            transition: background 0.3s, color 0.3s;
        }

        a { text-decoration: none; color: inherit; }
        .hidden { display: none !important; }

        .container {
            max-width: 820px;
            margin: 0 auto;
            /* 稍微收紧顶部留白，让首屏更紧凑（不改变整体风格） */
            padding: 20px 20px 100px;
            min-height: 100vh;
        }

        body.menu-open {
            position: fixed;
            width: 100%;
            overflow: hidden;
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 80px;
            margin-bottom: 24px;
        }
        .brand-area { display: flex; align-items: center; gap: 15px; cursor: pointer; }

        @keyframes rotate-infinite {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .avatar:hover { animation: rotate-infinite 0.8s linear infinite; }

        .avatar {
            width: 50px; height: 50px; border-radius: 50%;
            border: 2px solid var(--border);
            object-fit: cover;
        }

        .site-title { font-weight: 800; font-size: 1.5rem; letter-spacing: 1px; color: var(--text); }
        .theme-icon { font-size: 1.2rem; color: #f6ad55; margin-left: 10px; cursor: pointer; transition: transform 0.3s; }
        .theme-icon:hover { transform: scale(1.1); }

        /* PC 顶部导航：避免中文在窄宽度被压成竖排（禁止字内换行） */
        .pc-nav { display: none; gap: 14px 26px; font-size: 1.05rem; font-weight: 700; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
        .pc-nav a { text-decoration: none; color: var(--text); position: relative; padding: 5px 0; transition: color 0.2s; white-space: nowrap; word-break: keep-all; line-break: strict; flex-shrink: 0; }
        .pc-nav a:hover { color: var(--accent); }
        .nav-divider { color: var(--border); font-weight: 300; white-space: nowrap; flex-shrink: 0; }
        .mobile-menu-btn { font-size: 1.4rem; color: var(--accent); cursor: pointer; padding: 5px; display: block; }

        @media (min-width: 768px) {
            .mobile-menu-btn { display: none !important; }
            .pc-nav { display: flex !important; align-items: center;}
            #sidebar { display: none !important; }
            #overlay { display: none !important; }
        }

        #sidebar {
            position: fixed; top: 0; right: 0; width: 240px; height: 100%;
            background: var(--menu-bg); z-index: 1000; padding: 25px 20px;
            box-shadow: -6px 0 20px rgba(0,0,0,0.08);
            transform: translateX(110%);
            transition: transform 0.3s;
            backdrop-filter: blur(10px);
        }
        #sidebar.active { transform: translateX(0); }
        #overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.25);
            z-index: 999; opacity: 0; pointer-events: none;
            transition: opacity 0.3s;
        }
        #overlay.active { opacity: 1; pointer-events: auto; }

        .menu-link {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 8px; margin: 5px 0;
            border-radius: 12px;
            font-weight: 750; color: var(--text);
            transition: all 0.2s;
        }
        .menu-link:hover { background: var(--tag-bg); color: var(--accent); transform: translateX(-3px); }
        .menu-link i { width: 20px; }

        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
        .cursor { display: inline-block; width: 10px; height: 2px; background: var(--accent); animation: blink 1s step-end infinite; margin-left: 5px; vertical-align: middle; }

        .intro-text { font-size: 1.15rem; margin-bottom: 16px; color: var(--text); font-weight: 800; }
        .social-contact { display: flex; align-items: center; gap: 20px; font-size: 1.4rem; color: var(--text); margin-top: 18px; }
        .social-label { font-weight: 800; margin-right: 5px; font-size: 1rem; color: var(--text); }
        .social-icon-link { color: var(--text-sub); transition: all 0.3s; }
        .social-icon-link:hover { color: var(--accent); transform: translateY(-3px); }

        .section-header { font-size: 1.8rem; font-weight: 800; color: var(--accent); margin: 45px 0 24px 0; }

        .list-tools { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin: 10px 0 26px; }
        .search-box { flex:1; min-width:220px; display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid var(--border); border-radius:14px; background: var(--tag-bg); }
        .search-box i { color: var(--text-sub); font-size: 0.95rem; }
        .search-input { width:100%; border:none; outline:none; background:transparent; color: var(--text); font-size:0.95rem; font-weight:700; }
        .search-input::placeholder { color: var(--text-sub); font-weight:700; }
        .search-clear { cursor:pointer; color: var(--text-sub); font-weight:900; font-size:1.2rem; line-height:1; padding:0 6px; border-radius:10px; user-select:none; }
        .search-clear:hover { color: var(--accent); }
        .pager { display:flex; align-items:center; gap:10px; margin-left:auto; }
        .pager-info { color: var(--text-sub); font-size:0.92rem; font-weight:800; white-space:nowrap; }
        .pager-btn { user-select:none; cursor:pointer; }
        .pager-btn.disabled { opacity:0.35; cursor:not-allowed; pointer-events:none; }

        .post-list { display: flex; flex-direction: column; gap: 35px; }
        .post-item { display: flex; flex-direction: column; align-items: flex-start; }
        .post-date { font-size: 0.9rem; color: var(--text-sub); margin-bottom: 8px; font-weight: 700; }

        .post-title-link {
            font-size: 1.3rem; color: var(--text); line-height: 1.4; font-weight: 800; transition: all 0.2s;
            text-decoration: underline;
            text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }
        .post-title-link:hover { text-decoration-color: var(--accent); }

        .post-tags { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
        .tag-pill {
            font-size: 0.8rem; color: var(--text-sub); background: var(--tag-bg);
            padding: 4px 12px; border-radius: 20px; font-weight: 700; transition: all 0.2s;
        }
        .tag-pill:hover { background: var(--accent); color: white; }

        .status-item { display: flex; gap: 15px; margin-bottom: 26px; align-items: flex-start; }
        .status-avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--border); object-fit: cover; flex-shrink: 0; }
        .status-main { flex: 1; }
        .status-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
        .status-name { font-weight: 800; color: var(--text); }
        .status-time { font-size: 0.85rem; color: var(--text-sub); font-weight: 700; }
        .status-card { background: var(--status-bg); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; position: relative; font-size: 1rem; color: var(--text); line-height: 1.6; }
        .status-card::before { content: ''; position: absolute; top: 15px; left: -8px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid var(--status-bg); }
        .status-actions { margin-top: 10px; display: flex; gap: 20px; }
        .status-btn { font-size: 0.9rem; color: var(--text-sub); cursor: pointer; display: flex; align-items: center; gap: 5px; transition: color 0.2s; }
        .status-btn:hover { color: var(--accent); }

        .back-btn { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; color: var(--accent); font-weight: 800; cursor: pointer; font-size: 1.1rem; }

        .archive-year { font-size: 1.6rem; font-weight: 900; margin: 30px 0 18px; color: var(--text); }
        .archive-item { display: flex; gap: 20px; margin-bottom: 12px; align-items: baseline; }
        .archive-date { color: var(--text-sub); font-weight: 800; font-size: 0.9rem; min-width: 45px; }
        .archive-link { text-decoration: none; color: var(--text); border-bottom: 1px dashed var(--border); font-weight: 600;}
        .archive-link:hover { color: var(--accent); border-color: var(--accent); }

        .article-title { font-size: 2rem; font-weight: 900; margin-bottom: 10px; color: var(--accent); }
        .article-meta { color: var(--text-sub); font-weight: 800; margin-bottom: 30px; display: flex; gap: 15px; flex-wrap: wrap; }
        .article-meta span { display: inline-flex; align-items: center; gap: 6px; }

        .markdown-body { background: transparent !important; color: var(--text) !important; font-family: 'Nunito', sans-serif; }
        .markdown-body a { color: var(--accent) !important; }
        .markdown-body code { background: var(--tag-bg) !important; border-radius: 6px; padding: 2px 6px; }
        .markdown-body pre { background: var(--tag-bg) !important; border-radius: 12px; padding: 18px; border: 1px solid var(--border); }
        .markdown-body img { max-width: 100%; border-radius: 14px; border: 1px solid var(--border); }
        .markdown-body hr { border-color: var(--border) !important; }

        footer {
            margin-top: 100px; text-align: center; font-size: 0.9rem; color: var(--text-sub);
            border-top: 1px dashed var(--border); padding-top: 40px; font-weight: 600;
        }

        #custom-toolbar { display: flex; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
        .toolbar-btn { background: var(--tag-bg); border: none; padding: 5px 12px; border-radius: 8px; cursor: pointer; color: var(--text-sub); font-size: 0.9rem; font-weight: bold; transition: all 0.2s; }
        .toolbar-btn:hover { background: var(--accent); color: white; }

        #float-btn-group {
            position: fixed; bottom: 40px; right: 25px; display: flex; flex-direction: column; gap: 15px; z-index: 900;
            opacity: 0; pointer-events: none; transition: opacity 0.3s; transform: translateY(20px);
        }
        #float-btn-group.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
        .float-btn {
            width: 44px; height: 44px; border-radius: 50%; background: var(--float-btn-bg); border: 1px solid var(--border);
            display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-sub);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08); transition: all 0.2s;
        }
        .float-btn:hover { color: var(--accent); transform: translateY(-3px); }

        @media (max-width: 480px) {
            .container { padding: 24px 16px 70px; }
            .site-title { font-size: 1.35rem; }
            .section-header { font-size: 1.6rem; }
            .post-title-link { font-size: 1.2rem; }
        }

/* 避免切页/首屏主题过渡造成“闪白”观感 */
html:not(.theme-ready) *, html:not(.theme-ready) {
  transition: none !important;
}