/**
 * 绰瑞超创 - style-patches.css
 * CSS 补丁文件：品牌色主题 + TOC样式 + 分享按钮 + 阅读进度条 + 404页面
 * 
 * 使用方式：在页面中引入此文件即可生效
 * <link rel="stylesheet" href="/css/style-patches.css">
 */

/* ========== 品牌色主题 ========== */
/**
 * 品牌色系：深渊蓝 #0A1628（背景）+ 碎金 #D4A843（主色）
 * 辅助色：#F0D68A（金色渐变亮端）、#1A2A4A（深蓝色卡片背景）
 * 风格：深沉、锐利、魔幻感
 */
[data-theme-style="brand"] {
    /* 覆盖核心颜色变量 */
    --bg: #0A1628;
    --bg-deep: #060b14;
    --bg-card: rgba(26, 42, 74, 0.85);
    --bg-card-hover: rgba(36, 56, 94, 0.9);
    
    /* 品牌主色：碎金 */
    --primary: #D4A843;
    --primary-dim: rgba(212, 168, 67, 0.15);
    --accent: #F0D68A;
    
    /* 辅助色调整 */
    --secondary: #8B6914;
    --accent: #F0D68A;
    
    /* 文字颜色 */
    --text: #E8EDF5;
    --text-light: #9AABC2;
    --text-muted: #6B7D99;
    
    /* 边框 */
    --border: rgba(212, 168, 67, 0.1);
    --border-active: rgba(212, 168, 67, 0.4);
    
    /* 发光效果（品牌金色） */
    --glow-cyan: 0 0 20px rgba(212, 168, 67, 0.25);
    --glow-gold: 0 0 20px rgba(212, 168, 67, 0.3);
    --glow-purple: 0 0 20px rgba(139, 105, 20, 0.2);
    
    /* 主题名称 */
    --theme-name: "品牌色";
    --theme-icon: "👑";
    
    /* 渐变 */
    --gradient-main: linear-gradient(135deg, #D4A843, #F0D68A, #D4A843);
}

/* 品牌主题下的导航logo发光效果 */
[data-theme-style="brand"] .nav-logo {
    color: var(--primary);
    text-shadow: 0 0 16px rgba(212, 168, 67, 0.6);
}

/* 品牌主题下的Hero标题渐变 */
[data-theme-style="brand"] .hero h1 {
    background: linear-gradient(135deg, var(--primary), var(--accent), var(--primary));
    background-size: 200% auto;
}

/* 品牌主题下的卡片hover效果 */
[data-theme-style="brand"] .post-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), var(--glow-gold);
}

/* 品牌主题下的Section标题 */
[data-theme-style="brand"] .section-header h2 {
    color: var(--primary);
    text-shadow: 0 0 20px rgba(212, 168, 67, 0.3);
}

/* ========== 默认主题的金色微调 ========== */
/**
 * 将默认主题的 --gold 从 #fbbf24 调整为品牌碎金 #D4A843
 * 保持青色/紫色不变
 */
[data-theme-style="futuristic"] {
    --gold: #D4A843;
}


/* ========== 文章目录 TOC 样式 ========== */

/* TOC 容器 */
.toc-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    font-size: var(--fs-small);
    transition: all 0.3s ease;
    overflow: hidden;
}

/* TOC 标题栏 */
.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--primary-dim);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}

.toc-header span {
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.5px;
}

.toc-toggle {
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0.25rem;
    transition: transform 0.3s;
}

/* TOC 导航列表 */
.toc-nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.toc-panel.expanded .toc-nav {
    max-height: 80vh;
}

/* TOC 项目 */
.toc-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-light);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toc-item:hover {
    color: var(--primary);
    background: var(--primary-dim);
    border-left-color: var(--primary);
}

.toc-item.active {
    color: var(--primary);
    background: var(--primary-dim);
    border-left-color: var(--primary);
    font-weight: 600;
}

/* TOC 层级缩进 */
.toc-level-1 { padding-left: 1rem; }
.toc-level-2 { padding-left: 1.5rem; }
.toc-level-3 { padding-left: 2rem; }
.toc-level-4 { padding-left: 2.5rem; font-size: var(--fs-tiny); }

/* ========== 桌面端 TOC 定位 ========== */
@media (min-width: 1200px) {
    .post-with-toc {
        display: flex;
        gap: 2rem;
        max-width: 1080px;
        margin: 0 auto;
    }
    
    .post-with-toc .post-detail-article,
    .post-with-toc #postContent {
        flex: 1;
        min-width: 0;
        width: auto;
        max-width: 800px;
    }
    
    .toc-panel {
        position: sticky;
        top: 80px;
        width: 200px;
        max-height: 80vh;
        flex-shrink: 0;
        align-self: flex-start;
    }
    
    .toc-panel.mobile {
        display: none;
    }
}

/* ========== 移动端 TOC ========== */
@media (max-width: 1199px) {
    .toc-panel.mobile {
        display: block;
        width: 100%;
        margin-bottom: 1.5rem;
    }
    
    .toc-panel:not(.mobile) {
        display: none;
    }
}


/* ========== 社交分享按钮样式 ========== */

/* 分享栏容器 */
.share-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.25rem;
    margin-top: 2rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.share-label {
    color: var(--text-light);
    font-size: var(--fs-small);
    font-weight: 500;
}

/* 分享按钮 */
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: var(--primary-dim);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text-light);
    font-size: var(--fs-small);
    cursor: pointer;
    transition: all 0.3s ease;
}

.share-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--bg);
    box-shadow: var(--glow-cyan);
    transform: translateY(-2px);
}

.share-btn span {
    display: inline-block;
}

/* 分享提示 */
.share-tip {
    width: 100%;
    padding: 0.75rem;
    background: var(--primary-dim);
    border: 1px solid var(--primary);
    border-radius: 8px;
    color: var(--primary);
    font-size: var(--fs-small);
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.share-tip.visible {
    opacity: 1;
    transform: translateY(0);
}


/* ========== 阅读进度条样式 ========== */

/* 进度条容器 */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}

/* 进度条本体 */
.reading-progress-bar {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    transition: transform 0.1s ease-out;
}

/* 毛玻璃效果（可选） */
.reading-progress::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    opacity: 0.3;
    animation: progressShimmer 2s ease-in-out infinite;
}

@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}


/* ========== 404 页面样式 ========== */

/* 404 页面容器 */
.page-404 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.page-404 .error-code {
    font-family: var(--font-display);
    font-size: clamp(6rem, 20vw, 12rem);
    font-weight: 800;
    color: var(--primary);
    text-shadow: var(--glow-cyan);
    line-height: 1;
    margin-bottom: 1rem;
    animation: glitch404 3s ease-in-out infinite;
}

@keyframes glitch404 {
    0%, 90%, 100% { 
        transform: translateX(0);
        text-shadow: var(--glow-cyan);
    }
    92% { 
        transform: translateX(-5px);
        text-shadow: -3px 0 var(--secondary), 3px 0 var(--accent);
    }
    94% { 
        transform: translateX(5px);
        text-shadow: 3px 0 var(--secondary), -3px 0 var(--accent);
    }
    96% { 
        transform: translateX(-3px);
        text-shadow: var(--glow-cyan);
    }
}

.page-404 .error-title {
    font-size: var(--fs-h2);
    color: var(--text);
    margin-bottom: 0.5rem;
}

.page-404 .error-desc {
    font-size: var(--fs-body);
    color: var(--text-light);
    margin-bottom: 2rem;
    max-width: 400px;
}

/* 404 搜索框 */
.page-404 .search-box {
    display: flex;
    gap: 0.5rem;
    max-width: 400px;
    width: 100%;
    margin-bottom: 2rem;
}

.page-404 .search-box input {
    flex: 1;
    padding: 0.75rem 1rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-size: var(--fs-body);
    outline: none;
    transition: all 0.3s;
}

.page-404 .search-box input:focus {
    border-color: var(--primary);
    box-shadow: var(--glow-cyan);
}

.page-404 .search-box button {
    padding: 0.75rem 1.25rem;
    background: var(--primary);
    border: none;
    border-radius: var(--radius);
    color: var(--bg);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.page-404 .search-box button:hover {
    transform: scale(1.05);
    box-shadow: var(--glow-cyan);
}

/* 404 返回按钮 */
.page-404 .back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: var(--fs-body);
    text-decoration: none;
    transition: all 0.3s;
}

.page-404 .back-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--glow-cyan);
}

/* 404 装饰元素 */
.page-404 .error-decoration {
    position: absolute;
    width: min(400px, 80vw);
    height: min(400px, 80vw);
    border: 1px solid var(--border);
    border-radius: 50%;
    opacity: 0.3;
    animation: orbit404 20s linear infinite;
}

.page-404 .error-decoration::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    width: 20px;
    height: 20px;
    background: var(--primary);
    border-radius: 50%;
    box-shadow: var(--glow-cyan);
}

@keyframes orbit404 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}


/* ========== 辅助工具类 ========== */

/* 文章内容区域的最大宽度（配合TOC使用） */
.post-article {
    max-width: var(--content-width);
}

/* ========== 首页动态信息栏 ========== */
.live-bar {
    padding: clamp(1rem, 3vw, 2rem) 0;
}

.live-bar-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.live-card {
    text-align: center;
    padding: 1.5rem;
}

.live-card-title {
    font-size: 0.9rem;
    color: var(--accent);
    margin-bottom: 0.8rem;
    letter-spacing: 0.1em;
}

.live-card-text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
    min-height: 2.4rem;
}

.live-card-from {
    font-size: 0.8rem;
    color: var(--text-light);
}

.live-card-city {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.3rem;
}

.live-card-temp {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

.live-card-desc {
    font-size: 0.9rem;
    color: var(--text-light);
}

.live-card-uptime {
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 动态信息栏移动端 */
@media (max-width: 768px) {
    .live-bar-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .live-card {
        padding: 1.2rem;
    }

    .live-card-temp {
        font-size: 1.6rem;
    }

    .live-card-uptime {
        font-size: 1.1rem;
    }
}

@media (max-width: 400px) {
    .live-card {
        padding: 1rem;
    }

    .live-card-temp {
        font-size: 1.4rem;
    }
}

/* 移动端优化 */
@media (max-width: 768px) {
    .share-bar {
        justify-content: center;
    }
    
    .share-btn span {
        display: none;
    }
    
    .share-btn {
        padding: 0.6rem 0.8rem;
    }
    
    .page-404 .error-code {
        font-size: clamp(5rem, 25vw, 8rem);
    }

    /* 动态信息栏移动端：单列排列 */
    .section[style*="grid"] > div,
    #live-bar > div {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* 天气卡片温度字号缩小 */
    #weatherTemp {
        font-size: 1.6rem !important;
    }

    /* 文章详情页移动端 */
    .section[style*="max-width:800px"],
    #postDetail {
        max-width: 100% !important;
        padding: 0 var(--space-sm) !important;
    }

    /* 文章内容区域文字大小优化 */
    #postContent {
        font-size: var(--fs-body);
        word-break: normal;
        overflow-wrap: anywhere;
    }

    #postContent table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        font-size: 0.85rem;
    }

    #postContent pre {
        font-size: 0.82rem;
        padding: 0.75rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #postContent blockquote {
        padding: 0.6rem 0.8rem;
        margin: 0.8em 0;
    }

    /* 文章详情页 postDetail 间距 */
    #postDetail h1 {
        font-size: 1.3rem !important;
    }

    #postDate, #postViews {
        font-size: 0.78rem !important;
    }

    /* TOC 移动端适配 */
    .toc-panel {
        margin-bottom: 1rem;
        font-size: 0.85rem;
    }

    .toc-item {
        padding: 0.4rem 0.75rem;
    }

    /* 阅读进度条在移动端更细 */
    .reading-progress {
        height: 2px;
    }

    /* 主题切换按钮移动端：保持44px最小触摸目标 */
    .theme-toggle {
        width: 44px;
        height: 44px;
        font-size: 0.85rem;
        margin-left: 6px;
    }

    #favStyleBtn {
        font-size: 1rem;
    }

    /* 留言页表单移动端优化 */
    #contactForm input,
    #contactForm textarea {
        font-size: 16px; /* 防止 iOS 缩放 */
    }
}

/* 超小屏幕 */
@media (max-width: 400px) {
    /* 动态信息栏内边距 */
    .post-card[style*="padding:1.5rem"] {
        padding: 1rem !important;
    }

    #weatherTemp {
        font-size: 1.4rem !important;
    }

    /* 分享按钮只显示图标 */
    .share-label {
        display: none;
    }

    .share-btn {
        padding: 0.5rem 0.6rem;
        font-size: 0.9rem;
    }
}

/* ========== 文章详情页布局 ========== */
.post-detail-article {
    max-width: 760px;
    width: auto;
    margin: 0 auto;
    padding-top: clamp(5rem, 10vw, 7rem);
    overflow-wrap: break-word;
    text-align: left;
}

/* 强制文章正文左对齐，覆盖 .section 的居中继承，避免标题/列表/引用被居中 */
.post-detail-article,
.post-detail-article * { text-align: left; }
#postContent h1, #postContent h2, #postContent h3, #postContent h4, #postContent h5, #postContent h6,
#postContent p, #postContent li, #postContent blockquote, #postContent td, #postContent th,
#postContent dd, #postContent dt, #postContent figcaption { text-align: left; }

.post-detail-article h1 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    color: var(--text);
    letter-spacing: 1px;
    margin-bottom: 1rem;
    line-height: 1.4;
}

/* 文章内容区域排版 */
#postContent { overflow-wrap: anywhere; word-break: normal; line-break: strict; text-align: left; width: 100%; }
#postContent p { margin: 0.6em 0; line-height: 1.75; text-align: left; }
#postContent h2 { margin: 1.5em 0 0.5em; font-size: 1.3rem; }
#postContent h3 { margin: 1.2em 0 0.4em; font-size: 1.1rem; }
#postContent h4 { margin: 1em 0 0.3em; font-size: 1rem; }
#postContent ul, #postContent ol { margin: 0.5em 0; padding-left: 1.5em; }
#postContent li { margin: 0.3em 0; line-height: 1.7; }
#postContent hr { border: none; border-top: 1px solid rgba(0,229,255,0.15); margin: 1.5em 0; }
#postContent img { max-width: 100%; border-radius: 8px; margin: 1em 0; height: auto; }
#postContent pre { max-width: 100%; overflow-x: auto; }

.post-meta-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-light);
}

.post-recommend-section {
    max-width: 800px;
    margin: 2rem auto 0;
}

/* 文章详情页移动端 */
@media (max-width: 768px) {
    .post-detail-article {
        padding: clamp(4.5rem, 8vw, 5.5rem) var(--space-sm) 0;
    }

    .post-detail-article h1 {
        font-size: 1.3rem;
    }

    .post-meta-bar {
        font-size: 0.78rem;
        gap: 0.5rem;
    }

    .post-recommend-section {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
}

/* 横屏手机优化 */
@media (max-width: 896px) and (orientation: landscape) {
    .nav-links.open {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1rem;
    }

    .nav-links a {
        font-size: 0.95rem;
    }
}

/* 触屏设备 hover 优化 */
@media (hover: none) {
    .post-card:hover {
        transform: none !important;
    }

    .hobby-card:hover {
        transform: none !important;
    }

    .share-btn:hover {
        transform: none !important;
    }

    .page-404 .back-btn:hover {
        transform: none !important;
    }
}

/* ========== 精选推荐卡片（首页） ========== */
.featured-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 3vw, 2rem);
}

.featured-grid .post-card {
    text-align: center;
}

.featured-grid .post-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.featured-grid .post-card p {
    font-size: 0.85rem;
    color: var(--text-light);
}

/* ========== 留言表单 ========== */
.contact-intro {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.contact-form {
    max-width: 500px;
    margin: 0 auto;
}

.contact-form .form-group {
    margin-bottom: 1rem;
}

.contact-form label {
    display: block;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 0.3rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--primary);
}

.contact-form textarea {
    resize: vertical;
}

.contact-form .submit-btn {
    width: 100%;
    padding: 12px;
}

.contact-form .form-message {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    display: none;
}

/* 蜜罐字段：对真实用户隐藏，对普通屏幕阅读器不可见 */
.honeypot-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ========== 关于页 ========== */
.about-story {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
    line-height: 1.8;
    font-size: 1rem;
}

.about-skills-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.about-skills-grid .post-card {
    text-align: center;
}

.about-skills-grid .post-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.about-skills-grid .post-card p {
    font-size: 0.85rem;
}

.about-values-grid {
    max-width: 700px;
    margin: 0 auto;
    justify-content: center;
}

.about-values-text {
    max-width: 700px;
    margin: 2rem auto 0;
    text-align: left;
    line-height: 1.8;
    font-size: 0.95rem;
}

.about-contact-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 600px;
    margin: 0 auto;
    gap: 1.5rem;
}

.about-contact-grid .btn-primary,
.about-contact-grid .btn-secondary {
    text-align: center;
    display: block;
}

.about-email-hint {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.about-email-link {
    color: var(--primary);
    text-decoration: none;
}

/* 关于页联系方式按钮在小屏下垂直堆叠，保持居中 */
@media (max-width: 480px) {
    .about-contact-grid {
        flex-direction: column;
        align-items: stretch;
    }
    .about-contact-grid .btn-primary,
    .about-contact-grid .btn-secondary {
        width: 100%;
    }
}

/* ========== 章节通用辅助类（替代被 CSP 阻止的内联样式） ========== */
.section-centered { text-align: center; }
.section-tight { padding: clamp(1.5rem, 4vw, 3rem) 0; }
.section-soft { padding: clamp(2rem, 6vw, 4rem) 0; }
.section-tighter { padding: clamp(1rem, 3vw, 2rem) 0; }
.section-pb-tight { padding-bottom: clamp(2rem, 6vw, 4rem); }

/* ========== 文章返回按钮 ========== */
.back-to-blog {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    transition: all 0.2s;
    border: 1px solid var(--border);
}

.back-to-blog:hover {
    color: var(--primary);
    border-color: var(--primary);
    background: var(--primary-dim);
}

/* ========== 加载动画 ========== */
.loading-skeleton {
    background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--radius);
    min-height: 120px;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.posts-grid .loading-skeleton + .loading-skeleton {
    margin-top: 1rem;
}

/* ========== P1-4/P1-5: 博客搜索+分类筛选 ========== */
.blog-toolbar{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem;align-items:center}
.blog-search{flex:1;min-width:200px}
.blog-search-input{width:100%;padding:0.6rem 1rem;border:1px solid var(--border);border-radius:var(--radius,14px);background:var(--bg-card);color:var(--text);font-size:0.9rem;outline:none;transition:border-color 0.3s}
.blog-search-input:focus{border-color:var(--border-active)}
.blog-search-input::placeholder{color:var(--text-muted)}
.blog-categories{display:flex;flex-wrap:wrap;gap:0.5rem}
.cat-btn{padding:0.5rem 0.9rem;min-height:44px;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-light);font-size:0.8rem;cursor:pointer;transition:all 0.3s;white-space:nowrap;display:inline-flex;align-items:center}
.cat-btn:hover{border-color:var(--border-active);color:var(--primary)}
.cat-btn.active{background:var(--primary);color:var(--bg);border-color:var(--primary)}

/* P2-5: 爱好卡片链接 */
.hobby-card-link{text-decoration:none;color:var(--text);display:block;transition:transform 0.3s,box-shadow 0.3s}
.hobby-card-link:hover{transform:translateY(-4px) !important;box-shadow:0 8px 24px rgba(0,0,0,0.08)}

/* P3-4: Prism 代码高亮主题适配 */
pre[class*="language-"]{border-radius:var(--radius,14px);margin:1.5rem 0;font-size:0.85rem;line-height:1.6}
code[class*="language-"]{font-family:'Fira Code','Cascadia Code',Consolas,monospace}
:not(pre)>code{background:var(--primary-dim);padding:0.15em 0.4em;border-radius:4px;font-size:0.88em;font-family:'Fira Code',Consolas,monospace}

/* P2-3: 暗/亮模式切换按钮 */
.theme-toggle{cursor:pointer;transition:transform 0.3s}
.theme-toggle:hover{transform:scale(1.15)}

/* ========== P3-2: 文章封面图样式 ========== */
.post-card.with-cover {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.post-card.with-cover .post-cover {
    width: 100%;
    height: 160px;
    overflow: hidden;
    flex-shrink: 0;
}
.post-card.with-cover .post-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.post-card.with-cover:hover .post-cover img {
    transform: scale(1.05);
}
.post-card.with-cover .post-body {
    padding: 1.2rem 1.4rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.post-card.with-cover .post-body h3 {
    margin-top: 0;
}

/* ========== P3-2: 爱好页配图样式 ========== */
.hobby-card-link .hobby-cover {
    width: 100%;
    height: 120px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    margin: -1.4rem -1.4rem 1rem -1.4rem;
}
.hobby-card-link .hobby-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.hobby-card-link:hover .hobby-cover img {
    opacity: 1;
    transform: scale(1.05);
}

/* 暗/亮模式切换按钮样式 */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--accent, #00e5ff);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s, box-shadow 0.2s;
}
.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0,229,255,0.4);
}

/* 文章详情页封面横幅 */
.post-cover-hero {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.post-cover-hero img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
}
@media (max-width: 768px) {
    .post-cover-hero { border-radius: 8px; }
    .post-cover-hero img { height: 180px; border-radius: 8px; }
    .post-card.with-cover .post-cover { height: 120px; }
}

/* ========== 页脚升级补充 ========== */
.footer-social { display: none; } /* 旧页脚导航已合并到 footer-columns */
[data-theme-style="nature"] .footer::before,
[data-theme-style="mist"] .footer::before,
[data-theme-style="mint"] .footer::before,
[data-theme-style="lavendar"] .footer::before,
[data-theme-style="minimal"] .footer::before,
[data-theme-style="ink"] .footer::before,
[data-theme-style="breeze"] .footer::before { display:none }
[data-theme-style="futuristic"] .footer-nav a:hover,
[data-theme-style="futuristic"] .footer-links a:hover { letter-spacing:2px }
[data-theme-style="chrono"] .footer-nav a,
[data-theme-style="chrono"] .footer-links a { text-transform:uppercase; letter-spacing:3px; font-size:0.75rem }
[data-theme-style="retro"] .footer-nav a,
[data-theme-style="retro"] .footer-links a { text-transform:uppercase; letter-spacing:2px }
[data-theme-style="gothic"] .footer-nav a,
[data-theme-style="gothic"] .footer-links a { letter-spacing:2px }

/* ========== 骨架屏动画 ========== */
.skeleton-card { pointer-events:none }
.skeleton-cover { width:100%; height:140px; background:linear-gradient(90deg,var(--bg-card) 25%,var(--border) 50%,var(--bg-card) 75%); background-size:200% 100%; animation:skeleton-shimmer 1.5s infinite; border-radius:var(--radius,14px) var(--radius,14px) 0 0 }
.skeleton-line { height:14px; margin:8px 0; background:linear-gradient(90deg,var(--bg-card) 25%,var(--border) 50%,var(--bg-card) 75%); background-size:200% 100%; animation:skeleton-shimmer 1.5s infinite; border-radius:4px }
.skeleton-line.w30{width:30%}.skeleton-line.w40{width:40%}.skeleton-line.w50{width:50%}.skeleton-line.w60{width:60%}.skeleton-line.w70{width:70%}.skeleton-line.w80{width:80%}.skeleton-line.w90{width:90%}
@keyframes skeleton-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ========== Skip-nav 无障碍跳转链接 ========== */
.skip-nav{position:absolute;top:-100%;left:50%;transform:translateX(-50%);background:var(--primary);color:var(--bg-deep);padding:0.5rem 1.2rem;border-radius:0 0 8px 8px;font-size:0.9rem;z-index:9999;transition:top 0.2s;text-decoration:none;font-weight:600}
.skip-nav:focus{top:0}

/* ========== hobby-tag 可点击 ========== */
.hobby-tag{cursor:pointer;transition:all 0.3s}
.hobby-tag:hover{background:var(--primary);color:var(--bg-deep);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,229,255,0.2)}

/* ========== emoji aria-hidden ========== */
.post-card h3 .emoji-hidden{font-style:normal;speak:none}

/* ============================================================
   新功能样式：AI助手 + 时光胶囊 + 心情签到 + 随机发现 + 通知中心 + 沉浸阅读
   ============================================================ */

/* ========== AI助手对话窗口 ========== */
#ai-chat-bubble{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:var(--primary,#00e5ff);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(0,229,255,0.4);z-index:9998;transition:all 0.3s;border:none;outline:none}
#ai-chat-bubble:hover,#ai-chat-bubble.ai-chat-active{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,229,255,0.6)}
#ai-chat-window{position:fixed;bottom:92px;right:24px;width:360px;max-height:520px;border-radius:16px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1));box-shadow:0 8px 40px rgba(0,0,0,0.3);z-index:9997;display:flex;flex-direction:column;transform:translateY(20px) scale(0.95);opacity:0;pointer-events:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1)}
#ai-chat-window.ai-chat-open{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.ai-chat-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--border,rgba(255,255,255,0.1));font-weight:600;color:var(--text,#e0e0e0)}
.ai-chat-close{background:none;border:none;color:var(--text-muted,#888);font-size:22px;cursor:pointer;padding:0 4px;line-height:1}
.ai-chat-close:hover{color:var(--primary,#00e5ff)}
.ai-chat-messages{flex:1;overflow-y:auto;padding:14px;max-height:340px;scroll-behavior:smooth}
.ai-chat-msg{display:flex;gap:10px;margin-bottom:14px;align-items:flex-start}
.ai-chat-msg.ai-chat-user{flex-direction:row-reverse}
.ai-chat-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary,#00e5ff);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.ai-chat-avatar.user{background:var(--accent,#ff6b6b)}
.ai-chat-bubble{max-width:75%;padding:10px 14px;border-radius:12px;background:var(--bg-deep,#0d0d1a);color:var(--text,#e0e0e0);font-size:14px;line-height:1.6;word-break:break-word}
.ai-chat-msg.ai-chat-user .ai-chat-bubble{background:var(--primary,#00e5ff);color:#000;border-radius:12px 12px 4px 12px}
.ai-chat-msg.ai-chat-bot .ai-chat-bubble{border-radius:12px 12px 12px 4px}
.ai-typing-bubble span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--text-muted,#888);margin:0 2px;animation:aiTyping 1.4s infinite}
.ai-typing-bubble span:nth-child(2){animation-delay:0.2s}
.ai-typing-bubble span:nth-child(3){animation-delay:0.4s}
@keyframes aiTyping{0%,60%,100%{transform:translateY(0);opacity:0.4}30%{transform:translateY(-6px);opacity:1}}
.ai-chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border,rgba(255,255,255,0.1))}
.ai-chat-input input{flex:1;background:var(--bg-deep,#0d0d1a);border:1px solid var(--border,rgba(255,255,255,0.15));border-radius:10px;padding:8px 14px;color:var(--text,#e0e0e0);font-size:14px;outline:none;transition:border 0.2s}
.ai-chat-input input:focus{border-color:var(--primary,#00e5ff)}
.ai-chat-input button{background:var(--primary,#00e5ff);border:none;border-radius:10px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#000;transition:all 0.2s}
.ai-chat-input button:hover{transform:scale(1.05)}
@media(max-width:480px){#ai-chat-window{width:calc(100vw - 24px);right:12px;bottom:84px;max-height:60vh}}

/* ========== 时光胶囊 ========== */
.capsule-widget{margin:2rem 0;padding:2rem;border-radius:16px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1))}
.capsule-title{font-size:1.4rem;color:var(--primary,#00e5ff);margin-bottom:0.5rem}
.capsule-desc{color:var(--text-muted,#888);margin-bottom:1.5rem;font-size:0.95rem}
.capsule-form input[type="text"],.capsule-form textarea{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);color:var(--text,#e0e0e0);margin-bottom:10px;font-size:14px;outline:none;resize:vertical;font-family:inherit}
.capsule-form input:focus,.capsule-form textarea:focus{border-color:var(--primary,#00e5ff)}
.capsule-row{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.capsule-row input[type="date"]{padding:8px 12px;border-radius:8px;border:1px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);color:var(--text,#e0e0e0);font-size:14px}
.capsule-public{display:flex;align-items:center;gap:6px;color:var(--text-muted,#888);font-size:0.9rem;cursor:pointer}
.capsule-public input[type="checkbox"]{accent-color:var(--primary,#00e5ff)}
.capsule-submit{padding:10px 24px;border-radius:10px;background:var(--primary,#00e5ff);color:#000;border:none;font-weight:600;cursor:pointer;transition:all 0.3s;font-size:14px}
.capsule-submit:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,229,255,0.3)}
.capsule-submit:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.capsule-result{margin-top:16px;padding:16px;border-radius:12px;background:var(--bg-deep,#0d0d1a)}
.capsule-success{color:var(--primary,#00e5ff);font-weight:600;margin-bottom:8px}
.capsule-key{color:var(--text-muted,#888);font-size:0.9rem;margin-bottom:12px}
.capsule-key strong{color:var(--accent,#ff6b6b);font-family:monospace;font-size:1.05rem}
.capsule-check{display:flex;gap:8px}
.capsule-check input{flex:1;padding:8px 12px;border-radius:8px;border:1px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);color:var(--text,#e0e0e0);font-size:14px}
.capsule-wall{margin-top:20px}
.capsule-wall-title{font-size:1.1rem;color:var(--text,#e0e0e0);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border,rgba(255,255,255,0.1))}
.capsule-item{padding:12px 16px;border-radius:10px;background:var(--bg-deep,#0d0d1a);margin-bottom:8px;border-left:3px solid var(--primary,#00e5ff)}
.capsule-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.capsule-item-author{font-weight:600;color:var(--primary,#00e5ff);font-size:0.9rem}
.capsule-item-date{color:var(--text-muted,#888);font-size:0.8rem}
.capsule-item-content{color:var(--text,#e0e0e0);font-size:0.9rem;line-height:1.6}
.capsule-opened{color:var(--primary,#00e5ff);margin-top:8px;font-style:italic}
.capsule-sealed{color:var(--text-muted,#888);font-style:italic}
.capsule-can-open{color:var(--accent,#ff6b6b);font-weight:600}
.capsule-error{color:var(--accent,#ff6b6b)}

/* ========== 心情签到 ========== */
.mood-widget{margin:2rem 0;padding:2rem;border-radius:16px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1))}
.mood-title{font-size:1.4rem;color:var(--primary,#00e5ff);margin-bottom:1rem}
.mood-emojis{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mood-emoji-btn{width:48px;height:48px;border-radius:12px;border:2px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);font-size:24px;cursor:pointer;transition:all 0.2s;display:flex;align-items:center;justify-content:center}
.mood-emoji-btn:hover{transform:scale(1.15);border-color:var(--primary,#00e5ff)}
.mood-emoji-btn.mood-selected{border-color:var(--primary,#00e5ff);background:rgba(0,229,255,0.15);transform:scale(1.15);box-shadow:0 0 16px rgba(0,229,255,0.3)}
#mood-note{width:100%;padding:10px 14px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);color:var(--text,#e0e0e0);margin-bottom:10px;font-size:14px;outline:none;font-family:inherit}
#mood-note:focus{border-color:var(--primary,#00e5ff)}
.mood-submit{padding:10px 24px;border-radius:10px;background:var(--primary,#00e5ff);color:#000;border:none;font-weight:600;cursor:pointer;transition:all 0.3s;font-size:14px}
.mood-submit:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,229,255,0.3)}
.mood-submit:disabled{opacity:0.5;cursor:not-allowed}
.mood-success{color:var(--primary,#00e5ff);font-weight:600;padding:8px 0;font-size:1.1rem}
.mood-already{color:var(--text-muted,#888);padding:8px 0}
.mood-error{color:var(--accent,#ff6b6b);padding:8px 0}
.mood-wall{margin-top:16px}
.mood-stats{margin-bottom:16px}
.mood-stat-item{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.mood-stat-emoji{font-size:20px;width:28px;text-align:center}
.mood-stat-bar{flex:1;height:8px;border-radius:4px;background:var(--bg-deep,#0d0d1a);overflow:hidden}
.mood-stat-fill{height:100%;border-radius:4px;background:var(--primary,#00e5ff);transition:width 0.5s}
.mood-stat-count{font-size:12px;color:var(--text-muted,#888);width:24px;text-align:right}
.mood-recent{display:flex;flex-direction:column;gap:6px}
.mood-recent-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:var(--bg-deep,#0d0d1a);font-size:0.85rem}
.mood-recent-emoji{font-size:18px}
.mood-recent-label{color:var(--primary,#00e5ff);font-weight:500;min-width:32px}
.mood-recent-note{color:var(--text,#e0e0e0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mood-recent-time{color:var(--text-muted,#888);font-size:0.75rem}
.mood-empty{color:var(--text-muted,#888);text-align:center;padding:16px;font-style:italic}

/* ========== 随机发现 ========== */
.discover-widget{margin:2rem 0;text-align:center}
.discover-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;border-radius:12px;background:linear-gradient(135deg,var(--primary,#00e5ff),var(--accent,#ff6b6b));color:#000;border:none;font-weight:700;font-size:15px;cursor:pointer;transition:all 0.3s;box-shadow:0 4px 16px rgba(0,229,255,0.2)}
.discover-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 8px 24px rgba(0,229,255,0.4)}
.discover-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
.discover-spinning svg{animation:discoverSpin 1s linear infinite}
@keyframes discoverSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.discover-result{margin-top:20px;opacity:0;transform:translateY(10px);transition:all 0.4s}
.discover-result.discover-show{opacity:1;transform:translateY(0)}
.discover-card{max-width:480px;margin:0 auto;padding:24px;border-radius:16px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1));text-align:left}
.discover-label{font-size:0.8rem;text-transform:uppercase;letter-spacing:2px;color:var(--primary,#00e5ff);margin-bottom:10px;font-weight:600}
.discover-post h4{margin:0 0 8px;font-size:1.1rem}
.discover-post h4 a{color:var(--primary,#00e5ff);text-decoration:none}
.discover-post h4 a:hover{text-decoration:underline}
.discover-post p{color:var(--text-muted,#888);margin:0;font-size:0.9rem}
.discover-quote blockquote{margin:0 0 8px;font-size:1.05rem;line-height:1.7;color:var(--text,#e0e0e0);font-style:italic}
.discover-quote cite{color:var(--text-muted,#888);font-size:0.9rem;font-style:normal}
.discover-fact p{color:var(--text,#e0e0e0);line-height:1.7;margin:0;font-size:0.95rem}

/* ========== 通知中心 ========== */
#notification-bell{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;color:var(--text,#e0e0e0);transition:color 0.2s;border-radius:999px;flex-shrink:0;z-index:1002}
#notification-bell:hover{color:var(--primary,#00e5ff)}
@media(max-width:768px){.nav-inner>#notification-bell{order:2}}
.notification-badge{position:absolute;top:-2px;right:-4px;background:var(--accent,#ff6b6b);color:#fff;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}
#notification-panel{position:fixed;top:60px;right:16px;width:320px;max-height:400px;border-radius:12px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1));box-shadow:0 8px 32px rgba(0,0,0,0.3);z-index:9990;transform:translateY(-10px);opacity:0;pointer-events:none;transition:all 0.25s;overflow:hidden}
#notification-panel.notification-panel-open{transform:translateY(0);opacity:1;pointer-events:auto}
.notification-panel-header{padding:14px 16px;border-bottom:1px solid var(--border,rgba(255,255,255,0.1));font-weight:600;color:var(--text,#e0e0e0);font-size:15px}
.notification-panel-body{max-height:340px;overflow-y:auto;padding:8px}
.notification-empty{padding:24px;text-align:center;color:var(--text-muted,#888);font-style:italic}
.notification-item{display:flex;gap:10px;padding:12px;border-radius:8px;margin-bottom:4px;transition:background 0.2s;cursor:default}
.notification-item:hover{background:var(--bg-deep,#0d0d1a)}
.notification-item-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px}
.notification-info .notification-item-dot{background:var(--primary,#00e5ff)}
.notification-update .notification-item-dot{background:#4caf50}
.notification-alert .notification-item-dot{background:var(--accent,#ff6b6b)}
.notification-item-content{flex:1;min-width:0}
.notification-item-content strong{display:block;font-size:0.9rem;color:var(--text,#e0e0e0);margin-bottom:2px}
.notification-item-content p{margin:0;font-size:0.82rem;color:var(--text-muted,#888);line-height:1.4}
.notification-item-time{font-size:0.75rem;color:var(--text-muted,#666)}
@media(max-width:480px){#notification-panel{width:calc(100vw - 24px);right:12px}}

/* ========== 沉浸式阅读 ========== */
.immersive-btn{position:fixed;top:50%;right:12px;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.15));color:var(--text,#e0e0e0);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:999;transition:all 0.3s}
.immersive-btn:hover,.immersive-btn.immersive-active{background:var(--primary,#00e5ff);color:#000;box-shadow:0 4px 16px rgba(0,229,255,0.3)}
.immersive-mode .post-content{max-width:720px;margin:0 auto;font-size:1.1rem;line-height:2}
.immersive-mode .post-card,.immersive-mode #sidebar,.immersive-mode .post-sidebar{display:none !important}
.immersive-mode{background:var(--bg-deep,#0d0d1a) !important}

/* ========== 随机传送门 ========== */
.portal-widget{margin:2rem 0;padding:2rem;border-radius:20px;background:var(--card-bg,#1a1a2e);border:1px solid var(--border,rgba(255,255,255,0.1));position:relative;overflow:hidden}
.portal-widget::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(0,229,255,0.03),transparent,rgba(255,107,107,0.03),transparent);animation:portalBgSpin 12s linear infinite;pointer-events:none}
@keyframes portalBgSpin{to{transform:rotate(360deg)}}
.portal-header{text-align:center;position:relative}
.portal-title{font-size:1.5rem;color:var(--primary,#00e5ff);margin-bottom:0.3rem;position:relative}
.portal-desc{color:var(--text-muted,#888);font-size:0.92rem;margin-bottom:1.2rem;position:relative}
.portal-controls{margin-bottom:1.2rem;position:relative}
.portal-cat-btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.portal-cat-btn{padding:8px 16px;min-height:44px;border-radius:20px;border:1px solid var(--border,rgba(255,255,255,0.15));background:var(--bg-deep,#0d0d1a);color:var(--text-muted,#888);font-size:0.82rem;cursor:pointer;transition:all 0.25s;position:relative;display:inline-flex;align-items:center}
.portal-cat-btn:hover{border-color:var(--primary,#00e5ff);color:var(--primary,#00e5ff)}
.portal-cat-btn.active{background:var(--primary,#00e5ff);color:#000;border-color:var(--primary,#00e5ff);font-weight:600;box-shadow:0 2px 12px rgba(0,229,255,0.3)}
.portal-action{text-align:center;margin:1.5rem 0;position:relative}
.portal-open-btn{position:relative;padding:16px 40px;border-radius:50px;border:2px solid var(--primary,#00e5ff);background:transparent;color:var(--primary,#00e5ff);font-size:1rem;font-weight:700;cursor:pointer;transition:all 0.3s;display:inline-flex;align-items:center;gap:10px;overflow:hidden}
.portal-open-btn:hover{background:var(--primary,#00e5ff);color:#000;transform:scale(1.05);box-shadow:0 0 30px rgba(0,229,255,0.4)}
.portal-open-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}
.portal-open-btn:disabled .portal-icon svg{animation:portalSpin 1.5s linear infinite}
.portal-opening .portal-btn-text{animation:portalPulse 0.6s ease-in-out infinite alternate}
.portal-glow{position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:radial-gradient(circle,rgba(0,229,255,0.3),transparent);transform:translate(-50%,-50%);transition:all 0.5s}
.portal-open-btn:hover .portal-glow{width:200px;height:200px}
@keyframes portalSpin{to{transform:rotate(360deg)}}
@keyframes portalPulse{from{opacity:0.5}to{opacity:1}}

/* 传送门旋涡动画 */
.portal-result{position:relative;min-height:0;transition:all 0.4s}
.portal-animating{min-height:200px;display:flex;align-items:center;justify-content:center}
.portal-vortex{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center}
.portal-ring{position:absolute;border-radius:50%;border:2px solid;animation:portalRingSpin 2s linear infinite}
.portal-ring.r1{width:180px;height:180px;border-color:rgba(0,229,255,0.4);animation-duration:3s}
.portal-ring.r2{width:120px;height:120px;border-color:rgba(0,229,255,0.6);animation-duration:2s;animation-direction:reverse}
.portal-ring.r3{width:60px;height:60px;border-color:rgba(255,107,107,0.5);animation-duration:1.5s}
.portal-center{position:relative;color:var(--primary,#00e5ff);font-size:0.85rem;font-weight:600;z-index:1}
@keyframes portalRingSpin{to{transform:rotate(360deg)}}

/* 传送门结果卡片 */
.portal-show{min-height:auto}
.portal-card{position:relative;padding:24px;border-radius:16px;background:var(--bg-deep,#0d0d1a);border:1px solid var(--primary,rgba(0,229,255,0.3));overflow:hidden;animation:portalCardIn 0.5s ease-out}
.portal-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--primary,#00e5ff),var(--accent,#ff6b6b),var(--primary,#00e5ff));background-size:200% 100%;animation:portalShimmer 3s linear infinite}
@keyframes portalCardIn{from{opacity:0;transform:translateY(20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes portalShimmer{to{background-position:200% 0}}
.portal-card-glow{position:absolute;top:-20px;right:-20px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(0,229,255,0.15),transparent);pointer-events:none}
.portal-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.portal-card-cat{font-size:0.75rem;padding:3px 10px;border-radius:12px;background:rgba(0,229,255,0.15);color:var(--primary,#00e5ff);font-weight:600;letter-spacing:0.5px}
.portal-lang{font-size:0.7rem;padding:2px 8px;border-radius:8px;font-weight:600}
.portal-lang.zh{background:rgba(76,175,80,0.15);color:#4caf50}
.portal-lang.en{background:rgba(255,152,0,0.15);color:#ff9800}
.portal-card-name{font-size:1.2rem;color:var(--text,#e0e0e0);margin:0 0 8px;font-weight:700}
.portal-card-desc{color:var(--text-muted,#888);font-size:0.9rem;line-height:1.6;margin:0 0 16px}
.portal-card-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.portal-enter-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 22px;border-radius:10px;background:var(--primary,#00e5ff);color:#000;font-weight:700;font-size:0.9rem;text-decoration:none;transition:all 0.3s}
.portal-enter-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,229,255,0.4)}
.portal-save-btn{padding:8px 18px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,0.15));background:transparent;color:var(--text-muted,#888);font-size:0.85rem;cursor:pointer;transition:all 0.2s}
.portal-save-btn:hover{border-color:var(--primary,#00e5ff);color:var(--primary,#00e5ff)}
.portal-newtab-btn{padding:8px 18px;border-radius:10px;border:1px solid var(--border,rgba(255,255,255,0.15));background:transparent;color:var(--text-muted,#888);font-size:0.85rem;cursor:pointer;transition:all 0.2s;text-decoration:none;display:inline-flex;align-items:center}
.portal-newtab-btn:hover{border-color:var(--primary,#00e5ff);color:var(--primary,#00e5ff)}
.portal-save-btn:disabled{color:var(--primary,#00e5ff);border-color:var(--primary,#00e5ff)}
.portal-error{text-align:center;padding:24px;color:var(--accent,#ff6b6b)}

/* 传送记录 */
.portal-history{margin-top:16px;position:relative}
.portal-history-title{font-size:0.9rem;color:var(--text-muted,#888);margin-bottom:8px;font-weight:600}
.portal-history-list{display:flex;flex-wrap:wrap;gap:6px}
.portal-history-item{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:8px;background:var(--bg-deep,#0d0d1a);color:var(--text-muted,#888);font-size:0.8rem;text-decoration:none;transition:all 0.2s;border:1px solid transparent}
.portal-history-item:hover{color:var(--primary,#00e5ff);border-color:var(--primary,#00e5ff)}
.portal-history-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal-history-arrow{font-size:0.7rem;opacity:0.5}

@media(max-width:600px){
    .portal-widget{padding:1.2rem}
    .portal-cat-btns{gap:4px}
    .portal-cat-btn{padding:4px 10px;font-size:0.75rem}
    .portal-open-btn{padding:12px 28px;font-size:0.9rem}
    .portal-card-actions{flex-direction:column}
    .portal-enter-btn,.portal-save-btn{width:100%;justify-content:center}
}

/* ============================================
   360浏览器 / 旧内核兼容性降级
   问题：var()、clamp()、gap、grid 在 IE 内核/旧 Chromium 下不生效
   策略：用 @supports not (color: var(--test)) 包裹，只在 var() 不支持时才降级
   ============================================ */

@supports not (color: var(--test)) {

/* body 基础色 fallback——var() 不支持时文字变黑，暗背景上完全不可见 */
body {
    font-family: 'Inter', 'Noto Sans SC', -apple-system, sans-serif;
    background-color: #06060e;
    color: #e2e8f0;
}
a { color: #00e5ff; }
a:hover { color: #f0abfc; }

/* 文章内容区域——AI速览格式修复核心 */
#postContent {
    font-size: 0.95rem;
    color: #e2e8f0;
    line-height: 1.75;
}
#postContent h1,
#postContent h2,
#postContent h3,
#postContent h4,
#postContent h5,
#postContent h6 {
    color: #e2e8f0;
    line-height: 1.4;
}
#postContent h1 { font-size: 1.8rem; }
#postContent h2 { font-size: 1.5rem; border-bottom: 1px solid rgba(0,229,255,0.15); padding-bottom: 0.3em; }
#postContent h3 { font-size: 1.25rem; }
#postContent p {
    margin: 0.6em 0;
    line-height: 1.75;
    color: #e2e8f0;
    text-align: left;
}
/* em/斜体点评——AI速览大量使用 💬 *斜体* 模式 */
#postContent em {
    color: #a855f7;
    font-style: italic;
}
#postContent i {
    color: #a855f7;
}
/* 链接在文章中 */
#postContent a {
    color: #00e5ff;
    text-decoration: underline;
}
#postContent a:hover {
    color: #f0abfc;
}
/* 引用块 */
#postContent blockquote {
    border-left: 4px solid #00e5ff;
    background: rgba(0,229,255,0.06);
    color: #7a8ba8;
    padding: 0.8em 1.2em;
    margin: 1em 0;
    border-radius: 0 8px 8px 0;
}
#postContent blockquote p {
    color: #7a8ba8;
}
/* 代码 */
#postContent code {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.9em;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    background: rgba(0,229,255,0.1);
    color: #00e5ff;
}
#postContent pre {
    background: #03030a;
    border: 1px solid rgba(0,229,255,0.08);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1em 0;
}
#postContent pre code {
    padding: 0;
    background: none;
    color: #7a8ba8;
}
/* 分隔线 */
#postContent hr {
    border: none;
    height: 1px;
    background: rgba(0,229,255,0.2);
    margin: 2em 0;
}
/* 列表 */
#postContent ul,
#postContent ol {
    margin: 0.8em 0;
    padding-left: 2em;
    color: #e2e8f0;
}
#postContent li {
    margin: 0.3em 0;
    line-height: 1.7;
    color: #e2e8f0;
}
/* 图片 */
#postContent img {
    max-width: 100%;
    border-radius: 8px;
    margin: 0.5em 0;
}
/* 表格 */
#postContent table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95rem;
}
#postContent thead {
    background: rgba(0,229,255,0.1);
}
#postContent th,
#postContent td {
    border: 1px solid rgba(0,229,255,0.15);
    padding: 0.6em 1em;
    text-align: left;
}
#postContent th {
    font-weight: 600;
    color: #00e5ff;
}
/* strong 标签 */
#postContent strong {
    color: #fbbf24;
    font-weight: 700;
}

/* 文章元信息栏 fallback */
.post-meta-bar {
    color: #7a8ba8;
    font-size: 0.85rem;
}

/* 卡片背景 fallback */
.post-card,
.article-card,
.card {
    background: rgba(12,12,28,0.85);
    color: #e2e8f0;
}

/* 页面标题 fallback */
.hero-title,
.page-title {
    font-size: 2rem;
    color: #e2e8f0;
}

/* 导航栏 fallback */
.nav-link,
nav a {
    color: #e2e8f0;
}
.nav-link:hover,
nav a:hover {
    color: #00e5ff;
}

/* 按钮类 fallback */
.btn-primary,
button.primary {
    background: #00e5ff;
    color: #06060e;
}

/* 标签/分类 fallback */
.tag,
.category-tag {
    color: #00e5ff;
    border: 1px solid rgba(0,229,255,0.3);
    background: rgba(0,229,255,0.08);
}

/* 侧边栏 fallback */
.sidebar,
aside {
    color: #e2e8f0;
    background: rgba(12,12,28,0.85);
}

/* 页脚 fallback */
footer {
    color: #7a8ba8;
    background: #03030a;
}
footer a {
    color: #00e5ff;
}

/* light 主题 fallback */
[data-theme="light"] body {
    background-color: #f0eee8;
    color: #1a1a2e;
}
[data-theme="light"] #postContent,
[data-theme="light"] #postContent p,
[data-theme="light"] #postContent li {
    color: #1a1a2e;
}
[data-theme="light"] #postContent h1,
[data-theme="light"] #postContent h2,
[data-theme="light"] #postContent h3,
[data-theme="light"] #postContent h4 {
    color: #1a1a2e;
}
[data-theme="light"] #postContent em {
    color: #7c3aed;
}
[data-theme="light"] #postContent a {
    color: #0891b2;
}
[data-theme="light"] #postContent blockquote {
    color: #4a5568;
    border-left-color: #0891b2;
    background: rgba(8,145,178,0.06);
}
[data-theme="light"] #postContent blockquote p {
    color: #4a5568;
}
[data-theme="light"] #postContent code {
    color: #0891b2;
    background: rgba(8,145,178,0.1);
}
[data-theme="light"] #postContent strong {
    color: #b45309;
}
[data-theme="light"] .post-card,
[data-theme="light"] .article-card,
[data-theme="light"] .card {
    background: rgba(255,255,255,0.9);
    color: #1a1a2e;
}

} /* end @supports not (color: var(--test)) */

/* gap 降级——360不支持 gap 时用 margin 替代 */
@supports not (gap: 1rem) {
    .post-meta-bar > * { margin-right: 1rem; }
    .portal-cat-btns > * { margin-right: 6px; margin-bottom: 6px; }
    .mood-stat-item { margin-right: 8px; }
    .mood-recent-item { margin-right: 8px; }
    .notification-item > * { margin-right: 10px; }
}

/* display:grid 降级 */
@supports not (display: grid) {
    .footer-grid,
    .grid-layout {
        display: flex;
        flex-wrap: wrap;
    }
    .footer-grid > *,
    .grid-layout > * {
        flex: 1 1 280px;
        margin-right: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

/* ========== 交互增强：键盘焦点可见性 ========== */
:focus-visible {
    outline: 2px solid var(--primary, #00e5ff);
    outline-offset: 2px;
    border-radius: 4px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
.cat-btn:focus-visible,
.share-btn:focus-visible,
.menu-toggle:focus-visible {
    outline: 2px solid var(--primary, #00e5ff);
    outline-offset: 2px;
}

/* ========== 面包屑导航 ========== */
.breadcrumb {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 0.4rem 0 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}
.breadcrumb a { color: var(--primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { opacity: 0.5; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* ========== 点赞按钮 ========== */
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border, rgba(125,125,125,0.35));
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.like-btn:hover { transform: scale(1.05); }
.like-btn:active { transform: scale(0.96); }
.like-btn .like-icon { transition: transform 0.2s ease; display: inline-block; }
.like-btn .like-count { font-variant-numeric: tabular-nums; min-width: 1ch; text-align: center; }
.like-btn.liked {
    color: #e91e63;
    border-color: #e91e63;
    background: rgba(233, 30, 99, 0.08);
}
.like-btn.liked .like-icon { transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) {
    .like-btn { transition: none; }
    .like-btn .like-icon { transition: none; }
}

/* ========== 备案信息（ICP + 公安联网备案）图标 ========== */
.beian-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: inherit;
    text-decoration: none;
}
.beian-link:hover { text-decoration: underline; }
.beian-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    flex: 0 0 auto;
    border: 0;
    margin: 0;
}
.beian-sep {
    margin: 0 0.5rem;
    opacity: 0.5;
}