/* 复用全局基础样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    line-height: 1.8; 
    color: #333; 
    transition: color 0.3s;
}

/* 夜间模式样式 */
body.dark-mode {
    color: #dfe6e9;
}

.container { max-width: 800px; margin: 0 auto; padding: 0 20px; }


/* 关于我 主体 */
.about-section { padding: 60px 0; }
.profile-header { text-align: center; margin-bottom: 50px; }
.avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #dfe6e9; /* 占位色 */
    margin-bottom: 20px;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.profile-header h1 { font-size: 2.2rem; color: #000000; margin-bottom: 10px; }
.profile-header p { color: #0984e3; font-weight: 500; font-size: 1.1rem; }

/* 防止页面切换闪屏 */
html {
    background-color: #f8f9fa;
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.content-block { 
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.62) 100%
    );
    backdrop-filter: blur(50px) saturate(190%) contrast(1.05);
    -webkit-backdrop-filter: blur(50px) saturate(190%) contrast(1.05);
    box-shadow: 0 0.33px 0 rgba(0, 0, 0, 0.09),
                0 0 0 0.25px rgba(0, 0, 0, 0.16),
                0 2px 8px rgba(0, 0, 0, 0.03),
                0 10px 60px rgba(0, 0, 0, 0.08),
                0 1px 3px rgba(0, 0, 0, 0.04),
                inset 0 0.5px 0 rgba(255, 255, 255, 0.9);
    border: 0.5px solid rgba(0, 0, 0, 0.06);
    padding: 40px; 
    border-radius: 24px; 
    margin-bottom: 30px;
    transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                background 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                box-shadow 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
                border-color 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform, box-shadow;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.content-block:hover {
    transform: translateY(-6px) translateZ(0);
    box-shadow: 0 0.33px 0 rgba(0, 0, 0, 0.09),
                0 0 0 0.25px rgba(0, 0, 0, 0.16),
                0 2px 8px rgba(0, 0, 0, 0.03),
                0 16px 65px rgba(0, 0, 0, 0.12),
                0 4px 12px rgba(0, 0, 0, 0.06),
                inset 0 0.5px 0 rgba(255, 255, 255, 0.95);
}
.content-block h2 { 
    font-size: 1.5rem; 
    margin-bottom: 20px; 
    color: #2d3436; 
    border-bottom: 2px solid #f1f2f6; 
    display: inline-block; 
    padding-bottom: 5px;
    transition: color 0.3s, border-color 0.3s;
}

/* 技能标签布局 */
.skills-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.skill-tag {
    background: #f1f2f6;
    color: #2d3436;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    transition: all 0.3s;
}
.skill-tag:hover { background: #0984e3; color: #fff; }

/* 联系方式列表 */
.contact-list { list-style: none; }
.contact-list li { margin-bottom: 12px; display: flex; align-items: center; }
.contact-list span { font-weight: bold; width: 80px; color: #636e72; transition: color 0.3s; }
.contact-list a { color: #0984e3; text-decoration: none; transition: color 0.3s; }
.contact-list a:hover { text-decoration: underline; }

/* 页脚 */
footer { text-align: center; padding: 40px 0; color: #b2bec3; border-top: 1px solid #eee; margin-top: 40px; transition: color 0.3s, border-top 0.3s; }

/* 夜间模式样式 */
body.dark-mode .profile-header h1 { color: #ffffff; }
body.dark-mode .profile-header p { color: #74b9ff; }

body.dark-mode .content-block {
    background: rgba(40, 40, 40, 0.85);
}

body.dark-mode .content-block h2 { color: #dfe6e9; border-bottom-color: #2d3436; }
body.dark-mode .skill-tag { background: #2d3436; color: #dfe6e9; }
body.dark-mode .skill-tag:hover { background: #74b9ff; }
body.dark-mode .contact-list span { color: #b2bec3; }
body.dark-mode .contact-list a { color: #74b9ff; }
body.dark-mode footer { color: #636e72; border-top-color: #2d3436; }

/* 登录按钮样式 */
.login-button {
    display: inline-block;
    padding: 8px 20px;
    background: #0984e3;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background 0.3s;
}

.login-button:hover {
    background: #0872c2;
}

/* 登录按钮容器样式 */
.login-button-container {
    margin-top: 20px;
}

/* 备案号链接样式 */
.icp-link {
    color: #b2bec3;
    text-decoration: none;
}

.icp-link:hover {
    text-decoration: underline;
}