/* ============================================================================
 * LetScore 注册 / 登录页面样式表
 * ----------------------------------------------------------------------------
 * 网页模块结构（自上而下，与 index.html 对应）：
 *   1. 全局重置        —— * （所有元素）
 *   2. 页面背景        —— body
 *   3. 白色大卡片      —— .card（承载整个注册/登录界面）
 *   4. 网站标题区      —— .brand / .brand h1 / .subtitle
 *   5. 双标签导航      —— .tabs / .tab / .tab-indicator（登录 / 注册 切换）
 *   6. 表单面板        —— .panel（登录面板与注册面板）
 *   7. 表单字段        —— .field（帐号 / 密码 / 确认密码 / 验证码输入行）
 *   8. 验证码组合行    —— .captcha-row / .captcha-canvas
 *   9. 提交按钮        —— .submit（登录 / 注册按钮）
 *  10. 提示信息        —— .msg（表单下方的成功/错误提示文字）
 *  11. 弹窗            —— .modal-*（注册成功弹窗 + 已注册提醒弹窗）
 *
 * 全局常用色值速查（便于统一调整主题色）：
 *   主蓝色渐变:  #4a6cf7 → #6fb1fc
 *   深海军蓝:    #1d2b64
 *   成功绿(图标): #52b788   登录绿按钮: #27ae60   成功提示绿: #2e9e5b
 *   正文灰:      #1f2937    次要灰: #6b7280 / #5b6472 / #8a8f9c
 *   边框浅灰:    #d7dce6    浅底灰: #eef1f7 / #eceff4
 * ========================================================================== */


/* ============================================================================
 * 1. 全局重置 —— 应用于网页中所有元素
 * ========================================================================== */
* {
  box-sizing: border-box;   /* 让元素的宽高包含 padding 和 border，布局更直观 */
  margin: 0;                /* 清除浏览器默认外边距 */
  padding: 0;               /* 清除浏览器默认内边距 */
}


/* ============================================================================
 * 2. 页面背景 —— 整个浏览器窗口的底色与居中布局
 * ========================================================================== */
body {
  min-height: 100vh;        /* 最小高度铺满一屏，保证内容始终垂直居中 */
  display: flex;            /* 使用弹性布局 */
  align-items: center;      /* 垂直方向居中卡片 */
  justify-content: center;  /* 水平方向居中卡片 */
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; /* 字体（依次回退） */
  background: linear-gradient(135deg, #1d2b64 0%, #4a6cf7 55%, #6fb1fc 100%); /* 斜向渐变背景 */
  padding: 24px;            /* 四周留白，避免小屏时卡片贴边 */
}


/* ============================================================================
 * 3. 白色大卡片 —— 包裹整个注册/登录界面的圆角容器
 * ========================================================================== */
.card {
  width: 100%;              /* 宽度尽量撑满父容器 */
  max-width: 400px;         /* 但最宽不超过 400px，保持精致 */
  background: #fff;         /* 卡片白色背景 */
  border-radius: 16px;      /* 圆角大小 */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); /* 投影：X偏移 Y偏移 模糊半径 颜色 */
  padding: 32px 30px 30px;  /* 内边距：上 32px / 左右 30px / 下 30px */
}


/* ============================================================================
 * 4. 网站标题区 —— 卡片顶部的网站名称与副标题
 * ========================================================================== */
.brand {
  text-align: center;       /* 标题整体水平居中 */
  margin-bottom: 20px;      /* 与下方标签栏的间距 */
}

.brand h1 {                 /* 网站名称 "LetScore" */
  font-size: 32px;          /* 字号 */
  letter-spacing: 1px;      /* 字间距，让英文更舒展 */
  background: linear-gradient(90deg, #1d2b64, #4a6cf7); /* 作为文字填充的渐变色 */
  -webkit-background-clip: text; /* 让渐变只作用于文字（WebKit 内核） */
  background-clip: text;         /* 让渐变只作用于文字（标准写法） */
  color: transparent;       /* 文字本身透明，露出上面的渐变 */
}

.subtitle {                 /* 副标题 "注册与登录" */
  margin-top: 4px;          /* 与主标题的间距 */
  color: #8a8f9c;           /* 次要灰色文字 */
  font-size: 14px;          /* 字号 */
}


/* ============================================================================
 * 5. 双标签导航 —— “登录 / 注册”切换
 * ========================================================================== */
.tabs {
  position: relative;       /* 作为滑块 .tab-indicator 的定位基准 */
  display: flex;            /* 两个标签横向排列 */
  background: #eef1f7;      /* 标签栏浅灰底色 */
  border-radius: 10px;      /* 圆角 */
  margin-bottom: 24px;      /* 与下方表单面板的间距 */
}

.tab {
  flex: 1;                  /* 每个标签等宽平分 */
  padding: 11px 0;          /* 上下内边距，控制标签高度 */
  border: none;             /* 去掉按钮默认边框 */
  background: transparent;  /* 透明背景，露出父容器的浅灰 */
  color: #5b6472;           /* 未选中时的文字颜色 */
  font-size: 15px;          /* 字号 */
  cursor: pointer;          /* 鼠标移上去显示手型 */
  position: relative;       /* 相对定位 */
  z-index: 1;               /* 让文字浮在滑块之上 */
  transition: color 0.2s ease; /* 文字颜色切换动画 */
}

.tab.active {               /* 当前选中的标签 */
  color: #fff;              /* 选中文字变白 */
}

.tab-indicator {            /* 跟随在选中标签背后的蓝色滑块 */
  position: absolute;       /* 相对 .tabs 定位 */
  top: 4px;                 /* 距标签栏顶部 4px，形成内缩效果 */
  bottom: 4px;              /* 距标签栏底部 4px */
  width: calc(50% - 8px);   /* 宽度为标签栏一半减去两侧 4px 间距 */
  border-radius: 8px;       /* 滑块圆角 */
  background: linear-gradient(90deg, #4a6cf7, #6fb1fc); /* 主蓝色渐变 */
  transition: transform 0.25s ease; /* 滑块横向滑动的过渡动画 */
  transform: translateX(4px); /* 默认停在左侧（登录） */
}

.tab-indicator.register {   /* 当处于“注册”标签时 */
  transform: translateX(calc(100% + 4px)); /* 滑块右移一格到“注册”下方 */
}


/* ============================================================================
 * 6. 表单面板 —— 登录面板与注册面板的显示/隐藏
 * ========================================================================== */
.panel {
  display: none;            /* 默认隐藏面板 */
}

.panel.active {             /* 当前激活的面板 */
  display: block;           /* 显示为块级元素 */
}


/* ============================================================================
 * 7. 表单字段 —— 每个输入项（标签 + 输入框）
 * ========================================================================== */
.field {
  display: block;           /* 每个字段独占一行 */
  margin-bottom: 16px;      /* 字段之间的垂直间距 */
}

.field > span {             /* 字段的说明文字，如“帐号”“密码” */
  display: block;           /* 说明文字独占一行 */
  font-size: 13px;          /* 字号稍小 */
  color: #6b7280;           /* 次要灰色 */
  margin-bottom: 6px;       /* 与输入框的间距 */
}

.field input {              /* 各输入框 */
  width: 100%;              /* 撑满字段宽度 */
  padding: 11px 12px;       /* 上下/左右内边距，控制输入框高度与舒适度 */
  border: 1px solid #d7dce6; /* 边框颜色 */
  border-radius: 8px;       /* 圆角 */
  font-size: 14px;          /* 输入文字字号 */
  transition: border-color 0.15s ease, box-shadow 0.15s ease; /* 聚焦时的过渡效果 */
}

.field input:focus {        /* 输入框获得焦点时 */
  outline: none;            /* 去掉浏览器默认高亮外框 */
  border-color: #4a6cf7;    /* 边框变蓝 */
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.15); /* 外圈淡蓝色光环 */
}


/* ============================================================================
 * 8. 验证码组合行 —— “输入框 + 验证码画布”的并排布局
 * ========================================================================== */
.captcha-row {
  display: flex;            /* 输入框与画布横向排列 */
  gap: 10px;                /* 两者之间的间距 */
}

.captcha-row input {        /* 验证码输入框 */
  flex: 1;                  /* 占据剩余宽度 */
}

.captcha-canvas {           /* 验证码画布 */
  border-radius: 8px;       /* 圆角 */
  cursor: pointer;          /* 手型提示可点击刷新 */
  border: 1px solid #d7dce6; /* 边框颜色 */
  flex-shrink: 0;           /* 禁止被压缩，保证画布固定尺寸 */
}


/* ============================================================================
 * 9. 提交按钮 —— “登录”“注册”主按钮
 * ========================================================================== */
.submit {
  width: 100%;              /* 撑满整行 */
  padding: 12px;            /* 内边距，控制按钮高度 */
  border: none;             /* 去掉默认边框 */
  border-radius: 8px;       /* 圆角 */
  background: linear-gradient(90deg, #4a6cf7, #6fb1fc); /* 主蓝色渐变背景 */
  color: #fff;              /* 白色文字 */
  font-size: 16px;          /* 字号 */
  letter-spacing: 4px;      /* 字间距，让“登 录”这类文字更舒展 */
  cursor: pointer;          /* 手型提示可点击 */
  transition: transform 0.05s ease, box-shadow 0.15s ease; /* 按下与悬停动画 */
}

.submit:hover {             /* 鼠标悬停时 */
  box-shadow: 0 8px 20px rgba(74, 108, 247, 0.35); /* 增加蓝色投影，制造浮起感 */
}

.submit:active {            /* 鼠标按下时 */
  transform: translateY(1px); /* 轻微下移，模拟按下的手感 */
}


/* ============================================================================
 * 10. 提示信息 —— 表单下方的成功/错误提示文字
 * ========================================================================== */
.msg {
  margin-top: 12px;         /* 与上方按钮的间距 */
  min-height: 18px;         /* 预留高度，避免提示出现时布局跳动 */
  font-size: 13px;          /* 字号 */
  text-align: center;       /* 居中显示 */
  color: #e05555;           /* 默认红色（错误提示） */
}

.msg.success {              /* 成功提示 */
  color: #2e9e5b;           /* 绿色 */
}


/* ============================================================================
 * 11. 弹窗 —— “注册成功”与“已注册提醒”两个弹窗
 * ----------------------------------------------------------------------------
 * 结构：.modal-overlay（半透明遮罩）> .modal（白色弹窗盒子）
 *       弹窗盒子内按需包含：.modal-icon（图标）/ .modal-title（标题）
 *       / .modal-text（正文）/ .modal-actions（按钮组）/ .modal-btn（按钮）
 * ========================================================================== */

/* 遮罩层：覆盖整个屏幕的半透明背景 */
.modal-overlay {
  position: fixed;          /* 固定定位，相对浏览器窗口 */
  inset: 0;                 /* 四条边都贴边，铺满全屏 */
  background: rgba(0, 0, 0, 0.45); /* 半透明黑色遮罩 */
  display: none;            /* 默认隐藏；由 JS 添加 .show 后显示 */
  align-items: center;      /* 弹窗垂直居中 */
  justify-content: center;  /* 弹窗水平居中 */
  z-index: 100;             /* 层级最高，覆盖页面其他内容 */
  padding: 24px;            /* 四周留白，避免小屏时弹窗贴边 */
}

.modal-overlay.show {       /* 显示弹窗时 */
  display: flex;            /* 打开弹性布局，触发上面的居中 */
}

/* 白色弹窗盒子 */
.modal {
  width: 300px;             /* 弹窗固定宽度 */
  max-width: 100%;          /* 小屏下不超过屏幕 */
  background: #fff;         /* 白色背景 */
  border-radius: 18px;      /* 圆角 */
  padding: 40px 32px 32px;  /* 内边距：上 40／左右 32／下 32，营造呼吸感 */
  text-align: center;       /* 内容整体居中 */
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); /* 投影 */
  animation: modal-pop 0.18s ease; /* 弹出动画（见下方 @keyframes） */
}

/* 弹窗弹出动画：从缩小+透明，过渡到原始大小+不透明 */
@keyframes modal-pop {
  from { transform: scale(0.9); opacity: 0; } /* 起始：90% 尺寸、透明 */
  to   { transform: scale(1); opacity: 1; }   /* 结束：原始尺寸、不透明 */
}

/* 图标（注册成功弹窗顶部的绿色对勾圆） */
.modal-icon {
  width: 60px;              /* 宽度 */
  height: 60px;             /* 高度（与宽度相等，保证正圆） */
  margin: 0 auto 18px;      /* 上下 0、左右自动居中、下方留 18px 间距 */
  border-radius: 50%;       /* 圆角 50%，呈现正圆形 */
  background: #52b788;      /* 低饱和度现代绿 */
  color: #fff;              /* 对勾白色 */
  font-size: 34px;          /* 对勾字号 */
  line-height: 64px;        /* 行高等于高度，使对勾垂直居中 */
}

/* 弹窗标题 */
.modal-title {
  font-size: 20px;          /* 字号 */
  color: #1f2937;           /* 深灰标题色 */
  margin-bottom: 28px;      /* 与下方按钮的间距 */
}

/* 弹窗正文说明文字（如“您此前已完成注册…”） */
.modal-text {
  font-size: 14px;          /* 字号 */
  color: #6b7280;           /* 次要灰色 */
  margin-bottom: 36px;      /* 与下方按钮组的间距（已加大，让文字与操作按钮拉开距离） */
}

/* 按钮组：纵向排列容器 */
.modal-actions {
  display: flex;            /* 弹性布局 */
  flex-direction: column;   /* 按钮纵向堆叠 */
  gap: 10px;                /* 按钮之间的间距 */
}

/* 按钮组中的一行（用于“取消 / 仍注册”并排） */
.modal-row {
  display: flex;            /* 弹性布局 */
  gap: 10px;                /* 同一行按钮之间的间距 */
}

/* 弹窗内所有按钮的公共样式 */
.modal-btn {
  flex: 1;                  /* 在弹性容器中等分剩余空间 */
  padding: 11px;            /* 内边距，控制按钮高度 */
  border: none;             /* 去掉默认边框 */
  border-radius: 8px;       /* 圆角 */
  font-size: 15px;          /* 字号 */
  cursor: pointer;          /* 手型提示可点击 */
  transition: transform 0.05s ease, box-shadow 0.15s ease; /* 按下与悬停动画 */
}

.modal-btn:active {         /* 按钮按下时 */
  transform: translateY(1px); /* 轻微下移，提供按压反馈 */
}

/* 主按钮（注册成功弹窗的“确认”） */
.modal-btn.primary {
  width: calc(100% - 20px); /* 宽度比弹窗内容略窄，左右各留 10px */
  padding: 10px 12px;       /* 稍矮的按钮高度 */
  background: linear-gradient(90deg, #4a6cf7, #6fb1fc); /* 主蓝色渐变 */
  color: #fff;              /* 白色文字 */
}

.modal-btn.primary:hover {  /* 主按钮悬停 */
  box-shadow: 0 8px 20px rgba(74, 108, 247, 0.35); /* 蓝色投影浮起 */
}

/* 登录按钮（已注册提醒弹窗中，绿色突出显示） */
.modal-btn.login {
  background: #27ae60;      /* 绿色背景 */
  color: #fff;              /* 白色文字 */
  font-weight: 700;         /* 加粗，突出 */
  font-size: 16px;          /* 字号略大 */
  letter-spacing: 2px;      /* 字间距 */
}

.modal-btn.login:hover {    /* 登录按钮悬停 */
  background: #229954;      /* 更深的绿色 */
  box-shadow: 0 8px 20px rgba(39, 174, 96, 0.45); /* 绿色投影浮起 */
}

/* 取消按钮 */
.modal-btn.cancel {
  background: #eceff4;      /* 浅灰背景 */
  color: #5b6472;           /* 灰色文字 */
}

.modal-btn.cancel:hover {   /* 取消按钮悬停 */
  background: #e0e4ec;      /* 稍深的浅灰 */
}

/* 次要按钮（“仍注册”，透明底 + 蓝色描边） */
.modal-btn.secondary {
  background: transparent;  /* 透明背景 */
  color: #4a6cf7;           /* 蓝色文字 */
  border: 1px solid #4a6cf7; /* 蓝色描边 */
}

.modal-btn.secondary:hover {/* 次要按钮悬停 */
  background: #f0f4ff;      /* 淡蓝底色 */
}