/* 自定义样式覆盖 */
@import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css');

:root {
    --bg-overlay: rgba(135, 206, 250, 0.85);
    --text-primary: #333333;
    --text-secondary: #6c757d;
    --card-bg: #ffffff;
    --card-border: #e9ecef;
    --nav-bg: rgba(255, 255, 255, 0.95);
    --footer-bg: #000000;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --tilt-card-bg: #ffffff;
    --white: #ffffff;
}

[data-theme="dark"] {
    --bg-overlay: rgba(30, 30, 40, 0.92);
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --card-bg: #2d2d3a;
    --card-border: #3d3d4a;
    --nav-bg: rgba(30, 30, 40, 0.95);
    --footer-bg: #1a1a24;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --tilt-card-bg: #2d2d3a;
    --divider-light: #333333;
    --portfolio-caption-bg: rgba(244, 98, 58, 0.95);
    --comment-border: #3d3d4a;
    --stat-card-bg: #667eea;
    --user-sidebar-bg: #2d2d3a;
    --lazy-placeholder: linear-gradient(90deg, #3d3d4a 25%, #2d2d3a 50%, #3d3d4a 75%);
    --white: #ffffff;
}

* {
    font-family: 'LXGW WenKai', '霞鹜文楷',sans-serif;
}

body {
    color: var(--text-primary);
    background-color: var(--bg-overlay);
}

[data-theme="dark"] body {
    color: var(--text-primary);
}
.masthead {
    padding-top: 10rem;
    padding-bottom: calc(10rem - 4.5rem);
    background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url("../images/header.png");
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;
}

.page-section {
    padding: 8rem 0;
}

.divider {
    height: 0.2rem;
    max-width: 3.25rem;
    margin: 1.5rem auto;
    background-color: #f4623a;
    opacity: 1;
}

.divider-light {
    background-color: var(--divider-light, var(--white, #fff));
}

.portfolio-box {
    position: relative;
    display: block;
}

    .portfolio-box .portfolio-box-caption {
        position: absolute;
        bottom: 0;
        display: block;
        width: 100%;
        height: 100%;
        text-align: center;
        opacity: 0;
        color: var(--white, #fff);
        background: var(--portfolio-caption-bg, rgba(244, 98, 58, 0.9));
        transition: all 0.2s;
    }

    .portfolio-box:hover .portfolio-box-caption {
        opacity: 1;
    }

    .portfolio-box .portfolio-box-caption .project-category,
    .portfolio-box .portfolio-box-caption .project-name {
        padding: 0 15px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }
.btn-xl {
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: translateY(0);
}

.btn-xl:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
 /* 基础布局（桌面优先） */
.article-container { display: flex; gap: 2rem; align-items: flex-start; margin-top: 4rem; }
.article-main { flex: 1 1 65%; min-width: 0; }
.article-aside { flex: 0 0 32%; max-width: 32%; }
.article-title { font-size: 2rem; font-weight: 700; margin-bottom: .5rem; color: var(--text-primary); }
.article-meta span { margin-right: 1rem; color: var(--text-secondary); font-size: .9rem; }
.article-hero { width: 100%; height: auto; border-radius: .5rem; margin-bottom: 1.25rem; display:block; object-fit:cover; }
.article-content p { line-height: 1.8; margin-bottom: 1rem; word-break: break-word; color: var(--text-primary); }
.tag { display: inline-block; margin-right: .5rem; margin-bottom:.5rem; background:var(--card-bg); padding:.25rem .5rem; border-radius: .25rem; color:var(--text-primary); text-decoration:none; border: 1px solid var(--card-border); }
.author-box { background:var(--card-bg); border:1px solid var(--card-border); padding:1rem; border-radius:.5rem; text-align:center; color: var(--text-primary); }
.related-articles li { margin-bottom:.5rem; }
.comments-section { margin-top:2.5rem; }
.comment { border-top:1px solid var(--comment-border, #e9ecef); padding-top:1rem; margin-top:1rem; }

/* 页面标题样式 */
.section-title { font-size: 2.5rem; font-weight: 700; }

/* 联系页面 */
.contact-card { background: var(--card-bg); padding: 2rem; border-radius: 10px; box-shadow: 0 10px 25px var(--shadow-color); color: var(--text-primary); }
.info-item { display: flex; align-items: center; justify-content: flex-start; padding: 1rem; border-radius: 8px; background: var(--card-bg); transition: all 0.3s ease; border: 1px solid var(--card-border); }
.info-item:hover { transform: translateY(-3px); box-shadow: 0 10px 25px var(--shadow-color); }
.info-item .info-icon { width: 50px; height: 50px; background: var(--bs-primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.2rem; margin-right: 1rem; flex-shrink: 0; }
.info-item h5 { font-weight: 600; color: var(--text-primary); }
.social-links { display: flex; gap: 10px; }
.social-link { width: 44px; height: 44px; background: var(--card-bg); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--bs-primary); text-decoration: none; transition: all 0.3s ease; font-size: 1.1rem; border: 1px solid var(--card-border); }
.social-link:hover { background: var(--bs-primary); color: white; transform: translateY(-3px); }

/* 表单浮动标签优化 */
.form-floating > label { padding: 1rem; }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label { transform: scale(.85) translateY(-.5rem) translateX(.15rem); }

@media (max-width: 991.98px) {
            .article-container { gap: 1rem; margin-top: 2rem; padding: 0 1rem; }
            .article-title { font-size: 1.6rem; }
            .article-meta span { display: inline-block; margin-bottom: .35rem; }
            .article-aside { flex-basis: 100%; max-width: 100%; order: 2; }
            .article-main { order: 1; }
            .author-box img { width: 72px; height: 72px; }
            .article-hero { max-height: 300px; }
        }
        /* 响应式：手机（窄屏） */
        @media (max-width: 575.98px) {
            .article-container { display: block; padding: 0 .75rem; }
            .article-main, .article-aside { width: 100%; max-width: 100%; }
            .article-title { font-size: 1.25rem; line-height: 1.25; }
            .article-meta { display: block; margin-bottom: .5rem; }
            .article-meta span { display: block; color: var(--text-secondary); font-size: .85rem; margin-right: 0; }
            .article-hero { max-height: 220px; border-radius: .35rem; }
            .tag { padding: .18rem .4rem; font-size: .85rem; }
            .comment-form .row.g-2 { gap: .5rem; }
            .comment-form .col-md-4 { flex: 0 0 100%; max-width: 100%; }
            .comment-form .col-12.text-end { text-align: right; }
            .author-box { padding: .75rem; }
            .author-box p { display: none; } /* 手机隐藏简介，节省空间；可删除此行保留简介 */
        }

/* 为滚动隐藏/显示导航栏添加过渡 */
#mainNav {
    transition: transform 0.22s ease-in-out;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 隐藏时将导航向上平移出视口 */
#mainNav.nav-hidden {
    transform: translateY(-100%);
    pointer-events: none; /* 隐藏时禁用交互，防止误触 */
}

/* 在大屏保持同样行为（可按需调整） */
@media (min-width: 992px) {
    #mainNav {
        transition: transform 0.22s ease-in-out;
    }
}

/* 图片懒加载样式 */
.lazy-placeholder {
    background: var(--lazy-placeholder, linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%));
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    min-height: 150px;
}

.lazy-placeholder.circular {
    border-radius: 50%;
}

img[data-src] {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

img.lazy-loaded,
img[data-src=""] {
    opacity: 1;
}

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

.lazy-fade-in {
    animation: lazyFadeIn 0.6s ease forwards;
}

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

/* 3D卡片倾斜效果样式 */
.tilt-card,
.article-card {
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
    position: relative;
    will-change: transform;
    overflow: hidden;
    background-color: var(--tilt-card-bg);
    border: 1px solid var(--card-border);
}

.tilt-card:hover,
.article-card:hover {
    z-index: 10;
}

.tilt-card .card-body,
.article-card .card-body {
    transform: translateZ(20px);
}

/* 黑夜模式切换按钮 */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 12px;
    font-size: 1.2rem;
    color: var(--text-primary);
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.theme-toggle:hover {
    transform: rotate(15deg);
    background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon { transition: opacity 0.3s ease, transform 0.3s ease; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* 黑夜模式导航栏适配 */
[data-theme="dark"] .navbar {
    background-color: var(--nav-bg) !important;
}

[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-theme="dark"] .navbar-light .navbar-brand {
    color: var(--text-primary);
}

[data-theme="dark"] .dropdown-menu { background-color: var(--card-bg); border-color: var(--card-border); }
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] .dropdown-item:hover { color: var(--text-primary); }
[data-theme="dark"] .dropdown-item:hover { background-color: var(--card-border); }

/* 黑夜模式表单适配 */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-control:focus { background-color: var(--card-bg); border-color: var(--card-border); color: var(--text-primary); }
[data-theme="dark"] .form-label,
[data-theme="dark"] .card-body { color: var(--text-primary); }
[data-theme="dark"] .card { background-color: var(--card-bg); border-color: var(--card-border); }

/* 黑夜模式表格适配 */
[data-theme="dark"] .table { color: var(--text-primary); }
[data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--card-border); }
[data-theme="dark"] .text-muted { color: var(--text-secondary) !important; }
[data-theme="dark"] a { color: #6ea8fe; }
[data-theme="dark"] a:hover { color: #8ec5fc; }


@keyframes typing {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 100%;
        opacity: 1;
    }
}

.text-animate {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    opacity: 0;
    animation: typing 1.5s steps(15, end) forwards;
}

.sidebar {
    position: sticky;
    top: 80px;
}

.article-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.stat-card {
    background: var(--stat-card-bg, #667eea);
    color: white;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
}

.stat-card h3 {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.stat-card p {
    margin: 0;
    opacity: 0.9;
}

.user-sidebar {
    background: var(--user-sidebar-bg, white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 15px var(--shadow-color);
}

.user-sidebar .user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--stat-card-bg, #667eea);
}

.user-sidebar h5 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.user-sidebar .btn {
    border-radius: 20px;
}