/* --- 基础变量与重置 --- */
:root {
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.8);
    --accent: #3593ff;
    --text-main: #000000;
    --text-sub: #e978d0;
}

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

body {
    background: 
        radial-gradient(at 0% 0%, #e0e7ff 0px, transparent 50%),
        radial-gradient(at 100% 0%, #f3e8ff 0px, transparent 50%),
        radial-gradient(at 50% 100%, #fee2e2 0px, transparent 50%),
        #f8fafc;
    background-attachment: fixed;
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text-main);
    min-height: 100vh;
}

/* --- 全局通用组件 --- */
/* 阅读进度条 - 固定在页面顶部，宽度随滚动距离变化 */
#progress-bar {
    position: fixed;      /* 固定定位，始终可见 */
    top: 0;
    left: 0;
    width: 0%;            /* 初始宽度为0，由JS动态更新 */
    height: 4px;
    background: linear-gradient(to right, var(--accent), #98ffd8);
    z-index: 9999;        /* 确保在所有毛玻璃层级之上 */
    transition: width 0.2s ease-out;  /* 宽度变化平滑过渡 */
}

/* 毛玻璃卡片 - 应用毛玻璃效果的基础类 */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px) saturate(180%);    /* 毛玻璃模糊效果 */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 24px;                           /* 大圆角增加柔和感 */
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
    /* 预设透明度和位置，这样 JS 运行的时候是“接管”而不是“强行改变” */
    /* opacity: 0;
    transform: translateY(15px); */
    /* will-change: transform, opacity; 告诉浏览器提前准备好动画，不卡顿 */
}

/* --- 导航栏区域 --- */
/* 导航栏容器 - 使用sticky粘性定位，保持在顶部 */
.navbar {
    max-width: 1400px;
    margin: 1.5rem auto;
    padding: 0.8rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;     /* 粘性定位，滚动时吸附在顶部 */
    top: 1.5rem;
    z-index: 1000;        /* 确保导航栏位于其他内容之上 */
}

/* 导航栏左侧区域 - 宽度与左侧边栏对齐（240px对应左侧边栏宽度280px？此处用于视觉平衡） */
.nav-left-zone {
    width: 240px;          /* 此宽度与左侧边栏宽度对应，保持视觉对齐 */
    display: flex;
    justify-content: center; /* Logo在区域内水平居中 */
    align-items: center;
}

/* Logo容器 */
.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.3rem;
    font-weight: 800;
    white-space: nowrap;   /* 防止文字换行 */
    background: linear-gradient(to right, #4f46e5, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.logo-icon {
    font-size: 1.4rem;
    color: initial;        /* 让Emoji恢复原本颜色 */
}

.logo-text {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--accent);
}

/* 导航栏中间区域 - 用于放置搜索框，flex:1使其水平居中 */
.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* 搜索框容器 */
.search-box {
    position: relative;    /* 为内部图标提供绝对定位参考 */
    display: flex;
    align-items: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 搜索输入框本体 */
.search-box input {
    background: rgba(255, 255, 255, 0.5);
    border: 1.5px solid rgba(99, 102, 241, 0.1);
    padding: 10px 15px 10px 42px; /* 左边距为图标留出空间 */
    border-radius: 50px;           /* 胶囊形状 */
    outline: none;
    width: 280px;
    font-size: 0.9rem;
    color: var(--text-main);
    transition: all 0.3s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02); /* 内阴影增加质感 */
}

/* 搜索图标 - 固定在输入框内部左侧 */
.search-icon {
    position: absolute;
    left: 14px;            /* 与输入框左侧对齐 */
    font-size: 1rem;
    opacity: 0.6;
    pointer-events: none;  /* 避免遮挡输入框点击 */
    transition: all 0.3s ease;
}

/* 输入框聚焦状态 */
.search-box input:focus {
    width: 320px;          /* 聚焦时展开宽度 */
    background: rgba(255, 255, 255, 0.9);
    outline: none !important;
    border-color: #8affd4; /* 天空蓝边框 */
    box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.2), 0 8px 20px -5px rgba(0, 0, 0, 0.05); /* 外发光效果 */
}

/* 聚焦时图标高亮变色 */
.search-box input:focus + .search-icon {
    opacity: 1;
    color: var(--accent);
}

/* 右侧按钮组容器 */
.glass-btn-group {
    background: rgba(255, 255, 255, 0.2);
    padding: 4px;
    border-radius: 14px;
    display: flex;
    gap: 4px;
}

/* 导航按钮 */
.nav-btn {
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 10px;
    transition: 0.3s;
}

/* 激活状态的导航按钮 */
.nav-btn.active {
    background: white;
    color: var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* --- 页面主体布局 --- */
/* 三列网格布局：左侧边栏280px，中间内容自适应，右侧边栏240px */
.page-layout {
    display: grid;
    grid-template-columns: 280px 1fr 240px; /* 左侧、中间、右侧宽度定义 */
    gap: 2rem;
    max-width: 1400px;
    margin: 3rem auto;
    padding: 0 20px;
}

/* --- 左侧边栏组件 --- */
/* 个人资料卡片 */
.profile-card {
    text-align: center;
    padding: 2rem 1.5rem;
}

/* 头像容器 */
.avatar-wrapper {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.2rem;
    border: 3px solid white;
    border-radius: 50%;        /* 圆形头像 */
    overflow: hidden;          /* 裁切超出部分 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* 头像图片 */
.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;         /* 保证图片覆盖容器且不变形 */
}

/* 用户名 */
.username {
    margin-bottom: 0.5rem;
}

/* 座右铭 */
.motto {
    font-size: 0.85rem;
    color: var(--text-sub);
    margin-bottom: 1rem;
}

/* 标签组 */
.bio-tags {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--accent);
    font-weight: bold;
}

/* 通用小部件容器（用于公告、联系、热门话题等） */
.widget {
    padding: 1.5rem;
    margin-top: 1.5rem;
}

/* 小部件标题 */
.w-title {
    color: var(--accent);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--accent); /* 左侧装饰线 */
    padding-left: 10px;
}

/* --- 中间内容组件 --- */
/* 英雄区介绍卡片 */
.hero-intro-box {
    padding: 2.5rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
}

/* 文章网格 - 两列布局 */
.article-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列等宽 */
    gap: 1.5rem;
}

/* 文章卡片 */
.article-card {
    overflow: hidden;              /* 隐藏溢出内容 */
    display: flex;
    flex-direction: column;        /* 垂直排列内容 */
    transition: 0.3s;              /* 悬停动画过渡 */
}

/* 文章卡片悬停效果 */
.article-card:hover {
    transform: translateY(-6px);   /* 向上轻微移动 */
}

/* 卡片封面区域 */
.card-cover {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
}

/* 设计类封面背景 */
.design-bg {
    background: linear-gradient(135deg, #818cf8, #6366f1);
}

/* 技术类封面背景 */
.tech-bg {
    background: linear-gradient(135deg, #c084fc, #a855f7);
}

/* 卡片主体内容 */
.card-body {
    padding: 1.5rem;
}

/* 文章标签 */
.tag {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 0.5rem;
    display: block;
}

/* 阅读更多链接 */
.read-more {
    display: block;
    margin-top: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    font-size: 0.8rem;
}

/* --- 右侧边栏组件 --- */
/* 右侧边栏主要使用.widget组件，热门话题列表未定义特殊样式，使用浏览器默认 */
/* 若有 .topic-list 的样式可在此处添加，当前无额外规则 */

/* --- 底部与回到顶部按钮 --- */
/* 页脚区域 */
.site-footer {
    margin-top: 8rem;
    padding-bottom: 4rem;
    text-align: center;
}

/* 回到顶部按钮 - 固定定位在右下角，默认隐藏 */
.scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 135px;
    height: 135px;
    display: none;                /* 默认隐藏，JS控制显示 */
    cursor: pointer;
    border-radius: 15%;           /* 圆形按钮 */
    justify-content: center;
    align-items: center;
}

/* --- 响应式布局 --- */
@media (max-width: 1200px) {
    /* 小屏幕下改为单列布局，隐藏左右侧边栏 */
    .page-layout {
        grid-template-columns: 1fr; /* 单列 */
    }
    .sidebar-left,
    .sidebar-right {
        display: none;              /* 隐藏侧边栏 */
    }
}