/* === 凌乱美学毛玻璃风格 (Chaotic Glassmorphism) === */
:root {
    --glass-bg: rgba(255, 255, 255, 0.2);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    --text-color: #2d3436;
    --accent-color: #ff7675; /* 爱心红 */
    --hover-glow: rgba(255, 255, 255, 0.6);
}

body {
    margin: 0;
    padding: 0;
    font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-color);
    background-color: #ffdee9;
    /* 更加梦幻的渐变背景 */
    background-image: linear-gradient(0deg, #ffdee9 0%, #b5fffc 100%);
    min-height: 100vh;
    overflow-x: hidden;
}

/* 漂浮背景球动画 */
.background-blobs { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.7; animation: float 10s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95); }
.blob-1 { width: 500px; height: 500px; background: #a18cd1; top: -100px; left: -100px; }
.blob-2 { width: 400px; height: 400px; background: #fbc2eb; bottom: -50px; right: -50px; animation-duration: 14s; }

@keyframes float {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, 50px) scale(1.05); }
}

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

/* === 核心组件样式 === */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--glass-shadow);
    color: var(--text-color);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* 弹性过渡 */
    position: relative;
    overflow: hidden;
}

/* 鼠标悬停时的“扶正 + 上浮 + 高光”效果 */
.glass-card:hover {
    transform: translateY(-10px) rotate(0deg) scale(1.05); /* 强制扶正 */
    background: rgba(255, 255, 255, 0.35);
    border-color: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    z-index: 10; /* 悬停时层级最高 */
}

/* 添加一道流光扫过的高光效果 */
.glass-card::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
}
.glass-card:hover::after { left: 150%; transition: 0.7s; }

/* === 仪表盘布局 (凌乱美) === */
.dashboard-messy {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-bottom: 80px;
    padding-top: 40px;
    position: relative;
}

/* 通用小组件尺寸 */
.widget-box {
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --- 1. 中央大头像 --- */
.widget-profile-center {
    width: 220px;
    height: 220px;
    order: 0; /* 放在视觉中心 (Flex布局中可能需要配合 HTML 结构) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5;
    /* 头像不旋转，保持端庄 */
    transform: rotate(0deg); 
}

.avatar-large {
    width: 120px; 
    height: 120px;
    border-radius: 50%;
    background: url('https://api.dicebear.com/7.x/notionists/svg?seed=Felix') center/cover;
    border: 4px solid rgba(255,255,255,0.9);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: transform 0.5s;
    margin-bottom: 15px;
}
.widget-profile-center:hover .avatar-large {
    transform: rotate(360deg); /* 悬停旋转头像 */
}

/* --- 2. 凌乱旋转逻辑 --- */
/* 给不同组件预设随机旋转角度，制造“散落”感 */
.widget-weather  { transform: rotate(-5deg); order: -1; } /* 左边 */
.widget-calendar { transform: rotate(4deg);  order: 1; }  /* 右边 */
.widget-uptime   { transform: rotate(-3deg); order: 3; }
.widget-like     { transform: rotate(6deg);  order: 4; }

/* --- 3. 组件内部细节 --- */
/* 点赞爱心 */
.heart-icon-big {
    font-size: 3rem;
    color: var(--accent-color);
    filter: drop-shadow(0 4px 6px rgba(255, 118, 117, 0.4));
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.widget-like:active .heart-icon-big { transform: scale(0.6); }
.like-count-text { font-size: 1.2rem; font-weight: bold; color: var(--accent-color); margin-top: 5px; }

/* 日历大字 */
.cal-date-big { font-size: 3.5rem; font-weight: 800; line-height: 1; background: -webkit-linear-gradient(#eee, #333); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.8;}

/* 天气图标 */
.weather-icon-big { font-size: 3rem; margin-bottom: 5px; animation: bounce 3s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }


/* === 文章列表 (动效增强) === */
.post-list-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.glass-post-item {
    padding: 30px;
    /* 列表项也可以稍微歪一点点，更有趣 */
    transform: rotate(0deg); 
}
.glass-post-item:nth-child(odd) { transform: rotate(-0.5deg); }
.glass-post-item:nth-child(even) { transform: rotate(0.5deg); }

.glass-post-item h2 a {
    text-decoration: none;
    color: var(--text-color);
    background: linear-gradient(to right, #6c5ce7, #ff7675);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.3s, color 0.3s;
    padding-bottom: 4px;
}

/* 标题悬停特效：下划线展开 + 字体渐变 */
.glass-post-item:hover h2 a {
    background-size: 100% 2px;
    color: #6c5ce7;
}

/* 标签小丸子悬停动画 */
.tags span {
    background: rgba(255,255,255,0.4);
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    margin-right: 8px;
    display: inline-block;
    transition: transform 0.2s, background 0.2s;
    cursor: default;
}
.tags span:hover {
    transform: scale(1.1);
    background: #fff;
    color: #6c5ce7;
}

/* === 1. 顶部导航栏优化 === */
.glass-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 30px;
    margin-bottom: 20px;
}

.nav-left { font-size: 0.9rem; display: flex; gap: 8px; align-items: center; width: 150px; }
.nav-center { flex: 1; text-align: center; font-size: 1.5rem; font-weight: bold; letter-spacing: 2px; }
.nav-center a { text-decoration: none; color: inherit; background: linear-gradient(45deg, #6c5ce7, #ff7675); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.nav-right { width: 150px; text-align: right; display: flex; gap: 20px; justify-content: flex-end; }
.nav-item { text-decoration: none; color: inherit; font-size: 0.95rem; opacity: 0.7; transition: opacity 0.2s; position: relative;}
.nav-item:hover { opacity: 1; }
/* 导航链接下划线动效 */
.nav-item::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background: var(--accent-color); transition: width 0.3s; }
.nav-item:hover::after { width: 100%; }


/* === 2. 圆形毛玻璃容器 (专门给头像用) === */
.glass-circle {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6); /* 边框稍微亮一点 */
    box-shadow: var(--glass-shadow);
    
    /* 核心：变圆 */
    border-radius: 50%;
    padding: 10px; /* 玻璃壳和内部头像的间距 */
    
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.glass-circle:hover {
    transform: scale(1.1) rotate(5deg);
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.6); /* 发光效果 */
}


/* === 3. 布局微调：围绕式布局 === */
/* 我们使用 Flexbox 配合 margin 来模拟“卫星环绕” */

.dashboard-orbit {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /* 1. 宽度加大，给组件更多呼吸空间 */
    max-width: 1200px; 
    margin: 60px auto 100px auto;
    /* 2. 间距加大 */
    gap: 80px; 
    position: relative;
}

/* 头像组件样式重置 */
.widget-avatar-container {
    width: 220px;
    height: 220px;
    margin: 0 50px; /* 左右强制留白 */
    flex-shrink: 0;
}

/* 左右两侧的卫星群容器 */
.satellite-group {
    display: flex;
    flex-direction: column;
    gap: 50px; /* 上下组件的距离也拉大 */
}

.avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: url('./head.svg') center/cover;
    /* 图片本身的边框 */
    border: 3px solid rgba(255,255,255,0.3); 
}

/* 其他小组件样式微调 */
.widget-box {
    width: 120px;
    height: 120px;
    /* 稍微调小一点，突出中间的大头像 */
}

/* 组件位置微调：不需要太夸张的位移，因为gap已经够大了，稍微旋转即可 */
.pos-left-top { transform: rotate(-6deg); }
.pos-left-bottom { transform: rotate(4deg); }
.pos-right-top { transform: rotate(6deg); }
.pos-right-bottom { transform: rotate(-4deg); }

/* 悬停时归位 */
.glass-card:hover { transform: scale(1.1) rotate(0deg); z-index: 20;}

/* === 新增：查看所有文章按钮 === */
.btn-view-all {
    display: block;
    width: 200px;
    margin: 40px auto;
    padding: 15px 0;
    text-align: center;
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 50px;
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.3s;
}
.btn-view-all:hover {
    background: #fff;
    letter-spacing: 2px;
}

/* 运行时间改为“天数”的专属样式 */
.uptime-days {
    font-size: 3rem;
    font-weight: 800;
    color: var(--accent-color);
    line-height: 1;
}
.uptime-label {
    font-size: 0.9rem;
    opacity: 0.6;
    letter-spacing: 2px;
}


/* === 新增：标签云筛选区 === */
.tag-cloud-section {
    max-width: 800px;
    margin: 0 auto 40px auto;
    text-align: center;
    padding: 20px;
}
.tag-filter-btn {
    display: inline-block;
    background: rgba(255,255,255,0.3);
    border: 1px solid rgba(255,255,255,0.5);
    padding: 6px 16px;
    border-radius: 20px;
    margin: 5px;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s;
}
.tag-filter-btn:hover {
    background: #fff;
    transform: scale(1.1);
    color: #6c5ce7;
    box-shadow: 0 4px 10px rgba(108, 92, 231, 0.2);
}


/* === 归档页面：高可读性清单风格 === */

/* 1. 返回按钮 */
.back-home-btn {
    display: inline-block;
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9rem;
    opacity: 0.6;
    transition: opacity 0.3s, transform 0.3s;
    font-family: monospace;
}
.back-home-btn:hover {
    opacity: 1;
    transform: translateX(-5px);
}

/* 2. 大玻璃清单容器 */
.archive-sheet {
    max-width: 800px;
    margin: 0 auto 100px auto; /* 底部留多点空间 */
    padding: 60px 80px; /* 内部留白要大，显高级 */
    min-height: 60vh;
    
    /* 玻璃效果微调：更像一张磨砂纸 */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 手机端适配：减少留白 */

/* === 动态天气背景（按天气分类切换类名） === */
#weather-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
#weather-bg .layer { position: absolute; inset: 0; }

/* SUNNY */
.weather-sunny { background: linear-gradient(180deg, #fff7b8 0%, #ffd27a 40%, rgba(255,255,255,0) 100%); }
.weather-sunny::before {
    content: '';
    position: absolute; right: 10%; top: 10%; width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff6a0 0%, #ffd34d 30%, #ffb74d 60%, rgba(255,183,77,0.6) 100%);
    filter: blur(6px);
    animation: sun-move 12s linear infinite;
}
@keyframes sun-move { 0% { transform: translateY(0) } 50% { transform: translateY(18px) } 100% { transform: translateY(0) } }

/* PARTLY CLOUDY */
.weather-partly { background: linear-gradient(180deg, rgba(250,250,250,0.7) 0%, rgba(200,220,255,0.4) 60%); }
.weather-partly::before, .weather-partly::after {
    content: '';
    position: absolute; left: -10%; top: 12%; width: 38%; height: 80px; background: rgba(255,255,255,0.85); border-radius: 50px; box-shadow: 60px 10px 30px rgba(0,0,0,0.08);
    animation: cloud-move 18s linear infinite;
}
.weather-partly::after { left: 20%; top: 6%; width: 45%; height: 90px; animation-delay: 6s; opacity:0.95 }
@keyframes cloud-move { 0% { transform: translateX(0) } 100% { transform: translateX(120%) } }

/* CLOUDY */
.weather-cloudy { background: linear-gradient(180deg, #dfe9f3 0%, #c5d5ea 100%); }
.weather-cloudy::before, .weather-cloudy::after { content:''; position:absolute; left:-20%; top:10%; width:60%; height:120px; background: #fff; border-radius: 50px; opacity:0.95; filter: blur(6px); animation: cloud-move 20s linear infinite }
.weather-cloudy::after { left:5%; top:6%; width:55%; height:110px; animation-delay: 8s }

/* RAIN */
.weather-rain { background: linear-gradient(180deg, #cfe0ff 0%, #9fb8d8 100%); }
.weather-rain::before { /* clouds */ content:''; position:absolute; left:-10%; top:8%; width:70%; height:110px; background:#f6f8fb; border-radius:50px; filter:blur(6px); opacity:0.95 }
.weather-rain::after { /* rain layer */ content:''; position:absolute; inset:20% 0 0 0; background-image: repeating-linear-gradient(180deg, rgba(255,255,255,0.0) 0px, rgba(255,255,255,0.0) 8px, rgba(200,220,255,0.6) 9px, rgba(200,220,255,0.6) 10px); background-size: 20px 20px; opacity:0.7; animation: rain-fall 0.8s linear infinite; }
@keyframes rain-fall { from { background-position: 0 0 } to { background-position: 0 20px } }

/* SNOW */
.weather-snow { background: linear-gradient(180deg, #f6fbff 0%, #dceefb 100%); }
.weather-snow::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.9) 0 2px, transparent 3px), radial-gradient(circle at 30% 40%, rgba(255,255,255,0.9) 0 2px, transparent 3px), radial-gradient(circle at 70% 30%, rgba(255,255,255,0.9) 0 2px, transparent 3px); background-size: 100% 100%; animation: snow-fall 6s linear infinite; opacity:0.9 }
@keyframes snow-fall { 0% { transform: translateY(-10%) } 100% { transform: translateY(90%) } }

/* STORM */
.weather-storm { background: linear-gradient(180deg, #a6b0c8 0%, #6f7b94 100%); }
.weather-storm::before { content:''; position:absolute; inset:0; background: rgba(255,255,255,0.02); animation: storm-flash 6s linear infinite; }
@keyframes storm-flash { 0%,92% { opacity:0 } 93% { opacity:0.6 } 95% { opacity:0 } 97% { opacity:0.8 } 100% { opacity:0 } }

/* FOG */
.weather-fog { background: linear-gradient(180deg, #f1f3f4 0%, #e0e4e8 100%); }
.weather-fog::before { content:''; position:absolute; inset:20% 0 0 0; background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0)); filter: blur(10px); opacity:0.9 }

/* Utility: transition when switching weather */
#weather-bg { transition: opacity 0.6s ease; }
#weather-bg.active { opacity: 1 }
#weather-bg.inactive { opacity: 0 }

/* SVG layer base styles */
#weather-bg .layer { position: absolute; inset: 0; display:flex; justify-content:center; align-items:flex-start; pointer-events:none; opacity:0; transform: translateY(0); transition: opacity 0.6s ease, transform 0.8s ease; }
#weather-bg .layer img { width: 60%; max-width: 420px; height: auto; display:block; filter: drop-shadow(0 10px 30px rgba(0,0,0,0.08)); }

/* layer positions */
#weather-bg .layer-sun { align-items:flex-start; padding-top:4vh; justify-content:flex-end; padding-right:6vw; }
#weather-bg .layer-sun img { width: 36%; max-width: 260px; transform-origin: center; animation: sun-pulse 10s ease-in-out infinite; }
@keyframes sun-pulse { 0% { transform: scale(1) rotate(0deg) } 50% { transform: scale(1.02) rotate(1deg) } 100% { transform: scale(1) rotate(0deg) } }

#weather-bg .layer-cloud { align-items:flex-start; padding-top:6vh; }
#weather-bg .layer-rain { align-items:flex-start; padding-top:6vh; }
#weather-bg .layer-snow { align-items:flex-start; padding-top:8vh; }
#weather-bg .layer-storm { align-items:flex-start; padding-top:6vh; }
#weather-bg .layer-fog { align-items:flex-start; padding-top:30vh; }

/* Visible states */
#weather-bg.weather-sunny .layer-sun { opacity:1; transform: translateY(-6px); }
#weather-bg.weather-partly .layer-sun { opacity:0.9; transform: translateY(-4px); }
#weather-bg.weather-partly .layer-cloud { opacity:1; transform: translateX(8%); }
#weather-bg.weather-cloudy .layer-cloud { opacity:1; transform: translateX(12%); }
#weather-bg.weather-rain .layer-cloud { opacity:0.9; transform: translateX(12%); }
#weather-bg.weather-rain .layer-rain { opacity:1; transform: translateY(0); }
#weather-bg.weather-snow .layer-cloud { opacity:0.9; }
#weather-bg.weather-snow .layer-snow { opacity:1; }
#weather-bg.weather-storm .layer-cloud { opacity:0.9; }
#weather-bg.weather-storm .layer-storm { opacity:1; }
#weather-bg.weather-fog .layer-fog { opacity:1; transform: translateY(0); }

/* Sun glass / halo enhancements to reduce visual conflict with avatar */
#weather-bg .layer-sun { position: relative; }
#weather-bg .layer-sun img { filter: drop-shadow(0 16px 40px rgba(255,190,80,0.12)); border-radius: 50%; }
#weather-bg .layer-sun::after { content: ''; position: absolute; right: 6vw; top: 6vh; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, rgba(255,240,180,0.14), rgba(255,240,180,0.06) 40%, transparent 70%); filter: blur(18px); pointer-events: none; opacity: 0.95; transform: translateZ(0); }

/* When sunny, hide the large left blur blob to avoid double-circle */
.sunny-suppress-blob .blob-1 { opacity: 0 !important; transform: scale(0.98); }



/* subtle cloud float */
@keyframes cloud-slow { 0% { transform: translateX(-5%) } 50% { transform: translateX(5%) } 100% { transform: translateX(-5%) } }
#weather-bg .layer-cloud img { animation: cloud-slow 18s ease-in-out infinite; }

/* rain shimmer: move raindrops svg down a bit */
@keyframes rain-drops { 0% { transform: translateY(-4px); opacity:0.9 } 50% { transform: translateY(6px); opacity:1 } 100% { transform: translateY(-4px); opacity:0.9 } }
#weather-bg .layer-rain img { animation: rain-drops 0.6s linear infinite; }

/* snow drift */
@keyframes snow-drift { 0% { transform: translateY(-10px) } 100% { transform: translateY(40px) } }
#weather-bg .layer-snow img { animation: snow-drift 6s linear infinite; }

/* storm flash (subtle overlay from earlier rules kept) */
#weather-bg.weather-storm::before { content: ''; position:absolute; inset:0; background: rgba(255,255,255,0.02); animation: storm-flash 6s linear infinite; }

/* Accessibility: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    #weather-bg .layer img { animation: none !important; }
    #weather-bg .layer { transition: none !important; }
}

@media (max-width: 768px) {
    .archive-sheet { padding: 40px 20px; }
}

/* 3. 标题区 */
.archive-title {
    font-size: 2.5rem;
    margin: 0 0 10px 0;
    font-weight: 300; /* 细字体更优雅 */
    letter-spacing: 2px;
}

.archive-subtitle {
    font-size: 0.9rem;
    opacity: 0.5;
    margin-bottom: 60px;
    font-family: monospace;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 20px;
}

/* 4. 列表项设计 */
.archive-list {
    display: flex;
    flex-direction: column;
    gap: 25px; /* 文章间距 */
}

.archive-item {
    display: flex;
    align-items: baseline; /* 文字基线对齐 */
    transition: transform 0.2s;
}

.archive-item:hover {
    transform: translateX(10px); /* 悬停时整体右移一点点 */
}

/* 日期样式 */
.archive-date {
    width: 120px; /* 固定宽度，确保标题对齐 */
    flex-shrink: 0;
    font-family: "Menlo", "Consolas", monospace; /* 代码字体 */
    font-size: 0.85rem;
    color: var(--text-color);
    opacity: 0.5;
}

/* 标题样式 */
.archive-content {
    flex-grow: 1;
}

.archive-link {
    text-decoration: none;
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.4;
    position: relative;
    transition: color 0.3s;
}

/* 标题悬停效果：颜色变深，且不再需要下划线，保持干净 */
.archive-link:hover {
    color: #6c5ce7;
}

/* 移动端适配列表 & 全局移动端优化 */
@media (max-width: 600px) {
    .archive-item { flex-direction: column; gap: 5px; }
    .archive-date { font-size: 0.75rem; opacity: 0.4; }

    /* 通用容器与导航缩放 */
    .container { padding: 0 12px; }
    .glass-nav { padding: 8px 12px; }
    .nav-center a { font-size: 1rem; }
    .nav-right { gap: 10px; }
    .nav-item { padding: 8px 10px; border-radius: 8px; }
    #top-clock { display: none; } /* 节省顶部空间 */

    /* 隐藏装饰性背景 blob 减少渲染开销 */
    .background-blobs { display: none; }

    /* 仪表盘调整为竖排，便于小屏浏览 */
    .dashboard-orbit { flex-direction: column; gap: 16px; align-items: center; }


    /* 减弱天气背景和动效强度以提高移动端性能
       注意：不要设置所有 layer 的全局不透明度（会导致非激活天气图层也可见，例如在晴天手机上出现云）
    
    #weather-bg .layer img { width: 40%; max-width: 220px; filter: none; }
    */
    /* 在移动端，只降低当前激活天气图层的不透明度，避免让不相关图层可见 */
    #weather-bg.weather-sunny .layer-sun { opacity: 0.9; }
    #weather-bg.weather-partly .layer-sun { opacity: 0.8; }
    #weather-bg.weather-partly .layer-cloud { opacity: 0.7; transform: translateX(6%); }
    #weather-bg.weather-cloudy .layer-cloud { opacity: 0.85; transform: translateX(12%); }
    #weather-bg.weather-rain .layer-rain, #weather-bg.weather-rain .layer-cloud { opacity: 0.7; }
    #weather-bg.weather-snow .layer-snow { opacity: 0.72; }
    #weather-bg.weather-fog .layer-fog { opacity: 0.78; }
    #weather-bg.weather-storm .layer-storm { opacity: 0.72; }
    #weather-bg .layer img { animation-duration: 8s; }

    /* 去掉 hover 带来的缩放，避免触摸误触 */
    .glass-card:hover { transform: none !important; z-index: auto !important; }

    /* 缩小头像与卡片内边距 */
    .avatar-large { width: 96px; height: 96px; }
    .read-sheet, .write-sheet, .glass-post-item { padding: 30px 18px; }

    /* 发布按钮在小屏更小更靠内 */
    .btn-publish-glass { padding: 12px 24px; bottom: 20px; right: 20px; }
}

@media (max-width: 420px) {
    .nav-center a { font-size: 0.95rem; }
    .weather-icon-big { font-size: 1.8rem; }
    
    .btn-publish-glass { right: 12px; bottom: 12px; padding: 10px 18px; font-size: 0.95rem; }
    /* 进一步减少天气图层大小 */
    #weather-bg .layer img { width: 32%; max-width: 180px; }
    /* 新增：把两个卫星组放在一行（水平滚动） */
    .sat-row { display:flex; gap:12px; width:100%; justify-content:center; }
    .sat-row .satellite-group { width: 48%; display:flex; flex-direction:column; gap:12px; align-items:center; }
    /* 让 widget 在 sat-row 内居中 */
    .sat-row .widget-box { margin: 0 auto; }}


/* === 写作页面：水晶写字板 === */

/* 1. 容器：一张巨大的、高透的玻璃纸 */
.write-sheet {
    max-width: 900px;
    margin: 40px auto 80px auto;
    padding: 60px 80px;
    
    background: rgba(255, 255, 255, 0.3); /* 比其他卡片更透 */
    backdrop-filter: blur(25px);          /* 模糊度更高，为了看清文字 */
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.05);
    
    position: relative;
    transition: box-shadow 0.3s;
}

/* 聚焦时，阴影加深，更有质感 */
.write-sheet:focus-within {
    box-shadow: 0 30px 60px rgba(108, 92, 231, 0.15);
    border-color: #fff;
}

/* 手机端适配 */
@media (max-width: 768px) {
    .write-sheet { padding: 40px 20px; }
}

/* 2. 输入控件通用样式 */
.write-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
    display: block;
    transition: all 0.3s;
}

.write-input::placeholder {
    color: rgba(0,0,0,0.3);
    font-style: italic;
}

/* 3. 标题输入 */
.input-title-glass {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    /* 标题有个隐形的下划线，聚焦时显现 */
    border-bottom: 2px solid transparent;
}
.input-title-glass:focus {
    border-bottom-color: var(--accent-color);
}

/* 4. 信息栏 (日期 + 标签) */
.write-meta-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 50px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.static-date {
    font-family: monospace;
    opacity: 0.5;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.3);
    padding: 4px 10px;
    border-radius: 6px;
}

.input-tags-glass {
    flex: 1;
    transform: scale(0.9);
    font-family: monospace;
    font-size: 1rem;
    color: #6c5ce7; /* 标签用紫色 */
}

/* 5. 正文区域 */
.input-content-glass {
    font-size: 1.2rem;
    line-height: 1.8;
    font-family: "Songti SC", "Georgia", serif; /* 启用衬线体，更有书写感 */
    min-height: 60vh;
    resize: none; /* 禁止手动拉伸，我们用JS自动拉伸 */
    color: #2d3436;
}

/* 6. 悬浮发布按钮 */
.publish-bar {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 100;
}

.btn-publish-glass {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 10px 20px rgba(108, 92, 231, 0.3);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-publish-glass:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 30px rgba(108, 92, 231, 0.5);
}

.btn-publish-glass:active {
    transform: scale(0.95);
}


/* === 文章阅读页：水晶阅读器 === */

/* 1. 阅读卡片容器 */
.read-sheet {
    max-width: 800px; /* 最佳阅读宽度 */
    margin: 40px auto 80px auto;
    padding: 70px 90px; /* 宽敞的内边距 */
    
    background: rgba(255, 255, 255, 0.45); /* 比首页更不透明一点，保证文字对比度 */
    backdrop-filter: blur(30px);            /* 强模糊，消除背景干扰 */
    -webkit-backdrop-filter: blur(30px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    
    position: relative;
    overflow: hidden; /* 防止大图溢出 */
}

/* 手机端适配 */
@media (max-width: 768px) {
    .read-sheet { padding: 40px 25px; margin-top: 20px; }
}

/* 2. 文章头部信息 */
.article-header {
    text-align: center;
    margin-bottom: 60px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 40px;
}

.article-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.3;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.article-meta {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.9rem;
    color: rgba(0,0,0,0.5);
    font-family: monospace;
}

/* 3. 正文排版系统 (Markdown渲染区) */
.article-body {
    font-family: "Songti SC", "Noto Serif SC", "Georgia", serif; /* 衬线体 */
    font-size: 1.15rem;
    line-height: 1.9;
    color: #2d3436;
    text-align: justify; /* 两端对齐 */
}

/* 标题 */
.article-body h1, .article-body h2, .article-body h3 {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif; /* 标题用无衬线体 */
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: bold;
    color: #000;
}
.article-body h1 { font-size: 2rem; border-bottom: 2px solid var(--accent-color); display: inline-block; padding-bottom: 5px; }
.article-body h2 { font-size: 1.6rem; }
.article-body h3 { font-size: 1.3rem; }

/* 段落 */
.article-body p { margin-bottom: 1.8rem; }

/* 链接 */
.article-body a {
    color: #6c5ce7;
    text-decoration: none;
    border-bottom: 1px dashed #6c5ce7;
    transition: all 0.2s;
}
.article-body a:hover { background: rgba(108, 92, 231, 0.1); }

/* 列表 */
.article-body ul, .article-body ol {
    margin-bottom: 20px;
    padding-left: 20px;
}
.article-body li { margin-bottom: 8px; }

/* 引用块 (Blockquote) - 重点美化 */
.article-body blockquote {
    background: rgba(108, 92, 231, 0.05);
    border-left: 5px solid #6c5ce7;
    margin: 30px 0;
    padding: 20px 30px;
    border-radius: 0 10px 10px 0;
    font-style: italic;
    color: #555;
}

/* 代码块 (Code) */
.article-body pre {
    display: block;
    /* 强制左对齐，防止继承父级的居中 */
    text-align: left;
    
    
    /* 确保背景色和字体正常 */
    background: #282c34;
    color: #abb2bf;
    padding: 20px;
    border-radius: 12px;
    
    /* 处理溢出和换行 */
    overflow-x: auto;      /* 允许横向滚动 */
    white-space: pre;      /* 保持代码格式不换行 (如果你喜欢换行，改成 pre-wrap) */
    word-wrap: normal;
    
    /* 布局修正 */
    margin: 30px 0;
    width: 100%;           /* 撑满容器 */
    max-width: 100%;       /* 防止撑破容器 */
    box-sizing: border-box; /* 边框计算在宽度内 */
}

.article-body pre code {
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    white-space: inherit; /* 跟随 pre 的设定 */
}
/* 避免 pre 里的 code 重复背景 */
.article-body pre code {
    background: transparent; /* 去掉 code 标签可能的背景色 */
    color: inherit;          /* 继承 pre 的颜色 */
    padding: 0;
    border-radius: 0;
    white-space: pre;          /* 保持代码格式 */
    font-family: "Menlo", "Consolas", monospace;
    font-size: 0.9rem;
}

/* 图片 */
.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    display: block;
}

.article-body p code, 
.article-body li code {
    background: rgba(108, 92, 231, 0.1);
    color: #6c5ce7;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "Menlo", monospace;
    font-size: 0.9em;
    margin: 0 2px;
}

/* 分割线 */
.article-body hr {
    border: 0;
    height: 1px;
    background: rgba(0,0,0,0.1);
    margin: 50px auto;
    width: 60%;
}

/* 4. 底部标签区 */
.article-footer {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* === 核弹级代码块修复 === */

.article-body {
    /* 防止父容器影响子元素宽度 */
    min-width: 0; 
}

.article-body pre {
    /* 1. 强制重置盒模型 */
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    
    /* 2. 关键：解决“只显示一半”的问题 */
    /* 如果不想横向滚动，就强制换行，先看能不能显示全 */
    white-space: pre-wrap; 
    word-break: break-all; 
    
    /* 3. 样式重置 */
    background: #282c34;
    color: #abb2bf;
    padding: 15px;
    margin: 20px 0;
    border-radius: 8px;
    text-align: left;
}

.article-body code {
    white-space: inherit;
}