:root {
--primary: #6366F1;
--primary-light: #8B5CF6;
--primary-dark: #4F46E5;
--accent: #06B6D4;
--accent-light: #22D3EE;
--dark: #0F172A;
--dark-light: #1E293B;
--light: #F8FAFC;
--light-gray: #CBD5E1;
--gray: #64748B;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
--transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--card-radius: 16px;
--mobile-padding: 16px;
--card-gap: 16px;
}

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

html {
scroll-behavior: smooth;
}

body {
font-family: 'Inter', 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', sans-serif;
background: radial-gradient(ellipse at top, var(--dark) 0%, #020617 100%);
color: var(--light);
line-height: 1.6;
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom, var(--primary), var(--accent));
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: linear-gradient(to bottom, var(--primary-light), var(--accent-light));
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--mobile-padding);
width: 100%;
}

/* 优化头部区域 */
.hero-section {
min-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
padding: 40px 0;
}

.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: 
radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
radial-gradient(circle at 80% 60%, rgba(6, 182, 212, 0.15) 0%, transparent 40%),
radial-gradient(circle at 40% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 40%);
z-index: -2;
animation: gradient-shift 15s ease-in-out infinite alternate;
}

@keyframes gradient-shift {
0% { transform: scale(1) rotate(0deg); }
100% { transform: scale(1.1) rotate(1deg); }
}

.hero-content {
width: 100%;
text-align: center;
padding: 20px 0;
position: relative;
z-index: 1;
}

/* 优化头像设计 */
.avatar-wrapper {
position: relative;
width: 140px;
height: 140px;
margin: 0 auto 25px;
animation: float 6s ease-in-out infinite;
}

@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}

.avatar-glow {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--accent));
filter: blur(20px);
opacity: 0.5;
animation: glow-pulse 4s ease-in-out infinite;
}

@keyframes glow-pulse {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}

.modern-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--dark-light);
border: 3px solid rgba(255, 255, 255, 0.15);
position: relative;
overflow: hidden;
transition: var(--transition-smooth);
}

.modern-avatar:hover {
transform: scale(1.05);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 40px rgba(99, 102, 241, 0.3);
}

.modern-avatar::before {
content: '';
position: absolute;
inset: -50%;
background: conic-gradient(
transparent, transparent, transparent,
var(--primary),
transparent, transparent, transparent,
var(--accent)
);
animation: rotate 6s linear infinite;
}

@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.avatar-inner {
position: absolute;
inset: 6px;
background: var(--dark);
border-radius: 50%;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.avatar-inner img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}

.avatar-inner:hover img {
transform: scale(1.05);
}

/* 名称和描述优化 */
.name-wrapper {
text-align: center;
margin-bottom: 25px;
}

.modern-name {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, var(--light) 0%, var(--light-gray) 30%, var(--accent-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 10px;
letter-spacing: -0.5px;
line-height: 1.2;
}

.name-subtitle {
font-size: 1.1rem;
color: var(--gray);
max-width: 500px;
margin: 0 auto;
font-weight: 400;
line-height: 1.6;
}

/* 快速链接优化 */
.quick-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}

.link-btn {
display: inline-flex;
align-items: center;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.2));
color: white;
padding: 10px 24px;
border-radius: 50px;
text-decoration: none;
font-size: 0.95rem;
font-weight: 500;
transition: var(--transition-smooth);
border: 1px solid rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
position: relative;
overflow: hidden;
}

.link-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}

.link-btn:hover::before {
left: 100%;
}

.link-btn:hover {
background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(6, 182, 212, 0.3));
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.3);
}

.link-btn i {
margin-right: 8px;
font-size: 1rem;
}

/* 分区样式优化 */
.modern-section {
padding: 60px 0;
position: relative;
}

.modern-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.section-header {
text-align: center;
margin-bottom: 40px;
}

.section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 12px;
position: relative;
display: inline-block;
background: linear-gradient(135deg, var(--light), var(--accent-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.section-title::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--accent));
border-radius: 4px;
}

.section-subtitle {
color: var(--gray);
font-size: 1.1rem;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}

/* 网格布局优化 - 去除空白 */
.modern-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--card-gap);
margin: 0 -8px;
}

/* 卡片设计优化 - 去除空白 */
.modern-card {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(20px);
border-radius: var(--card-radius);
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
transition: var(--transition-smooth);
height: 100%;
display: flex;
flex-direction: column;
margin: 0 8px;
}

.modern-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
135deg,
transparent 0%,
rgba(99, 102, 241, 0.1) 50%,
transparent 100%
);
transform: translateX(-100%);
transition: transform 0.8s ease;
}

.modern-card:hover::before {
transform: translateX(100%);
}

.modern-card:hover {
transform: translateY(-5px);
box-shadow: 
0 15px 30px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(99, 102, 241, 0.2),
inset 0 0 20px rgba(99, 102, 241, 0.1);
border-color: rgba(99, 102, 241, 0.3);
}

.card-header {
display: flex;
align-items: center;
margin-bottom: 16px;
}

.card-icon {
width: 50px;
height: 50px;
border-radius: 14px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.3rem;
margin-right: 16px;
box-shadow: 0 6px 12px rgba(99, 102, 241, 0.3);
transition: var(--transition-smooth);
}

.modern-card:hover .card-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 10px 20px rgba(99, 102, 241, 0.4);
}

.card-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 5px;
color: var(--light);
}

.card-subtitle {
color: var(--accent-light);
font-size: 0.9rem;
font-weight: 500;
}

.card-content {
margin-bottom: 16px;
flex-grow: 1;
}

.card-description {
color: var(--light-gray);
line-height: 1.7;
margin-bottom: 16px;
font-size: 0.95rem;
}

.card-id {
display: inline-block;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(6, 182, 212, 0.2));
color: var(--accent-light);
padding: 6px 14px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
border: 1px solid rgba(99, 102, 241, 0.3);
backdrop-filter: blur(10px);
}

/* 联系方式网格优化 - 去除空白 */
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--card-gap);
margin: 0 -8px;
}

.contact-item {
display: flex;
align-items: center;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(20px);
border-radius: 16px;
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: var(--transition-smooth);
cursor: pointer;
position: relative;
overflow: hidden;
margin: 0 8px;
}

.contact-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(6, 182, 212, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
}

.contact-item:hover::before {
opacity: 1;
}

.contact-item:hover {
transform: translateY(-5px);
border-color: rgba(99, 102, 241, 0.3);
box-shadow: 
0 12px 24px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(99, 102, 241, 0.2);
}

.contact-icon {
width: 46px;
height: 46px;
border-radius: 12px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.1rem;
margin-right: 16px;
flex-shrink: 0;
position: relative;
z-index: 1;
transition: var(--transition-smooth);
}

.contact-item:hover .contact-icon {
transform: scale(1.1);
}

.contact-info {
position: relative;
z-index: 1;
}

.contact-info h4 {
font-size: 0.9rem;
color: var(--gray);
margin-bottom: 6px;
font-weight: 500;
}

.contact-info p {
font-weight: 600;
font-size: 1.1rem;
color: var(--light);
}

/* 页脚优化 */
.modern-footer {
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(20px);
padding: 50px 0 25px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}

.modern-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
}

.footer-content {
text-align: center;
position: relative;
z-index: 1;
}

.footer-logo {
font-size: 2rem;
font-weight: 800;
margin-bottom: 20px;
background: linear-gradient(135deg, var(--primary), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}

.footer-text {
color: var(--gray);
max-width: 500px;
margin: 0 auto 30px;
line-height: 1.7;
font-size: 1rem;
}

.social-links {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 35px;
}

.social-link {
width: 46px;
height: 46px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--light-gray);
text-decoration: none;
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}

.social-link::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--primary), var(--accent));
opacity: 0;
transition: opacity 0.3s ease;
}

.social-link:hover::before {
opacity: 1;
}

.social-link i {
position: relative;
z-index: 1;
font-size: 1.1rem;
}

.social-link:hover {
transform: translateY(-5px);
color: white;
box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
}

.copyright {
color: var(--gray);
font-size: 0.9rem;
padding-top: 25px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 20px;
}

/* 响应式设计优化 */
@media (min-width: 1200px) {
.container {
padding: 0 40px;
}

.modern-grid {
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 1024px) {
.modern-name {
font-size: 2.5rem;
}

.section-title {
font-size: 2rem;
}

.modern-grid {
grid-template-columns: repeat(2, 1fr);
}

.contact-grid {
grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 768px) {
.hero-section {
min-height: 70vh;
padding: 30px 0;
}

.modern-name {
font-size: 2rem;
}

.name-subtitle {
font-size: 1rem;
}

.avatar-wrapper {
width: 120px;
height: 120px;
margin-bottom: 20px;
}

.section-title {
font-size: 1.8rem;
}

.section-subtitle {
font-size: 1rem;
}

.modern-grid {
grid-template-columns: 1fr;
gap: 16px;
}

.contact-grid {
grid-template-columns: 1fr;
}

.modern-card {
padding: 20px;
margin: 0 4px;
}

.contact-item {
padding: 18px;
margin: 0 4px;
}

.modern-section {
padding: 50px 0;
}

.link-btn {
padding: 8px 20px;
font-size: 0.9rem;
}

.card-header {
margin-bottom: 14px;
}

.card-icon {
width: 44px;
height: 44px;
font-size: 1.2rem;
margin-right: 14px;
}

.contact-icon {
width: 42px;
height: 42px;
font-size: 1rem;
margin-right: 14px;
}
}

@media (max-width: 480px) {
.modern-name {
font-size: 1.8rem;
}

.avatar-wrapper {
width: 100px;
height: 100px;
}

.section-title {
font-size: 1.6rem;
}

.modern-grid, .contact-grid {
gap: 12px;
margin: 0 -2px;
}

.modern-card, .contact-item {
margin: 0 2px;
}

.card-icon {
width: 40px;
height: 40px;
font-size: 1.1rem;
}

.contact-icon {
width: 40px;
height: 40px;
font-size: 1rem;
}

.social-link {
width: 40px;
height: 40px;
}

.quick-links {
gap: 8px;
}

.link-btn {
padding: 8px 16px;
font-size: 0.85rem;
}

.modern-card {
padding: 18px;
}

.contact-item {
padding: 16px;
}
}

/* 动画类优化 */
.fade-in {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* 加载动画 */
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: var(--primary);
animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}

/* 工具提示 */
.tooltip {
position: relative;
display: inline-block;
}

.tooltip .tooltip-text {
visibility: hidden;
width: max-content;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 12px;
position: absolute;
z-index: 100;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-size: 0.8rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}

.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}

/* 添加通知样式 */
.notification {
position: fixed;
top: 20px;
right: 20px;
background: linear-gradient(135deg, var(--primary), var(--accent));
color: white;
padding: 12px 24px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
z-index: 1000;
transform: translateX(150%);
transition: transform 0.3s ease;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
max-width: 300px;
font-size: 14px;
font-weight: 500;
}

/* 页面加载完成动画 */
body.loaded .hero-background {
animation: gradient-shift 15s ease-in-out infinite alternate;
}

/* 改进的媒体查询 */
@media (hover: hover) and (pointer: fine) {
.modern-card:hover .card-icon {
transform: scale(1.1) rotate(5deg);
}

.contact-item:hover {
transform: translateY(-5px);
}

.social-link:hover {
transform: translateY(-5px);
}
}

/* 打印样式 */
@media print {
.hero-section {
min-height: auto;
padding: 20px 0;
}

.modern-section {
padding: 40px 0;
}

.modern-card, .contact-item {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ddd;
}

.social-links {
display: none;
}
}