/* =========================================================
   Journal · Typecho Theme 1.1.5
   一个安静的纸感手账主题
========================================================= */

/* =========================================================
   ROOT
========================================================= */

:root {
    --bg: #f5f5f2;
    --paper: #fbfbf9;
    --text: #181817;
    --muted: #858580;
    --line: #deded8;
    --soft: #ecece7;
    --hover: #e6e6e1;

    --max: 1180px;
    --sidebar: 285px;
    --gap: 72px;

    --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
        "PingFang SC", "Microsoft YaHei", sans-serif;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* 正文字体选项（1.1.5）：主题设置选择，header.php 按设置输出 body class；
   字体文件位于 assets/fonts/ 分包（unicode-range 切片）按需加载，
   浏览器只下载页面实际用到字符的分片，未选中的字体零请求 */
body.font-lxgw {
    font-family: "LXGW WenKai GB Screen", "LXGW WenKai",
        -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

body.font-serif {
    font-family: "Source Han Serif SC VF", "Noto Serif SC", "Songti SC", "SimSun", serif;
}

body.font-yozai {
    font-family: "Yozai",
        -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

body.font-dakai {
    font-family: "Alimama DongFangDaKai",
        -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 跨页面平滑转场（渐进增强，Chrome / Edge 生效） */
@view-transition { navigation: auto; }

/* 选中文字配色：米灰替代默认蓝色 */
::selection { background: #d9d9d2; color: #181817; }

/* 键盘焦点样式 */
:focus-visible {
    outline: 2px solid #666;
    outline-offset: 3px;
}

/* 数字统一等宽对齐 */
.post-date,
.stat-number,
.frequency-range,
.recent-item time,
.post-meta-line,
.comment-time,
.archive-item time {
    font-variant-numeric: tabular-nums;
}

/* 页脚链接 */
footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .2s, border-color .2s;
}

footer a:hover { color: #333; border-color: #bbb; }

/* =========================================================
   HEADER · 顶栏（不固定，随页面滚动）
   注意：必须用 .site-header 类选择器，不能用 header 元素
   选择器 —— 否则会命中文章页的标题 <header> 造成层级塌陷
========================================================= */

.site-header {
    position: static;
    background: var(--bg);
    border-bottom: 1px solid rgba(0, 0, 0, .055);
}

.nav {
    max-width: var(--max);
    margin: auto;
    padding: 17px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.035em;
}

.logo small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 400;
    margin-left: 8px;
    letter-spacing: 0;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #777;
    text-decoration: none;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 7px;
    transition: color .2s, background-color .2s;
}

.nav-link:hover {
    color: #111;
    background: var(--soft);
}

/* =========================================================
   SEARCH · 桌面常显胶囊 / 移动端点击展开
========================================================= */

.search-form {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 7px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 3px 2px 13px;
    background: transparent;
    transition: border-color .2s, background-color .2s;
}

.search-form:focus-within,
.search-form.open {
    border-color: #b5b5ad;
    background: rgba(255, 255, 255, .5);
}

.search-input {
    width: 118px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    padding: 0;
    transition: width .25s var(--ease);
}

.search-input::placeholder { color: #b5b5ad; }

.search-form:focus-within .search-input { width: 168px; }

.search {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    color: #777;
    font-size: 14px;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.search:hover {
    color: #111;
    background: var(--soft);
}

/* =========================================================
   MOBILE TABBAR · 底部导航（仅移动端显示）
   首页 / 独立页面 / 搜索，适配全面屏安全区
========================================================= */

.tabbar { display: none; }

.search-sheet,
.sheet-mask { display: none; }

@media (max-width: 860px) {

    /* 底部导航栏 */
    .tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 110;
        border-top: 1px solid rgba(0, 0, 0, .055);
        background: #f5f5f2;
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    @supports (backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px)) {
        .tabbar {
            background: rgba(245, 245, 242, .92);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
    }

    .tab {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 8px 0 7px;
        border: 0;
        background: transparent;
        color: #a5a49e;
        font-size: 10px;
        font-family: inherit;
        letter-spacing: .02em;
        text-decoration: none;
        cursor: pointer;
        transition: color .2s;
    }

    .tab svg {
        width: 20px;
        height: 20px;
        display: block;
    }

    .tab span {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .tab.active { color: #181817; }

    /* 搜索面板：底部弹层 */
    .sheet-mask {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 125;
        background: rgba(24, 24, 23, .3);
        border: 0;
    }

    .search-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 130;
        background: var(--paper);
        border-top: 1px solid var(--line);
        border-radius: 16px 16px 0 0;
        padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -8px 40px rgba(0, 0, 0, .08);
    }

    .search-sheet form {
        display: flex;
        gap: 9px;
    }

    .search-sheet input {
        flex: 1;
        min-width: 0;
        border: 1px solid var(--line);
        background: var(--bg);
        border-radius: 9px;
        padding: 11px 14px;
        font-size: 14px;
        font-family: inherit;
        color: var(--text);
        outline: none;
        transition: border-color .2s;
    }

    .search-sheet input:focus { border-color: #a9a9a1; }

    .search-sheet button {
        flex: 0 0 auto;
        border: 0;
        background: #2d2d2a;
        color: #fbfbf9;
        font-size: 13px;
        padding: 0 18px;
        border-radius: 9px;
        cursor: pointer;
    }

    @media (prefers-reduced-motion: no-preference) {
        .search-sheet:not([hidden]) { animation: sheet-up .3s var(--ease); }
        .sheet-mask:not([hidden]) { animation: mask-in .25s ease; }
    }

    /* 内容底部留出 Tab 栏高度 */
    footer {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }
}

@keyframes sheet-up {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes mask-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.search-sheet[hidden],
.sheet-mask[hidden] { display: none !important; }

/* =========================================================
   MAIN LAYOUT
========================================================= */

.wrapper {
    max-width: var(--max);
    margin: auto;
    padding: 58px 24px 110px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar);
    gap: var(--gap);
    align-items: start;
}

.content { min-width: 0; }

/* 窄栏布局：文章页 / 页面 / 归档列表 / 404 */
.wrapper-narrow {
    display: block;
    max-width: 790px;
    /* 文章页标题区需要更多呼吸感，顶部比首页略收 */
    padding-top: 64px;
}

/* =========================================================
   PAGE HEADER
========================================================= */

.page-header {
    padding-bottom: 34px;
    border-bottom: 1px solid var(--line);
}

.page-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #a09f99;
    font-size: 11px;
    letter-spacing: .12em;
    margin-bottom: 13px;
}

/* 首页 kicker 前置短线装饰，弱化其存在感、衬托主标题 */
.page-header .page-kicker::before {
    content: "";
    width: 18px;
    height: 1px;
    background: #bab8ae;
    flex: 0 0 auto;
}

.page-title {
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -.06em;
    font-weight: 650;
    text-wrap: balance;
}

.page-description {
    max-width: 580px;
    margin-top: 15px;
    color: #6f6f68;
    font-size: 13.5px;
    line-height: 1.9;
    text-wrap: pretty;
}

/* =========================================================
   FILTER
========================================================= */

/* 无 JS 时隐藏筛选（否则点了没反应，徒增困惑） */
.filter {
    display: none;
    height: 65px;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.filter::-webkit-scrollbar { display: none; }

html.js .filter { display: flex; }

.filter button {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: #999;
    font-size: 11px;
    font-family: inherit;
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.filter button:hover,
.filter button.active {
    color: #111;
    background: var(--soft);
}

/* =========================================================
   POSTS
========================================================= */

.posts { border-bottom: 1px solid var(--line); }

.post {
    position: relative;
    padding: 36px 0 39px 76px;   /* 左侧 76px 留给 gutter 大日期 */
    border-bottom: 1px solid var(--line);
}

/* 用 last-of-type：后面还有 empty-state 这个 p 元素 */
.post:last-of-type { border-bottom: 0; }

/* =========================================================
   GUTTER DATE · 手帐式大日期
========================================================= */

.post-date-big {
    position: absolute;
    left: 0;
    top: 32px;
    font-size: 30px;
    font-weight: 250;
    letter-spacing: -.04em;
    line-height: 1;
    color: #c9c9c2;
    transition: color .25s var(--ease);
}

.post:hover .post-date-big { color: #999; }

/* =========================================================
   POST TOP
========================================================= */

.post-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.post-type {
    color: #999;
    font-size: 11px;
    letter-spacing: .11em;
}

.post-date {
    color: #999;
    font-size: 11px;
}

/* =========================================================
   POST TITLE
========================================================= */

.post-title {
    font-size: 23px;
    line-height: 1.4;
    letter-spacing: -.045em;
    font-weight: 600;
    text-wrap: balance;
}

.post-title a {
    color: inherit;
    text-decoration: none;
}

.post-title a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

/* hover 箭头：inline-block 阻断下划线传播，opacity 0 仍占位所以不引起换行抖动 */
.post-title a::after {
    content: "→";
    display: inline-block;
    margin-left: 7px;
    font-weight: 400;
    opacity: 0;
    transform: translateX(-5px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.post-title a:hover::after,
.post-title a:focus-visible::after {
    opacity: 1;
    transform: none;
}

/* =========================================================
   EXCERPT / META
========================================================= */

.excerpt {
    max-width: 690px;
    margin-top: 10px;
    color: #777772;
    font-size: 13px;
    line-height: 1.9;
    text-wrap: pretty;
}

.meta {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #999;
    font-size: 11px;
}

.dot {
    width: 3px;
    height: 3px;
    background: #bbb;
    border-radius: 50%;
}

/* =========================================================
   IMAGE POST
========================================================= */

.photo-grid {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1.8fr 1fr;
    grid-template-rows: repeat(3, 92px);
    gap: 6px;
    height: 288px;
    overflow: hidden;
}

.photo {
    position: relative;
    overflow: hidden;
    display: block;
    background: #ddd;
    border-radius: 7px;
}

.photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .55s var(--ease);
}

.photo:hover img { transform: scale(1.035); }

.photo:nth-child(1) { grid-column: 1; grid-row: 1 / 4; }
.photo:nth-child(2) { grid-column: 2; grid-row: 1; }
.photo:nth-child(3) { grid-column: 2; grid-row: 2; }
.photo:nth-child(4) { grid-column: 2; grid-row: 3; }

.photo-more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    color: white;
    font-size: 20px;
    font-weight: 500;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* 单图：正常大图，不再裁成竖长条 */
.photo-grid.count-1 {
    display: block;
    height: auto;
}

.photo-grid.count-1 .photo {
    display: block;
    aspect-ratio: 3 / 2;
}

/* 两图：左右平分 */
.photo-grid.count-2 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: auto;
}

.photo-grid.count-2 .photo {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1;
}

/* 三张以上：默认 1 大 + 3 小网格，无需变体 class */
.photo-grid:not(.count-1):not(.count-2) .photo {
    min-height: 0;
}

/* =========================================================
   DIARY
========================================================= */

.diary-body {
    position: relative;
    margin-top: 22px;
    padding-left: 21px;
    border-left: 1px solid #d2d2cc;
}

.diary-body::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 7px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #333;
}

.diary-text {
    color: #444;
    font-size: 14px;
    line-height: 2;
}

.diary-text p + p { margin-top: 11px; }
.diary-text p { text-wrap: pretty; }

/* 日记里偶尔贴图时的兜底 */
.diary-text img {
    max-width: 100%;
    height: auto;
    border-radius: 7px;
    display: block;
    margin: 14px 0;
}

/* =========================================================
   QUOTE
========================================================= */

.quote {
    padding-top: 43px;
    padding-bottom: 45px;
}

.quote-mark {
    color: #aaa;
    font-family: Georgia, serif;
    font-size: 40px;
    line-height: .5;
    margin-bottom: 12px;
}

.quote-text {
    max-width: 690px;
    font-family: "Times New Roman", "Songti SC", serif;
    font-size: 23px;
    line-height: 1.7;
    letter-spacing: -.02em;
}

.quote-source {
    margin-top: 14px;
    color: #999;
    font-size: 11px;
}

/* =========================================================
   RANDOM CARD
========================================================= */

.random-card {
    display: block;
    margin-top: 19px;
    padding: 21px 23px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .25);
    color: inherit;
    text-decoration: none;
    transition: transform .25s var(--ease),
                background-color .25s,
                border-color .25s;
}

.random-card:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .6);
    border-color: #c9c9c2;
}

.random-symbol {
    color: #aaa;
    font-size: 19px;
    margin-bottom: 5px;
}

.random-title {
    font-size: 16px;
    font-weight: 550;
    letter-spacing: -.025em;
}

.random-text {
    margin-top: 5px;
    color: #777;
    font-size: 12px;
}

/* =========================================================
   EMPTY STATE / LOAD MORE
========================================================= */

.empty-state {
    padding: 52px 0;
    text-align: center;
    color: #999;
    font-size: 12px;
}

.load-more {
    padding-top: 35px;
    text-align: center;
}

.load-progress {
    margin-bottom: 12px;
    color: #999;
    font-size: 11px;
}

.load-more a {
    display: inline-block;
    border: 1px solid var(--line);
    background: transparent;
    color: #777;
    padding: 9px 17px;
    border-radius: 7px;
    font-size: 11px;
    letter-spacing: .04em;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s, background-color .2s;
}

.load-more a:hover {
    color: #111;
    background: var(--soft);
}

/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    position: sticky;
    top: 88px;
    min-width: 0;
}

.author {
    padding-bottom: 27px;
    border-bottom: 1px solid var(--line);
}

.author-head {
    display: flex;
    align-items: center;
    gap: 13px;
}

.avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d8d8d2, #eeeeea);
    display: grid;
    place-items: center;
    color: #777;
    font-size: 17px;
    overflow: hidden;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author-name {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.035em;
}

.author-role {
    margin-top: 1px;
    color: #999;
    font-size: 11px;
}

.author-description {
    margin-top: 14px;
    color: #777;
    font-size: 12px;
    line-height: 1.85;
}

.social {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 13px;
}

.social a {
    color: #888;
    text-decoration: none;
    font-size: 11px;
    padding: 4px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    transition: color .2s, background-color .2s;
}

.social a:hover {
    color: #111;
    background: var(--soft);
}

.side-block {
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}

.side-title {
    margin-bottom: 13px;
    color: #999;
    font-size: 11px;
    letter-spacing: .13em;
    font-weight: 400;
}

/* =========================================================
   NOW · 正在进行
========================================================= */

.now-list {
    display: grid;
    gap: 10px;
}

.now-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.now-row dt {
    flex: 0 0 3em;
    color: #999;
    font-size: 11px;
}

.now-row dd {
    color: #444;
    font-size: 12px;
}

/* =========================================================
   BLOG DATA
========================================================= */

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.stat {
    background: var(--bg);
    padding: 11px 5px;
    text-align: center;
}

.stat-number {
    font-size: 17px;
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: -.04em;
}

.stat-label {
    margin-top: 3px;
    color: #999;
    font-size: 11px;
}

/* =========================================================
   UPDATE FREQUENCY · 近 30 天
========================================================= */

.frequency { padding-top: 23px; }

.frequency-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.frequency-title {
    color: #555;
    font-size: 12px;
    letter-spacing: -.02em;
}

.frequency-range {
    color: #999;
    font-size: 11px;
}

/* level-0 = 0 篇   level-1 = 1 篇   level-2 = 2 篇及以上
   .today = 今天 */

.frequency-chart {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    max-width: 320px;   /* 移动端侧栏全宽时，防止格子被拉得过大 */
}

.frequency-chart span {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    background: #e7e7e2;
    cursor: default;
    transition: transform .2s var(--ease);
}

.frequency-chart span:hover { transform: scale(1.22); }

.frequency-chart .level-0 { background: #e7e7e2; }
.frequency-chart .level-1 { background: #bcbcb5; }
.frequency-chart .level-2 { background: #2d2d2a; }

/* 今天：先用页面底色留一圈空隙，再描一圈深色 */
.frequency-chart .today {
    box-shadow:
        0 0 0 2px var(--bg),
        0 0 0 3.5px #555;
}

.frequency-scale {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    color: #999;
    font-size: 11px;
}

.frequency-scale .swatches {
    display: flex;
    gap: 3px;
}

.frequency-scale .swatches span {
    width: 9px;
    height: 9px;
    border-radius: 2.5px;
}

.frequency-scale .swatches .level-0 { background: #e7e7e2; }
.frequency-scale .swatches .level-1 { background: #bcbcb5; }
.frequency-scale .swatches .level-2 { background: #2d2d2a; }

/* =========================================================
   CATEGORIES / RECENT
========================================================= */

.category-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
}

.category-row a {
    color: #666;
    text-decoration: none;
    font-size: 11px;
    transition: color .2s, transform .2s;
}

.category-row a:hover {
    color: #111;
    transform: translateX(2px);
}

.category-row span {
    color: #999;
    font-size: 11px;
}

.recent-block { border-bottom: 0; }

.recent-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    padding: 6px 0;
    color: inherit;
    text-decoration: none;
}

.recent-item span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #666;
    font-size: 11px;
    transition: color .2s;
}

.recent-item time {
    flex: 0 0 auto;
    color: #999;
    font-size: 11px;
}

.recent-item:hover span { color: #111; }

/* =========================================================
   FOOTER
========================================================= */

footer {
    max-width: var(--max);
    margin: auto;
    padding: 0 24px 45px;
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 11px;
}

/* =========================================================
   PAPER GRAIN · 纸感噪点
========================================================= */

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2000;
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   ENTRANCE · 滚动入场
========================================================= */

@media (prefers-reduced-motion: no-preference) {
    .js .post {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .55s var(--ease), transform .55s var(--ease);
    }
    .js .post.in-view {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   POST SINGLE · 文章 / 页面
========================================================= */

.post-header { padding-bottom: 36px; }

/* 文章页信息层级：kicker（小字+短横线锚点）→ 标题 → meta */
.post-header .page-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    letter-spacing: .18em;
    color: #a09f99;
}

/* kicker 前的短横线：给标题区一个安静的视觉锚点 */
.post-header .page-kicker::before {
    content: "";
    width: 18px;
    height: 1px;
    background: #c9c9c2;
    flex: 0 0 auto;
}

.post-title-main {
    font-size: 32px;
    line-height: 1.25;
    letter-spacing: -.05em;
    margin-top: 16px;
    text-wrap: balance;
}

.post-meta-line {
    margin-top: 18px;
    padding-bottom: 2px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    color: #999;
    font-size: 11px;
}

.post-content {
    padding-top: 34px;
    font-size: 15px;
    line-height: 1.95;
    color: #2b2b29;
    overflow-wrap: break-word;
}

.post-content p {
    margin: 0 0 18px;
    text-wrap: pretty;
}

.post-content p:last-child { margin-bottom: 0; }

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
    margin: 36px 0 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.04em;
    color: var(--text);
}

/* 正文里的 h1 降为二级视觉，不能压过文章自己的标题 */
.post-content h1 { font-size: 22px; }
.post-content h2 { font-size: 22px; }
.post-content h3 { font-size: 18px; }
.post-content h4 { font-size: 15px; }

/* 1.1.4：h2 前置短线装饰，与 kicker 的锚点语言一致 */
.post-content h2::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 1.5px;
    background: #b5b5ad;
    margin-right: 10px;
    vertical-align: .3em;
    border-radius: 1px;
}

/* 目录锚点跳转的落点留白 */
.post-content h2,
.post-content h3,
.post-content h4 { scroll-margin-top: 24px; }

.post-content a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    text-decoration-color: #c9c9c2;
    transition: text-decoration-color .2s;
}

.post-content a:hover { text-decoration-color: #555; }

.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 22px auto;
    border-radius: 8px;
}

.post-content blockquote {
    margin: 22px 0;
    padding: 2px 0 2px 20px;
    border-left: 2px solid #d2d2cc;
    color: #666;
}

.post-content blockquote p { margin: 0 0 10px; }
.post-content blockquote p:last-child { margin-bottom: 0; }

.post-content ul,
.post-content ol {
    margin: 18px 0;
    padding-left: 24px;
}

.post-content li { margin: 6px 0; }

/* 1.1.3：代码样式同时覆盖文章(.post-content)与日记(.diary-text)，
   修复日记内 markdown 代码块无背景的问题 */
.post-content code,
.diary-text code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .86em;
    background: var(--soft);
    border-radius: 5px;
    padding: 2px 6px;
}

/* 1.1.4：markdown 无语言代码块也统一为深色纸感（与 sc-code 一致）；
   带语言的块已由服务端转成 pre.sc-code[data-lang] */
.post-content pre,
.diary-text pre {
    margin: 22px 0;
    padding: 16px 18px;
    background: #2b2a25;
    color: #e6e2d5;
    border: 0;
    border-radius: 8px;
    overflow-x: auto;
    line-height: 1.7;
}

.post-content pre code,
.diary-text pre code {
    background: transparent;
    padding: 0;
    font-size: 13px;
}

.post-content hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 36px 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0;
    font-size: 13px;
}

.post-content th,
.post-content td {
    border: 1px solid var(--line);
    padding: 8px 12px;
    text-align: left;
}

.post-content th {
    background: var(--soft);
    font-weight: 600;
}

/* 标签 */

.post-tags {
    margin-top: 34px;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.post-tags a {
    color: #777;
    font-size: 11px;
    text-decoration: none;
    border: 1px solid var(--line);
    padding: 4px 10px;
    border-radius: 5px;
    transition: color .2s, background-color .2s;
}

.post-tags a:hover {
    color: #111;
    background: var(--soft);
}

/* 上一篇 / 下一篇 */
/* 1.1.4：加 PREV / NEXT 小字标签，信息层级更清楚 */
.post-nav {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    font-size: 12px;
}

.post-nav-item { min-width: 0; }

.post-nav-item::before {
    display: block;
    margin-bottom: 4px;
    color: #b5b5ad;
    font-size: 9px;
    letter-spacing: .15em;
}

.post-nav-item::before { content: "← PREV"; }
.post-nav-next::before { content: "NEXT →"; text-align: right; }

.post-nav-item a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-nav-next { margin-left: auto; text-align: right; }

.post-nav a {
    color: #555;
    text-decoration: none;
}

.post-nav a:hover {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.post-nav-empty { color: #bbb; }

/* =========================================================
   ARCHIVE TEMPLATE · 归档列表页
========================================================= */

.archive-intro { padding-top: 0; }

.archive-groups { padding-top: 10px; }

.archive-group {
    padding: 34px 0 10px;
    border-bottom: 1px solid var(--line);
}

.archive-group:last-child { border-bottom: 0; }

.archive-year {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: #444;
}

.archive-year span {
    margin-left: 8px;
    color: #b5b5ad;
    font-size: 11px;
    font-weight: 400;
}

.archive-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0 0 14px;
}

.archive-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    padding: 7px 0;
}

.archive-item a {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #555;
    font-size: 13px;
    text-decoration: none;
    transition: color .2s;
}

.archive-item a:hover {
    color: #111;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.archive-item time {
    flex: 0 0 auto;
    color: #999;
    font-size: 11px;
}

/* =========================================================
   404
========================================================= */

.error-page {
    padding: 90px 0 120px;
    text-align: center;
}

.error-code {
    font-size: 84px;
    font-weight: 200;
    letter-spacing: -.06em;
    line-height: 1;
    color: #c9c9c2;
}

.error-text {
    margin-top: 18px;
    color: #777;
    font-size: 13px;
}

.error-link {
    display: inline-block;
    margin-top: 26px;
    color: #555;
    font-size: 12px;
    text-decoration: none;
    border: 1px solid var(--line);
    padding: 9px 17px;
    border-radius: 7px;
    transition: color .2s, background-color .2s;
}

.error-link:hover {
    color: #111;
    background: var(--soft);
}

/* =========================================================
   COMMENTS
========================================================= */

.comments { margin-top: 56px; }

.comments-title {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: #444;
}

.comments-count {
    margin-left: 5px;
    color: #b5b5ad;
    font-weight: 400;
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comment-list > li,
.comment-children > li {
    list-style: none;
    padding: 20px 0;
    border-bottom: 1px solid var(--line);
}

.comment-children > li:last-child { border-bottom: 0; padding-bottom: 4px; }

.comment-children {
    list-style: none;
    margin: 14px 0 0;
    padding-left: 30px;
    border-left: 1px solid var(--soft);
}

.comment-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--soft);
    display: block;
}

.comment-author {
    font-size: 12px;
    font-weight: 600;
    color: #444;
}

.comment-author a {
    color: inherit;
    text-decoration: none;
}

.comment-author a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 博主回复标识 */
.comment-by-author .comment-author::after {
    content: "作者";
    margin-left: 6px;
    color: #999;
    font-size: 10px;
    font-weight: 400;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
    vertical-align: 1px;
}

.comment-time {
    color: #999;
    font-size: 11px;
}

.comment-content {
    margin-top: 10px;
    color: #444;
    font-size: 13px;
    line-height: 1.9;
}

.comment-content p {
    margin: 0 0 8px;
    text-wrap: pretty;
}

.comment-content p:last-child { margin-bottom: 0; }

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

.comment-tools { margin-top: 8px; }

.comment-tools a {
    color: #999;
    font-size: 11px;
    text-decoration: none;
    transition: color .2s;
}

.comment-tools a:hover { color: #111; }

/* 评论分页 */

.comments .page-navigator {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 20px 0 0;
    padding: 0;
}

.comments .page-navigator li a {
    display: block;
    color: #777;
    font-size: 11px;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 5px 10px;
    transition: color .2s, background-color .2s;
}

.comments .page-navigator li a:hover {
    color: #111;
    background: var(--soft);
}

.comments .page-navigator .current a {
    color: #111;
    background: var(--soft);
}

/* 评论表单 */

.comment-form {
    margin-top: 26px;
    display: grid;
    gap: 10px;
}

.comment-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 7px;
    padding: 10px 13px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    transition: border-color .2s;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: #a9a9a1;
}

.comment-form textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.8;
}

.comment-form-actions {
    display: flex;
    justify-content: flex-end;
}

/* 1.1.3 修复：提交按钮样式误伤表单内所有 button（表情格子/表情开关
   全被染成深底）。收窄到 .comment-form-actions 内的按钮 */
.comment-form-actions button {
    border: 0;
    background: #2d2d2a;
    color: #fbfbf9;
    font-size: 12px;
    font-family: inherit;
    padding: 10px 18px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color .2s;
}

.comment-form-actions button:hover { background: #444; }

.comment-form-actions button:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* 评论提交验证错误提示 */
.comment-form-error {
    background: #f6eeec;
    border: 1px solid #e2cbca;
    color: #a3403e;
    border-radius: 7px;
    padding: 9px 13px;
    font-size: 12px;
}

.comment-form-error[hidden] { display: none; }

/* Honeypot：视觉隐藏但留在 DOM 里 */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    height: 0;
    overflow: hidden;
}

.comment-identity {
    color: #777;
    font-size: 12px;
}

.comment-identity a {
    color: #555;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.comments-empty {
    margin-top: 22px;
    color: #999;
    font-size: 12px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
    :root { --gap: 45px; --sidebar: 260px; }
    .page-title { font-size: 37px; }

    .post { padding-left: 58px; }
    .post-date-big { font-size: 24px; top: 33px; }
}

@media (max-width: 860px) {
    /* 顶栏不固定（随页面滚动），独立页面不进顶栏 —— 底部 Tab 栏已承担导航 */
    .nav { padding: 14px 18px; }
    .nav-link { display: none; }

    /* 搜索移到底部 Tab，顶栏保持干净 */
    .search-form { display: none; }

    .wrapper {
        display: block;
        padding: 26px 18px 80px;
    }

    /* 文章页标题区：移动端收敛 */
    .wrapper-narrow { padding-top: 0; }

    .post-header { padding-bottom: 26px; }
    .post-header .page-kicker { font-size: 9px; letter-spacing: .16em; }
    .post-header .page-kicker::before { width: 14px; }
    .post-header .post-title-main { font-size: 22px; line-height: 1.3; margin-top: 12px; }
    .post-meta-line { margin-top: 12px; font-size: 10px; }

    .page-header { padding-bottom: 26px; }
    .page-title { font-size: 33px; }
    .page-description { font-size: 12px; }

    .sidebar {
        position: static;
        margin-top: 55px;
    }

    .author { padding-bottom: 30px; }

    .post { padding: 30px 0 33px; }
    .post-date-big { display: none; }
    .post-title { font-size: 21px; }
    .excerpt { font-size: 12px; }

    .photo-grid {
        height: 250px;
        grid-template-rows: repeat(3, 79px);
    }

    .frequency-chart { gap: 5px; }
    footer { padding: 0 18px 35px; }

    .post-content { font-size: 14px; }

    .comment-form-row { grid-template-columns: 1fr; }
    .comment-children { padding-left: 16px; }
    .post-nav { flex-direction: column; gap: 8px; }
    .post-nav-next { text-align: left; }
}

@media (max-width: 420px) {
    .wrapper { padding-top: 12px; }
    .page-title { font-size: 30px; }

    .photo-grid {
        height: 220px;
        grid-template-rows: repeat(3, 69px);
        gap: 5px;
    }

    .post-top { align-items: flex-start; }
}

/* 注意：.nav-link 的 display 基础样式在文件前部（HEADER 区），
   必须位于移动端媒体查询之前，否则会覆盖移动端的 display:none */

.nav-link .nav-ico {
    display: inline-flex;
    opacity: .72;
    transition: opacity .2s;
}

.nav-link:hover .nav-ico { opacity: 1; }

.nav-link .nav-ico svg,
.tab .tab-ico svg {
    width: 15px;
    height: 15px;
    display: block;
}

.tab .tab-ico svg { width: 20px; height: 20px; }

/* =========================================================
   COMMENT CAPTCHA · 人机检测（可见算术验证）
========================================================= */

.comment-captcha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px;
    color: #777;
}

.comment-captcha .captcha-label {
    color: #999;
    letter-spacing: .06em;
}

.comment-captcha .captcha-q {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: #444;
    background: var(--soft);
    padding: 5px 11px;
    border-radius: 6px;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}

.comment-captcha .captcha-input {
    width: 130px;
    border: 1px solid var(--line);
    background: var(--paper);
    border-radius: 6px;
    padding: 7px 11px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    outline: none;
    transition: border-color .2s;
}

.comment-captcha .captcha-input:focus { border-color: #a9a9a1; }

/* =========================================================
   SHORTCODE · 短代码组件（1.0.9 扩充）
   作用域全局化：日记卡片 / 正文 / 任意容器均可使用。
   提示 alert · 便签 note/warn · 按钮 btn · 卡片 card ·
   折叠 collapse · 标签页 tabs · 分栏 row/col · 进度条 ·
   文件 file · 音频 audio · 时间线 timeline · 画廊 gallery ·
   行内 mark/kbd/badge · 分隔线 divider · 代码块 code
========================================================= */

/* 组件内部段落间距归零（通用） */
.sc-note .sc-body p:first-child, .sc-warn .sc-body p:first-child,
.sc-alert .sc-body p:first-child, .sc-card .sc-body p:first-child,
.sc-collapse-body p:first-child, .sc-tab-pane p:first-child,
.sc-col p:first-child, .sc-event-body p:first-child { margin-top: 0; }

.sc-note .sc-body p:last-child, .sc-warn .sc-body p:last-child,
.sc-alert .sc-body p:last-child, .sc-card .sc-body p:last-child,
.sc-collapse-body p:last-child, .sc-tab-pane p:last-child,
.sc-col p:last-child, .sc-event-body p:last-child { margin-bottom: 0; }

/* --- 便签：note（米黄）/ warn（米红） --- */
.sc-note,
.sc-warn {
    margin: 22px 0;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.9;
}

.sc-note { background: #f5f2e2; border: 1px solid #e3dcc0; }
.sc-warn { background: #f6eeec; border: 1px solid #e2cbca; }

.sc-note .sc-title,
.sc-warn .sc-title {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .06em;
    margin-bottom: 6px;
    color: #555;
}

/* --- 提示框 alert：7 种语义 --- */
.sc-alert {
    display: grid;
    grid-template-columns: 26px 1fr;
    column-gap: 12px;
    align-items: start;
    margin: 22px 0;
    padding: 13px 16px 13px 14px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.9;
    color: #4a4a45;
}

.sc-alert::before {
    grid-row: 1 / span 2;
    grid-column: 1;
    content: "";
    width: 26px;
    height: 26px;
    margin-top: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fdfdfa;
    font-size: 13px;
    font-weight: 700;
    font-family: Georgia, serif;
}

.sc-alert-title {
    grid-column: 2;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.sc-alert .sc-body { grid-column: 2; }

.sc-a-info::before      { content: "i"; }
.sc-a-tip::before       { content: "✎"; font-size: 11px; }
.sc-a-success::before   { content: "✓"; font-size: 12px; }
.sc-a-warning::before   { content: "!"; }
.sc-a-error::before     { content: "✕"; font-size: 11px; }
.sc-a-danger::before    { content: "⚑"; font-size: 11px; }
.sc-a-important::before { content: "★"; font-size: 11px; }

.sc-a-info      { background: #eef2f5; border-color: #d4dee5; }
.sc-a-info::before { background: #5b7d99; }
.sc-a-tip       { background: #f7f2e5; border-color: #e6dcbf; }
.sc-a-tip::before { background: #a8863c; }
.sc-a-success   { background: #eef4ec; border-color: #d1e1cd; }
.sc-a-success::before { background: #5c875c; }
.sc-a-warning   { background: #fbf2e4; border-color: #ecd6b1; }
.sc-a-warning::before { background: #b07f3a; }
.sc-a-error     { background: #f9edec; border-color: #e8cdca; }
.sc-a-error::before { background: #b05e5a; }
.sc-a-danger    { background: #f5eaea; border-color: #e0c3c1; }
.sc-a-danger::before { background: #94403c; }
.sc-a-important { background: #f2eef5; border-color: #dccfe4; }
.sc-a-important::before { background: #7a5e95; }

/* --- 按钮 btn：8 种样式 --- */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px;
    margin: 3px 6px 3px 0;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform .15s, box-shadow .15s, background-color .15s, color .15s;
}

.sc-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(24, 24, 23, .10);
}

.sc-b-default { background: #f0efe9; border-color: #d8d6cb; color: #333; }
.sc-b-primary { background: #2f2f2c; color: #f7f6f1; }
.sc-b-green   { background: #4e7d51; color: #f4f8f4; }
.sc-b-blue    { background: #4a6f94; color: #f3f6f9; }
.sc-b-red     { background: #a5483f; color: #faf2f1; }
.sc-b-outline { background: transparent; border-color: #4a4a45; color: #333; }
.sc-b-ghost   { background: transparent; border-color: #b9b7ac; color: #555; }
.sc-b-soft    { background: #ecece7; color: #444; }

.sc-b-default:hover { background: #e9e8e0; }
.sc-b-primary:hover { background: #1f1f1d; }
.sc-b-green:hover   { background: #437046; }
.sc-b-blue:hover    { background: #3f6285; }
.sc-b-red:hover     { background: #964038; }
.sc-b-soft:hover    { background: #e4e4dd; }

/* --- 卡片 card --- */
.sc-card {
    margin: 22px 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    overflow: hidden;
}

.sc-card-title {
    padding: 11px 16px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--line);
    background: #f7f6f1;
}

.sc-card .sc-body { padding: 14px 16px; font-size: 14px; line-height: 1.9; }

/* --- 折叠 collapse：原生 details，无需 JS --- */
.sc-collapse {
    margin: 22px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    overflow: hidden;
}

.sc-collapse summary {
    cursor: pointer;
    padding: 11px 16px 11px 36px;
    position: relative;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text);
    list-style: none;
    user-select: none;
}

.sc-collapse summary::-webkit-details-marker { display: none; }

.sc-collapse summary::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 1.6px solid #8a8a84;
    border-bottom: 1.6px solid #8a8a84;
    transform: rotate(-45deg);
    transition: transform .2s;
}

.sc-collapse[open] summary::before {
    transform: rotate(45deg);
    margin-top: -2px;
}

.sc-collapse summary:hover { background: #f7f6f1; }

.sc-collapse-body {
    padding: 12px 16px 14px;
    font-size: 14px;
    line-height: 1.9;
    border-top: 1px dashed var(--line);
}

/* --- 标签页 tabs（切换由 main.js 事件委托） --- */
.sc-tabs {
    margin: 22px 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    overflow: hidden;
}

.sc-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
    background: #f7f6f1;
}

.sc-tab-btn {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: .04em;
    color: var(--muted);
    position: relative;
    transition: color .15s;
}

.sc-tab-btn:hover { color: var(--text); }
.sc-tab-btn.active { color: var(--text); font-weight: 600; }

.sc-tab-btn.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: #2f2f2c;
    border-radius: 2px;
}

.sc-tab-pane { padding: 14px 16px; font-size: 14px; line-height: 1.9; }

/* 无 JS 时全部展开（html.js 由 head 内脚本添加） */
html.js .sc-tab-pane { display: none; }
html.js .sc-tab-pane.active { display: block; }

/* --- 分栏 row/col：6 列栅格，col span 1-6 默认 3 --- */
.sc-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    margin: 22px 0;
}

.sc-col { min-width: 0; font-size: 14px; line-height: 1.9; }
.sc-col-1 { grid-column: span 1; }
.sc-col-2 { grid-column: span 2; }
.sc-col-3 { grid-column: span 3; }
.sc-col-4 { grid-column: span 4; }
.sc-col-5 { grid-column: span 5; }
.sc-col-6 { grid-column: span 6; }

/* --- 进度条 progress --- */
.sc-progress { margin: 20px 0; }

.sc-progress-label {
    font-size: 12px;
    color: #6a6a64;
    margin-bottom: 6px;
    letter-spacing: .03em;
}

.sc-progress-track {
    height: 8px;
    border-radius: 4px;
    background: #ecece7;
    overflow: hidden;
}

.sc-progress-bar {
    height: 100%;
    border-radius: 4px;
    animation: sc-grow .9s ease-out;
}

.sc-p-green .sc-progress-bar  { background: #5c875c; }
.sc-p-blue .sc-progress-bar   { background: #4a6f94; }
.sc-p-red .sc-progress-bar    { background: #a5483f; }
.sc-p-yellow .sc-progress-bar { background: #c2933f; }
.sc-p-purple .sc-progress-bar { background: #7a5e95; }

@keyframes sc-grow { from { width: 0; } }

/* --- 文件下载 file --- */
.sc-file {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--paper);
    text-decoration: none !important;
    color: var(--text);
    transition: border-color .2s, background-color .2s;
}

.sc-file:hover { border-color: #b9b7ac; background: #f7f6f1; }

.sc-file-icon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: #f0efe9;
    border: 1px solid #e0ded3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-file-icon::before {
    content: "↓";
    font-size: 16px;
    font-weight: 700;
    color: #6a6a64;
    font-family: Georgia, serif;
}

.sc-file-name { flex: 1; font-size: 13.5px; font-weight: 500; word-break: break-all; }

.sc-file-action {
    flex: none;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--muted);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 3px 9px;
}

/* --- 音频 audio --- */
.sc-audio { margin: 20px 0; }
.sc-audio audio { width: 100%; height: 40px; }

/* --- 时间线 timeline --- */
.sc-timeline {
    margin: 22px 0;
    padding-left: 20px;
    border-left: 2px solid var(--line);
}

.sc-event { position: relative; padding: 0 0 18px 14px; }
.sc-event:last-child { padding-bottom: 2px; }

.sc-event::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8a8a84;
    box-shadow: 0 0 0 3px var(--paper);
}

.sc-event-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.sc-event-date {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .05em;
}

.sc-event-title { font-size: 13.5px; font-weight: 600; }

.sc-event-body {
    margin-top: 5px;
    font-size: 13.5px;
    color: #5a5a55;
    line-height: 1.85;
}

/* --- 画廊 gallery --- */
.sc-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 22px 0;
}

.sc-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 7px;
    display: block;
}

/* --- 行内：mark / kbd / badge --- */
.sc-mark {
    background: #f7e9a6;
    color: #524d2e;
    border-radius: 3px;
    padding: 1px 5px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.sc-kbd {
    display: inline-block;
    padding: 1px 7px;
    margin: 0 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .84em;
    background: #fff;
    border: 1px solid #cfcdc3;
    border-bottom-width: 3px;
    border-radius: 5px;
    color: #3a3a36;
    line-height: 1.7;
}

.sc-badge {
    display: inline-block;
    padding: 2px 9px;
    margin: 0 3px;
    font-size: 11px;
    letter-spacing: .05em;
    border-radius: 10px;
    background: #ecece7;
    color: #555;
    line-height: 1.7;
}

.sc-badge-green  { background: #e3efe3; color: #3e6b41; }
.sc-badge-blue   { background: #e2ebf3; color: #3d5f80; }
.sc-badge-red    { background: #f4e3e1; color: #94403a; }
.sc-badge-yellow { background: #f7eed6; color: #8a6a2a; }
.sc-badge-purple { background: #ece5f2; color: #6a5288; }

/* --- 分隔线 divider --- */
.sc-divider {
    display: flex;
    align-items: center;
    margin: 26px 0;
}

.sc-divider::before,
.sc-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.sc-divider span {
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: .12em;
    color: #9a9a93;
    white-space: nowrap;
}

.sc-divider span:empty { display: none; }

/* --- 代码块 code ---
   1.1.3 修复：用 pre.sc-code 提升优先级 —— 之前 .sc-code (0,1,0) 被
   .post-content pre / .diary-text pre (0,1,1) 压过，文章里代码块变成
   浅底+米白字，看起来"没有背景"。本规则定义在其后，同优先级后者胜 */
pre.sc-code {
    position: relative;
    margin: 22px 0;
    padding: 16px 18px;
    background: #2b2a25;
    color: #e6e2d5;
    border-radius: 8px;
    overflow: auto;
    font-size: 13px;
    line-height: 1.75;
}

pre.sc-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

pre.sc-code[data-lang]::after {
    content: attr(data-lang);
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 10px;
    letter-spacing: .1em;
    color: #7c786b;
    text-transform: uppercase;
}

/* --- 视频：全局作用域（正文 / 日记卡片 / 任意容器） --- */
.sc-video {
    position: relative;
    /* 1.1.5：改用 aspect-ratio（JPLAYER 读取视频真实宽高比后覆盖此值） */
    aspect-ratio: 16 / 9;
    margin: 22px auto;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a19;
    max-width: 100%;
}

/* 竖屏视频（JS 依真实比例标记）：高度钳制，宽度按比例收缩并居中，
   避免竖屏内容在 16:9 容器内上下大片黑边 */
.sc-video.jp-portrait {
    width: auto;
    max-width: 100%;
    max-height: min(66vh, 540px);
}

.sc-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.sc-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

/* --- 自定义播放器（1.1.2）---
   服务端保留原生 controls（无 JS 可用），JPLAYER 接管后隐藏；
   大播放键 + 底部玻璃控件条，播放中 2.6s 无操作自动隐藏 */
.jp video::-webkit-media-controls { display: none !important; }

.jp-big {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: rgba(251, 251, 249, .94);
    color: #181817;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .22);
    transition: transform .18s var(--ease), background-color .18s;
}

.jp-big svg { width: 26px; height: 26px; margin-left: 3px; }

.jp-big:hover { transform: scale(1.06); background: #fff; }

.jp-playing .jp-big { display: none; }

.jp-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px;
    border-radius: 10px;
    background: rgba(22, 22, 21, .66);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: opacity .25s, transform .25s;
}

.jp-playing.jp-idle .jp-bar {
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
}

.jp-btn {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .92);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.jp-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }

.jp-btn svg { width: 17px; height: 17px; display: block; }

/* 1.1.3 修复：jp-ic-muted 补默认隐藏 —— 之前漏了这条，
   未静音时音量/静音两个图标同时显示 */
.jp-ic-pause, .jp-ic-muted, .jp-muted .jp-ic-vol { display: none; }
.jp-playing .jp-ic-pause { display: block; }
.jp-playing .jp-ic-play { display: none; }
.jp-muted .jp-ic-muted { display: block; }

.jp-seek {
    position: relative;
    flex: 1;
    height: 18px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
}

.jp-track, .jp-fill {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 4px;
}

.jp-track { background: rgba(255, 255, 255, .22); }

.jp-fill {
    width: 0;
    background: #fbfbf9;
    border-radius: 4px 0 0 4px;
}

.jp-dot {
    position: absolute;
    left: 0;
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: #fbfbf9;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    transition: left .1s linear;
}

.jp-time {
    flex: 0 0 auto;
    font-size: 10.5px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .88);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .jp-bar { left: 7px; right: 7px; bottom: 7px; gap: 6px; padding: 5px 9px; }
    .jp-time { font-size: 10px; }
}

/* 日记卡片中的视频：约束宽度，16:9 全宽在窄卡片里过高 */
.diary-text .sc-video {
    max-width: 430px;
    margin-left: auto;
    margin-right: auto;
}

/* 日记卡片中其他组件的间距收缩 */
.diary-text .sc-note,
.diary-text .sc-warn,
.diary-text .sc-alert,
.diary-text .sc-card,
.diary-text .sc-collapse,
.diary-text .sc-tabs,
.diary-text .sc-row,
.diary-text .sc-timeline,
.diary-text .sc-gallery,
.diary-text .sc-audio,
.diary-text .sc-file,
.diary-text pre { margin: 14px 0; }

/* --- 正文图片自动分组（1.1.2）---
   服务端把连续的纯图片段落（中间无文字）收纳为 .img-row 网格：
   2 / 4 张两列，3 张及以上三列；表情贴纸不参与。
   替代 1.1.1 的 CSS :has() 方案（对带链接图片等结构不可靠） */
.img-row {
    display: grid;
    gap: 9px;
    margin: 20px 0;
}

.img-row.ir-2 { grid-template-columns: repeat(2, 1fr); }
.img-row.ir-3 { grid-template-columns: repeat(3, 1fr); }

.img-row .ir-item {
    margin: 0;
    overflow: hidden;
    border-radius: 7px;
    background: var(--soft);
    aspect-ratio: 4 / 3;
}

.img-row .ir-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 分组内首尾图片不继承段落外距 */
.img-row + p, p + .img-row { margin-top: 0; }

/* --- 正文表情贴纸（1.1.1）--- */
.post-content img.cute-inline,
.diary-text img.cute-inline,
.comment-content img.cute-inline {
    display: inline-block;
    height: 26px;
    width: auto;
    margin: 0 2px;
    vertical-align: -8px;
    border-radius: 5px;
}

/* 移动端：分栏塌缩为单列，画廊/图片分组双列 */
@media (max-width: 640px) {
    .sc-row { display: block; }
    .sc-col + .sc-col { margin-top: 14px; }
    .sc-gallery { grid-template-columns: repeat(2, 1fr); }
    .diary-text .sc-video { max-width: 320px; }
    .img-row.ir-3 { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   评论表情包 · 编辑器与面板（1.1.0）
   JS 把 textarea 渐进升级为 contenteditable 编辑器，
   无 JS 时 textarea 原样可用（.editor-fallback 不会被添加）
========================================================= */

.comment-editor-box { position: relative; }

.comment-editor-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: var(--paper);
    padding: 5px 7px 5px 13px;
}

.comment-editor-hint {
    font-size: 11px;
    color: var(--muted);
}

.emoji-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #8a8a84;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.emoji-toggle svg { width: 17px; height: 17px; display: block; }

.emoji-toggle:hover,
.emoji-toggle[aria-expanded="true"] {
    background: var(--soft);
    color: var(--text);
}

.comment-editor {
    border: 1px solid var(--line);
    border-radius: 0 0 7px 7px;
    background: var(--paper);
    padding: 10px 13px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    line-height: 1.8;
    min-height: 96px;
    max-height: 280px;
    overflow-y: auto;
    word-break: break-word;
    outline: none;
    transition: border-color .2s;
}

.comment-editor:focus { border-color: #a9a9a1; }

.comment-editor:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    pointer-events: none;
}

/* 编辑器内的表情：直接以图片呈现（所见即所得） */
.comment-editor .emoji-sticker {
    display: inline-block;
    height: 32px;
    width: auto;
    margin: 0 1px;
    vertical-align: -11px;
}

/* 升级后的原 textarea：仅作为提交字段保留 */
.comment-form textarea.editor-fallback { display: none; }

/* 表情面板（桌面：编辑器下方浮层）
   1.1.3：去掉右上角 × 关闭钮 —— 点面板外 / Esc / 再点表情按钮均可关闭；
   移动端为底部抽屉 + 顶部抓手条（真实按钮，点按收起） */
.emoji-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 372px;
    max-width: calc(100vw - 32px);
    background: #fbfaf4;
    border: 1px solid #e2ded0;
    border-radius: 13px;
    box-shadow: 0 12px 32px rgba(24, 24, 23, .12);
    overflow: hidden;
    animation: ep-pop .18s var(--ease);
}

@keyframes ep-pop {
    from { opacity: 0; transform: translateY(-5px) scale(.98); }
}

.emoji-panel[hidden] { display: none; }

/* 抓手条：仅移动端显示（底部抽屉顶部），点按收起 */
.emoji-panel-grab { display: none; }

.emoji-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 10px 15px;
    border-bottom: 1px solid #ebe7da;
    background: #f7f4ea;
}

.emoji-panel-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: #8a8578;
    letter-spacing: .1em;
}

.emoji-panel-title svg {
    width: 15px;
    height: 15px;
    display: block;
    color: #b3a77f;
}

.emoji-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 7px;
    padding: 12px;
    /* 1.1.5：桌面端不再限高——49 枚 7 行自然展开，取消滚动条 */
    background: #f7f5ec;
}

.emoji-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: 1px solid #eae6d8;
    border-radius: 9px;
    background: #fffdf8;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

.emoji-item:hover {
    transform: translateY(-2px);
    border-color: #d4cfc0;
    box-shadow: 0 3px 8px rgba(24, 24, 23, .08);
}

.emoji-item:active { transform: scale(.92); }

.emoji-item img {
    width: 34px;
    height: 34px;
    display: block;
    pointer-events: none;
}

/* 评论内容中的表情图片 */
.comment-content .cute-emoji {
    display: inline-block;
    height: 32px;
    width: auto;
    margin: 0 1px;
    vertical-align: -11px;
}

/* 移动端：表情面板为底部抽屉
   1.1.3：抓手条改为真实按钮（点按收起），无 × 关闭钮；
   6 列大格子、42vh 限高，通体暖纸色与页面融合 */
@media (max-width: 640px) {
    .emoji-panel {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        max-width: none;
        z-index: 120;
        border: 0;
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -10px 40px rgba(24, 24, 23, .18);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        animation: ep-sheet .28s cubic-bezier(.2, .8, .2, 1);
    }

    /* 抓手条：大热区 + 细横条视觉，点按收起面板 */
    .emoji-panel-grab {
        display: block;
        width: 100%;
        padding: 10px 0 6px;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .emoji-panel-grab::before {
        content: "";
        display: block;
        width: 38px;
        height: 4px;
        border-radius: 4px;
        background: #d9d3c1;
        margin: 0 auto;
    }

    .emoji-panel-head {
        padding: 4px 10px 9px 16px;
        background: transparent;
        border-bottom: 1px solid #ede9dc;
    }

    .emoji-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
        padding: 12px 14px 14px;
        max-height: 42vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .emoji-item { padding: 5px; border-radius: 10px; }

    .emoji-item img {
        width: 36px;
        height: 36px;
    }
}

@keyframes ep-sheet {
    from { transform: translateY(48px); opacity: 0; }
}

/* =========================================================
   懒加载渐显（1.1.0）
   lz-armed / lz-in 均由 JS 添加：JS 失效时图片行为
   与原生 loading=lazy 完全一致，不存在"永久隐藏"状态
========================================================= */

html.js img.lz-armed { opacity: 0; }

html.js img.lz-armed.lz-in {
    opacity: 1;
    transition: opacity .45s var(--ease);
}

/* =========================================================
   图片灯箱（1.1.0）
========================================================= */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(24, 24, 23, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

.lightbox[hidden] { display: none; }

.lightbox figure {
    max-width: 92vw;
    max-height: 92vh;
    text-align: center;
}

.lightbox img {
    display: block;
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 4px;
}

.lightbox figcaption {
    color: #b9b9b2;
    font-size: 12px;
    margin-top: 12px;
}

@media (prefers-reduced-motion: no-preference) {
    .lightbox figure {
        animation: lightbox-in .28s var(--ease);
    }

    @keyframes lightbox-in {
        from { opacity: 0; transform: scale(.96); }
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   THEME TOGGLE · 夜间模式切换按钮（1.1.4）
   桌面与移动端共用顶栏右侧位置（移动端 nav-link 隐藏后
   顶栏右侧原本是空的，正好放下）
========================================================= */

.theme-toggle {
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    margin-left: 7px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
    color: #777;
    cursor: pointer;
    transition: color .2s, background-color .2s, transform .2s var(--ease);
}

.theme-toggle:hover { color: #111; background: var(--soft); }
.theme-toggle:active { transform: scale(.92); }

.theme-toggle svg { width: 15px; height: 15px; display: block; }

.theme-toggle .ico-sun { display: none; }
html.dark .theme-toggle .ico-moon { display: none; }
html.dark .theme-toggle .ico-sun { display: block; }

/* =========================================================
   SYNTAX · 代码语法高亮（1.1.4）
   highlight.js 自托管（common 34 语言），纸感夜灯配色：
   在 sc-code 的深咖底上用暖橙 / 苔绿 / 芥末黄 / 雾蓝 / 藕紫
========================================================= */

.hljs { color: #d8d4c4; background: transparent; }

.hljs-comment,
.hljs-quote { color: #7d7867; font-style: italic; }

.hljs-keyword,
.hljs-selector-tag,
.hljs-tag,
.hljs-name,
.hljs-selector-id { color: #c99a6b; }

.hljs-string,
.hljs-regexp,
.hljs-addition { color: #a8b98a; }

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-link { color: #d3a94f; }

.hljs-title,
.hljs-title.function_,
.hljs-title.class_,
.hljs-built_in,
.hljs-section { color: #8fa8c0; }

.hljs-attr,
.hljs-attribute,
.hljs-property,
.hljs-selector-class,
.hljs-selector-attr { color: #b8a7d0; }

.hljs-meta,
.hljs-doctag { color: #8a8574; }

.hljs-symbol,
.hljs-bullet { color: #c99a6b; }
.hljs-deletion { color: #c07a72; }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

/* =========================================================
   TOC · 文章目录（1.1.4）
   <1280px：文章头部卡片；≥1280px：固定于文章左外侧，
   利用窄栏布局的两侧留白，不与正文争空间。
========================================================= */

.toc {
    margin: 0 0 30px;
    padding: 15px 20px 17px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
}

.toc-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 9px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    color: #555;
}

.toc-head::before {
    content: "";
    width: 14px;
    height: 1px;
    background: #b5b5ad;
    align-self: center;
}

.toc-head span {
    font-size: 9px;
    font-weight: 400;
    letter-spacing: .16em;
    color: #b5b5ad;
}

.toc-list { list-style: none; margin: 0; padding: 0; }

.toc-list a {
    display: block;
    padding: 4px 0 4px 10px;
    font-size: 12.5px;
    color: #666;
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: color .2s, border-color .2s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.toc-lv3 a { padding-left: 22px; }
.toc-lv4 a { padding-left: 34px; font-size: 12px; }

.toc-list a:hover { color: #111; }

.toc-list a.current {
    color: #111;
    border-left-color: #2d2d2a;
    font-weight: 550;
}

/* 窄屏：列表限高可滚，避免超长目录把正文挤太远 */
@media (max-width: 1279px) {
    .toc-list { max-height: 252px; overflow-y: auto; scrollbar-width: thin; }
}

/* 宽屏：目录浮到文章左外侧（wrapper-narrow 790px 居中的留白区） */
@media (min-width: 1280px) {
    .toc {
        position: fixed;
        left: calc(50% - 605px);
        top: 92px;
        width: 190px;
        max-height: calc(100vh - 190px);
        overflow-y: auto;
        margin: 0;
        z-index: 90;
        scrollbar-width: thin;
    }
}

/* =========================================================
   SCROLLBAR · 细滚动条（1.1.4 美化）
   纸感浅条 + 透明轨道，代码块 / 目录 / 长列表统一
========================================================= */

@media (min-width: 861px) {
    html { scrollbar-width: thin; scrollbar-color: #c9c9c2 transparent; }

    ::-webkit-scrollbar { width: 9px; height: 9px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: #c9c9c2;
        border-radius: 5px;
        border: 2px solid var(--bg);
    }
    ::-webkit-scrollbar-thumb:hover { background: #b0b0a8; }
}

pre.sc-code { scrollbar-width: thin; scrollbar-color: #55524a transparent; }

/* =========================================================
   PRINT · 打印样式（1.1.4）
   纸感主题的天然延伸：只留标题、正文与代码
========================================================= */

@media print {
    .site-header,
    .tabbar,
    .search-sheet,
    .sheet-mask,
    .filter,
    .sidebar,
    .load-more,
    .comments,
    .post-nav,
    .post-tags,
    .emoji-panel,
    .toc,
    body::after { display: none !important; }

    body { background: #fff; color: #000; }

    .wrapper,
    .wrapper-narrow {
        display: block;
        max-width: none;
        padding: 0;
    }

    .page-title,
    .post-title-main { font-size: 20pt; }

    .post-content { font-size: 11pt; color: #000; }
    .post-content a { color: #000; }

    pre.sc-code,
    .post-content pre {
        background: #f4f4ef;
        color: #181817;
        border: 1px solid #ddd;
        white-space: pre-wrap;
        word-break: break-all;
    }
}

/* =========================================================
   NIGHT · 夜间纸感模式（1.1.4）
   暮色暖黑纸：核心变量换肤 + 硬编码色覆盖。
   手动切换记忆于 localStorage（journal-theme），未选择时
   跟随系统 prefers-color-scheme；header.php 内联脚本防闪。
   彩色短代码组件（alert / btn / 徽章）保持原浅色 ——
   像深色手帐上贴的便签贴纸，是有意为之。
========================================================= */

html.dark {
    --bg: #1b1b19;
    --paper: #22221f;
    --text: #d9d7cc;
    --muted: #8f8d82;
    --line: #34332e;
    --soft: #2a2a26;
    --hover: #333229;
    color-scheme: dark;
}

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

html.dark ::selection { background: #45423a; color: #ecebe2; }
html.dark :focus-visible { outline-color: #9a988c; }

/* 纸感噪点反转为亮尘 */
html.dark body::after { opacity: .05; filter: invert(1); }

/* --- 顶栏 / 导航 --- */
html.dark .site-header { background: var(--bg); border-bottom-color: rgba(255, 255, 255, .06); }
html.dark .logo { color: var(--text); }
html.dark .logo small { color: var(--muted); }
html.dark .nav-link { color: #8f8d82; }
html.dark .nav-link:hover { color: #ecebe2; background: var(--soft); }
html.dark .search { color: #8f8d82; }
html.dark .search:hover { color: #ecebe2; }
html.dark .search-input { color: var(--text); }
html.dark .search-input::placeholder { color: #67655c; }
html.dark .search-form:focus-within,
html.dark .search-form.open { border-color: #55524a; background: rgba(255, 255, 255, .04); }

html.dark .theme-toggle { color: #8f8d82; }
html.dark .theme-toggle:hover { color: #ecebe2; background: var(--soft); }

/* --- 移动端 Tab 栏 / 搜索面板 --- */
html.dark .tabbar { background: #1b1b19; border-top-color: rgba(255, 255, 255, .06); }
@supports (backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px)) {
    html.dark .tabbar { background: rgba(27, 27, 25, .92); }
}
html.dark .tab { color: #67655c; }
html.dark .tab.active { color: #d9d7cc; }
html.dark .sheet-mask { background: rgba(0, 0, 0, .5); }
html.dark .search-sheet { background: var(--paper); border-top-color: var(--line); }
html.dark .search-sheet input { background: var(--soft); border-color: var(--line); color: var(--text); }
html.dark .search-sheet input:focus { border-color: #55524a; }
html.dark .search-sheet button { background: #d9d7cc; color: #1b1b19; }

/* --- 页面头部 / 筛选 --- */
html.dark .page-kicker { color: #7d7b71; }
html.dark .page-header .page-kicker::before,
html.dark .post-header .page-kicker::before { background: #67655c; }
html.dark .page-description { color: #9a988c; }
html.dark .filter button { color: #8f8d82; }
html.dark .filter button:hover,
html.dark .filter button.active { color: #ecebe2; background: var(--soft); }

/* --- 文章卡片 --- */
html.dark .post-date-big { color: #5d5b52; }
html.dark .post:hover .post-date-big { color: #8f8d82; }
html.dark .post-type,
html.dark .post-date { color: #8f8d82; }
html.dark .excerpt { color: #a0a096; }
html.dark .meta { color: #8f8d82; }
html.dark .dot { background: #5d5b52; }
html.dark .photo { background: #2e2d2a; }

html.dark .diary-body { border-left-color: #4a483f; }
html.dark .diary-body::before { background: #c9c7bb; }
html.dark .diary-text { color: #c4c2b6; }

html.dark .quote-mark { color: #77756b; }
html.dark .quote-source { color: #8f8d82; }

html.dark .random-card { background: rgba(255, 255, 255, .03); border-color: var(--line); }
html.dark .random-card:hover { background: rgba(255, 255, 255, .06); border-color: #4a483f; }
html.dark .random-symbol { color: #77756b; }
html.dark .random-text { color: #a0a096; }

html.dark .empty-state,
html.dark .load-progress { color: #8f8d82; }
html.dark .load-more a { color: #a0a096; }
html.dark .load-more a:hover { color: #ecebe2; }

/* --- 侧栏 --- */
html.dark .avatar { background: linear-gradient(135deg, #3a3934, #2c2b28); color: #a0a096; }
html.dark .author-role { color: #8f8d82; }
html.dark .author-description { color: #a0a096; }
html.dark .social a,
html.dark .post-tags a { color: #a0a096; }
html.dark .social a:hover,
html.dark .post-tags a:hover { color: #ecebe2; }
html.dark .side-title { color: #8f8d82; }
html.dark .now-row dt { color: #8f8d82; }
html.dark .now-row dd { color: #c4c2b6; }
html.dark .stat-label { color: #8f8d82; }
html.dark .frequency-title { color: #b5b3a7; }
html.dark .frequency-range { color: #8f8d82; }

/* 更新频率热力格：夜间反转为亮色阶 */
html.dark .frequency-chart span,
html.dark .frequency-chart .level-0 { background: #2e2d2a; }
html.dark .frequency-chart .level-1 { background: #5a584f; }
html.dark .frequency-chart .level-2 { background: #c9c7bb; }
html.dark .frequency-chart .today { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px #a0a096; }
html.dark .frequency-scale { color: #8f8d82; }
html.dark .frequency-scale .swatches .level-0 { background: #2e2d2a; }
html.dark .frequency-scale .swatches .level-1 { background: #5a584f; }
html.dark .frequency-scale .swatches .level-2 { background: #c9c7bb; }

html.dark .category-row a,
html.dark .recent-item span { color: #a0a096; }
html.dark .category-row a:hover,
html.dark .recent-item:hover span { color: #ecebe2; }
html.dark .category-row span,
html.dark .recent-item time { color: #8f8d82; }

/* --- 页脚 --- */
html.dark footer { color: #8f8d82; }
html.dark footer a:hover { color: #c9c7bb; border-color: #67655c; }

/* --- 文章页 --- */
html.dark .post-header .page-kicker { color: #7d7b71; }
html.dark .post-meta-line { color: #8f8d82; }
html.dark .post-content { color: #c6c4b8; }
html.dark .post-content h2::before { background: #67655c; }
html.dark .post-content a { text-decoration-color: #67655c; }
html.dark .post-content a:hover { text-decoration-color: #b5b3a7; }
html.dark .post-content blockquote { border-left-color: #4a483f; color: #a0a096; }
html.dark .post-nav-item::before { color: #67655c; }
html.dark .post-nav a { color: #b5b3a7; }
html.dark .post-nav a:hover { color: #ecebe2; }
html.dark .post-nav-empty { color: #67655c; }

/* --- 归档 / 404 --- */
html.dark .archive-year { color: #c4c2b6; }
html.dark .archive-year span { color: #67655c; }
html.dark .archive-item a { color: #b5b3a7; }
html.dark .archive-item a:hover { color: #ecebe2; }
html.dark .archive-item time { color: #8f8d82; }
html.dark .error-code { color: #5d5b52; }
html.dark .error-text { color: #a0a096; }
html.dark .error-link { color: #b5b3a7; }
html.dark .error-link:hover { color: #ecebe2; }

/* --- 评论区 --- */
html.dark .comments-title { color: #c4c2b6; }
html.dark .comments-count { color: #67655c; }
html.dark .comment-author { color: #c4c2b6; }
html.dark .comment-by-author .comment-author::after { color: #8f8d82; border-color: var(--line); }
html.dark .comment-time { color: #8f8d82; }
html.dark .comment-content { color: #c4c2b6; }
html.dark .comment-tools a { color: #8f8d82; }
html.dark .comment-tools a:hover { color: #ecebe2; }
html.dark .comments .page-navigator li a { color: #a0a096; }
html.dark .comments .page-navigator li a:hover { color: #ecebe2; }
html.dark .comments .page-navigator .current a { color: #ecebe2; }
html.dark .comment-form input,
html.dark .comment-form textarea { background: var(--paper); border-color: var(--line); color: var(--text); }
html.dark .comment-form input:focus,
html.dark .comment-form textarea:focus,
html.dark .comment-editor:focus { border-color: #55524a; }

/* 提交按钮反转为纸色，深色底上形成明确的主动作 */
html.dark .comment-form-actions button { background: #d9d7cc; color: #1b1b19; }
html.dark .comment-form-actions button:hover { background: #e8e6dc; }

html.dark .comment-form-error { background: #332724; border-color: #54393a; color: #d8a49e; }
html.dark .comment-identity { color: #a0a096; }
html.dark .comment-identity a { color: #b5b3a7; }
html.dark .comments-empty { color: #8f8d82; }
html.dark .comment-captcha { color: #a0a096; }
html.dark .comment-captcha .captcha-label { color: #8f8d82; }
html.dark .comment-captcha .captcha-q { color: #c9c7bb; }
html.dark .comment-captcha .captcha-input { background: var(--paper); border-color: var(--line); color: var(--text); }
html.dark .comment-captcha .captcha-input:focus { border-color: #55524a; }

/* --- 短代码（中性组件；彩色组件保持贴纸质感） --- */
html.dark .sc-card-title,
html.dark .sc-tabs-nav { background: #2a2a26; }
html.dark .sc-tab-btn.active::after { background: #d9d7cc; }
html.dark .sc-collapse summary:hover { background: #2a2a26; }
html.dark .sc-file:hover { background: #26261f; }
html.dark .sc-file-icon { background: #2e2d2a; border-color: #4a483f; }
html.dark .sc-file-icon::before { color: #b5b3a7; }
html.dark .sc-progress-label { color: #a0a096; }
html.dark .sc-progress-track { background: #2a2a26; }
html.dark .sc-event::before { background: #77756b; }
html.dark .sc-event-body { color: #a0a096; }
html.dark .sc-badge { background: #2a2a26; color: #b5b3a7; }
html.dark .sc-divider span { color: #77756b; }

/* --- 评论编辑器 / 表情面板：暖纸换暮纸 --- */
html.dark .comment-editor-hint { color: var(--muted); }
html.dark .comment-editor { background: var(--paper); }
html.dark .emoji-toggle { color: #8f8d82; }
html.dark .emoji-toggle:hover,
html.dark .emoji-toggle[aria-expanded="true"] { background: var(--soft); color: var(--text); }

html.dark .emoji-panel { background: #26251f; border-color: #3c3a30; }
html.dark .emoji-panel-head { background: #2b2a23; border-bottom-color: #3c3a30; }
html.dark .emoji-panel-title { color: #8f8d82; }
html.dark .emoji-panel-title svg { color: #9a9484; }
html.dark .emoji-grid { background: #232219; }
html.dark .emoji-item { background: #2b2a24; border-color: #3c3a30; }
html.dark .emoji-item:hover { border-color: #55524a; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
html.dark .emoji-panel-grab::before { background: #55524a; }

/* --- 灯箱（本就深色，微调即可） --- */
html.dark .lightbox { background: rgba(10, 10, 9, .95); }
html.dark .lightbox figcaption { color: #8f8d82; }

/* --- 目录（TOC） --- */
html.dark .toc { background: var(--paper); border-color: var(--line); }
html.dark .toc-head { color: #b5b3a7; }
html.dark .toc-head::before { background: #67655c; }
html.dark .toc-head span { color: #67655c; }
html.dark .toc-list a { color: #a0a096; }
html.dark .toc-list a:hover { color: #ecebe2; }
html.dark .toc-list a.current { color: #ecebe2; border-left-color: #d9d7cc; }

/* --- 滚动条（夜间） --- */
@media (min-width: 861px) {
    html.dark { scrollbar-color: #4a483f transparent; }
    html.dark ::-webkit-scrollbar-thumb { background: #4a483f; border-color: var(--bg); }
    html.dark ::-webkit-scrollbar-thumb:hover { background: #5d5b52; }
}

/* --- 代码块：夜间再压暗一档，与纸面拉开层次 --- */
html.dark pre.sc-code,
html.dark .post-content pre,
html.dark .diary-text pre { background: #201f1b; }