/* 全局重置：消除默认边框与高亮轮廓 */
* {
    border: none;
    outline: none;
    box-sizing: border-box;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Microsoft YaHei", sans-serif; overflow: hidden; /* 锁定主体滚动，交给右侧容器 */ }

/* 占位符通用样式 (替换为你自己的背景图时，请删除内联文字并修改URL) */
.insert-bg {
    background-color: rgba(255, 255, 255, 0.4);
    background-size: cover;
    background-position: center;
    /* 提示边框，正式使用可删除 */
}

/* 网站总背景容器 */
.global-bg {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    z-index: -2; 
    overflow: hidden; /* 防止背景模糊扩散超出屏幕边缘 */
}

/* 背景图 + 轻微模糊效果 */
.global-bg::before {
    content: "";
    position: absolute;
    /* 重点：将伪元素四周向外外扩 20px，防止模糊滤镜在边缘产生白边 */
    top: -20px; 
    left: -20px; 
    right: -20px; 
    bottom: -20px;
    
    background-image: url('images/IMG_8481..PNG'); /* 你的背景图路径 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* === 核心：控制模糊程度 === */
    filter: blur(1px); /* 3px 恰好能柔化背景，同时保留清楚的大致要素与细节 */
    transform: scale(1.02); /* 微调放大，配合外扩消除虚边 */
}

/* 遮罩层：保留之前设置的暗角与高光 */
.global-bg::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    
    /* 暗角与局部高光的渐变蒙版 */
    background: 
        radial-gradient(
            circle at 50% 30%, 
            rgba(255, 255, 255, 0.15) 0%, 
            rgba(0, 0, 0, 0.1) 50%, 
            rgba(0, 0, 0, 0.65) 100%
        ),
        linear-gradient(
            to bottom, 
            rgba(0, 0, 0, 0.3) 0%, 
            transparent 20%, 
            transparent 80%, 
            rgba(0, 0, 0, 0.4) 100%
        );
        
    pointer-events: none; /* 确保不影响鼠标对页面的点击交互 */
}

/* ================= 一、顶栏区 ================= */
.top-bar {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 60px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 0 25px; 
    z-index: 100;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* 底部微阴影，增加悬浮层次感 */
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* 顶栏背景遮罩层（调柔背景图，保证导航按钮清晰） */
.top-bar-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.65); /* 65% 半透明白底；若想要暗色顶栏可换成 rgba(0,0,0,0.4) */
    z-index: 1;
}

/* Logo 区域布局 */
.logo-area { 
    position: relative; 
    z-index: 2; /* 确保在遮罩层上方 */
    display: flex; 
    align-items: center; 
    gap: 12px; 
}

/* Logo 图片插入位 */
.logo-img { 
    width: 45px; 
    height: 45px; 
    border-radius: 100px; /* 保留微圆角，如果不想要圆角可以改成 0 */
    
    /* === 核心：去掉边框与阴影 === */
    border: none !important; 
    box-shadow: none !important;
    outline: none !important;

    background-size: contain; /* 让 Logo 图片完整展示 */
    background-repeat: no-repeat;
    background-position: center;
}


/* Logo 纯文字无框样式 */
.logo-text {
	font-size: 24px;
	font-weight: bold;
	color: #8f6ee1;           /* 品牌紫色 */
	letter-spacing: 1.5px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* 文字白阴影 */
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* 导航栏整体容器：紧贴顶栏上下边缘 */
.nav-bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    height: 100%; /* 继承顶栏 100% 的高度 (60px) */
    gap: 0;      /* 关键：消除按钮之间的任何间隙，实现贴图无缝紧贴 */
}

/* 导航按键独立贴图样式 */
.nav-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 1. 尺寸控制：高度拉满顶栏 */
    height: 100%;       /* 填满顶栏的 60px 高度 */
    width: 90px;        /* 按键宽度，可根据你的贴图比例自由微调（如 80px / 100px） */
    box-sizing: border-box;
    
    text-decoration: none;
    color: #4a3e56;     /* 默认文字颜色 */
    font-weight: bold;
    font-size: 14px;
    
    /* 2. 贴图全屏铺满设置 */
    background-size: 100% 100%; /* 关键：强制贴图拉伸并铺满整个按键框（拉满上下宽度） */
    background-position: center;
    background-repeat: no-repeat;
    
    /* 文字清晰度保障 */
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.9), 1px 1px 1px #ffffff;
    
    /* 悬浮过渡 */
    transition: filter 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

/* 鼠标悬浮：微亮 + 增加亮度反馈（不再上下位移，保持紧贴对齐） */
.nav-btn:hover {
    color: #8f6ee1;
    filter: brightness(1.15); /* 贴图提亮反馈 */
}

/* 激活状态：高亮与发光 */
.nav-btn.active {
    color: #ff5e8e;
    filter: brightness(1.08) drop-shadow(0 0 4px rgba(255, 94, 142, 0.5));
}

/* 按下效果 */
.nav-btn:active {
    filter: brightness(0.9); /* 点击时微微变暗，提供按下感 */
}



/* 主容器布局 */
.main-container {
    display: flex; width: 100%; height: 100vh; padding-top: 60px; /* 避开顶栏 */
}

/* ================= 二、左侧固定区域 ================= */
.left-fixed {
    width: 250px; flex-shrink: 0; height: 100%; padding: 10px;
    display: flex; flex-direction: column; gap: 10px;
}
.intro-box { background-color: #5ee1c9; padding: 15px; border-radius: 10px; position: relative; min-height: 150px;}
.matcha-circle { 
    width: 80px; height: 80px; background-color: #a6c875; 
    border-radius: 50%; position: absolute; top: 10px; left: 10px;
}
.text-boxes { margin-top: 90px; }
.text-box { background: rgba(255,255,255,0.7); margin-bottom: 5px; padding: 5px; border-radius: 4px;}

.contact-box {
    background-color: #6ca8d6; border-radius: 10px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr); gap: 5px; padding: 5px;
    overflow: hidden; /* 保证四角圆角不被内部元素溢出破坏 */
}
.contact-box .icon {
    display: flex; justify-content: center; align-items: center;
    background: rgba(255,255,255,0.5); text-decoration: none; color: #333;
    font-size: 12px; height: 40px;
}
/* 处理四个角的圆角约束 */
.grid-top-left { border-top-left-radius: 8px; }
.grid-top-right { border-top-right-radius: 8px; }
.grid-bottom-left { border-bottom-left-radius: 8px; }
.grid-bottom-right { border-bottom-right-radius: 8px; }

.yellow-box {
    background-color: #f3e45c; border-radius: 10px; display: flex;
    height: 100px;
}
.yellow-img-area { width: 60%; height: 100%; border-radius: 10px 0 0 10px;}
.yellow-text-area { width: 40%; padding: 10px; font-size: 12px;}

.pink-box { flex-grow: 1; position: relative; }
.sticker-img { position: absolute; bottom: 10px; left: 10px; max-width: 90%; }
/* --- 介绍栏优化 --- */
.intro-box {
    background-color: #5ee1c9; 
    padding: 15px; 
    border-radius: 10px; 
    position: relative; 
    min-height: 160px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1); /* 添加一点古早的轻微阴影 */
}

/* 抹茶绿头像框限制内部图片 */
.matcha-circle { 
    width: 80px; height: 80px; 
    background-color: #a6c875; 
    border-radius: 50%; 
    position: absolute; 
    top: 15px; left: 15px;
    overflow: hidden; /* 确保方形头像放进去也会被裁切成圆形 */
    border: 3px solid #fff; /* 加一圈白边更好看 */
}
.avatar-img {
    width: 100%; height: 100%;
    object-fit: cover; /* 保证头像比例不拉伸 */
}

.text-boxes { margin-top: 85px; }
.text-box { 
    background: rgba(255, 255, 255, 0.8); /* 半透明白底，保证文字清晰 */
    margin-bottom: 8px; 
    padding: 6px 10px; 
    border-radius: 5px;
    font-size: 13px;
    color: #333;
    border: 1px dashed #5ee1c9; /* 配合背景色的虚线边框 */
}

/* --- 蓝色联系方式栏优化 --- */
.contact-box {
    background-color: #6ca8d6; 
    border-radius: 10px;
    display: grid; 
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr); 
    gap: 2px; /* 减小缝隙，让网格更紧凑 */
    padding: 3px;
    overflow: hidden; 
}
.contact-box .icon {
    display: flex; justify-content: center; align-items: center;
    background: rgba(118, 238, 255, 0.65); 
    text-decoration: none; 
    color: #444;
    font-size: 13px; 
    font-weight: bold;
    height: 45px;
    transition: all 0.2s ease;
}
.contact-box .icon:hover {
    background: rgba(151, 255, 255, 0.9);
    color: #f44b4b; /* 鼠标悬浮时变色 */
}

/* --- 黄色展示区优化 --- */
.yellow-box {
    background-color: #f3e45c; 
    border-radius: 10px; 
    display: flex;
    height: 120px;
    overflow: hidden; /* 关键：防止内部图片溢出圆角 */
}
.yellow-img-area { 
    width: 60%; height: 100%; 
}
.fill-img {
    width: 100%; height: 100%;
    object-fit: cover; /* 填满60%区域且不拉伸变形 */
}
.yellow-text-area { 
    width: 40%; 
    padding: 10px; 
    font-size: 12px;
    background: rgba(255, 255, 255, 0.4); /* 给文字区一点淡淡的底色 */
}

/* --- 粉色贴纸区优化 --- */
.pink-box { 
    flex-grow: 1; /* 占据左侧剩余的所有高度 */
    position: relative; 
    min-height: 150px;
}
.sticker-img { 
    position: absolute; 
    bottom: 10px; 
    left: 50%; 
    transform: translateX(-50%); /* 居中对齐 */
    max-width: 90%; 
    max-height: 90%;
    pointer-events: none; /* 贴纸不遮挡鼠标点击事件 */
     /* 核心阴影效果 */
    filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.4)); 
}

/* ================= 三、右侧滑轮部分 ================= */
.right-scrollable {
    flex-grow: 1; height: 100%; overflow-y: auto; 
    padding: 10px 20px; display: flex; flex-direction: column; gap: 20px;
}
.sub-scrollable {
    overflow-y: auto; 
}
/* 给所有自带背景插入的区域加一个默认底色，防止图片加载失败时看不见 */
.insert-bg {
    background-color: #ddd; /* 备用底色 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 1. 浅绿色区域 */
.light-green-box { 
    width: 100%; 
    height: 350px; /* 固定高度，确保它是一张大图 */
    flex-shrink: 0; /* 防止被 Flex 布局压扁 */
    border-radius: 10px; 
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* 2. 中间同行区域 (包含播放器和公告栏) */
.middle-row {
    display: flex; 
    width: 100%; 
    height: 350px; /* 控制这一行的高度 */
    gap: 20px; 
    flex-shrink: 0;
}

/* 2.1 紫色播放器主体 */
/* 2.1 紫色播放器 (占比 25%) */
.purple-box {
    width: calc(25% - 10px); /* 25% 减去一半的间距，防止溢出 */
    height: 100%;
    border-radius: 10px; 
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* 半透明紫色蒙版（关键） */
.purple-overlay {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* 这里的 0.5 是透明度。如果你想让背景图片更清晰，改成 0.3；如果想完全去掉紫色滤镜，改成 0 */
    background-color: rgba(143, 110, 225, 0.5); 
    z-index: 1; /* 保证蒙版在背景图之上，内容之下 */
}

/* 播放器内部内容区 */
.music-content {
    position: relative; 
    z-index: 2; /* 确保文字、封面和进度条在蒙版之上，不会被紫色盖住 */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 30px 20px; 
    height: 100%;
}
.playlist-link {
    position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
    border-radius: 5px; font-size: 12px; text-align: center; line-height: 40px;
    z-index: 3; color: #333; text-decoration: none; font-weight: bold;
    background-color: rgba(255,255,255,0.8);
}
.music-cover { 
    width: 130px; height: 130px; border-radius: 50%; margin-bottom: 20px;
    border: 4px solid rgba(255,255,255,0.5);
    display: flex; justify-content: center; align-items: center; font-size: 12px;
}
.music-title { font-weight: bold; margin-bottom: 15px; color: #fff; text-shadow: 1px 1px 2px #000; text-align: center;}
.progress-bar-container { width: 90%; height: 6px; background: rgba(255,255,255,0.3); border-radius: 3px; margin-bottom: 15px;}
.progress-bar { width: 30%; height: 100%; background: #ff75a0; border-radius: 3px;}
.music-controls { display: flex; gap: 10px; opacity: 0.5; transition: opacity 0.3s;}
.purple-box:hover .music-controls { opacity: 1; /* 悬浮时清晰显示控件 */ }

/* 2.2 棕黄色公告栏 (60%) */
/* 2.2 棕黄色公告栏 (占比 75%) */
.brown-box {
    width: calc(75% - 10px); /* 75% 减去另一半的间距 */
    height: 100%;
    border-radius: 10px; 
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
/* --- 棕黄色区文字艺术排版 --- */
.art-text {
    font-size: 15px;               /* 字体大小 */
    color: #ffffff;                /* 字体颜色，纯白 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* 文字阴影，防止背景图太亮吞掉文字 */
    line-height: 2;                /* 行高，让每行文字之间留出呼吸感 */
    letter-spacing: 1px;           /* 字间距，增加一点文艺感 */
    margin-bottom: 25px;           /* 与下方图片位拉开距离 */
    font-weight: bold;             /* 适当加粗 */
	filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.7))
}

/* 清除段落默认的上下边距 */
.art-text p {
    margin-top: 0;
    margin-bottom: 0;
}

/* 阶梯式缩进，每级缩进 2em（约等于两个汉字的宽度） */
.indent-0 { margin-left: 0; }
.indent-1 { margin-left: 2em; }
.indent-2 { margin-left: 4em; }
.indent-3 { margin-left: 6em; }
.indent-4 { margin-left: 8em; }

.brown-content { min-height: 500px; /* 内部内容撑开高度，触发子滑轮 */ }
.image-slot-container { display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap;}
.image-slot { 
    width: 140px; height: 100px; 
    background-color: rgba(255,255,255,0.5);
    border-radius: 8px;
    display: flex; justify-content: center; align-items: center;
}
.extra-content { margin-top: 60px; border-top: 2px dashed #fff; padding-top: 20px;}

/* 3. 红色部分 */
.red-box { display: flex; flex-direction: column; gap: 15px; flex-shrink: 0;}
/* 红色部分：更新日志与留言区（黑玻璃效果） */
.log-section, .message-section {
    height: 180px; 
    border-radius: 10px; 
    padding: 15px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); /* 深度暗色阴影，增加浮空悬浮感 */
    
    /* === 核心：黑玻璃（Dark Glassmorphism）实现 === */
    background-color: rgba(15, 15, 20, 0.3) !important; /* 半透明深灰黑色底色 */
    backdrop-filter: blur(4px) saturate(130%);         /* 背景高斯模糊 10px + 略微提升过路图色彩饱和度 */
    -webkit-backdrop-filter: blur(10px) saturate(130%);  /* 兼容 Safari 浏览器 */
    
    /* 质感边框：顶部与左侧微亮，模拟玻璃反光折射 */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

/* 微调日志条目与留言条目的文字显示，使其在黑玻璃上更清晰 */
.log-item {
    margin-bottom: 12px; 
    font-size: 14px;
    color: #e0e0e0; /* 柔和白字，比纯白更耐看 */
}

.message { 
    background: rgba(255, 255, 255, 0.08); /* 留言气泡也变成微透明黑玻璃内衬 */
    color: #f0f0f0;
    margin-bottom: 8px; 
    padding: 10px; 
    border-radius: 6px; 
    border-left: 3px solid #ff75a0; /* 左侧保留粉红/红色的亮眼立柱 Accent Line */
    backdrop-filter: blur(4px);
}

/* 4. 底部信息 */
.site-footer {
    text-align: center; padding: 20px; font-size: 14px;
    border-radius: 10px; margin-bottom: 20px; flex-shrink: 0;
}
.site-footer p { margin: 5px 0; color: #333; font-weight: bold;}