/* =========================
   全局设置
   ========================= */

/* 【固定】统一盒模型计算方式
   width = 内容 + padding + border
   防止布局被 padding 撑破 */
* {
  box-sizing: border-box;
}

/* =========================
   页面整体布局
   ========================= */

body {
  /* 【可变】页面默认字体 */
  font-family: Arial, sans-serif;

  /* 【可变】页面背景色（灰色衬托白色卡片） */
  background-color: #f0f0f0;

  /* 【固定】使用 Flex 布局实现居中 */
  display: flex;

  /* 【固定】水平方向居中 */
  justify-content: center;

  /* 【固定】垂直方向居中 */
  align-items: center;

  /* 【固定】页面高度等于屏幕高度 */
  height: 100vh;

  /* 【固定】去除浏览器默认外边距 */
  margin: 0;
}

/* =========================
   登录卡片容器
   ========================= */

.login-container {
  /* 【可变】卡片背景色 */
  background: white;

  /* 【可变】内边距，让内容不贴边 */
  padding: 24px;

  /* 【可变】圆角，让界面更柔和 */
  border-radius: 10px;

  /* 【固定】阴影，制造“浮起”的视觉效果 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  /* 【固定】自适应宽度（小屏） */
  width: 100%;

  /* 【固定】最大宽度（大屏不拉太宽） */
  max-width: 360px;
}

/* =========================
   表单
   ========================= */

form {
  /* 【固定】表单宽度填满父容器 */
  width: 100%;
}

/* =========================
   输入框样式
   ========================= */

input {
  /* 【固定】输入框铺满容器 */
  width: 100%;

  /* 【可变】输入框内边距 */
  padding: 10px;

  /* 【固定】上下间距，拉开元素距离 */
  margin: 10px 0;

  /* 【可变】边框颜色 */
  border: 1px solid #ccc;

  /* 【可变】输入框圆角 */
  border-radius: 5px;

  /* 【固定】独占一行 */
  display: block;
}

/* =========================
   按钮样式
   ========================= */

button {
  /* 【固定】按钮宽度与输入框一致 */
  width: 100%;

  /* 【可变】按钮内边距 */
  padding: 10px;

  /* 【固定】与输入框保持距离 */
  margin-top: 10px;

  /* 【可变】按钮背景色 */
  background-color: #007bff;

  /* 【固定】按钮文字颜色 */
  color: white;

  /* 【固定】去除默认边框 */
  border: none;

  /* 【可变】按钮圆角 */
  border-radius: 5px;

  /* 【固定】鼠标悬停显示可点击状态 */
  cursor: pointer;
}