/*
 * Theme Name: HLQ
 * Description: 深色主题，渐变色卡片
 * Version: 1.0.0
 * Author: HLQ
 */

/* ========================
   CSS 变量 - 深色主题
   ======================== */
:root {
    --bg-color: #2b2b2b;
    --bg-lighter: #333333;
    --bg-card: #3a3a3a;
    --text-color: #ffffff;
    --text-secondary: #bfbfbf;
    --text-muted: #888888;
    --link-color: #ffd466;
    --accent: #ffb347;
    --tag-color: #ffd466;
    --border-color: rgba(255, 255, 255, 0.12);
    --code-bg: #1e1e1e;
    --code-text: #e0e0e0;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    /* 浮动控件（MENU 按钮 / 搜索框） - 深色版本 */
    --floating-bg: rgba(60, 60, 60, 0.75);
    --floating-hover-bg: rgba(80, 80, 80, 0.9);
    --floating-border: rgba(255, 255, 255, 0.25);
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                 "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
    --font-serif: "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", Georgia, serif;
    --font-mono: "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas,
                 "Liberation Mono", Menlo, monospace;
}

/* 日间模式 */
body.theme-light {
    --bg-color: #ffffff;
    --bg-lighter: #f5f5f5;
    --bg-card: #eeeeee;
    --text-color: #222222;
    --text-secondary: #555555;
    --text-muted: #888888;
    --link-color: #c65d00;
    --accent: #e67e22;
    --tag-color: #c65d00;
    --border-color: rgba(0, 0, 0, 0.08);
    --code-bg: #f7f7f7;
    --code-text: #333333;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    /* 浮动控件 - 浅色版本（更浅、更柔、边框更分明） */
    --floating-bg: rgba(255, 255, 255, 0.85);
    --floating-hover-bg: rgba(245, 245, 245, 0.95);
    --floating-border: rgba(0, 0, 0, 0.15);
}

/* 日落模式（暖色调） */
body.theme-sunset {
    --bg-color: #3d2f1f;
    --bg-lighter: #4a3a27;
    --bg-card: #5a4730;
    --text-color: #fff4e0;
    --text-secondary: #e8d5a8;
    --text-muted: #c8a87a;
    --link-color: #ffc878;
    --accent: #ff9b50;
    --tag-color: #ffc878;
    --border-color: rgba(255, 200, 120, 0.15);
    --code-bg: #2a1f14;
    --code-text: #f0e4d0;
    /* 浮动控件 - 暖色调版本（琥珀色透明） */
    --floating-bg: rgba(90, 70, 45, 0.65);
    --floating-hover-bg: rgba(120, 90, 55, 0.85);
    --floating-border: rgba(255, 200, 120, 0.35);
}

/* ========================
   基础重置
   ======================== */
* {
    box-sizing: border-box;
}
*::before,
*::after {
    box-sizing: border-box;
}
html, body {
    margin: 0;
    padding: 0;
}
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.35s ease, color 0.35s ease;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

body.font-serif {
    font-family: var(--font-serif);
}

a {
    color: var(--link-color);
    text-decoration: none;
    transition: opacity 0.2s;
}
a:hover {
    opacity: 0.75;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
}
button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}
input {
    font-family: inherit;
}
::selection {
    background: var(--accent);
    color: #fff;
}

/* ========================
   MENU 按钮
   ======================== */
.menu-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1001;
    background: var(--floating-bg);
    border: 1.5px solid var(--floating-border);
    border-radius: 30px;
    padding: 8px 18px;
    color: var(--text-color);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.25s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.menu-btn:hover {
    background: var(--floating-hover-bg);
    transform: scale(1.03);
}
.menu-btn.active {
    background: var(--text-color);
    color: var(--bg-color);
}

/* ========================
   侧滑菜单
   ======================== */
.menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 999;
}
.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-menu {
    position: fixed;
    top: 0;
    left: -320px;
    width: 300px;
    height: 100vh;
    background: var(--bg-lighter);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.35);
    z-index: 1000;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.side-menu.active {
    left: 0;
}

.side-menu-header {
    padding: 40px 25px 25px;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}
.side-menu-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    object-fit: cover;
}
.side-menu-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color);
}
.side-menu-desc {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.side-menu-nav {
    padding: 15px 0;
    flex: 1;
}
.side-menu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.side-menu-nav li {
    margin: 0;
}
.side-menu-nav a {
    display: block;
    padding: 14px 25px;
    color: var(--text-secondary);
    font-size: 15px;
    transition: background 0.2s, color 0.2s;
}
.side-menu-nav a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-color);
}

.reader-settings {
    padding: 20px 25px;
    border-top: 1px solid var(--border-color);
}
.reader-title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.font-size-row,
.theme-mode-row,
.font-family-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.font-btn,
.mode-btn,
.font-family-btn {
    padding: 6px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
}
.font-btn:hover,
.mode-btn:hover,
.font-family-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-color);
}
.font-btn.active,
.mode-btn.active,
.font-family-btn.active {
    background: var(--accent);
    color: #fff;
}
.font-size-label {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 40px;
    text-align: center;
}

.side-menu-footer {
    padding: 15px 25px;
    border-top: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}
.side-menu-footer a {
    color: var(--text-muted);
}

/* ========================
   搜索框
   ======================== */
.search-box {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    display: flex;
    gap: 8px;
    align-items: center;
}
.search-box form {
    display: flex;
    gap: 8px;
}
.search-box input[type="text"] {
    background: var(--floating-bg);
    border: 1px solid var(--floating-border);
    border-radius: 20px;
    padding: 8px 16px;
    color: var(--text-color);
    font-size: 13px;
    width: 180px;
    outline: none;
    transition: border-color 0.2s, width 0.3s;
    backdrop-filter: blur(6px);
}
.search-box input[type="text"]:focus {
    border-color: var(--accent);
    width: 240px;
}
.search-box button {
    background: var(--floating-bg);
    border: 1px solid var(--floating-border);
    border-radius: 20px;
    padding: 8px 16px;
    color: var(--text-color);
    font-size: 13px;
    transition: all 0.2s;
}
.search-box button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

@media (max-width: 768px) {
    /* 手机端：默认隐藏搜索框 */
    .search-box {
        display: none;
    }
    /* 当菜单打开时（body 添加 menu-open 类），在底部显示搜索框 */
    body.menu-open .search-box {
        display: flex;
        top: auto;
        bottom: 20px;
        right: 20px;
        left: 20px;
        animation: slideUp 0.3s ease;
    }
    body.menu-open .search-box input[type="text"] {
        width: 100%;
    }
}

/* ========================
   Hero 区域
   ======================== */
.hero {
    position: relative;
    display: block;
    text-align: center;
    padding: 80px 20px 60px;
    overflow: hidden;
}
.hero-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(120, 80, 200, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(80, 150, 200, 0.22) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(200, 100, 80, 0.18) 0%, transparent 50%);
    z-index: 0;
}
.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}
.hero-title {
    margin: 0 0 15px;
    font-size: 34px;
    font-weight: 700;
    color: var(--text-color);
    letter-spacing: 1px;
}
.hero-subtitle {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

.hero-simple {
    padding: 60px 20px 40px;
}
.hero-simple .hero-title {
    font-size: 32px;
    margin-bottom: 12px;
}
.hero-simple .hero-subtitle {
    color: var(--text-secondary);
    letter-spacing: 1px;
    font-size: 15px;
}

/* ========================
   文章列表卡片
   ======================== */
.post-list-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

.post-card {
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.post-card-link {
    display: block;
    padding: 30px 35px;
    color: #ffffff !important;
}
.post-card-title {
    margin: 0 0 15px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
}
.post-card-excerpt {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    letter-spacing: 0.3px;
}

.post-card-meta {
    margin-top: 0;
    font-size: 13px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px;
}
.post-card-meta .meta-sep {
    opacity: 0.6;
}
.post-card-meta .meta-category a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 0;
    margin: 0;
}
.post-card-meta .meta-category a:hover {
    color: var(--accent);
}
.post-card-meta .meta-tag-list a {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.2s;
}
.post-card-meta .meta-tag-list a:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.post-card-meta .meta-tags {
    color: var(--tag-color);
    font-weight: 500;
}
.post-card-meta .meta-sep {
    opacity: 0.6;
}

.archive-title {
    margin: 0 0 25px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-secondary);
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
}

/* ========================
   分页（极简双按钮）
   ======================== */
.pagination {
    margin-top: 40px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}
.pagination .pager-prev,
.pagination .pager-next {
    flex: 0 0 auto;
}
.pagination a {
    display: inline-block;
    min-width: 104px;
    padding: 8px 24px;
    border: 1px solid var(--text-muted);
    border-radius: 24px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    letter-spacing: 1px;
    text-align: center;
    text-decoration: none;
    transition: all 0.2s ease;
}
.pagination a:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* ========================
   文章页头部
   ======================== */
.article-header {
    position: relative;
    padding: 80px 20px 60px;
    text-align: center;
    background: var(--bg-lighter);
    border-bottom: 1px solid var(--border-color);
}
.article-header-content {
    max-width: 860px;
    margin: 0 auto;
}
.article-title {
    margin: 0 0 20px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-color);
}
.article-meta {
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.article-meta .meta-tags {
    color: var(--tag-color);
}

/* ========================
   正文排版
   ======================== */
.article-main {
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

.post-content {
    font-size: 16px;
    line-height: 1.9;
    color: var(--text-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    margin: 1.8em 0 0.8em;
    line-height: 1.4;
    font-weight: 700;
    color: var(--text-color);
}
.post-content h1 { font-size: 26px; }
.post-content h2 {
    font-size: 22px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.post-content h3 { font-size: 18px; }
.post-content h4 { font-size: 16px; }

.post-content p {
    margin: 1em 0;
}

.post-content a {
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-color: rgba(255, 212, 102, 0.3);
}
.post-content a:hover {
    text-decoration-color: var(--link-color);
}

.post-content ul,
.post-content ol {
    padding-left: 1.8em;
    margin: 1em 0;
}
.post-content li {
    margin: 0.3em 0;
}

.post-content blockquote {
    margin: 1.5em 0;
    padding: 12px 20px;
    background: var(--bg-lighter);
    border-left: 4px solid var(--accent);
    color: var(--text-secondary);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.post-content blockquote p {
    margin: 0.3em 0;
}

.post-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2em 0;
}

.post-content img {
    border-radius: var(--radius);
    margin: 1em auto;
    box-shadow: var(--shadow);
}

/* 表格 */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 14px;
}
.post-content table th,
.post-content table td {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    text-align: left;
}
.post-content table th {
    background: var(--bg-lighter);
    font-weight: 600;
}

/* 行内代码 */
.post-content code:not(pre code) {
    background: var(--bg-lighter);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.88em;
}

/* 代码块 - 与插件高亮配合 */
.post-content pre {
    background: var(--code-bg) !important;
    color: var(--code-text) !important;
    border-radius: var(--radius) !important;
    padding: 16px !important;
    margin: 1.5em 0 !important;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.6;
    box-shadow: var(--shadow);
}
.post-content pre code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    font-size: inherit !important;
    display: block;
}

/* ========================
   文章标签 + 导航
   ======================== */
.post-tags {
    margin: 30px 0 20px;
    padding: 15px 20px;
    background: var(--bg-lighter);
    border-radius: var(--radius);
    font-size: 14px;
}
.post-tags .tags-label {
    color: var(--text-muted);
    margin-right: 10px;
}
.post-tags a {
    display: inline-block;
    margin: 3px 6px 3px 0;
    padding: 4px 12px;
    background: rgba(255, 212, 102, 0.15);
    border-radius: 20px;
    color: var(--tag-color);
    font-size: 13px;
}

.post-nav {
    margin: 30px 0;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.post-nav-prev,
.post-nav-next {
    flex: 1;
    min-width: 200px;
    background: var(--bg-lighter);
    border-radius: var(--radius);
    padding: 15px 20px;
}
.post-nav-next {
    text-align: right;
}
.post-nav a {
    color: var(--text-secondary);
    display: block;
}
.post-nav .nav-label {
    display: block;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 1px;
}
.post-nav .nav-title {
    font-size: 15px;
    color: var(--text-color);
}

/* ========================
   评论区
   ======================== */
.comments-area {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
}
.comments-title {
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 600;
}
.comments-count {
    color: var(--text-secondary);
}

/* ============ 评论区核心布局 ============ */

/* listComments() 默认输出 <ol class="comment-list"> */
.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
}

/* .comment-item = 一条评论 (li)
   它的直接子元素有三个：
     1. .comment-avatar      (头像, 左)
     2. .comment-body-inner  (评论内容, 右, 与头像同行)
     3. .comment-list        (子评论列表, 必须换行独占一整行)
   因此使用 flex-wrap: wrap 让第三个元素自动换行
*/
.comment-item {
    list-style: none;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
    gap: 12px;
}

/* 嵌套评论的子评论项 —— 更紧凑的间距和更小的头像 */
.comment-list .comment-list .comment-item {
    padding: 10px 0;
    border-bottom: none;
    gap: 10px;
}

/* 最顶层评论项保留底部横线 */
.comments-area > .comment-list > .comment-item {
    border-bottom: 1px solid var(--border-color);
}

/* 嵌套评论中的最后一项清除底部装饰，避免多余线条 */
.comment-list .comment-list .comment-item:last-child {
    padding-bottom: 0;
}

/* 头像：固定宽度，不伸缩 */
.comment-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea, #764ba2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    align-self: flex-start;
    box-sizing: border-box;
}
.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.avatar-fallback {
    font-size: 18px;
}

/* 嵌套评论的头像缩小 */
.comment-list .comment-list .comment-avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
}
.comment-list .comment-list .avatar-fallback {
    font-size: 15px;
}

/* 评论正文：占据头像右侧剩余空间 */
.comment-body-inner {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
}

/* 子评论列表：由 threadedComments() 输出，位于评论项内部
   关键：必须在父评论项的 flex 容器中换一行，独占整行 */
.comment-list .comment-list {
    list-style: none;
    margin: 2px 0 0 0;
    padding: 0 0 0 22px;
    border-left: 2px solid var(--border-color);
    /* flex 容器中独占整行 —— 这是修复错位的核心 */
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    display: block !important;
    clear: both;
}

/* Typecho 内建 JS 在移动表单时创建的占位元素 */
[id$="-holder"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    overflow: hidden !important;
}

/* 评论区内的链接不会被渲染成按钮形状 */
.comment-list a,
.comment-item a,
.comment-body-inner a {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    width: auto;
    height: auto;
    display: inline;
    color: var(--link-color);
}
.comment-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px;
}
.comment-author {
    font-weight: 600;
    color: var(--text-color);
    font-size: 14px;
}
.comment-reply a {
    color: var(--accent);
    font-size: 12px;
}
.comment-content {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.75;
}
.comment-content p {
    margin: 0.5em 0;
}

.comments-page-nav {
    text-align: center;
    margin: 20px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.comment-form {
    margin-top: 25px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

/* 回复评论时，Typecho 内建 JS 会把整个 #respond 移动到评论项内部
   此时 .comment-item 的 flex 容器会包含：
     1. .comment-avatar    (头像)
     2. .comment-body-inner (正文)
     3. #respond            (回复表单)
   其中 #respond 必须独占一行，不能跟头像/正文并列 */
.comment-item [id^="respond"],
.comment-list [id^="respond"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px 0 0 0;
    padding: 0;
    box-sizing: border-box;
    display: block !important;
}
.comment-form-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-color);
}
.comment-fields-grid,
.comment-fields-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.comment-fields-grid {
    width: 100%;
}
.comment-fields-grid textarea,
.comment-fields-row input {
    background: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 9px 12px;
    color: var(--text-color);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, background 0.2s;
    width: 100%;
    max-width: 100%;
    -webkit-appearance: none;
    appearance: none;
}
.comment-fields-grid textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.7;
}
.comment-fields-row input {
    flex: 1 1 140px;
    min-width: 0;
}
.comment-fields-grid textarea:focus,
.comment-fields-row input:focus {
    border-color: var(--accent);
}
.comment-user-info {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--text-secondary);
}
.comment-user-info a {
    color: var(--link-color);
}
.comment-submit {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 22px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}
.comment-submit:hover {
    opacity: 0.9;
}
.comment-submit:active {
    transform: translateY(1px);
}

/* Typecho 内建 JS 注入的取消回复链接 — 避免被误渲染为圆形按钮 */
.cancel-comment-reply {
    font-size: 12px;
    margin-bottom: 10px;
    color: var(--text-muted);
}
.cancel-comment-reply a,
#cancel-comment-reply-link {
    color: var(--accent);
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    display: inline;
    text-decoration: underline;
    cursor: pointer;
    width: auto;
    height: auto;
    font-size: 12px;
}

/* 兜底：确保 form 内所有原生控件遵循宽度策略 */
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--bg-lighter);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 9px 12px;
    color: var(--text-color);
    font-size: 13px;
    margin-bottom: 10px;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.comment-form textarea:focus,
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus {
    border-color: var(--accent);
}
.comment-form textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.7;
}
.comment-form input[type="submit"],
.comment-form button[type="submit"] {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 22px;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;
    width: auto;
    -webkit-appearance: none;
    appearance: none;
}
.comment-form input[type="submit"]:hover,
.comment-form button[type="submit"]:hover {
    opacity: 0.85;
}

.comments-closed {
    color: var(--text-muted);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* ========================
   页脚
   ======================== */
.site-footer {
    padding: 30px 20px;
    text-align: center;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 12px;
}
.footer-badges {
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.footer-badges .badge {
    background: var(--bg-lighter);
    padding: 4px 12px;
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
}
.footer-copyright {
    letter-spacing: 1px;
}

/* ========================
   404 页面
   ======================== */
.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}
.error-content {
    text-align: center;
}
.error-code {
    margin: 0 0 20px;
    font-size: 96px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.error-title {
    margin: 0 0 10px;
    font-size: 22px;
    color: var(--text-color);
}
.error-desc {
    margin: 0 0 25px;
    color: var(--text-muted);
    font-size: 14px;
}
.error-home {
    display: inline-block;
    padding: 10px 28px;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}
.error-home:hover {
    opacity: 0.85;
    color: #fff;
}

/* ========================
   响应式
   ======================== */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
    .menu-btn {
        top: 15px;
        left: 15px;
        padding: 7px 14px;
        font-size: 12px;
    }
    .hero {
        padding: 60px 15px 50px;
    }
    .hero-title {
        font-size: 26px;
        letter-spacing: 1px;
    }
    .hero-subtitle {
        font-size: 14px;
        letter-spacing: 1px;
    }
    .post-card-link {
        padding: 22px 22px;
    }
    .post-card-title {
        font-size: 18px;
    }
    .post-card-meta {
        font-size: 12px;
    }
    .article-header {
        padding: 60px 15px 45px;
    }
    .article-title {
        font-size: 24px;
    }
    .article-main {
        padding: 25px 15px 50px;
    }
    .post-content {
        font-size: 15px;
    }
    .post-content h1 { font-size: 22px; }
    .post-content h2 { font-size: 19px; }
    .post-content h3 { font-size: 17px; }
    .post-list-wrap {
        padding: 20px 15px 40px;
    }
    .archive-year-title { font-size: 22px !important; }
    .archive-list-item { padding: 8px 10px; }
    .archive-list-date { width: 48px; font-size: 14px; margin-right: 12px; }
    .archive-list-link { font-size: 15px; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 26px; }
    .hero-subtitle { font-size: 13px; letter-spacing: 1px; }
    .post-card-title { font-size: 17px; }
    .article-title { font-size: 20px; }
    .side-menu {
        width: 85%;
        max-width: 280px;
    }
}

/* ========================
   动画与过渡
   ======================== */
.post-card {
    animation: fadeInUp 0.45s ease both;
}
.post-card:nth-child(1) { animation-delay: 0.05s; }
.post-card:nth-child(2) { animation-delay: 0.1s; }
.post-card:nth-child(3) { animation-delay: 0.15s; }
.post-card:nth-child(4) { animation-delay: 0.2s; }
.post-card:nth-child(5) { animation-delay: 0.25s; }
.post-card:nth-child(6) { animation-delay: 0.3s; }
.post-card:nth-child(7) { animation-delay: 0.35s; }
.post-card:nth-child(8) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================
   卡片间距强制覆盖（最高优先级）
   ======================== */
.post-card-link .post-card-excerpt {
    display: block !important;
    margin: 0 0 2px !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
}

.post-card-link .post-card-meta {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
    font-size: 13px !important;
    gap: 3px !important;
    flex-wrap: wrap;
    align-items: center;
}

.post-card-link .post-card-meta > * {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.15 !important;
}

.post-card-link .post-card-meta .meta-sep {
    display: inline !important;
}

.post-card-link .post-card-meta .meta-category a {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}

.post-card-link .post-card-meta .meta-tag-list a {
    display: inline-block !important;
    padding: 1px 6px !important;
    margin: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 10px !important;
    font-size: 12px !important;
}

.post-card-link a,
.post-card-link a:visited,
.post-card-link a:hover,
.post-card-link a:active {
    color: rgba(255, 255, 255, 0.85) !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* ====== 文章归档列表 ====== */
.archive-year-title {
    margin: 26px 0 10px !important;
    padding-bottom: 6px;
    font-size: 28px !important;
    font-weight: 400 !important;
    color: var(--text-color) !important;
    border-bottom: none !important;
}
.archive-year-title:first-child {
    margin-top: 0 !important;
}
.archive-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 0 8px !important;
}
.archive-list-item {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    margin: 2px 0 !important;
    border-radius: 4px;
    transition: background 0.15s ease;
}
.archive-list-item:hover {
    background: var(--bg-lighter);
}
.archive-list-date {
    flex-shrink: 0;
    width: 56px;
    font-size: 15px;
    color: var(--text-secondary);
    margin-right: 16px;
    font-variant-numeric: tabular-nums;
}
.archive-list-link {
    flex: 1;
    color: var(--text-color) !important;
    text-decoration: none !important;
    font-size: 16px;
    line-height: 1.5;
    transition: color 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.archive-list-link:hover {
    color: var(--accent, #ffd466) !important;
    text-decoration: none !important;
}

/* ===== 友情链接页面 ===== */
.links-page-list {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
.links-page-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-lighter, #f5f5f5);
    border-radius: 8px;
    transition: all 0.2s ease;
}
.links-page-item:hover {
    background: var(--bg-hover, #f0f0f0);
    transform: translateY(-2px);
}
.links-page-icon-wrap {
    flex-shrink: 0;
    margin-right: 14px;
}
.links-page-icon {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
}
.links-page-initials {
    background: var(--accent, #ffd466);
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
}
.links-page-text {
    flex: 1;
    min-width: 0;
}
.links-page-title {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color) !important;
    text-decoration: none !important;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.links-page-title:hover {
    color: var(--accent, #ffd466) !important;
}
.links-page-desc {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .links-page-list {
        grid-template-columns: 1fr;
    }
}