/* +----------------------------------------------------------------------
/* | 跑步活动报名系统 - 登录页面自定义样式
/* +----------------------------------------------------------------------
/* | 现代化的登录页面设计
/* +---------------------------------------------------------------------- */
/* ===== 页面整体 ===== */
/* ===============================
   登录页整体
================================ */
.login-page {
    display: flex;
    height: 100vh;
    background: #fff;
    overflow: hidden;
}

/* ===============================
   左侧品牌区
================================ */
.login-left {
    flex: 0 0 25%;
    min-width: 360px;          /* 原来 480，太大 */
    padding: 30px 48px ;        /* 稍微收一点 */
    background: linear-gradient(135deg, #1e1446, #3a1d6e);
    color: #fff;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
     /* 背景图 */
     background-image: url("https://jwzq-img.jianweizhiqi.com/mapp/534/20260131/1769833357_7038.jpg");
     background-size: cover;        /* 关键：铺满 */
     background-position: center;   /* 居中裁切 */
     background-repeat: no-repeat;
 
     /* 防止图片太花，保证文字可读 */
     position: relative;
}

.brand-logo {
    margin-left: -48px;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 100px;
}
.brand-logo img{
    width: 120px;
}

.brand-title {
    font-size: 35px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
}

.brand-desc {
    font-size: 14px;
    opacity: 0.85;
    line-height: 1.8;
}

/* ===============================
   右侧登录区
================================ */
.login-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card {
    width: 340px;
    padding: 80px 50px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0,0,0,0.08);
}

.login-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #333;
}

/* ===============================
   表单样式
================================ */
.form-item {
    position: relative;   /* 🔥 关键 */
    margin-bottom: 16px;
}

.form-item .layui-input {
    height: 44px;
    border-radius: 8px;
    background-color: #f7f7f7 !important;
    border: 1px solid #f7f7f7;
    padding: 0 14px;
    font-size: 14px;
}

.form-item .layui-input:focus {
    border-color: #3b6efb !important;
    /* box-shadow: 0 0 0 2px rgba(59,110,251,0.12); */
}


/* Layui 校验错误提示样式优化 */
.layui-form-danger,
.layui-form-mid {
    position: absolute !important;
    left: 0;
    bottom: -18px;              /* 紧贴输入框下方 */
    font-size: 12px;
    color: #ff4d4f;
    padding: 0;
    margin: 0;
    background: transparent;
    white-space: nowrap;
}

/* 输入框错误态 */
.layui-input.layui-form-danger {
    border-color: #ff4d4f !important;
    box-shadow: 0 0 0 2px rgba(255,77,79,0.08);
}

/* ===============================
   登录按钮
================================ */
.login-btn {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    background: #3b6efb;
    border: none;
    color: #fff;
    font-size: 15px;
    /* font-weight: 500; */
    transition:
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.12s ease;
}

/* 鼠标悬停 */
.login-btn:hover {
    background: #2f5ae0; /* 稍深一点 */
    box-shadow: 0 6px 18px rgba(59,110,251,0.35);
}

/* 按下瞬间 */
.login-btn:active {
    background: #284fcc;
    box-shadow: 0 3px 10px rgba(59,110,251,0.25);
}

/* ===============================
   移动端适配
================================ */
@media (max-width: 960px) {
    .login-left {
        display: none;
    }
}


/* 验证码行：输入框 + 图片 */
.captcha-row{
    display: flex;
    gap: 12px;
    align-items: flex-start; /* ✅ 让提示从上对齐，避免被图片高度影响 */
  }
  
  /* ✅ 关键：只让输入框区域当锚点 */
  .captcha-input{
    position: relative;      /* ✅ 锚点 */
    flex: 1;
    padding-bottom: 18px;    /* ✅ 给错误提示预留空间（不抖动） */
  }
  
  /* 验证码图片 */
  .captcha-img{
    width: 110px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
  }
  
  .captcha-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* ✅ 把 Layui 的错误提示“钉”在验证码输入框下方 */
  .captcha-input .layui-form-mid,
  .captcha-input .layui-form-danger{
    position: absolute !important;
    left: 0;
    bottom: 0;
    font-size: 12px;
    color: #ff4d4f;
    padding: 0;
    margin: 0;
    background: transparent;
    white-space: nowrap;
  }
  

  
  /* ===== 移动端 ===== */
  @media (max-width: 960px) {
    .login-left {
      display: none;
    }
  }