/* 让页面上所有元素的宽高计算，都包含内边距和边框 */
*, *::before, *::after {
    box-sizing: border-box;
}
/* ==========================================
   🎨 全局样式变量（修改这里可以一键换肤！）
   ========================================== */
:root {
    --primary-color: #007BFF;         /* 主题蓝色 */
    --primary-hover: #0056b3;         /* 主题蓝悬浮色 */
    --success-color: #28a745;         /* 成功/发布绿色 */
    --success-hover: #218838;         /* 绿色悬浮色 */
    --text-color: #333333;            /* 主文本颜色 */
    --text-light: #666666;            /* 次要文本颜色 */
    --bg-overlay: rgba(255, 255, 255, 0.8); /* 浅色模式下的白纱遮罩 */
    --glass-bg: rgba(255, 255, 255, 0.4);  /* 毛玻璃背景色 */
    --glass-border: rgba(255, 255, 255, 0.5); /* 毛玻璃边框色 */
    --blur-val: 10px;                  /* 毛玻璃模糊度 */
    --radius-lg: 25px;                 /* 大圆角 */
    --radius-md: 10px;                 /* 中圆角 */
}

/* 深色模式变量 */
body.dark-mode {
    --text-color: #eeeeee;
    --text-light: #cccccc;
    --bg-overlay: rgba(15, 15, 20, 0.85); /* 深色模式下的黑纱遮罩 */
    --glass-bg: hsla(240, 10%, 34%, 0.6);
    --glass-border: rgba(255, 255, 255, 0.1);
}

/* ==========================================
   基础与重置样式 (Base & Reset)
   ========================================== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0; padding: 0;
    line-height: 1.6;
    color: var(--text-color);
    background-image: url('/img/bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
    position: relative;
    transition: background-color 0.4s, color 0.4s;
}

body::before {
    content: ''; position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-overlay);
    z-index: -1;
    transition: background-color 0.4s;
}

a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}
a:hover { color: var(--primary-hover); }

/* ==========================================
   公共组件 (Common Components)
   ========================================== */
/* 导航栏 */
header.navbar {
    background-color: rgba(250, 250, 250, 0.6);
    backdrop-filter: blur(var(--blur-val));
    -webkit-backdrop-filter: blur(var(--blur-val));
    color: #000; padding: 10px 0;
    position: fixed; top: 0; width: 100%; z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.4s;
}
body.dark-mode header.navbar {
    background-color: rgba(20, 20, 25, 0.8);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.navbar-container {
    width: 90%; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
}
.logo-text { font-size: 1.8rem; font-weight: bold; letter-spacing: 1px; }
nav.nav-links { display: flex; }
nav.nav-links a { color: #000; margin-left: 20px; font-weight: 500; font-size: 1.1rem; }
body.dark-mode nav.nav-links a { color: #eee; }

/* 按钮基础 */
.theme-toggle-btn {
    background: none; border: none; font-size: 1.2rem;
    cursor: pointer; margin-left: 15px; padding: 5px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-toggle-btn:hover { transform: scale(1.1); }

/* 文章卡片 (Flex 左右分布) */
.link-card {
    border-left: 4px solid var(--primary-color);
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.5);
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, background-color 0.4s;
}
body.dark-mode .link-card { background-color: rgba(40, 40, 50, 0.6); color: #ddd; }
.link-card:hover { transform: translateY(-3px); }
.link-card .card-text h3 { margin: 0 0 5px 0; font-size: 1.2rem; color: var(--text-color); }
.link-card .card-text p { margin: 0; color: var(--text-light); font-size: 0.95rem; }

.view-btn {
    font-size: 0.95rem; color: var(--primary-color); font-weight: 600;
    padding: 6px 14px; border-radius: 20px;
    background-color: rgba(0, 123, 255, 0.1);
    transition: all 0.3s ease; white-space: nowrap; flex-shrink: 0;
}
.view-btn:hover { background-color: rgba(0, 123, 255, 0.2); }
body.dark-mode .view-btn { color: #66b3ff; background-color: rgba(102, 179, 255, 0.15); }

/* 页脚 */
footer {
    text-align: center; padding: 20px;
    background-color: rgba(250, 250, 250, 0.6);
    backdrop-filter: blur(5px); color: #000;
    position: relative; z-index: 1;
    border-top: 1px solid rgba(255,255,255,0.5);
}
body.dark-mode footer { background-color: rgba(20, 20, 25, 0.8); border-top-color: rgba(255,255,255,0.1); color: #ccc; }

/* ==========================================
   🏠 主页专属样式 (Index Page)
   ========================================== */
.hero {
    position: relative; height: 50vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding-top: 50px;
    background-image: url('/img/hero-bg.jpg'); background-size: cover; background-position: center; z-index: 1;
}
.hero-avatar {
    width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.6); box-shadow: 0 4px 15px rgba(0,0,0,0.2); margin-bottom: 15px;
}
.hero h1 { font-size: 3rem; color: #fff; margin: 0; font-weight: 700; text-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.hero p.subtitle { font-size: 1.2rem; color: #eaeaea; margin-top: 5px; margin-bottom: 0; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.hero-contact { margin-top: 5px; font-size: 0.9rem; color: #eaeaea; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.hero-contact a { color: #eaeaea; margin: 0 10px; }

.content-wrapper { position: relative; z-index: 2; min-height: 50vh; padding-top: 40px; }

/* 动态波浪遮罩 */
.waves-container { position: absolute; bottom: 100%; left: 0; width: 100%; height: 150px; pointer-events: none; }
.wave {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background-image: url('/img/bg.png'); background-size: cover; background-position: center; background-attachment: fixed;
    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1000 100' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M 0 50 C 250 100, 250 0, 500 50 C 750 100, 750 0, 1000 50 L 1000 100 L 0 100 Z' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 1000 100' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Cpath d='M 0 50 C 250 100, 250 0, 500 50 C 750 100, 750 0, 1000 50 L 1000 100 L 0 100 Z' /%3E%3C/svg%3E");
    -webkit-mask-size: 1000px 100%; mask-size: 1000px 100%;
}
.wave::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-overlay); transition: background-color 0.4s; }
.wave1 { height: 150px; opacity: 0.3; animation: moveWaveLeft 12s linear infinite; }
.wave2 { height: 110px; opacity: 0.6; animation: moveWaveRight 18s linear infinite; }
.wave3 { height: 70px; opacity: 1; animation: moveWaveLeft 24s linear infinite; }

@keyframes moveWaveLeft { 100% { -webkit-mask-position: -1000px 0; mask-position: -1000px 0; } }
@keyframes moveWaveRight { 100% { -webkit-mask-position: 1000px 0; mask-position: 1000px 0; } }

/* 主页左右布局 */
.layout-container { width: 90%; max-width: 1100px; margin: 0 auto; display: flex; gap: 30px; align-items: flex-start; position: relative; z-index: 1; }
.left-column { flex: 0 0 220px; position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; }
.left-column::-webkit-scrollbar { display: none; }

aside.sidebar, section, .side-card {
    background: var(--glass-bg); backdrop-filter: blur(var(--blur-val)); -webkit-backdrop-filter: blur(var(--blur-val));
    border: 1px solid var(--glass-border); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    border-radius: var(--radius-lg); transition: background-color 0.4s, border-color 0.4s;
}

aside.sidebar { padding: 25px 20px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 15px; }
.sidebar-nav a { color: var(--text-color); font-size: 1.1rem; font-weight: 500; padding: 5px 10px; border-radius: 8px; transition: all 0.3s ease; }
.sidebar-nav a:hover { background-color: rgba(255,255,255,0.6); color: var(--primary-color); }
body.dark-mode .sidebar-nav a:hover { background-color: rgba(255, 255, 255, 0.1); }

main.content-area { flex: 1; min-width: 0; padding-bottom: 40px; }
section { padding: 30px; margin-bottom: 30px; }
h2 { text-align: center; font-size: 2.5em; color: var(--text-color); font-weight: 600; margin-top: 0; margin-bottom: 5px; }
h2::after { content: ''; display: block; height: 1px; background-color: #ccc; width: 80%; margin: 20px auto 25px auto; opacity: 0.6; }
body.dark-mode h2::after { background-color: #555; }
.text-center { text-align: center; }

.side-cards-container { display: flex; flex-direction: column; gap: 20px; }
.side-card { padding: 20px; }
.side-card h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.1rem; color: var(--text-color); border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 8px; }
body.dark-mode .side-card h3 { border-bottom-color: rgba(255,255,255,0.1); }
.side-card p { font-size: 0.95rem; color: var(--text-light); margin-bottom: 0; }

/* ==========================================
   📄 文章列表与发布专属样式 (List & Publish)
   ========================================== */
.container { width: 90%; max-width: 800px; margin: 100px auto 50px; position: relative; }
.page-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid rgba(0,0,0,0.1); padding-bottom: 10px; margin-bottom: 30px; }
.page-header h2 { margin: 0; font-size: 2rem; }

#publish-btn {
    display: none; background-color: var(--success-color); color: white;
    padding: 8px 20px; border-radius: 20px; font-weight: bold; font-size: 1rem;
    transition: background 0.3s; box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
}
#publish-btn:hover { background-color: var(--success-hover); }

/* 发布页特定 */
.publish-container {
    width: 90%; max-width: 900px; margin: 100px auto 50px;
    background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    border-radius: 20px; padding: 40px;
}
.input-group { margin-bottom: 25px; }
.input-group label { display: block; font-weight: bold; margin-bottom: 10px; font-size: 1.1rem; color: var(--text-color); }
#article-title { width: 100%; padding: 15px; font-size: 1.2rem; border: 1px solid #ccc; border-radius: 10px; box-sizing: border-box; outline: none; background: rgba(255,255,255,0.9); }
#article-title:focus { border-color: var(--primary-color); }

.editor-toolbar { background: #fff !important; border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; }
.CodeMirror { background: #fff !important; border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important; min-height: 400px; font-size: 1.1rem;}

.actions { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; }
.publish-btn {
    background-color: var(--primary-color); color: white; border: none;
    padding: 12px 30px; font-size: 1.2rem; font-weight: bold; border-radius: 30px;
    cursor: pointer; transition: background 0.3s, transform 0.2s; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
.publish-btn:hover { background-color: var(--primary-hover); transform: translateY(-2px); }

/* ==========================================
   🌙 Markdown 编辑器深色模式适配
   ========================================== */

body.dark-mode .publish-container {
    background: rgba(40, 40, 50, 0.6); backdrop-filter: blur(15px);
    border: 1px solid rgba(20, 20, 25, 0.8); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

body.dark-mode .editor-toolbar {
    background: rgba(30, 30, 40, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
body.dark-mode .editor-toolbar button,
body.dark-mode .editor-toolbar button i {
    color: #eee !important; /* 图标变成浅色 */
}
body.dark-mode .editor-toolbar a:hover,
body.dark-mode .editor-toolbar a.active {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: transparent !important;
}
body.dark-mode .CodeMirror {
    background: rgba(20, 20, 25, 0.8) !important;
    color: #eee !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}
body.dark-mode .CodeMirror-cursor {
    border-left: 2px solid #eee !important;
}

/* ==========================================
   📖 文章详情页专属样式 (Article Detail)
   ========================================== */
.article-detail-container {
    background: var(--glass-bg); backdrop-filter: blur(var(--blur-val)); -webkit-backdrop-filter: blur(var(--blur-val));
    border: 1px solid var(--glass-border); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    border-radius: var(--radius-lg); padding: 40px; margin-top: 20px;
}
h1.article-title { font-size: 2.4rem; color: var(--text-color); margin-top: 0; margin-bottom: 15px; text-align: center; }
.meta-info { text-align: center; color: var(--text-light); font-size: 0.95rem; margin-bottom: 30px; border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 20px; }
body.dark-mode .meta-info { border-bottom-color: rgba(255,255,255,0.1); }
.meta-info span { margin: 0 10px; }

/* Markdown 正文排版 */
.article-body { font-size: 1.15rem; color: var(--text-color); }
.article-body h1, .article-body h2, .article-body h3 { margin-top: 1.5em; margin-bottom: 0.8em; }
.article-body p { margin-bottom: 1.5em; }
.article-body img { max-width: 100%; border-radius: 10px; display: block; margin: 20px auto; }
.article-body pre { background: rgba(0,0,0,0.05); padding: 15px; border-radius: 8px; overflow-x: auto; }
body.dark-mode .article-body pre { background: rgba(255,255,255,0.1); }
.article-body code { background: rgba(0,0,0,0.05); padding: 2px 5px; border-radius: 4px; font-family: monospace; }
body.dark-mode .article-body code { background: rgba(255,255,255,0.1); }
.article-body blockquote { border-left: 4px solid var(--primary-color); color: var(--text-light); margin: 0; padding-left: 20px; font-style: italic; }

.back-link { display: inline-block; margin-top: 30px; font-weight: bold; font-size: 1.1rem; cursor: pointer; }

/* ==========================================
   🔐 登录/注册页专属样式
   ========================================== */
/* 专门给登录页用的居中 Body */
.login-page-body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; 
    margin: 0;
    padding: 0;
    background-image: url('/img/bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* 登录面板主体毛玻璃卡片 */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-val));
    -webkit-backdrop-filter: blur(var(--blur-val));
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
    border-radius: var(--radius-lg);
    padding: 40px;
    width: 100%;
    max-width: 350px;
    text-align: center;
    transition: all 0.3s ease;
    color: var(--text-color); /* 适配深色模式文字 */
}

/* 顶部登录/注册切换标签 */
.tab-group { 
    display: flex; 
    justify-content: space-around; 
    margin-bottom: 25px; 
    border-bottom: 2px solid rgba(0,0,0,0.1); 
    padding-bottom: 10px; 
}
body.dark-mode .tab-group {
    border-bottom-color: rgba(255,255,255,0.1);
}

.tab { 
    font-size: 1.1rem; 
    color: var(--text-light); 
    cursor: pointer; 
    padding: 5px 10px; 
    transition: 0.3s; 
}
.tab.active { 
    color: var(--primary-color); 
    font-weight: bold; 
    border-bottom: 2px solid var(--primary-color); 
}

/* 输入框组合 */
.form-group { 
    text-align: left; 
    margin-bottom: 20px; 
}
.form-group label { 
    display: block; 
    margin-bottom: 8px; 
    color: var(--text-color); 
    font-size: 0.9rem; 
}
.form-group input { 
    width: 100%; 
    padding: 10px; 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    border-radius: var(--radius-md); 
    outline: none; 
    font-size: 1rem; 
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-color);
    box-sizing: border-box; /* 确保 padding 不会撑破宽度 */
}
body.dark-mode .form-group input {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.2);
}
.form-group input:focus { 
    border-color: var(--primary-color); 
}

/* 注册专属字段（默认隐藏） */
#register-fields { 
    display: none; 
}

/* 提交按钮 */
.submit-btn { 
    width: 100%; 
    padding: 12px; 
    background-color: var(--primary-color); 
    color: white; 
    border: none; 
    border-radius: var(--radius-md); 
    font-size: 1.1rem; 
    cursor: pointer; 
    transition: background 0.3s; 
    margin-top: 10px;
}
.submit-btn:hover { 
    background-color: var(--primary-hover); 
}

/* ==========================================
   📌 卡片头部与“查看全部”按钮排版
   ========================================== */
.section-header {
    display: flex;
    justify-content: center; 
    align-items: center; 
    margin-bottom: 45px; /* 留出底部空间给线条 */
    position: relative; 
    /* 已经去掉了虚线 border-bottom */
}

.section-header h2 {
    margin: 0; 
}

/* 🔑 魔法1：隐藏 h2 因为 Flex 布局而缩水错位的短实线 */
.section-header h2::after {
    display: none;
}

/* 🔑 魔法2：在整个容器底部，重新生成和之前一模一样的 80% 居中长实线 */
.section-header::after {
    content: '';
    position: absolute;
    bottom: -20px; /* 线条距离标题的垂直距离 */
    left: 10%;     /* 保证宽度 80% 时绝对居中 */
    width: 80%;
    height: 1px;
    background-color: #ccc;
    opacity: 0.6;
}

/* 按钮的精致外观保持不变 */
.view-all-btn {
    position: absolute; 
    right: 0; 
    font-size: 0.9rem;
    color: var(--primary-color);
    background: rgba(0, 123, 255, 0.08); 
    padding: 6px 14px;
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    font-weight: 500;
}

.view-all-btn:hover {
    background: var(--primary-color);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px); 
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

/* 🌙 完美适配深色模式 */
body.dark-mode .section-header::after {
    background-color: #555; /* 深色模式下的实线颜色 */
}
body.dark-mode .view-all-btn {
    background: rgba(255, 255, 255, 0.1);
    color: #eeeeee;
}
body.dark-mode .view-all-btn:hover {
    background: var(--primary-color);
    color: #ffffff;
}

/* ==========================================
   👤 顶栏用户区域 (登录按钮 / 头像)
   ========================================== */
.nav-login-btn {
    font-size: 0.9rem;
    color: #ffffff;
    background-color: var(--primary-color);
    padding: 6px 16px;
    border-radius: var(--radius-lg);
    transition: all 0.3s ease;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
}

.nav-login-btn:hover {
    background-color: var(--primary-hover);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
}

.nav-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(0, 123, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
    display: block; /* 解决图片底部的默认缝隙 */
}

.nav-avatar:hover {
    transform: scale(1.1);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* ==========================================
   🧑‍💻 个人主页专属样式
   ========================================== */
.profile-page-body {
    background-image: url('/img/bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}

.profile-header-card {
    display: flex;
    align-items: center;
    gap: 30px;
    max-width: 100%; /* 覆盖登录页的限制 */
    text-align: left;
    box-sizing: border-box; /* 🔑 加上这一行，解决右侧溢出的魔法 */
}

.profile-avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--glass-border);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.profile-info h2 {
    margin: 0 0 10px 0;
    font-size: 2rem;
    text-align: left;
}

.action-btn {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    background: rgba(0, 123, 255, 0.1);
    color: var(--primary-color);
    margin-right: 10px;
}
.action-btn:hover {
    background: var(--primary-color);
    color: #fff;
}

/* 危险操作按钮（红色） */
.btn-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}
.btn-danger:hover {
    background: #dc3545;
    color: #fff;
}

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(5px);
    display: flex; justify-content: center; align-items: center; z-index: 3000;
}
.modal-content { max-width: 400px; width: 90%; }

/* 针对手机端竖排显示 */
@media (max-width: 768px) {
    .profile-header-card {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* ==========================================
   🌓 深色模式切换按钮的 SVG 颜色适配
   ========================================== */
/* 浅色模式下（默认）：图标为深灰色/黑色 */
.theme-toggle-btn {
    color: #333; 
}

/* 深色模式下：图标必须变成纯白色 */
body.dark-mode .theme-toggle-btn {
    color: #ffffff !important; 
}

/* 鼠标悬浮时稍微亮一点，增加互动感 */
.theme-toggle-btn:hover {
    opacity: 0.8;
}

/* ==========================================
   🍔 顶栏分离式布局与折叠菜单 (悬浮修复版)
   ========================================== */
.navbar-container {
    display: flex;
    align-items: center;
    position: relative; /* 🔑 极其重要：为后面的悬浮菜单做定位基准 */
}

.logo-text {
    margin-right: auto; /* 把导航和按钮统统推到右边 */
}

.nav-collapse-area {
    display: flex;
    align-items: center;
    margin-right: 20px; /* 电脑端：与最右侧常驻按钮隔开距离 */
}

/* 常驻操作区：深色模式、头像、汉堡按钮 */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px; 
}

.nav-toggle-btn {
    display: none; 
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
    padding: 0;
}
body.dark-mode .nav-toggle-btn {
    color: #fff; 
}

/* 📱 移动端样式 */
@media (max-width: 768px) {
    .navbar {
        position: relative; 
    }
    
    .navbar-container {
        position: static; 
        padding: 10px 15px; 
    }
    
    .nav-toggle-btn {
        display: block; 
    }

    /* ==============================
       📦 悬浮菜单：动画初始（隐藏）状态
       ============================== */
    .nav-collapse-area {
        position: absolute; 
        top: 100%; 
        left: 0;   
        width: 100%; 
        margin: 0; 
        justify-content: center; /*start*/
        background: var(--glass-bg); 
        backdrop-filter: blur(var(--blur-val));
        border-top: 1px solid var(--glass-border); 
        border-bottom: 1px solid var(--glass-border); 
        padding: 15px 0;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); 
        z-index: 99; /* 保证悬浮在最上层 */

        /* 🎬 动画核心魔法 (删掉了以前的 display: none) */
        display: flex; 
        opacity: 0; /* 初始透明度为0（完全透明） */
        visibility: hidden; /* 初始不可见（防止用户瞎点到隐藏的按钮） */
        transform: translateY(-15px); /* 初始位置稍微向上偏移 15px */
        
        /* 设置平滑过渡效果：用时 0.3 秒，使用高级的曲线速率 */
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    }

    /* 深色模式同步 */
    body.dark-mode .nav-collapse-area {
        background: rgba(20, 20, 25, 0.8); 
        border-color: rgba(255, 255, 255, 0.1);
    }
    
    /* ==============================
       🌟 悬浮菜单：动画展开（显示）状态
       ============================== */
    .nav-collapse-area.show {
        /* 点击按钮加上 show 类名后，触发以下动画 */
        opacity: 1; /* 恢复不透明 */
        visibility: visible; /* 恢复可点击状态 */
        transform: translateY(0); /* 向下滑动回原本的位置 */
    }
    
    nav.nav-links {
        margin: 0;
    }
}

/* ==========================================
   📱 响应式适配 (Mobile Styles)
   ========================================== */
.floating-menu-btn {
    display: none; position: fixed; left: 15px; bottom: 40px; width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    z-index: 2001; text-align: center; line-height: 50px; font-size: 1.5rem; color: #333; cursor: pointer;
}
body.dark-mode .floating-menu-btn { background: rgba(30, 30, 40, 0.8); color: #fff; border-color: rgba(255,255,255,0.2); }
.sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); z-index: 1999; backdrop-filter: blur(2px); }

@media (max-width: 768px) {
    /*nav.nav-links { display: none; } 在手机端隐藏顶部文字导航，给头像让出空间 */
    .floating-menu-btn { display: block; }
    .navbar-container { flex-wrap: nowrap; width: 95%; }
    /*.logo-text { font-size: 1.05rem; white-space: nowrap; }*/
    /*nav.nav-links a { margin-left: 12px; font-size: 0.9rem; }*/
    .hero h1 { font-size: 2rem; }
    .hero p.subtitle { font-size: 1rem; }
    .hero-contact { font-size: 0.8rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
    .layout-container { flex-direction: column; width: 92%; gap: 0; }
    main.content-area { width: 100%; }
    section { padding: 20px 15px; }
    
    aside.sidebar { position: fixed; top: 0; left: -100%; width: 70%; max-width: 280px; height: 100vh; margin: 0; border-radius: 0 25px 25px 0; z-index: 2000; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-sizing: border-box; padding-top: 60px; border-left: none; }
    aside.sidebar.active { left: 0; }
    .sidebar-overlay.active { display: block; }

    .left-column { width: 100%; position: static; display: block; max-height: none; overflow: visible; }
    .side-cards-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 25px; }
    .side-card { padding: 15px 12px; border-radius: 15px; }
    .side-card h3 { font-size: 0.95rem; }
    .side-card p { font-size: 0.85rem; }
}