/* 全局样式 */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* 我们将在这里设置背景图片 */
    background-color: #111; /* 一个临时的深色背景 */
}

/* --- CSS Grid 魔法开始的地方 --- */
.dashboard-grid {
    display: grid; /* 告诉浏览器，这个容器使用 Grid 布局 */
    height: 100vh; /* 网格高度为整个屏幕的高度 */
    padding: 2rem; /* 在屏幕边缘留出一些内边距 */
    box-sizing: border-box; /* 让 padding 不会撑大容器 */
    /* 定义网格的列和行 */
    /* ... 其他属性 ... */
    grid-template-columns: 2fr 3fr; /* 左窄右宽的两列 */
    grid-template-rows: 1fr 1fr; /* 上下均分的-两行 */
    /* ... 其他属性 ... */  
    gap: 2rem; /* 设置网格单元之间的间距 */
}

/* --- 为每个区域指定网格位置 --- */

/* --- 最终的、三区域布局定义 --- */
#zone-left {
    grid-row: 1 / 3; /* 从第 1 行开始，到第 3 行结束 (占据两行，撑满整个左侧) */
    grid-column: 1 / 2; /* 在第 1 列 */
    /* 让内部的 widget 垂直排列 */
    display: flex;
    flex-direction: column;
}

#zone-top-right {
    grid-row: 1 / 2; /* 在第 1 行 */
    grid-column: 2 / 3; /* 在第 2 列 */
    /* 让内部的 widget 垂直排列 */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#zone-bottom-right {
    grid-row: 2 / 3; /* 在第 2 行 */
    grid-column: 2 / 3; /* 在第 2 列 */
}
/* ... 你之前写的 .dashboard-grid, #zone-top-left 等代码 ... */

/* --- 所有区域的通用磨砂玻璃样式 --- */
.zone {
    /* 这是实现磨砂效果的核心三件套 */
    background: rgba(45, 45, 45, 0.1); /* 1. 半透明的深灰色背景 */
    backdrop-filter: blur(1px); /* 2. 对背景施加10像素的模糊 */
    -webkit-backdrop-filter: blur(10px); /* 兼容 Safari 浏览器 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 3. 微妙的白色半透明边框 */
    /* 其他美化样式 */
    border-radius: 16px; /* 更大的圆角，更有玻璃质感 */
    padding: 1.5rem; /* 增加一些内边距，让内容不要贴着边 */
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    /* --- 添加背景图片 --- */
    background-color: #111; /* 图片加载失败时的备用背景色 */
    background-image: url("http://img.xuanyuk.org/i/2025/06/18/6851f634c4282.jpg");
    background-size: cover; /* 让图片完全覆盖屏幕，不变形 */
    background-position: center; /* 将图片居中显示 */
    background-attachment: fixed; /* 固定背景，滚动页面时背景不动 */
}

/* --- 新增：小组件内部样式 --- */
.widget {
    width: 100%;
}

    .widget:not(:last-child) {
        margin-bottom: 2rem; /* 让小组件之间有垂直间距 */
    }

.widget-title {
    color: rgba(255, 255, 255, 0.7); /* 半透明的白色标题 */
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    margin: 0 0 1rem 0.2rem; /* 调整标题边距 */
}

/* --- 修改：让搜索框和书签充满它们的容器 --- */
#search-section .search-bar {
    width: 100%;
    box-sizing: border-box; /* 让 padding 不会撑大宽度 */
}

#bookmarks-section .links {
    display: grid; /* 使用 Grid 布局让书签卡片更规整 */
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.8rem;
}

    #bookmarks-section .links a {
        background-color: rgba(0, 0, 0, 0.2); /* 书签卡片用更深的半透明背景 */
        padding: 0.8rem;
        font-size: 0.9rem;
        text-align: center;
        border-radius: 6px;
    }

/* --- 修改：让左侧面板的内容垂直排列 --- */
#zone-top-left {
    /* ...保留 grid-column 和 grid-row ... */
    display: flex; /* 启用 Flex 布局 */
    flex-direction: column; /* 让内部的 widget 垂直排列 */
    justify-content: flex-start; /* 从顶部开始排列 */
}

/* --- 新增：信息板内部样式 --- */
#time {
    font-size: 4rem;
    font-weight: 500;
    text-align: center;
}

#date {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin-top: 0.5rem;
}

#weather {
    text-align: center;
    font-size: 1.2rem;
}

/* --- 修改：让右上角面板的内容也垂直排列 --- */
#zone-top-right {
    /* ...保留 grid-column 和 grid-row ... */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 让小组件上下两端对齐，撑满容器 */
}