@font-face {
    font-family: "HarmonyOS Sans SC";
    src: url('/static/blog/fonts/HarmonyOS_Sans_SC_Regular.woff2') format('woff2'),
         url('/static/blog/fonts/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "HarmonyOS Sans SC";
    src: url('/static/blog/fonts/HarmonyOS_Sans_SC_Black.woff2') format('woff2'),
         url('/static/blog/fonts/HarmonyOS_Sans_SC_Black.ttf') format('truetype');
    font-weight: 900;
    font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
a:link, a:visited { text-decoration: none; }
.article-body a:link, .article-body a:visited { text-decoration: underline; }

:root {
    --primary: #339596;
    --primary-dark: #277576;
    --code-bg: #1a2e2f;
    --code-text: #d6e2f5;
    --shadow-rgb: 51, 149, 150;
    --badge-bg: #eaf4f4;
    --text: #333;
    --text-light: #666;
    --bg: #fafafa;
    --card-bg: #fff;
    }

body {
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Nav */
nav {
    background: var(--primary);
    color: #fff;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.nav-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}
.brand { font-size: 20px; font-weight: 900; color: #fff; text-decoration: none; }
.nav-links a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    margin-left: 24px;
    font-size: 15px;
    transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-right { display: flex; align-items: center; margin-left: auto; }
nav .search-form { display: flex; align-items: center; gap: 0; }
nav .search-form input {
    width: 200px; height: 34px; padding: 0 14px;
    border: 1px solid rgba(255,255,255,0.25); border-radius: 6px 0 0 6px;
    background: rgba(255,255,255,0.12); color: #fff;
    font-family: inherit; font-size: 14px; outline: none;
    transition: all 0.2s; box-sizing: border-box;
}
nav .search-form input::placeholder { color: rgba(255,255,255,0.5); }
nav .search-form input:focus { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); }
nav .search-form button {
    height: 34px; padding: 0 14px;
    border: 1px solid rgba(255,255,255,0.25); border-radius: 0 6px 6px 0;
    background: rgba(255,255,255,0.15); color: #fff;
    font-size: 14px; font-weight: 700; cursor: pointer; transition: background 0.2s;
    line-height: 1; box-sizing: border-box; margin-left: -1px;
    font-family: inherit;
}
nav .search-form button:hover { background: rgba(255,255,255,0.3); }

/* Main */
main {
    flex: 1;
    width: 100%;
    padding: 40px 24px;
}

/* Hero */
.hero { text-align: center; padding: 48px 0 32px; max-width: 960px; margin: 0 auto; }
.hero h1 { font-size: 36px; color: var(--primary); }
.hero-sub { font-size: 18px; color: var(--text-light); margin-top: 8px; }

/* Sections */
section { margin-bottom: 48px; max-width: 960px; margin-left: auto; margin-right: auto; }
h2 {
    font-size: 22px;
    color: var(--primary);
    border-bottom: 2px solid var(--primary);
    padding-bottom: 8px;
    margin-bottom: 20px;
}

/* Article list */
.article-list { display: flex; flex-direction: column; gap: 12px; }
.more-link { display: inline-block; margin-top: 16px; font-size: 15px; color: var(--primary); text-decoration: none; font-weight: 700; transition: color 0.2s; }
.more-link:hover { color: var(--primary-dark); }
.article-card {
    display: flex;
    align-items: stretch;
    cursor: pointer;
    border-radius: 0;
    background: var(--card-bg);
    transition: box-shadow 0.2s;
}
.article-card:hover { box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.1); }
.art-bar {
    width: 6px;
    background: var(--primary);
    flex-shrink: 0;
    margin: 14px 0 14px 14px;
}
.art-body { padding: 16px 20px 16px 12px; flex: 1; }
.art-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
}
.art-date { font-size: 14px; color: var(--text-light); }
.art-tags { font-size: 12px; color: var(--primary); margin-left: 12px; display: inline-flex; flex-wrap: wrap; gap: 4px; }
.art-tags .tag-pill { font-size: 12px; background: var(--badge-bg); color: var(--primary); padding: 2px 8px; border-radius: 12px; }

/* Project grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.project-card {
    display: block;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 0;
    cursor: pointer;
    color: var(--text);
    border: 1px solid #e8e8e8;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.project-card:hover {
    box-shadow: 0 4px 16px rgba(var(--shadow-rgb), 0.12);
    border-color: var(--primary);
}
.project-card h3 { font-size: 18px; color: var(--primary); margin-bottom: 8px; }
.project-card p { font-size: 14px; color: var(--text-light); margin-bottom: 12px; }
.proj-lang {
    font-size: 12px;
    background: var(--badge-bg);
    color: var(--primary);
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer; text-decoration: none; display: inline-block;
    transition: background 0.2s, color 0.2s;
}
.proj-lang:hover { background: var(--primary); color: #fff; text-decoration: none; }

/* Article page */
.article-layout { display: flex; gap: 32px; align-items: flex-start; }
.article-layout article { flex: 1; min-width: 0; }
.article-toc { position: sticky; top: 80px; max-width: 240px; flex-shrink: 0; font-size: 14px; line-height: 1.8; border-left: 2px solid var(--primary); padding-left: 14px; }
.article-layout:not(:has(.article-toc)) { max-width: 960px; margin: 0 auto; }

@media (min-width: 1240px) {
    .article-layout:has(.article-toc) { justify-content: center; }
    .article-layout:has(.article-toc) article { flex: 0 0 960px; }
}
.article-layout:not(:has(.article-toc)) { grid-template-columns: 1fr; max-width: 960px; margin: 0 auto; }

@media (min-width: 1240px) {
    .article-layout:has(.article-toc) { grid-template-columns: minmax(0, 960px) auto; justify-content: center; }
}
.article-layout:not(:has(.article-toc)) { max-width: 960px; margin: 0 auto; }
.toc-title { font-weight: 900; color: var(--primary); margin-bottom: 8px; font-size: 16px; }
.toc-fallback { font-size: 14px; color: var(--text-light); font-weight: 400 !important; text-decoration: none; }
.article-toc ul { list-style: none; padding: 0; margin: 0; }
.article-toc ul ul { padding-left: 14px; border-left: 1px solid #e0e0e0; margin: 4px 0 4px 6px; }
.article-toc ul ul ul { padding-left: 14px; border-left: 1px solid #eee; margin: 2px 0 2px 4px; }
.article-toc li { margin: 0; padding: 1px 0; }
.article-toc a { color: var(--text-light); text-decoration: none; transition: color 0.15s; font-weight: 400; }
.article-toc > ul > li > a { font-weight: 600; color: #555; }
.article-toc ul ul > li > a { font-weight: 400; font-size: 13px; }
.article-toc a:hover, .article-toc a.active { color: var(--primary); }

article { background: var(--card-bg); padding: 32px 40px; border-radius: 0; }
.about-content { max-width: 1100px; margin: 0 auto; }
.article-header {
    margin-bottom: 24px;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
.article-header-bar { display: none; }
.article-header-body {
    border-left: 8px solid var(--primary);
    padding-left: 24px;
}
.header-thick .article-header-body { border-left-width: 18px; padding-left: 29px; }
.header-thick h1 { margin-top: calc(-0.06em - 3px); }
.article-header h1 { font-size: 96px; color: var(--primary); font-weight: 900; line-height: 1; margin-top: -0.06em; margin-bottom: 16px; text-wrap: balance; }
.article-header time { font-size: 15px; color: var(--text-light); display: block; margin-top: 6px; }
.tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.tag-pill {
    font-size: 12px;
    background: var(--badge-bg);
    color: var(--primary);
    padding: 2px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    position: relative; z-index: 2;
    text-decoration: none; display: inline-block;
}
.tag-pill:hover { background: var(--primary); color: #fff; }

.article-body { font-size: 16px; }
.article-body h1 { scroll-margin-top: 72px; }
#article-title { scroll-margin-top: 72px; }

.article-body h2 { margin-top: 32px; margin-bottom: 12px; border: none; font-size: 24px; color: #444; scroll-margin-top: 72px; }
.article-body h3 { margin-top: 24px; font-size: 20px; scroll-margin-top: 72px; }
.article-body h4 { scroll-margin-top: 72px; }
.article-body h4::before { content: '• '; }
.article-body p { margin: 12px 0; }
.article-body ul, .article-body ol { margin: 8px 0 8px 24px; }
.article-body li { margin: 4px 0; }
.article-body pre {
    background: var(--code-bg); color: var(--code-text);
    padding: 16px 20px; border-radius: 0;
    overflow-x: auto; font-size: 14px; line-height: 1.6; margin: 16px 0;
    position: relative;
}
.copy-btn {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(255,255,255,0.12);
    color: #d6e2f5;
    border: none;
    padding: 4px 12px;
    font-size: 12px;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
}
pre:hover .copy-btn { opacity: 1; }
.article-body code { font-family: "JetBrains Mono", "HarmonyOS Sans SC", "Cascadia Code", "Fira Code", "Consolas", monospace; font-size: 14px; }
.article-body :not(pre) > code { background: #f0f0f0; padding: 2px 6px; border-radius: 4px; color: #c0392b; }

/* Code Highlight (codehilite + Monokai) */
.article-body .codehilite { background: #272822; color: #F8F8F2; border-radius: 0; overflow-x: auto; }
.article-body .codehilite pre { background: #272822; color: #F8F8F2; margin: 0; padding: 20px 24px; }
.article-body .codehilite .hll { background-color: #49483e }
.article-body .codehilite .c, .article-body .codehilite .ch, .article-body .codehilite .cm,
.article-body .codehilite .cp, .article-body .codehilite .cpf, .article-body .codehilite .c1,
.article-body .codehilite .cs { color: #959077 } /* Comment */
.article-body .codehilite .k, .article-body .codehilite .kc, .article-body .codehilite .kd,
.article-body .codehilite .kp, .article-body .codehilite .kr, .article-body .codehilite .kt { color: #66D9EF } /* Keyword */
.article-body .codehilite .kn, .article-body .codehilite .o, .article-body .codehilite .ow,
.article-body .codehilite .nt, .article-body .codehilite .gp { color: #FF4689 } /* Operator / Namespace */
.article-body .codehilite .m, .article-body .codehilite .mb, .article-body .codehilite .mf,
.article-body .codehilite .mh, .article-body .codehilite .mi, .article-body .codehilite .mo,
.article-body .codehilite .il, .article-body .codehilite .l { color: #AE81FF } /* Number */
.article-body .codehilite .s, .article-body .codehilite .sa, .article-body .codehilite .sb,
.article-body .codehilite .sc, .article-body .codehilite .dl, .article-body .codehilite .sd,
.article-body .codehilite .s2, .article-body .codehilite .sh, .article-body .codehilite .si,
.article-body .codehilite .sx, .article-body .codehilite .sr, .article-body .codehilite .s1,
.article-body .codehilite .ss, .article-body .codehilite .ld { color: #E6DB74 } /* String */
.article-body .codehilite .nc, .article-body .codehilite .nf, .article-body .codehilite .fm,
.article-body .codehilite .na, .article-body .codehilite .nd, .article-body .codehilite .ne,
.article-body .codehilite .nx, .article-body .codehilite .gi { color: #A6E22E } /* Name */
.article-body .codehilite .gd { color: #FF4689 } /* Deleted */
.article-body .codehilite .se { color: #AE81FF } /* Escape */
.article-body .codehilite .err { color: #ED007E; background-color: #1E0010 } /* Error */
.article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.article-body th { background: var(--primary); color: #fff; padding: 10px 14px; text-align: left; }
.article-body td { padding: 8px 14px; border-bottom: 1px solid #e0e0e0; }
.article-body blockquote { border-left: 4px solid var(--primary); padding: 8px 16px; margin: 16px 0; background: #f5f7fa; color: #555; }
.article-body img, .article-body iframe { max-width: 100%; border-radius: 0; margin: 12px 0; }
.article-body iframe { width: 100%; min-height: 400px; border: none; }

/* 图片网格 */
.img-grid-1, .img-grid-2, .img-grid-3, .img-grid-4 { display: grid; gap: 6px; margin: 16px 0; }
.img-grid-1 { grid-template-columns: 1fr; }
.img-grid-2 { grid-template-columns: 1fr 1fr; }
.img-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.img-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.img-grid-1 p, .img-grid-2 p, .img-grid-3 p, .img-grid-4 p { margin: 0 !important; padding: 0 !important; line-height: 1; }
.img-grid-1 img, .img-grid-2 img, .img-grid-3 img, .img-grid-4 img { display: block; width: 100%; height: auto; margin: 0 !important; }
/* 同行多图自动并排 */
.article-body p:has(img:nth-child(2)) { display: flex; gap: 10px; flex-wrap: wrap; }
.article-body p:has(img:nth-child(2)) img { flex: 1; min-width: 0; margin: 0; }

.proj-tags { margin-top: 12px; }
.proj-desc { font-size: 15px; color: var(--text-light); margin-top: 10px; }
.proj-link { font-size: 13px; color: var(--text); margin-top: 6px; }
.proj-link strong { font-weight: 700; }
.proj-link a { color: var(--primary); font-weight: 700; word-break: break-all; }

.back-link { margin-top: 24px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.back-link a { color: var(--primary); text-decoration: none; font-size: 15px; }
.empty { color: var(--text-light); font-size: 15px; }

.theme-switcher { margin-bottom: 12px; display: flex; justify-content: center; gap: 10px; }
.theme-dot { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; display: inline-block; border: 2px solid transparent; transition: border-color 0.2s, transform 0.15s; }
.theme-dot:hover { transform: scale(1.15); }
.theme-dot.active { border-color: #333; }

/* Search */
main .search-form { max-width: 640px; margin: 80px auto 0 !important; display: flex; gap: 0; }
main .search-form .search-input {
    flex: 1; padding: 14px 20px; font-size: 16px;
    border: 2px solid #ddd; border-right: none; border-radius: 8px 0 0 8px;
    outline: none; font-family: inherit; transition: border-color 0.2s;
}
main .search-form .search-input:focus { border-color: var(--primary); }
main .search-form .search-btn {
    padding: 14px 24px; font-size: 16px; font-weight: 900;
    border: 2px solid var(--primary); border-radius: 0 8px 8px 0;
    background: var(--primary); color: #fff; cursor: pointer;
    font-family: inherit; transition: background 0.2s;
}
.search-form .search-btn:hover { background: var(--primary-dark); }
.search-summary { text-align: center; color: var(--text-light); font-size: 14px; margin: 20px 0 20px 0; }
.search-empty { text-align: center; color: var(--text-light); font-size: 16px; margin-top: 40px; }

.search-tabs { display: flex; justify-content: center; gap: 0; margin-bottom: 28px; }
.search-tab {
    display: inline-block; padding: 8px 40px; border: 1px solid var(--primary);
    background: var(--card-bg); color: var(--primary); text-decoration: none;
    font-size: 15px; font-weight: 400; transition: all 0.15s;
    text-align: center;
}
.search-tab:first-child { border-radius: 6px 0 0 6px; }
.search-tab:last-child { border-radius: 0 6px 6px 0; }
.search-tab + .search-tab { border-left: none; }
.search-tab:hover { background: var(--badge-bg); }
.search-tab.active { background: var(--primary); color: #fff; font-weight: 900; }

.search-results { max-width: 1100px; margin: 0 auto; }

.tag-cloud { max-width: 1100px; margin: 0 auto 24px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tag-cloud-item {
    font-size: 15px; background: var(--badge-bg); color: var(--primary);
    padding: 6px 16px; border-radius: 20px; text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.tag-cloud-item:hover, .tag-cloud-item.active { background: var(--primary); color: #fff; }

.archive-section-title { text-align: left; margin-bottom: 12px; font-size: 18px; color: var(--text-light); font-weight: 700; }

/* Pagination */
.pagination {
    margin-top: 32px; margin-bottom: 48px; display: flex;
    align-items: center; justify-content: center; gap: 4px;
}
.pagination a, .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    border: 1px solid transparent; border-radius: 4px; text-decoration: none;
    font-size: 14px; color: #555; transition: all 0.15s;
}
.pagination a:hover { background: var(--badge-bg); color: var(--primary); border-color: var(--primary); }
.pagination .disabled { color: #ccc; }
.pagination .current-page { background: var(--primary); color: #fff; font-weight: 900; border-color: var(--primary); }

footer { text-align: center; padding: 24px; color: var(--text-light); font-size: 13px; }
.beian a { color: var(--text-light); text-decoration: none; transition: color 0.2s; }
.beian a:hover { color: var(--primary); }
.beian-icon { vertical-align: middle; margin-right: 2px; position: relative; top: -1px; }

@media (min-width: 1240px) {
    .article-layout:has(.article-toc) { justify-content: center; }
}

@media (max-width: 768px) {
    /* 导航栏 */
    nav { padding: 0 12px; }
    .nav-inner { height: 48px; flex-wrap: wrap; }
    .brand { font-size: 16px; }
    .nav-links a { font-size: 13px; margin-left: 12px; }
    .nav-right { display: none; }
    nav .search-form { display: none; }

    /* 全局 */
    main { padding: 24px 12px; }
    section { margin-bottom: 32px; }

    /* Hero */
    .hero { padding: 24px 0 16px; }
    .hero h1 { font-size: 24px; }
    .hero-sub { font-size: 14px; }

    /* 文章/项目/归档页面标题 */
    .article-header { margin-bottom: 20px; }
    .article-header h1 { font-size: 36px !important; }
    .article-header-body { border-left-width: 6px !important; padding-left: 16px !important; }
    .header-thick .article-header-body { border-left-width: 12px !important; padding-left: 20px !important; }
    .header-thick h1 { margin-top: calc(-0.06em - 1px) !important; }

    /* 文章布局 */
    .article-layout { flex-direction: column; }
    .article-layout article { flex: auto; min-width: 0; }
    .article-toc { position: static; width: 100%; max-width: 100%; border: none; border-top: 2px solid var(--primary); padding: 12px 0 0; margin-top: 20px; font-size: 13px; }
    article { padding: 20px 16px; }

    /* 文章正文 */
    .article-body h2 { font-size: 20px; }
    .article-body h3 { font-size: 17px; }
    .article-body h4 { font-size: 15px; }
    .article-body pre,
    .article-body .codehilite pre { font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
    .article-body .codehilite { overflow-x: auto; }
    .article-body code { font-size: 12px; }
    .article-body :not(pre) > code { word-break: break-all; }
    .article-body iframe { min-height: 220px; }

    /* 表格移动端适配 */
    .article-body table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .article-body thead,
    .article-body tbody {
        display: table;
        width: 100%;
        table-layout: auto;
    }
    .article-body th,
    .article-body td {
        font-size: 12px;
        padding: 6px 8px;
    }

    /* 卡片 */
    .article-card { flex-direction: column; }
    .art-bar { width: 100%; height: 4px; margin: 0; }
    .art-body { padding: 12px; }
    .art-title { font-size: 16px; }
    .art-date { font-size: 12px; }
    .art-tags { margin-left: 0; margin-top: 4px; display: block; }

    /* 项目网格 */
    .project-grid { grid-template-columns: 1fr; gap: 12px; }
    .project-card { padding: 16px; }
    .project-card h3 { font-size: 16px; }

    /* 搜索表单 */
    main .search-form { margin-top: 40px !important; flex-direction: row; }
    main .search-form .search-input { font-size: 14px; padding: 12px 14px; }
    main .search-form .search-btn { font-size: 14px; padding: 12px 16px; }

    /* 搜索 Tab */
    .search-tab { padding: 8px 12px; font-size: 13px; min-width: 0; }
    .search-tabs { gap: 0; }

    /* 标签云 */
    .tag-cloud { gap: 8px; }
    .tag-cloud-item { font-size: 13px; padding: 4px 12px; }

    /* 分页 */
    .pagination a, .pagination span { min-width: 28px; height: 28px; font-size: 12px; padding: 0 4px; }

    /* 关于页 */
    .about-content { padding: 20px 16px; }

    /* 主题切换 */
    .theme-switcher { gap: 6px; }
    .theme-dot { width: 16px; height: 16px; }

    /* 页脚 */
    footer { padding: 16px; font-size: 12px; }
}

@media (max-width: 400px) {
    .article-header h1 { font-size: 28px !important; }
    .search-tab { padding: 6px 8px; font-size: 12px; }
    .brand { font-size: 14px; }
    .nav-links a { font-size: 12px; margin-left: 8px; }
}