/* === 全局通用样式重置 === */
* {
    box-sizing: border-box; /* 设置盒模型为 border-box，包含 padding 和 border */
    margin: 0;              /* 移除元素默认外边距 */
    padding: 0;             /* 移除元素默认内边距 */
}

/* 设置 HTML 高度为 100%，以便让 body 背景撑满视口 */
html {
    height: 100%;
}

/* === 页面主体样式 === */
body {
    font-family: 'Segoe UI', system-ui, sans-serif;   /* 设置字体优先级为系统字体 */
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 设置背景渐变色 */
    min-height: 100vh;        /* 设置最小高度为 100% 视口高度 */
    display: flex;            /* 使用 Flexbox 布局 */
    justify-content: center;  /* 水平居中内容 */
    align-items: center;      /* 垂直居中内容 */
    padding: 20px;            /* 页面内边距，防止内容贴边 */
}

/* === 毛玻璃容器样式 === */
.glass-container {
    background: rgba(255, 255, 255, 0.1);              /* 设置半透明背景色 */
    backdrop-filter: blur(12px);                       /* 应用模糊滤镜（毛玻璃效果） */
    -webkit-backdrop-filter: blur(12px);               /* 兼容 Safari 的滤镜 */
    border-radius: 16px;                               /* 设置圆角 */
    border: 1px solid rgba(255, 255, 255, 0.2);         /* 设置半透明边框 */
    padding: 40px;                                     /* 内容内边距 */
    width: 80%;                                       /* 宽度占满父容器 */
    max-width: 360px;                                  /* 最大宽度限制为 480px */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);          /* 添加柔和阴影 */
}

/* === 标题样式 === */
h1 {
    color: #fff;                                       /* 白色文字 */
    text-align: center;                               /* 居中对齐 */
    margin-bottom: 2rem;                              /* 下边距 2 行高 */
    font-size: 2.2em;                                 /* 字体放大为 2.2 倍 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);         /* 轻微阴影，增强对比 */
}

/* === 输入框样式 === */
input {
    width: 100%;                                       /* 宽度占满容器 */
    padding: 14px;                                     /* 内容内边距 */
    margin: 12px 0;                                    /* 上下边距为 12px */
    background: rgba(255, 255, 255, 0.9);              /* 背景白色但有透明度 */
    border: 1px solid rgba(255, 255, 255, 0.3);         /* 浅色边框 */
    border-radius: 8px;                                /* 圆角边框 */
    font-size: 16px;                                   /* 字号 16px */
    transition: all 0.3s ease;                         /* 添加过渡效果（聚焦时生效） */
}

/* 输入框聚焦时样式 */
input:focus {
    outline: none;                                     /* 去掉默认蓝色边框 */
    background: rgba(255, 255, 255, 1);                /* 聚焦时背景完全不透明 */
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);     /* 添加发光边框效果 */
}

/* === 按钮样式 === */
button {
    width: 100%;                                       /* 宽度占满 */
    padding: 14px;                                     /* 内边距 */
    background: rgba(255, 255, 255, 0.9);              /* 半透明白色背景 */
    color: #4a5568;                                    /* 字体颜色为灰蓝色 */
    border: none;                                      /* 去除边框 */
    border-radius: 8px;                                /* 圆角按钮 */
    font-size: 16px;                                   /* 字体大小 */
    font-weight: 600;                                  /* 字体加粗 */
    cursor: pointer;                                   /* 鼠标悬停变为手型 */
    transition: all 0.3s ease;                         /* 添加过渡效果 */
    margin-top: 20px;                                  /* 顶部间距 */
}

/* 按钮悬停时的样式 */
button:hover {
    background: rgba(255, 255, 255, 1);                /* 背景变为完全不透明 */
    transform: translateY(-1px);                       /* 微微上移 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);         /* 添加阴影以增强点击感 */
}

/* === 错误提示框样式 === */
.error {
    color: #ff6b6b;                                    /* 鲜艳的红色字体 */
    background: rgba(0, 0, 0, 0.3);                    /* 半透明黑色背景 */
    padding: 12px;                                     /* 内边距 */
    border-radius: 8px;                                /* 圆角框 */
    margin-top: 20px;                                  /* 上边距 */
    text-align: center;                                /* 居中文字 */
    font-weight: 500;                                  /* 半粗字体 */
}

/* === 成功提示框样式 === */
.success {
    color: #51cf66;                                    /* 鲜艳的绿色字体 */
    background: rgba(0, 0, 0, 0.3);                    /* 同样使用半透明背景 */
    padding: 12px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: center;
    font-weight: 500;
}

/* === 响应式样式：针对最大宽度 480px 的屏幕（移动设备） === */
@media (max-width: 480px) {
    .glass-container {
        padding: 30px;                                 /* 内边距略微减少 */
        margin: 15px;                                  /* 增加外边距防止贴边 */
    }

    h1 {
        font-size: 1.8em;                              /* 移动端标题略微缩小 */
    }
}