/* =========================================================
   0) 全局基础：盒模型 + 字体
   ========================================================= */

/* 所有元素采用 border-box，避免宽度计算混乱 */
*, *::before, *::after { box-sizing: border-box; }

/* body 基础：去默认 margin，设置通用字体 */
body {
  margin: 0;
  font-family: system-ui, -apple-system, "trebuchet MS", Roboto, Arial, sans-serif;
}


/* =========================================================
   1) Card 外框（你的页面结构依赖 .card / .card-body）
   ========================================================= */

.card{
  /* 让 card 成为一个容器（可容纳内部结构） */
  position: relative;
  display: flex;
  flex-direction: column;

  /* 外观：白底、淡边框、圆角、凸出阴影 */
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  /*box-shadow: 0 8px 24px rgba(0,0,0,.06);*/

    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
   box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
    background: #ffffff;
    padding: 30px;



  /* 宽度：移动端 100%，桌面限制最大宽度并居中 */
  width: 100%;
  max-width: 620px;          /* 桌面卡片最大宽度（建议 480~620） */
  margin: 2rem auto 0;       /* 顶部留白 + 水平居中 */
}

/* card-body 内边距（你 HTML 用到了 .card-body） */
.card-body{
  flex: 1 1 auto;
  padding: 1rem;
}

/* 移动端：左右留边，圆角略小一点更自然 */
@media (max-width: 576px){
  .card{
    margin-left: 16px;
    margin-right: 16px;
    border-radius: 8px;
  }
}


/* =========================================================
   2) 常用 spacing / 文本工具类（你的 HTML 里用到了这些 class）
   ========================================================= */

.mt-5{ margin-top: 3rem !important; }
.mt-4{ margin-top: 1.5rem !important; }
.mt-3{ margin-top: 1rem !important; }
.mb-5{ margin-bottom: 3rem !important; }
.mb-3{ margin-bottom: 1rem !important; }

.pt-4{ padding-top: 1.5rem !important; }
.px-4{ padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.pb-3{ padding-bottom: 1rem !important; }

.d-grid{ display: grid !important; }

.text-center{ text-align: center !important; }
.text-uppercase{ text-transform: uppercase !important; }
.text-muted{ color: #6c757d !important; }
.text-decoration-none{ text-decoration: none !important; }

/* 移动端：卡片内部 padding 更紧凑，顶部 margin 更小 */
@media (max-width: 576px){
  .px-4{ padding-left: 1rem !important; padding-right: 1rem !important; }
  .pt-4{ padding-top: 1rem !important; }
  .mt-5{ margin-top: 1.5rem !important; }
}


/* =========================================================
   3) 表单输入框 form-control：下划线风格（永不出现全包框）
   ========================================================= */

.form-control{
  display: block;
  width: 100%;

  /* 字体与内边距（左右 padding 设为 0，贴合下划线风格） */
  font-size: 1rem;
  line-height: 1.5;
  padding: .5rem 0;

  /* 颜色 */
  color: #212529;
  background: transparent;

  /* 关键：去掉四周边框，只保留下划线 */
  border: 0;
  border-bottom: 1px solid #cfd4da;

  /* 下划线风格不需要圆角和阴影 */
  border-radius: 0;
  box-shadow: none;

  /* 防止某些浏览器默认 outline */
  outline: none;
}

/* focus（点击/键盘聚焦）：下划线加粗、变蓝 */
.form-control:focus,
.form-control:focus-visible{
  border: 0;
  border-bottom: 2px solid #0d6efd;
  box-shadow: none;
  outline: none;
}


/* =========================================================
   4) 表单校验：错误/正确状态（JS 必需）
   ========================================================= */

/* 错误状态：只改变下划线为红色（不出现全框） */
.form-control.is-invalid{
  border: 0 !important;
  border-bottom: 2px solid #dc3545 !important;
  box-shadow: none !important;
}

/* 正确状态：只改变下划线为绿色（可选保留） */
.form-control.is-valid{
  border: 0 !important;
  border-bottom: 2px solid #198754 !important;
  box-shadow: none !important;
}

/* 错误提示文字容器（bootstrap.php 里 errorElement=em + class=invalid-feedback） */
.invalid-feedback{
  /* 强制显示：jQuery validate 插入后必须可见 */
  display: flex;
  align-items: center;
  gap: 6px;

  /* 视觉：红色、小字、与输入框有间距 */
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 6px;
}

/* 在红色文字前增加 SVG 图标（你要求的 exclamation-circle） */
.invalid-feedback::before{
  content: "";
  width: 16px;
  height: 16px;
  flex-shrink: 0;

  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;

  /* SVG 图标（红色） */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E");
}


/* =========================================================
   5) Alert 成功提示（common.js 会插入 .alert .alert-success）
   ========================================================= */

.alert{
  padding: .75rem 1rem;
  border: 1px solid transparent;
  border-radius: .25rem;
}

/* 成功提示：绿色底 + 深绿字 */
.alert-success{
  color: #0f5132;
  background: #d1e7dd;
  border-color: #badbcc;
}


/* =========================================================
   6) 按钮（你的 HTML 用到了 btn / btn-success / btn-lg；JS 会加 disabled）
   ========================================================= */

.btn{
  display: inline-block;
  padding: .375rem .75rem;
  border: 1px solid transparent;
  border-radius: .25rem;
  cursor: pointer;

  text-align: center;
  line-height: 1.5;
}

/* 你当前配色：主色偏紫 + 深蓝边框 */
.btn-success{
  color: #fff;
  background: #5e5f95;
  border-color: #0e314b;
}
.btn-success:hover{
  background: #68688b;
  border-color: #0e314b;
}

/* 大按钮尺寸 */
.btn-lg{
  padding: .5rem 1rem;
  font-size: 1.25rem;
  border-radius: .3rem;
}

/* JS 的 loadingButton 会 .addClass("disabled") 并设置 disabled 属性 */
.btn:disabled,
.btn.disabled{
  opacity: .65;
  cursor: not-allowed;
  pointer-events: none;
}


/* =========================================================
   7) 三个表单切换（login.js 必需：.form-wrapper / .active）
   ========================================================= */

.form-wrapper{ display: none; }
.form-wrapper.active{ display: block; }

/* 必填星号颜色 */
label .required{ color: #a00; }


/* =========================================================
   Placeholder 文本样式（极简、低干扰）
   ========================================================= */

.form-control::placeholder{
  color:#9aa0a6;        /* 比正文浅，但不发虚 */
  font-size:.95rem;
}

/* focus 时 placeholder 稍微淡一点（更干净） */
.form-control:focus::placeholder{
  color:#c2c6cc;
}


/* 统一：三个表单的按钮区与上方输入区间距 */
.form-wrapper form {
  display: flex;
  flex-direction: column;
  gap: 1rem;              /* 控制输入框之间、按钮区之前的统一间距 */
}

/* 按钮区额外留白（确保 bot_protection 与按钮之间永远有空间） */
.form-wrapper .form-actions {
  margin-top: 3rem;     /* 小额外留空，可调大如 .5rem / 1rem */
}

/* 手机端优化 */
@media (max-width: 576px) {
  .form-wrapper .form-actions {
    margin-top: 2rem;
  }
}

/* 如果你有全局把按钮 margin 清零的规则，这里强制回来 */
.form-wrapper .form-actions .btn {
  margin-top: 0 !important;
}

.form-wrapper .mb-3{ margin-bottom: 1rem; }

.success-icon {
  width: 40px;
  height: 40px;
  color: #22c55e;
  display: block;
  margin: 0 auto 12px;
}

/* 表单主标题（Log In） */
.form-title {
    text-align: center;      /* 水平居中 */
    font-size: 2.5rem;       /* 字号 */
    color: #1e237e;          /* 字体颜色 */
    font-weight: 300;        /* 细字重 */
    margin: 1.5rem 0 3rem;   /* 上下留白，替代 mb-5 mt-3 */
    line-height: 1.2;
}