:root {
    --main-color: hsl(190, 93%, 89%);
    --middle-light-main-color: hsl(264, 39%, 69%);
    --light-main-color: hsl(264, 35%, 92%);
}

/* 暗色主题：当 html 有 dark 类时生效 */
html.dark {
    --main-color: hsl(190, 93%, 25%);
}

body {
    display: grid;
    grid-template-columns: 0fr 1fr 0fr; /* 默认窄屏：左右为 0 */
    grid-template-rows: auto auto auto;
    font-family: sans-serif;

    min-height: 100vh;
    margin: 0;
    gap: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;     /* 滚动时背景固定不动 */
    background-color: var(--main-color); /* 可选：设置背景色以防图片加载失败或未覆盖区域 */
}

.left-sidebar {
  grid-column: 1;
  grid-row: 1 / span 3; /* 跨越全部三行 */
}

.right-sidebar {
  grid-column: 3;
  grid-row: 1 / span 3;
}

/* 响应式：当屏幕宽度 >= 768px 时，显示左右侧边栏 */
@media (min-width: 768px) {
  body {
    grid-template-columns: 1fr minmax(300px, 4fr) 1fr;
  }
}

header {
    grid-column: 2;
    grid-row: 1;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;

    padding: 0.5rem 0;
    background-color: var(--main-color);
}

header nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}


main {
    grid-column: 2;
    grid-row: 2;
    padding: 1rem;
}

footer {
    grid-column: 2;
    grid-row: 3;
    padding: 1rem;
}

/* 美化下拉框 */
#languageSelector {
    padding: 8px 12px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    appearance: none; /* 移除浏览器默认下拉箭头（可选） */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px;
    padding-right: 32px;
}