/* ==========================================================================
   车长不二 · 深空终端 HUD (Deep Space Terminal)
   Design tokens -> components. 覆盖 main.min.css 的视觉层，布局结构不变。
   ========================================================================== */

/* ---------- 1. Design Tokens ---------- */
.theme--dark {
    /* surface */
    --bg-deep: #05070d;
    --bg: #070b14;
    --panel: #0a101c;
    --card: #0d1524;
    --card-hover: #101a2e;
    --elev: #141f33;
    /* lines */
    --border: rgba(148, 163, 184, .14);
    --border-strong: rgba(34, 211, 238, .42);
    --grid-line: rgba(148, 163, 184, .055);
    /* text */
    --text: #e6edf3;
    --text-2: #a7b8cc;
    --text-3: #8494ab;
    /* accent */
    --accent: #22d3ee;
    --accent-strong: #67e8f9;
    --accent-2: #3b82f6;
    --accent-dim: rgba(34, 211, 238, .10);
    --accent-dim-2: rgba(59, 130, 246, .10);
    --on-accent: #052a33;
    /* status */
    --ok: #34d399;
    --warn: #fbbf24;
    --danger: #f87171;
    /* misc */
    --header-blur: rgba(7, 11, 20, .72);
    --zoom-overlay: rgba(5, 7, 13, .92);
    --glow: 0 0 0 1px rgba(34, 211, 238, .18), 0 10px 34px rgba(2, 12, 27, .55);
    color-scheme: dark;
}

.theme--light {
    --bg-deep: #e8eef5;
    --bg: #f4f7fb;
    --panel: #ffffff;
    --card: #ffffff;
    --card-hover: #f0f6fd;
    --elev: #eef2f8;
    --border: rgba(15, 23, 42, .12);
    --border-strong: rgba(8, 145, 178, .5);
    --grid-line: rgba(15, 23, 42, .045);
    --text: #0f172a;
    --text-2: #3f5066;
    --text-3: #5b6b80;
    --accent: #0891b2;
    --accent-strong: #0e7490;
    --accent-2: #2563eb;
    --accent-dim: rgba(8, 145, 178, .08);
    --accent-dim-2: rgba(37, 99, 235, .07);
    --on-accent: #ffffff;
    --ok: #059669;
    --warn: #b45309;
    --danger: #dc2626;
    --header-blur: rgba(244, 247, 251, .78);
    --zoom-overlay: rgba(244, 247, 251, .94);
    --glow: 0 0 0 1px rgba(8, 145, 178, .14), 0 10px 30px rgba(15, 23, 42, .08);
    color-scheme: light;
}

/* ---------- 2. Fonts ---------- */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --font-sans: 'JetBrains Mono', pinghei, 'PingFang SC', 'Helvetica Neue', 'Work Sans', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
    --radius: 10px;
    --radius-sm: 6px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --ease: cubic-bezier(.25, .46, .45, .94);
}

/* ---------- 3. Base ---------- */
.html {
    -webkit-font-smoothing: antialiased;
}

.theme--dark .body,
.theme--light .body {
    font-family: var(--font-sans);
    color: var(--text);
    background-color: var(--bg);
    background-image:
        radial-gradient(1100px 520px at 78% -8%, var(--accent-dim-2), transparent 62%),
        radial-gradient(820px 460px at 4% 6%, var(--accent-dim), transparent 55%),
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
    background-attachment: fixed;
}

/* 关闭背景网格（保留光晕） */
.theme--dark .body.no-grid,
.theme--light .body.no-grid {
    background-image:
        radial-gradient(1100px 520px at 78% -8%, var(--accent-dim-2), transparent 62%),
        radial-gradient(820px 460px at 4% 6%, var(--accent-dim), transparent 55%);
    background-size: auto, auto;
}

::selection {
    background: var(--accent);
    color: var(--on-accent);
}

*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--elev);
    border: 2px solid var(--bg-deep);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ---------- 4. Header / Nav ---------- */
.theme--dark .header,
.theme--light .header {
    /* NAV-MOBILE-FIX: 顶栏必须在最上层。
       main.min.css 只给了 .header{z-index:1}，而列表卡片封面上的
       .post__overlay-content 是 z-index:2、.post__thumbnail-wrapper::before 是 z-index:3，
       它们的祖先 .post 是 position:relative + z-index:auto（不构成层叠上下文），
       所以滚动时文章标题/摘要会盖在固定顶栏之上，导航按钮被压在下面点不到。
       抬到 60：高于卡片叠加层(2/3)与右下浮动按钮(50)，低于图片放大层(100)。 */
    z-index: 60;
    background: var(--header-blur);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.theme--dark .header::after,
.theme--light .header::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
    opacity: .55;
}

.theme--dark .nav__list,
.theme--light .nav__list {
    background: transparent;
}

.theme--dark .nav__list-item,
.theme--light .nav__list-item {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.theme--dark .nav__link,
.theme--light .nav__link {
    color: var(--text-2);
    transition: color .2s var(--ease);
}

.theme--dark .nav__link:hover,
.theme--light .nav__link:hover {
    color: var(--accent-strong);
}

.theme--dark .nav__link--active,
.theme--light .nav__link--active {
    color: var(--accent);
}

@media screen and (min-width: 961px) {
    .theme--dark .nav__link--active,
    .theme--light .nav__link--active {
        border-bottom: 1px solid var(--accent);
        box-shadow: 0 10px 18px -14px var(--accent);
    }
}

/* optionswitch dropdown */
.theme--dark .optionswitch__list,
.theme--light .optionswitch__list {
    background: var(--elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--glow);
    padding: 6px;
}

.theme--dark .optionswitch__list-item,
.theme--light .optionswitch__list-item {
    color: var(--text-2);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 1.25rem;
}

.theme--dark .optionswitch__list-item:hover,
.theme--light .optionswitch__list-item:hover {
    color: var(--accent);
    background: var(--accent-dim);
}

/* search */
.theme--dark .nav__search-input,
.theme--light .nav__search-input {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    color: var(--text);
    background: var(--card);
    border-color: var(--border);
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.theme--dark .nav__search-input:focus,
.theme--light .nav__search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
    outline: none;
}

.theme--dark .nav__search-btn,
.theme--light .nav__search-btn {
    color: var(--accent);
    background: var(--elev);
    border-color: var(--border);
    transition: background .2s var(--ease), color .2s var(--ease);
}

.theme--dark .nav__search-btn:hover,
.theme--light .nav__search-btn:hover {
    background: var(--accent);
    color: var(--on-accent);
}

/* navbar burger */
.theme--dark .navbar-burger__line,
.theme--light .navbar-burger__line {
    background-color: var(--text);
}

/* ---------- 5. Sidebar ---------- */
@media screen and (min-width: 961px) {
    .theme--dark .sidebar,
    .theme--light .sidebar {
        border-right: 1px solid var(--border);
        background: linear-gradient(180deg, var(--panel), transparent 60%);
    }
}

.theme--dark .sidebar__introduction-profileimage,
.theme--light .sidebar__introduction-profileimage {
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    box-shadow: 0 0 0 5px var(--accent-dim), 0 0 30px -6px var(--accent);
}

.theme--dark .sidebar__introduction-title,
.theme--light .sidebar__introduction-title {
    font-family: var(--font-mono);
    font-size: 2rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin: 1em 0 .4em;
}

.theme--dark .sidebar__introduction-title a,
.theme--light .sidebar__introduction-title a {
    color: var(--text);
    font-size: 2rem;
}

.theme--dark .sidebar__introduction-title a:hover,
.theme--light .sidebar__introduction-title a:hover {
    color: var(--accent);
}

.theme--dark .sidebar__introduction-description,
.theme--light .sidebar__introduction-description {
    color: var(--text-2);
    font-size: 1.4rem;
    line-height: 1.7;
}

/* footer in sidebar */
.theme--dark .footer__item,
.theme--light .footer__item {
    color: var(--text-3);
}

.theme--dark .footer a,
.theme--light .footer a {
    color: var(--text-3);
}

.theme--dark .footer a:hover,
.theme--light .footer a:hover {
    color: var(--accent);
}

/* ---------- 6. Post Cards (list + single) ---------- */
.theme--dark .post,
.theme--light .post {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 2px 14px rgba(2, 12, 27, .18);
    margin: 24px 30px;
    overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}

.theme--dark .post:hover,
.theme--light .post:hover {
    border-color: var(--border-strong);
    box-shadow: var(--glow);
    transform: translateY(-2px);
}

.theme--dark .post__content,
.theme--light .post__content {
    padding: 24px 26px 10px;
}

/* list card title */
.theme--dark .post__title,
.theme--light .post__title {
    margin: 0 0 6px;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .01em;
}

.theme--dark .post__title a,
.theme--light .post__title a {
    color: var(--text);
    text-decoration: none;
    transition: color .2s var(--ease);
}

.theme--dark .post__title a:hover,
.theme--light .post__title a:hover {
    color: var(--accent);
}

/* list card excerpt */
.theme--dark .post__excerpt,
.theme--light .post__excerpt {
    color: var(--text-2);
    font-size: 1.4rem;
    line-height: 1.75;
    margin: 0;
}

/* cover */
.theme--dark .post__thumbnail-wrapper,
.theme--light .post__thumbnail-wrapper {
    position: relative;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
}

.theme--dark .post__thumbnail,
.theme--light .post__thumbnail {
    width: 100%;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .5s var(--ease);
}

.theme--dark .post:hover .post__thumbnail,
.theme--light .post:hover .post__thumbnail {
    transform: scale(1.02);
}

/* overlay: gradient + floating title */
.post__overlay-content {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    padding: 70px 26px 20px;
    background: linear-gradient(to top, rgba(3, 7, 16, .92) 0%, rgba(3, 7, 16, .55) 42%, transparent 100%);
}

.post__overlay-content .post__title {
    margin-bottom: 4px;
}

.post__overlay-content .post__title a {
    color: #f2f8ff;
}

.post__overlay-content .post__title a:hover {
    color: var(--accent-strong);
}

.post__overlay-content .post__excerpt {
    color: rgba(226, 236, 248, .82);
}

/* top-left HUD tick on cover */
.post__thumbnail-wrapper::before {
    content: "";
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    width: 34px;
    height: 8px;
    border-top: 2px solid var(--accent);
    border-left: 2px solid var(--accent);
    opacity: .9;
    pointer-events: none;
}

/* footer meta bar */
.theme--dark .post__footer,
.theme--light .post__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 14px 26px 18px;
    margin: 0;
    background: transparent;
    border: none;
}

.theme--dark .post__footer em,
.theme--light .post__footer em {
    color: var(--text-3);
}

.theme--dark .post__footer-date,
.theme--light .post__footer-date,
.post__date {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    letter-spacing: .06em;
    color: var(--text-3);
    text-transform: uppercase;
    margin: 0;
}

.theme--dark .post__footer a.tag,
.theme--light .post__footer a.tag,
.theme--dark a.tag,
.theme--light a.tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 1.2rem;
    letter-spacing: .04em;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 3px 11px;
    margin: 0;
    text-decoration: none;
    transition: all .2s var(--ease);
}

.theme--dark .post__footer a.tag:hover,
.theme--light .post__footer a.tag:hover {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
}

/* category chip uses .tag via bloglist_sort */
.post__footer a.tag {
    border-color: var(--border-strong);
}

/* 置顶 badge */
.log-topflg {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    letter-spacing: .08em;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 3px;
    padding: 2px 7px;
    text-transform: uppercase;
}

/* single post */
.theme--dark .post__content h1,
.theme--light .post__content h1 {
    color: var(--text);
    font-size: 3rem;
    line-height: 1.25;
    margin: 0 0 12px;
    letter-spacing: .01em;
}

.theme--dark .post__content a,
.theme--light .post__content a {
    color: var(--accent);
}

.theme--dark .post__content a:hover,
.theme--light .post__content a:hover {
    color: var(--accent-strong);
}

/* post meta (single) */
.theme--dark .post__meta,
.theme--light .post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    list-style: none;
    padding: 0 0 4px;
    margin: 0 0 8px;
    border-bottom: 1px solid var(--border);
}

.theme--dark .post__meta-item,
.theme--light .post__meta-item {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    color: var(--text-3);
    letter-spacing: .05em;
}

.theme--dark .post__meta-icon,
.theme--light .post__meta-icon {
    color: var(--accent);
    margin-right: 6px;
}

.theme--dark .post__meta a.tag,
.theme--light .post__meta a.tag {
    font-size: 1.15rem;
    margin: 2px 6px 2px 0;
}

/* visible breadcrumb */
.post__breadcrumb {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    letter-spacing: .04em;
    color: var(--text-3);
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px dashed var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.post__breadcrumb a {
    color: var(--text-2);
    text-decoration: none;
}

.post__breadcrumb a:hover {
    color: var(--accent);
}

.post__breadcrumb .sep {
    color: var(--text-3);
    opacity: .6;
}

/* ---------- 7. Pagination ---------- */
.theme--dark .pagination,
.theme--light .pagination {
    margin: 8px 30px 40px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.theme--dark .pagination>a,
.theme--dark .pagination>span,
.theme--dark .pagination>em,
.theme--light .pagination>a,
.theme--light .pagination>span,
.theme--light .pagination>em {
    font-family: var(--font-mono);
    min-width: 38px;
    height: 38px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-sizing: border-box;
    transition: all .2s var(--ease);
}

.theme--dark .pagination>a,
.theme--light .pagination>a {
    color: var(--text-2);
    background: var(--card);
}

.theme--dark .pagination>a:hover,
.theme--light .pagination>a:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
    transform: translateY(-1px);
}

.theme--dark .pagination>span,
.theme--light .pagination>span {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 18px -4px var(--accent);
    font-weight: 700;
}

.theme--dark .pagination>em,
.theme--light .pagination>em {
    color: var(--text-3);
    border: 0;
    background: transparent;
}

/* ---------- 8. Floating Tools ---------- */
.theme--dark .floating-tools__btn,
.theme--light .floating-tools__btn {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--header-blur);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--text-2);
    box-shadow: 0 8px 22px rgba(2, 12, 27, .35);
    transition: all .2s var(--ease);
}

.theme--dark .floating-tools__btn:hover,
.theme--light .floating-tools__btn:hover {
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim), 0 8px 22px rgba(2, 12, 27, .35);
    transform: translateY(-2px);
}

.theme--dark .floating-tools__btn:focus-visible,
.theme--light .floating-tools__btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ---------- 9. Sidebar Widgets ---------- */
.theme--dark .widget,
.theme--light .widget {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin: 0 30px 22px;
}

.theme--dark .widget-title,
.theme--light .widget-title {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.theme--dark .widget-title::before,
.theme--light .widget-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 42px;
    height: 2px;
    background: var(--accent);
}

.theme--dark .widget-title h3,
.theme--light .widget-title h3 {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0;
}

.theme--dark .widget-list a,
.theme--light .widget-list a,
.theme--dark .blog-lates a,
.theme--light .blog-lates a,
.theme--dark .blog-hot a,
.theme--light .blog-hot a,
.theme--dark .log-classify-f a,
.theme--light .log-classify-f a,
.theme--dark .comment-info a,
.theme--light .comment-info a,
.theme--dark .bloggerinfo a,
.theme--light .bloggerinfo a {
    color: var(--text-2);
    font-size: 1.4rem;
    line-height: 1.9;
    transition: color .2s var(--ease);
}

.theme--dark .widget-list a:hover,
.theme--light .widget-list a:hover,
.theme--dark .blog-lates a:hover,
.theme--light .blog-lates a:hover,
.theme--dark .blog-hot a:hover,
.theme--light .blog-hot a:hover,
.theme--dark .log-classify-f a:hover,
.theme--light .log-classify-f a:hover,
.theme--dark .comment-info a:hover,
.theme--light .comment-info a:hover,
.theme--dark .bloggerinfo a:hover,
.theme--light .bloggerinfo a:hover {
    color: var(--accent);
}

.theme--dark .comment-info,
.theme--light .comment-info {
    color: var(--text-2);
    font-size: 1.3rem;
}

.theme--dark .comm-lates-name,
.theme--light .comm-lates-name {
    color: var(--text);
    font-weight: 600;
}

.theme--dark .logcom-latest-time,
.theme--light .logcom-latest-time {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    color: var(--text-3);
}

.theme--dark .comment-info_img,
.theme--light .comment-info_img {
    border-radius: 50%;
    border: 1px solid var(--border);
}

/* tag cloud */
.theme--dark .tags-side,
.theme--light .tags-side {
    color: var(--accent);
    background: var(--accent-dim);
    border-radius: 4px;
    padding: 1px 7px;
    margin: 2px 2px;
    display: inline-block;
    transition: all .2s var(--ease);
}

.theme--dark .tags-side:hover,
.theme--light .tags-side:hover {
    color: var(--on-accent);
    background: var(--accent);
}

/* archive select */
.theme--dark .archive,
.theme--light .archive {
    width: 100%;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    color: var(--text);
    background: var(--elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}

/* blogger */
.theme--dark .bloggerinfo-img,
.theme--light .bloggerinfo-img {
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.theme--dark .bloginfo-name,
.theme--light .bloginfo-name {
    font-family: var(--font-mono);
    letter-spacing: .1em;
    color: var(--text);
}

.theme--dark .bloginfo-descript,
.theme--light .bloginfo-descript {
    color: var(--text-2);
    font-size: 1.3rem;
    line-height: 1.7;
}

/* calendar widget */
.theme--dark #calendar,
.theme--light #calendar {
    color: var(--text-2);
    font-size: 1.3rem;
}

/* ---------- 10. Markdown Content ---------- */
.theme--dark .markdown,
.theme--light .markdown {
    color: var(--text);
    font-size: 1.55rem;
    line-height: 1.9;
}

.theme--dark .markdown h1,
.theme--dark .markdown h2,
.theme--light .markdown h1,
.theme--light .markdown h2 {
    color: var(--text);
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
    position: relative;
}

.theme--dark .markdown h2::before,
.theme--light .markdown h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 2px;
    background: var(--accent);
}

.theme--dark .markdown h3,
.theme--dark .markdown h4,
.theme--light .markdown h3,
.theme--light .markdown h4 {
    color: var(--text);
}

.theme--dark .markdown h3,
.theme--light .markdown h3 {
    padding-left: 12px;
    border-left: 3px solid var(--accent);
    line-height: 1.5;
}

.theme--dark .markdown strong,
.theme--light .markdown strong {
    color: var(--text);
}

.theme--dark .markdown a,
.theme--light .markdown a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--border-strong);
}

.theme--dark .markdown a:hover,
.theme--light .markdown a:hover {
    color: var(--accent-strong);
}

.theme--dark .markdown blockquote,
.theme--light .markdown blockquote {
    color: var(--text-2);
    border-left: 3px solid var(--accent);
    background: var(--accent-dim);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 12px 18px;
    margin: 18px 0;
    font-style: normal;
}

.theme--dark .markdown code,
.theme--light .markdown code {
    font-family: var(--font-mono);
    font-size: .92em;
    color: var(--accent-strong);
    background: var(--accent-dim);
    border-radius: 4px;
    padding: 2px 6px;
    margin: 0 2px;
}

.theme--dark .markdown pre,
.theme--light .markdown pre {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    line-height: 1.7;
    color: #d7e2f0;
    background: #0a0f1a;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    overflow: auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.theme--dark .markdown pre code,
.theme--light .markdown pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    margin: 0;
}

.theme--dark .markdown table,
.theme--light .markdown table {
    width: 100%;
    border-collapse: collapse;
    margin: 18px 0;
    display: table;
}

.theme--dark .markdown th,
.theme--light .markdown th {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
    background: var(--accent-dim);
    border: 1px solid var(--border);
    padding: 9px 14px;
}

.theme--dark .markdown td,
.theme--light .markdown td {
    border: 1px solid var(--border);
    padding: 9px 14px;
    color: var(--text-2);
}

.theme--dark .markdown tr:nth-child(even) td,
.theme--light .markdown tr:nth-child(even) td {
    background: var(--accent-dim-2);
}

.theme--dark .markdown img,
.theme--light .markdown img {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    max-width: 100%;
    height: auto;
}

.theme--dark .markdown hr,
.theme--light .markdown hr {
    border: none;
    border-top: 1px dashed var(--border);
    margin: 26px 0;
}

.theme--dark .markdown ul li,
.theme--dark .markdown ol li,
.theme--light .markdown ul li,
.theme--light .markdown ol li {
    color: var(--text-2);
    line-height: 1.9;
}

.theme--dark .markdown ul li::marker,
.theme--light .markdown ul li::marker {
    color: var(--accent);
}

/* syntax highlight container (markupHighlight) */
.theme--dark .chroma,
.theme--light .chroma {
    background: #0a0f1a;
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

/* ---------- 11. Comments ---------- */
.theme--dark .comment-header,
.theme--light .comment-header {
    color: var(--text);
    font-family: var(--font-mono);
    letter-spacing: .1em;
    margin: 30px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.theme--dark .comment,
.theme--light .comment {
    color: var(--text-2);
    margin: 30px;
}

.theme--dark .comment .avatar img,
.theme--light .comment .avatar img {
    border-radius: 50%;
    border: 1px solid var(--border);
}

.theme--dark .comment-infos b,
.theme--light .comment-infos b {
    color: var(--text);
}

.theme--dark .comment-time,
.theme--light .comment-time {
    font-family: var(--font-mono);
    font-size: 1.15rem;
    color: var(--text-3);
}

.theme--dark .comment-content,
.theme--light .comment-content {
    color: var(--text-2);
    font-size: 1.4rem;
    line-height: 1.8;
}

.theme--dark .comment-replay-btn,
.theme--light .comment-replay-btn,
.theme--dark .com-reply,
.theme--light .com-reply {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--accent);
    background: var(--accent-dim);
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 14px;
    cursor: pointer;
    transition: all .2s var(--ease);
}

.theme--dark .comment-replay-btn:hover,
.theme--light .comment-replay-btn:hover {
    color: var(--on-accent);
    background: var(--accent);
}

/* comment form */
.theme--dark .commentform .form-control,
.theme--light .commentform .form-control,
.theme--dark .commentform input,
.theme--light .commentform input,
.theme--dark .commentform textarea,
.theme--light .commentform textarea {
    font-family: var(--font-sans);
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.theme--dark .commentform .form-control:focus,
.theme--light .commentform .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
    outline: none;
}

.theme--dark .commentform .btn,
.theme--light .commentform .btn {
    font-family: var(--font-mono);
    color: var(--on-accent);
    background: var(--accent);
    border: none;
    border-radius: 999px;
    padding: 10px 26px;
    cursor: pointer;
    transition: all .2s var(--ease);
}

.theme--dark .commentform .btn:hover,
.theme--light .commentform .btn:hover {
    background: var(--accent-strong);
    box-shadow: 0 0 20px -4px var(--accent);
}

/* modal (verify code) */
.theme--dark .modal .modal-content,
.theme--light .modal .modal-content {
    background: var(--elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}

.theme--dark .lock-screen,
.theme--light .lock-screen {
    background: rgba(5, 7, 13, .6);
}

/* zoom overlay */
.theme--dark .medium-zoom-overlay,
.theme--light .medium-zoom-overlay {
    background: var(--zoom-overlay);
}

/* ---------- 12. Notice / Alert ---------- */
.theme--dark .notice,
.theme--light .notice {
    border-radius: var(--radius-sm);
}

.theme--dark .notice__title,
.theme--light .notice__title {
    font-family: var(--font-mono);
    letter-spacing: .08em;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 0 0 0 4px;
}

/* ---------- 13. Standalone pages (404 / password) ---------- */
.page-standalone {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.page-standalone__card {
    width: 100%;
    max-width: 520px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--glow);
    padding: 44px 36px;
    text-align: center;
    position: relative;
}

.page-standalone__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.page-standalone__code {
    font-family: var(--font-mono);
    font-size: 5.6rem;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--accent);
    line-height: 1;
    margin: 0 0 12px;
    text-shadow: 0 0 34px var(--accent-dim);
}

.page-standalone__hud {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 0 0 18px;
}

.page-standalone__msg {
    color: var(--text-2);
    font-size: 1.5rem;
    line-height: 1.8;
    margin: 0 0 26px;
}

.page-standalone__btn {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-accent);
    background: var(--accent);
    border-radius: 999px;
    padding: 11px 30px;
    text-decoration: none;
    transition: all .2s var(--ease);
}

.page-standalone__btn:hover {
    background: var(--accent-strong);
    box-shadow: 0 0 24px -4px var(--accent);
    color: var(--on-accent);
}

/* password form */
.page-standalone__form {
    text-align: left;
    margin-top: 8px;
}

.page-standalone__label {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
    display: block;
    margin-bottom: 8px;
}

.page-standalone__input {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 16px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

.page-standalone__input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
    outline: none;
}

.page-standalone__actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.page-standalone__back {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--text-3);
    text-decoration: none;
    transition: color .2s var(--ease);
}

.page-standalone__back:hover {
    color: var(--accent);
}

/* ---------- 14. Motion & Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .theme--dark .post,
    .theme--light .post {
        transform: none !important;
    }
}

/* ---------- 15. Responsive ---------- */
@media (max-width: 960px) {
    .theme--dark .body,
    .theme--light .body {
        background-attachment: scroll;
    }

    .theme--dark .post,
    .theme--light .post {
        margin: 16px 14px;
    }

    .theme--dark .post__title,
    .theme--light .post__title {
        font-size: 1.8rem;
    }

    .theme--dark .post__thumbnail,
    .theme--light .post__thumbnail {
        aspect-ratio: 16 / 9;
    }

    .post__overlay-content {
        padding: 44px 18px 14px;
    }

    .theme--dark .post__content,
    .theme--light .post__content {
        padding: 18px 18px 8px;
    }

    .theme--dark .post__footer,
    .theme--light .post__footer {
        padding: 12px 18px 16px;
    }

    .theme--dark .widget,
    .theme--light .widget {
        margin: 0 14px 16px;
    }

    .theme--dark .pagination,
    .theme--light .pagination {
        margin: 6px 14px 28px;
    }

    .theme--dark .comment,
    .theme--light .comment,
    .theme--dark .comment-header,
    .theme--light .comment-header {
        margin: 18px 14px;
    }

    .page-standalone__card {
        padding: 34px 22px;
    }
}

/* NAV-MOBILE-FIX: 手机端列表卡片的封面是固定比例盒子，标题/摘要是绝对定位叠在上面，
   内容比封面高时会被 .post__thumbnail-wrapper 的 overflow:hidden 从**顶部**裁掉 —— 表现为
   「文章标题显示不全」。这里在手机端改用 grid 让图片与文字共用同一格，盒子高度取两者较大值：
   视觉不变（仍是封面 + 底部渐变 + 浮动标题），但再长的标题也会完整撑开，不再被裁。 */
@media (max-width: 960px) {
    .post__thumbnail-wrapper {
        display: grid;
    }

    .post__thumbnail-wrapper > a {
        grid-area: 1 / 1;
    }

    .post__overlay-content {
        grid-area: 1 / 1;
        position: static;
        align-self: end;
        inset: auto;
    }
}

@media (max-width: 480px) {
    .theme--dark .post__content h1,
    .theme--light .post__content h1 {
        font-size: 2.4rem;
    }

    .page-standalone__code {
        font-size: 5rem;
    }
}

/* ---------- 文章页：保存为图片按钮 ---------- */
.theme--dark .post__tools,
.theme--light .post__tools {
    display: flex;
    justify-content: flex-end;
    padding: 4px 26px 18px;
}

.theme--dark .post__tool-btn,
.theme--light .post__tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font: 600 13px/1 var(--font-sans);
    letter-spacing: .03em;
    color: var(--accent-strong);
    background: var(--accent-dim);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: box-shadow .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
}

.theme--dark .post__tool-btn:hover,
.theme--light .post__tool-btn:hover {
    background: var(--accent-dim-2);
    box-shadow: 0 0 0 1px var(--border-strong), 0 6px 18px rgba(34, 211, 238, .18);
    transform: translateY(-1px);
}

.theme--dark .post__tool-btn:disabled,
.theme--light .post__tool-btn:disabled {
    opacity: .6;
    cursor: wait;
    transform: none;
}

@media (max-width: 640px) {
    .theme--dark .post__tools,
    .theme--light .post__tools {
        padding: 4px 16px 14px;
    }
}

/* ---------- 文章分享卡（保存为图片输出） ----------
   注意：卡片全部使用显式颜色值（不依赖 CSS 变量），确保 html-to-image 导出时
   不受主题类/变量继承影响，始终为深色底 + 白色/浅色文字的高对比可读样式。 */
.share-card {
    box-sizing: border-box;
    width: 750px;
    padding: 44px 46px 40px;
    display: flex;
    flex-direction: column;
    font-family: 'JetBrains Mono', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
    color: #f2f6fc;
    background:
        radial-gradient(640px 300px at 88% -6%, rgba(34, 211, 238, .10), transparent 60%),
        radial-gradient(520px 280px at -4% 12%, rgba(34, 211, 238, .06), transparent 55%),
        #0a1420;
    border: 1px solid rgba(148, 163, 184, .24);
}

.share-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.share-card__site {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #22d3ee;
}

.share-card__tag {
    font-size: 18px;
    color: #9fb4cc;
    border: 1px solid rgba(34, 211, 238, .45);
    border-radius: 999px;
    padding: 6px 14px;
    background: rgba(34, 211, 238, .10);
}

.share-card__title {
    margin: 22px 0 0;
    font-size: 40px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: .01em;
    color: #ffffff;
}

.share-card__cover {
    margin-top: 26px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(34, 211, 238, .45);
    background: linear-gradient(135deg, #0e1a2c, #12243c);
}

.share-card__cover img {
    display: block;
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.share-card__cover--empty {
    height: 380px;
}

.share-card__summary {
    margin: 26px 0 0;
    font-size: 26px;
    line-height: 1.7;
    color: #b8c8dc;
}

.share-card__footer {
    margin-top: auto;
    padding-top: 32px;
    display: flex;
    align-items: center;
    gap: 26px;
    border-top: 1px dashed rgba(148, 163, 184, .32);
}

.share-card__qr {
    flex: none;
    width: 168px;
    height: 168px;
    padding: 10px;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 12px;
}

.share-card__qr img {
    display: block;
    width: 100%;
    height: 100%;
}

.share-card__qrtext {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.share-card__qrtext strong {
    font-size: 28px;
    color: #22d3ee;
    letter-spacing: .04em;
}

.share-card__qrtext span {
    font-size: 19px;
    line-height: 1.5;
    color: #8fa3ba;
    word-break: break-all;
}