/* ========================================
   Base & Reset
   ======================================== */

@font-face {
    font-family: 'HarmonyOS Sans SC';
    src: url('/static/vendor/HarmonyOS_Sans_SC.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

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

:root {
    --bg-primary:   #0a0a12;
    --bg-secondary: #11111e;
    --bg-card:      #181828;
    --bg-elevated:  #1e1e32;
    --text-primary: #e8e8f0;
    --text-secondary: #9090b8;
    --text-muted:   #555570;
    --accent:       #7c7cf0;
    --accent-hover: #9999ff;
    --accent-subtle: rgba(124, 124, 240, 0.08);
    --border:       #2a2a42;
    --border-light: #1c1c2e;
    --code-bg:      #0e0e1a;

    --font-sans: 'HarmonyOS Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        'Noto Sans', Helvetica, Arial, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

    --max-width: 720px;
    --content-padding: 24px;
    --transition: 200ms ease;
}

html {
    font-size: 17px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: hidden;
    background: var(--bg-primary);
}

/* Ensures scrollbar track matches the dark background */
html::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

body {
    font-family: var(--font-sans);
    background: linear-gradient(135deg, #0a0a12, #0c0c1e, #0a0a12, #0e0e18);
    background-size: 400% 400%;
    animation: bgShift 30s ease infinite;
    color: var(--text-primary);
    line-height: 1.8;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Subtle dot grid overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(124, 124, 240, 0.06) 1px, transparent 0);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

/* Ambient glow orbs */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 400px at 15% 20%, rgba(124, 124, 240, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 500px 500px at 85% 80%, rgba(153, 153, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

@keyframes bgShift {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 100% 0%; }
    50%  { background-position: 100% 100%; }
    75%  { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

/* Mouse-following ambient glow */
#mouse-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse 600px 400px at var(--mx, 50%) var(--my, 50%), rgba(124, 124, 240, 0.06), transparent 70%);
}

/* Click ripple */
.ripple {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    background: radial-gradient(circle, rgba(124, 124, 240, 0.12), transparent 70%);
    transform: scale(0);
    animation: rippleAnim 0.6s ease-out forwards;
}

@keyframes rippleAnim {
    to {
        transform: scale(3);
        opacity: 0;
    }
}

/* ========================================
   Global Scrollbar
   ======================================== */

::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

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

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

/* ========================================
   Links
   ======================================== */

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
}

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

/* ========================================
   Header
   ======================================== */

.site-header {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 40px var(--content-padding) 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid var(--border-light);
}

.site-title {
    font-family: var(--font-sans);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--accent), #b388ff, var(--accent-hover), var(--accent));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShine 6s ease infinite;
}

@keyframes titleShine {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---- Site Navigation ---- */

.site-nav {
    display: flex;
    gap: 4px;
}

.nav-link {
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 8px;
    position: relative;
    transition: color var(--transition);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 1px;
    transform: translateX(-50%);
    transition: width var(--transition);
}

.nav-link:hover {
    color: var(--text-primary);
}

.nav-link:hover::after {
    width: 60%;
}

.nav-link.active {
    color: var(--accent);
}

.nav-link.active::after {
    width: 60%;
    box-shadow: 0 0 8px var(--accent);
}

/* ========================================
   Page Content Wrapper
   ======================================== */

#page-content {
    opacity: 0;
    transition: opacity 0.5s ease;
    position: relative;
    z-index: 1;
}

#page-content.visible {
    opacity: 1;
}

/* ========================================
   Main Content
   ======================================== */

.main-content {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--content-padding) 80px;
}

/* ========================================
   Footer
   ======================================== */

.site-footer {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 32px var(--content-padding) 48px;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-top: 1px solid var(--border-light);
}

.footer-beian {
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.footer-beian:hover {
    color: var(--accent);
}

/* ========================================
   Post List (Homepage)
   ======================================== */

.post-list {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.post-preview {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px;
    transition: transform var(--transition), border-color var(--transition),
                box-shadow var(--transition);
    position: relative;
    animation: cardIn 0.6s ease backwards;
}

.post-preview:nth-child(1)  { animation-delay: 0.05s; }
.post-preview:nth-child(2)  { animation-delay: 0.12s; }
.post-preview:nth-child(3)  { animation-delay: 0.19s; }
.post-preview:nth-child(4)  { animation-delay: 0.26s; }
.post-preview:nth-child(5)  { animation-delay: 0.33s; }
.post-preview:nth-child(6)  { animation-delay: 0.40s; }
.post-preview:nth-child(7)  { animation-delay: 0.47s; }
.post-preview:nth-child(8)  { animation-delay: 0.54s; }
.post-preview:nth-child(9)  { animation-delay: 0.61s; }
.post-preview:nth-child(10) { animation-delay: 0.68s; }

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

.post-preview:hover {
    transform: translateY(-3px);
    border-color: rgba(124, 124, 240, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3),
                0 0 60px rgba(124, 124, 240, 0.04);
}

.post-preview .post-date {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
    background: var(--bg-secondary);
    padding: 2px 10px;
    border-radius: 4px;
}

.post-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 12px;
}

.post-preview .post-title {
    font-family: var(--font-sans);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    transition: color var(--transition);
}

.post-preview:hover .post-title {
    color: var(--accent);
}

.post-preview .post-description {
    margin-top: 10px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.post-preview .post-tags {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
    z-index: 1;
}

.post-preview .tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 10px;
    border-radius: 4px;
    transition: color var(--transition), background var(--transition);
    position: relative;
    z-index: 1;
}

.post-preview .tag:hover {
    color: var(--accent);
    background: var(--accent-subtle);
}

/* ========================================
   Post Full (Article Page)
   ======================================== */

.post-full {
    margin-top: 48px;
}

.post-full .post-header {
    margin-bottom: 40px;
}

.post-full .post-header .post-date {
    display: inline-block;
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
    background: var(--bg-secondary);
    padding: 3px 12px;
    border-radius: 6px;
}

.post-full .post-header .post-title {
    font-family: var(--font-sans);
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.025em;
}

/* ========================================
   Tags (shared)
   ======================================== */

.post-tags {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

.tag {
    display: inline-block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-card);
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border);
    transition: color var(--transition), background var(--transition),
                border-color var(--transition);
}

.tag:hover {
    color: var(--accent);
    background: var(--accent-subtle);
    border-color: var(--accent);
}

/* ---- Tags Page ---- */

.tags-page {
    margin-top: 56px;
}

.tags-page-title {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 32px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border-light);
}

.tag-cloud-item {
    font-size: 1rem;
    font-weight: 500;
    color: var(--accent);
    background: var(--accent-subtle);
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: transform var(--transition), background var(--transition),
                border-color var(--transition), color var(--transition);
}

.tag-cloud-item:hover {
    transform: translateY(-3px) scale(1.04);
    background: var(--bg-card);
    border-color: var(--accent);
    color: var(--accent-hover);
    box-shadow: 0 4px 20px rgba(124, 124, 240, 0.15);
}

/* ---- Tag Page (single tag) ---- */

.tag-page {
    margin-top: 56px;
}

.tag-page-title {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tag-page-title::before {
    content: '#';
    font-weight: 400;
    -webkit-text-fill-color: var(--accent);
}

.tag-post-list {
    list-style: none;
    padding: 0;
}

.tag-post-item {
    padding: 10px 0;
    display: flex;
    align-items: baseline;
    gap: 16px;
    border-bottom: 1px solid var(--border-light);
    transition: padding-left var(--transition);
}

.tag-post-item:hover {
    padding-left: 8px;
}

.tag-post-item:last-child {
    border-bottom: none;
}

.tag-post-date {
    font-size: 0.8125rem;
    color: var(--text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.tag-post-item a {
    color: var(--text-primary);
    font-weight: 500;
    transition: color var(--transition);
}

.tag-post-item a:hover {
    color: var(--accent);
}

/* ========================================
   Post Content (Markdown Rendered)
   ======================================== */

.post-content {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-primary);
}

/* ── Password Protection ── */

.password-form {
    text-align: center;
    padding: 80px 32px;
}

.password-lock-icon {
    width: 36px;
    height: 36px;
    color: var(--accent);
    margin-bottom: 16px;
    opacity: 0.7;
    animation: lockPulse 2.5s ease-in-out infinite;
}

@keyframes lockPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.08); }
}

.password-hint {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.password-input-row {
    display: flex;
    gap: 8px;
    max-width: 320px;
    margin: 0 auto;
}

.password-input-row input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    outline: none;
    transition: border-color 200ms ease;
}

.password-input-row input:focus {
    border-color: var(--accent);
}

.password-input-row input::placeholder {
    color: var(--text-muted);
}

.password-input-row button {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 0.9375rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 200ms ease;
    white-space: nowrap;
}

.password-input-row button:hover {
    background: var(--accent-hover);
}

.password-error {
    margin-top: 12px;
    font-size: 0.8125rem;
    color: #ff4689;
}

/* ── Headings ── */

.post-content h1 {
    font-family: var(--font-sans);
    font-size: 1.75rem;
    font-weight: 700;
    margin-top: 48px;
    margin-bottom: 16px;
    letter-spacing: -0.015em;
}

.post-content h2 {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 44px;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-light);
    letter-spacing: -0.01em;
}

.post-content h3 {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 36px;
    margin-bottom: 12px;
}

.post-content h4 {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 28px;
    margin-bottom: 8px;
}

/* ── Paragraphs & Lists ── */

.post-content p {
    margin-bottom: 22px;
}

.post-content a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--accent-subtle);
    transition: text-decoration-color var(--transition);
}

.post-content a:hover {
    text-decoration-color: var(--accent);
}

.post-content strong {
    font-weight: 600;
    color: var(--text-primary);
}

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

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

.post-content li > ul,
.post-content li > ol {
    margin-bottom: 0;
}

/* ── Blockquotes ── */

.post-content blockquote {
    margin: 28px 0;
    padding: 18px 22px;
    border-left: 3px solid var(--accent);
    background: var(--accent-subtle);
    border-radius: 0 10px 10px 0;
    color: var(--text-secondary);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
}

.post-content blockquote::before {
    content: '"';
    font-size: 2.5rem;
    line-height: 1;
    color: var(--accent);
    opacity: 0.3;
    display: block;
    margin-bottom: -6px;
}

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

/* ── Images ── */

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 32px 0;
    -webkit-user-drag: none;
    user-select: none;
    border: 1px solid var(--border-light);
    transition: border-color var(--transition);
}

.post-content img:hover {
    border-color: var(--border);
}

/* ── Horizontal Rule ── */

/* ── Highlights ── */

.post-content mark {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.18), rgba(255, 180, 0, 0.12));
    color: #ffe066;
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 215, 0, 0.15);
}

/* ── Task Lists ── */

.post-content .contains-task-list {
    list-style: none;
    padding-left: 24px;
}

.post-content .task-list-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.post-content .task-list-item .task-list-item-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    background: var(--bg-secondary);
    cursor: default;
    flex-shrink: 0;
    margin-top: calc(1.85em - 1.3em);
    transition: background var(--transition), border-color var(--transition);
    position: relative;
}

.post-content .task-list-item .task-list-item-checkbox:checked {
    background: var(--accent);
    border-color: var(--accent);
}

.post-content .task-list-item .task-list-item-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.post-content .task-list-item .task-list-item-checkbox:hover {
    border-color: var(--accent);
}

/* ── Horizontal Rule ── */

.post-content hr {
    border: none;
    height: 1px;
    background: var(--border-light);
    margin: 48px 0;
}

/* ========================================
   Code (Inline & Blocks)
   ======================================== */

.post-content code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    font-variant-ligatures: none;
}

.post-content :not(pre) > code {
    background: var(--code-bg);
    padding: 3px 8px;
    border-radius: 5px;
    color: #b0b8ff;
    border: 1px solid var(--border-light);
    word-break: break-word;
}

.post-content .highlight {
    margin: 28px 0;
}

.post-content pre {
    background: var(--code-bg);
    border-radius: 10px;
    padding: 22px;
    overflow-x: auto;
    margin: 28px 0;
    border: 1px solid var(--border);
    position: relative;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.post-content pre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), #b388ff, var(--accent), transparent);
    border-radius: 10px 10px 0 0;
    pointer-events: none;
}

.post-content .highlight pre {
    margin: 0;
}

.post-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    border: none;
    color: inherit;
    font-size: 0.8125rem;
    line-height: 1.65;
}

/* Scrollbar styling for code blocks */
.post-content pre {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-subtle) transparent;
}

.post-content pre::-webkit-scrollbar {
    height: 5px;
}

.post-content pre::-webkit-scrollbar-track {
    background: transparent;
}

.post-content pre::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.post-content pre::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

.post-content pre::-webkit-scrollbar-button {
    display: none;
}

/* ========================================
   Tables
   ======================================== */

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 28px 0;
    font-size: 0.9375rem;
}

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

.post-content th {
    background: var(--bg-card);
    font-weight: 600;
    color: var(--text-primary);
}

.post-content tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.015);
}

/* ========================================
   MathML Overrides
   ======================================== */

math {
    font-size: 1.1em;
}

math[display="block"] {
    margin: 24px 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 0;
    display: block;
}

/* ── Scrollable wide display math ── */
.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}

/* ========================================
   Table of Contents (Article Sidebar)
   ======================================== */

.post-layout {
    position: relative;
    max-width: var(--max-width);
    margin: 0 auto;
}

.toc-sidebar {
    display: none;
    position: fixed;
    left: max(16px, calc((100vw - 720px) / 2 - 290px));
    top: 80px;
    width: 210px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.toc-header {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    padding: 0 10px;
}

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

.toc-link {
    padding: 0;
}

.toc-link a {
    display: block;
    padding: 4px 10px;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--text-secondary);
    border-left: 2px solid transparent;
    transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 0 4px 4px 0;
}

.toc-link a:hover {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--accent-subtle);
}

.toc-link a.active {
    color: var(--accent-hover);
    border-left-color: var(--accent-hover);
    background: var(--accent-subtle);
}

.toc-level-1 a { padding-left: 10px; }
.toc-level-2 a { padding-left: 28px; }
.toc-level-3 a { padding-left: 46px; }
.toc-level-4 a { padding-left: 64px; }

@media (min-width: 1200px) {
    .toc-sidebar {
        display: block;
    }
}

/* ── Smooth scroll offset for headings ── */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4 {
    scroll-margin-top: 60px;
}

/* ========================================
   Loading Screen
   ======================================== */

#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 9999;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
    opacity: 1;
    transition: opacity 0.5s ease;
    pointer-events: auto;
}

#page-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loader-title {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent), #b388ff, var(--accent-hover));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShine 3s ease infinite;
}

.loader-bar {
    width: 140px;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
    overflow: hidden;
}

.loader-bar-inner {
    height: 100%;
    width: 30%;
    background: var(--accent);
    border-radius: 2px;
    animation: loaderSlide 1.2s ease-in-out infinite;
    box-shadow: 0 0 12px var(--accent);
}

@keyframes loaderSlide {
    0%   { transform: translateX(-100%); width: 30%; }
    50%  { width: 50%; }
    100% { transform: translateX(300%); width: 30%; }
}

/* ========================================
   Empty State
   ======================================== */

.empty-state {
    margin-top: 80px;
    text-align: center;
    color: var(--text-muted);
}

.empty-state p {
    font-size: 1rem;
}

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

.error-page {
    margin-top: 80px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.error-code {
    font-family: var(--font-sans);
    font-size: 6rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent), #b388ff, var(--accent-hover));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: titleShine 4s ease infinite;
    letter-spacing: -0.04em;
}

.error-title {
    font-family: var(--font-sans);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.error-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 360px;
    line-height: 1.6;
}

.error-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 10px 24px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 500;
    font-family: var(--font-sans);
    transition: background var(--transition), transform var(--transition);
}

.error-back:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .error-code {
        font-size: 4.5rem;
    }

    .error-page {
        margin-top: 48px;
    }
}

/* ========================================
   Lightbox
   ======================================== */

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-content img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    max-height: 90dvh;
    object-fit: contain;
    will-change: transform;
    cursor: grab;
}

.lightbox-content img.smooth {
    transition: transform 200ms ease;
}

.lightbox-content img:active {
    cursor: grabbing;
}

.lightbox-btn {
    z-index: 1010;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e2f0;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, color 200ms ease;
    backdrop-filter: blur(4px);
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

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

.lightbox-btn-close {
    position: fixed;
    top: 20px;
    right: 20px;
    font-size: 20px;
}

.lightbox-zoom-group {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1010;
    display: flex;
    gap: 8px;
}

.lightbox-zoom-label {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
    :root {
        --content-padding: 20px;
        --max-width: 100%;
    }

    html {
        font-size: 16px;
    }

    .site-header {
        padding-top: 28px;
        padding-bottom: 16px;
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .post-list {
        margin-top: 32px;
        gap: 16px;
    }

    .post-preview {
        padding: 20px;
    }

    .post-preview .post-title {
        font-size: 1.3rem;
    }

    .post-full {
        margin-top: 32px;
    }

    .post-full .post-header .post-title {
        font-size: 1.75rem;
    }

    .post-content h1 { font-size: 1.5rem; }
    .post-content h2 { font-size: 1.35rem; }

    .post-content {
        font-size: 0.9375rem;
    }

    .post-content pre,
    .post-content .highlight pre {
        padding: 16px;
    }

    .tag-cloud {
        gap: 8px;
    }

    .tag-cloud-item {
        font-size: 0.875rem;
        padding: 6px 14px;
    }

    .tag-post-item {
        flex-direction: column;
        gap: 4px;
    }

    /* ── Lightbox mobile ── */
    .lightbox-btn {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .lightbox-btn-close {
        top: 12px;
        right: 12px;
    }

    .lightbox-zoom-group {
        bottom: 20px;
    }

    .lightbox-content img {
        max-width: 95vw;
        max-height: 85vh;
        max-height: 85dvh;
    }
}

/* ========================================
   Pygments Syntax Highlighting (Dracula-inspired)
   ======================================== */

.post-content .highlight pre { line-height: 125%; }
.post-content .highlight td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
.post-content .highlight span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
.post-content .highlight td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.post-content .highlight span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.post-content .highlight .hll { background-color: #49483e }
.post-content .highlight .c { color: #959077 } /* Comment */
.post-content .highlight .err { color: #ed007e; background-color: #1e0010 } /* Error */
.post-content .highlight .esc { color: #f8f8f2 } /* Escape */
.post-content .highlight .g { color: #f8f8f2 } /* Generic */
.post-content .highlight .k { color: #66d9ef } /* Keyword */
.post-content .highlight .l { color: #ae81ff } /* Literal */
.post-content .highlight .n { color: #f8f8f2 } /* Name */
.post-content .highlight .o { color: #ff4689 } /* Operator */
.post-content .highlight .x { color: #f8f8f2 } /* Other */
.post-content .highlight .p { color: #f8f8f2 } /* Punctuation */
.post-content .highlight .ch { color: #959077 } /* Comment.Hashbang */
.post-content .highlight .cm { color: #959077 } /* Comment.Multiline */
.post-content .highlight .cp { color: #959077 } /* Comment.Preproc */
.post-content .highlight .cpf { color: #959077 } /* Comment.PreprocFile */
.post-content .highlight .c1 { color: #959077 } /* Comment.Single */
.post-content .highlight .cs { color: #959077 } /* Comment.Special */
.post-content .highlight .gd { color: #ff4689 } /* Generic.Deleted */
.post-content .highlight .ge { color: #f8f8f2; font-style: italic } /* Generic.Emph */
.post-content .highlight .ges { color: #f8f8f2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.post-content .highlight .gr { color: #f8f8f2 } /* Generic.Error */
.post-content .highlight .gh { color: #f8f8f2 } /* Generic.Heading */
.post-content .highlight .gi { color: #a6e22e } /* Generic.Inserted */
.post-content .highlight .go { color: #66d9ef } /* Generic.Output */
.post-content .highlight .gp { color: #ff4689; font-weight: bold } /* Generic.Prompt */
.post-content .highlight .gs { color: #f8f8f2; font-weight: bold } /* Generic.Strong */
.post-content .highlight .gu { color: #959077 } /* Generic.Subheading */
.post-content .highlight .gt { color: #f8f8f2 } /* Generic.Traceback */
.post-content .highlight .kc { color: #66d9ef } /* Keyword.Constant */
.post-content .highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.post-content .highlight .kn { color: #ff4689 } /* Keyword.Namespace */
.post-content .highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.post-content .highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.post-content .highlight .kt { color: #66d9ef } /* Keyword.Type */
.post-content .highlight .ld { color: #e6db74 } /* Literal.Date */
.post-content .highlight .m { color: #ae81ff } /* Literal.Number */
.post-content .highlight .s { color: #e6db74 } /* Literal.String */
.post-content .highlight .na { color: #a6e22e } /* Name.Attribute */
.post-content .highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.post-content .highlight .nc { color: #a6e22e } /* Name.Class */
.post-content .highlight .no { color: #66d9ef } /* Name.Constant */
.post-content .highlight .nd { color: #a6e22e } /* Name.Decorator */
.post-content .highlight .ni { color: #f8f8f2 } /* Name.Entity */
.post-content .highlight .ne { color: #a6e22e } /* Name.Exception */
.post-content .highlight .nf { color: #a6e22e } /* Name.Function */
.post-content .highlight .nl { color: #f8f8f2 } /* Name.Label */
.post-content .highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.post-content .highlight .nx { color: #a6e22e } /* Name.Other */
.post-content .highlight .py { color: #f8f8f2 } /* Name.Property */
.post-content .highlight .nt { color: #ff4689 } /* Name.Tag */
.post-content .highlight .nv { color: #f8f8f2 } /* Name.Variable */
.post-content .highlight .ow { color: #ff4689 } /* Operator.Word */
.post-content .highlight .pm { color: #f8f8f2 } /* Punctuation.Marker */
.post-content .highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.post-content .highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
.post-content .highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.post-content .highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.post-content .highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.post-content .highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.post-content .highlight .sa { color: #e6db74 } /* Literal.String.Affix */
.post-content .highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.post-content .highlight .sc { color: #e6db74 } /* Literal.String.Char */
.post-content .highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
.post-content .highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.post-content .highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.post-content .highlight .se { color: #ae81ff } /* Literal.String.Escape */
.post-content .highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.post-content .highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.post-content .highlight .sx { color: #e6db74 } /* Literal.String.Other */
.post-content .highlight .sr { color: #e6db74 } /* Literal.String.Regex */
.post-content .highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.post-content .highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.post-content .highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.post-content .highlight .fm { color: #a6e22e } /* Name.Function.Magic */
.post-content .highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.post-content .highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.post-content .highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.post-content .highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
.post-content .highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */

/* ========================================
   Themes
   ======================================== */

html.theme-grayscale {
    filter: grayscale(1);
}

html.theme-birthday {
    --bg-primary:   #1a0808;
    --bg-secondary: #2a1010;
    --bg-card:      #3a1818;
    --text-primary: #f0e0e0;
    --text-secondary: #c0a0a0;
    --text-muted:   #805050;
    --accent:       var(--theme-accent, #ff4444);
    --accent-hover: var(--theme-accent-hover, #ff6666);
    --accent-subtle: color-mix(in srgb, var(--accent) 12%, transparent);
    --border:       #5a2828;
    --border-light: #3a1818;
    --code-bg:      #120808;
}

html.theme-birthday body {
    background: var(--bg-primary);
    background-image: var(--theme-bg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    animation: none;
}

html.theme-birthday body::before,
html.theme-birthday body::after {
    display: none;
}

html.theme-birthday #mouse-glow,
html.theme-birthday .ripple {
    display: none !important;
}

html.theme-birthday .site-title {
    -webkit-text-fill-color: var(--accent);
    background: none;
    animation: none;
}

html.theme-birthday .nav-link.active::after {
    box-shadow: none;
}

html.theme-birthday .error-code {
    -webkit-text-fill-color: var(--accent);
    background: none;
    animation: none;
}

html.theme-birthday ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

html.theme-birthday ::-webkit-scrollbar-thumb {
    background: var(--border);
}

html.theme-birthday ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ========================================
   AI Chat Widget
   ======================================== */

.ai-chat {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 900;
}

.ai-toggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    transition: transform 200ms ease, background 200ms ease;
    position: relative;
}

.ai-toggle:hover {
    background: var(--accent-hover);
    transform: scale(1.06);
}

.ai-toggle svg {
    position: relative;
    z-index: 1;
}

.ai-panel {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    z-index: 900;
}

.ai-panel.open {
    transform: translateX(0);
}

.ai-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.ai-header-icon {
    display: flex;
    color: var(--accent);
}

.ai-header-title {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.ai-close {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, color 200ms ease;
}

.ai-close:hover {
    background: var(--accent-subtle);
    color: var(--text-primary);
}

.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overscroll-behavior: contain;
}

.ai-msg {
    display: flex;
    gap: 8px;
    max-width: 100%;
}

.ai-msg-user {
    flex-direction: row-reverse;
}

.ai-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    font-family: var(--font-sans);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
}

.ai-msg-user .ai-msg-avatar {
    background: var(--text-muted);
    font-size: 0.6rem;
}

.ai-msg-content {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    line-height: 1.6;
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 85%;
    word-wrap: break-word;
}

.ai-msg-ai .ai-msg-content {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-top-left-radius: 4px;
}

.ai-msg-ai .ai-msg-content p {
    margin: 0 0 6px;
}

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

.ai-msg-ai .ai-msg-content code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    background: var(--code-bg);
    padding: 1px 5px;
    border-radius: 4px;
    word-break: break-word;
    font-variant-ligatures: none;
}

.ai-msg-ai .ai-msg-content pre {
    margin: 6px 0;
    border-radius: 6px;
    overflow-x: auto;
}

.ai-msg-ai .ai-msg-content pre code {
    display: block;
    padding: 10px 12px;
    background: var(--code-bg);
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre;
}

.ai-msg-ai .ai-msg-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ai-msg-ai .ai-msg-content a:hover {
    color: var(--accent-hover);
}

.ai-msg-ai .ai-msg-content strong {
    font-weight: 700;
}

.ai-msg-ai .ai-msg-content em {
    font-style: italic;
}

.ai-msg-ai .ai-msg-content s {
    text-decoration: line-through;
    opacity: 0.7;
}

.ai-msg-ai .ai-msg-content blockquote {
    margin: 4px 0;
    padding: 4px 10px;
    border-left: 3px solid var(--accent);
    color: var(--text-secondary);
    background: var(--accent-subtle);
    border-radius: 0 4px 4px 0;
}

.ai-msg-ai .ai-msg-content blockquote p {
    margin: 0;
}

.ai-msg-ai .ai-msg-content ul,
.ai-msg-ai .ai-msg-content ol {
    margin: 4px 0;
    padding-left: 20px;
}

.ai-msg-ai .ai-msg-content li {
    margin-bottom: 2px;
}

.ai-msg-ai .ai-msg-content hr {
    border: none;
    height: 1px;
    background: var(--border);
    margin: 10px 0;
}

.ai-msg-user .ai-msg-content {
    background: var(--accent);
    color: #fff;
    border-top-right-radius: 4px;
}

/* Thinking animation */
.ai-thinking {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 12px 18px;
}

.ai-thinking span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: aiThink 1.2s ease-in-out infinite;
}

.ai-thinking span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-thinking span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes aiThink {
    0%, 80%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    40% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Input area */
.ai-input-area {
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.ai-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ai-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 200ms ease;
}

.ai-input:focus {
    border-color: var(--accent);
}

.ai-input::placeholder {
    color: var(--text-muted);
}

.ai-send {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, opacity 200ms ease;
    flex-shrink: 0;
}

.ai-send:hover {
    background: var(--accent-hover);
}

.ai-send:disabled {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 480px) {
    .ai-panel {
        width: 100vw;
    }

    .ai-chat {
        bottom: 16px;
        right: 16px;
    }
}