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

 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     line-height: 1.6;
     color: #24292f;
     background: #f6f8fa;
     /* 固定布局：body 不滚动，由 main 内部滚动 */
     height: 100vh;
     overflow: hidden;
 }

 .container {
     max-width: 955px;
     margin: 0 auto;
     padding: 0 24px;
 }

 /* 顶部栏 - 科技蓝渐变，固定在顶部 */
 header {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 100;
     background: linear-gradient(135deg, #0076db 0%, #62a8c9 100%);
     padding: 24px 0;
     box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
 }

 header .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 header h1 {
     font-size: 26px;
     font-weight: 700;
 }

 header h1 a {
     color: #fff;
     text-decoration: none;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 header h1 a:hover {
     opacity: 0.9;
 }

 .search-box {
     display: flex;
     gap: 8px;
 }

 .search-box input {
     padding: 8px 14px;
     border: none;
     border-radius: 20px;
     font-size: 14px;
     width: 120px;
     outline: none;
     background: rgba(255, 255, 255, 0.9);
 }

 .search-box input:focus {
     background: #fff;
 }

 .search-box button {
     padding: 8px 18px;
     border: none;
     border-radius: 20px;
     background: rgba(255, 255, 255, 0.25);
     color: #fff;
     font-size: 14px;
     cursor: pointer;
     transition: background 0.2s;
 }

 .search-box button:hover {
     background: rgba(255, 255, 255, 0.4);
 }

 /* 主内容区：固定在 header 和 footer 之间，内部滚动 */
 main {
     position: fixed;
     top: 90px;
     /* header 高度 */
     bottom: 56px;
     /* footer 高度 */
     left: 0;
     right: 0;
     overflow-y: auto;
     padding: 24px 0;
 }

 /* 卡片样式 */
 .card {
     background: #fff;
     padding: 24px;
     margin-bottom: 12px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     border: 1px solid #e1e4e8;
     transition: box-shadow 0.2s, transform 0.2s;
 }

 .card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
     transform: translateY(-2px);
 }

 .article-card:hover {
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
     transform: none;
 }

 .card .card-title {
     margin-bottom: 12px;
 }

 .card .card-title a {
     color: #24292f;
     text-decoration: none;
     font-size: 20px;
     line-height: 20px;
     font-weight: 600;
 }

 .card .card-title a:hover {
     color: #0366d6;
 }

 mark {
     background: #fff3a3;
 }

 .meta {
     color: #586069;
     font-size: 14px;
     margin-bottom: 12px;
 }

 /* 标签 */
 .tags {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
 }

 .tag {
     display: inline-block;
     padding: 5px 14px;
     background: #f1f8ff;
     color: #0366d6;
     border-radius: 20px;
     font-size: 13px;
     text-decoration: none;
     border: 1px solid #c8e1ff;
     transition: all 0.2s;
 }

 .list-main .tag,
 article .tag {
     padding: 0 14px;
     border-radius: 2px;
 }

 .tag:hover {
     background: #0366d6;
     color: #fff;
     border-color: #0366d6;
 }

 .tag.active {
     background: #0366d6;
     color: #fff;
     border-color: #0366d6;
 }

 /* 筛选栏 */
 .filter-bar {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     align-items: center;
     background: #fff;
     padding: 16px 20px;
     border: 1px solid #e1e4e8;
 }

 .filter-bar span {
     color: #586069;
     font-size: 14px;
     font-weight: 500;
 }

 /* 列表布局：宽屏时分类显示为右侧栏 */
 .list-layout {
     display: flex;
     gap: 12px;
     align-items: flex-start;
 }

 .list-main {
     flex: 1;
     min-width: 0;
 }

 .list-sidebar {
     width: 100%;
 }

 .list-sidebar .filter-bar {
     position: sticky;
     top: 20px;
 }

 @media (max-width: 1435px) {
     .list-layout {
         flex-direction: column-reverse;
         align-items: stretch;
     }
 }

 /* 大于 900px：分类侧栏独立固定在屏幕右侧，list-main 居中占满容器 */
 @media (min-width: 1436px) {
     .list-sidebar {
         width: 220px;
         flex-shrink: 0;
     }

     .list-sidebar .filter-bar {
         flex-direction: column;
         align-items: stretch;
     }

     .list-sidebar .filter-bar .tag {
         text-align: center;
     }

     .list-sidebar {
         position: fixed;
         top: 114px;
         /* header 90px + main 内边距 24px，与内容顶部对齐 */
         right: calc((100vw - 955px) / 2 - 210px);
         width: 220px;
         z-index: 50;
     }

     .list-sidebar .filter-bar {
         position: static;
         /* 侧栏已 fixed，无需 sticky */
     }
 }

 /* 分页 */
 .pagination {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin-top: 32px;
 }

 .pagination a,
 .pagination span {
     padding: 10px 16px;
     border-radius: 8px;
     text-decoration: none;
     font-size: 14px;
 }

 .pagination a {
     background: #fff;
     color: #24292f;
     border: 1px solid #e1e4e8;
 }

 .pagination a:hover {
     background: #f3f4f6;
     border-color: #0366d6;
 }

 .pagination .current {
     background: linear-gradient(135deg, #0076db 0%, #62a8c9 100%);
     color: #fff;
     border: none;
 }

 /* GitHub 风格 Markdown */
 .article-content {
     line-height: 1.7;
     font-size: 16px;
     padding-top: 16px;
     border-top: 1px solid #e1e4e8;
 }

 .article-content h1,
 .article-content h2,
 .article-content h3,
 .article-content h4,
 .article-content h5,
 .article-content h6 {
     margin-top: 24px;
     margin-bottom: 16px;
     font-weight: 600;
     line-height: 1.25;
     color: #24292f;
 }

 .article-content h1 {
     font-size: 2em;
     padding-bottom: 0.3em;
     border-bottom: 1px solid #eaecef;
 }

 .article-content h2 {
     font-size: 1.5em;
     padding-bottom: 0.3em;
     border-bottom: 1px solid #eaecef;
 }

 .article-content h3 {
     font-size: 1.25em;
 }

 .article-content h4 {
     font-size: 1em;
 }

 .article-content p {
     margin-bottom: 16px;
 }

 .article-content pre {
     background: #f6f8fa;
     border: 1px solid #e1e4e8;
     border-radius: 6px;
     padding: 16px;
     overflow-x: auto;
     margin-bottom: 16px;
 }

 .article-content pre code {
     background: none;
     padding: 0;
     font-size: 14px;
     line-height: 1.45;
 }

 .article-content code {
     background: rgba(27, 31, 35, 0.05);
     padding: 0.2em 0.4em;
     border-radius: 3px;
     font-size: 85%;
     font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
 }

 .article-content ul,
 .article-content ol {
     padding-left: 2em;
     margin-bottom: 16px;
 }

 .article-content li {
     margin-bottom: 4px;
 }

 .article-content li+li {
     margin-top: 0.25em;
 }

 .article-content blockquote {
     padding: 0 1em;
     color: #6a737d;
     border-left: 0.25em solid #dfe2e5;
     margin-bottom: 16px;
 }

 .article-content img {
     max-width: 100%;
     border-radius: 6px;
 }

 .article-content a {
     color: #0366d6;
     text-decoration: none;
 }

 .article-content a:hover {
     text-decoration: underline;
 }

 .article-content hr {
     height: 1px;
     padding: 0;
     margin: 24px 0;
     background-color: #e1e4e8;
     border: 0;
 }

 .article-content table {
     border-collapse: collapse;
     width: 100%;
     margin-bottom: 16px;
     table-layout: fixed;
 }

 .article-content th,
 .article-content td {
     padding: 6px 13px;
     border: 1px solid #dfe2e5;
     word-break: break-all;
 }

 .article-content th {
     background: #f6f8fa;
     font-weight: 600;
 }

 .article-content tr:nth-child(2n) {
     background: #f6f8fa;
 }

 /* 语法高亮：由 highlight.js 主题提供，见 static/css/highlight.css */

 /* 返回链接 */
 .back-link {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     margin-bottom: 20px;
     color: #0366d6;
     text-decoration: none;
     font-size: 14px;
     padding: 8px 16px;
     background: #fff;
     border-radius: 6px;
     border: 1px solid #e1e4e8;
     transition: all 0.2s;
 }

 .back-link:hover {
     background: #f6f8fa;
     border-color: #0366d6;
 }

 /* 底部栏，固定在底部 */
 footer {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     z-index: 100;
     text-align: center;
     padding: 16px 0;
     color: #6a737d;
     font-size: 14px;
     background: #f6f8fa;
     border-top: 1px solid #e1e4e8;
 }

 footer .footer-links {
     margin-left: 12px;
 }

 footer .footer-links a {
     margin: 0 8px;
     color: #6a737d;
     text-decoration: none;
 }

 footer .footer-links a:hover {
     color: #0366d6;
 }

footer .footer-links .footer-icon {
     height: 14px;
     vertical-align: -2px;
     margin-right: 4px;
 }

 .empty {
     text-align: center;
     padding: 60px 20px;
     color: #6a737d;
 }