/* ==============================
   【全局重置】让所有浏览器表现一致
   ============================== */
/* 
   * 是 CSS 中的“通配符”，代表“页面上所有的 HTML 元素”
   默认情况下，不同浏览器会给元素加不同的 margin（外边距）和 padding（内边距），
   比如 <h1> 在 Chrome 和 Firefox 里高度可能不一样。
   下面这三行是为了“清零”这些默认样式，让布局更可控。
*/
* {
  margin: 0;        /* 清除所有元素的外边距（上下左右的空白） */
  padding: 0;       /* 清除所有元素的内边距（内容与边框之间的空白） */
  /*
    box-sizing: border-box 的作用是：
    当你设置一个元素 width: 300px 时，
    这个 300px 会包含 border（边框）和 padding（内边距），
    而不是只包含内容区域。
    👉 这样计算宽度更直观，避免“明明写了300px却变宽了”的问题。
  */
  box-sizing: border-box;
}

/* ==============================
   【页面整体设置】body 是整个网页的“画布”
   ============================== */
body {
  /*
    font-family：设置默认字体。
    浏览器会从左到右尝试加载字体：
    - 如果用户电脑有 "Microsoft YaHei"（微软雅黑），就用它（Windows 常见）
    - 没有的话，试试 "PingFang SC"（苹方，Mac 常见）
    - 都没有，就用系统默认的无衬线字体（sans-serif）
  */
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;

  background-color: #f0f2f5; /* 页面背景色：一种柔和的浅灰蓝色，不刺眼 */
  color: #333;               /* 默认文字颜色：深灰色，比纯黑更舒适 */

  /*
    min-height: 100vh 的意思是：
    “这个 body 至少要占满整个视口（viewport）的高度”
    vh = viewport height（视口高度），100vh = 100% 屏幕高
    👉 即使内容很少，页面也不会“塌陷”，登录框也能居中
  */
  min-height: 100vh;

  padding: 1rem; /* 给整个页面四周留一点空白（1rem ≈ 16px） */

  /*
    使用 Flex 布局让 .container（主容器）在页面中居中
    display: flex 启用弹性盒子布局
  */
  display: flex;
  justify-content: center; /* 水平居中（左右对齐到中间） */
  align-items: center;     /* 垂直居中（上下对齐到中间） */
}

/* ==============================
   【主容器】.container 包裹整个登录界面（图片 + 表单）
   ============================== */
.container {
  width: 100%;              /* 宽度占满父容器（但受 max-width 限制） */
  max-width: 1000px;        /* 最大宽度不超过 1000 像素（大屏不会太宽） */

  background: white;        /* 白色背景，形成“卡片”效果 */
  border-radius: 16px;      /* 四个角变成圆角（数值越大越圆） */
  overflow: hidden;         /* 如果子元素超出圆角范围，就裁剪掉（避免圆角失效） */

  /*
    使用 CSS Grid 布局，把容器分成两列
    grid-template-columns: 1fr 1fr;
    - fr 是“fraction”（分数）单位
    - 1fr 1fr 表示两列平分可用空间
    👉 左边放图片，右边放登录表单
  */
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ==============================
   【左侧图片区域】.hero-image
   ============================== */
.hero-image {
  /*
    如果图片加载失败，用紫色渐变作为背景，避免空白
    linear-gradient(方向, 起始颜色, 结束颜色)
    135deg = 从右上角到左下角
  */
  background: linear-gradient(135deg, #8e2de2, #4a00e0);

  /*
    使用 Flex 让图片在区域内居中
  */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */

  padding: 1rem; /* 图片区内部留点空白 */
}

.hero-image img {
  max-width: 100%;   /* 图片宽度不要超过容器宽度（防止溢出） */
  max-height: 80vh;  /* 图片高度不要超过屏幕高度的 80%（防止太高） */

  /*
    object-fit: contain 的作用：
    - 保持图片原始宽高比
    - 确保整张图完整显示（不会被裁剪）
    - 如果容器比图片比例宽，就留白；如果窄，也留白
    👉 类似 PowerPoint 里的“适应”功能
  */
  object-fit: contain;

  border-radius: 8px; /* 给图片加点圆角，和整体风格一致 */
}

/* ==============================
   【右侧登录区域】.login-section
   ============================== */
.login-section {
  padding: 2rem; /* 内边距：上下左右都留 2rem（≈32px） */

  /*
    使用 Flex 垂直排列子元素（标题、输入框、按钮等）
  */
  display: flex;
  flex-direction: column; /* 子元素从上到下排列 */
  gap: 1rem;              /* 子元素之间的间距（自动加在每两个之间） */
}

.login-section h2 {
  /*
    clamp(min, preferred, max) 是一个智能字体大小函数：
    - 最小 1.25rem（约 20px）
    - 理想值是 5vw（5% 的视口宽度）
    - 最大不超过 1.75rem（约 28px）
    👉 小屏字体小一点，大屏字体大一点，但不会太小或太大
  */
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  text-align: center; /* 标题文字居中 */
  color: #222;        /* 深灰色文字 */
}

/* ==============================
   【输入框样式】所有 input 都适用
   ============================== */
.input-group input {
  width: 100%;           /* 宽度占满父容器 */
  padding: 0.75rem;      /* 内边距：让文字不贴边 */
  border: 1px solid #ddd; /* 1像素灰色边框 */
  border-radius: 8px;    /* 圆角 */
  /*
    字体大小也用 clamp，适配不同屏幕
  */
  font-size: clamp(0.875rem, 3vw, 1rem);
}

/* ==============================
   【“记住我”区域】包含复选框和文字
   ============================== */
.remember-me {
  display: flex;         /* 水平排列复选框和文字 */
  align-items: center;   /* 垂直居中对齐 */
  font-size: clamp(0.8125rem, 2.8vw, 0.9375rem); /* 小一点的字体 */
  gap: 0.5rem;           /* 复选框和文字之间留 0.5rem 空隙 */
}

.remember-me input[type="checkbox"] {
  width: 1.2em;          /* 复选框宽度（em 相对于当前字体大小） */
  height: 1.2em;         /* 高度 */
  cursor: pointer;       /* 鼠标悬停时显示“手型”，提示可点击 */
}

/* ==============================
   【登录按钮】#loginBtn
   ============================== */
#loginBtn {
  width: 100%;           /* 宽度占满 */
  padding: 0.8rem;       /* 内边距 */
  background: #ff6f91;   /* 背景色：粉红色 */
  color: white;          /* 文字白色 */
  border: none;          /* 去掉默认边框 */
  border-radius: 8px;    /* 圆角 */
  font-size: clamp(0.875rem, 3vw, 1rem); /* 字体大小自适应 */
  cursor: pointer;       /* 鼠标悬停变手型 */
  /*
    transition: 添加平滑过渡效果
    当 background 改变时（比如 hover），0.3 秒内渐变过去
  */
  transition: background 0.3s;
}

/* 按钮悬停效果（鼠标放上去时） */
#loginBtn:hover {
  background: #ff4d7a; /* 颜色变深一点，表示“可点击” */
}

/* ==============================
   【响应式适配】让页面在不同设备上都好看
   ============================== */

/* 📱 手机和平板（屏幕宽度 ≤ 768 像素） */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* 只有一列，图片在上，表单在下 */
    max-width: 500px;           /* 最大宽度缩小 */
  }

  .hero-image {
    aspect-ratio: 16 / 9; /* 强制图片区域保持 16:9 比例（避免高度塌陷） */
    background: #f0f2f5;  /* 背景换成和 body 一样的浅色 */
  }

  .hero-image img {
    max-height: 30vh; /* 小屏上图片高度不超过屏幕的 30% */
  }
}

/* ⌚ 智能手表（极小屏，宽度 ≤ 320 像素） */
@media (max-width: 320px) {
  body {
    padding: 0.5rem; /* 页面四周空白再缩小 */
  }
  .login-section {
    padding: 1.25rem 0.8rem; /* 上下多一点，左右少一点 */
  }
  .input-group input {
    padding: 0.6rem;    /* 输入框内边距缩小 */
    font-size: 0.875rem; /* 固定小字体（避免 clamp 在极小屏失效） */
  }
}

/* 📺 电视（大屏，宽度 ≥ 1200 像素） */
@media (min-width: 1200px) {
  .login-section h2 {
    font-size: 2.25rem; /* 标题更大，适合远距离观看 */
  }
  .input-group input,
  #loginBtn {
    padding: 1rem;       /* 输入框和按钮更大，方便遥控器操作 */
    font-size: 1.125rem;
  }
  /*
    电视用户通常用遥控器（方向键）导航，
    :focus 表示当前被选中的元素，
    给它加一个明显的橙色外边框，方便知道焦点在哪
  */
  .input-group input:focus,
  #loginBtn:focus {
    outline: 3px solid #ff9e44; /* 橙色高亮边框 */
    outline-offset: 2px;        /* 边框离元素再远 2px，更清晰 */
  }
}