/* 确保全屏居中 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #eef2f7; /* 窗口比图片大时的底色 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Microsoft YaHei", sans-serif;
  }
  
  /* 外层容器：负责全屏居中和背景底色 */
  .viewport {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white; /* 环境底色 */
    overflow: auto; /* 窗口过小时允许滚动，保护 wrapper 不变形 */
  }
  
  /* 背景图容器：固定尺寸，不随窗口缩放 */
  .login-wrapper {
    position: relative; /* 核心：为子元素提供定位基准 */
    width: 1200px;      /* 锁定图片宽度 */
    height: 675px;     /* 锁定图片高度 (16:9 示例) */
    
    background-image: url('/static/images/loginpage.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    
    border-radius: 12px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.2);
    flex-shrink: 0;     /* 防止被 Flex 容器挤压 */
  }
  
  /* 登录卡片：严格相对于 login-wrapper 定位 */
  .login-card {
    position: absolute; /* 相对于 login-wrapper */
    
    /* 精确控制在图片右侧留白区域的位置 */
    top: 200px;        /* 距离背景图顶部的固定距离 */
    right: 200px;      /* 距离背景图右边缘的固定距离 */
    
    width: 350px;
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }
  
  /* 品牌标题：同样相对于 wrapper 固定 */
  .brand-title {
    position: absolute;
    top: 100px;
    left: 260px;
    font-size: 24px;
    font-weight: bold;
    color: #444;
  }
  .brand-title span {
    color: #2ecc71;
    margin-left: 10px;
  }
  
  .title {
    padding: 5px 0;
  }
  /* 表单细节 */
  .input-group { margin-bottom: 20px; }
  .input-group label { display: block; margin-bottom: 8px; font-size: 14px; color: #666; }
  .input-group input { 
    width: 100%; 
    padding: 12px; 
    border: 1px solid #ddd; 
    border-radius: 8px; 
    box-sizing: border-box; /* 防止 padding 撑破宽度 */
  }
  
  #btn-login {
    width: 100%;
    padding: 12px;
    background: #2ecc71;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
  }
  
  .footer-links {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    font-size: 13px;
    color: #888;
  }
  .footer-links a {
    color: #888;
    text-decoration: none;
  }