@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.7.0/style.css');
        
        :root { 
            --bg: #f6f8fa; 
            --text: #24292f; 
            --accent: #1b5e20; 
            --line: #d0d7de;
            --font: "LXGW WenKai", "PingFang SC", "Microsoft YaHei", sans-serif;
            --shadow-sm: 0 1px 2px rgba(31,35,40,0.04);
            --shadow: 0 3px 6px rgba(31,35,40,0.08);
            --shadow-lg: 0 8px 24px rgba(31,35,40,0.12);
            --radius-sm: 6px;
            --radius: 8px;
            --radius-lg: 12px;
        }
        
        * { box-sizing: border-box; margin: 0; padding: 0; }
        
        body { 
            background: var(--bg); 
            color: var(--text); 
            font-family: var(--font);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
        
        .flex { display: flex; }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .gap-2 { gap: 8px; }
        .gap-3 { gap: 12px; }
        .gap-4 { gap: 16px; }
        
        .text-sm { font-size: 13px; }
        .text-xs { font-size: 11px; }
        .font-bold { font-weight: 700; }
        .opacity-60 { opacity: 0.6; }
        .opacity-70 { opacity: 0.7; }
        
        .transition { transition: all 0.2s ease; }
        
        .layout { 
            display: flex; 
            max-width: 1400px; 
            margin: 0 auto; 
            min-height: 100vh; 
        }
        
        aside { 
            width: 260px; 
            padding: 24px 16px; 
            position: sticky; 
            top: 0; 
            height: 100vh; 
            border-right: 1px solid var(--line); 
            display: flex; 
            flex-direction: column; 
            background: #fff; 
            z-index: 100; 
        }
        
        main { 
            flex: 1; 
            min-width: 0; 
            background: #fff;
        }
        
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: var(--radius);
            background: #f6f8fa;
            border: 1px solid rgba(31,35,40,0.15);
            color: var(--text);
            text-decoration: none;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        .btn:hover {
            background: #f3f4f6;
            border-color: rgba(31,35,40,0.3);
        }
        .btn-primary {
            background: #2da44e;
            color: white;
            border-color: rgba(31,35,40,0.15);
        }
        .btn-primary:hover {
            background: #2c974b;
        }
        
        .card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            padding: 24px;
        }
        
        .tag {
            display: inline-flex;
            align-items: center;
            padding: 2px 10px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            border: 1px solid transparent;
        }
        
        .blog-cloud {
            flex: 1; 
            overflow-y: auto; 
            margin-top: 16px; 
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            gap: 4px;
            padding-right: 4px;
        }
        .blog-cloud::-webkit-scrollbar { width: 4px; }
        .blog-cloud::-webkit-scrollbar-thumb {
            background: var(--line);
            border-radius: 2px;
        }
        
        .blog-link { 
            border-radius: var(--radius-sm);
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis;
            transition: all 0.2s;
            max-width: 100%;
            line-height: 1.3;
            text-decoration: none;
            color: inherit;
            padding: 4px 8px;
            border-radius: 6px;
        }
        .blog-link:hover { 
            background: #f3f4f6;
            color: var(--accent); 
        }
        
        .post-list { display: flex; flex-direction: column; gap: 16px; }
        
        .post {
            padding: 16px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            transition: all 0.2s;
        }
        .post:hover {
            border-color: #d0d7de;
            box-shadow: var(--shadow-sm);
        }
        
        .post-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .post-source {
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: inherit;
        }
        .post-source:hover { color: var(--accent); }
        
        .feed-icon { 
            width: 16px; 
            height: 16px; 
            border-radius: 4px;
            flex-shrink: 0;
        }
        
        .post-title { 
            font-size: 16px; 
            font-weight: 600; 
            line-height: 1.5;
            color: #0969da;
            text-decoration: none;
            display: block;
        }
        .post-title:hover { 
            color: #0550ae; 
            text-decoration: underline;
        }
        
        .search-box {
            position: relative;
            margin-bottom: 20px;
        }
        .search-input {
            width: 100%;
            height: 40px;
            padding: 0 40px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: #fff;
            font-family: inherit;
            font-size: 14px;
            color: var(--text);
            outline: none;
            transition: all 0.2s;
        }
        .search-input:focus {
            border-color: #0969da;
            box-shadow: 0 0 0 3px rgba(9,105,218,0.1);
        }
        
        .otd-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
            gap: 16px; 
            margin-bottom: 32px;
        }
        
        .otd-card { 
            background: #fff; 
            padding: 16px; 
            border-radius: var(--radius); 
            text-decoration: none; 
            color: inherit; 
            border: 1px solid var(--line);
            transition: all 0.2s;
        }
        .otd-card:hover {
            border-color: #d0d7de;
            box-shadow: var(--shadow);
        }
        
        .heatmap-container {
            width: 100%;
            height: 220px;
        }
        
        .filter-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
        }
        
        .filter-btn { 
            background: #f6f8fa; 
            border: 1px solid rgba(31,35,40,0.15); 
            padding: 6px 14px; 
            border-radius: 20px; 
            font-size: 12px; 
            cursor: pointer; 
            font-family: inherit;
            transition: all 0.2s;
        }
        .filter-btn:hover { 
            background: #f3f4f6;
        }
        .filter-btn.active { 
            background: #0969da; 
            color: white;
            border-color: #0969da;
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 40px;
            opacity: 0.6;
        }
        
        mark {
            background: #fff8c5;
            padding: 0 2px;
            border-radius: 2px;
        }
        
        /* 移动端悬浮留言按钮 - 桌面端隐藏 */
        .mobile-message-btn {
            display: none;
        }
        
        /* 移动端优化 */
        @media (max-width: 768px) {
            .layout { 
                flex-direction: column;
                max-width: 100%;
            }
            
            /* 侧边栏改为顶部导航 */
            aside { 
                width: 100%; 
                height: auto;
                max-height: none;
                position: relative; 
                padding: 12px 16px; 
                border-right: none; 
                border-bottom: 1px solid var(--line);
                order: 0;
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                gap: 8px;
            }
            
            aside > a:first-child { font-size: 18px !important; flex-shrink: 0; }
            aside > div:nth-child(2) { margin-top: 0 !important; font-size: 11px; margin-left: auto; }
            
            /* 博客云横向滚动 */
            .blog-cloud {
                width: 100%;
                max-height: 44px;
                overflow-x: auto;
                overflow-y: hidden;
                flex-wrap: nowrap;
                margin-top: 8px;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                mask-image: linear-gradient(to right, black 85%, transparent 100%);
            }
            .blog-cloud::-webkit-scrollbar { display: none; }
            .blog-cloud .blog-link {
                flex-shrink: 0;
                font-size: 12px !important;
                padding: 4px 10px;
                background: #f6f8fa;
                border-radius: 20px;
                border: 1px solid rgba(31,35,40,0.1);
            }
            
            /* 隐藏侧边栏底部按钮 */
            aside > div:last-child { display: none; }
            
            /* 主内容区 */
            main { order: 1; padding: 16px !important; }
            
            /* 那年今日 */
            .otd-grid { grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
            .otd-card { padding: 12px; }
            
            /* 搜索框 */
            .search-box { margin-bottom: 16px; }
            .search-input { height: 44px; font-size: 16px; padding: 0 36px; }
            
            /* 筛选栏横向滚动 */
            .filter-bar {
                gap: 6px;
                margin-bottom: 16px;
                overflow-x: auto;
                flex-wrap: nowrap;
                padding-bottom: 4px;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .filter-bar::-webkit-scrollbar { display: none; }
            .filter-btn { flex-shrink: 0; padding: 6px 12px; font-size: 13px; }
            
            /* 文章列表 */
            .post-list { gap: 12px; }
            .post { padding: 14px; border-radius: 10px; }
            .post-meta { margin-bottom: 6px; gap: 6px; }
            .post-source { gap: 6px; max-width: 60%; }
            .post-source span { font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
            .post-title { font-size: 15px !important; line-height: 1.5; word-break: break-word; }
            .tag { font-size: 10px; padding: 2px 8px; }
            
            /* 空状态 */
            .empty-state { padding: 40px 20px; }
            
            /* 博客详情页 */
            main > div:first-child { padding: 24px 16px 20px !important; }
            main > div:first-child img { width: 64px !important; height: 64px !important; }
            main > div:first-child h1 { font-size: 22px !important; }
            main > div:first-child p { font-size: 13px !important; max-width: 100% !important; }
            main > div:first-child > div:last-child { gap: 24px !important; }
            main > div:first-child > div:last-child > div > div:first-child { font-size: 24px !important; }
            main > div:first-child > a:first-child { left: 12px !important; top: 12px !important; font-size: 12px !important; padding: 4px 10px !important; }
            
            /* 热力图 */
            .heatmap-container { height: 160px; }
            
            /* 文章分组 */
            main > div:last-child { padding: 20px 16px !important; }
            main > div:last-child h2 { font-size: 12px !important; padding: 6px 10px !important; }
            main > div:last-child article { padding: 12px !important; }
            main > div:last-child article > div > div:first-child { min-width: 40px !important; padding: 6px !important; }
            main > div:last-child article a { font-size: 14px !important; }
            
            /* 移动端悬浮留言按钮 */
            .mobile-message-btn {
                position: fixed;
                bottom: 16px;
                right: 16px;
                width: 56px;
                height: 56px;
                border-radius: 50%;
                background: #0969da;
                color: white;
                border: none;
                box-shadow: 0 4px 12px rgba(9,105,218,0.4);
                font-size: 24px;
                display: none;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                z-index: 1000;
                text-decoration: none;
                -webkit-tap-highlight-color: transparent;
            }
            .mobile-message-btn:active {
                transform: scale(0.95);
            }
            
            /* 底部留白 */
            body::after { content: ''; display: block; height: 60px; }
        }
        
        @media (max-width: 380px) {
            main { padding: 12px !important; }
            .post { padding: 12px; }
            .post-title { font-size: 14px !important; }
            .filter-btn { padding: 5px 10px; font-size: 12px; }
        }