/* ===========================================================
 * VPS Tech theme - main.css
 * 轻量化 SEO 主题样式,语义化结构,无冗余
 * =========================================================== */

:root {
    --vpst-primary: #1e40af;
    --vpst-primary-dark: #1e3a8a;
    --vpst-primary-light: #3b82f6;
    --vpst-accent: #f59e0b;
    --vpst-text: #1f2937;
    --vpst-text-soft: #4b5563;
    --vpst-border: #e5e7eb;
    --vpst-bg: #ffffff;
    --vpst-bg-soft: #f8fafc;
    --vpst-bg-page: linear-gradient(180deg, #f5f7fb 0%, #ffffff 360px);
    --vpst-link: #1d4ed8;
    --vpst-link-hover: #b91c1c;
    --vpst-radius: 6px;
    --vpst-radius-lg: 10px;
    --vpst-shadow: 0 1px 2px rgba(0,0,0,.04);
    --vpst-shadow-hover: 0 10px 30px rgba(30,64,175,.12);
    --vpst-container: 1200px;
    --vpst-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --vpst-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--vpst-bg-page);
    color: var(--vpst-text);
    font: 16px/1.7 var(--vpst-font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--vpst-link); text-decoration: none; transition: color .15s; }
a:hover { color: var(--vpst-link-hover); }

img { max-width: 100%; height: auto; vertical-align: middle; }

h1, h2, h3, h4 { line-height: 1.3; margin: .6em 0; font-weight: 700; }
h1 { font-size: 1.9em; }
h2 { font-size: 1.45em; }
h3 { font-size: 1.2em; }

p { margin: .8em 0; }

code, pre { font-family: var(--vpst-mono); background: #f1f5f9; border-radius: 4px; }
code { padding: 2px 6px; font-size: .92em; }
pre { padding: 14px; overflow-x: auto; }
pre code { background: transparent; padding: 0; }

blockquote {
    border-left: 4px solid var(--vpst-primary);
    margin: 1em 0;
    padding: .5em 1em;
    background: var(--vpst-bg-soft);
    color: var(--vpst-text-soft);
}

.container {
    max-width: var(--vpst-container);
    margin: 0 auto;
    padding: 0 16px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--vpst-primary); color: #fff; padding: 8px 12px; z-index: 9999;
}
.skip-link:focus { left: 8px; top: 8px; }

.screen-reader-text {
    position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden;
}

/* ===== Header ===== */
.site-header {
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
    border-bottom: 1px solid var(--vpst-border);
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
    backdrop-filter: saturate(180%) blur(8px);
}
.header-inner {
    display: flex; align-items: center; gap: 16px; min-height: 64px;
}
.site-branding { flex: 0 0 auto; }
.site-brand {
    display: flex; align-items: center; gap: 8px; color: var(--vpst-text);
    font-weight: 700; font-size: 1.2em;
}
.site-brand img { max-height: 48px; width: auto; }
.site-name { color: var(--vpst-primary-dark); }
.site-subtitle { font-size: .8em; color: var(--vpst-text-soft); font-weight: 400; }

.primary-nav { flex: 1; }
.primary-menu, .footer-menu, .sub-cat-nav {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 4px;
}
.primary-menu a, .footer-menu a, .sub-cat-nav a {
    display: block; padding: 10px 14px; color: var(--vpst-text); font-weight: 500;
    border-radius: var(--vpst-radius);
}
.primary-menu li { position: relative; }
.primary-menu .sub-menu {
    position: absolute; top: 100%; left: 0;
    background: #fff; border: 1px solid var(--vpst-border); border-radius: var(--vpst-radius);
    display: none; min-width: 200px; box-shadow: 0 4px 16px rgba(0,0,0,.08);
    flex-direction: column; gap: 0;
}
.primary-menu li:hover > .sub-menu { display: flex; }
.primary-menu .is-active > a { color: var(--vpst-primary); }

.nav-toggle {
    display: none;
    background: transparent; border: 1px solid var(--vpst-border); border-radius: var(--vpst-radius);
    width: 40px; height: 40px; cursor: pointer; padding: 0;
    flex-direction: column; justify-content: center; align-items: center; gap: 4px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--vpst-text); }

.header-search { flex: 0 0 auto; }
.header-search form { display: flex; align-items: center; gap: 0; }
.header-search input {
    width: 200px; padding: 8px 12px;
    border: 1px solid var(--vpst-border); border-right: 0; border-radius: var(--vpst-radius) 0 0 var(--vpst-radius);
    font: inherit; background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
.header-search input:focus {
    outline: none; border-color: var(--vpst-primary-light);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.header-search button {
    padding: 8px 16px; border: 0;
    background: linear-gradient(135deg, var(--vpst-primary) 0%, var(--vpst-primary-dark) 100%);
    color: #fff; border-radius: 0 var(--vpst-radius) var(--vpst-radius) 0;
    cursor: pointer; font: inherit; font-weight: 500;
    transition: filter .15s, transform .1s;
    box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 2px 6px rgba(30,64,175,.2);
}
.header-search button:hover { filter: brightness(1.08); }
.header-search button:active { transform: translateY(1px); }

/* ===== Layout ===== */
.site-content { padding: 24px 0 48px; }

.layout-archive, .layout-category, .layout-tag, .layout-search,
.layout-home, .layout-blog, .layout-front, .layout-page, .layout-single {
    display: grid; grid-template-columns: 1fr 320px; gap: 32px;
}
.layout-page.layout-archive-full, .layout-page.layout-404 { grid-template-columns: 1fr; }

.site-main { min-width: 0; }
.site-sidebar { min-width: 0; }

/* ===== Breadcrumb ===== */
.breadcrumbs {
    font-size: .9em; color: var(--vpst-text-soft);
    margin-bottom: 16px;
}
.breadcrumbs a { color: var(--vpst-text-soft); }
.breadcrumbs .bc-current { color: var(--vpst-text); }
.breadcrumbs .bc-sep { margin: 0 6px; color: #cbd5e1; }

/* ===== Section Title ===== */
.section-title {
    font-size: 1.3em;
    padding: 4px 0 4px 16px;
    margin: 24px 0 16px;
    background: linear-gradient(90deg, rgba(30,64,175,.06) 0%, transparent 80%);
    border-left: 4px solid var(--vpst-primary);
    border-radius: 2px;
}

/* ===== Post Card (横排:左缩略图 右正文,单列全宽) ===== */
.post-list { display: grid; grid-template-columns: 1fr; gap: 18px; }
.post-card {
    background: #fff; border: 1px solid var(--vpst-border);
    border-radius: var(--vpst-radius-lg); overflow: hidden;
    display: flex; flex-direction: row; align-items: stretch;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.post-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--vpst-shadow-hover);
    border-color: rgba(30,64,175,.35);
}
.post-card-thumb {
    flex: 0 0 240px;
    display: block; overflow: hidden; background: var(--vpst-bg-soft);
    position: relative; min-height: 180px;
    transition: transform .35s;
}
.post-card:hover .post-card-thumb img { transform: scale(1.05); }
.post-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.thumb-placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--vpst-primary);
    font-size: 4em; font-weight: 700;
    background: linear-gradient(135deg, #eff6ff 0%, #f1f5f9 50%, #e0e7ff 100%);
}
.post-card-body {
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 8px;
    flex: 1; min-width: 0;
}
.post-card-cat {
    align-self: flex-start; padding: 2px 10px;
    background: rgba(30,64,175,.08); color: var(--vpst-primary);
    border-radius: 3px; font-size: .78em; line-height: 1.6;
}
.post-card-title {
    font-size: 1.18em; margin: 0; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-card-title a { color: var(--vpst-text); }
.post-card-title a:hover { color: var(--vpst-primary); }
.post-card-excerpt {
    color: var(--vpst-text-soft); font-size: .92em; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.post-card-meta {
    margin-top: auto; padding-top: 10px;
    color: var(--vpst-text-soft); font-size: .82em;
    display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.post-card-meta .meta-read-more {
    margin-left: auto;
    color: var(--vpst-primary);
    font-weight: 500;
}
.post-card-meta .meta-read-more::after {
    content: " →";
    transition: transform .15s;
    display: inline-block;
}
.post-card:hover .meta-read-more::after { transform: translateX(3px); }

/* ===== Single ===== */
.post-single { background: #fff; border-radius: var(--vpst-radius); padding: 8px 0; }
.post-header { border-bottom: 1px solid var(--vpst-border); padding-bottom: 16px; margin-bottom: 20px; }
.post-title { font-size: 1.8em; margin: .2em 0 .4em; }
.post-meta { color: var(--vpst-text-soft); font-size: .9em; display: flex; flex-wrap: wrap; gap: 16px; }
.post-content { font-size: 1.05em; line-height: 1.85; color: var(--vpst-text); }
.post-content h2, .post-content h3, .post-content h4 { margin-top: 1.4em; }
.post-content img { border-radius: 4px; margin: .4em 0; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.post-content th, .post-content td { border: 1px solid var(--vpst-border); padding: 8px 10px; }
.post-content th { background: var(--vpst-bg-soft); }

.post-footer { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--vpst-border); }
.post-tags a {
    display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0;
    background: var(--vpst-bg-soft); border: 1px solid var(--vpst-border);
    border-radius: 12px; color: var(--vpst-text-soft); font-size: .85em;
}
.post-tags a:hover { background: var(--vpst-primary); color: #fff; border-color: var(--vpst-primary); }

.post-navigation {
    display: flex; justify-content: space-between; gap: 12px;
    margin: 32px 0; padding: 16px 0; border-top: 1px solid var(--vpst-border);
}
.post-navigation a { color: var(--vpst-text); }
.post-navigation .nav-next { text-align: right; margin-left: auto; }

/* ===== Sidebar ===== */
.site-sidebar { display: flex; flex-direction: column; gap: 20px; }
.widget {
    background: #fff; border: 1px solid var(--vpst-border);
    border-radius: var(--vpst-radius-lg); padding: 16px 18px;
    box-shadow: var(--vpst-shadow);
    transition: box-shadow .2s, transform .2s;
}
.widget:hover { box-shadow: var(--vpst-shadow-hover); }
.widget-title {
    font-size: 1em; margin: 0 0 12px;
    padding-bottom: 10px; border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, var(--vpst-primary) 0%, transparent 75%) 1;
    position: relative;
}
.widget-title::after {
    content: "";
    position: absolute; left: 0; bottom: -2px;
    width: 36px; height: 2px;
    background: var(--vpst-accent);
}
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 6px 0; border-bottom: 1px dashed var(--vpst-border); }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--vpst-text); }
.widget a:hover { color: var(--vpst-primary); }
.widget_search input { width: 100%; padding: 8px 10px; border: 1px solid var(--vpst-border); border-radius: 4px; font: inherit; transition: border-color .15s, box-shadow .15s; }
.widget_search input:focus {
    outline: none; border-color: var(--vpst-primary-light);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.widget_search button {
    margin-top: 10px; width: 100%;
    padding: 9px 12px;
    background: linear-gradient(135deg, var(--vpst-primary) 0%, var(--vpst-primary-dark) 100%);
    color: #fff; border: 0; border-radius: 6px; cursor: pointer;
    font: inherit; font-weight: 500;
    box-shadow: 0 2px 6px rgba(30,64,175,.18);
    transition: filter .15s, transform .1s, box-shadow .15s;
}
.widget_search button:hover { filter: brightness(1.08); box-shadow: 0 4px 12px rgba(30,64,175,.28); }
.widget_search button:active { transform: translateY(1px); }
.tagcloud a {
    display: inline-block; padding: 2px 8px; margin: 2px;
    background: var(--vpst-bg-soft); border-radius: 3px; font-size: .85em !important;
}

/* ===== Hero Feature (Front page) ===== */
.hero-feature { margin: 16px 0 24px; }
.hero-feature .hero-thumb {
    display: block; position: relative; border-radius: var(--vpst-radius);
    overflow: hidden; aspect-ratio: 16/7; background: var(--vpst-bg-soft);
}
.hero-feature img { width: 100%; height: 100%; object-fit: cover; }
.hero-feature .hero-meta {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 20px 24px; color: #fff;
    background: linear-gradient(0deg, rgba(0,0,0,.7), transparent);
}
.hero-feature .hero-cat { background: var(--vpst-accent); padding: 2px 8px; border-radius: 3px; font-size: .8em; }
.hero-feature .hero-title { color: #fff; font-size: 1.8em; margin: .4em 0 .2em; }
.hero-feature .hero-excerpt { color: #f1f5f9; margin: 0; }

/* ===== Ad slots ===== */
.ad-slot { margin: 16px 0; text-align: center; }
.ad-slot img { max-width: 100%; height: auto; }
.ad-slot .ad-text {
    display: inline-block; padding: 8px 16px;
    background: var(--vpst-bg-soft); border: 1px dashed var(--vpst-border);
    border-radius: 4px; color: var(--vpst-text);
}

/* ===== Pagination ===== */
.pagination, .nav-links {
    display: flex; justify-content: center; gap: 6px;
    margin: 24px 0; flex-wrap: wrap;
}
.pagination .page-numbers, .nav-links .page-numbers {
    padding: 6px 12px; border: 1px solid var(--vpst-border);
    background: #fff; color: var(--vpst-text); border-radius: 4px;
}
.pagination .current, .nav-links .current { background: var(--vpst-primary); color: #fff; border-color: var(--vpst-primary); }

/* ===== Comments ===== */
.comments-area { margin-top: 40px; }
.comments-title { font-size: 1.2em; padding-bottom: 8px; border-bottom: 2px solid var(--vpst-primary); }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 14px 0; border-bottom: 1px solid var(--vpst-border); }
.comment-author { font-weight: 600; }
.comment-form input, .comment-form textarea {
    width: 100%; padding: 8px; border: 1px solid var(--vpst-border); border-radius: 4px; font: inherit;
}
.comment-form label { display: block; margin: 12px 0 4px; }
.comment-form .submit {
    background: var(--vpst-primary); color: #fff; border: 0; padding: 10px 24px;
    border-radius: 4px; cursor: pointer; margin-top: 12px;
}

/* ===== 404 ===== */
.error-404 { text-align: center; padding: 60px 16px; }
.error-code { font-size: 6em; color: var(--vpst-primary); margin: 0; }
.error-title { font-size: 1.6em; }
.error-search { max-width: 400px; margin: 24px auto; display: flex; gap: 0; }
.error-search input { flex: 1; padding: 10px; border: 1px solid var(--vpst-border); border-right: 0; border-radius: 4px 0 0 4px; }
.error-search button { padding: 10px 16px; background: var(--vpst-primary); color: #fff; border: 0; border-radius: 0 4px 4px 0; cursor: pointer; }
.error-cats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.error-cats li a { padding: 6px 12px; background: var(--vpst-bg-soft); border-radius: 4px; }

/* ===== Footer ===== */
.site-footer {
    background: linear-gradient(180deg, #0f172a 0%, #0a1020 100%);
    color: #cbd5e1; padding: 36px 0 20px; margin-top: 48px;
    border-top: 3px solid var(--vpst-primary);
}
.site-footer a { color: #cbd5e1; }
.site-footer a:hover { color: #fff; }
.footer-ext { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding-bottom: 20px; border-bottom: 1px solid #1e293b; margin-bottom: 20px; }
.footer-widget-title { color: #fff; font-size: 1em; margin: 0 0 12px; }
.footer-friends { padding: 20px 0; border-bottom: 1px solid #1e293b; }
.footer-friends h4 { color: #fff; margin: 0 0 12px; font-size: 1em; }
.footer-friends ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.footer-friends a {
    font-size: .9em;
    transition: color .15s, transform .15s;
    display: inline-block;
}
.footer-friends a:hover { color: var(--vpst-accent); transform: translateY(-1px); }
.footer-nav { padding: 18px 0; border-bottom: 1px solid #1e293b; text-align: center; }
.footer-menu {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 0; justify-content: center;
}
.footer-menu li { display: flex; align-items: center; }
.footer-menu li + li::before {
    content: "";
    display: inline-block; width: 4px; height: 4px;
    background: #475569; border-radius: 50%;
    margin: 0 14px;
}
.footer-menu a {
    position: relative;
    padding: 4px 2px;
    font-size: .9em; color: #94a3b8;
    transition: color .15s;
}
.footer-menu a::after {
    content: ""; position: absolute; left: 50%; bottom: 0;
    width: 0; height: 2px; background: var(--vpst-accent);
    transform: translateX(-50%);
    transition: width .2s;
}
.footer-menu a:hover { color: #fff; }
.footer-menu a:hover::after { width: 100%; }
.footer-copyright, .footer-beian { padding: 10px 0; font-size: .85em; text-align: center; }
.footer-beian a { margin: 0 8px; transition: color .15s; }
.footer-beian a:hover { color: var(--vpst-accent); }
.police-beian .police-icon { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center; background: #ef4444; color: #fff; border-radius: 2px; font-size: 12px; margin-right: 4px; }

.back-to-top {
    position: fixed; right: 20px; bottom: 24px; z-index: 99;
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--vpst-primary) 0%, var(--vpst-primary-dark) 100%);
    color: #fff; border: 0; border-radius: 50%; cursor: pointer;
    box-shadow: 0 6px 18px rgba(30,64,175,.4);
    font-size: 1.2em; font-weight: 700;
    opacity: 0; visibility: hidden; transition: all .25s;
}
.back-to-top:hover { box-shadow: 0 8px 24px rgba(30,64,175,.55); transform: translateY(-2px); }
.back-to-top.show { opacity: 1; visibility: visible; }

/* ===== Archive header ===== */
.archive-header, .page-header { margin-bottom: 20px; }
.archive-title, .page-title { font-size: 1.5em; margin: 0 0 8px; }
.archive-description, .page-description { color: var(--vpst-text-soft); }
.sub-cat-nav { gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
.sub-cat-nav li a { padding: 4px 12px; background: var(--vpst-bg-soft); border-radius: 14px; font-size: .9em; }
.sub-cat-nav li.active a, .sub-cat-nav a:hover { background: var(--vpst-primary); color: #fff; }

/* ===== Mobile Menu Toggle ===== */
.nav-toggle {
    display: none;
    background: transparent; border: 0; padding: 8px;
    cursor: pointer; flex-direction: column; gap: 5px;
    border-radius: 4px;
    transition: background .15s;
}
.nav-toggle:hover { background: var(--vpst-bg-soft); }
.nav-toggle span {
    display: block; width: 24px; height: 2px;
    background: var(--vpst-text);
    transition: transform .2s, opacity .2s;
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Pagination ===== */
.navigation.pagination,
.nav-links {
    margin: 32px 0 8px;
    display: flex; justify-content: center; gap: 4px; flex-wrap: wrap;
}
.nav-links .page-numbers,
.navigation.pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 36px; height: 36px; padding: 0 10px;
    background: #fff; border: 1px solid var(--vpst-border);
    border-radius: 4px; color: var(--vpst-text);
    font-size: .92em; text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.nav-links .page-numbers:hover,
.navigation.pagination .page-numbers:hover {
    background: var(--vpst-primary); color: #fff; border-color: var(--vpst-primary);
}
.nav-links .page-numbers.current,
.navigation.pagination .page-numbers.current {
    background: var(--vpst-primary); color: #fff; border-color: var(--vpst-primary); font-weight: 600;
}
.nav-links .page-numbers.dots { background: transparent; border: 0; }
.nav-links .page-numbers.prev,
.nav-links .page-numbers.next { font-weight: 600; }

/* ===== Post Navigation (prev/next) ===== */
.post-navigation {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin: 28px 0; padding: 16px 0;
    border-top: 1px solid var(--vpst-border);
    border-bottom: 1px solid var(--vpst-border);
}
.nav-prev, .nav-next { font-size: .92em; }
.nav-next { text-align: right; }
.nav-prev a, .nav-next a {
    display: block; padding: 10px 14px;
    background: var(--vpst-bg-soft); border-radius: 6px;
    color: var(--vpst-text);
    transition: background .15s, color .15s;
}
.nav-prev a:hover, .nav-next a:hover { background: var(--vpst-primary); color: #fff; }
.nav-prev .label, .nav-next .label { display: block; font-size: .8em; color: var(--vpst-text-soft); margin-bottom: 4px; }
.nav-prev a:hover .label, .nav-next a:hover .label { color: rgba(255,255,255,.8); }

/* ===== Article Page ===== */
.post-single {
    background: #fff; border: 1px solid var(--vpst-border);
    border-radius: var(--vpst-radius-lg); padding: 28px 32px;
    box-shadow: var(--vpst-shadow);
}
.post-header { padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--vpst-border); }
.post-title { font-size: 1.85em; line-height: 1.35; margin: 0 0 14px; }
.post-meta { color: var(--vpst-text-soft); font-size: .88em; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.post-meta > span { display: inline-flex; align-items: center; }
.post-meta a { color: var(--vpst-primary); }
.post-content { font-size: 1.05em; line-height: 1.85; color: var(--vpst-text); }
.post-content > * { margin: 14px 0; }
.post-content h2, .post-content h3, .post-content h4 { margin-top: 1.8em; margin-bottom: .6em; }
.post-content h2 { font-size: 1.5em; padding-bottom: 8px; border-bottom: 2px solid var(--vpst-bg-soft); }
.post-content h3 { font-size: 1.25em; }
.post-content h4 { font-size: 1.1em; }
.post-content p { margin: 12px 0; }
.post-content a { color: var(--vpst-link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.post-content a:hover { color: var(--vpst-link-hover); }
.post-content ul, .post-content ol { padding-left: 1.6em; }
.post-content li { margin: 4px 0; }
.post-content blockquote {
    margin: 16px 0; padding: 12px 18px;
    background: var(--vpst-bg-soft); border-left: 4px solid var(--vpst-primary);
    color: var(--vpst-text-soft); border-radius: 0 6px 6px 0;
}
.post-content blockquote p { margin: 4px 0; }
.post-content img { max-width: 100%; height: auto; border-radius: 6px; }
.post-content figure { margin: 16px 0; }
.post-content figcaption { text-align: center; color: var(--vpst-text-soft); font-size: .9em; margin-top: 6px; }
.post-content pre {
    background: #0f172a; color: #e2e8f0;
    padding: 14px 16px; border-radius: 6px;
    overflow-x: auto; font-size: .9em; line-height: 1.6;
    font-family: var(--vpst-mono);
    -webkit-overflow-scrolling: touch;
}
.post-content pre code { background: transparent; padding: 0; color: inherit; }
.post-content code {
    background: #f1f5f9; color: #b91c1c;
    padding: 1px 6px; border-radius: 3px;
    font-family: var(--vpst-mono); font-size: .9em;
}
.post-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.post-content th, .post-content td { padding: 8px 12px; border: 1px solid var(--vpst-border); }
.post-content th { background: var(--vpst-bg-soft); font-weight: 600; }
.post-tags { margin-top: 20px; }
.post-tags a {
    display: inline-block; padding: 2px 10px;
    background: rgba(30,64,175,.08); color: var(--vpst-primary);
    border-radius: 3px; font-size: .85em; margin: 0 4px 4px 0;
}
.post-tags a:hover { background: var(--vpst-primary); color: #fff; }
.page-links { margin: 20px 0; padding: 10px 0; border-top: 1px dashed var(--vpst-border); font-size: .9em; }
.page-links > span, .page-links > a {
    display: inline-block; padding: 2px 8px; margin: 0 2px;
    background: var(--vpst-bg-soft); border-radius: 3px; color: var(--vpst-text);
}
.page-links > span { background: var(--vpst-primary); color: #fff; }

/* ===== Hero (Front Page) ===== */
.hero-feature { margin: 0 0 24px; }
.hero-thumb {
    display: block; position: relative; overflow: hidden;
    border-radius: var(--vpst-radius-lg);
    aspect-ratio: 16/7; background: var(--vpst-bg-soft);
}
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-meta {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 20px 24px;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.75) 100%);
    color: #fff;
}
.hero-cat { display: inline-block; padding: 2px 10px; background: var(--vpst-accent); color: #fff; border-radius: 3px; font-size: .8em; margin-bottom: 8px; }
.hero-title { font-size: 1.6em; margin: 0 0 6px; line-height: 1.35; color: #fff; }
.hero-excerpt { margin: 0; opacity: .92; font-size: .95em; line-height: 1.55; max-width: 720px; }
.hero-thumb:hover img { transform: scale(1.03); transition: transform .4s; }

/* ===== Breadcrumbs ===== */
.breadcrumbs {
    margin: 0 0 18px; padding: 10px 0;
    font-size: .88em; color: var(--vpst-text-soft);
    border-bottom: 1px dashed var(--vpst-border);
}
.breadcrumbs a { color: var(--vpst-text-soft); }
.breadcrumbs a:hover { color: var(--vpst-primary); }
.bc-sep { margin: 0 6px; color: #cbd5e1; }
.bc-current { color: var(--vpst-primary); font-weight: 500; }

/* ===== 404 Page ===== */
.error-404 {
    background: #fff; border: 1px solid var(--vpst-border);
    border-radius: var(--vpst-radius-lg); padding: 60px 24px;
    text-align: center; box-shadow: var(--vpst-shadow);
}
.error-code {
    font-size: 8em; font-weight: 800; line-height: 1;
    margin: 0;
    background: linear-gradient(135deg, var(--vpst-primary) 0%, var(--vpst-primary-light) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.error-title { font-size: 1.5em; margin: 16px 0 8px; }
.error-desc { color: var(--vpst-text-soft); margin-bottom: 24px; }
.error-search { max-width: 420px; margin: 0 auto 20px; display: flex; gap: 8px; }
.error-search input {
    flex: 1; padding: 9px 12px;
    border: 1px solid var(--vpst-border); border-radius: 4px; font: inherit;
}
.error-search button {
    padding: 9px 18px;
    background: linear-gradient(135deg, var(--vpst-primary) 0%, var(--vpst-primary-dark) 100%);
    color: #fff; border: 0; border-radius: 4px; cursor: pointer; font: inherit;
}
.error-home {
    display: inline-block; padding: 8px 18px;
    background: var(--vpst-bg-soft); color: var(--vpst-primary);
    border-radius: 4px; font-weight: 500; transition: all .15s;
}
.error-home:hover { background: var(--vpst-primary); color: #fff; }
.error-cats { list-style: none; padding: 0; margin: 20px auto 0; max-width: 600px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.error-cats li a {
    display: inline-block; padding: 4px 12px;
    background: var(--vpst-bg-soft); color: var(--vpst-text-soft);
    border-radius: 14px; font-size: .9em;
    transition: all .15s;
}
.error-cats li a:hover { background: var(--vpst-primary); color: #fff; }

/* ===== Comments ===== */
.comments-area { margin-top: 28px; }
.comments-title { font-size: 1.2em; margin-bottom: 18px; padding-left: 12px; border-left: 4px solid var(--vpst-primary); }
.comment-list { list-style: none; padding: 0; margin: 0 0 24px; }
.comment-body {
    background: #fff; border: 1px solid var(--vpst-border);
    border-radius: 6px; padding: 12px 16px; margin: 0 0 12px;
}
.comment-author { font-weight: 600; color: var(--vpst-primary); }
.comment-metadata { font-size: .82em; color: var(--vpst-text-soft); margin-bottom: 8px; }
.comment-content { line-height: 1.7; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"],
.comment-form textarea {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--vpst-border); border-radius: 4px; font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.comment-form input:focus, .comment-form textarea:focus {
    outline: none; border-color: var(--vpst-primary-light);
    box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.comment-form textarea { min-height: 120px; resize: vertical; }
.comment-form .submit,
.comment-form input[type="submit"] {
    padding: 9px 22px;
    background: linear-gradient(135deg, var(--vpst-primary) 0%, var(--vpst-primary-dark) 100%);
    color: #fff; border: 0; border-radius: 4px; cursor: pointer; font: inherit;
    transition: filter .15s;
}
.comment-form .submit:hover { filter: brightness(1.08); }
.comment-form p { margin: 0 0 12px; }

/* ===== Search Highlight ===== */
.search-highlight { background: #fef3c7; color: #92400e; padding: 0 2px; border-radius: 2px; }

/* ===== Tag Cloud ===== */
.tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.tagcloud a {
    display: inline-block; padding: 3px 10px;
    background: var(--vpst-bg-soft); color: var(--vpst-text-soft);
    border-radius: 12px; font-size: .85em !important;
    transition: all .15s;
}
.tagcloud a:hover { background: var(--vpst-primary); color: #fff; }

/* ===== Header Bar (LOGO + Nav + Search layout) ===== */
.header-inner {
    display: flex; align-items: center; gap: 16px;
    padding: 14px 0;
}
.site-branding { flex: 0 0 auto; }
.site-brand {
    display: flex; align-items: center; gap: 8px;
    text-decoration: none; color: var(--vpst-text);
    font-size: 1.35em; font-weight: 700;
}
.site-brand img { max-height: 40px; width: auto; display: block; }
.site-name { color: var(--vpst-primary); }
.site-subtitle { color: var(--vpst-text-soft); font-size: .55em; font-weight: 400; }
.primary-nav { flex: 1 1 auto; }
.primary-menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.primary-menu > li { position: relative; }
.primary-menu > li > a {
    display: inline-block; padding: 8px 14px;
    color: var(--vpst-text); text-decoration: none; font-size: .95em;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.primary-menu > li > a:hover,
.primary-menu > li.current-menu-item > a,
.primary-menu > li.current-menu-ancestor > a { color: var(--vpst-primary); background: rgba(30,64,175,.06); }
.primary-menu .sub-menu {
    list-style: none; padding: 8px 0; margin: 0;
    position: absolute; top: 100%; left: 0;
    min-width: 180px;
    background: #fff; border: 1px solid var(--vpst-border);
    border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.1);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 50;
}
.primary-menu > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-menu .sub-menu a { display: block; padding: 6px 14px; color: var(--vpst-text); font-size: .92em; }
.primary-menu .sub-menu a:hover { background: var(--vpst-bg-soft); color: var(--vpst-primary); }

/* ===== Table Wrap (mobile) ===== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { margin: 0; }